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 _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('coreui-deps/lib/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 _componentFromProp = require('recompose/componentFromProp');

var _componentFromProp2 = _interopRequireDefault(_componentFromProp);

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

var _getContext2 = _interopRequireDefault(_getContext);

var _lifecycle = require('recompose/lifecycle');

var _lifecycle2 = _interopRequireDefault(_lifecycle);

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

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

var addInputTypes = _reactFormal2.default.addInputTypes,
    RFFormButton = _reactFormal2.default.Button,
    Context = _reactFormal2.default.Context,
    Field = _reactFormal2.default.Field,
    Message = _reactFormal2.default.Message,
    Summary = _reactFormal2.default.Summary,
    Trigger = _reactFormal2.default.Trigger;


var systemStyles = {};

var handleSubmit = function handleSubmit(_ref, formValue) {
  var coreuiModalContext = _ref.coreuiModalContext,
      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 FormButtonBase = (0, _componentFromProp2.default)('baseComponent');

var FormButton = (0, _mapProps2.default)(function (props) {
  var className = props.className,
      component = props.component,
      type = props.type,
      rest = _objectWithoutProperties(props, ['className', 'component', 'type']);

  var isSubmit = type === 'submit';
  var baseProps = _extends({}, rest, {
    baseComponent: isSubmit ? RFFormButton : _Button2.default,
    className: (0, _dedupe2.default)({ 'btn-primary': type === 'submit' }, className),
    type: type
  });

  return !isSubmit ? baseProps : (0, _ramda.assoc)('component', component || _Button2.default, baseProps);
})(FormButtonBase);

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

var FormMessage = (0, _compose2.default)((0, _defaultProps2.default)({ errorClass: 'has-danger' }), (0, _mapProps2.default)(function (_ref2) {
  var className = _ref2.className,
      rest = _objectWithoutProperties(_ref2, ['className']);

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

var setup = function setup() {
  var _Shared$getRegistered = _Shared2.default.getRegisteredComponents(),
      CalendarInput = _Shared$getRegistered.CalendarInput,
      ComboboxInput = _Shared$getRegistered.ComboboxInput,
      DateTimePickerInput = _Shared$getRegistered.DateTimePickerInput,
      DropdownListInput = _Shared$getRegistered.DropdownListInput,
      MultiselectInput = _Shared$getRegistered.MultiselectInput,
      NumberPickerInput = _Shared$getRegistered.NumberPickerInput,
      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', 'textarea', 'url']
  }];

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

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

var FormContainer = (0, _compose2.default)((0, _lifecycle2.default)({
  componentWillMount: function componentWillMount() {
    setup();
  }
}), (0, _getContext2.default)({ coreuiModalContext: _react.PropTypes.object }), (0, _mapProps2.default)(function (_ref4) {
  var className = _ref4.className,
      sheet = _ref4.sheet,
      style = _ref4.style,
      theme = _ref4.theme,
      rest = _objectWithoutProperties(_ref4, ['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]);
  } }))(_reactFormal2.default);

var StyledForm = _Shared2.default.injectSheet(systemStyles)(FormContainer);

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

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

Form.addInputTypes = 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) {
    var model = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
    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 = addInputTypes;
exports.Button = FormButton;
exports.Context = Context;
exports.Field = FormField;
exports.Message = FormMessage;
exports.Summary = Summary;
exports.Trigger = Trigger;


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

exports.default = Form;