2022-01-21 13:58:10 +00:00
|
|
|
import type { TreeDataNode, Key } from './interface';
|
2021-09-25 08:51:32 +00:00
|
|
|
import type { RefOptionListProps } from '../vc-select/OptionList';
|
|
|
|
import type { ScrollTo } from '../vc-virtual-list/List';
|
2022-03-20 08:42:00 +00:00
|
|
|
import { computed, defineComponent, nextTick, ref, shallowRef, toRaw, watch } from 'vue';
|
2021-09-25 08:51:32 +00:00
|
|
|
import useMemo from '../_util/hooks/useMemo';
|
|
|
|
import type { EventDataNode } from '../tree';
|
|
|
|
import KeyCode from '../_util/KeyCode';
|
|
|
|
import Tree from '../vc-tree/Tree';
|
|
|
|
import type { TreeProps } from '../vc-tree/props';
|
2022-01-21 13:58:10 +00:00
|
|
|
import { getAllKeys, isCheckDisabled } from './utils/valueUtil';
|
|
|
|
import { useBaseProps } from '../vc-select';
|
|
|
|
import useInjectLegacySelectContext from './LegacyContext';
|
|
|
|
import useInjectSelectContext from './TreeSelectContext';
|
2021-09-25 08:51:32 +00:00
|
|
|
|
|
|
|
const HIDDEN_STYLE = {
|
|
|
|
width: 0,
|
|
|
|
height: 0,
|
|
|
|
display: 'flex',
|
|
|
|
overflow: 'hidden',
|
|
|
|
opacity: 0,
|
|
|
|
border: 0,
|
|
|
|
padding: 0,
|
|
|
|
margin: 0,
|
|
|
|
};
|
|
|
|
|
|
|
|
interface TreeEventInfo {
|
|
|
|
node: { key: Key };
|
|
|
|
selected?: boolean;
|
|
|
|
checked?: boolean;
|
|
|
|
}
|
|
|
|
|
|
|
|
type ReviseRefOptionListProps = Omit<RefOptionListProps, 'scrollTo'> & { scrollTo: ScrollTo };
|
|
|
|
|
|
|
|
export default defineComponent({
|
|
|
|
name: 'OptionList',
|
|
|
|
inheritAttrs: false,
|
|
|
|
slots: ['notFoundContent', 'menuItemSelectedIcon'],
|
2022-01-21 13:58:10 +00:00
|
|
|
setup(_, { slots, expose }) {
|
|
|
|
const baseProps = useBaseProps();
|
|
|
|
const legacyContext = useInjectLegacySelectContext();
|
|
|
|
const context = useInjectSelectContext();
|
2021-09-25 08:51:32 +00:00
|
|
|
const treeRef = ref();
|
2022-01-21 13:58:10 +00:00
|
|
|
const memoTreeData = useMemo(
|
|
|
|
() => context.treeData,
|
|
|
|
[() => baseProps.open, () => context.treeData],
|
2021-10-29 06:50:25 +00:00
|
|
|
next => next[0],
|
2021-09-25 08:51:32 +00:00
|
|
|
);
|
|
|
|
|
|
|
|
const mergedCheckedKeys = computed(() => {
|
2022-01-21 13:58:10 +00:00
|
|
|
const { checkable, halfCheckedKeys, checkedKeys } = legacyContext;
|
2021-09-25 08:51:32 +00:00
|
|
|
if (!checkable) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
2022-01-21 13:58:10 +00:00
|
|
|
checked: checkedKeys,
|
2021-09-25 08:51:32 +00:00
|
|
|
halfChecked: halfCheckedKeys,
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
|
|
|
watch(
|
2022-01-21 13:58:10 +00:00
|
|
|
() => baseProps.open,
|
2021-09-25 08:51:32 +00:00
|
|
|
() => {
|
|
|
|
nextTick(() => {
|
2022-01-21 13:58:10 +00:00
|
|
|
if (baseProps.open && !baseProps.multiple && legacyContext.checkedKeys.length) {
|
|
|
|
treeRef.value?.scrollTo({ key: legacyContext.checkedKeys[0] });
|
2021-09-25 08:51:32 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
{ immediate: true, flush: 'post' },
|
|
|
|
);
|
|
|
|
|
|
|
|
// ========================== Search ==========================
|
2022-01-21 13:58:10 +00:00
|
|
|
const lowerSearchValue = computed(() => String(baseProps.searchValue).toLowerCase());
|
2021-09-25 08:51:32 +00:00
|
|
|
const filterTreeNode = (treeNode: EventDataNode) => {
|
|
|
|
if (!lowerSearchValue.value) {
|
|
|
|
return false;
|
|
|
|
}
|
2022-01-21 13:58:10 +00:00
|
|
|
return String(treeNode[legacyContext.treeNodeFilterProp])
|
2021-09-25 08:51:32 +00:00
|
|
|
.toLowerCase()
|
|
|
|
.includes(lowerSearchValue.value);
|
|
|
|
};
|
|
|
|
|
|
|
|
// =========================== Keys ===========================
|
2022-01-21 13:58:10 +00:00
|
|
|
const expandedKeys = shallowRef<Key[]>(legacyContext.treeDefaultExpandedKeys);
|
2021-10-17 13:31:34 +00:00
|
|
|
const searchExpandedKeys = shallowRef<Key[]>(null);
|
2021-09-25 08:51:32 +00:00
|
|
|
|
|
|
|
watch(
|
2022-01-21 13:58:10 +00:00
|
|
|
() => baseProps.searchValue,
|
2021-09-25 08:51:32 +00:00
|
|
|
() => {
|
2022-01-21 13:58:10 +00:00
|
|
|
if (baseProps.searchValue) {
|
2022-03-20 08:42:00 +00:00
|
|
|
searchExpandedKeys.value = getAllKeys(toRaw(context.treeData), toRaw(context.fieldNames));
|
2021-09-25 08:51:32 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
immediate: true,
|
|
|
|
},
|
|
|
|
);
|
|
|
|
const mergedExpandedKeys = computed(() => {
|
2022-01-21 13:58:10 +00:00
|
|
|
if (legacyContext.treeExpandedKeys) {
|
2022-03-25 08:40:06 +00:00
|
|
|
return legacyContext.treeExpandedKeys.slice();
|
2021-09-25 08:51:32 +00:00
|
|
|
}
|
2022-01-21 13:58:10 +00:00
|
|
|
return baseProps.searchValue ? searchExpandedKeys.value : expandedKeys.value;
|
2021-09-25 08:51:32 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
const onInternalExpand = (keys: Key[]) => {
|
|
|
|
expandedKeys.value = keys;
|
|
|
|
searchExpandedKeys.value = keys;
|
|
|
|
|
2022-01-21 13:58:10 +00:00
|
|
|
legacyContext.onTreeExpand?.(keys);
|
2021-09-25 08:51:32 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
// ========================== Events ==========================
|
|
|
|
const onListMouseDown = (event: MouseEvent) => {
|
|
|
|
event.preventDefault();
|
|
|
|
};
|
|
|
|
|
2022-01-21 13:58:10 +00:00
|
|
|
const onInternalSelect = (_: Key[], { node }: TreeEventInfo) => {
|
|
|
|
const { checkable, checkedKeys } = legacyContext;
|
|
|
|
if (checkable && isCheckDisabled(node)) {
|
|
|
|
return;
|
2021-09-25 08:51:32 +00:00
|
|
|
}
|
2022-01-21 13:58:10 +00:00
|
|
|
context.onSelect?.(node.key, {
|
|
|
|
selected: !checkedKeys.includes(node.key),
|
|
|
|
});
|
2021-09-25 08:51:32 +00:00
|
|
|
|
2022-01-21 13:58:10 +00:00
|
|
|
if (!baseProps.multiple) {
|
|
|
|
baseProps.toggleOpen?.(false);
|
2021-09-25 08:51:32 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
// ========================= Keyboard =========================
|
|
|
|
const activeKey = ref<Key>(null);
|
2022-01-21 13:58:10 +00:00
|
|
|
const activeEntity = computed(() => legacyContext.keyEntities[activeKey.value]);
|
2021-09-25 08:51:32 +00:00
|
|
|
|
|
|
|
const setActiveKey = (key: Key) => {
|
|
|
|
activeKey.value = key;
|
|
|
|
};
|
|
|
|
expose({
|
|
|
|
scrollTo: (...args: any[]) => treeRef.value?.scrollTo?.(...args),
|
|
|
|
onKeydown: (event: KeyboardEvent) => {
|
|
|
|
const { which } = event;
|
|
|
|
switch (which) {
|
|
|
|
// >>> Arrow keys
|
|
|
|
case KeyCode.UP:
|
|
|
|
case KeyCode.DOWN:
|
|
|
|
case KeyCode.LEFT:
|
|
|
|
case KeyCode.RIGHT:
|
|
|
|
treeRef.value?.onKeydown(event);
|
|
|
|
break;
|
|
|
|
|
|
|
|
// >>> Select item
|
|
|
|
case KeyCode.ENTER: {
|
2022-03-12 05:35:23 +00:00
|
|
|
if (activeEntity.value) {
|
|
|
|
const { selectable, value } = activeEntity.value.node || {};
|
|
|
|
if (selectable !== false) {
|
|
|
|
onInternalSelect(null, {
|
|
|
|
node: { key: activeKey.value },
|
|
|
|
selected: !legacyContext.checkedKeys.includes(value),
|
|
|
|
});
|
|
|
|
}
|
2021-09-25 08:51:32 +00:00
|
|
|
}
|
2022-03-12 05:35:23 +00:00
|
|
|
|
2021-09-25 08:51:32 +00:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
// >>> Close
|
|
|
|
case KeyCode.ESC: {
|
2022-01-21 13:58:10 +00:00
|
|
|
baseProps.toggleOpen(false);
|
2021-09-25 08:51:32 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
onKeyup: () => {},
|
|
|
|
} as ReviseRefOptionListProps);
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
const {
|
|
|
|
prefixCls,
|
|
|
|
multiple,
|
|
|
|
searchValue,
|
|
|
|
open,
|
|
|
|
notFoundContent = slots.notFoundContent?.(),
|
2022-01-21 13:58:10 +00:00
|
|
|
} = baseProps;
|
|
|
|
const { listHeight, listItemHeight, virtual } = context;
|
2021-09-25 08:51:32 +00:00
|
|
|
const {
|
|
|
|
checkable,
|
|
|
|
treeDefaultExpandAll,
|
|
|
|
treeIcon,
|
|
|
|
showTreeIcon,
|
|
|
|
switcherIcon,
|
|
|
|
treeLine,
|
|
|
|
loadData,
|
|
|
|
treeLoadedKeys,
|
|
|
|
treeMotion,
|
|
|
|
onTreeLoad,
|
2022-01-21 13:58:10 +00:00
|
|
|
checkedKeys,
|
|
|
|
} = legacyContext;
|
2021-09-25 08:51:32 +00:00
|
|
|
// ========================== Render ==========================
|
2022-01-21 13:58:10 +00:00
|
|
|
if (memoTreeData.value.length === 0) {
|
2021-09-25 08:51:32 +00:00
|
|
|
return (
|
|
|
|
<div role="listbox" class={`${prefixCls}-empty`} onMousedown={onListMouseDown}>
|
|
|
|
{notFoundContent}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2022-01-21 13:58:10 +00:00
|
|
|
const treeProps: Partial<TreeProps> = {
|
|
|
|
fieldNames: context.fieldNames,
|
|
|
|
};
|
2021-09-25 08:51:32 +00:00
|
|
|
if (treeLoadedKeys) {
|
|
|
|
treeProps.loadedKeys = treeLoadedKeys;
|
|
|
|
}
|
|
|
|
if (mergedExpandedKeys.value) {
|
|
|
|
treeProps.expandedKeys = mergedExpandedKeys.value;
|
|
|
|
}
|
|
|
|
return (
|
2022-01-21 13:58:10 +00:00
|
|
|
<div onMousedown={onListMouseDown}>
|
2021-09-25 08:51:32 +00:00
|
|
|
{activeEntity.value && open && (
|
|
|
|
<span style={HIDDEN_STYLE} aria-live="assertive">
|
2022-01-21 13:58:10 +00:00
|
|
|
{activeEntity.value.node.value}
|
2021-09-25 08:51:32 +00:00
|
|
|
</span>
|
|
|
|
)}
|
|
|
|
|
|
|
|
<Tree
|
|
|
|
ref={treeRef}
|
|
|
|
focusable={false}
|
|
|
|
prefixCls={`${prefixCls}-tree`}
|
2022-01-21 13:58:10 +00:00
|
|
|
treeData={memoTreeData.value as TreeDataNode[]}
|
|
|
|
height={listHeight}
|
|
|
|
itemHeight={listItemHeight}
|
2021-09-25 08:51:32 +00:00
|
|
|
virtual={virtual}
|
|
|
|
multiple={multiple}
|
|
|
|
icon={treeIcon}
|
|
|
|
showIcon={showTreeIcon}
|
|
|
|
switcherIcon={switcherIcon}
|
|
|
|
showLine={treeLine}
|
|
|
|
loadData={searchValue ? null : (loadData as any)}
|
|
|
|
motion={treeMotion}
|
2022-03-12 05:35:23 +00:00
|
|
|
activeKey={activeKey.value}
|
2021-09-25 08:51:32 +00:00
|
|
|
// We handle keys by out instead tree self
|
|
|
|
checkable={checkable}
|
|
|
|
checkStrictly
|
|
|
|
checkedKeys={mergedCheckedKeys.value}
|
2022-01-21 13:58:10 +00:00
|
|
|
selectedKeys={!checkable ? checkedKeys : []}
|
2021-09-25 08:51:32 +00:00
|
|
|
defaultExpandAll={treeDefaultExpandAll}
|
|
|
|
{...treeProps}
|
|
|
|
// Proxy event out
|
|
|
|
onActiveChange={setActiveKey}
|
|
|
|
onSelect={onInternalSelect}
|
|
|
|
onCheck={onInternalSelect as any}
|
|
|
|
onExpand={onInternalExpand}
|
|
|
|
onLoad={onTreeLoad}
|
|
|
|
filterTreeNode={filterTreeNode}
|
2022-01-21 13:58:10 +00:00
|
|
|
v-slots={{ ...slots, checkable: legacyContext.customSlots.treeCheckable }}
|
2021-09-25 08:51:32 +00:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
},
|
|
|
|
});
|