choerodon-ui/lib/form/FormItem.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

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

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

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

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

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

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

var _reactDom = require("react-dom");

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

var _classnames = _interopRequireDefault(require("classnames"));

var _warning = _interopRequireDefault(require("../_util/warning"));

var _constants = require("./constants");

var _PureRenderMixin = _interopRequireDefault(require("../rc-components/util/PureRenderMixin"));

var _animate = _interopRequireDefault(require("../animate"));

var _enum = require("./enum");

var _configure = require("../configure");

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = (0, _getPrototypeOf2["default"])(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return (0, _possibleConstructorReturn2["default"])(this, result);
  };
}

var FormItem =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2["default"])(FormItem, _Component);

  var _super = _createSuper(FormItem);

  function FormItem() {
    var _this;

    (0, _classCallCheck2["default"])(this, FormItem);
    _this = _super.apply(this, arguments);
    _this.state = {
      helpShow: false
    };

    _this.onHelpAnimEnd = function (_key, helpShow) {
      _this.setState({
        helpShow: helpShow
      });
    }; // Resolve duplicated ids bug between different forms


    _this.onLabelClick = function (e) {
      var _this$props = _this.props,
          label = _this$props.label,
          propId = _this$props.id;

      var id = propId || _this.getId();

      if (!id) {
        return;
      }

      var controls = document.querySelectorAll("[id=\"".concat(id, "\"]"));

      if (controls.length !== 1) {
        // Only prevent in default situation
        // Avoid preventing event in `label={<a href="xx">link</a>}``
        if (typeof label === 'string') {
          e.preventDefault();
        }

        var control = (0, _reactDom.findDOMNode)((0, _assertThisInitialized2["default"])(_this)).querySelector("[id=\"".concat(id, "\"]"));

        if (control && control.focus) {
          control.focus();
        }
      }
    };

    return _this;
  }

  (0, _createClass2["default"])(FormItem, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var children = this.props.children;
      (0, _warning["default"])(this.getControls(children, true).length <= 1, '`Form.Item` cannot generate `validateStatus` and `help` automatically, ' + 'while there are more than one `getFieldDecorator` in it.');
    }
  }, {
    key: "shouldComponentUpdate",
    value: function shouldComponentUpdate() {
      for (var _len = arguments.length, args = new Array(_len), _key2 = 0; _key2 < _len; _key2++) {
        args[_key2] = arguments[_key2];
      }

      return _PureRenderMixin["default"].shouldComponentUpdate.apply(this, args);
    }
  }, {
    key: "getHelpMsg",
    value: function getHelpMsg() {
      var props = this.props;
      var onlyControl = this.getOnlyControl();

      if (props.help === undefined && onlyControl) {
        var errors = this.getField().errors;
        return errors ? errors.map(function (e) {
          return e.message;
        }).join(', ') : '';
      }

      return props.help;
    }
  }, {
    key: "getControls",
    value: function getControls(children, recursively) {
      var controls = [];

      var childrenArray = _react.Children.toArray(children);

      for (var i = 0; i < childrenArray.length; i++) {
        if (!recursively && controls.length > 0) {
          break;
        }

        var child = childrenArray[i];

        if (child.type && (child.type === FormItem || child.type.displayName === 'FormItem')) {
          continue;
        }

        if (!child.props) {
          continue;
        }

        if (_constants.FIELD_META_PROP in child.props) {
          // And means FIELD_DATA_PROP in chidl.props, too.
          controls.push(child);
        } else if (child.props.children) {
          controls = controls.concat(this.getControls(child.props.children, recursively));
        }
      }

      return controls;
    }
  }, {
    key: "getOnlyControl",
    value: function getOnlyControl() {
      var children = this.props.children;
      var child = this.getControls(children, false)[0];
      return child !== undefined ? child : null;
    }
  }, {
    key: "getChildProp",
    value: function getChildProp(prop) {
      var child = this.getOnlyControl();
      return child && child.props && child.props[prop];
    }
  }, {
    key: "getId",
    value: function getId() {
      return this.getChildProp('id');
    }
  }, {
    key: "getMeta",
    value: function getMeta() {
      return this.getChildProp(_constants.FIELD_META_PROP);
    }
  }, {
    key: "getField",
    value: function getField() {
      return this.getChildProp(_constants.FIELD_DATA_PROP);
    }
  }, {
    key: "getPrefixCls",
    value: function getPrefixCls() {
      var prefixCls = this.props.prefixCls;
      return (0, _configure.getPrefixCls)('form', prefixCls);
    }
  }, {
    key: "renderHelp",
    value: function renderHelp() {
      var prefixCls = this.getPrefixCls();
      var help = this.getHelpMsg();
      var children = help ? _react["default"].createElement("div", {
        className: "".concat(prefixCls, "-explain"),
        key: "error"
      }, help) : null;
      return _react["default"].createElement(_animate["default"], {
        transitionName: "show-error",
        component: "",
        transitionAppear: true,
        key: "error",
        onEnd: this.onHelpAnimEnd
      }, children);
    }
  }, {
    key: "renderExtra",
    value: function renderExtra() {
      var extra = this.props.extra;
      var prefixCls = this.getPrefixCls();
      return extra ? _react["default"].createElement("div", {
        className: "".concat(prefixCls, "-extra")
      }, extra) : null;
    }
  }, {
    key: "getValidateStatus",
    value: function getValidateStatus() {
      var onlyControl = this.getOnlyControl();

      if (onlyControl) {
        var field = this.getField();

        if (field.validating) {
          return _enum.FormItemValidateStatus.validating;
        }

        if (field.errors) {
          return _enum.FormItemValidateStatus.error;
        }

        var fieldValue = 'value' in field ? field.value : this.getMeta().initialValue;

        if (fieldValue !== undefined && fieldValue !== null && fieldValue !== '') {
          return _enum.FormItemValidateStatus.success;
        }
      }
    }
  }, {
    key: "renderValidateWrapper",
    value: function renderValidateWrapper(c1, c2, c3) {
      var props = this.props;
      var prefixCls = this.getPrefixCls();
      var onlyControl = this.getOnlyControl();
      var validateStatus = props.validateStatus === undefined && onlyControl ? this.getValidateStatus() : props.validateStatus;
      var classes = "".concat(prefixCls, "-item-control");

      if (validateStatus) {
        classes = (0, _classnames["default"])("".concat(prefixCls, "-item-control"), {
          'has-feedback': props.hasFeedback || validateStatus === _enum.FormItemValidateStatus.validating,
          'has-success': validateStatus === _enum.FormItemValidateStatus.success,
          'has-warning': validateStatus === _enum.FormItemValidateStatus.warning,
          'has-error': validateStatus === _enum.FormItemValidateStatus.error,
          'is-validating': validateStatus === _enum.FormItemValidateStatus.validating
        });
      }

      return _react["default"].createElement("div", {
        className: classes
      }, _react["default"].createElement("span", {
        className: "".concat(prefixCls, "-item-children")
      }, c1), c2, c3);
    }
  }, {
    key: "renderWrapper",
    value: function renderWrapper(children) {
      var wrapperCol = this.props.wrapperCol;
      var prefixCls = this.getPrefixCls();
      var required = this.isRequired();
      var className = (0, _classnames["default"])("".concat(prefixCls, "-item-control-wrapper"), wrapperCol && wrapperCol.className, {
        'is-required': required
      });
      return _react["default"].createElement("div", {
        className: className,
        key: "wrapper"
      }, children);
    }
  }, {
    key: "isRequired",
    value: function isRequired() {
      var required = this.props.required;

      if (required !== undefined) {
        return required;
      }

      if (this.getOnlyControl()) {
        var meta = this.getMeta() || {};
        var validate = meta.validate || [];
        return validate.filter(function (item) {
          return !!item.rules;
        }).some(function (item) {
          return item.rules.some(function (rule) {
            return rule.required;
          });
        });
      }

      return false;
    }
  }, {
    key: "renderChildren",
    value: function renderChildren() {
      var children = this.props.children;
      return [// this.renderLabel(),
      this.renderWrapper(this.renderValidateWrapper(children, this.renderHelp(), this.renderExtra()))];
    }
  }, {
    key: "renderFormItem",
    value: function renderFormItem(children) {
      var _itemClassName;

      var props = this.props;
      var helpShow = this.state.helpShow;
      var prefixCls = this.getPrefixCls();
      var style = props.style;
      var itemClassName = (_itemClassName = {}, (0, _defineProperty2["default"])(_itemClassName, "".concat(prefixCls, "-item"), true), (0, _defineProperty2["default"])(_itemClassName, "".concat(prefixCls, "-item-with-help"), !!this.getHelpMsg() || helpShow), (0, _defineProperty2["default"])(_itemClassName, "".concat(prefixCls, "-item-no-colon"), !props.colon), (0, _defineProperty2["default"])(_itemClassName, "".concat(props.className), !!props.className), _itemClassName);
      return _react["default"].createElement("div", {
        className: (0, _classnames["default"])(itemClassName),
        style: style
      }, children);
    }
  }, {
    key: "render",
    value: function render() {
      var children = this.renderChildren();
      return this.renderFormItem(children);
    }
  }]);
  return FormItem;
}(_react.Component);

exports["default"] = FormItem;
FormItem.displayName = 'FormItem';
FormItem.defaultProps = {
  hasFeedback: false,
  colon: true
};
FormItem.propTypes = {
  prefixCls: _propTypes["default"].string,
  label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
  help: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].bool]),
  validateStatus: _propTypes["default"].oneOf([_enum.FormItemValidateStatus.success, _enum.FormItemValidateStatus.warning, _enum.FormItemValidateStatus.error, _enum.FormItemValidateStatus.validating]),
  hasFeedback: _propTypes["default"].bool,
  wrapperCol: _propTypes["default"].object,
  className: _propTypes["default"].string,
  id: _propTypes["default"].string,
  children: _propTypes["default"].node,
  colon: _propTypes["default"].bool
};
FormItem.contextTypes = {
  vertical: _propTypes["default"].bool
};
//# sourceMappingURL=FormItem.js.map