wix-style-react
Version:
wix-style-react
88 lines • 4.27 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import Heading from '../Heading';
import Input from '../Input/Input';
import { st, classes } from './EditableTitle.st.css';
import { dataHooks } from './constants';
import { WixStyleReactContext } from '../WixStyleReactProvider/context';
const DEFAULT_MAX_LENGTH = 100;
class EditableTitle extends React.Component {
constructor(props) {
super(props);
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.focus();
selectAll && this.wsrInput.select();
});
};
this.onEnterPressed = () => {
this.wsrInput.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(WixStyleReactContext.Consumer, null, ({ newColorsBranding }) => (React.createElement("div", { className: st(classes.root, { newColorsBranding }, className), "data-hook": dataHook, tabIndex: 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,
newColorsBranding,
}) }, 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, { autoSelect: false, textOverflow: "clip", maxLength: maxLength || DEFAULT_MAX_LENGTH, onChange: this.props.onChange ? this.props.onChange : this.onChange, value: this.props.value ? this.props.value : this.state.value, ref: wsrInput => (this.wsrInput = wsrInput), onBlur: this.onValueSubmission, onEnterPressed: this.onEnterPressed }))))));
}
}
EditableTitle.displayName = 'EditableTitle';
EditableTitle.defaultProps = {
defaultValue: '',
};
EditableTitle.propTypes = {
/** Defines a text value that is shown initially */
initialValue: PropTypes.string,
/** Defines text value that is shown when the title is empty. When clicked this value will become a default 'value' */
defaultValue: PropTypes.string,
/** Triggers function when a user is done with editing the title */
onSubmit: PropTypes.func,
/** Sets the max number of characters that a user can type in the title */
maxLength: PropTypes.number,
/** Sets focus on the title as soon as the component is rendered (on mount) */
autoFocus: PropTypes.bool,
/** Triggers function when the title is being edited */
onChange: PropTypes.func,
/** Sets the controlled value of the input */
value: PropTypes.string,
};
export default EditableTitle;
//# sourceMappingURL=EditableTitle.js.map