@infomaximum/ui-kit 0.12.12 → 0.13.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/BaseSelect/BaseSelect.d.ts +5 -0
- package/dist/components/BaseSelect/BaseSelect.js +360 -0
- package/dist/components/{Select/Select.styles.d.ts → BaseSelect/BaseSelect.styles.d.ts} +20 -4
- package/dist/components/{Select/Select.styles.js → BaseSelect/BaseSelect.styles.js} +23 -10
- package/dist/components/BaseSelect/BaseSelect.types.d.ts +99 -0
- package/dist/components/BaseSelect/BaseSelect.utils.d.ts +8 -0
- package/dist/components/BaseSelect/BaseSelect.utils.js +39 -0
- package/dist/components/BaseSelect/components/BaseSelectOptionList/BaseSelectOptionList.types.d.ts +11 -0
- package/dist/components/BaseSelect/components/SelectOptionList/SelectOptionList.d.ts +4 -0
- package/dist/components/BaseSelect/components/SelectOptionList/SelectOptionList.js +120 -0
- package/dist/components/{Select → BaseSelect}/components/SelectOptionList/SelectOptionList.styles.d.ts +13 -4
- package/dist/components/{Select → BaseSelect}/components/SelectOptionList/SelectOptionList.styles.js +13 -7
- package/dist/components/BaseSelect/components/SelectOptionList/SelectOptionList.types.d.ts +20 -0
- package/dist/components/BaseSelect/components/SelectTag/SelectTag.d.ts +4 -0
- package/dist/components/{Select → BaseSelect}/components/SelectTag/SelectTag.js +9 -5
- package/dist/components/BaseSelect/components/SelectTag/SelectTag.styles.d.ts +16 -0
- package/dist/components/{Select → BaseSelect}/components/SelectTag/SelectTag.styles.js +13 -3
- package/dist/components/BaseSelect/components/SelectTag/SelectTag.types.d.ts +11 -0
- package/dist/components/BaseSelect/contexts/BaseSelectContext.d.ts +33 -0
- package/dist/components/BaseSelect/contexts/BaseSelectContext.js +8 -0
- package/dist/components/BaseSelect/hooks/useCurrentValue.d.ts +7 -0
- package/dist/components/{Select → BaseSelect}/hooks/useCurrentValue.js +15 -0
- package/dist/components/BaseSelect/hooks/useDefaultCurrentValue.d.ts +2 -0
- package/dist/components/{Select → BaseSelect}/hooks/useDefaultCurrentValue.js +1 -1
- package/dist/components/BaseSelect/hooks/useDefaultSelectIndex.d.ts +2 -0
- package/dist/components/BaseSelect/hooks/useHideElements.d.ts +6 -0
- package/dist/components/{Select → BaseSelect}/hooks/useHideElements.js +11 -3
- package/dist/components/BaseSelect/hooks/useSearch.d.ts +10 -0
- package/dist/components/{Select → BaseSelect}/hooks/useSearch.js +4 -16
- package/dist/components/Checkbox/Checkbox.js +12 -8
- package/dist/components/Checkbox/Checkbox.utils.d.ts +2 -0
- package/dist/components/Checkbox/Checkbox.utils.js +5 -0
- package/dist/components/Checkbox/index.d.ts +1 -0
- package/dist/components/Input/Input.d.ts +2 -2
- package/dist/components/Input/Input.js +35 -10
- package/dist/components/Input/Input.styles.d.ts +7 -0
- package/dist/components/Input/Input.styles.js +9 -5
- package/dist/components/Input/Input.types.d.ts +16 -6
- package/dist/components/Input/components/InputPassword/InputPassword.d.ts +2 -1
- package/dist/components/Input/components/InputTextArea/InputTextArea.d.ts +2 -2
- package/dist/components/Input/components/InputTextArea/InputTextArea.js +27 -5
- package/dist/components/Input/components/InputTextArea/InputTextArea.types.d.ts +10 -2
- package/dist/components/Input/index.d.ts +3 -1
- package/dist/components/Select/Select.d.ts +2 -2
- package/dist/components/Select/Select.js +39 -281
- package/dist/components/Select/Select.types.d.ts +6 -85
- package/dist/components/Select/Select.utils.d.ts +1 -9
- package/dist/components/Select/Select.utils.js +1 -46
- package/dist/components/Select/components/SelectOption/SelectOption.js +20 -23
- package/dist/components/Select/components/SelectOption/SelectOption.styles.js +1 -1
- package/dist/components/Select/components/SelectOption/SelectOption.types.d.ts +13 -15
- package/dist/components/Select/hooks/useKeyControl.d.ts +7 -3
- package/dist/components/Select/hooks/useKeyControl.js +48 -13
- package/dist/components/TreeSelect/TreeSelect.d.ts +3 -0
- package/dist/components/TreeSelect/TreeSelect.js +189 -0
- package/dist/components/TreeSelect/TreeSelect.tokens.d.ts +30 -0
- package/dist/components/TreeSelect/TreeSelect.tokens.js +31 -0
- package/dist/components/TreeSelect/TreeSelect.types.d.ts +69 -0
- package/dist/components/TreeSelect/TreeSelect.utils.d.ts +13 -0
- package/dist/components/TreeSelect/TreeSelect.utils.js +192 -0
- package/dist/components/TreeSelect/components/TreeSelectOption/TreeSelectOption.d.ts +3 -0
- package/dist/components/TreeSelect/components/TreeSelectOption/TreeSelectOption.js +117 -0
- package/dist/components/TreeSelect/components/TreeSelectOption/TreeSelectOption.styles.d.ts +83 -0
- package/dist/components/TreeSelect/components/TreeSelectOption/TreeSelectOption.styles.js +111 -0
- package/dist/components/TreeSelect/components/TreeSelectOption/TreeSelectOption.types.d.ts +27 -0
- package/dist/components/TreeSelect/contexts/treeSelectContext.d.ts +14 -0
- package/dist/components/TreeSelect/contexts/treeSelectContext.js +5 -0
- package/dist/components/TreeSelect/forStories/dataForExamples.d.ts +32 -0
- package/dist/components/TreeSelect/hooks/useAsyncLoading.d.ts +8 -0
- package/dist/components/TreeSelect/hooks/useAsyncLoading.js +39 -0
- package/dist/components/TreeSelect/hooks/useElementSizesController.d.ts +6 -0
- package/dist/components/TreeSelect/hooks/useElementSizesController.js +21 -0
- package/dist/components/TreeSelect/hooks/useExtendController.d.ts +19 -0
- package/dist/components/TreeSelect/hooks/useExtendController.js +65 -0
- package/dist/components/TreeSelect/hooks/useKeyControl.d.ts +11 -0
- package/dist/components/TreeSelect/hooks/useKeyControl.js +75 -0
- package/dist/components/TreeSelect/hooks/useTreeCheckable.d.ts +6 -0
- package/dist/components/TreeSelect/hooks/useTreeCheckable.js +56 -0
- package/dist/components/TreeSelect/hooks/useTreeData.d.ts +8 -0
- package/dist/components/TreeSelect/hooks/useTreeData.js +33 -0
- package/dist/components/TreeSelect/index.d.ts +2 -0
- package/dist/index.d.ts +5 -4
- package/dist/index.js +4 -0
- package/package.json +1 -1
- package/dist/components/Select/components/SelectOptionList/SelectOptionList.d.ts +0 -3
- package/dist/components/Select/components/SelectOptionList/SelectOptionList.js +0 -139
- package/dist/components/Select/components/SelectOptionList/SelectOptionList.types.d.ts +0 -42
- package/dist/components/Select/components/SelectOptionList/SelectOptionList.utils.d.ts +0 -1
- package/dist/components/Select/components/SelectOptionList/SelectOptionList.utils.js +0 -4
- package/dist/components/Select/components/SelectTag/SelectTag.d.ts +0 -3
- package/dist/components/Select/components/SelectTag/SelectTag.styles.d.ts +0 -8
- package/dist/components/Select/components/SelectTag/SelectTag.types.d.ts +0 -10
- package/dist/components/Select/hooks/useCurrentValue.d.ts +0 -8
- package/dist/components/Select/hooks/useDefaultCurrentValue.d.ts +0 -3
- package/dist/components/Select/hooks/useDefaultSelectIndex.d.ts +0 -2
- package/dist/components/Select/hooks/useDefaultSelectIndex.js +0 -17
- package/dist/components/Select/hooks/useHideElements.d.ts +0 -5
- package/dist/components/Select/hooks/useSearch.d.ts +0 -11
- /package/dist/components/{Select/Select.tokens.d.ts → BaseSelect/BaseSelect.tokens.d.ts} +0 -0
- /package/dist/components/{Select/Select.tokens.js → BaseSelect/BaseSelect.tokens.js} +0 -0
- /package/dist/components/{Select → BaseSelect}/components/TagPlaceholder/TagPlaceholder.d.ts +0 -0
- /package/dist/components/{Select → BaseSelect}/components/TagPlaceholder/TagPlaceholder.js +0 -0
- /package/dist/components/{Select → BaseSelect}/components/TagPlaceholder/TagPlaceholder.styles.d.ts +0 -0
- /package/dist/components/{Select → BaseSelect}/components/TagPlaceholder/TagPlaceholder.styles.js +0 -0
- /package/dist/components/{Select → BaseSelect}/components/TagPlaceholder/TagPlaceholder.types.d.ts +0 -0
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import { getTreeSelectTokens } from "../../TreeSelect.tokens.js";
|
|
2
|
+
const getColor = (treeSelectTokens, selected, disabled, treeCheckable) => {
|
|
3
|
+
if (disabled) {
|
|
4
|
+
return treeSelectTokens.treeSelectOptionTextDisabled;
|
|
5
|
+
}
|
|
6
|
+
if (treeCheckable) {
|
|
7
|
+
return treeSelectTokens.treeSelectOptionText;
|
|
8
|
+
}
|
|
9
|
+
if (selected) {
|
|
10
|
+
return treeSelectTokens.treeSelectOptionTextSelected;
|
|
11
|
+
}
|
|
12
|
+
return treeSelectTokens.treeSelectOptionText;
|
|
13
|
+
};
|
|
14
|
+
const getTreeSelectOptionStyle = ({
|
|
15
|
+
disabled,
|
|
16
|
+
loading,
|
|
17
|
+
selected,
|
|
18
|
+
isSelecting,
|
|
19
|
+
treeCheckable,
|
|
20
|
+
isLastNode
|
|
21
|
+
}) => {
|
|
22
|
+
return {
|
|
23
|
+
wrapper: () => ({
|
|
24
|
+
display: "flex",
|
|
25
|
+
flexDirection: "column"
|
|
26
|
+
}),
|
|
27
|
+
header: (theme) => {
|
|
28
|
+
const treeSelectTokens = getTreeSelectTokens(theme);
|
|
29
|
+
const lastNodePadding = theme.iconS + treeSelectTokens.treeSelectSwitcherPadding * 2 + treeSelectTokens.treeSelectNodeGap;
|
|
30
|
+
return {
|
|
31
|
+
display: "flex",
|
|
32
|
+
alignItems: "center",
|
|
33
|
+
width: "100%",
|
|
34
|
+
height: theme.controlHeightM,
|
|
35
|
+
gap: treeSelectTokens.treeSelectNodeGap,
|
|
36
|
+
boxSizing: "border-box",
|
|
37
|
+
paddingLeft: isLastNode ? lastNodePadding : 0
|
|
38
|
+
};
|
|
39
|
+
},
|
|
40
|
+
switcher: (theme) => {
|
|
41
|
+
const treeSelectTokens = getTreeSelectTokens(theme);
|
|
42
|
+
return {
|
|
43
|
+
fontSize: theme.iconS,
|
|
44
|
+
padding: treeSelectTokens.treeSelectSwitcherPadding,
|
|
45
|
+
display: "inline-flex",
|
|
46
|
+
alignItems: "center",
|
|
47
|
+
borderRadius: theme.borderRadiusM,
|
|
48
|
+
color: loading ? treeSelectTokens.treeSelectTextDisabled : treeSelectTokens.treeSelectOptionText,
|
|
49
|
+
cursor: disabled ? "not-allowed" : "pointer",
|
|
50
|
+
":hover, :focus, focus-visible": {
|
|
51
|
+
background: disabled ? "unset" : treeSelectTokens.treeSelectOptionBgHover,
|
|
52
|
+
outline: "none"
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
},
|
|
56
|
+
item: (theme) => {
|
|
57
|
+
const treeSelectTokens = getTreeSelectTokens(theme);
|
|
58
|
+
return {
|
|
59
|
+
display: "flex",
|
|
60
|
+
alignItems: "center",
|
|
61
|
+
width: "100%",
|
|
62
|
+
padding: `${treeSelectTokens.treeSelectOptionPaddingVertical}px ${treeSelectTokens.treeSelectOptionPaddingHorizontal}px`,
|
|
63
|
+
color: getColor(treeSelectTokens, selected, disabled, treeCheckable),
|
|
64
|
+
boxSizing: "border-box",
|
|
65
|
+
flexWrap: "nowrap",
|
|
66
|
+
transition: `background .2s, color .2s`,
|
|
67
|
+
cursor: disabled ? "not-allowed" : "pointer",
|
|
68
|
+
borderRadius: theme.borderRadiusM,
|
|
69
|
+
background: isSelecting ? treeSelectTokens.treeSelectOptionBgHover : "unset",
|
|
70
|
+
":hover, :focus, focus-visible": {
|
|
71
|
+
background: disabled ? "unset" : treeSelectTokens.treeSelectOptionBgHover,
|
|
72
|
+
outline: "none"
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
},
|
|
76
|
+
content: (theme) => {
|
|
77
|
+
return {
|
|
78
|
+
display: "inline-flex",
|
|
79
|
+
gap: theme.marginXS,
|
|
80
|
+
width: selected ? `calc(100% - ${theme.marginXS + theme.iconM}px)` : "100%",
|
|
81
|
+
flex: "1 1 auto",
|
|
82
|
+
flexWrap: "nowrap"
|
|
83
|
+
};
|
|
84
|
+
},
|
|
85
|
+
icon: (theme) => ({
|
|
86
|
+
fontSize: theme.iconM,
|
|
87
|
+
display: "flex",
|
|
88
|
+
justifyContent: "center",
|
|
89
|
+
alignItems: "center"
|
|
90
|
+
}),
|
|
91
|
+
text: (theme) => ({
|
|
92
|
+
display: "inline-block",
|
|
93
|
+
overflow: "hidden",
|
|
94
|
+
whiteSpace: "nowrap",
|
|
95
|
+
textOverflow: "ellipsis",
|
|
96
|
+
width: "100%",
|
|
97
|
+
...theme.typography.body2
|
|
98
|
+
}),
|
|
99
|
+
children: (theme) => {
|
|
100
|
+
const treeSelectTokens = getTreeSelectTokens(theme);
|
|
101
|
+
return {
|
|
102
|
+
display: "flex",
|
|
103
|
+
flexDirection: "column",
|
|
104
|
+
paddingLeft: treeSelectTokens.treeSelectNodeIndent
|
|
105
|
+
};
|
|
106
|
+
}
|
|
107
|
+
};
|
|
108
|
+
};
|
|
109
|
+
export {
|
|
110
|
+
getTreeSelectOptionStyle
|
|
111
|
+
};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { Interpolation } from '@emotion/react';
|
|
2
|
+
import { BaseSelectOptionInterface } from 'components/BaseSelect/BaseSelect.types';
|
|
3
|
+
import { TreeSelectNodeValue } from 'components/TreeSelect/TreeSelect.types';
|
|
4
|
+
import { Theme } from 'themes';
|
|
5
|
+
export interface TreeSelectNodeStyles {
|
|
6
|
+
wrapper?: () => Interpolation;
|
|
7
|
+
header?: (theme: Theme) => Interpolation;
|
|
8
|
+
switcher?: (theme: Theme) => Interpolation;
|
|
9
|
+
item?: (theme: Theme) => Interpolation;
|
|
10
|
+
content?: (theme: Theme) => Interpolation;
|
|
11
|
+
text?: (theme: Theme) => Interpolation;
|
|
12
|
+
icon?: (theme: Theme) => Interpolation;
|
|
13
|
+
children?: (theme: Theme) => Interpolation;
|
|
14
|
+
}
|
|
15
|
+
export interface TreeNode extends BaseSelectOptionInterface<TreeSelectNodeValue> {
|
|
16
|
+
checkable?: boolean;
|
|
17
|
+
disableCheckbox?: boolean;
|
|
18
|
+
leaf?: boolean;
|
|
19
|
+
key: string;
|
|
20
|
+
selectable?: boolean;
|
|
21
|
+
children?: TreeNode[];
|
|
22
|
+
}
|
|
23
|
+
export interface TreeSelectOptionProps extends TreeNode {
|
|
24
|
+
index: number;
|
|
25
|
+
itemKey: string;
|
|
26
|
+
styles?: TreeSelectNodeStyles;
|
|
27
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { NodeData, ShowCheckedStrategyType } from '../TreeSelect.types';
|
|
2
|
+
export interface TreeSelectContextShape {
|
|
3
|
+
nodeDataMap: Map<string, NodeData>;
|
|
4
|
+
treeCheckable: boolean;
|
|
5
|
+
showCheckedStrategy: ShowCheckedStrategyType;
|
|
6
|
+
expandedKeys: string[];
|
|
7
|
+
loadingKeys: string[];
|
|
8
|
+
isAsyncLoading: boolean;
|
|
9
|
+
getCurrentSelectingKey: () => string | null;
|
|
10
|
+
onSwitcherClick: (key: string) => void;
|
|
11
|
+
changeElementSize: (index: number, newSize: number) => void;
|
|
12
|
+
onCheckableClick: (nodeKey: string) => void;
|
|
13
|
+
}
|
|
14
|
+
export declare const treeSelectContext: import('react').Context<TreeSelectContextShape>;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { TreeNode } from '../components/TreeSelectOption/TreeSelectOption.types';
|
|
2
|
+
export declare const treeData: ({
|
|
3
|
+
value: string;
|
|
4
|
+
title: string;
|
|
5
|
+
key: string;
|
|
6
|
+
children: {
|
|
7
|
+
value: string;
|
|
8
|
+
title: string;
|
|
9
|
+
key: string;
|
|
10
|
+
children: {
|
|
11
|
+
value: string;
|
|
12
|
+
title: string;
|
|
13
|
+
key: string;
|
|
14
|
+
}[];
|
|
15
|
+
}[];
|
|
16
|
+
} | {
|
|
17
|
+
value: string;
|
|
18
|
+
title: string;
|
|
19
|
+
key: string;
|
|
20
|
+
children: {
|
|
21
|
+
value: string;
|
|
22
|
+
title: string;
|
|
23
|
+
key: string;
|
|
24
|
+
}[];
|
|
25
|
+
})[];
|
|
26
|
+
export declare const baseLoadingData: {
|
|
27
|
+
value: string;
|
|
28
|
+
title: string;
|
|
29
|
+
key: string;
|
|
30
|
+
children: never[];
|
|
31
|
+
}[];
|
|
32
|
+
export declare const loadData: (node: TreeNode) => Promise<TreeNode[]>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Dispatch, SetStateAction } from 'react';
|
|
2
|
+
import { TreeNode } from '../components/TreeSelectOption/TreeSelectOption.types';
|
|
3
|
+
import { NodeData } from '../TreeSelect.types';
|
|
4
|
+
export declare const useAsyncLoading: (treeLoadedKeys: string[], nodeDataMap: Map<string, NodeData>, setAsyncTreeData: Dispatch<SetStateAction<TreeNode[]>>, loadData: ((node: TreeNode) => Promise<TreeNode[]>) | undefined) => {
|
|
5
|
+
loadingKeys: string[];
|
|
6
|
+
loadedKeys: string[];
|
|
7
|
+
loadChildrenNodes: (node: TreeNode) => Promise<void>;
|
|
8
|
+
};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { useState, useCallback } from "react";
|
|
2
|
+
import { isUndefined } from "lodash-es";
|
|
3
|
+
import { addChildrenNodesToTree } from "../TreeSelect.utils.js";
|
|
4
|
+
const useAsyncLoading = (treeLoadedKeys, nodeDataMap, setAsyncTreeData, loadData) => {
|
|
5
|
+
const [loadedKeys, setLoadedKeys] = useState(treeLoadedKeys);
|
|
6
|
+
const [loadingKeys, setLoadingKeys] = useState([]);
|
|
7
|
+
const addToLoadingKeys = useCallback((key) => {
|
|
8
|
+
setLoadingKeys((prev) => [...prev, key]);
|
|
9
|
+
}, []);
|
|
10
|
+
const removeFromLoadingKey = useCallback((key) => {
|
|
11
|
+
setLoadingKeys((prev) => prev.filter((item) => item !== key));
|
|
12
|
+
}, []);
|
|
13
|
+
const loadChildrenNodes = useCallback(async (node) => {
|
|
14
|
+
const {
|
|
15
|
+
key
|
|
16
|
+
} = node;
|
|
17
|
+
if (isUndefined(loadData) || loadedKeys.includes(key) || loadingKeys.includes(key)) {
|
|
18
|
+
return;
|
|
19
|
+
}
|
|
20
|
+
try {
|
|
21
|
+
addToLoadingKeys(node.key);
|
|
22
|
+
const childrenNodes = await loadData(node);
|
|
23
|
+
setAsyncTreeData((prev) => addChildrenNodesToTree(prev, childrenNodes, key, nodeDataMap) ?? prev);
|
|
24
|
+
setLoadedKeys((prev) => [...prev, node.key]);
|
|
25
|
+
} catch (e) {
|
|
26
|
+
console.error(e);
|
|
27
|
+
} finally {
|
|
28
|
+
removeFromLoadingKey(node.key);
|
|
29
|
+
}
|
|
30
|
+
}, [addToLoadingKeys, loadData, loadedKeys, loadingKeys, nodeDataMap, removeFromLoadingKey, setAsyncTreeData]);
|
|
31
|
+
return {
|
|
32
|
+
loadingKeys,
|
|
33
|
+
loadedKeys,
|
|
34
|
+
loadChildrenNodes
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
export {
|
|
38
|
+
useAsyncLoading
|
|
39
|
+
};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { TreeNode } from '../components/TreeSelectOption/TreeSelectOption.types';
|
|
2
|
+
export declare const DEFAULT_ELEMENT_SIZE = 28;
|
|
3
|
+
export declare const useElementSizesController: (treeData: TreeNode[]) => {
|
|
4
|
+
elementSizes: number[];
|
|
5
|
+
changeElementSize: (index: number, newSize: number) => void;
|
|
6
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { useState, useCallback } from "react";
|
|
2
|
+
const DEFAULT_ELEMENT_SIZE = 28;
|
|
3
|
+
const useElementSizesController = (treeData) => {
|
|
4
|
+
const defaultValue = treeData.map(() => DEFAULT_ELEMENT_SIZE);
|
|
5
|
+
const [elementSizes, setElementSizes] = useState(defaultValue);
|
|
6
|
+
const changeElementSize = useCallback((index, newSize) => {
|
|
7
|
+
setElementSizes((prev) => {
|
|
8
|
+
const newSizes = [...prev];
|
|
9
|
+
newSizes.splice(index, 1, newSize);
|
|
10
|
+
return newSizes;
|
|
11
|
+
});
|
|
12
|
+
}, []);
|
|
13
|
+
return {
|
|
14
|
+
elementSizes,
|
|
15
|
+
changeElementSize
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
export {
|
|
19
|
+
DEFAULT_ELEMENT_SIZE,
|
|
20
|
+
useElementSizesController
|
|
21
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { TreeNode } from '../components/TreeSelectOption/TreeSelectOption.types';
|
|
2
|
+
interface UseExtendControllerProps {
|
|
3
|
+
allParentKeys: string[];
|
|
4
|
+
treeDefaultExpandAll: boolean;
|
|
5
|
+
treeDefaultExpandedKeys: string[];
|
|
6
|
+
treeExpandedKeys?: string[];
|
|
7
|
+
treeNodeMap: Map<string, TreeNode>;
|
|
8
|
+
onTreeExpand?: (expandedKeys: string[]) => void;
|
|
9
|
+
onExpandSwitcherClick?: (nodeKey: string) => void;
|
|
10
|
+
loadChildrenNodes: (node: TreeNode) => Promise<void>;
|
|
11
|
+
loadData: ((node: TreeNode) => Promise<TreeNode[]>) | undefined;
|
|
12
|
+
onSearch: ((searchValue: string) => void) | undefined;
|
|
13
|
+
}
|
|
14
|
+
export declare const useExtendController: ({ allParentKeys, treeDefaultExpandAll, treeDefaultExpandedKeys, treeExpandedKeys, treeNodeMap, onTreeExpand, onExpandSwitcherClick, loadChildrenNodes, loadData, onSearch, }: UseExtendControllerProps) => {
|
|
15
|
+
expandedKeys: string[];
|
|
16
|
+
onSwitcherClick: (key: string) => void;
|
|
17
|
+
handleExpandSearch: (searchValue: string) => void;
|
|
18
|
+
};
|
|
19
|
+
export {};
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { isFunction, isUndefined } from "lodash-es";
|
|
2
|
+
import { useState, useRef, useEffect, useCallback } from "react";
|
|
3
|
+
const useExtendController = ({
|
|
4
|
+
allParentKeys,
|
|
5
|
+
treeDefaultExpandAll,
|
|
6
|
+
treeDefaultExpandedKeys,
|
|
7
|
+
treeExpandedKeys,
|
|
8
|
+
treeNodeMap,
|
|
9
|
+
onTreeExpand,
|
|
10
|
+
onExpandSwitcherClick,
|
|
11
|
+
loadChildrenNodes,
|
|
12
|
+
loadData,
|
|
13
|
+
onSearch
|
|
14
|
+
}) => {
|
|
15
|
+
const [isSearching, setIsSearching] = useState(false);
|
|
16
|
+
const defaultExpand = treeDefaultExpandAll || isSearching ? allParentKeys : treeDefaultExpandedKeys;
|
|
17
|
+
const [localExpandedKeys, setExpandedKeys] = useState(defaultExpand);
|
|
18
|
+
const expandedKeys = treeExpandedKeys ?? localExpandedKeys;
|
|
19
|
+
const hasComponentMount = useRef(false);
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
if (!hasComponentMount.current) {
|
|
22
|
+
hasComponentMount.current = true;
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
onTreeExpand == null ? void 0 : onTreeExpand(localExpandedKeys);
|
|
26
|
+
}, [localExpandedKeys, onTreeExpand]);
|
|
27
|
+
const handleExpandSearch = useCallback((searchValue) => {
|
|
28
|
+
onSearch == null ? void 0 : onSearch(searchValue);
|
|
29
|
+
if (searchValue.length > 0) {
|
|
30
|
+
if (!isSearching) {
|
|
31
|
+
setIsSearching(true);
|
|
32
|
+
}
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
if (isSearching) {
|
|
36
|
+
setIsSearching(false);
|
|
37
|
+
}
|
|
38
|
+
}, [isSearching, onSearch]);
|
|
39
|
+
const handleSwitcherClick = useCallback((key) => {
|
|
40
|
+
onExpandSwitcherClick == null ? void 0 : onExpandSwitcherClick(key);
|
|
41
|
+
if (isFunction(loadData)) {
|
|
42
|
+
const node = treeNodeMap.get(key);
|
|
43
|
+
if (node) {
|
|
44
|
+
loadChildrenNodes(node);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
if (!isUndefined(treeExpandedKeys)) {
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
setExpandedKeys((prev) => {
|
|
51
|
+
if (prev.includes(key)) {
|
|
52
|
+
return prev.filter((item) => item !== key);
|
|
53
|
+
}
|
|
54
|
+
return [...prev, key];
|
|
55
|
+
});
|
|
56
|
+
}, [loadChildrenNodes, loadData, onExpandSwitcherClick, treeExpandedKeys, treeNodeMap]);
|
|
57
|
+
return {
|
|
58
|
+
expandedKeys,
|
|
59
|
+
onSwitcherClick: handleSwitcherClick,
|
|
60
|
+
handleExpandSearch
|
|
61
|
+
};
|
|
62
|
+
};
|
|
63
|
+
export {
|
|
64
|
+
useExtendController
|
|
65
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { KeyboardEvent } from 'react';
|
|
2
|
+
import { TreeNode } from '../components/TreeSelectOption/TreeSelectOption.types';
|
|
3
|
+
export declare const useKeyControl: (treeData: TreeNode[], expandedKeys: string[], treeNodeMap: Map<string, TreeNode>, onDropdownVisibleChange: (() => void) | undefined, onChange: ((selectedKeys: string[], treeNode: TreeNode[]) => void) | undefined, onSearch: ((searchValue: string) => void) | undefined) => {
|
|
4
|
+
currentSelectingIndex: number;
|
|
5
|
+
isKeyControl: boolean;
|
|
6
|
+
onKeyControl: (e: KeyboardEvent) => void;
|
|
7
|
+
handleDropdownVisibleChange: () => void;
|
|
8
|
+
handleChange: (selectedKeys: string[], treeNode: TreeNode[]) => void;
|
|
9
|
+
handleSearch: (searchValue: string) => void;
|
|
10
|
+
getCurrentSelectingKey: () => string | null;
|
|
11
|
+
};
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { useMemo, useState, useCallback } from "react";
|
|
2
|
+
import { isNull } from "lodash-es";
|
|
3
|
+
import { flattenedNodes, getNextOption } from "../TreeSelect.utils.js";
|
|
4
|
+
const useKeyControl = (treeData, expandedKeys, treeNodeMap, onDropdownVisibleChange, onChange, onSearch) => {
|
|
5
|
+
const flattenedTreeDataKeys = useMemo(() => {
|
|
6
|
+
return flattenedNodes(treeData, expandedKeys);
|
|
7
|
+
}, [expandedKeys, treeData]);
|
|
8
|
+
const [currentStartingPosition, setCurrentStartingPosition] = useState(0);
|
|
9
|
+
const [currentSelectingIndex, setCurrentSelectingIndex] = useState(0);
|
|
10
|
+
const [isKeyControl, setIsControl] = useState(false);
|
|
11
|
+
const getCurrentSelectingKey = useCallback(() => {
|
|
12
|
+
if (!isKeyControl) {
|
|
13
|
+
return null;
|
|
14
|
+
}
|
|
15
|
+
return flattenedTreeDataKeys[currentSelectingIndex];
|
|
16
|
+
}, [currentSelectingIndex, flattenedTreeDataKeys, isKeyControl]);
|
|
17
|
+
const setNextIndex = useCallback((nextItemIndex) => {
|
|
18
|
+
if (isNull(nextItemIndex)) {
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
21
|
+
setCurrentSelectingIndex(nextItemIndex);
|
|
22
|
+
}, []);
|
|
23
|
+
const onKeyControl = useCallback((e) => {
|
|
24
|
+
if (e.key === "ArrowDown") {
|
|
25
|
+
if (!isKeyControl) {
|
|
26
|
+
setIsControl(true);
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
const nextItemIndex = getNextOption(currentSelectingIndex, flattenedTreeDataKeys, treeNodeMap);
|
|
30
|
+
setNextIndex(nextItemIndex);
|
|
31
|
+
}
|
|
32
|
+
if (e.key === "ArrowUp") {
|
|
33
|
+
if (!isKeyControl) {
|
|
34
|
+
setIsControl(true);
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
const nextItemIndex = getNextOption(currentSelectingIndex, flattenedTreeDataKeys, treeNodeMap, true);
|
|
38
|
+
setNextIndex(nextItemIndex);
|
|
39
|
+
}
|
|
40
|
+
}, [currentSelectingIndex, flattenedTreeDataKeys, isKeyControl, setNextIndex, treeNodeMap]);
|
|
41
|
+
const handleSearch = useCallback((searchValue) => {
|
|
42
|
+
onSearch == null ? void 0 : onSearch(searchValue);
|
|
43
|
+
setCurrentStartingPosition(0);
|
|
44
|
+
setCurrentSelectingIndex(0);
|
|
45
|
+
}, [onSearch]);
|
|
46
|
+
const handleDropdownVisibleChange = useCallback(() => {
|
|
47
|
+
onDropdownVisibleChange == null ? void 0 : onDropdownVisibleChange();
|
|
48
|
+
setIsControl(false);
|
|
49
|
+
setCurrentSelectingIndex(currentStartingPosition);
|
|
50
|
+
}, [currentStartingPosition, onDropdownVisibleChange, setCurrentSelectingIndex]);
|
|
51
|
+
const handleChange = useCallback((selectedKeys, treeNode) => {
|
|
52
|
+
onChange == null ? void 0 : onChange(selectedKeys, treeNode);
|
|
53
|
+
const lastSelectedKeyIndex = selectedKeys.length - 1;
|
|
54
|
+
if (lastSelectedKeyIndex < 0) {
|
|
55
|
+
setCurrentStartingPosition(0);
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
const lastSelectedKey = selectedKeys[lastSelectedKeyIndex];
|
|
59
|
+
const lastValueOptionIndex = flattenedTreeDataKeys.findIndex((key) => key === lastSelectedKey);
|
|
60
|
+
const newStartingIndex = lastValueOptionIndex === -1 ? 0 : lastValueOptionIndex;
|
|
61
|
+
setCurrentStartingPosition(newStartingIndex);
|
|
62
|
+
}, [flattenedTreeDataKeys, onChange]);
|
|
63
|
+
return {
|
|
64
|
+
currentSelectingIndex,
|
|
65
|
+
isKeyControl,
|
|
66
|
+
onKeyControl,
|
|
67
|
+
handleDropdownVisibleChange,
|
|
68
|
+
handleChange,
|
|
69
|
+
handleSearch,
|
|
70
|
+
getCurrentSelectingKey
|
|
71
|
+
};
|
|
72
|
+
};
|
|
73
|
+
export {
|
|
74
|
+
useKeyControl
|
|
75
|
+
};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { TreeNode } from '../components/TreeSelectOption/TreeSelectOption.types';
|
|
2
|
+
import { NodeData, ShowCheckedStrategyType } from '../TreeSelect.types';
|
|
3
|
+
export declare const useTreeCheckable: (nodeDataMap: Map<string, NodeData>, treeNodeMap: Map<string, TreeNode>, showCheckedStrategy: ShowCheckedStrategyType, isAsyncLoading: boolean, onDeselect?: ((nodeKey: string) => void) | undefined) => {
|
|
4
|
+
checkedKeys: string[];
|
|
5
|
+
onCheckableClick: (nodeKey: string) => void;
|
|
6
|
+
};
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { getAddedParentKeys, isSelectedByChildStrategy, isSelectedByParentAndAllStrategy } from "../TreeSelect.utils.js";
|
|
2
|
+
import { useState, useCallback } from "react";
|
|
3
|
+
const useTreeCheckable = (nodeDataMap, treeNodeMap, showCheckedStrategy, isAsyncLoading, onDeselect) => {
|
|
4
|
+
const [checkedKeys, setCheckedKeys] = useState([]);
|
|
5
|
+
const addNodeKeys = useCallback((key) => {
|
|
6
|
+
if (Array.isArray(key)) {
|
|
7
|
+
setCheckedKeys((prev) => {
|
|
8
|
+
const newValueSet = /* @__PURE__ */ new Set([...prev, ...key]);
|
|
9
|
+
return Array.from(newValueSet);
|
|
10
|
+
});
|
|
11
|
+
return;
|
|
12
|
+
}
|
|
13
|
+
setCheckedKeys((prev) => [...prev, key]);
|
|
14
|
+
}, []);
|
|
15
|
+
const deleteNodeKeys = useCallback((removeKey) => {
|
|
16
|
+
if (Array.isArray(removeKey)) {
|
|
17
|
+
setCheckedKeys((prev) => prev.filter((value) => !removeKey.includes(value)));
|
|
18
|
+
return;
|
|
19
|
+
}
|
|
20
|
+
setCheckedKeys((prev) => prev.filter((key) => key !== removeKey));
|
|
21
|
+
onDeselect == null ? void 0 : onDeselect(removeKey);
|
|
22
|
+
}, [onDeselect]);
|
|
23
|
+
const removeNodes = useCallback((nodeData) => {
|
|
24
|
+
const removedNodeKeys = [...nodeData.childrenKeys, nodeData.key, ...nodeData.parentKeys];
|
|
25
|
+
deleteNodeKeys(removedNodeKeys);
|
|
26
|
+
}, [deleteNodeKeys]);
|
|
27
|
+
const addNodes = useCallback((nodeData) => {
|
|
28
|
+
const addedParentKeys = getAddedParentKeys(nodeData.parentKey, nodeData, nodeDataMap, checkedKeys);
|
|
29
|
+
addNodeKeys([...addedParentKeys, nodeData.key, ...nodeData.childrenKeys]);
|
|
30
|
+
}, [addNodeKeys, checkedKeys, nodeDataMap]);
|
|
31
|
+
const handleCheckableClick = useCallback((nodeKey) => {
|
|
32
|
+
const node = treeNodeMap.get(nodeKey);
|
|
33
|
+
const nodeData = nodeDataMap.get(nodeKey);
|
|
34
|
+
if (!nodeData || !node) {
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
const {
|
|
38
|
+
leaf,
|
|
39
|
+
children
|
|
40
|
+
} = node;
|
|
41
|
+
const isLastNode = leaf || !children || (children == null ? void 0 : children.length) === 0 && !isAsyncLoading;
|
|
42
|
+
const selected = showCheckedStrategy === "child" ? isSelectedByChildStrategy(node, checkedKeys, isLastNode) : isSelectedByParentAndAllStrategy(node, checkedKeys);
|
|
43
|
+
if (selected) {
|
|
44
|
+
removeNodes(nodeData);
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
addNodes(nodeData);
|
|
48
|
+
}, [addNodes, checkedKeys, isAsyncLoading, nodeDataMap, removeNodes, showCheckedStrategy, treeNodeMap]);
|
|
49
|
+
return {
|
|
50
|
+
checkedKeys,
|
|
51
|
+
onCheckableClick: handleCheckableClick
|
|
52
|
+
};
|
|
53
|
+
};
|
|
54
|
+
export {
|
|
55
|
+
useTreeCheckable
|
|
56
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { TreeNode } from '../components/TreeSelectOption/TreeSelectOption.types';
|
|
2
|
+
import { NodeData } from '../TreeSelect.types';
|
|
3
|
+
export declare const useNodeDataMap: (treeData: TreeNode[]) => {
|
|
4
|
+
nodeDataMap: Map<string, NodeData>;
|
|
5
|
+
treeNodeMap: Map<string, TreeNode>;
|
|
6
|
+
leafChildrenKeys: string[];
|
|
7
|
+
allParentKeys: string[];
|
|
8
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { useMemo } from "react";
|
|
2
|
+
import { getNodeData, getAllParentKeys, ROOT_NODE } from "../TreeSelect.utils.js";
|
|
3
|
+
const useNodeDataMap = (treeData) => {
|
|
4
|
+
const {
|
|
5
|
+
nodeDataMap,
|
|
6
|
+
treeNodeMap,
|
|
7
|
+
leafChildrenKeys,
|
|
8
|
+
allParentKeys
|
|
9
|
+
} = useMemo(() => {
|
|
10
|
+
const treeNodeMap2 = /* @__PURE__ */ new Map();
|
|
11
|
+
const nodeDataMap2 = /* @__PURE__ */ new Map();
|
|
12
|
+
const leafChildrenKeys2 = treeData.reduce((acc, treeNode) => {
|
|
13
|
+
const nodeData = getNodeData(treeNode, ROOT_NODE, [], nodeDataMap2, treeNodeMap2);
|
|
14
|
+
return [...acc, ...nodeData.leafChildrenKeys];
|
|
15
|
+
}, []);
|
|
16
|
+
const allParentKeys2 = getAllParentKeys(treeData);
|
|
17
|
+
return {
|
|
18
|
+
nodeDataMap: nodeDataMap2,
|
|
19
|
+
treeNodeMap: treeNodeMap2,
|
|
20
|
+
leafChildrenKeys: leafChildrenKeys2,
|
|
21
|
+
allParentKeys: allParentKeys2
|
|
22
|
+
};
|
|
23
|
+
}, [treeData]);
|
|
24
|
+
return {
|
|
25
|
+
nodeDataMap,
|
|
26
|
+
treeNodeMap,
|
|
27
|
+
leafChildrenKeys,
|
|
28
|
+
allParentKeys
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
export {
|
|
32
|
+
useNodeDataMap
|
|
33
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -10,12 +10,11 @@ export { Button } from './components/Button';
|
|
|
10
10
|
export type { ButtonProps } from './components/Button';
|
|
11
11
|
export { Switch } from './components/Switch';
|
|
12
12
|
export type { SwitchProps } from './components/Switch';
|
|
13
|
-
export { Checkbox } from './components/Checkbox';
|
|
14
|
-
export type { CheckboxProps, CheckboxChangeEvent } from './components/Checkbox';
|
|
15
|
-
export type { CheckboxGroupProps } from './components/Checkbox';
|
|
13
|
+
export { Checkbox, isCheckboxChangeEvent } from './components/Checkbox';
|
|
14
|
+
export type { CheckboxProps, CheckboxChangeEvent, CheckboxGroupProps } from './components/Checkbox';
|
|
16
15
|
export { Select } from './components/Select';
|
|
17
16
|
export type { SelectProps } from './components/Select';
|
|
18
|
-
export { type InputProps, Input } from './components/Input';
|
|
17
|
+
export { type TextAreaProps, type TextAreaRef, type InputProps, type InputRef, type PasswordProps, Input, } from './components/Input';
|
|
19
18
|
export { type InputNumberProps, InputNumber, inputNumberWrapperClassName, } from './components/InputNumber';
|
|
20
19
|
export { type RadioChangeEvent, type RadioGroupProps, type RadioProps, Radio, } from './components/Radio';
|
|
21
20
|
export { Alert } from './components/Alert';
|
|
@@ -44,3 +43,5 @@ export { ConfigProvider, useConfig, type Locale } from './components/ConfigProvi
|
|
|
44
43
|
export type { PickerLocale, RangePickerProps } from './components/InternalPicker';
|
|
45
44
|
export { type FormProps, type FormItemProps, Form } from './components/Form';
|
|
46
45
|
export { type PopconfirmProps, Popconfirm } from './components/Popconfirm';
|
|
46
|
+
export { TreeSelect } from './components/TreeSelect';
|
|
47
|
+
export type { TreeSelectProps } from './components/TreeSelect';
|
package/dist/index.js
CHANGED
|
@@ -7,6 +7,7 @@ import { useTheme } from "./hooks/useTheme/useTheme.js";
|
|
|
7
7
|
import { LoadingOutlined } from "./icons/icons/LoadingOutlined.js";
|
|
8
8
|
import { Button } from "./components/Button/Button.js";
|
|
9
9
|
import { Switch } from "./components/Switch/Switch.js";
|
|
10
|
+
import { isCheckboxChangeEvent } from "./components/Checkbox/Checkbox.utils.js";
|
|
10
11
|
import { Select } from "./components/Select/Select.js";
|
|
11
12
|
import { Input } from "./components/Input/Input.js";
|
|
12
13
|
import { InputNumber } from "./components/InputNumber/InputNumber.js";
|
|
@@ -30,6 +31,7 @@ import { ConfigProvider } from "./components/ConfigProvider/ConfigProvider.js";
|
|
|
30
31
|
import { useConfig } from "./components/ConfigProvider/hooks/useConfig/useConfig.js";
|
|
31
32
|
import { Form } from "./components/Form/Form.js";
|
|
32
33
|
import { Popconfirm } from "./components/Popconfirm/Popconfirm.js";
|
|
34
|
+
import { TreeSelect } from "./components/TreeSelect/TreeSelect.js";
|
|
33
35
|
export {
|
|
34
36
|
Alert,
|
|
35
37
|
Avatar,
|
|
@@ -54,9 +56,11 @@ export {
|
|
|
54
56
|
ThemeProvider,
|
|
55
57
|
TimePicker,
|
|
56
58
|
Tooltip,
|
|
59
|
+
TreeSelect,
|
|
57
60
|
Upload,
|
|
58
61
|
avatarColors,
|
|
59
62
|
inputNumberWrapperClassName,
|
|
63
|
+
isCheckboxChangeEvent,
|
|
60
64
|
message,
|
|
61
65
|
messagesHolder,
|
|
62
66
|
themeMap,
|
package/package.json
CHANGED