@helpscout/hsds-react/components/Form/Form.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.FormActions = 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 _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _FormActions = require("./Form.Actions.css");

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

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

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

  function FormActions() {
    return _React$PureComponent.apply(this, arguments) || this;
  }

  var _proto = FormActions.prototype;

  _proto.getClassName = function getClassName() {
    var _this$props = this.props,
        cancel = _this$props.cancel,
        className = _this$props.className,
        destroy = _this$props.destroy,
        direction = _this$props.direction,
        save = _this$props.save;
    return (0, _classnames.default)(FormActions.className, cancel && 'withCancel', className, destroy && 'withDestroy', direction && "is-" + direction, save && 'withSave');
  };

  _proto.render = function render() {
    var _this$props2 = this.props,
        cancel = _this$props2.cancel,
        destroy = _this$props2.destroy,
        save = _this$props2.save,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props2, ["cancel", "destroy", "save"]);
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormActions.ActionsUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      className: this.getClassName(),
      role: "toolbar",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormActions.ActionsItemUI, {
        className: "c-FormActions__save",
        "data-cy": "FormActionsSaveItemWrapper",
        children: save
      }), cancel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormActions.ActionsItemUI, {
        className: "c-FormActions__cancel",
        "data-cy": "FormActionsCancelItemWrapper",
        children: cancel
      }), destroy && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormActions.ActionsBlockUI, {
        className: "c-FormActions__block"
      }), destroy && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormActions.ActionsItemUI, {
        className: "c-FormActions__destroy",
        "data-cy": "FormActionsDestroyItemWrapper",
        children: destroy
      })]
    }));
  };

  return FormActions;
}(_react.default.PureComponent);

exports.FormActions = FormActions;
FormActions.className = 'c-FormActions';
FormActions.defaultProps = {
  direction: 'right',
  'data-cy': 'FormActionsContent'
};
FormActions.propTypes = {
  /** The position to render the actions*/
  direction: _propTypes.default.oneOf(['right', 'left']),

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