88 lines
1.9 KiB
JavaScript
88 lines
1.9 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
|
|
class EditableLabel extends React.Component {
|
|
constructor({value}) {
|
|
super()
|
|
this.state = {value: value}
|
|
}
|
|
|
|
getText = el => {
|
|
return el.innerText
|
|
}
|
|
|
|
onTextChange = ev => {
|
|
const value = this.getText(ev.target)
|
|
this.setState({value: value})
|
|
}
|
|
|
|
componentDidMount() {
|
|
if (this.props.autoFocus) {
|
|
this.refDiv.focus()
|
|
}
|
|
}
|
|
|
|
onBlur = () => {
|
|
this.props.onChange(this.state.value)
|
|
}
|
|
|
|
onPaste = ev => {
|
|
ev.preventDefault()
|
|
const value = ev.clipboardData.getData('text')
|
|
document.execCommand('insertText', false, value)
|
|
}
|
|
|
|
getClassName = () => {
|
|
const placeholder = this.state.value === '' ? 'comPlainTextContentEditable--has-placeholder' : ''
|
|
return `comPlainTextContentEditable ${placeholder}`
|
|
}
|
|
|
|
onKeyDown = e => {
|
|
if (e.keyCode === 13) {
|
|
this.props.onChange(this.state.value)
|
|
this.refDiv.blur()
|
|
e.preventDefault()
|
|
}
|
|
if (e.keyCode === 27) {
|
|
this.refDiv.value = this.props.value
|
|
this.setState({value: this.props.value})
|
|
// this.refDiv.blur()
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const placeholder = this.props.value.length > 0 ? false : this.props.placeholder
|
|
return (
|
|
<div
|
|
ref={ref => (this.refDiv = ref)}
|
|
contentEditable="true"
|
|
className={this.getClassName()}
|
|
onPaste={this.onPaste}
|
|
onBlur={this.onBlur}
|
|
onInput={this.onTextChange}
|
|
onKeyDown={this.onKeyDown}
|
|
placeholder={placeholder}
|
|
/>
|
|
)
|
|
}
|
|
}
|
|
|
|
EditableLabel.propTypes = {
|
|
onChange: PropTypes.func,
|
|
placeholder: PropTypes.string,
|
|
autoFocus: PropTypes.bool,
|
|
inline: PropTypes.bool,
|
|
value: PropTypes.string
|
|
}
|
|
|
|
EditableLabel.defaultProps = {
|
|
onChange: () => {},
|
|
placeholder: '',
|
|
autoFocus: false,
|
|
inline: false,
|
|
value: ''
|
|
}
|
|
export default EditableLabel
|