Skip to content

Commit 415c288

Browse files
tangjinzhoutangjinzhou
committed
refactor: tree-select
1 parent ae36627 commit 415c288

39 files changed

+1069
-3520
lines changed

‎components/vc-select/OptionList.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,12 @@ import type {
1616
} from './interface';
1717
import type { RawValueType, FlattenOptionsType } from './interface/generator';
1818
import useMemo from '../_util/hooks/useMemo';
19+
20+
export interface RefOptionListProps {
21+
onKeydown: KeyboardEvent;
22+
onKeyup: KeyboardEvent;
23+
scrollTo?: (index: number) => void;
24+
}
1925
export interface OptionListProps {
2026
prefixCls: string;
2127
id: string;

‎components/vc-tree-select/Context.tsx

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import type { FlattenDataNode, Key, LegacyDataNode, RawValueType } from './interface';
2+
import type { SkipType } from './hooks/useKeyValueMapping';
3+
import {
4+
computed,
5+
ComputedRef,
6+
defineComponent,
7+
inject,
8+
InjectionKey,
9+
PropType,
10+
provide,
11+
} from 'vue';
12+
13+
interface ContextProps {
14+
checkable: boolean;
15+
checkedKeys: Key[];
16+
halfCheckedKeys: Key[];
17+
treeExpandedKeys: Key[];
18+
treeDefaultExpandedKeys: Key[];
19+
onTreeExpand: (keys: Key[]) => void;
20+
treeDefaultExpandAll: boolean;
21+
treeIcon: any;
22+
showTreeIcon: boolean;
23+
switcherIcon: any;
24+
treeLine: boolean;
25+
treeNodeFilterProp: string;
26+
treeLoadedKeys: Key[];
27+
treeMotion: any;
28+
loadData: (treeNode: LegacyDataNode) => Promise<unknown>;
29+
onTreeLoad: (loadedKeys: Key[]) => void;
30+
31+
// Cache help content. These can be generated by parent component.
32+
// Let's reuse this.
33+
getEntityByKey: (key: Key, skipType?: SkipType, ignoreDisabledCheck?: boolean) => FlattenDataNode;
34+
getEntityByValue: (
35+
value: RawValueType,
36+
skipType?: SkipType,
37+
ignoreDisabledCheck?: boolean,
38+
) => FlattenDataNode;
39+
40+
slots: Record<string, any>;
41+
}
42+
43+
const SelectContextKey: InjectionKey<ComputedRef<ContextProps>> = Symbol('SelectContextKey');
44+
45+
export const SelectContext = defineComponent({
46+
name: 'SelectContext',
47+
props: {
48+
value: { type: Object as PropType<ContextProps> },
49+
},
50+
setup(props, { slots }) {
51+
provide(
52+
SelectContextKey,
53+
computed(() => props.value),
54+
);
55+
return () => slots.default?.();
56+
},
57+
});
58+
59+
export const useInjectSelectContext = () => {
60+
return inject(
61+
SelectContextKey,
62+
computed(() => ({} as ContextProps)),
63+
);
64+
};

‎components/vc-tree-select/OptionList.tsx

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import type { FlattenDataNode, RawValueType, DataNode, TreeDataNode, Key } from './interface';
2+
import { SelectContext } from './Context';
3+
import { RefOptionListProps } from '../vc-select/OptionList';
4+
import { ScrollTo } from '../vc-virtual-list/List';
5+
import { defineComponent } from 'vue';
6+
import { optionListProps } from './props';
7+
8+
const HIDDEN_STYLE = {
9+
width: 0,
10+
height: 0,
11+
display: 'flex',
12+
overflow: 'hidden',
13+
opacity: 0,
14+
border: 0,
15+
padding: 0,
16+
margin: 0,
17+
};
18+
19+
interface TreeEventInfo {
20+
node: { key: Key };
21+
selected?: boolean;
22+
checked?: boolean;
23+
}
24+
25+
export interface OptionListProps<OptionsType extends object[]> {
26+
prefixCls: string;
27+
id: string;
28+
options: OptionsType;
29+
flattenOptions: FlattenDataNode[];
30+
height: number;
31+
itemHeight: number;
32+
virtual?: boolean;
33+
values: Set<RawValueType>;
34+
multiple: boolean;
35+
open: boolean;
36+
defaultActiveFirstOption?: boolean;
37+
notFoundContent?: any;
38+
menuItemSelectedIcon?: any;
39+
childrenAsData: boolean;
40+
searchValue: string;
41+
42+
onSelect: (value: RawValueType, option: { selected: boolean }) => void;
43+
onToggleOpen: (open?: boolean) => void;
44+
/** Tell Select that some value is now active to make accessibility work */
45+
onActiveValue: (value: RawValueType, index: number) => void;
46+
onScroll: UIEvent;
47+
48+
onMouseenter: () => void;
49+
}
50+
51+
type ReviseRefOptionListProps = Omit<RefOptionListProps, 'scrollTo'> & { scrollTo: ScrollTo };
52+
53+
export default defineComponent({
54+
name: 'OptionList',
55+
props: optionListProps(),
56+
slots: ['notFoundContent', 'menuItemSelectedIcon'],
57+
});

‎components/vc-tree-select/TreeNode.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/* istanbul ignore file */
2+
3+
import { FunctionalComponent } from 'vue';
4+
import type { DataNode, Key } from './interface';
5+
6+
export interface TreeNodeProps extends Omit<DataNode, 'children'> {
7+
value: Key;
8+
}
9+
10+
/** This is a placeholder, not real render in dom */
11+
const TreeNode: FunctionalComponent<TreeNodeProps> = () => null;
12+
TreeNode.inheritAttrs = false;
13+
TreeNode.displayName = 'ATreeSelectNode';
14+
export default TreeNode;

‎components/vc-tree-select/TreeSelect.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import generate, { TreeSelectProps } from './generate';
2+
import OptionList from './OptionList';
3+
4+
const TreeSelect = generate({ prefixCls: 'vc-tree-select', optionList: OptionList as any });
5+
6+
export { TreeSelectProps };
7+
8+
export default TreeSelect;

‎components/vc-tree-select/assets/icons.png

-10.9 KB
Binary file not shown.

‎components/vc-tree-select/assets/index.less

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎components/vc-tree-select/assets/loading.gif

-381 Bytes
Binary file not shown.

‎components/vc-tree-select/assets/minus.gif

-45 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy