choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
1,703 lines (1,477 loc) • 53.8 kB
JavaScript
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
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 _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { __decorate } from "tslib";
import React, { isValidElement } from 'react';
import isEqual from 'lodash/isEqual';
import isNil from 'lodash/isNil';
import debounce from 'lodash/debounce';
import isString from 'lodash/isString';
import isEmpty from 'lodash/isEmpty';
import noop from 'lodash/noop';
import isPlainObject from 'lodash/isPlainObject';
import { observer } from 'mobx-react';
import { action, computed, isArrayLike, observable, reaction, runInAction, toJS } from 'mobx';
import { Menus, SingleMenu } from '../../../es/rc-components/cascader';
import { defaultFieldNames } from '../../../es/rc-components/cascader/Cascader';
import KeyCode from '../../../es/_util/KeyCode';
import { pxToRem } from '../../../es/_util/UnitConvertor';
import cloneDeep from 'lodash/cloneDeep';
import isFunction from 'lodash/isFunction';
import isObject from 'lodash/isObject';
import { MenuMode } from '../../../es/cascader';
import TriggerField from '../trigger-field/TriggerField';
import autobind from '../_util/autobind';
import { DataSetStatus, FieldType } from '../data-set/enum';
import DataSet from '../data-set/DataSet';
import Record from '../data-set/Record';
import Spin from '../spin';
import { stopEvent } from '../_util/EventManager';
import normalizeOptions, { expandTreeRecords } from './utils';
import { $l } from '../locale-context';
import ObjectChainValue from '../_util/ObjectChainValue';
import isEmptyUtil from '../_util/isEmpty';
import isSameLike from '../_util/isSameLike';
import { ExpandTrigger } from './enum';
export var MORE_KEY = '__more__';
var disabledField = 'disabled';
function defaultOnOption(_ref) {
var record = _ref.record;
if (record instanceof Record) {
return {
disabled: record.get(disabledField)
};
}
}
export function getItemKey(record, text, value) {
return "item-".concat(value || record.id, "-").concat(( /*#__PURE__*/isValidElement(text) ? text.key : text) || record.id);
}
function getSimpleValue(value, valueField) {
if (isPlainObject(value)) {
return ObjectChainValue.get(value, valueField);
}
return value;
}
/**
* 简单比较arry的值是否相同
* 主要问题是观察变量修改了值类型所以使用此方法
* @param arr
* @param arrNext
*/
function arraySameLike(arr, arrNext) {
if (isArrayLike(arr) && isArrayLike(arrNext)) {
return arr.toString() === arrNext.toString();
}
return false;
}
function defaultSearchMatcher(_ref2) {
var record = _ref2.record,
text = _ref2.text,
textField = _ref2.textField;
return record.get(textField) && record.get(textField).indexOf(text) !== -1;
}
export var Cascader = /*#__PURE__*/function (_TriggerField) {
_inherits(Cascader, _TriggerField);
var _super = _createSuper(Cascader);
function Cascader(props, context) {
var _this;
_classCallCheck(this, Cascader);
_this = _super.call(this, props, context);
_this.doSearch = debounce(function (value) {
if (isString(_this.searchMatcher)) {
_this.searchRemote(value);
}
_this.handleSearch(value);
}, 500);
_this.setActiveValue({});
_this.setItemMenuWidth(0);
_this.setIsClickTab(false);
return _this;
}
_createClass(Cascader, [{
key: "isClickTab",
get: function get() {
return this.clickTab;
}
}, {
key: "activeValue",
get: function get() {
var options = this.options,
optionsIsChange = this.optionsIsChange,
activeValues = this.activeValues,
valueField = this.valueField;
if (optionsIsChange && activeValues && activeValues instanceof Record) {
var newActiveValue = options.find(function (r) {
return r.get(valueField) === activeValues.get(valueField);
});
if (newActiveValue && newActiveValue !== activeValues) {
return newActiveValue;
}
}
return activeValues;
}
}, {
key: "itemMenuWidth",
get: function get() {
return this.menuItemWith;
}
}, {
key: "findActiveRecord",
value: function findActiveRecord(value, options) {
var _this2 = this;
var result;
var returnActiveValue = function returnActiveValue(arrayOption, index) {
if (arrayOption && arrayOption.length > 0) {
arrayOption.forEach(function (item) {
if (isSameLike(value[index], _this2.getRecordOrObjValue(item, _this2.valueField))) {
result = item;
if (item.children) {
returnActiveValue(item.children, ++index);
}
}
});
}
};
if (options instanceof DataSet) {
returnActiveValue(options.treeData, 0);
}
if (isArrayLike(options)) {
returnActiveValue(options, 0);
}
return result;
}
}, {
key: "setActiveValue",
value: function setActiveValue(activeValues) {
this.optionsIsChange = false;
this.activeValues = activeValues;
}
}, {
key: "setIsClickTab",
value: function setIsClickTab(isClickTab) {
this.clickTab = isClickTab;
}
}, {
key: "setItemMenuWidth",
value: function setItemMenuWidth(width) {
this.menuItemWith = width;
}
}, {
key: "getDefaultAction",
value: function getDefaultAction() {
return this.getContextConfig('selectTrigger') || _get(_getPrototypeOf(Cascader.prototype), "getDefaultAction", this).call(this);
}
}, {
key: "defaultValidationMessages",
get: function get() {
var label = this.getProp('label');
return {
valueMissing: $l('Cascader', label ? 'value_missing' : 'value_missing_no_label', {
label: label
})
};
}
}, {
key: "textField",
get: function get() {
return this.getProp('textField') || 'meaning';
}
}, {
key: "valueField",
get: function get() {
return this.getProp('valueField') || 'value';
}
}, {
key: "cascadeOptions",
get: function get() {
var record = this.record,
field = this.field,
options = this.options;
var data = options.data;
if (field) {
var cascadeMap = field.get('cascadeMap', record);
if (cascadeMap) {
if (record) {
var cascades = Object.keys(cascadeMap);
return data.filter(function (item) {
return cascades.every(function (cascade) {
return isSameLike(record.get(cascadeMap[cascade]), item.get(cascade));
});
});
}
return [];
}
}
return data;
}
}, {
key: "multiple",
get: function get() {
return !!this.getProp('multiple');
}
}, {
key: "menuMultiple",
get: function get() {
return this.multiple;
}
}, {
key: "parentField",
get: function get() {
return this.getProp('parentField') || 'parentValue';
}
}, {
key: "idField",
get: function get() {
return this.getProp('idField') || this.valueField;
}
}, {
key: "searchMatcher",
get: function get() {
var _this$observableProps = this.observableProps.searchMatcher,
searchMatcher = _this$observableProps === void 0 ? defaultSearchMatcher : _this$observableProps;
return searchMatcher;
}
}, {
key: "options",
get: function get() {
var field = this.field,
textField = this.textField,
valueField = this.valueField,
idField = this.idField,
parentField = this.parentField,
multiple = this.multiple,
options = this.observableProps.options;
if (isArrayLike(options)) {
this.optionsIsChange = true;
return normalizeOptions({
textField: textField,
valueField: valueField,
idField: idField,
disabledField: disabledField,
multiple: multiple,
data: toJS(options),
parentField: parentField,
getConfig: this.getContextConfig
});
}
return options || field && field.getOptions(this.record);
}
}, {
key: "filteredOptions",
get: function get() {
var text = this.text;
return this.searchData(this.cascadeOptions, text);
} // 增加父级属性
}, {
key: "addOptionsParent",
value: function addOptionsParent(options, parent) {
var _this3 = this;
if (options.length > 0) {
return options.map(function (ele) {
ele.parent = parent || undefined;
if (ele.children) {
_this3.addOptionsParent(ele.children, ele);
}
return ele;
});
}
}
}, {
key: "primitive",
get: function get() {
return this.observableProps.primitiveValue !== false && this.getProp('type') !== FieldType.object;
}
}, {
key: "checkValue",
value: function checkValue() {
var _this4 = this;
this.checkValueReaction = reaction(function () {
return _this4.cascadeOptions;
}, function () {
return _this4.processSelectedData();
});
}
}, {
key: "checkCombo",
value: function checkCombo() {
var _this5 = this;
this.checkComboReaction = reaction(function () {
return _this5.getValue();
}, function (value) {
return _this5.generateComboOption(value);
});
}
}, {
key: "clearCheckValue",
value: function clearCheckValue() {
if (this.checkValueReaction) {
this.checkValueReaction();
this.checkValueReaction = undefined;
}
}
}, {
key: "clearCheckCombo",
value: function clearCheckCombo() {
if (this.checkComboReaction) {
this.checkComboReaction();
this.checkComboReaction = undefined;
}
}
}, {
key: "clearReaction",
value: function clearReaction() {
this.clearCheckValue();
this.clearCheckCombo();
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
_get(_getPrototypeOf(Cascader.prototype), "componentWillUnmount", this).call(this);
this.clearReaction();
}
}, {
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps, nextContext) {
_get(_getPrototypeOf(Cascader.prototype), "componentWillReceiveProps", this).call(this, nextProps, nextContext);
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
this.forcePopupAlign();
}
}, {
key: "getOmitPropsKeys",
value: function getOmitPropsKeys() {
return _get(_getPrototypeOf(Cascader.prototype), "getOmitPropsKeys", this).call(this).concat(['multiple', 'value', 'searchable', 'searchMatcher', 'name', 'dropdownMatchSelectWidth', 'dropdownMenuStyle', 'primitiveValue', 'notFoundContent', 'onOption', 'expandTrigger', 'dropdownMatchSelectWidth', 'menuMode', 'singleMenuStyle', 'singleMenuItemStyle', 'singlePleaseRender', 'singleMenuItemRender', 'onChoose', 'onUnChoose', 'changeOnSelect', 'pagingOptionContent', 'loadData', 'async', 'fieldNames', 'optionRenderer']);
}
}, {
key: "getObservableProps",
value: function getObservableProps(props, context) {
return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(Cascader.prototype), "getObservableProps", this).call(this, props, context)), {}, {
children: props.children,
options: props.options,
searchable: props.searchable,
searchMatcher: props.searchMatcher,
primitiveValue: props.primitiveValue
});
}
}, {
key: "getMenuPrefixCls",
value: function getMenuPrefixCls() {
return "".concat(this.prefixCls, "-dropdown-menu");
}
}, {
key: "getPagingOptionContent",
value: function getPagingOptionContent() {
var pagingOptionContent = this.props.pagingOptionContent;
if (pagingOptionContent !== undefined) {
return pagingOptionContent;
}
return this.getContextConfig('selectPagingOptionContent');
}
}, {
key: "renderMultipleHolder",
value: function renderMultipleHolder() {
var name = this.name,
multiple = this.multiple;
if (multiple) {
return _get(_getPrototypeOf(Cascader.prototype), "renderMultipleHolder", this).call(this);
}
return /*#__PURE__*/React.createElement("input", {
key: "value",
type: "hidden",
value: this.toValueString(this.getValue()) || '',
name: name,
onChange: noop
});
}
}, {
key: "getNotFoundContent",
value: function getNotFoundContent() {
var notFoundContent = this.props.notFoundContent;
if (notFoundContent !== undefined) {
return notFoundContent;
}
return this.getContextConfig('renderEmpty')('Select');
}
/**
* 返回一个打平tree返回层级
* @param record
* @param fn
*/
}, {
key: "findParentRecordTree",
value: function findParentRecordTree(record, fn) {
var recordTree = [];
if (record) {
if (isFunction(fn)) {
recordTree.push(fn(record));
} else {
recordTree.push(record);
}
}
if (record && record.parent) {
if (isFunction(fn)) {
return [].concat(_toConsumableArray(this.findParentRecordTree(record.parent, fn)), recordTree);
}
return [].concat(_toConsumableArray(this.findParentRecordTree(record.parent)), recordTree);
}
return recordTree;
}
}, {
key: "handleLoadData",
value: function handleLoadData(event) {
var loadData = this.props.loadData;
var dataSet = this.options;
var promises = [];
if (dataSet) {
var _dataSet$props = dataSet.props,
idField = _dataSet$props.idField,
parentField = _dataSet$props.parentField;
var record = event.value;
if (idField && parentField && record && !record.children) {
var id = record.get(idField);
promises.push(dataSet.queryMore(-1, _defineProperty({}, parentField, id)));
}
}
if (loadData) {
promises.push(loadData(event));
}
return Promise.all(promises);
}
/**
* 获取record 或者 obj对应的值
* @param value
* @param key
*/
}, {
key: "getRecordOrObjValue",
value: function getRecordOrObjValue(value, key) {
if (value instanceof Record) {
return value.get(key);
}
if (isObject(value)) {
return value[key];
}
return value;
}
/**
* 渲染menu 表格
* @param menuProps
*/
}, {
key: "getMenu",
value: function getMenu() {
var _this6 = this;
var menuProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var options = this.options;
if (!options) {
return null;
} // 暂时不用考虑分组情况 groups
var menuDisabled = this.disabled,
textField = this.textField,
valueField = this.valueField,
_this$props = this.props,
dropdownMenuStyle = _this$props.dropdownMenuStyle,
expandTrigger = _this$props.expandTrigger,
onOption = _this$props.onOption,
menuMode = _this$props.menuMode,
singleMenuStyle = _this$props.singleMenuStyle,
singleMenuItemStyle = _this$props.singleMenuItemStyle,
singlePleaseRender = _this$props.singlePleaseRender,
changeOnSelect = _this$props.changeOnSelect,
singleMenuItemRender = _this$props.singleMenuItemRender,
async = _this$props.async,
loadData = _this$props.loadData,
fieldNames = _this$props.fieldNames;
var optGroups = [];
var selectedValues = []; // 过滤后的数据不用进行子集遍历
var treePropsChange = function treePropsChange(treeRecord) {
var isFilterSearch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var treeRecords = [];
if (treeRecord.length > 0) {
treeRecords = treeRecord.map(function (recordItem) {
var value = _this6.getRecordOrObjValue(recordItem, valueField);
var text = isFilterSearch ? _this6.treeTextToArray(recordItem).join('/') : _this6.getRecordOrObjValue(recordItem, textField);
var optionProps = onOption ? onOption({
dataSet: options,
record: recordItem
}) : undefined;
var optionDisabled = menuDisabled || optionProps && optionProps.disabled;
var key = getItemKey(recordItem, text, value);
var children;
if (recordItem.isSelected) {
selectedValues.push(recordItem);
}
if (recordItem.children && !isFilterSearch) {
children = treePropsChange(recordItem.children);
}
var isLeaf = async || !!loadData ? undefined : _this6.text ? !children || !children.length : !recordItem.children || !recordItem.children.length;
var itemContent = _this6.getMenuItem({
record: recordItem,
text: text,
value: value,
isFilterSearch: isFilterSearch
});
return children ? _objectSpread(_objectSpread({
disabled: optionDisabled,
label: itemContent,
value: recordItem,
children: children,
isLeaf: isLeaf
}, optionProps), {}, {
key: key
}) : _objectSpread(_objectSpread({
disabled: optionDisabled,
label: itemContent,
value: recordItem,
isLeaf: isLeaf
}, optionProps), {}, {
key: key
});
});
}
return treeRecords;
};
if (this.text) {
optGroups = treePropsChange(expandTreeRecords(this.filteredOptions, !changeOnSelect), true);
} else if (options) {
optGroups = treePropsChange(options.treeData);
} else {
optGroups = [];
}
var getInputSelectedValue = function getInputSelectedValue(inputValue) {
var activeInputValue = [];
if (isArrayLike(options)) {
activeInputValue = _this6.findParentRecordTree(_this6.findActiveRecord(inputValue, _this6.options));
} else if (options instanceof DataSet) {
activeInputValue = _this6.findParentRecordTree(_this6.findActiveRecord(inputValue, _this6.options.treeData));
} else {
activeInputValue = [];
}
return activeInputValue;
};
/**
* 获取当前激活的 menuItem
* 以及value 展示激活状态的判断
* 按钮能够控制不受值的影响
* inputValue: 输入框的值
* activeValue: 激活值（choose和键盘影响）
* this.popup:开启状态有激活值那么为激活值
*/
var getActiveValue = function getActiveValue(inputValue) {
var activeValue = [];
if (!isEmpty(inputValue)) {
if (inputValue && arraySameLike(_this6.treeValueToArray(_this6.activeValue), inputValue) || _this6.activeValue.children) {
activeValue = _this6.findParentRecordTree(_this6.activeValue);
} else if (_this6.activeValue) {
activeValue = getInputSelectedValue(inputValue);
}
} else if (inputValue) {
activeValue = _this6.findParentRecordTree(_this6.activeValue);
}
return activeValue;
};
if (this.popup && !isEmpty(this.activeValue)) {
selectedValues = this.findParentRecordTree(this.activeValue);
} else if (!this.multiple) {
selectedValues = getActiveValue(this.getValues());
} else if (this.getValues() && this.getValues().length > 0) {
for (var i = this.getValues().length - 1; i >= 0; i--) {
selectedValues = getActiveValue(this.getValues()[i]);
if (!isEmpty(selectedValues)) {
break;
}
}
} else if (!isEmpty(this.activeValue)) {
selectedValues = this.findParentRecordTree(this.activeValue);
}
var dropdownMenuStyleMerge = dropdownMenuStyle;
if (this.itemMenuWidth > 0) {
dropdownMenuStyleMerge = _objectSpread(_objectSpread({}, dropdownMenuStyle), {}, {
width: pxToRem(this.itemMenuWidth, true)
});
} // 由于想让多选出现不同展现这边增加一个selected属性来解决但是会造成一定的性能损耗
var selectedValueMultiple;
if (this.multiple) {
var selectedMultiple = this.getValues().map(function (item) {
return getInputSelectedValue(item);
}).filter(function (recordItem) {
return recordItem !== undefined && recordItem !== null;
});
selectedValueMultiple = Array.from(new Set(selectedMultiple.reduce(function (accumulator, currentValue) {
return [].concat(_toConsumableArray(accumulator), _toConsumableArray(currentValue));
}, [])));
}
if (options.paging && options.currentPage < options.totalPage && menuMode !== MenuMode.single) {
var menuPrefixCls = this.getMenuPrefixCls();
optGroups.push({
key: MORE_KEY,
eventKey: MORE_KEY,
label: this.getPagingOptionContent(),
className: "".concat(menuPrefixCls, "-item ").concat(menuPrefixCls, "-item-more"),
isLeaf: true
});
} // 渲染成单项选择还是多项选择组件以及空组件
if (options && options.length && optGroups.length) {
if (menuMode === MenuMode.single) {
return /*#__PURE__*/React.createElement(SingleMenu, _extends({}, menuProps, {
fieldNames: fieldNames,
defaultFieldNames: defaultFieldNames,
singleMenuStyle: singleMenuStyle,
singleMenuItemStyle: singleMenuItemStyle,
singlePleaseRender: singlePleaseRender,
singleMenuItemRender: singleMenuItemRender,
prefixCls: this.prefixCls,
expandTrigger: expandTrigger,
activeValue: selectedValues,
selectedValues: selectedValueMultiple,
options: optGroups,
locale: {
pleaseSelect: $l('Cascader', 'please_select')
},
onSelect: this.handleMenuSelect,
isTabSelected: this.isClickTab,
dropdownMenuColumnStyle: dropdownMenuStyleMerge,
visible: this.popup
}));
}
return /*#__PURE__*/React.createElement(Menus, _extends({}, menuProps, {
fieldNames: fieldNames,
defaultFieldNames: defaultFieldNames,
prefixCls: this.prefixCls,
expandTrigger: expandTrigger,
activeValue: selectedValues,
selectedValues: selectedValueMultiple,
options: optGroups,
onSelect: this.handleMenuSelect,
dropdownMenuColumnStyle: dropdownMenuStyleMerge,
visible: this.popup
}));
}
return /*#__PURE__*/React.createElement("div", {
key: "no_data"
}, /*#__PURE__*/React.createElement("ul", {
className: "".concat(this.prefixCls, "-menu"),
style: _objectSpread(_objectSpread({}, {
height: 'auto'
}), dropdownMenuStyleMerge)
}, /*#__PURE__*/React.createElement("li", {
className: "".concat(this.prefixCls, "-menu-item ").concat(this.prefixCls, "-menu-item-disabled")
}, this.loading ? ' ' : this.getNotFoundContent())));
}
}, {
key: "getMenuItem",
value: function getMenuItem(_ref3) {
var record = _ref3.record,
text = _ref3.text,
value = _ref3.value,
isFilterSearch = _ref3.isFilterSearch;
var options = this.options,
optionRenderer = this.props.optionRenderer;
return optionRenderer ? optionRenderer({
dataSet: options,
record: record,
text: text,
value: value,
isFilterSearch: isFilterSearch
}) : text;
}
}, {
key: "searchable",
get: function get() {
return !!this.observableProps.searchable;
}
}, {
key: "loading",
get: function get() {
return this.options.status === DataSetStatus.loading;
}
}, {
key: "isEditable",
value: function isEditable() {
return _get(_getPrototypeOf(Cascader.prototype), "isEditable", this).call(this) && !!this.searchable;
}
}, {
key: "getPopupContent",
value: function getPopupContent() {
var menu = /*#__PURE__*/React.createElement(Spin, {
key: "menu",
spinning: this.loading
}, this.getMenu());
if (this.multiple) {
return [/*#__PURE__*/React.createElement("div", {
key: "check-all",
className: "".concat(this.prefixCls, "-select-all-none")
}, /*#__PURE__*/React.createElement("span", {
onClick: this.chooseAll
}, $l('Cascader', 'select_all')), /*#__PURE__*/React.createElement("span", {
onClick: this.unChooseAll
}, $l('Cascader', 'unselect_all'))), menu];
}
return menu;
}
/**
* 增加 popupContent 回调参数 用于控制对应交互
*/
}, {
key: "getPopupProps",
value: function getPopupProps() {
var options = this.options,
textField = this.textField,
field = this.field,
record = this.record,
valueField = this.valueField;
return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(Cascader.prototype), "getPopupProps", this).call(this)), {}, {
dataSet: options,
textField: textField,
valueField: valueField,
field: field,
record: record,
content: this.getPopupContent()
});
}
}, {
key: "getPopupStyleFromAlign",
value: function getPopupStyleFromAlign(target) {
if (target) {
if (this.props.dropdownMatchSelectWidth) {
var _target$getBoundingCl = target.getBoundingClientRect(),
width = _target$getBoundingCl.width;
this.setItemMenuWidth(width);
return {
minWidth: pxToRem(width, true)
};
}
return undefined;
}
}
}, {
key: "getTriggerIconFont",
value: function getTriggerIconFont() {
return this.searchable && this.isFocused ? 'search' : 'baseline-arrow_drop_down';
}
}, {
key: "handleKeyDown",
value: function handleKeyDown(e) {
if (!this.disabled && !this.readOnly) {
switch (e.keyCode) {
case KeyCode.RIGHT:
this.handleKeyLeftRightNext(e, 1);
break;
case KeyCode.DOWN:
this.handleKeyDownPrevNext(e, 1);
break;
case KeyCode.LEFT:
this.handleKeyLeftRightNext(e, -1);
break;
case KeyCode.UP:
this.handleKeyDownPrevNext(e, -1);
break;
case KeyCode.END:
case KeyCode.PAGE_DOWN:
this.handleKeyDownFirstLast(e, 1);
break;
case KeyCode.HOME:
case KeyCode.PAGE_UP:
this.handleKeyDownFirstLast(e, -1);
break;
case KeyCode.ENTER:
this.handleKeyDownEnter(e);
break;
case KeyCode.ESC:
this.handleKeyDownEsc(e);
break;
case KeyCode.SPACE:
this.handleKeyDownSpace(e);
break;
default:
}
}
_get(_getPrototypeOf(Cascader.prototype), "handleKeyDown", this).call(this, e);
} // 获取当前列第一个值和最后的值
}, {
key: "findTreeDataFirstLast",
value: function findTreeDataFirstLast(options, activeValue, direction) {
var nowIndexList = activeValue.parent ? activeValue.parent.children : options;
if (nowIndexList.length > 0 && direction > 0) {
return nowIndexList[nowIndexList.length - 1];
}
if (nowIndexList.length > 0 && direction < 0) {
return nowIndexList[0];
}
return activeValue;
} // 按键第一个和最后一个的位置
}, {
key: "handleKeyDownFirstLast",
value: function handleKeyDownFirstLast(e, direction) {
stopEvent(e);
if (isEmpty(toJS(this.activeValue))) {
this.setActiveValue(this.options.treeData[0]);
} else {
var activeItem = this.findTreeDataFirstLast(this.options.treeData, this.activeValue, direction);
if (!this.editable || this.popup) {
this.setActiveValue(activeItem);
}
}
} // 查找同级位置
}, {
key: "findTreeDataUpDown",
value: function findTreeDataUpDown(options, value, direction, fn) {
var nowIndexList = value.parent ? value.parent.children : options;
if (isArrayLike(nowIndexList)) {
var nowIndex = fn !== undefined ? fn : nowIndexList.findIndex(function (ele) {
return ele.value === value;
});
var length = nowIndexList.length;
if (nowIndex + direction >= length) {
return nowIndexList[0];
}
if (nowIndex + direction < 0) {
return nowIndexList[length - 1];
}
return nowIndexList[nowIndex + direction];
}
return value;
}
}, {
key: "sameKeyRecordIndex",
value: function sameKeyRecordIndex(options, activeValue, valueKey) {
var nowIndexList = activeValue.parent ? activeValue.parent.children : options;
return nowIndexList.findIndex(function (ele) {
return ele[valueKey] === activeValue[valueKey];
});
} // 上下按键判断
}, {
key: "handleKeyDownPrevNext",
value: function handleKeyDownPrevNext(e, direction) {
if (!this.editable) {
if (isEmpty(toJS(this.activeValue))) {
this.setActiveValue(this.options.treeData[0]);
} else {
this.setActiveValue(this.findTreeDataUpDown(this.options.treeData, this.activeValue, direction, this.sameKeyRecordIndex(this.options.treeData, this.activeValue, 'key')));
}
e.preventDefault();
} else if (e === KeyCode.DOWN) {
this.expand();
e.preventDefault();
}
} // 查找相邻的节点
}, {
key: "findTreeParentChidren",
value: function findTreeParentChidren(_options, activeValue, direction) {
if (direction > 0) {
if (activeValue.children && activeValue.children.length > 0) {
return activeValue.children[0];
}
return activeValue;
}
if (activeValue.parent) {
return activeValue.parent;
}
return activeValue;
}
}, {
key: "handleKeyLeftRightNext",
value: function handleKeyLeftRightNext(e, direction) {
if (!this.editable) {
if (isEmpty(toJS(this.activeValue))) {
this.setActiveValue(this.options.treeData[0]);
} else {
this.setActiveValue(this.findTreeParentChidren(this.options.treeData, this.activeValue, direction));
}
e.preventDefault();
} else if (e === KeyCode.DOWN) {
this.expand();
e.preventDefault();
}
}
}, {
key: "handleKeyDownEnter",
value: function handleKeyDownEnter(e) {
if (this.popup && !this.editable) {
var value = this.activeValue;
if (this.isSelected(value) && this.multiple) {
this.unChoose(value);
} else if (value.children) {
this.setPopup(true);
} else if (value && !value.get(disabledField)) {
this.choose(value);
}
}
e.preventDefault();
}
}, {
key: "handleKeyDownEsc",
value: function handleKeyDownEsc(e) {
if (this.popup) {
e.preventDefault();
this.collapse();
}
}
}, {
key: "handleKeyDownSpace",
value: function handleKeyDownSpace(e) {
if (!this.editable) {
e.preventDefault();
if (!this.popup) {
this.expand();
}
}
}
}, {
key: "handleBlur",
value: function handleBlur(e) {
if (!e.isDefaultPrevented()) {
_get(_getPrototypeOf(Cascader.prototype), "handleBlur", this).call(this, e);
this.resetFilter();
}
}
}, {
key: "expand",
value: function expand() {
var options = this.options;
if (options && options.length) {
_get(_getPrototypeOf(Cascader.prototype), "expand", this).call(this);
}
}
}, {
key: "syncValueOnBlur",
value: function syncValueOnBlur(value) {
if (!value && !this.multiple) {
this.setValue(this.emptyValue);
}
}
}, {
key: "findByText",
value: function findByText(text) {
var _this7 = this;
var textField = this.textField,
changeOnSelect = this.props.changeOnSelect;
var findTreeItem = function findTreeItem(options, valueItem, index) {
var sameItemTreeNode;
if (valueItem.length > 0) {
sameItemTreeNode = options.find(function (ele) {
return isSameLike(_this7.getRecordOrObjValue(ele, textField), isPlainObject(valueItem[index]) ? ObjectChainValue.get(valueItem[index], textField) : valueItem[index]);
});
if (sameItemTreeNode) {
if (sameItemTreeNode.children && !(changeOnSelect && index === valueItem.length - 1)) {
return findTreeItem(sameItemTreeNode.children, valueItem, ++index);
}
return sameItemTreeNode;
}
}
};
var textArray = text.split('/');
if (textArray && textArray.length > 0) {
if (this.options) {
return findTreeItem(this.options.treeData, textArray, 0);
}
}
}
}, {
key: "findByValue",
value: function findByValue(value) {
var _this8 = this;
var valueField = this.valueField,
changeOnSelect = this.props.changeOnSelect;
var findTreeItem = function findTreeItem(options, valueItem, index) {
var sameItemTreeNode;
if (valueItem.length > 0) {
sameItemTreeNode = options.find(function (ele) {
return isSameLike(_this8.getRecordOrObjValue(ele, valueField), isPlainObject(valueItem[index]) ? ObjectChainValue.get(valueItem[index], valueField) : valueItem[index]);
});
if (sameItemTreeNode) {
if (sameItemTreeNode.children && !(changeOnSelect && index === valueItem.length - 1)) {
return findTreeItem(sameItemTreeNode.children, valueItem, ++index);
}
return sameItemTreeNode;
}
}
};
value = getSimpleValue(value, valueField);
if (this.options && value) {
return findTreeItem(toJS(this.options.treeData), toJS(value), 0);
}
}
}, {
key: "isSelected",
value: function isSelected(record) {
var _this9 = this;
var valueField = this.valueField; // 多值处理
if (this.multiple) {
return this.getValues().some(function (value) {
var simpleValue = getSimpleValue(value, valueField);
return arraySameLike(_this9.treeValueToArray(record), toJS(simpleValue));
});
}
var simpleValue = this.getValues();
return arraySameLike(this.treeValueToArray(record), simpleValue);
}
}, {
key: "generateComboOption",
value: function generateComboOption(value, callback) {
var _this10 = this;
var textField = this.textField;
if (value) {
if (isArrayLike(value)) {
value.forEach(function (v) {
return !isNil(v) && _this10.generateComboOption(v);
});
} else {
var found = this.findByText(value) || this.findByValue(value);
if (found) {
var text = found.get(textField);
if (text !== value && callback) {
callback(text);
}
}
}
}
}
}, {
key: "handlePopupAnimateAppear",
value: function handlePopupAnimateAppear() {// noop
}
}, {
key: "getValueKey",
value: function getValueKey(v) {
if (isArrayLike(v)) {
return v.map(this.getValueKey, this).join(',');
}
var autoType = this.getProp('type') === FieldType.auto;
var value = getSimpleValue(v, this.valueField);
return autoType && !isNil(value) ? value.toString() : value;
}
}, {
key: "handlePopupAnimateEnd",
value: function handlePopupAnimateEnd(_key, _exists) {// noop
} // 触发下拉框事件,增加了触发方式判断优化trigger类型
}, {
key: "handleMenuSelect",
value: function handleMenuSelect(targetOption, _menuIndex, isClickTab, trigger) {
var _this$props2 = this.props,
onChoose = _this$props2.onChoose,
onUnChoose = _this$props2.onUnChoose,
changeOnSelect = _this$props2.changeOnSelect,
async = _this$props2.async,
loadData = _this$props2.loadData;
if (!targetOption || targetOption.disabled) {
return;
}
if (targetOption.key === MORE_KEY) {
var options = this.options;
options.queryMore(options.currentPage + 1);
return;
} // 单选模式
if (!this.isSelected(targetOption.value) || isClickTab || !this.multiple) {
if (targetOption.children) {
this.setPopup(true);
this.setActiveValue(targetOption.value);
this.setIsClickTab(isClickTab);
if (changeOnSelect && ExpandTrigger.click === trigger) {
this.choose(targetOption.value, true);
}
if (onChoose) {
onChoose(this.processRecordToObject(targetOption.value), targetOption.value);
}
} else {
if (!targetOption.isLeaf && (async || !!loadData)) {
var loadDataCallBack = async ? this.handleLoadData : loadData;
if (changeOnSelect) {
this.choose(targetOption.value, true);
}
this.setPopup(true);
this.setActiveValue(targetOption.value);
this.setIsClickTab(isClickTab);
loadDataCallBack(targetOption);
return;
}
if (!isClickTab) {
this.setActiveValue(targetOption.value);
this.choose(targetOption.value);
if (onChoose) {
onChoose(this.processRecordToObject(targetOption.value), targetOption.value);
}
} else {
this.setPopup(true);
}
this.setIsClickTab(isClickTab);
} // 多选模式
} else {
if (ExpandTrigger.hover === trigger) {
this.setActiveValue(targetOption.value);
return;
}
this.setactiveEmpty();
this.unChoose(targetOption.value);
if (onUnChoose) {
onUnChoose(this.processRecordToObject(targetOption.value), targetOption.value);
}
}
}
}, {
key: "setactiveEmpty",
value: function setactiveEmpty() {
if (this.multiple) {
this.setActiveValue([]);
} else {
this.setActiveValue({});
}
}
}, {
key: "handleOptionSelect",
value: function handleOptionSelect(record) {
this.prepareSetValue(this.processRecordToObject(record));
}
}, {
key: "handleOptionUnSelect",
value: function handleOptionUnSelect(record) {
var newValue = this.treeValueToArray(record);
this.removeValue(newValue, -1);
} // 移除所选值
}, {
key: "removeValues",
value: function removeValues(values) {
var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
if (!this.multiple) {
var oldValues = this.getValues();
if (this.getValueKey(oldValues) === this.getValueKey(values[0])) {
if (index === -1) {
this.afterRemoveValue(values[0], 1);
this.setValue([]);
}
}
}
_get(_getPrototypeOf(Cascader.prototype), "removeValues", this).call(this, values, index);
this.setactiveEmpty();
}
}, {
key: "handleSearch",
value: function handleSearch(_text) {// noop
}
}, {
key: "setText",
value: function setText(text) {
_get(_getPrototypeOf(Cascader.prototype), "setText", this).call(this, text);
if (this.searchable) {
this.doSearch(text);
}
}
}, {
key: "searchRemote",
value: function searchRemote(value) {
var field = this.field,
searchMatcher = this.searchMatcher;
if (field && isString(searchMatcher)) {
field.setLovPara(searchMatcher, value === '' ? undefined : value);
}
}
}, {
key: "searchData",
value: function searchData(data, text) {
var _this11 = this;
var searchable = this.searchable,
searchMatcher = this.searchMatcher;
return searchable && text && typeof searchMatcher === 'function' ? data.filter(function (r) {
return _this11.matchRecordBySearch(r, text);
}) : data;
}
}, {
key: "matchRecordBySearch",
value: function matchRecordBySearch(record, text) {
var textField = this.textField,
valueField = this.valueField,
searchable = this.searchable,
searchMatcher = this.searchMatcher;
return !(searchable && text && typeof searchMatcher === 'function') || searchMatcher({
record: record,
text: text,
textField: textField,
valueField: valueField
});
}
}, {
key: "handleChange",
value: function handleChange(e) {
var _this12 = this;
var value = e.target.value;
this.setText(value);
if (this.observableProps.combo) {
this.generateComboOption(value, function (text) {
return _this12.setText(text);
});
}
if (!this.popup) {
this.expand();
}
}
}, {
key: "processRecordToObject",
value: function processRecordToObject(record) {
var primitive = this.primitive;
if (record && record.dataSet.getFromTree(0)) {
return primitive ? this.treeValueToArray(record) : this.treeToArray(record);
}
}
/**
* 返回tree 的值的列表方法
* @param record
* @param allArray
*/
}, {
key: "treeValueToArray",
value: function treeValueToArray(record, allArray) {
var valueField = this.valueField;
if (!allArray) {
allArray = [];
}
if (record) {
allArray = [this.getRecordOrObjValue(record, valueField)].concat(_toConsumableArray(allArray));
}
if (record.parent) {
return this.treeValueToArray(record.parent, allArray);
}
return allArray;
}
/**
* 返回tree 的值的列表方法
* @param record
* @param allArray
*/
}, {
key: "treeTextToArray",
value: function treeTextToArray(record, allArray) {
var textField = this.textField;
if (!allArray) {
allArray = [];
}
if (record) {
allArray = [this.getRecordOrObjValue(record, textField)].concat(_toConsumableArray(allArray));
}
if (record.parent) {
return this.treeTextToArray(record.parent, allArray);
}
return allArray;
}
/**
* 返回tree 的值的列表方法
* @param record
* @param allArray
*/
}, {
key: "treeToArray",
value: function treeToArray(record, allArray) {
if (!allArray) {
allArray = [];
}
if (record) {
allArray = [record.toData()].concat(_toConsumableArray(allArray));
}
if (record.parent) {
return this.treeToArray(record.parent, allArray);
}
return allArray;
}
}, {
key: "removeObjParentChild",
value: function removeObjParentChild(obj) {
if (isPlainObject(obj)) {
var cloneObj = cloneDeep(toJS(obj));
delete cloneObj.parent;
delete cloneObj.children;
return cloneObj;
}
return obj;
}
}, {
key: "processObjectValue",
value: function processObjectValue(value, textField) {
if (!isNil(value)) {
var found = this.findByValue(value);
if (found && isArrayLike(value)) {
return this.treeTextToArray(found);
}
if (isPlainObject(value)) {
return ObjectChainValue.get(value, textField);
}
}
}
}, {
key: "processLookupValue",
value: function processLookupValue(value) {
var field = this.field,
textField = this.textField,
primitive = this.primitive;
var processvalue = this.processObjectValue(value, textField);
if (isArrayLike(processvalue)) {
return processvalue.join('/');
}
if (primitive && field) {
return _get(_getPrototypeOf(Cascader.prototype), "processValue", this).call(this, field.getText(value, undefined, this.record));
}
} // 处理value
}, {
key: "processValue",
value: function processValue(value) {
var text = this.processLookupValue(value);
if (isEmptyUtil(text)) {
if (isPlainObject(value)) {
return ObjectChainValue.get(value, this.valueField) || '';
}
return _get(_getPrototypeOf(Cascader.prototype), "processValue", this).call(this, value);
}
return text;
}
}, {
key: "toValueString",
value: function toValueString(value) {
if (isArrayLike(value)) {
return value.join('/');
}
return value;
}
}, {
key: "clear",
value: function clear() {
this.setText(undefined);
this.setActiveValue({});
_get(_getPrototypeOf(Cascader.prototype), "clear", this).call(this);
}
}, {
key: "addValue",
value: function addValue() {
for (var _len = arguments.length, values = new Array(_len), _key2 = 0; _key2 < _len; _key2++) {
values[_key2] = arguments[_key2];
}
if (this.multiple) {
var oldValues = this.getValues();
if (values.length) {
var oldValuesJS = oldValues.map(function (item) {
return toJS(item);
});
this.setValue([].concat(_toConsumableArray(oldValuesJS), values));
} else if (!oldValues.length) {
this.setValue(this.emptyValue);
}
} else {
this.setValue(values.pop());
}
}
}, {
key: "resetFilter",
value: function resetFilter() {
this.setText(undefined);
this.forcePopupAlign();
}
}, {
key: "reset",
value: function reset() {
_get(_getPrototypeOf(Cascader.prototype), "reset", this).call(this);
this.resetFilter();
}
}, {
key: "unChoose",
value: function unChoose(record) {
if (record) {
this.handleOptionUnSelect(record);
}
}
/**
*
* @param record
* @param visible
*/
}, {
key: "choose",
value: function choose(record, visible) {
if (!this.multiple && !visible) {
this.collapse();
}
if (record) {
this.handleOptionSelect(record);
}
}
}, {
key: "chooseAll",
value: function chooseAll() {
var _this13 = this;
var chooseAll = [];
this.options.forEach(function (item) {
if (isEmpty(item.children) && !item.get(disabledField)) {
chooseAll.push(_this13.processRecordToObject(item));
}
}, this);
this.setValue(chooseAll);
}
}, {
key: "unChooseAll",
value: function unChooseAll() {
this.clear();
}
}, {
key: "handlePopupHiddenChange",
value: function () {
var _handlePopupHiddenChange = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(hidden) {
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
this.setIsClickTab(false);
if (!hidden) {
this.forcePopupAlign();
}
_get(_getPrototypeOf(Cascader.prototype), "handlePopupHiddenChange", this).call(this, hidden);
case 3:
case "end":
return _context.stop();
}
}
}, _callee, this);
}));
function handlePopupHiddenChange(_x) {
return _handlePopupHiddenChange.apply(this, arguments);
}
return handlePopupHiddenChange;
}()
}, {
key: "processSelectedData",
value: function () {
var _processSelectedData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
var _this14 = this;
var values, field, combo;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
values = this.getValues();
field = this.field;
if (!field) {
_context2.next = 5;
break;
}
_context2.next = 5;
return field.ready();
case 5:
combo = this.observableProps.combo;
runInAction(function () {
var newValues = values.filter(function (value) {
var record = _this14.findByValue(value);
return !!record;
});
if (_this14.text && combo) {
_this14.generateComboOption(_this14.text);
}
if (field && field.get('cascadeMap') && !isEqual(newValues, values)) {
_this14.setValue(_this14.multiple ? newValues : newValues[0]);
}
});