react-form-package/lib/containers/Button/index.js

A declarative form component with inbuilt validation and state management

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Button = void 0;

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

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

var _Context = require("../Context");

var _helpers = require("../../helpers");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var Button = function Button(props) {
  var id = props.id,
      type = props.type,
      rfpRole = props.rfpRole,
      field = props.field,
      _onClick = props.onClick,
      fieldId = props.fieldId,
      _onMouseEnter = props.onMouseEnter,
      _onMouseLeave = props.onMouseLeave,
      children = props.children,
      rest = _objectWithoutProperties(props, ["id", "type", "rfpRole", "field", "onClick", "fieldId", "onMouseEnter", "onMouseLeave", "children"]);

  return _react["default"].createElement(_Context.Context.Consumer, null, function (state) {
    var formValid = state.formValid,
        validate = state.validate,
        validateOnClick = state.validateOnClick,
        ButtonComponent = state.ButtonComponent,
        addField = state.addField,
        removeField = state.removeField,
        setButtonClicked = state.setButtonClicked;
    return _react["default"].createElement(ButtonComponent.type, _extends({}, ButtonComponent.props, rest, {
      id: id,
      type: type,
      onClick: function onClick(e) {
        e.preventDefault();

        if (validate && validateOnClick && !formValid) {
          setButtonClicked();
        }

        if (rfpRole === 'addField') {
          addField(field);

          if (_onClick) {
            _onClick();
          }
        }

        if (rfpRole === 'removeField') {
          if (_onClick) {
            _onClick();
          }

          removeField(fieldId);
        }

        if (!rfpRole) {
          _onClick((0, _helpers.createReturnState)(state));
        }
      },
      onMouseEnter: function onMouseEnter(e) {
        e.preventDefault();

        if (_onMouseEnter) {
          _onMouseEnter(e, (0, _helpers.createReturnState)(state));
        }
      },
      onMouseLeave: function onMouseLeave(e) {
        e.preventDefault();

        if (_onMouseLeave) {
          _onMouseLeave(e, (0, _helpers.createReturnState)(state));
        }
      },
      disabled: validate && !rfpRole && !validateOnClick ? !formValid : false
    }), children);
  });
};

exports.Button = Button;
Button.displayName = 'Button';
Button.defaultProps = {
  rfpRole: undefined,
  field: undefined,
  onClick: undefined,
  fieldId: undefined,
  onMouseEnter: undefined,
  onMouseLeave: undefined
};
Button.propTypes = {
  id: _propTypes["default"].string.isRequired,
  type: _propTypes["default"].string.isRequired,
  rfpRole: _propTypes["default"].string,
  field: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].shape({
    id: _propTypes["default"].string,
    type: _propTypes["default"].string
  })), _propTypes["default"].shape({
    id: _propTypes["default"].string,
    type: _propTypes["default"].string
  })]),
  onClick: _propTypes["default"].func,
  fieldId: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
  onMouseEnter: _propTypes["default"].func,
  onMouseLeave: _propTypes["default"].func,
  children: _propTypes["default"].any // eslint-disable-line

};