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

A declarative form component with inbuilt validation and state management

"use strict";

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

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

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

var _Error = require("../Error");

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 Field = function Field(props) {
  var id = props.id,
      type = props.type,
      rows = props.rows,
      cols = props.cols,
      _onFocus = props.onFocus,
      _onBlur = props.onBlur,
      dynamic = props.dynamic,
      field = props.field,
      bindTo = props.bindTo,
      bindToAlways = props.bindToAlways,
      bindToCallback = props.bindToCallback,
      preOnChange = props.preOnChange,
      _onChange = props.onChange,
      errorMessage = props.errorMessage,
      children = props.children,
      sameAs = props.sameAs,
      validate = props.validate,
      rest = _objectWithoutProperties(props, ["id", "type", "rows", "cols", "onFocus", "onBlur", "dynamic", "field", "bindTo", "bindToAlways", "bindToCallback", "preOnChange", "onChange", "errorMessage", "children", "sameAs", "validate"]);

  return _react["default"].createElement(_Context.Context.Consumer, null, function (state) {
    var data = state.data,
        InputComponent = state.InputComponent,
        CheckboxComponent = state.CheckboxComponent,
        TextareaComponent = state.TextareaComponent,
        ErrorLabelComponent = state.ErrorLabelComponent,
        handleOnFocus = state.handleOnFocus,
        handleOnChange = state.handleOnChange,
        handleOnBlur = state.handleOnBlur,
        validateOnClick = state.validateOnClick,
        buttonClicked = state.buttonClicked;
    var MyInputComponent;

    if (!(0, _helpers.isDataValid)(data, props)) {
      return null;
    }

    if (data[id].rules.type === 'checkbox') {
      MyInputComponent = CheckboxComponent;
    } else if (data[id].rules.type === 'textarea') {
      MyInputComponent = TextareaComponent;
    } else {
      MyInputComponent = InputComponent;
    }

    return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(MyInputComponent.type, _extends({}, MyInputComponent.props, rest, {
      id: id,
      type: type,
      checked: data[id].checked,
      value: data[id].value,
      rows: rows,
      cols: cols,
      onFocus: function onFocus(e) {
        return handleOnFocus(e, _onFocus);
      },
      onBlur: function onBlur(e) {
        return handleOnBlur(e, _onBlur);
      },
      onChange: function onChange(e) {
        return handleOnChange(e, data[id].rules, {
          dynamic: dynamic,
          field: field,
          bindTo: bindTo,
          bindToAlways: bindToAlways,
          bindToCallback: bindToCallback,
          preOnChange: preOnChange
        }, _onChange);
      }
    })), _react["default"].createElement(_Error.Error, {
      data: data,
      id: id,
      errorMessage: errorMessage,
      ErrorLabelComponent: ErrorLabelComponent,
      validateOnClick: validateOnClick,
      buttonClicked: buttonClicked
    }));
  });
};

exports.Field = Field;
Field.displayName = 'Field';
Field.defaultProps = {
  rows: undefined,
  cols: undefined,
  onFocus: undefined,
  onBlur: undefined,
  validate: undefined,
  dynamic: false,
  field: undefined,
  bindTo: undefined,
  bindToAlways: false,
  bindToCallback: undefined,
  preOnChange: undefined,
  onChange: undefined,
  sameAs: undefined,
  errorMessage: ''
};
Field.propTypes = {
  id: _propTypes["default"].string.isRequired,
  type: _propTypes["default"].string.isRequired,
  rows: _propTypes["default"].string,
  cols: _propTypes["default"].string,
  sameAs: _propTypes["default"].string,
  onFocus: _propTypes["default"].func,
  onBlur: _propTypes["default"].func,
  validate: _propTypes["default"].func,
  dynamic: _propTypes["default"].bool,
  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
  })]),
  bindTo: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
  bindToAlways: _propTypes["default"].bool,
  bindToCallback: _propTypes["default"].func,
  preOnChange: _propTypes["default"].func,
  onChange: _propTypes["default"].func,
  errorMessage: _propTypes["default"].string,
  children: _propTypes["default"].any // eslint-disable-line

};