wix-style-react/dist/src/EditableTitle/EditableTitle.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Heading = _interopRequireDefault(require("../Heading"));
var _Input = _interopRequireDefault(require("../Input/Input"));
var _EditableTitleSt = require("./EditableTitle.st.css");
var _constants = require("./constants");
var _context = require("../WixStyleReactProvider/context");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/EditableTitle/EditableTitle.js";
var DEFAULT_MAX_LENGTH = 100;
class EditableTitle extends _react.default.Component {
  constructor(props) {
    super(props);
    this.onChange = e => {
      this.setState({
        value: e.target.value
      });
    };
    this.showPlaceholder = () => !this.state.value && this.props.defaultValue;
    this.onFocus = () => {
      var value = this.state.value || this.props.defaultValue;
      var selectAll = !this.state.focus;
      this.setState({
        focus: true,
        value
      }, () => {
        this.wsrInput.focus();
        selectAll && this.wsrInput.select();
      });
    };
    this.onEnterPressed = () => {
      this.wsrInput.blur();
    };
    this.onValueSubmission = () => {
      var 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() {
    var {
      dataHook,
      className,
      maxLength
    } = this.props;
    var focused = this.state.focus;
    return /*#__PURE__*/_react.default.createElement(_context.WixStyleReactContext.Consumer, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 45,
        columnNumber: 7
      }
    }, _ref => {
      var {
        newColorsBranding
      } = _ref;
      return /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _EditableTitleSt.st)(_EditableTitleSt.classes.root, {
          newColorsBranding
        }, className),
        "data-hook": dataHook,
        tabIndex: 0,
        onFocus: this.onFocus,
        onClick: this.onFocus,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 47,
          columnNumber: 11
        }
      }, /*#__PURE__*/_react.default.createElement("div", {
        "data-hook": _constants.dataHooks.heading,
        className: (0, _EditableTitleSt.st)(_EditableTitleSt.classes.headingWrapper, {
          focused,
          showPlaceholder: !!this.showPlaceholder()
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 54,
          columnNumber: 13
        }
      }, /*#__PURE__*/_react.default.createElement(_Heading.default, {
        ellipsis: true,
        size: "extraLarge",
        className: _EditableTitleSt.classes.heading,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 61,
          columnNumber: 15
        }
      }, this.props.value || this.state.value || this.props.defaultValue)), /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _EditableTitleSt.st)(_EditableTitleSt.classes.activationIndicator, {
          focused,
          newColorsBranding
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 67,
          columnNumber: 13
        }
      }, this.props.value || this.state.value || this.props.defaultValue), /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _EditableTitleSt.st)(_EditableTitleSt.classes.renamingField, {
          focused
        }),
        "data-hook": _constants.dataHooks.renamingField,
        onFocus: e =>
        // input does not pass his event so we need to catch it
        e.stopPropagation(),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 75,
          columnNumber: 13
        }
      }, /*#__PURE__*/_react.default.createElement(_Input.default, {
        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,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 85,
          columnNumber: 15
        }
      })));
    });
  }
}
EditableTitle.displayName = 'EditableTitle';
EditableTitle.defaultProps = {
  defaultValue: ''
};
EditableTitle.propTypes = {
  /** Defines a text value that is shown initially */
  initialValue: _propTypes.default.string,
  /** Defines text value that is shown when the title is empty. When clicked this value will become a default 'value' */
  defaultValue: _propTypes.default.string,
  /** Triggers function when a user is done with editing the title */
  onSubmit: _propTypes.default.func,
  /** Sets the max number of characters that a user can type in the title */
  maxLength: _propTypes.default.number,
  /** Sets focus on the title as soon as the component is rendered (on mount)  */
  autoFocus: _propTypes.default.bool,
  /** Triggers function when the title is being edited */
  onChange: _propTypes.default.func,
  /** Sets the controlled value of the input */
  value: _propTypes.default.string
};
var _default = exports.default = EditableTitle;
//# sourceMappingURL=EditableTitle.js.map