choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
1,541 lines (1,334 loc) • 55.8 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.FormField = void 0;
exports.getFieldsById = getFieldsById;
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 _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _tslib = require("tslib");
var _react = _interopRequireWildcard(require("react"));
var _mobx = require("mobx");
var _classnames = _interopRequireDefault(require("classnames"));
var _isPromise = _interopRequireDefault(require("is-promise"));
var _isNumber = _interopRequireDefault(require("lodash/isNumber"));
var _isNil = _interopRequireDefault(require("lodash/isNil"));
var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
var _isObject = _interopRequireDefault(require("lodash/isObject"));
var _defaultTo = _interopRequireDefault(require("lodash/defaultTo"));
var _uniqWith = _interopRequireDefault(require("lodash/uniqWith"));
var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
var _findLastIndex = _interopRequireDefault(require("lodash/findLastIndex"));
var _mobxReact = require("mobx-react");
var _noop = _interopRequireDefault(require("lodash/noop"));
var _KeyCode = _interopRequireDefault(require("../../../lib/_util/KeyCode"));
var _warning = _interopRequireDefault(require("../../../lib/_util/warning"));
var _UnitConvertor = require("../../../lib/_util/UnitConvertor");
var _enum = require("../core/enum");
var _autobind = _interopRequireDefault(require("../_util/autobind"));
var _Validator = _interopRequireDefault(require("../validator/Validator"));
var _Validity = _interopRequireDefault(require("../validator/Validity"));
var _FormContext = _interopRequireDefault(require("../form/FormContext"));
var _DataSetComponent2 = _interopRequireDefault(require("../data-set/DataSetComponent"));
var _isEmpty2 = _interopRequireDefault(require("../_util/isEmpty"));
var _enum2 = require("../data-set/enum");
var _enum3 = require("./enum");
var _utils = require("../form/utils");
var _enum4 = require("../form/enum");
var _animate = _interopRequireDefault(require("../animate"));
var _utils2 = require("./utils");
var _isSame = _interopRequireDefault(require("../_util/isSame"));
var _formatString = _interopRequireDefault(require("../formatter/formatString"));
var _singleton = require("../tooltip/singleton");
var _util = _interopRequireDefault(require("../overflow-tip/util"));
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 = (0, _createSuper2["default"])(FormField);
function FormField() {
var _this;
(0, _classCallCheck2["default"])(this, FormField);
_this = _super.apply(this, arguments);
_this.emptyValue = null; // 多选中出现了校验值的数量大于一那么输入框不需要存在校验信息展示
_this.multipleValidateMessageLength = 0;
return _this;
}
(0, _createClass2["default"])(FormField, [{
key: "name",
get: function get() {
return this.observableProps.name;
}
}, {
key: "value",
get: function get() {
return this.observableProps.value;
},
set: function set(value) {
var _this2 = this;
(0, _mobx.runInAction)(function () {
_this2.observableProps.value = value;
});
}
}, {
key: "labelLayout",
get: function get() {
return this.props.labelLayout || this.context.labelLayout;
}
}, {
key: "labelTooltip",
get: function get() {
return this.props.labelTooltip || this.context.labelTooltip || this.context.getTooltip('label');
}
}, {
key: "hasFloatLabel",
get: function get() {
var labelLayout = this.labelLayout;
return labelLayout === _enum4.LabelLayout["float"];
}
}, {
key: "isControlled",
get: function get() {
return this.getControlled(this.props);
}
}, {
key: "pristine",
get: function get() {
return this.observableProps.pristine;
}
}, {
key: "defaultValidationMessages",
get: function get() {
return {};
}
}, {
key: "editable",
get: function get() {
return this.isEditable();
}
}, {
key: "dataSet",
get: function get() {
var record = this.record;
if (record) {
return record.dataSet;
}
var observableProps = this.observableProps;
if ('dataSet' in observableProps) {
return observableProps.dataSet;
}
return observableProps.contextDataSet;
}
}, {
key: "record",
get: function get() {
var observableProps = this.observableProps;
if ('record' in observableProps) {
return observableProps.record;
}
var dataSet = observableProps.dataSet,
dataIndex = observableProps.dataIndex;
if (dataSet) {
if ((0, _isNumber["default"])(dataIndex)) {
return dataSet.get(dataIndex);
}
return dataSet.current;
}
if ((0, _isNumber["default"])(dataIndex)) {
var contextDataSet = observableProps.contextDataSet;
if (contextDataSet) {
return contextDataSet.get(dataIndex);
}
}
return observableProps.contextRecord;
}
}, {
key: "dataIndex",
get: function get() {
var _this$observableProps = this.observableProps,
dataIndex = _this$observableProps.dataIndex,
contextDataIndex = _this$observableProps.contextDataIndex;
return (0, _defaultTo["default"])(dataIndex, contextDataIndex);
}
}, {
key: "field",
get: function get() {
var 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) {
// const recordField = record ? record.getField(name) : undefined;
// if (recordField) {
// return recordField;
// }
if (dataSet) {
return dataSet.getField(name);
}
}
return undefined;
}
}, {
key: "valid",
get: function get() {
return this.isValid();
}
}, {
key: "multiple",
get: function get() {
return this.getProp('multiple');
}
/**
* 获取字段货币属性
*/
}, {
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() {
var field = this.field,
observableProps = this.observableProps,
record = this.record;
if (field) {
return field && field.get('range', record);
}
return 'range' in observableProps ? observableProps('range') : this.props.range;
}
}, {
key: "readOnly",
get: function get() {
return this.isReadOnly();
}
}, {
key: "highlight",
get: function get() {
return this.getDisplayProp('highlight');
}
}, {
key: "showValidation",
get: function get() {
var _this$observableProps2 = this.observableProps.showValidation,
showValidation = _this$observableProps2 === void 0 ? this.getContextConfig('showValidation') : _this$observableProps2;
return showValidation;
}
}, {
key: "showHelp",
get: function get() {
var _this$observableProps3 = this.observableProps.showHelp,
showHelp = _this$observableProps3 === void 0 ? this.getContextConfig('showHelp') : _this$observableProps3;
return showHelp;
}
}, {
key: "helpTooltipProps",
get: function get() {
var helpTooltipProps = this.observableProps.helpTooltipProps;
return helpTooltipProps;
}
}, {
key: "highlightRenderer",
get: function get() {
var _this$observableProps4 = this.observableProps.highlightRenderer,
highlightRenderer = _this$observableProps4 === void 0 ? this.getContextConfig('highlightRenderer') : _this$observableProps4;
return highlightRenderer;
}
}, {
key: "rangeSeparator",
get: function get() {
var rangeSeparator = this.getContextConfig('rangeSeparator');
return rangeSeparator || '~';
}
}, {
key: "getControlled",
value: function getControlled(props) {
return props.value !== undefined;
}
}, {
key: "defaultRenderer",
value: function defaultRenderer(renderProps) {
return (0, _utils2.defaultRenderer)(renderProps);
}
/**
* 判断是否应该显示验证信息, 作为属性传给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;
return !!(hidden || !message || this.pristine || !this.record && noValidate);
}
}, {
key: "showValidationMessage",
value: function showValidationMessage(e, message) {
(0, _utils2.showValidationMessage)(e, message, this.context.getTooltipTheme('validation'), this.context.getTooltipPlacement('validation'), this.getContextConfig);
}
}, {
key: "isEmpty",
value: function isEmpty() {
var value = this.getValue();
return (0, _utils2.isFieldValueEmpty)(value, this.range, this.multiple);
}
}, {
key: "isValid",
value: function isValid() {
if (this.pristine) {
return true;
}
var field = this.field;
if (field) {
return field.isValid(this.record);
}
var validationResults = this.validationResults;
if (validationResults) {
return !validationResults.length;
}
return true;
}
}, {
key: "isReadOnly",
value: function isReadOnly() {
var readOnly = this.observableProps.readOnly;
if (readOnly || this.pristine) {
return true;
}
var field = this.field;
return field ? field.get('readOnly', this.record) : false;
}
}, {
key: "isEditable",
value: function isEditable() {
return !this.disabled && !this.readOnly;
}
}, {
key: "isEditableLike",
value: function isEditableLike() {
return false;
}
}, {
key: "getObservablePropsExcludeOutput",
value: function getObservablePropsExcludeOutput(props, context) {
return {
readOnly: context.readOnly || props.readOnly || this.getControlled(props) && !props.onChange && !props.onInput
};
}
}, {
key: "getObservableProps",
value: function getObservableProps(props, context) {
var observableProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _get3["default"])((0, _getPrototypeOf2["default"])(FormField.prototype), "getObservableProps", this).call(this, props, context)), this.getObservablePropsExcludeOutput(props, context)), {}, {
label: props.label,
name: props.name,
contextDataSet: context.dataSet,
contextRecord: context.record,
dataIndex: props.dataIndex,
contextDataIndex: context.dataIndex,
value: 'value' in props ? props.value : this.observableProps ? this.observableProps.value : props.defaultValue,
disabled: context.disabled || props.disabled,
pristine: context.pristine || props.pristine,
highlight: props.highlight,
highlightRenderer: 'highlightRenderer' in props ? props.highlightRenderer : context.fieldHighlightRenderer,
showValidation: 'showValidation' in props ? props.showValidation : context.showValidation,
showHelp: 'showHelp' in props ? props.showHelp : context.showHelp,
helpTooltipProps: props.helpTooltipProps
});
if ('record' in props) {
observableProps.record = props.record;
}
return observableProps;
}
}, {
key: "getOmitPropsKeys",
value: function getOmitPropsKeys() {
return (0, _get3["default"])((0, _getPrototypeOf2["default"])(FormField.prototype), "getOmitPropsKeys", this).call(this).concat(['record', 'defaultValue', 'dataIndex', 'onEnterDown', 'onClear', 'onBeforeChange', 'readOnly', 'validator', 'validationRenderer', 'help', 'showHelp', 'helpTooltipProps', 'renderer', 'maxTagPlaceholder', 'maxTagCount', 'maxTagTextLength', 'rowIndex', 'colIndex', 'labelLayout', '_inTable', 'labelWidth', 'pristine', 'range', 'trim', 'newLine', 'fieldClassName', 'preventRenderer', 'highlight', 'highlightRenderer', 'labelTooltip', 'isFlat', 'useColon', 'requiredMarkAlign', 'showValidation', 'tagRenderer']);
}
}, {
key: "getOtherPropsExcludeOutput",
value: function getOtherPropsExcludeOutput(otherProps) {
otherProps.onChange = !this.disabled && !this.readOnly ? this.handleChange : _noop["default"];
otherProps.onKeyDown = this.handleKeyDown;
otherProps.onCompositionStart = this.handleCompositionStart;
otherProps.onCompositionEnd = this.handleChange;
return otherProps;
}
}, {
key: "getOtherProps",
value: function getOtherProps() {
var otherProps = (0, _get3["default"])((0, _getPrototypeOf2["default"])(FormField.prototype), "getOtherProps", this).call(this);
otherProps.onMouseEnter = this.handleMouseEnter;
otherProps.onMouseLeave = this.handleMouseLeave;
return this.getOtherPropsExcludeOutput(otherProps);
}
}, {
key: "getWrapperClassNamesExcludeOutput",
value: function getWrapperClassNamesExcludeOutput(prefixCls, empty) {
var _ref;
return _ref = {}, (0, _defineProperty2["default"])(_ref, "".concat(prefixCls, "-empty"), empty), (0, _defineProperty2["default"])(_ref, "".concat(prefixCls, "-readonly"), this.readOnly), _ref;
}
}, {
key: "getWrapperClassNames",
value: function getWrapperClassNames() {
var _get2, _ref2;
var prefixCls = this.prefixCls;
var required = this.getProp('required');
var empty = this.isEmpty();
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, "-highlight"), this.highlight), (0, _defineProperty2["default"])(_ref2, "".concat(prefixCls, "-invalid"), !this.valid), (0, _defineProperty2["default"])(_ref2, "".concat(prefixCls, "-float-label"), this.hasFloatLabel), (0, _defineProperty2["default"])(_ref2, "".concat(prefixCls, "-required"), required), (0, _defineProperty2["default"])(_ref2, "".concat(prefixCls, "-required-colors"), required && (empty || !this.getContextConfig('showRequiredColorsOnlyEmpty'))), _ref2), this.getWrapperClassNamesExcludeOutput(prefixCls, empty)].concat(args));
}
}, {
key: "renderWrapper",
value: function renderWrapper() {
return undefined;
}
}, {
key: "renderHelpMessage",
value: function renderHelpMessage() {
var showHelp = this.showHelp;
if (showHelp === _enum3.ShowHelp.newLine) {
var help = this.getDisplayProp('help');
if (help) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: "help",
className: "".concat(this.getContextProPrefixCls(_utils.FIELD_SUFFIX), "-help")
}, help);
}
}
}
}, {
key: "getLabel",
value: function getLabel() {
return (0, _mobx.toJS)(this.getProp('label'));
}
}, {
key: "renderFloatLabel",
value: function renderFloatLabel() {
if (this.hasFloatLabel) {
var label = this.getLabel();
if (label) {
var _classNames;
var floatLabelOffsetX = this.floatLabelOffsetX;
var prefixCls = this.getContextProPrefixCls(_utils.FIELD_SUFFIX);
var required = this.getProp('required');
var classString = (0, _classnames["default"])("".concat(prefixCls, "-label"), (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-required"), required), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-readonly"), this.readOnly), _classNames));
var style = floatLabelOffsetX ? {
marginLeft: (0, _UnitConvertor.pxToRem)(floatLabelOffsetX, true)
} : undefined;
return /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(prefixCls, "-label-wrapper"),
style: style
}, /*#__PURE__*/_react["default"].createElement("div", {
className: classString,
onMouseEnter: this.handleFloatLabelMouseEnter,
onMouseLeave: this.handleFloatLabelMouseLeave
}, label));
}
}
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
(0, _get3["default"])((0, _getPrototypeOf2["default"])(FormField.prototype), "componentDidMount", this).call(this);
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);
if (this.tooltipShown) {
(0, _singleton.hide)();
this.tooltipShown = false;
}
}
}, {
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: "renderValidationResult",
value: function renderValidationResult(validationResult) {
var validationMessage = this.getValidationMessage(validationResult);
var _this$context = this.context,
labelLayout = _this$context.labelLayout,
getProPrefixCls = _this$context.getProPrefixCls;
if (validationMessage) {
var showIcon = !(labelLayout === _enum4.LabelLayout["float"] || this.showValidation === _enum4.ShowValidation.newLine);
return (0, _utils2.renderValidationMessage)(validationMessage, showIcon, getProPrefixCls);
}
}
}, {
key: "getValidatorProp",
value: function getValidatorProp(key) {
switch (key) {
case 'type':
return this.getFieldType();
case 'customValidator':
return this.getProp('validator');
case 'range':
return this.range;
case 'multiple':
return this.multiple;
case 'defaultValidationMessages':
return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, this.defaultValidationMessages), this.getContextConfig('defaultValidationMessages'));
default:
return this.getProp(key);
}
}
}, {
key: "getValidatorProps",
value: function getValidatorProps() {
var name = this.name;
return {
name: name,
form: this.context.formNode
};
}
}, {
key: "getValidationResults",
value: function getValidationResults() {
var field = this.field,
record = this.record;
if (field) {
return field.getValidationErrorValues(record);
}
return this.validationResults;
}
}, {
key: "getValidationMessage",
value: function getValidationMessage(validationResult) {
if (validationResult === undefined) {
var results = this.getValidationResults();
if (results && results.length) {
validationResult = results[0];
}
}
var validationRenderer = this.props.validationRenderer;
if (validationResult) {
if (validationRenderer) {
var validationMessage = validationRenderer(validationResult, validationResult.validationProps);
if (validationMessage) {
return validationMessage;
}
}
return validationResult.validationMessage;
}
}
}, {
key: "showTooltip",
value: function showTooltip(e) {
if (!this.hasFloatLabel && this.showValidation === _enum4.ShowValidation.tooltip) {
var message = this.getTooltipValidationMessage();
if (message) {
(0, _utils2.showValidationMessage)(e, message, this.context.getTooltipTheme('validation'), this.context.getTooltipPlacement('validation'), this.getContextConfig);
return true;
}
}
return false;
}
}, {
key: "handleMouseEnter",
value: function handleMouseEnter(e) {
if (this.showTooltip(e)) {
this.tooltipShown = true;
}
var _this$props$onMouseEn = this.props.onMouseEnter,
onMouseEnter = _this$props$onMouseEn === void 0 ? _noop["default"] : _this$props$onMouseEn;
onMouseEnter(e);
}
}, {
key: "handleMouseLeave",
value: function handleMouseLeave(e) {
if (this.tooltipShown) {
(0, _singleton.hide)();
this.tooltipShown = false;
}
var _this$props$onMouseLe = this.props.onMouseLeave,
onMouseLeave = _this$props$onMouseLe === void 0 ? _noop["default"] : _this$props$onMouseLe;
onMouseLeave(e);
}
}, {
key: "handleFloatLabelMouseEnter",
value: function handleFloatLabelMouseEnter(e) {
var labelTooltip = this.labelTooltip,
_this$context2 = this.context,
getTooltipTheme = _this$context2.getTooltipTheme,
getTooltipPlacement = _this$context2.getTooltipPlacement;
var currentTarget = e.currentTarget;
if (labelTooltip === _enum.Tooltip.always || labelTooltip === _enum.Tooltip.overflow && (0, _util["default"])(currentTarget)) {
(0, _singleton.show)(currentTarget, {
title: this.getLabel(),
placement: getTooltipPlacement('label'),
theme: getTooltipTheme('label')
});
this.tooltipShown = true;
} else if ((0, _mobx.isArrayLike)(labelTooltip)) {
var tooltipType = labelTooltip[0];
var labelTooltipProps = labelTooltip[1] || {};
var duration = (labelTooltipProps.mouseEnterDelay || 0.1) * 1000;
if (tooltipType === _enum.Tooltip.always || tooltipType === _enum.Tooltip.overflow && (0, _util["default"])(currentTarget)) {
(0, _singleton.show)(currentTarget, (0, _objectSpread2["default"])({
theme: getTooltipTheme('label'),
placement: getTooltipPlacement('label'),
title: labelTooltipProps.title ? labelTooltipProps.title : this.getLabel()
}, labelTooltipProps), duration);
this.tooltipShown = true;
}
}
}
}, {
key: "handleFloatLabelMouseLeave",
value: function handleFloatLabelMouseLeave() {
(0, _singleton.hide)();
}
}, {
key: "handleFocus",
value: function handleFocus(e) {
(0, _get3["default"])((0, _getPrototypeOf2["default"])(FormField.prototype), "handleFocus", this).call(this, e);
if (this.range && !this.rangeValue) {
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.editable || this.isEditableLike())) {
this.endRange();
}
}
}, {
key: "handleCompositionStart",
value: function handleCompositionStart() {
this.lock = true;
}
}, {
key: "handleChange",
value: function handleChange(e) {
delete this.lock;
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, _utils2.getDateFormatByField)(field, this.getFieldType(field), this.record);
}
}, {
key: "getProcessValueOptions",
value: function getProcessValueOptions() {
return {
dateFormat: this.getDateFormat(),
showInvalidDate: this.getContextConfig('showInvalidDate')
};
}
}, {
key: "processValue",
value: function processValue(value) {
return (0, _utils2.processValue)(value, this.getProcessValueOptions());
}
}, {
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 value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.getValue();
return this.getTextByValue(value);
}
}, {
key: "getTextByValue",
value: function getTextByValue(value) {
var preventRenderer = this.props.preventRenderer;
var text = this.editable && (preventRenderer || this.isFocused) ? this.processValue(value) : this.processRenderer(value);
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 processedValue;
if (field && (field.getLookup(record) || field.get('options', record) || field.get('lovCode', record))) {
// Cascader 值集处理
if ((0, _mobx.isArrayLike)(value)) {
var isCascader = !field.get('multiple', record) || value.some(function (v) {
return (0, _mobx.isArrayLike)(v);
});
processedValue = value.map(function (v) {
return field.getText(v, undefined, record);
}).join(isCascader ? '/' : '、');
} else {
processedValue = field.getText(value, undefined, record);
}
} // 值集中不存在 再去取直接返回的值
var text = this.processText((0, _isNil["default"])(processedValue) ? this.processValue(value) : processedValue);
return renderer ? renderer({
value: value,
text: text,
record: record,
dataSet: dataSet,
name: name,
repeat: repeat,
maxTagTextLength: maxTagTextLength
}) : text;
}
}, {
key: "processRangeValue",
value: function processRangeValue(value) {
if (value === undefined && !this.multiple) {
value = (0, _utils2.toRangeValue)(this.getValue(), this.range);
}
return value || [];
}
}, {
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, _utils2.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) {
var range = this.range;
this.setValue((0, _uniqWith["default"])([].concat((0, _toConsumableArray2["default"])((0, _mobx.isArrayLike)(range) ? oldValues.map(function (v) {
return (0, _utils2.fromRangeValue)(v, range);
}) : oldValues), values), this.compare));
} else if (!oldValues.length) {
this.setValue(this.emptyValue);
} else {
this.validate(oldValues, false);
}
} else {
this.setValue(values.pop());
}
}
}, {
key: "isLowerRange",
value: function isLowerRange(_value1, _value2) {
return false;
}
}, {
key: "exchangeRangeValue",
value: function exchangeRangeValue(start, end) {
var rangeValue = this.rangeValue;
if (rangeValue) {
rangeValue[0] = end;
rangeValue[1] = start;
}
}
}, {
key: "prepareSetValue",
value: function prepareSetValue() {
var processV = this.getProp('processValue');
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, _isEmpty2["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();
if ((0, _isFunction["default"])(processV)) {
newValue = processV(newValue, rangeTarget);
}
rangeValue[rangeTarget] = newValue;
if (rangeTarget === 0 && (newValue || (0, _isNumber["default"])(newValue)) && (end || (0, _isNumber["default"])(end)) && this.isLowerRange(end, newValue)) {
this.exchangeRangeValue(newValue, end);
}
if (rangeTarget === 1 && (newValue || (0, _isNumber["default"])(newValue)) && (start || (0, _isNumber["default"])(start)) && this.isLowerRange(newValue, start)) {
this.exchangeRangeValue(start, newValue);
}
}
} else {
if ((0, _isFunction["default"])(processV)) {
values = values.map(function (v) {
return processV(v, undefined);
});
}
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;
var newValues = values.reduce(function (oldValues, value) {
repeat = 0;
var valueKey = _this3.getValueKey(value);
return oldValues.filter(function (v) {
if (_this3.getValueKey(v) === valueKey) {
if (index === -1 || repeat === index) {
_this3.afterRemoveValue(value, repeat++);
return false;
}
repeat++;
}
return true;
});
}, this.getValues());
var range = this.range;
this.setValue((0, _mobx.isArrayLike)(range) ? newValues.map(function (v) {
return (0, _utils2.fromRangeValue)(v, range);
}) : newValues);
}
}, {
key: "removeValue",
value: function removeValue(value) {
var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
this.removeValues([value], index);
}
}, {
key: "removeLastValue",
value: function removeLastValue() {
var _this4 = this;
var values = this.getValues();
var index = (0, _findLastIndex["default"])(values, function (value) {
return !_this4.isMultipleBlockDisabled(value);
});
if (index !== -1) {
var _values$splice = values.splice(index, 1),
_values$splice2 = (0, _slicedToArray2["default"])(_values$splice, 1),
value = _values$splice2[0];
var range = this.range;
this.setValue((0, _mobx.isArrayLike)(range) ? values.map(function (v) {
return (0, _utils2.fromRangeValue)(v, range);
}) : values);
this.afterRemoveValue((0, _utils2.fromRangeValue)(value, range), -1);
return value;
}
}
}, {
key: "afterRemoveValue",
value: function afterRemoveValue(_value, _repeat) {// noop
}
}, {
key: "beginRange",
value: function beginRange() {
this.setRangeTarget(this.rangeTarget || 0);
this.rangeValue = this.multiple ? [undefined, undefined] : (0, _utils2.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, _utils2.fromRangeValue)(values, this.range));
}
}
this.setRangeTarget(undefined);
}
}, {
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: "autoCreate",
value: function autoCreate() {
var record = this.record;
if (record) {
return record;
}
var dataSet = this.dataSet,
name = this.name,
dataIndex = this.dataIndex;
if (dataSet && name) {
return dataSet.create({}, dataIndex);
}
}
}, {
key: "setValue",
value: function setValue(value, noVaidate) {
var _this5 = this;
if (!this.readOnly) {
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;
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) {
var record = _this5.autoCreate();
if (record) {
var field = _this5.field;
if (field && !field.get('defaultValidationMessages', record)) {
field.set('defaultValidationMessages', (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _this5.defaultValidationMessages), {}, {
label: _this5.getProp('label')
}));
}
record.set(name, value);
}
} else if (!noVaidate) {
_this5.validate(value, false);
}
}; // 转成实际的数据再进行判断
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);
_this5.afterSetValue();
});
if ((0, _isPromise["default"])(beforeChange)) {
this.value = value;
var rejectCallback = function rejectCallback() {
_this5.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() {// noop
}
}, {
key: "renderRangeValue",
value: function renderRangeValue(value, repeat) {
return (0, _utils2.renderRangeValue)(value, {
repeat: repeat,
processRenderer: this.processRenderer,
rangeSeparator: this.rangeSeparator
});
}
}, {
key: "getValueKey",
value: function getValueKey(v) {
return (0, _utils2.getValueKey)(v);
}
}, {
key: "isMultipleBlockDisabled",
value: function isMultipleBlockDisabled(_v) {
return this.disabled;
}
}, {
key: "renderMultipleValues",
value: function renderMultipleValues(readOnly) {
var prefixCls = this.prefixCls,
range = this.range,
disabled = this.disabled,
_this$props5 = this.props,
_this$props5$maxTagCo = _this$props5.maxTagCount,
maxTagCount = _this$props5$maxTagCo === void 0 ? this.getContextConfig('fieldMaxTagCount') : _this$props5$maxTagCo,
_this$props5$maxTagPl = _this$props5.maxTagPlaceholder,
maxTagPlaceholder = _this$props5$maxTagPl === void 0 ? this.getContextConfig('fieldMaxTagPlaceholder') : _this$props5$maxTagPl,
tagRenderer = _this$props5.tagRenderer;
var values = (0, _utils2.renderMultipleValues)(this.getValue(), {
range: range,
maxTagCount: maxTagCount,
maxTagPlaceholder: maxTagPlaceholder,
prefixCls: prefixCls,
disabled: disabled,
tagRenderer: tagRenderer,
readOnly: this.readOnly || readOnly,
validationResults: this.getValidationResults(),
isMultipleBlockDisabled: this.isMultipleBlockDisabled,
processRenderer: this.processRenderer,
renderValidationResult: this.renderValidationResult,
handleMultipleValueRemove: this.handleMutipleValueRemove,
isValidationMessageHidden: this.isValidationMessageHidden,
showValidationMessage: this.showValidationMessage,
getKey: this.getValueKey,
rangeSeparator: this.rangeSeparator
});
this.multipleValidateMessageLength = values.multipleValidateMessageLength;
return values;
}
}, {
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, validationResults, currentValidationResult;
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) {
validationResults = this.getValidationResults();
if (validationResults) {
currentValidationResult = validationResults[0];
onInvalid(validationResults, new _Validity["default"](currentValidationResult ? (0, _defineProperty2["default"])({}, currentValidationResult.ruleName, true) : undefined), 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 validate(value) {
var _this6 = this;
var report = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
if (!this.props.noValidate) {
if (value === undefined) {
value = this.multiple ? this.getValues() : this.getValue();
}
var field = this.field,
record = this.record,
name = this.name,
dataSet = this.dataSet;
return _Validator["default"].checkValidity(value, field && record ? {
dataSet: dataSet,
record: record,
name: name
} : this.getValidatorProps(), field && record ? field.getValidatorPropGetter(record) : this.getValidatorProp.bind(this)).then((0, _mobx.action)(function (_ref4) {
var valid = _ref4.valid,
validationResults = _ref4.validationResults,
validatorProps = _ref4.validatorProps;
if (record && name) {
record.setValidationError(name, validationResults);
} else {
_this6.validationResults = validationResults;
}
if (report) {
_Validator["default"].report(validationResults, validatorProps);
var formNode = _this6.context.formNode;
if (formNode && !formNode.validating) {
formNode.reportValidity(valid);
}
}
return valid;
}));
}
return Promise.resolve(true);
}
}, {
key: "isDisabled",
value: function isDisabled() {
if ((0, _get3["default"])((0, _getPrototypeOf2["default"])(FormField.prototype), "isDisabled", this).call(this)) {
return true;
}
var field = this.field,
record = this.record;
if (field) {
var disabled = field.get('disabled', record);
if (disabled) {
return true;
}
var cascadeMap = field.get('cascadeMap', record);
if (cascadeMap && (!record || Object.keys(cascadeMap).some(function (cascade) {
if ((0, _isObject["default"])(record.get(cascadeMap[cascade]))) {
return (0, _isEmpty["default"])(record.get(cascadeMap[cascade]));
}
return (0, _isNil["default"])(record.get(cascadeMap[cascade]));
}))) {
return true;
}
}
return false;
}
}, {
key: "reset",
value: function reset() {
if (!this.isControlled && !this.dataSet) {
this.setValue(this.props.defaultValue, true);
}
var record = this.record,
name = this.name;
if (record && name) {
record.clearValidationError(name);
} else {
this.validationResults = undefined;
}
}
}, {
key: "getFieldType",
value: function getFieldType() {
var field = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.field;
return field && field.get('type', this.record) || _enum2.FieldType.string;
}
}, {
key: "getProp",
value: function getProp(propName) {
var fieldPropName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : propName;
var field = this.field,
observableProps = this.observableProps,
record = this.record;
return (0, _defaultTo["default"])(field && field.get(fieldPropName, record), propName in observableProps ? observableProps[propName] : this.props[propName]);
}
/**
* 显示类属性值获取（组件属性优先级高于 DataSet Field 属性优先级）
* @param propName 组件属性名
* @param fieldPropName Field 字段属性名
* @returns
*/
}, {
key: "getDisplayProp",
value: function getDisplayProp(propName) {
var fieldPropName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : propName;
var field = this.field,
observableProps = this.observableProps,
record = this.record;
return (0, _defaultTo["default"])(propName in observableProps ? observableProps[propName] : this.props[propName], field && field.get(fieldPropName, record));
}
}, {
key: "getTooltipValidationMessage",
value: function getTooltipValidationMessage() {
var _inTable = this.props._inTable;
if (!_inTable && !(!!(this.multiple && this.getValues().length) && !this.getProp('validator') || this.multipleValidateMessageLength > 0)) {
var validationMessage = this.renderValidationResult();
if (!this.isValidationMessageHidden(validationMessage)) {
return validationMessage;
}
}
}
}, {
key: "renderHighLight",
value: function renderHighLight() {
var wrapper = this.renderWrapper();
var highlight = this.highlight,
dataSet = this.dataSet,
record = this.record,
name = this.name;
if (highlight) {
var hidden = !(this.hasFloatLabel || this.showValidation === _enum4.ShowValidation.newLine || this.valid);
var highlightWrapper = this.highlightRenderer((0, _utils2.transformHighlightProps)(highlight, {
dataSet: dataSet,
record: record,
name: name,
hidden: hidden
}), wrapper);
if ( /*#__PURE__*/(0, _react.isValidElement)(highlightWrapper)) {
return highlightWrapper;
}
}
return wrapper;
}
}, {
key: "render",
value: function