tdesign-vue-next
Version:
TDesign Component for vue-next
1 lines • 11.6 kB
Source Map (JSON)
{"version":3,"file":"useKeyboardControl.mjs","sources":["../../../../components/select/hooks/useKeyboardControl.ts"],"sourcesContent":["import { ref, watch, ComputedRef, Ref } from 'vue';\nimport { usePrefixClass } from '@tdesign/shared-hooks';\n\nimport { getNewMultipleValue } from '../utils';\n\nimport type { SelectOption, TdOptionProps, SelectValue } from '../type';\nimport type { ChangeHandler } from '@tdesign/shared-hooks';\nimport type { PopupVisibleChangeContext } from '../../popup';\n\nexport type useKeyboardControlType = {\n displayOptions: ComputedRef<SelectOption[]>;\n optionsList: ComputedRef<TdOptionProps[]>;\n innerPopupVisible: Ref<boolean>;\n setInnerPopupVisible: ChangeHandler<boolean, [context: PopupVisibleChangeContext]>;\n selectPanelRef: Ref<{ isVirtual: boolean; innerRef: HTMLDivElement }>;\n isFilterable: ComputedRef<boolean>;\n isRemoteSearch: ComputedRef<boolean>;\n getSelectedOptions: (selectValue?: SelectValue[] | SelectValue) => TdOptionProps[];\n setInnerValue: Function;\n onCheckAllChange: Function;\n isCheckAll: ComputedRef<boolean>;\n innerValue: Ref<SelectValue[]>;\n popupContentRef: ComputedRef<HTMLElement>;\n multiple: boolean;\n max: number;\n};\n\n// 统一处理键盘控制的hooks\nexport function useKeyboardControl({\n displayOptions,\n optionsList,\n innerPopupVisible,\n setInnerPopupVisible,\n selectPanelRef,\n isFilterable,\n isRemoteSearch,\n getSelectedOptions,\n setInnerValue,\n onCheckAllChange,\n innerValue,\n popupContentRef,\n multiple,\n max,\n isCheckAll,\n}: useKeyboardControlType) {\n const hoverIndex = ref(-1);\n const filteredOptions = ref([]); // 处理普通场景选项过滤键盘选中的问题\n const virtualFilteredOptions = ref([]); // 处理虚拟滚动下选项过滤通过键盘选择的问题\n const classPrefix = usePrefixClass();\n const handleKeyDown = (e: KeyboardEvent) => {\n const optionsListLength = displayOptions.value.length;\n let newIndex = hoverIndex.value;\n switch (e.code) {\n case 'ArrowUp':\n e.preventDefault();\n if (hoverIndex.value === -1) {\n newIndex = 0;\n } else if (hoverIndex.value === 0 || hoverIndex.value > displayOptions.value.length - 1) {\n newIndex = optionsListLength - 1;\n } else {\n newIndex--;\n }\n if (optionsList.value[newIndex]?.disabled) {\n newIndex--;\n }\n hoverIndex.value = newIndex;\n break;\n case 'ArrowDown':\n e.preventDefault();\n\n if (hoverIndex.value === -1 || hoverIndex.value >= optionsListLength - 1) {\n newIndex = 0;\n } else {\n newIndex++;\n }\n if (optionsList.value[newIndex]?.disabled) {\n newIndex++;\n }\n hoverIndex.value = newIndex;\n break;\n case 'Enter':\n if (hoverIndex.value === -1) break;\n\n let finalOptions =\n selectPanelRef.value.isVirtual && isFilterable.value && virtualFilteredOptions.value.length\n ? virtualFilteredOptions.value\n : isRemoteSearch.value\n ? optionsList.value\n : filteredOptions.value;\n\n if (!finalOptions.length) finalOptions = optionsList.value;\n if (!innerPopupVisible.value) {\n setInnerPopupVisible(true, { e });\n break;\n }\n\n if (!multiple) {\n const selectedOptions = getSelectedOptions(finalOptions[hoverIndex.value].value);\n setInnerValue(finalOptions[hoverIndex.value].value, {\n option: selectedOptions?.[0],\n selectedOptions: getSelectedOptions(finalOptions[hoverIndex.value].value),\n trigger: 'check',\n e,\n });\n setInnerPopupVisible(false, { e });\n } else {\n if (hoverIndex.value === -1) return;\n\n if (finalOptions[hoverIndex.value].checkAll) {\n onCheckAllChange(!isCheckAll.value);\n return;\n }\n\n const optionValue = finalOptions[hoverIndex.value]?.value;\n\n if (!optionValue) return;\n const newValue = getNewMultipleValue(innerValue.value, optionValue);\n\n if (max > 0 && newValue.value.length > max) return; // 如果已选达到最大值 则不处理\n const selectedOptions = getSelectedOptions(newValue.value);\n setInnerValue(newValue.value, {\n option: selectedOptions.find((v) => v.value == optionValue),\n selectedOptions,\n trigger: newValue.isCheck ? 'check' : 'uncheck',\n e,\n });\n filteredOptions.value = [];\n }\n break;\n case 'Escape':\n setInnerPopupVisible(false, { e });\n break;\n }\n };\n\n watch(innerPopupVisible, (value) => {\n if (value) {\n // 展开重新恢复初始值\n hoverIndex.value = -1;\n virtualFilteredOptions.value = [];\n filteredOptions.value = [];\n }\n });\n\n // 处理键盘操作滚动 超出视图时继续自动滚动到键盘所在元素\n watch(hoverIndex, (index) => {\n const optionHeight = selectPanelRef.value?.innerRef?.querySelector(\n `.${classPrefix.value}-select-option`,\n )?.clientHeight;\n\n const scrollHeight = optionHeight * index;\n\n popupContentRef.value.scrollTo({\n top: scrollHeight,\n behavior: 'smooth',\n });\n });\n\n return {\n hoverIndex,\n handleKeyDown,\n virtualFilteredOptions,\n filteredOptions,\n };\n}\n"],"names":["useKeyboardControl","_ref","displayOptions","optionsList","innerPopupVisible","setInnerPopupVisible","selectPanelRef","isFilterable","isRemoteSearch","getSelectedOptions","setInnerValue","onCheckAllChange","innerValue","popupContentRef","multiple","max","isCheckAll","hoverIndex","ref","filteredOptions","virtualFilteredOptions","classPrefix","usePrefixClass","handleKeyDown","e","_optionsList$value$ne","_optionsList$value$ne2","optionsListLength","value","length","newIndex","code","preventDefault","disabled","finalOptions","isVirtual","selectedOptions","option","trigger","_finalOptions$hoverIn","checkAll","optionValue","newValue","getNewMultipleValue","find","v","isCheck","watch","index","_selectPanelRef$value","optionHeight","innerRef","querySelector","concat","clientHeight","scrollHeight","scrollTo","top","behavior"],"mappings":"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"}