coreui/lib/components/Form/Form.js

Platform Core UI

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Trigger = exports.Summary = exports.Message = exports.Field = exports.Context = exports.Button = exports.addInputTypes = undefined;

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _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; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Button = require('../Button');

var _Button2 = _interopRequireDefault(_Button);

var _TextInput = require('../TextInput');

var _TextInput2 = _interopRequireDefault(_TextInput);

var _Shared = require('../../Shared');

var _Shared2 = _interopRequireDefault(_Shared);

var _Form = require('../../theme/components/Form');

var _Form2 = _interopRequireDefault(_Form);

var _reactFormal = require('react-formal');

var _reactFormal2 = _interopRequireDefault(_reactFormal);

var _compose = require('recompose/compose');

var _compose2 = _interopRequireDefault(_compose);

var _dedupe = require('classnames/dedupe');

var _dedupe2 = _interopRequireDefault(_dedupe);

var _defaultProps = require('recompose/defaultProps');

var _defaultProps2 = _interopRequireDefault(_defaultProps);

var _propertyExpr = require('property-expr');

var _propertyExpr2 = _interopRequireDefault(_propertyExpr);

var _getContext = require('recompose/getContext');

var _getContext2 = _interopRequireDefault(_getContext);

var _mapProps = require('recompose/mapProps');

var _mapProps2 = _interopRequireDefault(_mapProps);

var _toClass = require('recompose/toClass');

var _toClass2 = _interopRequireDefault(_toClass);

var _withHandlers = require('recompose/withHandlers');

var _withHandlers2 = _interopRequireDefault(_withHandlers);

var _ramda = require('ramda');

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var systemStyles = {};

var handleSubmit = function handleSubmit(_ref, formValue) {
  var coreuiModalContext = _ref.coreuiModalContext;
  var onSubmit = _ref.onSubmit;

  if (!coreuiModalContext) {
    onSubmit(formValue);
  } else {
    var event = new CustomEvent('coreuiSubmit', { bubbles: true, cancelable: true, detail: { stopPropagation: false } });

    var onHide = coreuiModalContext.onHide;

    onSubmit(formValue, event);

    if ((0, _ramda.is)(Function, onHide) && !(0, _ramda.path)(['detail', 'stopPropagation'], event)) {
      onHide(event);
    }
  }
};

var setup = function setup() {
  var _Shared$getRegistered = _Shared2.default.getRegisteredComponents();

  var CalendarInput = _Shared$getRegistered.CalendarInput;
  var ComboboxInput = _Shared$getRegistered.ComboboxInput;
  var DateTimePickerInput = _Shared$getRegistered.DateTimePickerInput;
  var DropdownListInput = _Shared$getRegistered.DropdownListInput;
  var MultiselectInput = _Shared$getRegistered.MultiselectInput;
  var NumberPickerInput = _Shared$getRegistered.NumberPickerInput;
  var SelectListInput = _Shared$getRegistered.SelectListInput;


  var inputs = [{ component: CalendarInput, types: ['calendar'] }, { component: ComboboxInput, types: ['combobox'] }, { component: DateTimePickerInput,
    types: ['date', 'time', 'datepicker', 'datetimepicker', 'timepicker']
  }, { component: DropdownListInput, types: ['dropdownlist'] }, { component: MultiselectInput, types: ['array', 'multiselect'] }, { component: NumberPickerInput, types: ['number'] }, { component: SelectListInput, types: ['selectlist'] }, {
    component: _TextInput2.default,
    types: ['email', 'password', 'search', 'string', 'tel', 'text', 'url']
  }];

  inputs.forEach(function (_ref2) {
    var component = _ref2.component;
    var types = _ref2.types;

    if (component) {
      types.forEach(function (t) {
        return (0, _reactFormal.addInputTypes)(_defineProperty({}, t, (0, _toClass2.default)(component)));
      });
    }
  });
};

var FormButton = (0, _compose2.default)((0, _defaultProps2.default)({ component: _Button2.default }), (0, _mapProps2.default)(function (_ref3) {
  var className = _ref3.className;
  var type = _ref3.type;

  var rest = _objectWithoutProperties(_ref3, ['className', 'type']);

  return _extends({
    className: (0, _dedupe2.default)({ 'btn-primary': type === 'submit' }, className),
    type: type
  }, rest);
}))(_reactFormal.Button);

var FormField = (0, _defaultProps2.default)({ errorClass: 'has-danger' })(_reactFormal.Field);

var FormMessage = (0, _compose2.default)((0, _defaultProps2.default)({ errorClass: 'has-danger' }), (0, _mapProps2.default)(function (_ref4) {
  var className = _ref4.className;

  var rest = _objectWithoutProperties(_ref4, ['className']);

  return _extends({
    className: (0, _dedupe2.default)('form-msg', className)
  }, rest);
}))(_reactFormal.Message);

var FormBase = function (_Component) {
  _inherits(FormBase, _Component);

  function FormBase() {
    _classCallCheck(this, FormBase);

    return _possibleConstructorReturn(this, Object.getPrototypeOf(FormBase).apply(this, arguments));
  }

  _createClass(FormBase, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      setup();
    }
  }, {
    key: 'render',
    value: function render() {
      var props = this.props;

      return _react2.default.createElement(
        _reactFormal2.default,
        props,
        props.children
      );
    }
  }]);

  return FormBase;
}(_react.Component);

var FormContainer = (0, _compose2.default)((0, _getContext2.default)({ coreuiModalContext: _react.PropTypes.object }), (0, _mapProps2.default)(function (_ref5) {
  var className = _ref5.className;
  var sheet = _ref5.sheet;
  var style = _ref5.style;
  var theme = _ref5.theme;

  var rest = _objectWithoutProperties(_ref5, ['className', 'sheet', 'style', 'theme']);

  return _extends({
    className: (0, _dedupe2.default)(sheet.classes.form, theme.classes.form, className),
    style: (0, _ramda.merge)(theme.styles.form, style)
  }, rest);
}), (0, _withHandlers2.default)({ onSubmit: function onSubmit(props) {
    return (0, _ramda.partial)(handleSubmit, [props]);
  } }))(FormBase);

var StyledForm = _Shared2.default.useSheet(FormContainer, systemStyles);

var Form = function Form(props) {
  return _react2.default.createElement(
    StyledForm,
    props,
    props.children
  );
};

Form.Button = FormButton;
Form.Context = _reactFormal.Context;
Form.Field = FormField;
Form.Message = FormMessage;
Form.Summary = _reactFormal.Summary;
Form.Trigger = _reactFormal.Trigger;

Form.addInputTypes = _reactFormal.addInputTypes;

var classes = _Form2.default.classes;
var options = _Form2.default.options;
var styles = _Form2.default.styles;

Form.defaultProps = {
  component: 'form',
  delay: 300,
  getter: function getter(path, model) {
    return path ? _propertyExpr2.default.getter(path, true)(model || {}) : model;
  },
  strict: false,
  theme: { classes: classes, options: options, styles: styles }
};

Form.displayName = 'Form';

Form.propTypes = {
  children: _react.PropTypes.node,

  className: _react.PropTypes.string,

  /**
   * A tag name or Component class the Form should render.
   *
   * If `null` are `false` the form will simply render it's child. In
   * this instance there must only be one child.
   */
  component: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.string, _react.PropTypes.oneOf([null, false])]).isRequired,

  /**
   * Time in milliseconds that validations should be debounced. Reduces the amount of validation calls
   * made at the expense of a slight delay. Helpful for performance.
   */
  delay: _react.PropTypes.number,

  /**
   * An object hash of field errors for the form. The object should be keyed with paths
   * with the values being an array of messages or message objects. Errors can be
   * left [uncontrolled](/controllables) (use `defaultErrors` to set an initial value)
   * or managed along with the `onError` callback. You can use any object shape you'd like for
   * messages, as long as you provide the Form.Message component an `extract` prop that
   * understands how to pull out the strings message. By default it understands strings and objects
   * with a `'message'` property.
   *
   * ```js
   * <Form errors={{
     *  "name.first": [
     *    'First names are required',
     *    {
     *    	message: "Names must be at least 2 characters long",
     *    	type: 'min'
     *    }
     *  ],
     * }}/>
   * ```
   */
  errors: _react.PropTypes.object,

  /**
   * A value getter function. `getter` is called with `path` and `value` and
   * should return the plain **javascript** value at the path.
   *
   * ```js
   * function(
   *  path: string,
   *  value: any,
   * ) -> object
   * ```
   */
  getter: _react.PropTypes.func,

  /**
   * Turns off input validation for the Form, value updates will continue to work.
   */
  noValidate: _react.PropTypes.bool,

  /**
   * Callback that is called when the `value` prop changes.
   *
   * ```js
   * function(
   *   value: object,
   *   updatedPaths: array<string>
   * )
   * ```
   */
  onChange: _react.PropTypes.func,

  /**
   * Callback that is called when a validation error occurs. It is called with an `errors` object
   *
   * ```editable
   * <Form schema={modelSchema}
   *   defaultValue={modelSchema.default()}
   *   errors={this.state ? this.state.errors : {}}
   *   onError={errors => {
     *     if( errors.dateOfBirth )
     *       errors.dateOfBirth = 'hijacked!'
     *     this.setState({ errors })
     *   }}>
   *
   *   <Form.Field name='dateOfBirth'/>
   *   <Form.Message for='dateOfBirth'/>
   *
   *   <Form.Button type='submit'>Submit</Form.Button>
   * </Form>
   * ```
   */
  onError: _react.PropTypes.func,

  /**
   * Callback that is fired when the native onSubmit event is triggered. Only relevant when
   * the `component` prop renders a `<form/>` tag. onInvalidSubmit will trigger only if the form is invalid.
   *
   * ```js
   * function onInvalidSubmit(errors){
     *   // do something with errors
     * }
   * ```
   */
  onInvalidSubmit: _react.PropTypes.func,

  /**
   * Callback that is fired when the native onSubmit event is triggered. Only relevant when
   * the `component` prop renders a `<form/>` tag. onSubmit will trigger only if the form is valid.
   *
   * ```js
   * function onSubmit(formValue){
     *   // do something with valid value
     * }
   * ```
   */
  onSubmit: _react.PropTypes.func,

  /**
   * Callback that is called whenever a validation is triggered.
   * It is called _before_ the validation is actually run.
   * ```js
   * function onValidate(event){
     *   let { type, fields, args } = event
     * }
   * ```
   */
  onValidate: _react.PropTypes.func,

  /**
   * A Yup schema  that validates the Form `value` prop. Used to validate the form input values
   * For more information about the yup api check out: https://github.com/jquense/yup/blob/master/README.md
   * @type {YupSchema}
   */
  schema: _react.PropTypes.any,

  /**
   * A value setter function. `setter` is called with `path`, the form `value` and the path `value`.
   * The `setter` must return updated form `value`, which allows you to leave the original value unmutated.
   *
   * The default implementation uses the [react immutability helpers](http://facebook.github.io/react/docs/update.html),
   * letting you treat the form `value` as immutable.
   * ```js
   * function(
   *  path: string,
   *  formValue: object,
   *  pathValue: any
   * ) -> object
   * ```
   */
  setter: _react.PropTypes.func,

  /**
   * Validations will be strict, making no attempt to coarce input values to the appropriate type.
   */
  strict: _react.PropTypes.bool,

  theme: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.object]),

  /**
   * Form value object, can be left [uncontrolled](/controllables);
   * use the `defaultValue` prop to initialize an uncontrolled form.
   */
  value: _react.PropTypes.object
};

exports.addInputTypes = _reactFormal.addInputTypes;
exports.Button = FormButton;
exports.Context = _reactFormal.Context;
exports.Field = FormField;
exports.Message = FormMessage;
exports.Summary = _reactFormal.Summary;
exports.Trigger = _reactFormal.Trigger;


_Shared2.default.registerComponent('Form', Form);

exports.default = Form;