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

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

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

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _get3 = _interopRequireDefault(require("@babel/runtime/helpers/get"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _tslib = require("tslib");

var _map = _interopRequireDefault(require("core-js/library/fn/map"));

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _mobx = require("mobx");

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

var _isPromise = _interopRequireDefault(require("is-promise"));

var _omit = _interopRequireDefault(require("lodash/omit"));

var _isNumber = _interopRequireDefault(require("lodash/isNumber"));

var _isString = _interopRequireDefault(require("lodash/isString"));

var _isNil = _interopRequireDefault(require("lodash/isNil"));

var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));

var _isObject = _interopRequireDefault(require("lodash/isObject"));

var _defaultTo = _interopRequireDefault(require("lodash/defaultTo"));

var _uniqWith = _interopRequireDefault(require("lodash/uniqWith"));

var _moment = require("moment");

var _mobxReact = require("mobx-react");

var _noop = _interopRequireDefault(require("lodash/noop"));

var _isPlainObject = _interopRequireDefault(require("lodash/isPlainObject"));

var _KeyCode = _interopRequireDefault(require("../../../lib/_util/KeyCode"));

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

var _configure = require("../../../lib/configure");

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

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

var _autobind = _interopRequireDefault(require("../_util/autobind"));

var _utils = require("../data-set/utils");

var _Validator = _interopRequireDefault(require("../validator/Validator"));

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

var _DataSetComponent2 = _interopRequireDefault(require("../data-set/DataSetComponent"));

var _icon = _interopRequireDefault(require("../icon"));

var _tooltip = _interopRequireDefault(require("../tooltip"));

var _isEmpty3 = _interopRequireDefault(require("../_util/isEmpty"));

var ObjectChainValue = _interopRequireWildcard(require("../_util/ObjectChainValue"));

var _enum = require("../data-set/enum");

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

var _utils2 = require("../form/utils");

var _enum3 = require("../form/enum");

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

var _CloseButton = _interopRequireDefault(require("./CloseButton"));

var _utils3 = require("./utils");

var _isSame = _interopRequireDefault(require("../_util/isSame"));

var _formatString = _interopRequireDefault(require("../formatter/formatString"));

var _formatCurrency = _interopRequireDefault(require("../formatter/formatCurrency"));

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 = (0, _getPrototypeOf2["default"])(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return (0, _possibleConstructorReturn2["default"])(this, result);
  };
}

var map = {};

function getFieldsById(id) {
  if (!map[id]) {
    map[id] = [];
  }

  return map[id];
}

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

  var _super = _createSuper(FormField);

  function FormField() {
    var _this;

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

    _this.mutipleValidateMessageLength = 0;
    return _this;
  }

  (0, _createClass2["default"])(FormField, [{
    key: "defaultRenderer",
    value: function defaultRenderer(_ref) {
      var text = _ref.text,
          repeat = _ref.repeat,
          maxTagTextLength = _ref.maxTagTextLength;
      return repeat !== undefined && maxTagTextLength && (0, _isString["default"])(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["default"](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 (0, _mobx.isArrayLike)(value) ? !value.length : (0, _isEmpty3["default"])(value);
    }
  }, {
    key: "getObservableProps",
    value: function getObservableProps(props, context) {
      return (0, _objectSpread2["default"])({}, (0, _get3["default"])((0, _getPrototypeOf2["default"])(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: (0, _defaultTo["default"])(props.dataIndex, context.dataIndex),
        value: 'value' in props ? props.value : this.observableProps ? this.observableProps.value : props.defaultValue
      });
    }
  }, {
    key: "getOtherProps",
    value: function getOtherProps() {
      var otherProps = (0, _omit["default"])((0, _get3["default"])((0, _getPrototypeOf2["default"])(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["default"];
      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 = (0, _get3["default"])((0, _getPrototypeOf2["default"])(FormField.prototype), "getWrapperClassNames", this)).call.apply(_get2, [this, (_ref2 = {}, (0, _defineProperty2["default"])(_ref2, "".concat(prefixCls, "-invalid"), !this.isValid), (0, _defineProperty2["default"])(_ref2, "".concat(prefixCls, "-float-label"), this.hasFloatLabel), (0, _defineProperty2["default"])(_ref2, "".concat(prefixCls, "-required"), this.getProp('required')), (0, _defineProperty2["default"])(_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 === _enum2.ShowHelp.newLine && help) {
        return _react["default"].createElement("div", {
          key: "help",
          className: "".concat((0, _configure.getProPrefixCls)(_utils2.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 = (0, _configure.getProPrefixCls)(_utils2.FIELD_SUFFIX);
          var required = this.getProp('required');
          var readOnly = this.getProp('readOnly');
          var classString = (0, _classnames["default"])("".concat(prefixCls, "-label"), (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-required"), required), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-readonly"), readOnly), _classNames));
          return _react["default"].createElement("div", {
            className: "".concat(prefixCls, "-label-wrapper")
          }, _react["default"].createElement("div", {
            className: classString
          }, label));
        }
      }
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      this.addToForm(this.props, this.context);
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps, nextContext) {
      (0, _get3["default"])((0, _getPrototypeOf2["default"])(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["default"].createElement("div", {
          className: (0, _configure.getProPrefixCls)('validation-message')
        }, this.context.labelLayout !== _enum3.LabelLayout["float"] && _react["default"].createElement(_icon["default"], {
          type: "error"
        }), _react["default"].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) {
      (0, _get3["default"])((0, _getPrototypeOf2["default"])(FormField.prototype), "handleFocus", this).call(this, e);

      if (this.range) {
        this.beginRange();
      }
    }
  }, {
    key: "handleBlur",
    value: function handleBlur(e) {
      (0, _get3["default"])((0, _getPrototypeOf2["default"])(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["default"] : _this$props2$onKeyDow,
          _this$props2$onEnterD = _this$props2.onEnterDown,
          onEnterDown = _this$props2$onEnterD === void 0 ? _noop["default"] : _this$props2$onEnterD;
      onKeyDown(e);

      if (!e.isDefaultPrevented()) {
        switch (e.keyCode) {
          case _KeyCode["default"].ENTER:
            this.handleEnterDown(e);
            onEnterDown(e);
            break;

          case _KeyCode["default"].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 (0, _utils3.getDateFormatByField)(field, this.getFieldType(field));
    }
  }, {
    key: "processValue",
    value: function processValue(value) {
      if (!(0, _isNil["default"])(value)) {
        if ((0, _moment.isMoment)(value)) {
          return value.format(this.getDateFormat());
        }

        if ((0, _react.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((0, _isNil["default"])(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 = (0, _utils3.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 (0, _utils3.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((0, _uniqWith["default"])([].concat((0, _toConsumableArray2["default"])(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 (0, _isNumber["default"])(item) || !(0, _isEmpty3["default"])(item);
      });

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

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

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

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

          if (rangeTarget === 1 && (newValue || (0, _isNumber["default"])(newValue)) && (start || (0, _isNumber["default"])(start)) && this.isLowerRange(newValue, start)) {
            rangeValue[rangeTarget] = start;
            rangeValue[0] = newValue;
          }
        }
      } else {
        this.addValue.apply(this, (0, _toConsumableArray2["default"])(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] : (0, _utils3.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["default"])) {
          this.addValue((0, _utils3.fromRangeValue)(values, this.range));
        }
      }
    }
  }, {
    key: "setRangeTarget",
    value: function setRangeTarget(target) {
      this.rangeTarget = target;
    }
  }, {
    key: "compare",
    value: function compare(oldValue, newValue) {
      return (0, _isSame["default"])((0, _mobx.toJS)(oldValue), (0, _mobx.toJS)(newValue));
    }
  }, {
    key: "setValue",
    value: function setValue(value) {
      var _this4 = this;

      if (!this.isReadOnly()) {
        if (this.multiple || this.range ? (0, _mobx.isArrayLike)(value) && !value.length : (0, _isNil["default"])(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["default"] : _this$props4$onChange,
            _this$props4$onBefore = _this$props4.onBeforeChange,
            onBeforeChange = _this$props4$onBefore === void 0 ? _noop["default"] : _this$props4$onBefore;
        var old = (0, _mobx.toJS)(this.getOldValue());

        if (!dataSet || !name) {
          value = (0, _formatString["default"])(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, (0, _mobx.toJS)(value))) {
          var formNode = this.context.formNode;
          var storedValue = this.value;
          var beforeChange = onBeforeChange(value, old, formNode);
          var resolveCallback = (0, _mobx.action)(function () {
            updateAndValidate();
            onChange(value, old, formNode);

            _this4.afterSetValue();
          });

          if ((0, _isPromise["default"])(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["default"].createElement(_react["default"].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 (0, _formatCurrency["default"])(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 = (0, _utils.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["default"].createElement(_react["default"].Fragment, null, multiLineFields.map(function (fieldItem) {
            if (fieldItem) {
              var _this5$multiLineValid = _this5.multiLineValidator(fieldItem),
                  validationResults = _this5$multiLineValid.validationResults;

              var required = (0, _defaultTo["default"])(fieldItem && fieldItem.get('required'), _this5.props.required);
              var repeats = new _map["default"]();
              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 (!(0, _isNil["default"])(fieldItem.getValue())) {
                  if ((0, _isPlainObject["default"])(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) === _enum.RecordStatus.add ? '' : _react["default"].createElement("span", {
                className: "".concat(prefixCls, "-multi-value-invalid")
              }, text);
              var validationInner = validationHidden ? inner : _react["default"].createElement(_tooltip["default"], {
                suffixCls: "form-tooltip ".concat((0, _configure.getConfig)('proPrefixCls'), "-tooltip"),
                key: "".concat(key, "-").concat(repeat),
                title: validationMessage,
                theme: "light",
                placement: "bottomLeft",
                hidden: validationHidden
              }, validationMessage);
              var label = fieldItem.get('label');
              return _react["default"].createElement(_row["default"], {
                key: "".concat(record === null || record === void 0 ? void 0 : record.index, "-multi-").concat(fieldItem.get('name')),
                className: "".concat(prefixCls, "-multi")
              }, label && _react["default"].createElement(_col["default"], {
                span: 8,
                className: required ? "".concat(prefixCls, "-multi-label ").concat(prefixCls, "-multi-label-required") : "".concat(prefixCls, "-multi-label")
              }, fieldItem.get('label')), _react["default"].createElement(_col["default"], {
                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["default"].createElement(_tooltip["default"], {
                suffixCls: "form-tooltip ".concat((0, _configure.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 ((0, _mobx.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["default"]();
      var blockClassName = (0, _classnames["default"])((0, _defineProperty2["default"])({}, "".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 (!(0, _isNil["default"])(text)) {
          var _classNames3;

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

          var disabled = _this6.isMultipleBlockDisabled(v);

          var className = (0, _classnames["default"])((_classNames3 = {}, (0, _defineProperty2["default"])(_classNames3, "".concat(prefixCls, "-multiple-block-invalid"), validationResult), (0, _defineProperty2["default"])(_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["default"].createElement(_CloseButton["default"], {
            onClose: _this6.handleMutipleValueRemove,
            value: v,
            index: repeat
          });

          var inner = readOnly ? _react["default"].createElement("span", {
            className: className
          }, text) : _react["default"].createElement("li", {
            className: className
          }, _react["default"].createElement("div", null, text), closeBtn);
          return _react["default"].createElement(_tooltip["default"], {
            suffixCls: "form-tooltip ".concat((0, _configure.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["default"].createElement("li", {
          key: "maxTagPlaceholder",
          className: blockClassName
        }, _react["default"].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["default"] : _this$props$onClear;
      this.setValue(this.emptyValue);
      this.rangeValue = this.isFocused ? [undefined, undefined] : undefined;
      onClear();
    }
  }, {
    key: "checkValidity",
    value: function () {
      var _checkValidity = (0, _asyncToGenerator2["default"])(
      /*#__PURE__*/
      _regenerator["default"].mark(function _callee() {
        var name, valid, _this$props$onInvalid, onInvalid, _this$validator, validationResults, validity;

        return _regenerator["default"].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["default"] : _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 = (0, _asyncToGenerator2["default"])(
      /*#__PURE__*/
      _regenerator["default"].mark(function _callee2(value) {
        var invalid, validator;
        return _regenerator["default"].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 ((0, _isObject["default"])(record.get(cascadeMap[cascade]))) {
            return (0, _isEmpty2["default"])(record.get(cascadeMap[cascade]));
          }

          return (0, _isNil["default"])(record.get(cascadeMap[cascade]));
        }))) {
          return true;
        }
      }

      return (0, _get3["default"])((0, _getPrototypeOf2["default"])(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') || _enum.FieldType.string;
    }
  }, {
    key: "getProp",
    value: function getProp(propName) {
      var field = this.field,
          observableProps = this.observableProps;
      return (0, _defaultTo["default"])(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 ? [(0, _react.isValidElement)(wrapper) && (0, _react.cloneElement)(wrapper, {
        key: 'wrapper'
      }), _react["default"].createElement(_animate["default"], {
        transitionName: "show-error",
        component: "",
        transitionAppear: true,
        key: "validation-message"
      }, validationMessage), help] : _inTable ? _react["default"].createElement(_react["default"].Fragment, null, wrapper, help) : _react["default"].createElement(_tooltip["default"], {
        suffixCls: "form-tooltip ".concat((0, _configure.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["default"](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;

      (0, _mobx.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 === _enum3.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 ((0, _isNumber["default"])(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) {
        (0, _warning["default"])(!observableProps.dataSet, "".concat(displayName, " with binding DataSet need property name."));
        (0, _warning["default"])(!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;
}(_DataSetComponent2["default"]);

exports.FormField = FormField;
FormField.contextType = _FormContext["default"];
FormField.propTypes = (0, _objectSpread2["default"])({
  _inTable: _propTypes["default"].bool,
  type: _propTypes["default"].string,

  /**
   * 字段名
   */
  name: _propTypes["default"].string,

  /**
   * <受控>当前值
   */
  value: _propTypes["default"].any,

  /**
   * 默认值
   */
  defaultValue: _propTypes["default"].any,

  /**
   * 是否必输
   */
  required: _propTypes["default"].bool,

  /**
   * 是否只读
   */
  readOnly: _propTypes["default"].bool,

  /**
   * 对照表单id
   */
  form: _propTypes["default"].string,

  /**
   * 对照record在DataSet中的index
   * @default dataSet.currentIndex
   */
  dataIndex: _propTypes["default"].number,

  /**
   * 是否是多值
   * @default false
   */
  multiple: _propTypes["default"].bool,

  /**
   * 表单下控件跨越的行数
   */
  rowSpan: _propTypes["default"].number,

  /**
   * 另起新行
   */
  newLine: _propTypes["default"].bool,

  /**
   * 表单下控件跨越的列数
   */
  colSpan: _propTypes["default"].number,

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

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

  /**
   * 额外信息，常用作提示
   */
  help: _propTypes["default"].string,

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

  /**
   * 渲染器
   */
  renderer: _propTypes["default"].func,

  /**
   * 校验信息渲染器
   */
  validationRenderer: _propTypes["default"].func,

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

  /**
   * 多值标签最大数量
   */
  maxTagCount: _propTypes["default"].number,

  /**
   * 多值标签文案最大长度
   */
  maxTagTextLength: _propTypes["default"].number,

  /**
   * 显示原始值
   */
  pristine: _propTypes["default"].bool,

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

  /**
   * 值变化前回调
   * (value: any, oldValue: any) => boolean
   */
  onBeforeChange: _propTypes["default"].func,

  /**
   * 值变化回调
   * (value: any, oldValue: any, form?: ReactInstance) => void
   */
  onChange: _propTypes["default"].func,

  /**
   * 输入回调
   */
  onInput: _propTypes["default"].func,

  /**
   * 键盘回车回调
   */
  onEnterDown: _propTypes["default"].func,

  /**
   * 键盘回车回调
   */
  fieldClassName: _propTypes["default"].string
}, _DataSetComponent2["default"].propTypes);
FormField.defaultProps = {
  readOnly: false,
  disabled: false,
  noValidate: false,
  showHelp: 'newLine',
  trim: _enum.FieldTrim.both
};
(0, _tslib.__decorate)([_mobx.observable], FormField.prototype, "rangeTarget", void 0);
(0, _tslib.__decorate)([_mobx.observable], FormField.prototype, "rangeValue", void 0);
(0, _tslib.__decorate)([_mobx.computed], FormField.prototype, "validator", null);
(0, _tslib.__decorate)([_mobx.computed], FormField.prototype, "name", null);
(0, _tslib.__decorate)([_mobx.computed], FormField.prototype, "value", null);
(0, _tslib.__decorate)([_mobx.computed], FormField.prototype, "defaultValidationMessages", null);
(0, _tslib.__decorate)([_mobx.computed], FormField.prototype, "dataSet", null);
(0, _tslib.__decorate)([_mobx.computed], FormField.prototype, "record", null);
(0, _tslib.__decorate)([_mobx.computed], FormField.prototype, "field", null);