choerodon-ui/es/form/FormItem.js

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

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import React, { isValidElement, cloneElement, Children, Component } from 'react';
import { findDOMNode } from 'react-dom';
import flatMap from 'lodash/flatMap';
import classNames from 'classnames';
import Col from '../grid/col';
import warning from '../_util/warning';
import { FIELD_DATA_PROP, FIELD_META_PROP } from './constants';
import PureRenderMixin from '../rc-components/util/PureRenderMixin';
import Animate from '../animate';
import Row from '../grid/row';
import { FormItemValidateStatus } from './enum';
import FormContext from './FormContext';

function intersperse(arr, inter) {
  return flatMap(arr, function (a, i) {
    return i ? [inter, a] : [a];
  });
}

var FormItem = /*#__PURE__*/function (_Component) {
  _inherits(FormItem, _Component);

  var _super = _createSuper(FormItem);

  function FormItem() {
    var _this;

    _classCallCheck(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 = findDOMNode(_assertThisInitialized(_this)).querySelector("[id=\"".concat(id, "\"]"));

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

    return _this;
  }

  _createClass(FormItem, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var children = this.props.children;
      warning(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.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__*/isValidElement(e.message) ? /*#__PURE__*/cloneElement(e.message, {
              key: index
            }) : e.message;
          }), ' ');
        }

        return '';
      }

      return help;
    }
  }, {
    key: "getControls",
    value: function getControls(children, recursively) {
      var controls = [];
      var childrenArray = 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 (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(FIELD_META_PROP);
    }
  }, {
    key: "getField",
    value: function getField() {
      return this.getChildProp(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.createElement("div", {
        className: "".concat(prefixCls, "-explain"),
        key: "help"
      }, help) : null;

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

      return /*#__PURE__*/React.createElement(Animate, {
        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.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 FormItemValidateStatus.validating;
        }

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

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

        if (fieldValue !== undefined && fieldValue !== null && fieldValue !== '') {
          return 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 = classNames("".concat(prefixCls, "-item-control"), {
          'has-feedback': props.hasFeedback || validateStatus === FormItemValidateStatus.validating,
          'has-success': validateStatus === FormItemValidateStatus.success,
          'has-warning': validateStatus === FormItemValidateStatus.warning,
          'has-error': validateStatus === FormItemValidateStatus.error,
          'is-validating': validateStatus === FormItemValidateStatus.validating
        });
      } // 必输字段,输入框加黄色背景, 解决表格行内编辑,没有label的情况下没有提示必输标示的问题


      var required = this.isRequired();

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

      return /*#__PURE__*/React.createElement("div", {
        className: classes
      }, /*#__PURE__*/React.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 = classNames("".concat(prefixCls, "-item-control-wrapper"), wrapperCol && wrapperCol.className, {
        'is-required': isHorizontal ? undefined : required
      });
      return isHorizontal ? /*#__PURE__*/React.createElement(Col, _extends({
        prefixCls: colPrefixCls
      }, wrapperCol, {
        className: className,
        key: "wrapper"
      }), children) : /*#__PURE__*/React.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 = classNames("".concat(prefixCls, "-item-label"), labelCol && labelCol.className);
      var labelClassName = classNames(_defineProperty({}, "".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.createElement(Col, _extends({
        prefixCls: colPrefixCls
      }, labelCol, {
        className: labelColClassName,
        key: "label"
      }), /*#__PURE__*/React.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 = {}, _defineProperty(_itemClassName, "".concat(prefixCls, "-item"), true), _defineProperty(_itemClassName, "".concat(prefixCls, "-item-with-help"), this.helpShow), _defineProperty(_itemClassName, "".concat(prefixCls, "-item-no-colon"), !props.colon), _defineProperty(_itemClassName, "".concat(props.className), !!props.className), _itemClassName);
      return props.labelLayout === 'horizontal' ? /*#__PURE__*/React.createElement(Row, {
        prefixCls: props.rowPrefixCls,
        className: classNames(itemClassName),
        style: style
      }, children) : /*#__PURE__*/React.createElement("div", {
        className: classNames(itemClassName),
        style: style
      }, children);
    }
  }, {
    key: "render",
    value: function render() {
      var children = this.renderChildren();
      return this.renderFormItem(children);
    }
  }], [{
    key: "contextType",
    get: function get() {
      return FormContext;
    }
  }]);

  return FormItem;
}(Component);

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