@rovula/ui 0.0.49 → 0.0.50
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/cjs/bundle.css +0 -3
- package/dist/cjs/bundle.js +1 -1
- package/dist/cjs/bundle.js.map +1 -1
- package/dist/cjs/types/components/Tree/Tree.stories.d.ts +1 -0
- package/dist/components/Tree/Tree.js +7 -5
- package/dist/components/Tree/Tree.stories.js +2094 -1
- package/dist/components/Tree/TreeItem.js +2 -2
- package/dist/esm/bundle.css +0 -3
- package/dist/esm/bundle.js +1 -1
- package/dist/esm/bundle.js.map +1 -1
- package/dist/esm/types/components/Tree/Tree.stories.d.ts +1 -0
- package/dist/src/theme/global.css +0 -4
- package/package.json +1 -1
- package/src/components/Tree/Tree.stories.tsx +2168 -1
- package/src/components/Tree/Tree.tsx +9 -6
- package/src/components/Tree/TreeItem.tsx +6 -5
|
@@ -5,8 +5,8 @@ import { TreeData, TreeProps } from "./type";
|
|
|
5
5
|
const Tree: FC<TreeProps> = ({
|
|
6
6
|
classes,
|
|
7
7
|
data,
|
|
8
|
-
defaultExpandedId
|
|
9
|
-
defaultCheckedId
|
|
8
|
+
defaultExpandedId,
|
|
9
|
+
defaultCheckedId,
|
|
10
10
|
checkedId,
|
|
11
11
|
loadingId,
|
|
12
12
|
renderIcon,
|
|
@@ -40,7 +40,7 @@ const Tree: FC<TreeProps> = ({
|
|
|
40
40
|
};
|
|
41
41
|
|
|
42
42
|
useEffect(() => {
|
|
43
|
-
if (defaultExpandAll) {
|
|
43
|
+
if (data.length && defaultExpandAll) {
|
|
44
44
|
const allExpanded: Record<string, boolean> = {};
|
|
45
45
|
traverseTree(data, (node) => {
|
|
46
46
|
allExpanded[node.id] = true;
|
|
@@ -56,20 +56,23 @@ const Tree: FC<TreeProps> = ({
|
|
|
56
56
|
}, [data, defaultExpandedId, defaultExpandAll]);
|
|
57
57
|
|
|
58
58
|
useEffect(() => {
|
|
59
|
-
if (defaultCheckAll) {
|
|
59
|
+
if (data.length && defaultCheckAll) {
|
|
60
60
|
const allChecked: Record<string, boolean> = {};
|
|
61
61
|
traverseTree(data, (node) => {
|
|
62
62
|
allChecked[node.id] = true;
|
|
63
63
|
});
|
|
64
64
|
setCheckedState(allChecked);
|
|
65
|
-
} else if (
|
|
65
|
+
} else if (
|
|
66
|
+
Object.keys(checkedState)?.length === 0 &&
|
|
67
|
+
defaultCheckedId?.length
|
|
68
|
+
) {
|
|
66
69
|
const initialCheckedState = defaultCheckedId.reduce((acc, id) => {
|
|
67
70
|
acc[id] = true;
|
|
68
71
|
return acc;
|
|
69
72
|
}, {} as Record<string, boolean>);
|
|
70
73
|
setCheckedState(initialCheckedState);
|
|
71
74
|
}
|
|
72
|
-
}, [data, defaultCheckedId,
|
|
75
|
+
}, [data, defaultCheckedId, defaultCheckAll]);
|
|
73
76
|
|
|
74
77
|
const handleExpandChange = useCallback(
|
|
75
78
|
(id: string, expanded: boolean) => {
|
|
@@ -48,9 +48,10 @@ const TreeItem: FC<TreeItemProps> = ({
|
|
|
48
48
|
|
|
49
49
|
const styles = {
|
|
50
50
|
branch: {
|
|
51
|
-
height:
|
|
52
|
-
|
|
53
|
-
|
|
51
|
+
height:
|
|
52
|
+
isLastItem && !(isExpanded && hasChildren)
|
|
53
|
+
? `calc(50% + ${lineSize}px)`
|
|
54
|
+
: `calc(100% + ${lineSize}px)`,
|
|
54
55
|
width: lineSize,
|
|
55
56
|
marginTop: -lineSize,
|
|
56
57
|
borderBottomLeftRadius: lineSize / 2,
|
|
@@ -123,9 +124,9 @@ const TreeItem: FC<TreeItemProps> = ({
|
|
|
123
124
|
: content;
|
|
124
125
|
|
|
125
126
|
return elementWrapper(
|
|
126
|
-
<div className={cn("flex flex-row w-full", classes?.elementWrapper)}>
|
|
127
|
+
<div className={cn("flex flex-row w-full ", classes?.elementWrapper)}>
|
|
127
128
|
<div
|
|
128
|
-
className={cn("bg-grey-150",
|
|
129
|
+
className={cn("bg-grey-150", classes?.branch)}
|
|
129
130
|
style={styles.branch}
|
|
130
131
|
/>
|
|
131
132
|
<div className={cn("flex flex-col w-full", classes?.itemWrapper)}>
|