101 lines
2.6 KiB
JavaScript
101 lines
2.6 KiB
JavaScript
import cn from 'classnames';
|
|
import styles from './linkStyledInput.css';
|
|
|
|
export default class LinkStyledInput extends React.PureComponent {
|
|
state = {
|
|
value: this.props.value || '',
|
|
changing: false,
|
|
}
|
|
|
|
componentDidUpdate(prevProps, prevState) {
|
|
if (prevProps.value !== this.props.value) {
|
|
this.setState({ value: this.props.value });
|
|
}
|
|
|
|
if (!prevState.changing && this.state.changing) {
|
|
this.inputRef.focus();
|
|
document.addEventListener('click', this.onEndChange, false);
|
|
this.inputRef.addEventListener('blur', this.onEndChange, false);
|
|
this.inputRef.addEventListener('keydown', this.escapeHandler, false);
|
|
}
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
document.removeEventListener('click', this.onEndChange, false);
|
|
if (this.inputRef) {
|
|
this.inputRef.removeEventListener('blur', this.onEndChange, false);
|
|
this.inputRef.removeEventListener('keydown', this.escapeHandler, false);
|
|
}
|
|
}
|
|
|
|
onStartChange = () => {
|
|
this.setState({ changing: true });
|
|
}
|
|
|
|
onChange = (e) => {
|
|
this.props.onChange(e, e.target);
|
|
if (!this.props.value) {
|
|
this.setState({ value: e.target.value });
|
|
}
|
|
}
|
|
|
|
onEndChange = (e) => {
|
|
e.preventDefault();
|
|
if (this.inputRef === e.target) return;
|
|
document.removeEventListener('click', this.onEndChange, false);
|
|
this.setState({
|
|
changing: false,
|
|
value: this.state.value.trim(),
|
|
});
|
|
}
|
|
|
|
escapeHandler = (e) => {
|
|
if (e.keyCode === 27) {
|
|
this.onEndChange(e);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
name,
|
|
placeholder,
|
|
displayLabel,
|
|
maxLength,
|
|
fluid,
|
|
consoleFont = false,
|
|
disabled,
|
|
disabledStyle = disabled,
|
|
className = '',
|
|
hint = "Click to Type",
|
|
} = this.props;
|
|
const { changing, value = this.props.value } = this.state;
|
|
|
|
const text = value ? value.trim() : displayLabel;
|
|
return (
|
|
<form className={ className } onSubmit={ this.onEndChange }>
|
|
{ changing ?
|
|
<input
|
|
ref={ (ref) => { this.inputRef = ref; } }
|
|
className={ styles.input }
|
|
name={ name }
|
|
value={ value }
|
|
maxLength={ maxLength || 35 }
|
|
onChange={ this.onChange }
|
|
placeholder={ placeholder }
|
|
data-fluid={ fluid }
|
|
/>
|
|
:
|
|
<div
|
|
className={ cn(styles.linkStyled, {
|
|
[ styles.disabled ] : disabledStyle,
|
|
[ styles.console ]: consoleFont,
|
|
}) }
|
|
onClick={ disabled ? null : this.onStartChange }
|
|
>
|
|
{text}
|
|
</div>
|
|
}
|
|
</form>
|
|
);
|
|
}
|
|
}
|