@ice/form/lib/Form.js

ICE 表单组件

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

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

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

var _context = _interopRequireDefault(require("./context"));

var _FormCore = _interopRequireDefault(require("./FormCore"));

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

  function Form(props) {
    var _this;

    (0, _classCallCheck2.default)(this, Form);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Form).call(this, props));

    _this.onSubmit = function (event) {
      return _this.store.submit(event);
    };

    var initialValues = props.initialValues,
        rules = props.rules,
        effects = props.effects,
        onSubmit = props.onSubmit,
        onChange = props.onChange;
    _this.store = new _FormCore.default({
      initialValues: initialValues,
      rules: rules,
      effects: effects,
      onSubmit: onSubmit,
      onChange: onChange
    });
    _this.state = {
      renderField: function renderField() {},
      layout: undefined,
      store: _this.store
    };
    return _this;
  }

  (0, _createClass2.default)(Form, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      var _this$props = this.props,
          initialValues = _this$props.initialValues,
          rules = _this$props.rules,
          effects = _this$props.effects,
          onSubmit = _this$props.onSubmit,
          onChange = _this$props.onChange;

      if (prevProps.rules !== rules) {
        this.store.setConfig('rules', rules);
      }

      if (prevProps.effects !== effects) {
        this.store.setConfig('effects', effects);
      }

      if (prevProps.onSubmit !== onSubmit) {
        this.store.setConfig('onSubmit', onSubmit);
      }

      if (prevProps.onChange !== onChange) {
        this.store.setConfig('onChange', onChange);
      }

      if (prevProps.initialValues !== initialValues) {
        this.store.setValues(initialValues, true);
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          initialValues = _this$props2.initialValues,
          onSubmit = _this$props2.onSubmit,
          onChange = _this$props2.onChange,
          children = _this$props2.children,
          rules = _this$props2.rules,
          effects = _this$props2.effects,
          renderField = _this$props2.renderField,
          layout = _this$props2.layout,
          rest = (0, _objectWithoutProperties2.default)(_this$props2, ["initialValues", "onSubmit", "onChange", "children", "rules", "effects", "renderField", "layout"]);
      return _react.default.createElement(_context.default.Provider, {
        value: this.store
      }, _react.default.createElement("form", (0, _extends2.default)({
        className: "ice-form",
        onSubmit: this.onSubmit
      }, rest), typeof children === 'function' ? children(this.store) : children));
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(nextProps, prevState) {
      // set renderField、layout before render
      var isRenderFieldChanged = nextProps.renderField !== prevState.renderField;
      var isLayoutChanged = nextProps.layout !== prevState.layout;

      if (isRenderFieldChanged || isLayoutChanged) {
        prevState.store.setConfig('renderField', nextProps.renderField);
        prevState.store.setConfig('layout', nextProps.layout);
        return {
          renderField: nextProps.someValue,
          layout: nextProps.layout
        };
      }

      return null;
    }
  }]);
  return Form;
}(_react.default.Component);

Form.propTypes = {
  onChange: _propTypes.default.func,
  onSubmit: _propTypes.default.func,
  initialValues: _propTypes.default.object,
  rules: _propTypes.default.object,
  effects: _propTypes.default.array
};
Form.defaultProps = {
  onChange: function onChange() {},
  onSubmit: function onSubmit() {},
  initialValues: {},
  rules: {},
  effects: []
};
var _default = Form;
exports.default = _default;