OptionList.js 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
  3. import { computed, defineComponent, nextTick, ref, shallowRef, toRaw, watch } from 'vue';
  4. import useMemo from '../_util/hooks/useMemo';
  5. import KeyCode from '../_util/KeyCode';
  6. import Tree from '../vc-tree/Tree';
  7. import { getAllKeys, isCheckDisabled } from './utils/valueUtil';
  8. import { useBaseProps } from '../vc-select';
  9. import useInjectLegacySelectContext from './LegacyContext';
  10. import useInjectSelectContext from './TreeSelectContext';
  11. var HIDDEN_STYLE = {
  12. width: 0,
  13. height: 0,
  14. display: 'flex',
  15. overflow: 'hidden',
  16. opacity: 0,
  17. border: 0,
  18. padding: 0,
  19. margin: 0
  20. };
  21. export default defineComponent({
  22. compatConfig: {
  23. MODE: 3
  24. },
  25. name: 'OptionList',
  26. inheritAttrs: false,
  27. slots: ['notFoundContent', 'menuItemSelectedIcon'],
  28. setup: function setup(_, _ref) {
  29. var slots = _ref.slots,
  30. expose = _ref.expose;
  31. var baseProps = useBaseProps();
  32. var legacyContext = useInjectLegacySelectContext();
  33. var context = useInjectSelectContext();
  34. var treeRef = ref();
  35. var memoTreeData = useMemo(function () {
  36. return context.treeData;
  37. }, [function () {
  38. return baseProps.open;
  39. }, function () {
  40. return context.treeData;
  41. }], function (next) {
  42. return next[0];
  43. });
  44. var mergedCheckedKeys = computed(function () {
  45. var checkable = legacyContext.checkable,
  46. halfCheckedKeys = legacyContext.halfCheckedKeys,
  47. checkedKeys = legacyContext.checkedKeys;
  48. if (!checkable) {
  49. return null;
  50. }
  51. return {
  52. checked: checkedKeys,
  53. halfChecked: halfCheckedKeys
  54. };
  55. });
  56. watch(function () {
  57. return baseProps.open;
  58. }, function () {
  59. nextTick(function () {
  60. if (baseProps.open && !baseProps.multiple && legacyContext.checkedKeys.length) {
  61. var _treeRef$value;
  62. (_treeRef$value = treeRef.value) === null || _treeRef$value === void 0 ? void 0 : _treeRef$value.scrollTo({
  63. key: legacyContext.checkedKeys[0]
  64. });
  65. }
  66. });
  67. }, {
  68. immediate: true,
  69. flush: 'post'
  70. });
  71. // ========================== Search ==========================
  72. var lowerSearchValue = computed(function () {
  73. return String(baseProps.searchValue).toLowerCase();
  74. });
  75. var filterTreeNode = function filterTreeNode(treeNode) {
  76. if (!lowerSearchValue.value) {
  77. return false;
  78. }
  79. return String(treeNode[legacyContext.treeNodeFilterProp]).toLowerCase().includes(lowerSearchValue.value);
  80. };
  81. // =========================== Keys ===========================
  82. var expandedKeys = shallowRef(legacyContext.treeDefaultExpandedKeys);
  83. var searchExpandedKeys = shallowRef(null);
  84. watch(function () {
  85. return baseProps.searchValue;
  86. }, function () {
  87. if (baseProps.searchValue) {
  88. searchExpandedKeys.value = getAllKeys(toRaw(context.treeData), toRaw(context.fieldNames));
  89. }
  90. }, {
  91. immediate: true
  92. });
  93. var mergedExpandedKeys = computed(function () {
  94. if (legacyContext.treeExpandedKeys) {
  95. return legacyContext.treeExpandedKeys.slice();
  96. }
  97. return baseProps.searchValue ? searchExpandedKeys.value : expandedKeys.value;
  98. });
  99. var onInternalExpand = function onInternalExpand(keys) {
  100. var _legacyContext$onTree;
  101. expandedKeys.value = keys;
  102. searchExpandedKeys.value = keys;
  103. (_legacyContext$onTree = legacyContext.onTreeExpand) === null || _legacyContext$onTree === void 0 ? void 0 : _legacyContext$onTree.call(legacyContext, keys);
  104. };
  105. // ========================== Events ==========================
  106. var onListMouseDown = function onListMouseDown(event) {
  107. event.preventDefault();
  108. };
  109. var onInternalSelect = function onInternalSelect(_, _ref2) {
  110. var _context$onSelect;
  111. var node = _ref2.node;
  112. var checkable = legacyContext.checkable,
  113. checkedKeys = legacyContext.checkedKeys;
  114. if (checkable && isCheckDisabled(node)) {
  115. return;
  116. }
  117. (_context$onSelect = context.onSelect) === null || _context$onSelect === void 0 ? void 0 : _context$onSelect.call(context, node.key, {
  118. selected: !checkedKeys.includes(node.key)
  119. });
  120. if (!baseProps.multiple) {
  121. var _baseProps$toggleOpen;
  122. (_baseProps$toggleOpen = baseProps.toggleOpen) === null || _baseProps$toggleOpen === void 0 ? void 0 : _baseProps$toggleOpen.call(baseProps, false);
  123. }
  124. };
  125. // ========================= Keyboard =========================
  126. var activeKey = ref(null);
  127. var activeEntity = computed(function () {
  128. return legacyContext.keyEntities[activeKey.value];
  129. });
  130. var setActiveKey = function setActiveKey(key) {
  131. activeKey.value = key;
  132. };
  133. expose({
  134. scrollTo: function scrollTo() {
  135. var _treeRef$value2, _treeRef$value2$scrol;
  136. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  137. args[_key] = arguments[_key];
  138. }
  139. 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));
  140. },
  141. onKeydown: function onKeydown(event) {
  142. var _treeRef$value3;
  143. var which = event.which;
  144. switch (which) {
  145. // >>> Arrow keys
  146. case KeyCode.UP:
  147. case KeyCode.DOWN:
  148. case KeyCode.LEFT:
  149. case KeyCode.RIGHT:
  150. (_treeRef$value3 = treeRef.value) === null || _treeRef$value3 === void 0 ? void 0 : _treeRef$value3.onKeydown(event);
  151. break;
  152. // >>> Select item
  153. case KeyCode.ENTER:
  154. {
  155. if (activeEntity.value) {
  156. var _ref3 = activeEntity.value.node || {},
  157. selectable = _ref3.selectable,
  158. value = _ref3.value;
  159. if (selectable !== false) {
  160. onInternalSelect(null, {
  161. node: {
  162. key: activeKey.value
  163. },
  164. selected: !legacyContext.checkedKeys.includes(value)
  165. });
  166. }
  167. }
  168. break;
  169. }
  170. // >>> Close
  171. case KeyCode.ESC:
  172. {
  173. baseProps.toggleOpen(false);
  174. }
  175. }
  176. },
  177. onKeyup: function onKeyup() {}
  178. });
  179. return function () {
  180. var _slots$notFoundConten;
  181. var prefixCls = baseProps.prefixCls,
  182. multiple = baseProps.multiple,
  183. searchValue = baseProps.searchValue,
  184. open = baseProps.open,
  185. _baseProps$notFoundCo = baseProps.notFoundContent,
  186. notFoundContent = _baseProps$notFoundCo === void 0 ? (_slots$notFoundConten = slots.notFoundContent) === null || _slots$notFoundConten === void 0 ? void 0 : _slots$notFoundConten.call(slots) : _baseProps$notFoundCo;
  187. var listHeight = context.listHeight,
  188. listItemHeight = context.listItemHeight,
  189. virtual = context.virtual;
  190. var checkable = legacyContext.checkable,
  191. treeDefaultExpandAll = legacyContext.treeDefaultExpandAll,
  192. treeIcon = legacyContext.treeIcon,
  193. showTreeIcon = legacyContext.showTreeIcon,
  194. switcherIcon = legacyContext.switcherIcon,
  195. treeLine = legacyContext.treeLine,
  196. loadData = legacyContext.loadData,
  197. treeLoadedKeys = legacyContext.treeLoadedKeys,
  198. treeMotion = legacyContext.treeMotion,
  199. onTreeLoad = legacyContext.onTreeLoad,
  200. checkedKeys = legacyContext.checkedKeys;
  201. // ========================== Render ==========================
  202. if (memoTreeData.value.length === 0) {
  203. return _createVNode("div", {
  204. "role": "listbox",
  205. "class": "".concat(prefixCls, "-empty"),
  206. "onMousedown": onListMouseDown
  207. }, [notFoundContent]);
  208. }
  209. var treeProps = {
  210. fieldNames: context.fieldNames
  211. };
  212. if (treeLoadedKeys) {
  213. treeProps.loadedKeys = treeLoadedKeys;
  214. }
  215. if (mergedExpandedKeys.value) {
  216. treeProps.expandedKeys = mergedExpandedKeys.value;
  217. }
  218. return _createVNode("div", {
  219. "onMousedown": onListMouseDown
  220. }, [activeEntity.value && open && _createVNode("span", {
  221. "style": HIDDEN_STYLE,
  222. "aria-live": "assertive"
  223. }, [activeEntity.value.node.value]), _createVNode(Tree, _objectSpread(_objectSpread({
  224. "ref": treeRef,
  225. "focusable": false,
  226. "prefixCls": "".concat(prefixCls, "-tree"),
  227. "treeData": memoTreeData.value,
  228. "height": listHeight,
  229. "itemHeight": listItemHeight,
  230. "virtual": virtual,
  231. "multiple": multiple,
  232. "icon": treeIcon,
  233. "showIcon": showTreeIcon,
  234. "switcherIcon": switcherIcon,
  235. "showLine": treeLine,
  236. "loadData": searchValue ? null : loadData,
  237. "motion": treeMotion,
  238. "activeKey": activeKey.value,
  239. "checkable": checkable,
  240. "checkStrictly": true,
  241. "checkedKeys": mergedCheckedKeys.value,
  242. "selectedKeys": !checkable ? checkedKeys : [],
  243. "defaultExpandAll": treeDefaultExpandAll
  244. }, treeProps), {}, {
  245. "onActiveChange": setActiveKey,
  246. "onSelect": onInternalSelect,
  247. "onCheck": onInternalSelect,
  248. "onExpand": onInternalExpand,
  249. "onLoad": onTreeLoad,
  250. "filterTreeNode": filterTreeNode
  251. }), _objectSpread(_objectSpread({}, slots), {}, {
  252. checkable: legacyContext.customSlots.treeCheckable
  253. }))]);
  254. };
  255. }
  256. });