@helpscout/hsds-react/components/EditableField/EditableField.Mask.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = exports.EditableFieldMask = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames = _interopRequireDefault(require("classnames"));

var _fastDeepEqual = _interopRequireDefault(require("fast-deep-equal"));

var _lodash = _interopRequireDefault(require("lodash.isnil"));

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _EditableField = require("./EditableField.css");

var _EditableField2 = _interopRequireDefault(require("./EditableField.Truncated"));

var _Truncate = _interopRequireDefault(require("../Truncate"));

var _EditableField3 = require("./EditableField.utils");

var _jsxRuntime = require("react/jsx-runtime");

var EditableFieldMask = /*#__PURE__*/function (_React$Component) {
  (0, _inheritsLoose2.default)(EditableFieldMask, _React$Component);

  function EditableFieldMask() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.valueRef = void 0;

    _this.setValueNode = function (node) {
      _this.valueRef = node;
    };

    _this.handleValueKeyDown = function (event) {
      var _this$props = _this.props,
          name = _this$props.name,
          onValueKeyDown = _this$props.onValueKeyDown;
      onValueKeyDown({
        event: event,
        name: name
      });
    };

    _this.handleValueBlur = function () {
      var valueNode = _this.valueRef;
      valueNode && valueNode.removeAttribute('tabindex');
    };

    return _this;
  }

  var _proto = EditableFieldMask.prototype;

  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
    if (nextProps.maskTabIndex !== this.props.maskTabIndex) {
      return true;
    }

    if (!(0, _fastDeepEqual.default)(nextProps.fieldValue, this.props.fieldValue)) {
      return true;
    }

    return false;
  };

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    var _this$props2 = this.props,
        name = _this$props2.name,
        maskTabIndex = _this$props2.maskTabIndex;
    var valueNode = this.valueRef;

    if (prevProps.maskTabIndex !== maskTabIndex && maskTabIndex === name) {
      valueNode.setAttribute('tabindex', '0');
      valueNode.focus();
    } else if (prevProps.maskTabIndex === name && ((0, _lodash.default)(maskTabIndex) || maskTabIndex === prevProps.maskTabIndex)) {
      valueNode && valueNode.removeAttribute('tabindex');
      valueNode.blur();
    }
  };

  _proto.render = function render() {
    var _this$props3 = this.props,
        actions = _this$props3.actions,
        disabled = _this$props3.disabled,
        emphasize = _this$props3.emphasize,
        fieldValue = _this$props3.fieldValue,
        placeholder = _this$props3.placeholder,
        type = _this$props3.type,
        validationInfo = _this$props3.validationInfo,
        valueOptions = _this$props3.valueOptions,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props3, ["actions", "disabled", "emphasize", "fieldValue", "placeholder", "type", "validationInfo", "valueOptions"]);
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_EditableField.EditableFieldMaskUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      className: (0, _classnames.default)(_EditableField3.MASK_CLASSNAMES.component, disabled && _EditableField3.STATES_CLASSNAMES.isDisabled, validationInfo && _EditableField3.STATES_CLASSNAMES.withValidation),
      children: [valueOptions ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditableField.MaskOptionUI, {
        className: _EditableField3.MASK_CLASSNAMES.option,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.default, {
          children: fieldValue.option
        })
      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditableField.MaskValueUI, {
        className: (0, _classnames.default)(_EditableField3.MASK_CLASSNAMES.value, !fieldValue.value && _EditableField3.STATES_CLASSNAMES.withPlaceholder, emphasize && _EditableField3.STATES_CLASSNAMES.isEmphasized),
        ref: this.setValueNode,
        onBlur: this.handleValueBlur,
        onKeyDown: this.handleValueKeyDown,
        numberOfActions: actions ? actions.length : 0,
        children: fieldValue.value ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditableField2.default, {
          string: fieldValue.value,
          splitter: type === 'email' ? '@' : undefined
        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          className: _EditableField3.STATES_CLASSNAMES.isPlaceholder,
          children: placeholder
        })
      })]
    }));
  };

  return EditableFieldMask;
}(_react.default.Component);

exports.EditableFieldMask = EditableFieldMask;

function noop() {}

EditableFieldMask.defaultProps = {
  'data-cy': 'EditableFieldMask',
  disabled: false,
  emphasize: false,
  maskTabIndex: null,
  type: 'text',
  onValueKeyDown: noop
};
EditableFieldMask.propTypes = {
  actions: _propTypes.default.any,
  disabled: _propTypes.default.bool,
  emphasize: _propTypes.default.bool,
  fieldValue: _propTypes.default.any,
  maskTabIndex: _propTypes.default.any,
  name: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
  placeholder: _propTypes.default.string,
  type: _propTypes.default.string,
  validationInfo: _propTypes.default.object,
  valueOptions: _propTypes.default.arrayOf(_propTypes.default.any),
  onValueKeyDown: _propTypes.default.func,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string
};
var _default = EditableFieldMask;
exports.default = _default;