@helpscout/hsds-react/components/EditableField/EditableField.Actions.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.EditableFieldActions = 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 _EditableField = require("./EditableField.css");

var _Icon = _interopRequireDefault(require("../Icon"));

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

var _urls = require("../../utilities/urls");

var _EditableField2 = require("./EditableField.constants");

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

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

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

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

  function EditableFieldActions() {
    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.handleActionClick = function (_ref) {
      var action = _ref.action,
          event = _ref.event;
      var _this$props = _this.props,
          name = _this$props.name,
          value = _this$props.fieldValue.value;

      if (action.name === 'delete') {
        _this.props.deleteAction({
          action: action,
          name: name,
          event: event
        });
      }

      if (action.name === 'link') {
        window && window.open((0, _urls.normalizeUrl)(value));
      } else {
        _this.props.customAction({
          action: action,
          name: name,
          event: event
        });
      }
    };

    return _this;
  }

  var _proto = EditableFieldActions.prototype;

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

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

    return false;
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$props2 = this.props,
        actions = _this$props2.actions,
        validationInfo = _this$props2.validationInfo,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props2, ["actions", "validationInfo"]);
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditableField.EditableFieldActionsUI, (0, _extends2.default)({}, rest, {
      className: (0, _classnames.default)(_EditableField3.ACTIONS_CLASSNAMES.actions, validationInfo && _EditableField3.STATES_CLASSNAMES.withValidation),
      numberOfActions: actions.length,
      children: actions.map(function (action) {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditableField.FieldButtonUI, (0, _extends2.default)({
          className: _EditableField3.ACTIONS_CLASSNAMES.fieldButton + " action-" + action.name,
          tabIndex: -1,
          type: "button",
          onClick: function onClick(event) {
            _this2.handleActionClick({
              action: action,
              event: event
            });
          }
        }, action.buttonAttrs, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
            name: action.icon || _EditableField2.ACTION_ICONS[action.name],
            size: "24"
          })
        }), action.name);
      })
    }));
  };

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

exports.EditableFieldActions = EditableFieldActions;

function noop() {}

EditableFieldActions.defaultProps = {
  'data-cy': 'EditableFieldActions',
  deleteAction: noop,
  customAction: noop
};
EditableFieldActions.propTypes = {
  /** Actions to attach to an EditableField (default includes 'delete') */
  actions: _propTypes.default.arrayOf(_propTypes.default.object),

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string,

  /** The **unique** identifier for the EditableField - Ties label with input - Used to generate React `keys` - Used to manage correct handling (adding, deleting, editing) of multiple-value fields */
  name: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),

  /** Value passed from the EditableField */
  fieldValue: _propTypes.default.object,

  /** Validation object passed from the EditableField */
  validationInfo: _propTypes.default.object,

  /** Callback action on delete */
  deleteAction: _propTypes.default.func,

  /** Callback custom action */
  customAction: _propTypes.default.func
};
var _default = EditableFieldActions;
exports.default = _default;