123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256 |
- import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
- import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
- import { computed, defineComponent, nextTick, ref, shallowRef, toRaw, watch } from 'vue';
- import useMemo from '../_util/hooks/useMemo';
- import KeyCode from '../_util/KeyCode';
- import Tree from '../vc-tree/Tree';
- import { getAllKeys, isCheckDisabled } from './utils/valueUtil';
- import { useBaseProps } from '../vc-select';
- import useInjectLegacySelectContext from './LegacyContext';
- import useInjectSelectContext from './TreeSelectContext';
- var HIDDEN_STYLE = {
- width: 0,
- height: 0,
- display: 'flex',
- overflow: 'hidden',
- opacity: 0,
- border: 0,
- padding: 0,
- margin: 0
- };
- export default defineComponent({
- compatConfig: {
- MODE: 3
- },
- name: 'OptionList',
- inheritAttrs: false,
- slots: ['notFoundContent', 'menuItemSelectedIcon'],
- setup: function setup(_, _ref) {
- var slots = _ref.slots,
- expose = _ref.expose;
- var baseProps = useBaseProps();
- var legacyContext = useInjectLegacySelectContext();
- var context = useInjectSelectContext();
- var treeRef = ref();
- var memoTreeData = useMemo(function () {
- return context.treeData;
- }, [function () {
- return baseProps.open;
- }, function () {
- return context.treeData;
- }], function (next) {
- return next[0];
- });
- var mergedCheckedKeys = computed(function () {
- var checkable = legacyContext.checkable,
- halfCheckedKeys = legacyContext.halfCheckedKeys,
- checkedKeys = legacyContext.checkedKeys;
- if (!checkable) {
- return null;
- }
- return {
- checked: checkedKeys,
- halfChecked: halfCheckedKeys
- };
- });
- watch(function () {
- return baseProps.open;
- }, function () {
- nextTick(function () {
- if (baseProps.open && !baseProps.multiple && legacyContext.checkedKeys.length) {
- var _treeRef$value;
- (_treeRef$value = treeRef.value) === null || _treeRef$value === void 0 ? void 0 : _treeRef$value.scrollTo({
- key: legacyContext.checkedKeys[0]
- });
- }
- });
- }, {
- immediate: true,
- flush: 'post'
- });
- // ========================== Search ==========================
- var lowerSearchValue = computed(function () {
- return String(baseProps.searchValue).toLowerCase();
- });
- var filterTreeNode = function filterTreeNode(treeNode) {
- if (!lowerSearchValue.value) {
- return false;
- }
- return String(treeNode[legacyContext.treeNodeFilterProp]).toLowerCase().includes(lowerSearchValue.value);
- };
- // =========================== Keys ===========================
- var expandedKeys = shallowRef(legacyContext.treeDefaultExpandedKeys);
- var searchExpandedKeys = shallowRef(null);
- watch(function () {
- return baseProps.searchValue;
- }, function () {
- if (baseProps.searchValue) {
- searchExpandedKeys.value = getAllKeys(toRaw(context.treeData), toRaw(context.fieldNames));
- }
- }, {
- immediate: true
- });
- var mergedExpandedKeys = computed(function () {
- if (legacyContext.treeExpandedKeys) {
- return legacyContext.treeExpandedKeys.slice();
- }
- return baseProps.searchValue ? searchExpandedKeys.value : expandedKeys.value;
- });
- var onInternalExpand = function onInternalExpand(keys) {
- var _legacyContext$onTree;
- expandedKeys.value = keys;
- searchExpandedKeys.value = keys;
- (_legacyContext$onTree = legacyContext.onTreeExpand) === null || _legacyContext$onTree === void 0 ? void 0 : _legacyContext$onTree.call(legacyContext, keys);
- };
- // ========================== Events ==========================
- var onListMouseDown = function onListMouseDown(event) {
- event.preventDefault();
- };
- var onInternalSelect = function onInternalSelect(_, _ref2) {
- var _context$onSelect;
- var node = _ref2.node;
- var checkable = legacyContext.checkable,
- checkedKeys = legacyContext.checkedKeys;
- if (checkable && isCheckDisabled(node)) {
- return;
- }
- (_context$onSelect = context.onSelect) === null || _context$onSelect === void 0 ? void 0 : _context$onSelect.call(context, node.key, {
- selected: !checkedKeys.includes(node.key)
- });
- if (!baseProps.multiple) {
- var _baseProps$toggleOpen;
- (_baseProps$toggleOpen = baseProps.toggleOpen) === null || _baseProps$toggleOpen === void 0 ? void 0 : _baseProps$toggleOpen.call(baseProps, false);
- }
- };
- // ========================= Keyboard =========================
- var activeKey = ref(null);
- var activeEntity = computed(function () {
- return legacyContext.keyEntities[activeKey.value];
- });
- var setActiveKey = function setActiveKey(key) {
- activeKey.value = key;
- };
- expose({
- scrollTo: function scrollTo() {
- var _treeRef$value2, _treeRef$value2$scrol;
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
- args[_key] = arguments[_key];
- }
- return (_treeRef$value2 = treeRef.value) === null || _treeRef$value2 === void 0 ? void 0 : (_treeRef$value2$scrol = _treeRef$value2.scrollTo) === null || _treeRef$value2$scrol === void 0 ? void 0 : _treeRef$value2$scrol.call.apply(_treeRef$value2$scrol, [_treeRef$value2].concat(args));
- },
- onKeydown: function onKeydown(event) {
- var _treeRef$value3;
- var which = event.which;
- switch (which) {
- // >>> Arrow keys
- case KeyCode.UP:
- case KeyCode.DOWN:
- case KeyCode.LEFT:
- case KeyCode.RIGHT:
- (_treeRef$value3 = treeRef.value) === null || _treeRef$value3 === void 0 ? void 0 : _treeRef$value3.onKeydown(event);
- break;
- // >>> Select item
- case KeyCode.ENTER:
- {
- if (activeEntity.value) {
- var _ref3 = activeEntity.value.node || {},
- selectable = _ref3.selectable,
- value = _ref3.value;
- if (selectable !== false) {
- onInternalSelect(null, {
- node: {
- key: activeKey.value
- },
- selected: !legacyContext.checkedKeys.includes(value)
- });
- }
- }
- break;
- }
- // >>> Close
- case KeyCode.ESC:
- {
- baseProps.toggleOpen(false);
- }
- }
- },
- onKeyup: function onKeyup() {}
- });
- return function () {
- var _slots$notFoundConten;
- var prefixCls = baseProps.prefixCls,
- multiple = baseProps.multiple,
- searchValue = baseProps.searchValue,
- open = baseProps.open,
- _baseProps$notFoundCo = baseProps.notFoundContent,
- notFoundContent = _baseProps$notFoundCo === void 0 ? (_slots$notFoundConten = slots.notFoundContent) === null || _slots$notFoundConten === void 0 ? void 0 : _slots$notFoundConten.call(slots) : _baseProps$notFoundCo;
- var listHeight = context.listHeight,
- listItemHeight = context.listItemHeight,
- virtual = context.virtual;
- var checkable = legacyContext.checkable,
- treeDefaultExpandAll = legacyContext.treeDefaultExpandAll,
- treeIcon = legacyContext.treeIcon,
- showTreeIcon = legacyContext.showTreeIcon,
- switcherIcon = legacyContext.switcherIcon,
- treeLine = legacyContext.treeLine,
- loadData = legacyContext.loadData,
- treeLoadedKeys = legacyContext.treeLoadedKeys,
- treeMotion = legacyContext.treeMotion,
- onTreeLoad = legacyContext.onTreeLoad,
- checkedKeys = legacyContext.checkedKeys;
- // ========================== Render ==========================
- if (memoTreeData.value.length === 0) {
- return _createVNode("div", {
- "role": "listbox",
- "class": "".concat(prefixCls, "-empty"),
- "onMousedown": onListMouseDown
- }, [notFoundContent]);
- }
- var treeProps = {
- fieldNames: context.fieldNames
- };
- if (treeLoadedKeys) {
- treeProps.loadedKeys = treeLoadedKeys;
- }
- if (mergedExpandedKeys.value) {
- treeProps.expandedKeys = mergedExpandedKeys.value;
- }
- return _createVNode("div", {
- "onMousedown": onListMouseDown
- }, [activeEntity.value && open && _createVNode("span", {
- "style": HIDDEN_STYLE,
- "aria-live": "assertive"
- }, [activeEntity.value.node.value]), _createVNode(Tree, _objectSpread(_objectSpread({
- "ref": treeRef,
- "focusable": false,
- "prefixCls": "".concat(prefixCls, "-tree"),
- "treeData": memoTreeData.value,
- "height": listHeight,
- "itemHeight": listItemHeight,
- "virtual": virtual,
- "multiple": multiple,
- "icon": treeIcon,
- "showIcon": showTreeIcon,
- "switcherIcon": switcherIcon,
- "showLine": treeLine,
- "loadData": searchValue ? null : loadData,
- "motion": treeMotion,
- "activeKey": activeKey.value,
- "checkable": checkable,
- "checkStrictly": true,
- "checkedKeys": mergedCheckedKeys.value,
- "selectedKeys": !checkable ? checkedKeys : [],
- "defaultExpandAll": treeDefaultExpandAll
- }, treeProps), {}, {
- "onActiveChange": setActiveKey,
- "onSelect": onInternalSelect,
- "onCheck": onInternalSelect,
- "onExpand": onInternalExpand,
- "onLoad": onTreeLoad,
- "filterTreeNode": filterTreeNode
- }), _objectSpread(_objectSpread({}, slots), {}, {
- checkable: legacyContext.customSlots.treeCheckable
- }))]);
- };
- }
- });
|