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")["default"];

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

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

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

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

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 _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

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

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

var _flatMap = _interopRequireDefault(require("lodash/flatMap"));

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

var _col = _interopRequireDefault(require("../grid/col"));

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

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

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

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

var _row = _interopRequireDefault(require("../grid/row"));

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

var _FormContext = _interopRequireDefault(require("./FormContext"));

function intersperse(arr, inter) {
  return (0, _flatMap["default"])(arr, function (a, i) {
    return i ? [inter, a] : [a];
  });
}

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

  var _super = (0, _createSuper2["default"])(FormItem);

  function FormItem() {
    var _this;

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

    _this.onHelpAnimEnd = function (_key, helpShow) {
      _this.helpShow = helpShow;

      if (!helpShow) {
        _this.setState({});
      }
    }; // 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 help = this.props.help;

      if (help === undefined && this.getOnlyControl()) {
        var errors = this.getField().errors;

        if (errors) {
          return intersperse(errors.map(function (e, index) {
            return /*#__PURE__*/(0, _react.isValidElement)(e.message) ? /*#__PURE__*/(0, _react.cloneElement)(e.message, {
              key: index
            }) : e.message;
          }), ' ');
        }

        return '';
      }

      return 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' || child.type.__FORM_ITEM)) {
          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;
      var getPrefixCls = this.context.getPrefixCls;
      return getPrefixCls('form', prefixCls);
    }
  }, {
    key: "renderHelp",
    value: function renderHelp() {
      var _this$props$helpTrans = this.props.helpTransitionName,
          helpTransitionName = _this$props$helpTrans === void 0 ? 'show-error' : _this$props$helpTrans;
      var prefixCls = this.getPrefixCls();
      var help = this.getHelpMsg();
      var children = help ? /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-explain"),
        key: "help"
      }, help) : null;

      if (children) {
        this.helpShow = !!children;
      }

      return /*#__PURE__*/_react["default"].createElement(_animate["default"], {
        transitionName: helpTransitionName,
        component: "",
        transitionAppear: true,
        key: "help",
        onEnd: this.onHelpAnimEnd
      }, children);
    }
  }, {
    key: "renderExtra",
    value: function renderExtra() {
      var extra = this.props.extra;
      var prefixCls = this.getPrefixCls();
      return extra ? /*#__PURE__*/_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
        });
      } // 必输字段,输入框加黄色背景, 解决表格行内编辑,没有label的情况下没有提示必输标示的问题


      var required = this.isRequired();

      if (required) {
        classes = (0, _classnames["default"])(classes, ["".concat(prefixCls, "-item-required")]);
      }

      return /*#__PURE__*/_react["default"].createElement("div", {
        className: classes
      }, /*#__PURE__*/_react["default"].createElement("span", {
        className: "".concat(prefixCls, "-item-children")
      }, c1), c2, c3);
    }
  }, {
    key: "renderWrapper",
    value: function renderWrapper(children) {
      var _this$props2 = this.props,
          wrapperCol = _this$props2.wrapperCol,
          labelLayout = _this$props2.labelLayout,
          colPrefixCls = _this$props2.colPrefixCls;
      var prefixCls = this.getPrefixCls();
      var required = this.isRequired();
      var isHorizontal = labelLayout === 'horizontal';
      var className = (0, _classnames["default"])("".concat(prefixCls, "-item-control-wrapper"), wrapperCol && wrapperCol.className, {
        'is-required': isHorizontal ? undefined : required
      });
      return isHorizontal ? /*#__PURE__*/_react["default"].createElement(_col["default"], (0, _extends2["default"])({
        prefixCls: colPrefixCls
      }, wrapperCol, {
        className: className,
        key: "wrapper"
      }), children) : /*#__PURE__*/_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: "renderLabel",
    value: function renderLabel() {
      var _this$props3 = this.props,
          prefixCls = _this$props3.prefixCls,
          label = _this$props3.label,
          labelCol = _this$props3.labelCol,
          colon = _this$props3.colon,
          id = _this$props3.id,
          colPrefixCls = _this$props3.colPrefixCls;
      var context = this.context;
      var required = this.isRequired();
      var labelColClassName = (0, _classnames["default"])("".concat(prefixCls, "-item-label"), labelCol && labelCol.className);
      var labelClassName = (0, _classnames["default"])((0, _defineProperty2["default"])({}, "".concat(prefixCls, "-item-required"), required));
      var labelChildren = label; // Keep label is original where there should have no colon

      var haveColon = colon && !context.vertical; // Remove duplicated user input colon

      if (haveColon && typeof label === 'string' && label.trim() !== '') {
        labelChildren = label.replace(/[：|:]\s*$/, '');
      }

      return label ? /*#__PURE__*/_react["default"].createElement(_col["default"], (0, _extends2["default"])({
        prefixCls: colPrefixCls
      }, labelCol, {
        className: labelColClassName,
        key: "label"
      }), /*#__PURE__*/_react["default"].createElement("label", {
        htmlFor: id || this.getId(),
        className: labelClassName,
        title: typeof label === 'string' ? label : '',
        onClick: this.onLabelClick
      }, labelChildren)) : null;
    }
  }, {
    key: "renderChildren",
    value: function renderChildren() {
      var _this$props4 = this.props,
          children = _this$props4.children,
          labelLayout = _this$props4.labelLayout;
      return [labelLayout === 'horizontal' && this.renderLabel(), this.renderWrapper(this.renderValidateWrapper(children, this.renderHelp(), this.renderExtra()))];
    }
  }, {
    key: "renderFormItem",
    value: function renderFormItem(children) {
      var _itemClassName;

      var props = this.props;
      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.helpShow), (0, _defineProperty2["default"])(_itemClassName, "".concat(prefixCls, "-item-no-colon"), !props.colon), (0, _defineProperty2["default"])(_itemClassName, "".concat(props.className), !!props.className), _itemClassName);
      return props.labelLayout === 'horizontal' ? /*#__PURE__*/_react["default"].createElement(_row["default"], {
        prefixCls: props.rowPrefixCls,
        className: (0, _classnames["default"])(itemClassName),
        style: style
      }, children) : /*#__PURE__*/_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);
    }
  }], [{
    key: "contextType",
    get: function get() {
      return _FormContext["default"];
    }
  }]);
  return FormItem;
}(_react.Component);

exports["default"] = FormItem;
FormItem.displayName = 'FormItem';
FormItem.defaultProps = {
  hasFeedback: false,
  colon: true,
  labelLayout: 'float'
};
FormItem.__FORM_ITEM = true;
//# sourceMappingURL=FormItem.js.map