@helpscout/hsds-react/components/Form/Form.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.Form = 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 _classnames = _interopRequireDefault(require("classnames"));

var _Form = _interopRequireDefault(require("./Form.Actions"));

var _Button = _interopRequireDefault(require("../Button"));

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

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

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

  var _proto = Form.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        actionDirection = _this$props.actionDirection,
        actionTabbable = _this$props.actionTabbable,
        cancelButtonProps = _this$props.cancelButtonProps,
        cancelText = _this$props.cancelText,
        children = _this$props.children,
        className = _this$props.className,
        destroyButtonProps = _this$props.destroyButtonProps,
        destroyText = _this$props.destroyText,
        onCancel = _this$props.onCancel,
        onDestroy = _this$props.onDestroy,
        onSave = _this$props.onSave,
        saveButtonProps = _this$props.saveButtonProps,
        saveText = _this$props.saveText,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props, ["actionDirection", "actionTabbable", "cancelButtonProps", "cancelText", "children", "className", "destroyButtonProps", "destroyText", "onCancel", "onDestroy", "onSave", "saveButtonProps", "saveText"]);
    var componentClassName = (0, _classnames.default)('c-Form', className);
    var commonButtonProps = actionTabbable ? {} : {
      tabIndex: -1
    };
    var saveButton = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, (0, _extends2.default)({
      size: "lg",
      theme: "blue",
      className: "save-button",
      submit: true
    }, commonButtonProps, saveButtonProps, {
      children: saveText
    }));
    var cancelButton = onCancel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, (0, _extends2.default)({
      size: "lg",
      className: "cancel-button",
      linked: true,
      theme: "grey",
      onClick: onCancel
    }, commonButtonProps, cancelButtonProps, {
      children: cancelText
    }));
    var destroyButton = onDestroy && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, (0, _extends2.default)({
      size: "lg",
      theme: "red",
      linked: true,
      className: "delete-button",
      onClick: onDestroy
    }, commonButtonProps, destroyButtonProps, {
      children: destroyText
    }));
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      onSubmit: onSave,
      className: componentClassName,
      children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(Form.Actions, {
        direction: actionDirection,
        save: saveButton,
        cancel: cancelButton,
        destroy: destroyButton
      })]
    }));
  };

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

exports.Form = Form;
Form.Actions = _Form.default;
Form.defaultProps = {
  actionTabbable: true,
  cancelText: 'Cancel',
  destroyText: 'Delete',
  'data-cy': 'Form',
  onSave: function onSave(evt) {
    evt && evt.preventDefault();
  },
  saveText: 'Save'
};
Form.propTypes = {
  /** Direction in which buttons render.*/
  actionDirection: _propTypes.default.oneOf(['right', 'left']),

  /** Can the user focus on actions by tabbing. */
  actionTabbable: _propTypes.default.bool,

  /** Allows the user to pass in any props that Button component accepts. */
  cancelButtonProps: _propTypes.default.object,

  /** Text for the cancel button. Button will not render without text. */
  cancelText: _propTypes.default.string,

  /** Content to render. */
  children: _propTypes.default.any,

  /** Custom class names to be added to the component */
  className: _propTypes.default.string,

  /** Allows the user to pass in any props that Button component accepts. */
  destroyButtonProps: _propTypes.default.object,

  /** Text for the delete button. Button will not render without text. */
  destroyText: _propTypes.default.string,

  /** Callback for the cancel button */
  onCancel: _propTypes.default.func,

  /** Callback for the delete button */
  onDestroy: _propTypes.default.func,

  /** Callback for when the form is submitted */
  onSave: _propTypes.default.func,

  /** Allows the user to pass in any props that Button component accepts. */
  saveButtonProps: _propTypes.default.object,

  /** Text for the save button. Button always renders. */
  saveText: _propTypes.default.string,

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