|
|
@ -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 |
|
|
|