choerodon-ui/pro/es/field/FormField.js

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

import _regeneratorRuntime from "@babel/runtime/regenerator";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _get from "@babel/runtime/helpers/get";
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 { __decorate } from "tslib";
import Map from 'core-js/library/fn/map';
import React, { cloneElement, isValidElement } from 'react';
import PropTypes from 'prop-types';
import { action, computed, isArrayLike, observable, runInAction, toJS } from 'mobx';
import classNames from 'classnames';
import isPromise from 'is-promise';
import omit from 'lodash/omit';
import isNumber from 'lodash/isNumber';
import isString from 'lodash/isString';
import isNil from 'lodash/isNil';
import isLdEmpty from 'lodash/isEmpty';
import isObject from 'lodash/isObject';
import defaultTo from 'lodash/defaultTo';
import uniqWith from 'lodash/uniqWith';
import { isMoment } from 'moment';
import { observer } from 'mobx-react';
import noop from 'lodash/noop';
import isPlainObject from 'lodash/isPlainObject';
import KeyCode from '../../../es/_util/KeyCode';
import warning from '../../../es/_util/warning';
import { getConfig, getProPrefixCls } from '../../../es/configure';
import Row from '../../../es/row';
import Col from '../../../es/col';
import autobind from '../_util/autobind';
import { findBindFields } from '../data-set/utils';
import Validator from '../validator/Validator';
import FormContext from '../form/FormContext';
import DataSetComponent from '../data-set/DataSetComponent';
import Icon from '../icon';
import Tooltip from '../tooltip';
import _isEmpty from '../_util/isEmpty';
import * as ObjectChainValue from '../_util/ObjectChainValue';
import { FieldTrim, FieldType, RecordStatus } from '../data-set/enum';
import { ShowHelp } from './enum';
import { FIELD_SUFFIX } from '../form/utils';
import { LabelLayout } from '../form/enum';
import Animate from '../animate';
import CloseButton from './CloseButton';
import { fromRangeValue, getDateFormatByField, toMultipleValue, toRangeValue } from './utils';
import isSame from '../_util/isSame';
import formatString from '../formatter/formatString';
import formatCurrency from '../formatter/formatCurrency';
var map = {};
export function getFieldsById(id) {
  if (!map[id]) {
    map[id] = [];
  }

  return map[id];
}
export var FormField =
/*#__PURE__*/
function (_DataSetComponent) {
  _inherits(FormField, _DataSetComponent);

  var _super = _createSuper(FormField);

  function FormField() {
    var _this;

    _classCallCheck(this, FormField);

    _this = _super.apply(this, arguments);
    _this.emptyValue = null;
    _this.lock = false; // 多选中出现了校验值的数量大于一那么输入框不需要存在校验信息展示

    _this.mutipleValidateMessageLength = 0;
    return _this;
  }

  _createClass(FormField, [{
    key: "defaultRenderer",
    value: function defaultRenderer(_ref) {
      var text = _ref.text,
          repeat = _ref.repeat,
          maxTagTextLength = _ref.maxTagTextLength;
      return repeat !== undefined && maxTagTextLength && isString(text) && text.length > maxTagTextLength ? "".concat(text.slice(0, maxTagTextLength), "...") : text;
    }
    /**
     * 处理多行关联字段校验
     * @param field
     */

  }, {
    key: "multiLineValidator",
    value: function multiLineValidator(field) {
      if (field) {
        if (!field.get('defaultValidationMessages')) {
          field.validator.props.defaultValidationMessages = this.getValidatorProps().defaultValidationMessages;
        }

        return field.validator;
      }

      return new Validator(undefined, this);
    }
    /**
     * 判断是否应该显示验证信息, 作为属性传给Tooltip
     *
     * @readonly
     * @type {(undefined | boolean)}
     * @memberof FormField
     */

  }, {
    key: "isValidationMessageHidden",
    value: function isValidationMessageHidden(message) {
      var _this$props = this.props,
          hidden = _this$props.hidden,
          noValidate = _this$props.noValidate;

      if (hidden || this.pristine || !this.record && noValidate || !message) {
        return true;
      }
    }
  }, {
    key: "isEmpty",
    value: function isEmpty() {
      var value = this.getValue();
      return isArrayLike(value) ? !value.length : _isEmpty(value);
    }
  }, {
    key: "getObservableProps",
    value: function getObservableProps(props, context) {
      return _objectSpread({}, _get(_getPrototypeOf(FormField.prototype), "getObservableProps", this).call(this, props, context), {
        name: props.name,
        record: 'record' in props ? props.record : context.record,
        dataSet: 'dataSet' in props ? props.dataSet : context.dataSet,
        dataIndex: defaultTo(props.dataIndex, context.dataIndex),
        value: 'value' in props ? props.value : this.observableProps ? this.observableProps.value : props.defaultValue
      });
    }
  }, {
    key: "getOtherProps",
    value: function getOtherProps() {
      var otherProps = omit(_get(_getPrototypeOf(FormField.prototype), "getOtherProps", this).call(this), ['record', 'defaultValue', 'dataIndex', 'onEnterDown', 'onClear', 'onBeforeChange', 'readOnly', 'validator', 'validationRenderer', 'help', 'showHelp', 'renderer', 'maxTagPlaceholder', 'maxTagCount', 'maxTagTextLength', 'rowIndex', 'colIndex', 'labelLayout', '_inTable', 'labelWidth', 'pristine', 'range', 'trim', 'newLine', 'fieldClassName', 'preventRenderer']);
      otherProps.onChange = !this.isDisabled() && !this.isReadOnly() ? this.handleChange : noop;
      otherProps.onKeyDown = this.handleKeyDown;
      otherProps.onCompositionStart = this.handleCompositionStart;
      otherProps.onCompositionEnd = this.handleChange;
      return otherProps;
    }
  }, {
    key: "getWrapperClassNames",
    value: function getWrapperClassNames() {
      var _get2, _ref2;

      var prefixCls = this.prefixCls;

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

      return (_get2 = _get(_getPrototypeOf(FormField.prototype), "getWrapperClassNames", this)).call.apply(_get2, [this, (_ref2 = {}, _defineProperty(_ref2, "".concat(prefixCls, "-invalid"), !this.isValid), _defineProperty(_ref2, "".concat(prefixCls, "-float-label"), this.hasFloatLabel), _defineProperty(_ref2, "".concat(prefixCls, "-required"), this.getProp('required')), _defineProperty(_ref2, "".concat(prefixCls, "-readonly"), this.getProp('readOnly')), _ref2)].concat(args));
    }
  }, {
    key: "renderWrapper",
    value: function renderWrapper() {
      return undefined;
    }
  }, {
    key: "renderHelpMessage",
    value: function renderHelpMessage() {
      var showHelp = this.props.showHelp;
      var help = this.getProp('help');

      if (showHelp === ShowHelp.newLine && help) {
        return React.createElement("div", {
          key: "help",
          className: "".concat(getProPrefixCls(FIELD_SUFFIX), "-help")
        }, help);
      }
    }
  }, {
    key: "getLabel",
    value: function getLabel() {
      return this.getProp('label');
    }
  }, {
    key: "renderFloatLabel",
    value: function renderFloatLabel() {
      if (this.hasFloatLabel && (this.isFocus || !this.range || !this.isEmpty())) {
        var label = this.getLabel();

        if (label) {
          var _classNames;

          var prefixCls = getProPrefixCls(FIELD_SUFFIX);
          var required = this.getProp('required');
          var readOnly = this.getProp('readOnly');
          var classString = classNames("".concat(prefixCls, "-label"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-required"), required), _defineProperty(_classNames, "".concat(prefixCls, "-readonly"), readOnly), _classNames));
          return React.createElement("div", {
            className: "".concat(prefixCls, "-label-wrapper")
          }, React.createElement("div", {
            className: classString
          }, label));
        }
      }
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      this.addToForm(this.props, this.context);
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps, nextContext) {
      _get(_getPrototypeOf(FormField.prototype), "componentWillReceiveProps", this).call(this, nextProps, nextContext);

      this.removeFromForm(this.props, this.context);
      this.addToForm(nextProps, nextContext);

      if (!this.record && this.props.value !== nextProps.value) {
        this.validate(nextProps.value);
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.removeFromForm(this.props, this.context);
    }
  }, {
    key: "addToForm",
    value: function addToForm(props, context) {
      var form = props.form;
      var formNode = context.formNode;

      if (form) {
        var fields = map[form];

        if (!fields) {
          fields = [];
          map[form] = fields;
        }

        fields.push(this);
      } else if (formNode) {
        formNode.addField(this);
      }
    }
  }, {
    key: "removeFromForm",
    value: function removeFromForm(props, context) {
      var form = props.form;
      var formNode = context.formNode;

      if (form) {
        var fields = map[form];

        if (fields) {
          var index = fields.indexOf(this);

          if (index !== -1) {
            fields.splice(index, 1);
          }
        }
      } else if (formNode) {
        formNode.removeField(this);
      }
    }
  }, {
    key: "renderValidationMessage",
    value: function renderValidationMessage(validationResult) {
      var validationMessage = this.getValidationMessage(validationResult);

      if (validationMessage) {
        return React.createElement("div", {
          className: getProPrefixCls('validation-message')
        }, this.context.labelLayout !== LabelLayout["float"] && React.createElement(Icon, {
          type: "error"
        }), React.createElement("span", null, validationMessage));
      }
    }
  }, {
    key: "getValidatorProps",
    value: function getValidatorProps() {
      var name = this.name,
          range = this.range,
          multiple = this.multiple,
          defaultValidationMessages = this.defaultValidationMessages;
      var type = this.getFieldType();
      var required = this.getProp('required');
      var customValidator = this.getProp('validator');
      var label = this.getProp('label');
      return {
        type: type,
        required: required,
        customValidator: customValidator,
        name: name,
        label: label,
        range: range,
        multiple: multiple,
        defaultValidationMessages: defaultValidationMessages,
        form: this.context.formNode
      };
    }
  }, {
    key: "getValidationMessage",
    value: function getValidationMessage() {
      var validationResult = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.validator.currentValidationResult;
      var validator = this.validator,
          validationRenderer = this.props.validationRenderer;

      if (validationResult) {
        if (validationRenderer) {
          var validationMessage = validationRenderer(validationResult, validator.props);

          if (validationMessage) {
            return validationMessage;
          }
        }

        return validationResult.validationMessage;
      }
    }
  }, {
    key: "handleFocus",
    value: function handleFocus(e) {
      _get(_getPrototypeOf(FormField.prototype), "handleFocus", this).call(this, e);

      if (this.range) {
        this.beginRange();
      }
    }
  }, {
    key: "handleBlur",
    value: function handleBlur(e) {
      _get(_getPrototypeOf(FormField.prototype), "handleBlur", this).call(this, e);

      if (this.range) {
        this.endRange();
      }
    }
  }, {
    key: "handleCompositionStart",
    value: function handleCompositionStart() {
      this.lock = true;
    }
  }, {
    key: "handleChange",
    value: function handleChange(e) {
      this.lock = false;
      e.preventDefault();
      e.stopPropagation();
    }
  }, {
    key: "handleKeyDown",
    value: function handleKeyDown(e) {
      var _this$props2 = this.props,
          _this$props2$onKeyDow = _this$props2.onKeyDown,
          onKeyDown = _this$props2$onKeyDow === void 0 ? noop : _this$props2$onKeyDow,
          _this$props2$onEnterD = _this$props2.onEnterDown,
          onEnterDown = _this$props2$onEnterD === void 0 ? noop : _this$props2$onEnterD;
      onKeyDown(e);

      if (!e.isDefaultPrevented()) {
        switch (e.keyCode) {
          case KeyCode.ENTER:
            this.handleEnterDown(e);
            onEnterDown(e);
            break;

          case KeyCode.ESC:
            this.blur();
            break;

          default:
        }
      }
    }
  }, {
    key: "handleEnterDown",
    value: function handleEnterDown(e) {
      if (this.multiple) {
        if (this.range) {
          this.endRange();
          e.preventDefault();
        } else {
          var value = e.target.value;

          if (value !== '') {
            this.syncValueOnBlur(value);
            e.preventDefault();
          }
        }
      } else {
        this.blur();
      }
    }
  }, {
    key: "syncValueOnBlur",
    value: function syncValueOnBlur(value) {
      this.prepareSetValue(value);
    }
  }, {
    key: "handleMutipleValueRemove",
    value: function handleMutipleValueRemove(e, value, index) {
      this.removeValue(value, index);
      e.stopPropagation();
    }
  }, {
    key: "getDateFormat",
    value: function getDateFormat() {
      var field = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.field;
      return getDateFormatByField(field, this.getFieldType(field));
    }
  }, {
    key: "processValue",
    value: function processValue(value) {
      if (!isNil(value)) {
        if (isMoment(value)) {
          return value.format(this.getDateFormat());
        }

        if (isValidElement(value)) {
          // For Select's Option and TreeSelect's TreeNode which type may be ReactElement
          // @ts-ignore
          return value;
        }

        return value.toString();
      }

      return '';
    }
  }, {
    key: "isReadOnly",
    value: function isReadOnly() {
      var readOnly = this.context.readOnly;
      return readOnly || this.getProp('readOnly') || this.pristine || this.isControlled && !this.props.onChange && !this.props.onInput;
    }
  }, {
    key: "getDataSetValue",
    value: function getDataSetValue() {
      var record = this.record,
          pristine = this.pristine,
          name = this.name;

      if (record) {
        return pristine ? record.getPristineValue(name) : record.get(name);
      }
    }
  }, {
    key: "getTextNode",
    value: function getTextNode() {
      var preventRenderer = this.props.preventRenderer;
      var text = this.editable && (preventRenderer || this.isFocused) ? this.processValue(this.getValue()) : this.processRenderer(this.getValue());
      return text;
    }
  }, {
    key: "getText",
    value: function getText(value) {
      return this.processValue(value);
    }
  }, {
    key: "processText",
    value: function processText(value) {
      return value;
    }
  }, {
    key: "processRenderer",
    value: function processRenderer(value, repeat) {
      var field = this.field,
          record = this.record,
          dataSet = this.dataSet,
          _this$props3 = this.props,
          _this$props3$renderer = _this$props3.renderer,
          renderer = _this$props3$renderer === void 0 ? this.defaultRenderer : _this$props3$renderer,
          name = _this$props3.name,
          maxTagTextLength = _this$props3.maxTagTextLength;
      var processValue;

      if (field && (field.lookup || field.options)) {
        processValue = field.getText(value);
      } // 值集中不存在 再去取直接返回的值


      var text = this.processText(isNil(processValue) ? this.getText(value) : processValue);
      return renderer ? renderer({
        value: value,
        text: text,
        record: record,
        dataSet: dataSet,
        name: name,
        repeat: repeat,
        maxTagTextLength: maxTagTextLength
      }) : text;
    }
  }, {
    key: "processRangeValue",
    value: function processRangeValue(value, repeat) {
      var _this2 = this;

      if (repeat === undefined) {
        value = this.rangeValue;
      }

      if (value === undefined && !this.multiple) {
        value = toRangeValue(this.getValue(), this.range);
      }

      return (value || []).map(function (item) {
        return _this2.processRenderer(item, repeat);
      });
    }
  }, {
    key: "getOldValue",
    value: function getOldValue() {
      return this.getValue();
    }
  }, {
    key: "getValue",
    value: function getValue() {
      var name = this.name;

      if (this.dataSet && name) {
        return this.getDataSetValue();
      }

      return this.value;
    }
  }, {
    key: "getValues",
    value: function getValues() {
      return toMultipleValue(this.getValue(), this.range);
    }
  }, {
    key: "addValue",
    value: function addValue() {
      for (var _len2 = arguments.length, values = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
        values[_key2] = arguments[_key2];
      }

      if (this.multiple) {
        var oldValues = this.getValues();

        if (values.length) {
          this.setValue(uniqWith([].concat(_toConsumableArray(oldValues), values), this.compare));
        } else if (!oldValues.length) {
          this.setValue(this.emptyValue);
        }
      } else {
        this.setValue(values.pop());
      }
    }
  }, {
    key: "isLowerRange",
    value: function isLowerRange(_value1, _value2) {
      return false;
    }
  }, {
    key: "prepareSetValue",
    value: function prepareSetValue() {
      var range = this.range;

      for (var _len3 = arguments.length, value = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
        value[_key3] = arguments[_key3];
      }

      var values = value.filter(function (item) {
        return isNumber(item) || !_isEmpty(item);
      });

      if (range) {
        var rangeTarget = this.rangeTarget,
            rangeValue = this.rangeValue;

        if (rangeTarget !== undefined && rangeValue) {
          var _rangeValue = _slicedToArray(rangeValue, 2),
              start = _rangeValue[0],
              end = _rangeValue[1];

          var newValue = values.pop();
          rangeValue[rangeTarget] = newValue;

          if (rangeTarget === 0 && (newValue || isNumber(newValue)) && (end || isNumber(end)) && this.isLowerRange(end, newValue)) {
            rangeValue[rangeTarget] = end;
            rangeValue[1] = newValue;
          }

          if (rangeTarget === 1 && (newValue || isNumber(newValue)) && (start || isNumber(start)) && this.isLowerRange(newValue, start)) {
            rangeValue[rangeTarget] = start;
            rangeValue[0] = newValue;
          }
        }
      } else {
        this.addValue.apply(this, _toConsumableArray(values));
      }
    }
  }, {
    key: "removeValues",
    value: function removeValues(values) {
      var _this3 = this;

      var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
      var repeat;
      this.setValue(values.reduce(function (oldValues, value) {
        repeat = 0;
        return oldValues.filter(function (v) {
          if (_this3.getValueKey(v) === _this3.getValueKey(value)) {
            if (index === -1 || repeat === index) {
              _this3.afterRemoveValue(value, repeat++);

              return false;
            }

            repeat++;
          }

          return true;
        });
      }, this.getValues()));
    }
  }, {
    key: "removeValue",
    value: function removeValue(value) {
      var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
      this.removeValues([value], index);
    }
  }, {
    key: "afterRemoveValue",
    value: function afterRemoveValue(_value, _repeat) {}
  }, {
    key: "beginRange",
    value: function beginRange() {
      this.setRangeTarget(this.rangeTarget || 0);
      this.rangeValue = this.multiple ? [undefined, undefined] : toRangeValue(this.getValue(), this.range);
    }
  }, {
    key: "endRange",
    value: function endRange() {
      if (this.rangeValue) {
        var values = this.rangeValue.slice();
        this.rangeValue = undefined;

        if (!this.multiple || !values.every(isNil)) {
          this.addValue(fromRangeValue(values, this.range));
        }
      }
    }
  }, {
    key: "setRangeTarget",
    value: function setRangeTarget(target) {
      this.rangeTarget = target;
    }
  }, {
    key: "compare",
    value: function compare(oldValue, newValue) {
      return isSame(toJS(oldValue), toJS(newValue));
    }
  }, {
    key: "setValue",
    value: function setValue(value) {
      var _this4 = this;

      if (!this.isReadOnly()) {
        if (this.multiple || this.range ? isArrayLike(value) && !value.length : isNil(value) || value === '') {
          value = this.emptyValue;
        }

        var name = this.name,
            dataSet = this.dataSet,
            trim = this.trim,
            format = this.format,
            dataIndex = this.observableProps.dataIndex;
        var _this$props4 = this.props,
            _this$props4$onChange = _this$props4.onChange,
            onChange = _this$props4$onChange === void 0 ? noop : _this$props4$onChange,
            _this$props4$onBefore = _this$props4.onBeforeChange,
            onBeforeChange = _this$props4$onBefore === void 0 ? noop : _this$props4$onBefore;
        var old = toJS(this.getOldValue());

        if (!dataSet || !name) {
          value = formatString(value, {
            trim: trim,
            format: format
          });
        }

        var updateAndValidate = function updateAndValidate() {
          if (dataSet && name) {
            (_this4.record || dataSet.create({}, dataIndex)).set(name, value);
          } else {
            _this4.validate(value);
          }
        }; // 转成实际的数据再进行判断


        if (!this.compare(old, toJS(value))) {
          var formNode = this.context.formNode;
          var storedValue = this.value;
          var beforeChange = onBeforeChange(value, old, formNode);
          var resolveCallback = action(function () {
            updateAndValidate();
            onChange(value, old, formNode);

            _this4.afterSetValue();
          });

          if (isPromise(beforeChange)) {
            this.value = value;

            var rejectCallback = function rejectCallback() {
              _this4.value = storedValue;
            };

            beforeChange.then(function (result) {
              return result === false ? rejectCallback() : resolveCallback();
            });
          } else if (beforeChange !== false) {
            resolveCallback();
            this.value = value;
          }
        } else {
          updateAndValidate();
        }
      }
    }
  }, {
    key: "afterSetValue",
    value: function afterSetValue() {}
  }, {
    key: "renderRangeValue",
    value: function renderRangeValue(readOnly, value, repeat) {
      var rangeValue = this.processRangeValue(value, repeat);

      if (readOnly) {
        if (rangeValue.length) {
          return React.createElement(React.Fragment, null, rangeValue[0], "~", rangeValue[1]);
        }
      }
    }
    /**
     * 渲染货币格式化
     * @param readOnly
     */

  }, {
    key: "renderCurrency",
    value: function renderCurrency(readOnly) {
      var currency = this.currency,
          lang = this.lang,
          renderer = this.props.renderer;

      if (renderer) {
        return this.getTextNode();
      }

      if (readOnly) {
        var formatOptions = {
          currency: currency
        };
        var value = this.getValue();
        return formatCurrency(value, lang, formatOptions);
      }
    }
    /**
     * 只读模式下多行单元格渲染
     * @param readOnly
     */

  }, {
    key: "renderMultiLine",
    value: function renderMultiLine(readOnly) {
      var _this5 = this;

      var name = this.name,
          record = this.record,
          field = this.field,
          dataSet = this.dataSet,
          prefixCls = this.prefixCls,
          renderer = this.props.renderer;
      var multiLineFields = findBindFields(field, record.fields, true);

      if (renderer) {
        return renderer({
          multiLineFields: multiLineFields,
          record: record,
          dataSet: dataSet,
          name: name
        });
      }

      if (readOnly) {
        if (multiLineFields.length) {
          this.mutipleValidateMessageLength = 0;
          return React.createElement(React.Fragment, null, multiLineFields.map(function (fieldItem) {
            if (fieldItem) {
              var _this5$multiLineValid = _this5.multiLineValidator(fieldItem),
                  validationResults = _this5$multiLineValid.validationResults;

              var required = defaultTo(fieldItem && fieldItem.get('required'), _this5.props.required);
              var repeats = new Map();
              var validationResult = validationResults.find(function (error) {
                return error.value === (record === null || record === void 0 ? void 0 : record.get(fieldItem.get('name')));
              });

              var validationMessage = validationResult && _this5.renderValidationMessage(validationResult);

              var key = _this5.getValueKey(record === null || record === void 0 ? void 0 : record.get(fieldItem.get('name')));

              var repeat = repeats.get(key) || 0;

              var validationHidden = _this5.isValidationMessageHidden(validationMessage);

              var processValue = '';

              if (fieldItem && fieldItem.get('lovCode')) {
                if (!isNil(fieldItem.getValue())) {
                  if (isPlainObject(fieldItem.getValue())) {
                    processValue = ObjectChainValue.get(fieldItem.getValue(), fieldItem.get('textField') || 'meaning');
                  }
                }
              } // 值集中不存在 再去取直接返回的值


              var text = _this5.processText(processValue || _this5.getText(record === null || record === void 0 ? void 0 : record.get(fieldItem.get('name'))));

              _this5.mutipleValidateMessageLength++;
              var inner = (record === null || record === void 0 ? void 0 : record.status) === RecordStatus.add ? '' : React.createElement("span", {
                className: "".concat(prefixCls, "-multi-value-invalid")
              }, text);
              var validationInner = validationHidden ? inner : React.createElement(Tooltip, {
                suffixCls: "form-tooltip ".concat(getConfig('proPrefixCls'), "-tooltip"),
                key: "".concat(key, "-").concat(repeat),
                title: validationMessage,
                theme: "light",
                placement: "bottomLeft",
                hidden: validationHidden
              }, validationMessage);
              var label = fieldItem.get('label');
              return React.createElement(Row, {
                key: "".concat(record === null || record === void 0 ? void 0 : record.index, "-multi-").concat(fieldItem.get('name')),
                className: "".concat(prefixCls, "-multi")
              }, label && React.createElement(Col, {
                span: 8,
                className: required ? "".concat(prefixCls, "-multi-label ").concat(prefixCls, "-multi-label-required") : "".concat(prefixCls, "-multi-label")
              }, fieldItem.get('label')), React.createElement(Col, {
                span: label ? 16 : 24,
                className: validationHidden ? "".concat(prefixCls, "-multi-value") : "".concat(prefixCls, "-multi-value ").concat(prefixCls, "-multi-value-invalid")
              }, (record === null || record === void 0 ? void 0 : record.get(fieldItem.get('name'))) ? React.createElement(Tooltip, {
                suffixCls: "form-tooltip ".concat(getConfig('proPrefixCls'), "-tooltip"),
                key: "".concat(key, "-").concat(repeat),
                title: validationMessage,
                theme: "light",
                placement: "bottomLeft",
                hidden: validationHidden
              }, text) : validationInner));
            }

            return null;
          }));
        }
      }
    }
  }, {
    key: "getValueKey",
    value: function getValueKey(v) {
      if (isArrayLike(v)) {
        return v.join(',');
      }

      return v;
    }
  }, {
    key: "isMultipleBlockDisabled",
    value: function isMultipleBlockDisabled(_v) {
      return this.isDisabled();
    }
  }, {
    key: "renderMultipleValues",
    value: function renderMultipleValues(readOnly) {
      var _this6 = this;

      var values = this.getValues();
      var valueLength = values.length;
      var prefixCls = this.prefixCls,
          range = this.range,
          _this$props5 = this.props,
          _this$props5$maxTagCo = _this$props5.maxTagCount,
          maxTagCount = _this$props5$maxTagCo === void 0 ? valueLength : _this$props5$maxTagCo,
          maxTagPlaceholder = _this$props5.maxTagPlaceholder;
      var validationResults = this.validator.validationResults;
      var repeats = new Map();
      var blockClassName = classNames(_defineProperty({}, "".concat(prefixCls, "-multiple-block-disabled"), this.isDisabled()), "".concat(prefixCls, "-multiple-block"));
      this.mutipleValidateMessageLength = 0;
      var tags = values.slice(0, maxTagCount).map(function (v, index) {
        var key = _this6.getValueKey(v);

        var repeat = repeats.get(key) || 0;
        var text = range ? _this6.renderRangeValue(true, v, repeat) : _this6.processRenderer(v, repeat);
        repeats.set(key, repeat + 1);

        if (!isNil(text)) {
          var _classNames3;

          var validationResult = validationResults.find(function (error) {
            return error.value === v;
          });

          var disabled = _this6.isMultipleBlockDisabled(v);

          var className = classNames((_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefixCls, "-multiple-block-invalid"), validationResult), _defineProperty(_classNames3, "".concat(prefixCls, "-multiple-block-disabled"), disabled), _classNames3), "".concat(prefixCls, "-multiple-block"));

          var validationMessage = validationResult && _this6.renderValidationMessage(validationResult);

          if (validationMessage) {
            _this6.mutipleValidateMessageLength++;
          }

          var closeBtn = !disabled && !_this6.isReadOnly() && React.createElement(CloseButton, {
            onClose: _this6.handleMutipleValueRemove,
            value: v,
            index: repeat
          });
          var inner = readOnly ? React.createElement("span", {
            className: className
          }, text) : React.createElement("li", {
            className: className
          }, React.createElement("div", null, text), closeBtn);
          return React.createElement(Tooltip, {
            suffixCls: "form-tooltip ".concat(getConfig('proPrefixCls'), "-tooltip"),
            key: String(index),
            title: validationMessage,
            theme: "light",
            placement: "bottomLeft",
            hidden: _this6.isValidationMessageHidden(validationMessage)
          }, inner);
        }

        return undefined;
      });

      if (valueLength > maxTagCount) {
        var content = "+ ".concat(valueLength - maxTagCount, " ...");

        if (maxTagPlaceholder) {
          var omittedValues = values.slice(maxTagCount, valueLength);
          content = typeof maxTagPlaceholder === 'function' ? maxTagPlaceholder(omittedValues) : maxTagPlaceholder;
        }

        tags.push(React.createElement("li", {
          key: "maxTagPlaceholder",
          className: blockClassName
        }, React.createElement("div", null, content)));
      }

      return tags;
    }
  }, {
    key: "clear",
    value: function clear() {
      var _this$props$onClear = this.props.onClear,
          onClear = _this$props$onClear === void 0 ? noop : _this$props$onClear;
      this.setValue(this.emptyValue);
      this.rangeValue = this.isFocused ? [undefined, undefined] : undefined;
      onClear();
    }
  }, {
    key: "checkValidity",
    value: function () {
      var _checkValidity = _asyncToGenerator(
      /*#__PURE__*/
      _regeneratorRuntime.mark(function _callee() {
        var name, valid, _this$props$onInvalid, onInvalid, _this$validator, validationResults, validity;

        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                name = this.name;
                _context.next = 3;
                return this.validate();

              case 3:
                valid = _context.sent;
                _this$props$onInvalid = this.props.onInvalid, onInvalid = _this$props$onInvalid === void 0 ? noop : _this$props$onInvalid;

                if (!valid) {
                  _this$validator = this.validator, validationResults = _this$validator.validationResults, validity = _this$validator.validity;
                  onInvalid(validationResults, validity, name);
                }

                return _context.abrupt("return", valid);

              case 7:
              case "end":
                return _context.stop();
            }
          }
        }, _callee, this);
      }));

      function checkValidity() {
        return _checkValidity.apply(this, arguments);
      }

      return checkValidity;
    }()
  }, {
    key: "validate",
    value: function () {
      var _validate = _asyncToGenerator(
      /*#__PURE__*/
      _regeneratorRuntime.mark(function _callee2(value) {
        var invalid, validator;
        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                invalid = false;

                if (this.props.noValidate) {
                  _context2.next = 8;
                  break;
                }

                if (value === undefined) {
                  value = this.multiple ? this.getValues() : this.getValue();
                }

                validator = this.validator;
                validator.reset();
                _context2.next = 7;
                return validator.checkValidity(value);

              case 7:
                invalid = !_context2.sent;

              case 8:
                return _context2.abrupt("return", !invalid);

              case 9:
              case "end":
                return _context2.stop();
            }
          }
        }, _callee2, this);
      }));

      function validate(_x) {
        return _validate.apply(this, arguments);
      }

      return validate;
    }()
  }, {
    key: "isDisabled",
    value: function isDisabled() {
      var disabled = this.context.disabled;

      if (disabled || this.getProp('disabled')) {
        return true;
      }

      var field = this.field,
          record = this.record;

      if (field) {
        var cascadeMap = field.get('cascadeMap');

        if (cascadeMap && (!record || Object.keys(cascadeMap).some(function (cascade) {
          if (isObject(record.get(cascadeMap[cascade]))) {
            return isLdEmpty(record.get(cascadeMap[cascade]));
          }

          return isNil(record.get(cascadeMap[cascade]));
        }))) {
          return true;
        }
      }

      return _get(_getPrototypeOf(FormField.prototype), "isDisabled", this).call(this);
    }
  }, {
    key: "reset",
    value: function reset() {
      if (!this.isControlled && !this.dataSet) {
        this.setValue(this.props.defaultValue);
      }

      this.validator.reset();
    }
  }, {
    key: "getFieldType",
    value: function getFieldType() {
      var field = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.field;
      return field && field.get('type') || FieldType.string;
    }
  }, {
    key: "getProp",
    value: function getProp(propName) {
      var field = this.field,
          observableProps = this.observableProps;
      return defaultTo(field && field.get(propName), propName in observableProps ? observableProps[propName] : this.props[propName]);
    }
  }, {
    key: "render",
    value: function render() {
      var validationMessage = this.renderValidationMessage();
      var wrapper = this.renderWrapper();
      var help = this.renderHelpMessage();
      var _inTable = this.props._inTable;
      /**
       * 用户自定义校验存在的话说明用户保证校验情况那么多选这些应该存在校验信息
       * If the user-defined verification exists, it means that the user guarantees
       * that the verification situation is so many. These should have verification information
       */

      var customValidator = this.getProp('validator');
      return this.hasFloatLabel ? [isValidElement(wrapper) && cloneElement(wrapper, {
        key: 'wrapper'
      }), React.createElement(Animate, {
        transitionName: "show-error",
        component: "",
        transitionAppear: true,
        key: "validation-message"
      }, validationMessage), help] : _inTable ? React.createElement(React.Fragment, null, wrapper, help) : React.createElement(Tooltip, {
        suffixCls: "form-tooltip ".concat(getConfig('proPrefixCls'), "-tooltip"),
        title: !!(this.multiple && this.getValues().length) && !customValidator || this.mutipleValidateMessageLength > 0 || this.isValidationMessageHidden(validationMessage) ? null : validationMessage,
        theme: "light",
        placement: "bottomLeft"
      }, wrapper, help);
    }
  }, {
    key: "validator",
    get: function get() {
      var field = this.field;

      if (field) {
        if (!field.get('defaultValidationMessages')) {
          field.validator.props.defaultValidationMessages = this.getValidatorProps().defaultValidationMessages;
        }

        return field.validator;
      }

      return new Validator(undefined, this);
    }
  }, {
    key: "name",
    get: function get() {
      return this.observableProps.name;
    }
  }, {
    key: "value",
    get: function get() {
      return this.observableProps.value;
    },
    set: function set(value) {
      var _this7 = this;

      runInAction(function () {
        _this7.observableProps.value = value;
      });
    }
  }, {
    key: "labelLayout",
    get: function get() {
      return this.props.labelLayout || this.context.labelLayout;
    }
  }, {
    key: "hasFloatLabel",
    get: function get() {
      var labelLayout = this.labelLayout;
      return labelLayout === LabelLayout["float"];
    }
  }, {
    key: "isControlled",
    get: function get() {
      return this.props.value !== undefined;
    }
  }, {
    key: "pristine",
    get: function get() {
      return this.props.pristine || this.context.pristine;
    }
  }, {
    key: "defaultValidationMessages",
    get: function get() {
      return {};
    } // @computed

  }, {
    key: "editable",
    get: function get() {
      return !this.isDisabled() && !this.isReadOnly();
    }
  }, {
    key: "dataSet",
    get: function get() {
      var record = this.record;

      if (record) {
        return record.dataSet;
      }

      return this.observableProps.dataSet;
    }
  }, {
    key: "record",
    get: function get() {
      var _this$observableProps = this.observableProps,
          record = _this$observableProps.record,
          dataSet = _this$observableProps.dataSet,
          dataIndex = _this$observableProps.dataIndex;

      if (record) {
        return record;
      }

      if (dataSet) {
        if (isNumber(dataIndex)) {
          return dataSet.get(dataIndex);
        }

        return dataSet.current;
      }

      return undefined;
    }
  }, {
    key: "field",
    get: function get() {
      var record = this.record,
          dataSet = this.dataSet,
          name = this.name,
          observableProps = this.observableProps;
      var displayName = this.constructor.displayName;

      if (displayName !== 'Output' && !name) {
        warning(!observableProps.dataSet, "".concat(displayName, " with binding DataSet need property name."));
        warning(!observableProps.record, "".concat(displayName, " with binding Record need property name."));
      }

      if (name) {
        var recordField = record ? record.getField(name) : undefined;
        var dsField = dataSet ? dataSet.getField(name) : undefined;

        if (recordField) {
          return recordField;
        }

        return dsField;
      }

      return undefined;
    }
  }, {
    key: "isValid",
    get: function get() {
      return this.pristine || (this.field ? this.field.valid : this.validator.validity.valid);
    }
  }, {
    key: "multiple",
    get: function get() {
      return this.getProp('multiple');
    }
    /**
     * 获取字段多行属性
     */

  }, {
    key: "multiLine",
    get: function get() {
      return this.getProp('multiLine');
    }
    /**
     * 获取字段货币属性
     */

  }, {
    key: "currency",
    get: function get() {
      return this.getProp('currency');
    }
  }, {
    key: "trim",
    get: function get() {
      return this.getProp('trim');
    }
  }, {
    key: "format",
    get: function get() {
      return this.getProp('format');
    }
  }, {
    key: "range",
    get: function get() {
      return this.getProp('range');
    }
  }]);

  return FormField;
}(DataSetComponent);
FormField.contextType = FormContext;
FormField.propTypes = _objectSpread({
  _inTable: PropTypes.bool,
  type: PropTypes.string,

  /**
   * 字段名
   */
  name: PropTypes.string,

  /**
   * <受控>当前值
   */
  value: PropTypes.any,

  /**
   * 默认值
   */
  defaultValue: PropTypes.any,

  /**
   * 是否必输
   */
  required: PropTypes.bool,

  /**
   * 是否只读
   */
  readOnly: PropTypes.bool,

  /**
   * 对照表单id
   */
  form: PropTypes.string,

  /**
   * 对照record在DataSet中的index
   * @default dataSet.currentIndex
   */
  dataIndex: PropTypes.number,

  /**
   * 是否是多值
   * @default false
   */
  multiple: PropTypes.bool,

  /**
   * 表单下控件跨越的行数
   */
  rowSpan: PropTypes.number,

  /**
   * 另起新行
   */
  newLine: PropTypes.bool,

  /**
   * 表单下控件跨越的列数
   */
  colSpan: PropTypes.number,

  /**
   * 校验器
   * (value: any, name?: string, form?: ReactInstance) => string | boolean | Promise<string | boolean>
   */
  validator: PropTypes.func,

  /**
   * 校验失败回调
   * (validationMessage: ReactNode, validity: Validity, name?: string) => void
   */
  onInvalid: PropTypes.func,

  /**
   * 额外信息，常用作提示
   */
  help: PropTypes.string,

  /**
   * 显示提示信息的方式
   */
  showHelp: PropTypes.oneOf([ShowHelp.tooltip, ShowHelp.newLine, ShowHelp.none]),

  /**
   * 渲染器
   */
  renderer: PropTypes.func,

  /**
   * 校验信息渲染器
   */
  validationRenderer: PropTypes.func,

  /**
   * 多值标签超出最大数量时的占位描述
   */
  maxTagPlaceholder: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),

  /**
   * 多值标签最大数量
   */
  maxTagCount: PropTypes.number,

  /**
   * 多值标签文案最大长度
   */
  maxTagTextLength: PropTypes.number,

  /**
   * 显示原始值
   */
  pristine: PropTypes.bool,

  /**
   * 字符串值是否去掉首尾空格
   * 可选值: both left right none
   * @default: both
   */
  trim: PropTypes.oneOf([FieldTrim.both, FieldTrim.left, FieldTrim.right, FieldTrim.none]),

  /**
   * 值变化前回调
   * (value: any, oldValue: any) => boolean
   */
  onBeforeChange: PropTypes.func,

  /**
   * 值变化回调
   * (value: any, oldValue: any, form?: ReactInstance) => void
   */
  onChange: PropTypes.func,

  /**
   * 输入回调
   */
  onInput: PropTypes.func,

  /**
   * 键盘回车回调
   */
  onEnterDown: PropTypes.func,

  /**
   * 键盘回车回调
   */
  fieldClassName: PropTypes.string
}, DataSetComponent.propTypes);
FormField.defaultProps = {
  readOnly: false,
  disabled: false,
  noValidate: false,
  showHelp: 'newLine',
  trim: FieldTrim.both
};

__decorate([observable], FormField.prototype, "rangeTarget", void 0);

__decorate([observable], FormField.prototype, "rangeValue", void 0);

__decorate([computed], FormField.prototype, "validator", null);

__decorate([computed], FormField.prototype, "name", null);

__decorate([computed], FormField.prototype, "value", null);

__decorate([computed], FormField.prototype, "defaultValidationMessages", null);

__decorate([computed], FormField.prototype, "dataSet", null);

__decorate([computed], FormField.prototype, "record", null);

__decorate([computed], FormField.prototype, "field", null);

__decorate([computed], FormField.prototype, "isValid", null);

__decorate([computed], FormField.prototype, "multiple", null);

__decorate([computed], FormField.prototype, "multiLine", null);

__decorate([computed], FormField.prototype, "currency", null);

__decorate([computed], FormField.prototype, "trim", null);

__decorate([computed], FormField.prototype, "format", null);

__decorate([computed], FormField.prototype, "range", null);

__decorate([autobind], FormField.prototype, "defaultRenderer", null);

__decorate([autobind], FormField.prototype, "handleFocus", null);

__decorate([autobind], FormField.prototype, "handleBlur", null);

__decorate([autobind], FormField.prototype, "handleCompositionStart", null);

__decorate([autobind], FormField.prototype, "handleChange", null);

__decorate([autobind], FormField.prototype, "handleKeyDown", null);

__decorate([autobind], FormField.prototype, "handleMutipleValueRemove", null);

__decorate([action], FormField.prototype, "prepareSetValue", null);

__decorate([action], FormField.prototype, "beginRange", null);

__decorate([action], FormField.prototype, "endRange", null);

__decorate([action], FormField.prototype, "setRangeTarget", null);

__decorate([action], FormField.prototype, "setValue", null);

__decorate([action], FormField.prototype, "clear", null);

__decorate([autobind], FormField.prototype, "reset", null);

var ObserverFormField =
/*#__PURE__*/
function (_FormField) {
  _inherits(ObserverFormField, _FormField);

  var _super2 = _createSuper(ObserverFormField);

  function ObserverFormField() {
    _classCallCheck(this, ObserverFormField);

    return _super2.apply(this, arguments);
  }

  return ObserverFormField;
}(FormField);

ObserverFormField.defaultProps = FormField.defaultProps;
ObserverFormField = __decorate([observer], ObserverFormField);
export default ObserverFormField;
//# sourceMappingURL=FormField.js.map