choerodon-ui/es/form/FormItem.js

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

import _defineProperty from "@babel/runtime/helpers/defineProperty";
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 _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

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 = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

import React, { Children, Component } from 'react';
import { findDOMNode } from 'react-dom';
import PropTypes from 'prop-types';
import classNames from 'classnames';
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 { FormItemValidateStatus } from './enum';
import FormContext from './FormContext';

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.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 = 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 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 = 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 (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 prefixCls = this.getPrefixCls();
      var help = this.getHelpMsg();
      var children = help ? React.createElement("div", {
        className: "".concat(prefixCls, "-explain"),
        key: "error"
      }, help) : null;
      return React.createElement(Animate, {
        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.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
        });
      }

      return React.createElement("div", {
        className: classes
      }, React.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 = classNames("".concat(prefixCls, "-item-control-wrapper"), wrapperCol && wrapperCol.className, {
        'is-required': required
      });
      return 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: "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 = {}, _defineProperty(_itemClassName, "".concat(prefixCls, "-item"), true), _defineProperty(_itemClassName, "".concat(prefixCls, "-item-with-help"), !!this.getHelpMsg() || helpShow), _defineProperty(_itemClassName, "".concat(prefixCls, "-item-no-colon"), !props.colon), _defineProperty(_itemClassName, "".concat(props.className), !!props.className), _itemClassName);
      return 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
};
FormItem.propTypes = {
  prefixCls: PropTypes.string,
  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
  help: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
  validateStatus: PropTypes.oneOf([FormItemValidateStatus.success, FormItemValidateStatus.warning, FormItemValidateStatus.error, FormItemValidateStatus.validating]),
  hasFeedback: PropTypes.bool,
  wrapperCol: PropTypes.object,
  className: PropTypes.string,
  id: PropTypes.string,
  children: PropTypes.node,
  colon: PropTypes.bool
};
//# sourceMappingURL=FormItem.js.map