@rovula/ui 0.0.49 → 0.0.51
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 +3 -0
- package/dist/cjs/bundle.js +3 -3
- package/dist/cjs/bundle.js.map +1 -1
- package/dist/cjs/types/components/Tree/Tree.stories.d.ts +1 -0
- package/dist/cjs/types/components/Tree/type.d.ts +19 -12
- package/dist/components/Tree/Tree.js +8 -6
- package/dist/components/Tree/Tree.stories.js +2094 -1
- package/dist/components/Tree/TreeItem.js +16 -15
- package/dist/esm/bundle.css +3 -0
- 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/esm/types/components/Tree/type.d.ts +19 -12
- package/dist/index.d.ts +19 -12
- package/dist/src/theme/global.css +4 -0
- package/package.json +1 -1
- package/src/components/Tree/Tree.stories.tsx +2168 -1
- package/src/components/Tree/Tree.tsx +17 -6
- package/src/components/Tree/TreeItem.tsx +163 -106
- package/src/components/Tree/type.ts +22 -11
|
@@ -3,7 +3,7 @@ import { ActionButton, Checkbox, Loading } from "@/index";
|
|
|
3
3
|
import { cn } from "@/utils/cn";
|
|
4
4
|
import { useCallback, useEffect, useMemo } from "react";
|
|
5
5
|
import Icon from "../Icon/Icon";
|
|
6
|
-
const TreeItem = ({ id, title, classes, children, isFirstLevel = false, disabled, icon, showIcon, showExpandButton, enableSeparatorLine = true, isLastItem, checkIsExpanded, checkIsChecked, checkIsLoading, onExpandChange, onCheckedChange, onClickItem, renderIcon, renderElement, renderTitle, renderRightSection, }) => {
|
|
6
|
+
const TreeItem = ({ id, title, classes, children, isFirstLevel = false, disabled, icon, showIcon, showExpandButton, enableSeparatorLine = true, isLastItem, checkIsExpanded, checkIsChecked, checkIsLoading, onExpandChange, onCheckedChange, onClickItem, renderIcon, renderElement, renderTitle, renderRightSection, lineSize = 2, horizontalLineWidth = 4, expandButtonSize = 30, spacing = 2, }) => {
|
|
7
7
|
const isLoading = useMemo(() => checkIsLoading === null || checkIsLoading === void 0 ? void 0 : checkIsLoading(id), [checkIsLoading, id]);
|
|
8
8
|
const isChecked = useMemo(() => checkIsChecked(id), [checkIsChecked, id]);
|
|
9
9
|
const isExpanded = useMemo(() => checkIsExpanded(id), [checkIsExpanded, id]);
|
|
@@ -12,26 +12,17 @@ const TreeItem = ({ id, title, classes, children, isFirstLevel = false, disabled
|
|
|
12
12
|
const handleExpandToggle = useCallback(() => {
|
|
13
13
|
onExpandChange === null || onExpandChange === void 0 ? void 0 : onExpandChange(id, !isExpanded);
|
|
14
14
|
}, [id, isExpanded, onExpandChange]);
|
|
15
|
-
|
|
16
|
-
const lineSize = 2;
|
|
17
|
-
const horizontalLineWidth = 4;
|
|
18
|
-
const expandButtonSize = 30;
|
|
19
|
-
const spacing = 2;
|
|
20
|
-
const styles = {
|
|
15
|
+
const styles = useMemo(() => ({
|
|
21
16
|
branch: {
|
|
22
|
-
height: isLastItem
|
|
23
|
-
? `calc(50% + ${lineSize}px)`
|
|
24
|
-
: `calc(100% + ${lineSize}px)`,
|
|
25
17
|
width: lineSize,
|
|
26
|
-
|
|
27
|
-
borderBottomLeftRadius: lineSize / 2,
|
|
18
|
+
borderBottomLeftRadius: isLastItem ? lineSize / 2 : 0,
|
|
28
19
|
},
|
|
29
20
|
horizontalLine: {
|
|
30
21
|
height: lineSize,
|
|
31
22
|
width: lineSize +
|
|
32
23
|
horizontalLineWidth +
|
|
33
24
|
(shouldExpandButton ? 0 : expandButtonSize + spacing),
|
|
34
|
-
marginLeft: -lineSize
|
|
25
|
+
marginLeft: -lineSize,
|
|
35
26
|
borderBottomLeftRadius: lineSize / 2,
|
|
36
27
|
},
|
|
37
28
|
expandButton: {
|
|
@@ -43,7 +34,15 @@ const TreeItem = ({ id, title, classes, children, isFirstLevel = false, disabled
|
|
|
43
34
|
? expandButtonSize / 2 - lineSize / 2
|
|
44
35
|
: expandButtonSize / 2 + horizontalLineWidth - lineSize / 2,
|
|
45
36
|
},
|
|
46
|
-
}
|
|
37
|
+
}), [
|
|
38
|
+
lineSize,
|
|
39
|
+
horizontalLineWidth,
|
|
40
|
+
expandButtonSize,
|
|
41
|
+
spacing,
|
|
42
|
+
isFirstLevel,
|
|
43
|
+
isLastItem,
|
|
44
|
+
shouldExpandButton,
|
|
45
|
+
]);
|
|
47
46
|
useEffect(() => {
|
|
48
47
|
if (isExpanded && !isLoading && !hasChildren) {
|
|
49
48
|
handleExpandToggle();
|
|
@@ -76,6 +75,8 @@ const TreeItem = ({ id, title, classes, children, isFirstLevel = false, disabled
|
|
|
76
75
|
onClick: handleOnClickItem,
|
|
77
76
|
})
|
|
78
77
|
: content;
|
|
79
|
-
return elementWrapper(
|
|
78
|
+
return elementWrapper(_jsx("div", { className: cn("flex flex-row w-full", classes === null || classes === void 0 ? void 0 : classes.elementWrapper), children: _jsxs("div", { className: cn("flex flex-col w-full", classes === null || classes === void 0 ? void 0 : classes.itemWrapper), children: [_jsxs("div", { className: cn("flex flex-row flex-1", classes === null || classes === void 0 ? void 0 : classes.rowWrapperClasses), children: [_jsxs("div", { className: cn("flex flex-col h-full", classes === null || classes === void 0 ? void 0 : classes.columnWrapperClasses), children: [!isFirstLevel && (_jsx("div", { className: cn("flex w-[2px] h-1/2 bg-grey-150", classes === null || classes === void 0 ? void 0 : classes.branch), style: styles.branch })), !isFirstLevel &&
|
|
79
|
+
!isLastItem &&
|
|
80
|
+
((isExpanded && (hasChildren || isLoading)) || !isExpanded) && (_jsx("div", { className: cn("flex w-[2px] h-1/2 bg-grey-150", classes === null || classes === void 0 ? void 0 : classes.branch), style: styles.branch }))] }), _jsxs("div", { className: cn("flex flex-1 items-center py-2 min-h-10", classes === null || classes === void 0 ? void 0 : classes.itemContainer), children: [!isFirstLevel && (_jsx("div", { className: cn("bg-grey-150", classes === null || classes === void 0 ? void 0 : classes.horizontalLine), style: styles.horizontalLine })), isFirstLevel && !shouldExpandButton && (_jsx("div", { className: cn("flex mr-[2px]", classes === null || classes === void 0 ? void 0 : classes.expandButton), style: styles.expandButton })), shouldExpandButton && (_jsx("div", { className: cn("flex mr-[2px]", classes === null || classes === void 0 ? void 0 : classes.expandButton), style: styles.expandButton, onClick: !isLoading && handleExpandToggle, children: _jsx(ActionButton, { variant: "icon", size: "sm", children: isLoading ? (_jsx(Loading, {})) : (_jsx(Icon, { name: isExpanded ? "chevron-down" : "chevron-right" })) }) })), _jsx(Checkbox, { id: id, className: cn("size-[16pt]", classes === null || classes === void 0 ? void 0 : classes.checkbox), checked: isChecked, disabled: disabled, onCheckedChange: (newChecked) => onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(id, newChecked) }), _jsxs("div", { className: cn("ml-2 gap-1 flex flex-1 items-center text-foreground", classes === null || classes === void 0 ? void 0 : classes.item), onClick: handleOnClickItem, children: [showIcon ? customIcon || defaultIcon : null, _jsx("div", { className: cn("flex flex-1 cursor-pointer text-subtitle5 text-ellipsis", classes === null || classes === void 0 ? void 0 : classes.title), children: titleContent })] }), rightIcon] })] }), isExpanded && hasChildren && (_jsxs("div", { className: cn("flex flex-row overflow-hidden max-h-screen", classes === null || classes === void 0 ? void 0 : classes.expandedChildrenWrapper), children: [!isFirstLevel && !isLastItem && (_jsx("div", { className: cn("flex w-[2px] h-full bg-grey-150", classes === null || classes === void 0 ? void 0 : classes.branch), style: styles.branch })), _jsx("div", { className: cn("flex flex-col overflow-hidden max-h-screen", classes === null || classes === void 0 ? void 0 : classes.expandedChildrenWrapperInner), style: styles.childPadding, children: children === null || children === void 0 ? void 0 : children.map((child, idx) => (_jsx(TreeItem, Object.assign({ classes: classes, isLastItem: idx === children.length - 1, checkIsExpanded: checkIsExpanded, checkIsChecked: checkIsChecked, checkIsLoading: checkIsLoading, onExpandChange: onExpandChange, onCheckedChange: onCheckedChange, renderIcon: renderIcon, renderElement: renderElement, renderTitle: renderTitle, disabled: disabled, showIcon: showIcon, lineSize: lineSize, horizontalLineWidth: horizontalLineWidth, expandButtonSize: expandButtonSize, spacing: spacing }, child), child.id))) })] })), enableSeparatorLine && isFirstLevel && !isLastItem && (_jsx("div", { className: cn("bg-grey-150 w-full h-[2px] rounded", classes === null || classes === void 0 ? void 0 : classes.separatorLine) }))] }) }));
|
|
80
81
|
};
|
|
81
82
|
export default TreeItem;
|