55 lines
1.2 KiB
JavaScript
55 lines
1.2 KiB
JavaScript
|
import React, { PureComponent } from 'react';
|
||
|
|
|
||
|
|
const style = {
|
||
|
|
background: 'none',
|
||
|
|
font: 'inherit'
|
||
|
|
};
|
||
|
|
|
||
|
|
export default class Editable extends PureComponent {
|
||
|
|
state = { editing: false };
|
||
|
|
|
||
|
|
startEditing = () => {
|
||
|
|
if (this.props.editable) {
|
||
|
|
this.initialValue = this.props.value;
|
||
|
|
this.setState({ editing: true });
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
stopEditing = () => {
|
||
|
|
const { validate, value, onChange } = this.props;
|
||
|
|
if (validate && !validate(value)) {
|
||
|
|
onChange(this.initialValue);
|
||
|
|
}
|
||
|
|
this.setState({ editing: false });
|
||
|
|
};
|
||
|
|
|
||
|
|
handleKey = e => {
|
||
|
|
if (e.key === 'Enter') {
|
||
|
|
this.stopEditing();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
handleChange = e => this.props.onChange(e.target.value);
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const { children, className, value } = this.props;
|
||
|
|
return (
|
||
|
|
<div onClick={this.startEditing}>
|
||
|
|
{this.state.editing ?
|
||
|
|
<input
|
||
|
|
autoFocus
|
||
|
|
className={className}
|
||
|
|
style={style}
|
||
|
|
type="text"
|
||
|
|
value={value}
|
||
|
|
onBlur={this.stopEditing}
|
||
|
|
onChange={this.handleChange}
|
||
|
|
onKeyDown={this.handleKey}
|
||
|
|
/> :
|
||
|
|
children
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|