@wix/design-system
Version:
@wix/design-system
72 lines • 3.38 kB
JavaScript
import React from 'react';
import Heading from '../Heading';
import { st, classes } from './EditableTitle.st.css.js';
import { dataHooks } from './constants';
const DEFAULT_MAX_LENGTH = 100;
class EditableTitle extends React.Component {
constructor(props) {
super(props);
this.wsrInput = React.createRef();
this.onChange = e => {
this.setState({ value: e.target.value });
};
this.showPlaceholder = () => !this.state.value && this.props.defaultValue;
this.onFocus = () => {
const value = this.state.value || this.props.defaultValue;
const selectAll = !this.state.focus;
this.setState({ focus: true, value }, () => {
this.wsrInput.current.focus();
selectAll && this.wsrInput.current.select();
});
};
this.onKeyDown = e => {
if (e.key === 'Enter' || e.keyCode === 13) {
this.onEnterPressed();
}
};
this.onEnterPressed = () => {
this.wsrInput.current.blur();
};
this.onValueSubmission = () => {
const value = this.state.value || this.props.defaultValue;
this.setState({ value, focus: false }, () => {
if (typeof this.props.onSubmit === 'function') {
this.props.onSubmit(value);
}
});
};
this.state = {
focus: false,
value: props.initialValue || '',
};
}
componentDidMount() {
if (this.props.autoFocus)
this.onFocus();
}
render() {
const { dataHook, className, maxLength } = this.props;
const focused = this.state.focus;
return (React.createElement("div", { className: st(classes.root, className), "data-hook": dataHook, tabIndex: focused ? -1 : 0, onFocus: this.onFocus, onClick: this.onFocus },
React.createElement("div", { "data-hook": dataHooks.heading, className: st(classes.headingWrapper, {
focused,
showPlaceholder: !!this.showPlaceholder(),
}) },
React.createElement(Heading, { ellipsis: true, size: "extraLarge", className: classes.heading }, this.props.value || this.state.value || this.props.defaultValue)),
React.createElement("div", { className: st(classes.activationIndicator, {
focused,
}) }, this.props.value || this.state.value || this.props.defaultValue),
React.createElement("div", { className: st(classes.renamingField, {
focused,
}), "data-hook": dataHooks.renamingField, onFocus: e =>
// input does not pass his event so we need to catch it
e.stopPropagation() },
React.createElement("input", { className: classes.input, "data-hook": dataHooks.input, onBlur: this.onValueSubmission, ref: this.wsrInput, value: this.props.value ? this.props.value : this.state.value, maxLength: maxLength || DEFAULT_MAX_LENGTH, onChange: this.props.onChange ? this.props.onChange : this.onChange, onKeyDown: this.onKeyDown }))));
}
}
EditableTitle.displayName = 'EditableTitle';
EditableTitle.defaultProps = {
defaultValue: '',
};
export default EditableTitle;
//# sourceMappingURL=EditableTitle.js.map