dh-c/dist/form/form-item.js

The front-end development engineers jimberton gulp react component

'use strict';

exports.__esModule = true;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _PureRenderMixin = require('rc-util/lib/PureRenderMixin');

var _PureRenderMixin2 = _interopRequireDefault(_PureRenderMixin);

var _warn = require('rc-util/lib/warn');

var _warn2 = _interopRequireDefault(_warn);

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

var _index = require('../index');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var FormItem = function (_React$Component) {
  _inherits(FormItem, _React$Component);

  function FormItem(props) {
    _classCallCheck(this, FormItem);

    return _possibleConstructorReturn(this, _React$Component.call(this, props));
  }

  FormItem.prototype.componentDidMount = function componentDidMount() {
    (0, _warn2.default)(this.getControls(this.props.children, true).length <= 1, '`Form.Item` cannot generate `validateStatus` and `help` automatically, ' + 'while there are more than one `getFieldDecorator` in it.');
  };

  FormItem.prototype.shouldComponentUpdate = function shouldComponentUpdate() {
    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _PureRenderMixin2.default.shouldComponentUpdate.apply(this, args);
  };

  FormItem.prototype.getHelpMsg = function getHelpMsg() {
    var context = this.context;
    var props = this.props;
    if (props.help === undefined && context.form) {
      return this.getId() ? (context.form.getFieldError(this.getId()) || []).join(', ') : '';
    }
    return props.help;
  };
  /* 处理 自动验证*/


  FormItem.prototype.getControls = function getControls(children, recursively) {
    var controls = [];
    var childrenArray = _react2.default.Children.toArray(children);
    for (var i = 0; i < childrenArray.length; i++) {
      if (!recursively && controls.length > 0) {
        break;
      }
      var child = childrenArray[i];
      if (child.type === FormItem) {
        continue;
      }
      if (!child.props) {
        continue;
      }
      if (_constants.FIELD_META_PROP in child.props) {
        controls.push(child);
      } else if (child.props.children) {
        controls = controls.concat(this.getControls(child.props.children, recursively));
      }
    }
    return controls;
  };

  FormItem.prototype.getOnlyControl = function getOnlyControl() {
    var child = this.getControls(this.props.children, false)[0];
    return child !== undefined ? child : null;
  };

  FormItem.prototype.getChildProp = function getChildProp(prop) {
    var child = this.getOnlyControl();
    return child && child.props && child.props[prop];
  };

  FormItem.prototype.getId = function getId() {
    return this.getChildProp('id');
  };

  FormItem.prototype.getMeta = function getMeta() {
    return this.getChildProp(_constants.FIELD_META_PROP);
  };

  FormItem.prototype.renderHelp = function renderHelp() {
    var prefixCls = this.props.prefixCls;
    var help = this.getHelpMsg();
    return help ? _react2.default.createElement(
      'div',
      { className: 'dh-form-explain', key: 'help' },
      help
    ) : null;
  };

  FormItem.prototype.renderExtra = function renderExtra() {
    var extra = this.props.extra;

    return extra ? _react2.default.createElement(
      'div',
      { className: 'dh-form-extra' },
      extra
    ) : null;
  };

  FormItem.prototype.getValidateStatus = function getValidateStatus() {
    var _context$form = this.context.form,
        isFieldValidating = _context$form.isFieldValidating,
        getFieldError = _context$form.getFieldError,
        getFieldValue = _context$form.getFieldValue;

    var fieldId = this.getId();
    if (!fieldId) {
      return '';
    }
    if (isFieldValidating(fieldId)) {
      return 'validating';
    }
    if (!!getFieldError(fieldId)) {
      return 'error';
    }
    var fieldValue = getFieldValue(fieldId);
    if (fieldValue !== undefined && fieldValue !== null && fieldValue !== '') {
      return 'success';
    }
    return '';
  };

  FormItem.prototype.renderValidateWrapper = function renderValidateWrapper(el1, el2, el3) {
    var classes = '';
    var form = this.context.form;
    var props = this.props;
    var validateStatus = props.validateStatus === undefined && form ? this.getValidateStatus() : props.validateStatus;
    if (validateStatus) {
      classes = (0, _classnames2.default)({
        'has-feedback': props.hasFeedback,
        'has-success': validateStatus === 'success',
        'has-warning': validateStatus === 'warning',
        'has-error': validateStatus === 'error',
        'is-validating': validateStatus === 'validating'
      });
    }
    return _react2.default.createElement(
      'div',
      {
        className: 'dh-form-item-control ' + classes
      },
      el1,
      el2,
      el3
    );
  };

  FormItem.prototype.renderWrapper = function renderWrapper(children) {
    var wrapperCol = this.props.wrapperCol;
    return _react2.default.createElement(
      _index.Col,
      _extends({
        className: 'dh-form-item-control-wrapper'
      }, wrapperCol, {
        key: 'wrapper'
      }),
      children
    );
  };

  FormItem.prototype.isRequired = function isRequired() {
    var required = this.props.required;

    if (required !== undefined) {
      return required;
    }
    if (this.context.form) {
      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;
  };

  FormItem.prototype.renderLabel = function renderLabel() {
    var _props = this.props,
        label = _props.label,
        labelCol = _props.labelCol,
        colon = _props.colon,
        id = _props.id,
        width = _props.width;

    var context = this.context;
    var required = this.isRequired();

    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 ? _react2.default.createElement(
      _index.Col,
      _extends({}, labelCol, {
        key: 'label',
        style: width ? { width: width } : {},
        className: 'dh-form-item-label' }),
      _react2.default.createElement(
        'label',
        {
          htmlFor: id || this.getId(),
          className: (0, _classnames2.default)({
            'dh-item-required': required
          }),
          title: typeof label === 'string' ? label : ''
        },
        labelChildren
      )
    ) : null;
  };

  FormItem.prototype.renderChildren = function renderChildren() {
    var props = this.props;
    // const children = React.Children.map(props.children, (child) => {
    //   if (child && typeof child.type === 'function' && !child.props.size) {
    //     return React.cloneElement(child, { size: 'large' });
    //   }
    //   return child;
    // });
    return [this.renderLabel(), this.renderWrapper(this.renderValidateWrapper(props.children, this.renderHelp(), this.renderExtra()))];
  };
  /* 处理 自动验证*/


  FormItem.prototype.render = function render() {
    var _classNames;

    var _props2 = this.props,
        children = _props2.children,
        className = _props2.className;

    return _react2.default.createElement(
      _index.Row,
      {
        className: (0, _classnames2.default)('dh-form-item', (_classNames = {}, _classNames[className] = className, _classNames)),
        type: 'flex',
        align: 'middle',
        justify: 'center'
      },
      this.renderChildren()
    );
  };

  return FormItem;
}(_react2.default.Component);

FormItem.propTypes = {
  label: _propTypes2.default.string,
  labelCol: _propTypes2.default.object,
  wrapperCol: _propTypes2.default.object,
  colon: _propTypes2.default.bool,
  width: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])
};
FormItem.contextTypes = {
  form: _propTypes2.default.object
};
FormItem.defaultProps = {
  colon: false,
  labelCol: {
    span: 4
  }
};
exports.default = FormItem;