ant-design-vue
Version:
An enterprise-class UI design language and Vue-based implementation
720 lines (597 loc) • 25.1 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
exports.treeSelectProps = treeSelectProps;
var _vue = require("vue");
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _OptionList = _interopRequireDefault(require("./OptionList"));
var _strategyUtil = require("./utils/strategyUtil");
var _TreeSelectContext = require("./TreeSelectContext");
var _LegacyContext = require("./LegacyContext");
var _useTreeData = _interopRequireDefault(require("./hooks/useTreeData"));
var _valueUtil = require("./utils/valueUtil");
var _useCache3 = _interopRequireDefault(require("./hooks/useCache"));
var _useDataEntities2 = _interopRequireDefault(require("./hooks/useDataEntities"));
var _legacyUtil = require("./utils/legacyUtil");
var _useCheckedKeys3 = _interopRequireDefault(require("./hooks/useCheckedKeys"));
var _useFilterTreeData = _interopRequireDefault(require("./hooks/useFilterTreeData"));
var _warningPropsUtil = _interopRequireDefault(require("./utils/warningPropsUtil"));
var _BaseSelect = require("../vc-select/BaseSelect");
var _omit = _interopRequireDefault(require("../_util/omit"));
var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
var _vcSelect = require("../vc-select");
var _propsUtil = require("../_util/props-util");
var _useId = _interopRequireDefault(require("../vc-select/hooks/useId"));
var _useMergedState5 = _interopRequireDefault(require("../_util/hooks/useMergedState"));
var _conductUtil = require("../vc-tree/utils/conductUtil");
var _warning = require("../vc-util/warning");
var _toReactive = require("../_util/toReactive");
var _useMaxLevel2 = _interopRequireDefault(require("../vc-tree/useMaxLevel"));
function treeSelectProps() {
return (0, _extends2.default)((0, _extends2.default)({}, (0, _omit.default)((0, _BaseSelect.baseSelectPropsWithoutPrivate)(), ['mode'])), {
prefixCls: String,
id: String,
value: {
type: [String, Number, Object, Array]
},
defaultValue: {
type: [String, Number, Object, Array]
},
onChange: {
type: Function
},
searchValue: String,
/** @deprecated Use `searchValue` instead */
inputValue: String,
onSearch: {
type: Function
},
autoClearSearchValue: {
type: Boolean,
default: undefined
},
filterTreeNode: {
type: [Boolean, Function],
default: undefined
},
treeNodeFilterProp: String,
// >>> Select
onSelect: Function,
onDeselect: Function,
showCheckedStrategy: {
type: String
},
treeNodeLabelProp: String,
fieldNames: {
type: Object
},
// >>> Mode
multiple: {
type: Boolean,
default: undefined
},
treeCheckable: {
type: Boolean,
default: undefined
},
treeCheckStrictly: {
type: Boolean,
default: undefined
},
labelInValue: {
type: Boolean,
default: undefined
},
// >>> Data
treeData: {
type: Array
},
treeDataSimpleMode: {
type: [Boolean, Object],
default: undefined
},
loadData: {
type: Function
},
treeLoadedKeys: {
type: Array
},
onTreeLoad: {
type: Function
},
// >>> Expanded
treeDefaultExpandAll: {
type: Boolean,
default: undefined
},
treeExpandedKeys: {
type: Array
},
treeDefaultExpandedKeys: {
type: Array
},
onTreeExpand: {
type: Function
},
// >>> Options
virtual: {
type: Boolean,
default: undefined
},
listHeight: Number,
listItemHeight: Number,
onDropdownVisibleChange: {
type: Function
},
// >>> Tree
treeLine: {
type: [Boolean, Object],
default: undefined
},
treeIcon: _vueTypes.default.any,
showTreeIcon: {
type: Boolean,
default: undefined
},
switcherIcon: _vueTypes.default.any,
treeMotion: _vueTypes.default.any,
children: Array,
showArrow: {
type: Boolean,
default: undefined
},
showSearch: {
type: Boolean,
default: undefined
},
open: {
type: Boolean,
default: undefined
},
defaultOpen: {
type: Boolean,
default: undefined
},
disabled: {
type: Boolean,
default: undefined
},
placeholder: _vueTypes.default.any,
maxTagPlaceholder: {
type: Function
},
dropdownPopupAlign: _vueTypes.default.any,
customSlots: Object
});
}
function isRawValue(value) {
return !value || (0, _typeof2.default)(value) !== 'object';
}
var _default = (0, _vue.defineComponent)({
name: 'TreeSelect',
inheritAttrs: false,
props: (0, _propsUtil.initDefaultProps)(treeSelectProps(), {
treeNodeFilterProp: 'value',
autoClearSearchValue: true,
showCheckedStrategy: _strategyUtil.SHOW_CHILD,
listHeight: 200,
listItemHeight: 20,
prefixCls: 'vc-tree-select'
}),
setup: function setup(props, _ref) {
var attrs = _ref.attrs,
expose = _ref.expose,
slots = _ref.slots;
var mergedId = (0, _useId.default)((0, _vue.toRef)(props, 'id'));
var treeConduction = (0, _vue.computed)(function () {
return props.treeCheckable && !props.treeCheckStrictly;
});
var mergedCheckable = (0, _vue.computed)(function () {
return props.treeCheckable || props.treeCheckStrictly;
});
var mergedLabelInValue = (0, _vue.computed)(function () {
return props.treeCheckStrictly || props.labelInValue;
});
var mergedMultiple = (0, _vue.computed)(function () {
return mergedCheckable.value || props.multiple;
}); // ========================== Warning ===========================
if (process.env.NODE_ENV !== 'production') {
(0, _vue.watchEffect)(function () {
(0, _warningPropsUtil.default)(props);
});
} // ========================= FieldNames =========================
var mergedFieldNames = (0, _vue.computed)(function () {
return (0, _valueUtil.fillFieldNames)(props.fieldNames);
}); // =========================== Search ===========================
var _useMergedState = (0, _useMergedState5.default)('', {
value: (0, _vue.computed)(function () {
return props.searchValue !== undefined ? props.searchValue : props.inputValue;
}),
postState: function postState(search) {
return search || '';
}
}),
_useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
mergedSearchValue = _useMergedState2[0],
setSearchValue = _useMergedState2[1];
var onInternalSearch = function onInternalSearch(searchText) {
var _a;
setSearchValue(searchText);
(_a = props.onSearch) === null || _a === void 0 ? void 0 : _a.call(props, searchText);
}; // ============================ Data ============================
// `useTreeData` only do convert of `children` or `simpleMode`.
// Else will return origin `treeData` for perf consideration.
// Do not do anything to loop the data.
var mergedTreeData = (0, _useTreeData.default)((0, _vue.toRef)(props, 'treeData'), (0, _vue.toRef)(props, 'children'), (0, _vue.toRef)(props, 'treeDataSimpleMode'));
var _useDataEntities = (0, _useDataEntities2.default)(mergedTreeData, mergedFieldNames),
keyEntities = _useDataEntities.keyEntities,
valueEntities = _useDataEntities.valueEntities;
/** Get `missingRawValues` which not exist in the tree yet */
var splitRawValues = function splitRawValues(newRawValues) {
var missingRawValues = [];
var existRawValues = []; // Keep missing value in the cache
newRawValues.forEach(function (val) {
if (valueEntities.value.has(val)) {
existRawValues.push(val);
} else {
missingRawValues.push(val);
}
});
return {
missingRawValues: missingRawValues,
existRawValues: existRawValues
};
}; // Filtered Tree
var filteredTreeData = (0, _useFilterTreeData.default)(mergedTreeData, mergedSearchValue, {
fieldNames: mergedFieldNames,
treeNodeFilterProp: (0, _vue.toRef)(props, 'treeNodeFilterProp'),
filterTreeNode: (0, _vue.toRef)(props, 'filterTreeNode')
}); // =========================== Label ============================
var getLabel = function getLabel(item) {
if (item) {
if (props.treeNodeLabelProp) {
return item[props.treeNodeLabelProp];
} // Loop from fieldNames
var titleList = mergedFieldNames.value._title;
for (var i = 0; i < titleList.length; i += 1) {
var title = item[titleList[i]];
if (title !== undefined) {
return title;
}
}
}
}; // ========================= Wrap Value =========================
var toLabeledValues = function toLabeledValues(draftValues) {
var values = (0, _valueUtil.toArray)(draftValues);
return values.map(function (val) {
if (isRawValue(val)) {
return {
value: val
};
}
return val;
});
};
var convert2LabelValues = function convert2LabelValues(draftValues) {
var values = toLabeledValues(draftValues);
return values.map(function (item) {
var rawLabel = item.label;
var rawValue = item.value,
rawHalfChecked = item.halfChecked;
var rawDisabled;
var entity = valueEntities.value.get(rawValue); // Fill missing label & status
if (entity) {
rawLabel = rawLabel !== null && rawLabel !== void 0 ? rawLabel : getLabel(entity.node);
rawDisabled = entity.node.disabled;
}
return {
label: rawLabel,
value: rawValue,
halfChecked: rawHalfChecked,
disabled: rawDisabled
};
});
}; // =========================== Values ===========================
var _useMergedState3 = (0, _useMergedState5.default)(props.defaultValue, {
value: (0, _vue.toRef)(props, 'value')
}),
_useMergedState4 = (0, _slicedToArray2.default)(_useMergedState3, 2),
internalValue = _useMergedState4[0],
setInternalValue = _useMergedState4[1];
var rawMixedLabeledValues = (0, _vue.computed)(function () {
return toLabeledValues(internalValue.value);
}); // Split value into full check and half check
var rawLabeledValues = (0, _vue.shallowRef)([]);
var rawHalfLabeledValues = (0, _vue.shallowRef)([]);
(0, _vue.watchEffect)(function () {
var fullCheckValues = [];
var halfCheckValues = [];
rawMixedLabeledValues.value.forEach(function (item) {
if (item.halfChecked) {
halfCheckValues.push(item);
} else {
fullCheckValues.push(item);
}
});
rawLabeledValues.value = fullCheckValues;
rawHalfLabeledValues.value = halfCheckValues;
}); // const [mergedValues] = useCache(rawLabeledValues);
var rawValues = (0, _vue.computed)(function () {
return rawLabeledValues.value.map(function (item) {
return item.value;
});
});
var _useMaxLevel = (0, _useMaxLevel2.default)(keyEntities),
maxLevel = _useMaxLevel.maxLevel,
levelEntities = _useMaxLevel.levelEntities; // Convert value to key. Will fill missed keys for conduct check.
var _useCheckedKeys = (0, _useCheckedKeys3.default)(rawLabeledValues, rawHalfLabeledValues, treeConduction, keyEntities, maxLevel, levelEntities),
_useCheckedKeys2 = (0, _slicedToArray2.default)(_useCheckedKeys, 2),
rawCheckedValues = _useCheckedKeys2[0],
rawHalfCheckedValues = _useCheckedKeys2[1]; // Convert rawCheckedKeys to check strategy related values
var displayValues = (0, _vue.computed)(function () {
// Collect keys which need to show
var displayKeys = (0, _strategyUtil.formatStrategyValues)(rawCheckedValues.value, props.showCheckedStrategy, keyEntities.value, mergedFieldNames.value); // Convert to value and filled with label
var values = displayKeys.map(function (key) {
var _a, _b, _c;
return (_c = (_b = (_a = keyEntities.value[key]) === null || _a === void 0 ? void 0 : _a.node) === null || _b === void 0 ? void 0 : _b[mergedFieldNames.value.value]) !== null && _c !== void 0 ? _c : key;
}); // Back fill with origin label
var labeledValues = values.map(function (val) {
var targetItem = rawLabeledValues.value.find(function (item) {
return item.value === val;
});
return {
value: val,
label: targetItem === null || targetItem === void 0 ? void 0 : targetItem.label
};
});
var rawDisplayValues = convert2LabelValues(labeledValues);
var firstVal = rawDisplayValues[0];
if (!mergedMultiple.value && firstVal && (0, _valueUtil.isNil)(firstVal.value) && (0, _valueUtil.isNil)(firstVal.label)) {
return [];
}
return rawDisplayValues.map(function (item) {
var _a;
return (0, _extends2.default)((0, _extends2.default)({}, item), {
label: (_a = item.label) !== null && _a !== void 0 ? _a : item.value
});
});
});
var _useCache = (0, _useCache3.default)(displayValues),
_useCache2 = (0, _slicedToArray2.default)(_useCache, 1),
cachedDisplayValues = _useCache2[0]; // =========================== Change ===========================
var triggerChange = function triggerChange(newRawValues, extra, source) {
var labeledValues = convert2LabelValues(newRawValues);
setInternalValue(labeledValues); // Clean up if needed
if (props.autoClearSearchValue) {
setSearchValue('');
} // Generate rest parameters is costly, so only do it when necessary
if (props.onChange) {
var eventValues = newRawValues;
if (treeConduction.value) {
var formattedKeyList = (0, _strategyUtil.formatStrategyValues)(newRawValues, props.showCheckedStrategy, keyEntities.value, mergedFieldNames.value);
eventValues = formattedKeyList.map(function (key) {
var entity = valueEntities.value.get(key);
return entity ? entity.node[mergedFieldNames.value.value] : key;
});
}
var _ref2 = extra || {
triggerValue: undefined,
selected: undefined
},
triggerValue = _ref2.triggerValue,
selected = _ref2.selected;
var returnRawValues = eventValues; // We need fill half check back
if (props.treeCheckStrictly) {
var halfValues = rawHalfLabeledValues.value.filter(function (item) {
return !eventValues.includes(item.value);
});
returnRawValues = [].concat((0, _toConsumableArray2.default)(returnRawValues), (0, _toConsumableArray2.default)(halfValues));
}
var returnLabeledValues = convert2LabelValues(returnRawValues);
var additionalInfo = {
// [Legacy] Always return as array contains label & value
preValue: rawLabeledValues.value,
triggerValue: triggerValue
}; // [Legacy] Fill legacy data if user query.
// This is expansive that we only fill when user query
// https://github.com/react-component/tree-select/blob/fe33eb7c27830c9ac70cd1fdb1ebbe7bc679c16a/src/Select.jsx
var showPosition = true;
if (props.treeCheckStrictly || source === 'selection' && !selected) {
showPosition = false;
}
(0, _legacyUtil.fillAdditionalInfo)(additionalInfo, triggerValue, newRawValues, mergedTreeData.value, showPosition, mergedFieldNames.value);
if (mergedCheckable.value) {
additionalInfo.checked = selected;
} else {
additionalInfo.selected = selected;
}
var returnValues = mergedLabelInValue.value ? returnLabeledValues : returnLabeledValues.map(function (item) {
return item.value;
});
props.onChange(mergedMultiple.value ? returnValues : returnValues[0], mergedLabelInValue.value ? null : returnLabeledValues.map(function (item) {
return item.label;
}), additionalInfo);
}
}; // ========================== Options ===========================
/** Trigger by option list */
var onOptionSelect = function onOptionSelect(selectedKey, _ref3) {
var selected = _ref3.selected,
source = _ref3.source;
var _a, _b, _c;
var keyEntitiesValue = (0, _vue.toRaw)(keyEntities.value);
var valueEntitiesValue = (0, _vue.toRaw)(valueEntities.value);
var entity = keyEntitiesValue[selectedKey];
var node = entity === null || entity === void 0 ? void 0 : entity.node;
var selectedValue = (_a = node === null || node === void 0 ? void 0 : node[mergedFieldNames.value.value]) !== null && _a !== void 0 ? _a : selectedKey; // Never be falsy but keep it safe
if (!mergedMultiple.value) {
// Single mode always set value
triggerChange([selectedValue], {
selected: true,
triggerValue: selectedValue
}, 'option');
} else {
var newRawValues = selected ? [].concat((0, _toConsumableArray2.default)(rawValues.value), [selectedValue]) : rawCheckedValues.value.filter(function (v) {
return v !== selectedValue;
}); // Add keys if tree conduction
if (treeConduction.value) {
// Should keep missing values
var _splitRawValues = splitRawValues(newRawValues),
missingRawValues = _splitRawValues.missingRawValues,
existRawValues = _splitRawValues.existRawValues;
var keyList = existRawValues.map(function (val) {
return valueEntitiesValue.get(val).key;
}); // Conduction by selected or not
var checkedKeys;
if (selected) {
var _conductCheck = (0, _conductUtil.conductCheck)(keyList, true, keyEntitiesValue, maxLevel.value, levelEntities.value);
checkedKeys = _conductCheck.checkedKeys;
} else {
var _conductCheck2 = (0, _conductUtil.conductCheck)(keyList, {
checked: false,
halfCheckedKeys: rawHalfCheckedValues.value
}, keyEntitiesValue, maxLevel.value, levelEntities.value);
checkedKeys = _conductCheck2.checkedKeys;
} // Fill back of keys
newRawValues = [].concat((0, _toConsumableArray2.default)(missingRawValues), (0, _toConsumableArray2.default)(checkedKeys.map(function (key) {
return keyEntitiesValue[key].node[mergedFieldNames.value.value];
})));
}
triggerChange(newRawValues, {
selected: selected,
triggerValue: selectedValue
}, source || 'option');
} // Trigger select event
if (selected || !mergedMultiple.value) {
(_b = props.onSelect) === null || _b === void 0 ? void 0 : _b.call(props, selectedValue, (0, _legacyUtil.fillLegacyProps)(node));
} else {
(_c = props.onDeselect) === null || _c === void 0 ? void 0 : _c.call(props, selectedValue, (0, _legacyUtil.fillLegacyProps)(node));
}
}; // ========================== Dropdown ==========================
var onInternalDropdownVisibleChange = function onInternalDropdownVisibleChange(open) {
if (props.onDropdownVisibleChange) {
var legacyParam = {};
Object.defineProperty(legacyParam, 'documentClickClose', {
get: function get() {
(0, _warning.warning)(false, 'Second param of `onDropdownVisibleChange` has been removed.');
return false;
}
});
props.onDropdownVisibleChange(open, legacyParam);
}
}; // ====================== Display Change ========================
var onDisplayValuesChange = function onDisplayValuesChange(newValues, info) {
var newRawValues = newValues.map(function (item) {
return item.value;
});
if (info.type === 'clear') {
triggerChange(newRawValues, {}, 'selection');
return;
} // TreeSelect only have multiple mode which means display change only has remove
if (info.values.length) {
onOptionSelect(info.values[0].value, {
selected: false,
source: 'selection'
});
}
};
var _toRefs = (0, _vue.toRefs)(props),
treeNodeFilterProp = _toRefs.treeNodeFilterProp,
loadData = _toRefs.loadData,
treeLoadedKeys = _toRefs.treeLoadedKeys,
onTreeLoad = _toRefs.onTreeLoad,
treeDefaultExpandAll = _toRefs.treeDefaultExpandAll,
treeExpandedKeys = _toRefs.treeExpandedKeys,
treeDefaultExpandedKeys = _toRefs.treeDefaultExpandedKeys,
onTreeExpand = _toRefs.onTreeExpand,
virtual = _toRefs.virtual,
listHeight = _toRefs.listHeight,
listItemHeight = _toRefs.listItemHeight,
treeLine = _toRefs.treeLine,
treeIcon = _toRefs.treeIcon,
showTreeIcon = _toRefs.showTreeIcon,
switcherIcon = _toRefs.switcherIcon,
treeMotion = _toRefs.treeMotion,
customSlots = _toRefs.customSlots;
_vue.toRaw;
(0, _LegacyContext.useProvideLegacySelectContext)((0, _toReactive.toReactive)({
checkable: mergedCheckable,
loadData: loadData,
treeLoadedKeys: treeLoadedKeys,
onTreeLoad: onTreeLoad,
checkedKeys: rawCheckedValues,
halfCheckedKeys: rawHalfCheckedValues,
treeDefaultExpandAll: treeDefaultExpandAll,
treeExpandedKeys: treeExpandedKeys,
treeDefaultExpandedKeys: treeDefaultExpandedKeys,
onTreeExpand: onTreeExpand,
treeIcon: treeIcon,
treeMotion: treeMotion,
showTreeIcon: showTreeIcon,
switcherIcon: switcherIcon,
treeLine: treeLine,
treeNodeFilterProp: treeNodeFilterProp,
keyEntities: keyEntities,
customSlots: customSlots
}));
(0, _TreeSelectContext.useProvideSelectContext)((0, _toReactive.toReactive)({
virtual: virtual,
listHeight: listHeight,
listItemHeight: listItemHeight,
treeData: filteredTreeData,
fieldNames: mergedFieldNames,
onSelect: onOptionSelect
}));
var selectRef = (0, _vue.ref)();
expose({
focus: function focus() {
var _a;
(_a = selectRef.value) === null || _a === void 0 ? void 0 : _a.focus();
},
blur: function blur() {
var _a;
(_a = selectRef.value) === null || _a === void 0 ? void 0 : _a.blur();
},
scrollTo: function scrollTo(arg) {
var _a;
(_a = selectRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(arg);
}
});
return function () {
var _a;
var restProps = (0, _omit.default)(props, ['id', 'prefixCls', // Value
'value', 'defaultValue', 'onChange', 'onSelect', 'onDeselect', // Search
'searchValue', 'inputValue', 'onSearch', 'autoClearSearchValue', 'filterTreeNode', 'treeNodeFilterProp', // Selector
'showCheckedStrategy', 'treeNodeLabelProp', // Mode
'multiple', 'treeCheckable', 'treeCheckStrictly', 'labelInValue', // FieldNames
'fieldNames', // Data
'treeDataSimpleMode', 'treeData', 'children', 'loadData', 'treeLoadedKeys', 'onTreeLoad', // Expanded
'treeDefaultExpandAll', 'treeExpandedKeys', 'treeDefaultExpandedKeys', 'onTreeExpand', // Options
'virtual', 'listHeight', 'listItemHeight', 'onDropdownVisibleChange', // Tree
'treeLine', 'treeIcon', 'showTreeIcon', 'switcherIcon', 'treeMotion']);
return (0, _vue.createVNode)(_vcSelect.BaseSelect, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
"ref": selectRef
}, attrs), restProps), {}, {
"id": mergedId,
"prefixCls": props.prefixCls,
"mode": mergedMultiple.value ? 'multiple' : undefined,
"displayValues": cachedDisplayValues.value,
"onDisplayValuesChange": onDisplayValuesChange,
"searchValue": mergedSearchValue.value,
"onSearch": onInternalSearch,
"OptionList": _OptionList.default,
"emptyOptions": !mergedTreeData.value.length,
"onDropdownVisibleChange": onInternalDropdownVisibleChange,
"tagRender": props.tagRender || slots.tagRender,
"dropdownMatchSelectWidth": (_a = props.dropdownMatchSelectWidth) !== null && _a !== void 0 ? _a : true
}), slots);
};
}
});
exports.default = _default;