m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Convert EditableLabel component to use JSX (#7543)

Browse Source
This commit is contained in:
Whymarrh Whitby 2019-11-24 17:51:21 -03:30 committed by GitHub
parent 1cac6f2768
commit 04442318d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 44 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
ui/app/components/ui/editable-label.js
View File

@ -1,16 +1,17 @@
const { Component } = require('react') import classnames from 'classnames'
const PropTypes = require('prop-types') import PropTypes from 'prop-types'
const h = require('react-hyperscript') import React, { Component } from 'react'
const classnames = require('classnames')
class EditableLabel extends Component { class EditableLabel extends Component {
constructor (props) { static propTypes = {
super(props) onSubmit: PropTypes.func.isRequired,
defaultValue: PropTypes.string,
className: PropTypes.string,
}
this.state = { state = {
isEditing: false, isEditing: false,
value: props.defaultValue || '', value: this.props.defaultValue || '',
}
} }
handleSubmit () { handleSubmit () {
@ -24,46 +25,41 @@ class EditableLabel extends Component {
.then(() => this.setState({ isEditing: false })) .then(() => this.setState({ isEditing: false }))
} }
saveIfEnter (event) {
if (event.key === 'Enter') {
this.handleSubmit()
}
}
renderEditing () { renderEditing () {
const { value } = this.state const { value } = this.state
return ([ return [(
h('input.large-input.editable-label__input', { <input
type: 'text', key={1}
required: true, type="text"
dir: 'auto', required
value: this.state.value, dir="auto"
onKeyPress: (event) => { value={this.state.value}
onKeyPress={(event) => {
if (event.key === 'Enter') { if (event.key === 'Enter') {
this.handleSubmit() this.handleSubmit()
} }
}, }}
onChange: event => this.setState({ value: event.target.value }), onChange={event => this.setState({ value: event.target.value })}
className: classnames({ 'editable-label__input--error': value === '' }), className={classnames('large-input', 'editable-label__input', {
}), 'editable-label__input--error': value === '',
h('div.editable-label__icon-wrapper', [ })}
h('i.fa.fa-check.editable-label__icon', { />
onClick: () => this.handleSubmit(), ), (
}), <div className="editable-label__icon-wrapper" key={2}>
]), <i className="fa fa-check editable-label__icon" onClick={() => this.handleSubmit()} />
]) </div>
)]
} }
renderReadonly () { renderReadonly () {
return ([ return [(
h('div.editable-label__value', this.state.value), <div key={1} className="editable-label__value">{this.state.value}</div>
h('div.editable-label__icon-wrapper', [ ), (
h('i.fa.fa-pencil.editable-label__icon', { <div key={2} className="editable-label__icon-wrapper">
onClick: () => this.setState({ isEditing: true }), <i className="fa fa-pencil editable-label__icon" onClick={() => this.setState({ isEditing: true })} />
}), </div>
]), )]
])
} }
render () { render () {
@ -71,19 +67,15 @@ class EditableLabel extends Component {
const { className } = this.props const { className } = this.props
return ( return (
h('div.editable-label', { className: classnames(className) }, <div className={classnames('editable-label', className)}>
isEditing {
? this.renderEditing() isEditing
: this.renderReadonly() ? this.renderEditing()
) : this.renderReadonly()
}
</div>
) )
} }
} }
EditableLabel.propTypes = {
onSubmit: PropTypes.func.isRequired,
defaultValue: PropTypes.string,
className: PropTypes.string,
}
module.exports = EditableLabel module.exports = EditableLabel