@rovula/ui 0.0.49 → 0.0.51

package/src/components/Tree/Tree.tsx

@@ -5,10 +5,14 @@ import { TreeData, TreeProps } from "./type";
 const Tree: FC<TreeProps> = ({
   classes,
   data,
-  defaultExpandedId = [],
-  defaultCheckedId = [],
+  defaultExpandedId,
+  defaultCheckedId,
   checkedId,
   loadingId,
+  lineSize,
+  horizontalLineWidth,
+  expandButtonSize,
+  spacing,
   renderIcon,
   renderRightSection,
   renderElement,
@@ -40,7 +44,7 @@ const Tree: FC<TreeProps> = ({
   };
 
   useEffect(() => {
-    if (defaultExpandAll) {
+    if (data.length && defaultExpandAll) {
       const allExpanded: Record<string, boolean> = {};
       traverseTree(data, (node) => {
         allExpanded[node.id] = true;
@@ -56,20 +60,23 @@ const Tree: FC<TreeProps> = ({
   }, [data, defaultExpandedId, defaultExpandAll]);
 
   useEffect(() => {
-    if (defaultCheckAll) {
+    if (data.length && defaultCheckAll) {
       const allChecked: Record<string, boolean> = {};
       traverseTree(data, (node) => {
         allChecked[node.id] = true;
       });
       setCheckedState(allChecked);
-    } else if (!checkedId && defaultCheckedId?.length) {
+    } else if (
+      Object.keys(checkedState)?.length === 0 &&
+      defaultCheckedId?.length
+    ) {
       const initialCheckedState = defaultCheckedId.reduce((acc, id) => {
         acc[id] = true;
         return acc;
       }, {} as Record<string, boolean>);
       setCheckedState(initialCheckedState);
     }
-  }, [data, defaultCheckedId, checkedId, defaultCheckAll]);
+  }, [data, defaultCheckedId, defaultCheckAll]);
 
   const handleExpandChange = useCallback(
     (id: string, expanded: boolean) => {
@@ -182,6 +189,10 @@ const Tree: FC<TreeProps> = ({
           enableSeparatorLine={enableSeparatorLine}
           disabled={disabled}
           showIcon={showIcon}
+          lineSize={lineSize}
+          horizontalLineWidth={horizontalLineWidth}
+          expandButtonSize={expandButtonSize}
+          spacing={spacing}
           {...item}
         />
       ))}

package/src/components/Tree/TreeItem.tsx

@@ -26,6 +26,10 @@ const TreeItem: FC<TreeItemProps> = ({
   renderElement,
   renderTitle,
   renderRightSection,
+  lineSize = 2,
+  horizontalLineWidth = 4,
+  expandButtonSize = 30,
+  spacing = 2,
 }) => {
   const isLoading = useMemo(() => checkIsLoading?.(id), [checkIsLoading, id]);
   const isChecked = useMemo(() => checkIsChecked(id), [checkIsChecked, id]);
@@ -40,40 +44,41 @@ const TreeItem: FC<TreeItemProps> = ({
     onExpandChange?.(id, !isExpanded);
   }, [id, isExpanded, onExpandChange]);
 
-  // TODO move to props
-  const lineSize = 2;
-  const horizontalLineWidth = 4;
-  const expandButtonSize = 30;
-  const spacing = 2;
-
-  const styles = {
-    branch: {
-      height: isLastItem
-        ? `calc(50% + ${lineSize}px)`
-        : `calc(100% + ${lineSize}px)`,
-      width: lineSize,
-      marginTop: -lineSize,
-      borderBottomLeftRadius: lineSize / 2,
-    },
-    horizontalLine: {
-      height: lineSize,
-      width:
-        lineSize +
-        horizontalLineWidth +
-        (shouldExpandButton ? 0 : expandButtonSize + spacing),
-      marginLeft: -lineSize + 0.1,
-      borderBottomLeftRadius: lineSize / 2,
-    },
-    expandButton: {
-      width: expandButtonSize,
-      height: expandButtonSize,
-    },
-    childPadding: {
-      paddingLeft: isFirstLevel
-        ? expandButtonSize / 2 - lineSize / 2
-        : expandButtonSize / 2 + horizontalLineWidth - lineSize / 2,
-    },
-  };
+  const styles = useMemo(
+    () => ({
+      branch: {
+        width: lineSize,
+        borderBottomLeftRadius: isLastItem ? lineSize / 2 : 0,
+      },
+      horizontalLine: {
+        height: lineSize,
+        width:
+          lineSize +
+          horizontalLineWidth +
+          (shouldExpandButton ? 0 : expandButtonSize + spacing),
+        marginLeft: -lineSize,
+        borderBottomLeftRadius: lineSize / 2,
+      },
+      expandButton: {
+        width: expandButtonSize,
+        height: expandButtonSize,
+      },
+      childPadding: {
+        paddingLeft: isFirstLevel
+          ? expandButtonSize / 2 - lineSize / 2
+          : expandButtonSize / 2 + horizontalLineWidth - lineSize / 2,
+      },
+    }),
+    [
+      lineSize,
+      horizontalLineWidth,
+      expandButtonSize,
+      spacing,
+      isFirstLevel,
+      isLastItem,
+      shouldExpandButton,
+    ]
+  );
 
   useEffect(() => {
     if (isExpanded && !isLoading && !hasChildren) {
@@ -124,95 +129,147 @@ const TreeItem: FC<TreeItemProps> = ({
 
   return elementWrapper(
     <div className={cn("flex flex-row w-full", classes?.elementWrapper)}>
-      <div
-        className={cn("bg-grey-150", { "h-1/2": isLastItem }, classes?.branch)}
-        style={styles.branch}
-      />
       <div className={cn("flex flex-col w-full", classes?.itemWrapper)}>
-        <div
-          className={cn(
-            "flex items-center py-2 min-h-10",
-            classes?.itemContainer
-          )}
-        >
-          {!isFirstLevel && (
-            <div
-              className={cn("bg-grey-150", classes?.horizontalLine)}
-              style={styles.horizontalLine}
-            />
-          )}
-          {isFirstLevel && !shouldExpandButton && (
-            <div
-              className={cn("flex mr-[2px]", classes?.expandButton)}
-              style={styles.expandButton}
-            />
-          )}
-          {shouldExpandButton && (
-            <div
-              className={cn("flex mr-[2px]", classes?.expandButton)}
-              style={styles.expandButton}
-              onClick={!isLoading && handleExpandToggle}
-            >
-              <ActionButton variant="icon" size="sm">
-                {isLoading ? (
-                  <Loading />
-                ) : (
-                  <Icon name={isExpanded ? "chevron-down" : "chevron-right"} />
+        <div className={cn("flex flex-row flex-1", classes?.rowWrapperClasses)}>
+          <div
+            className={cn(
+              "flex flex-col h-full",
+              classes?.columnWrapperClasses
+            )}
+          >
+            {!isFirstLevel && (
+              <div
+                className={cn(
+                  "flex w-[2px] h-1/2 bg-grey-150",
+                  classes?.branch
                 )}
-              </ActionButton>
-            </div>
-          )}
-          <Checkbox
-            id={id}
-            className={cn("size-[16pt]", classes?.checkbox)}
-            checked={isChecked}
-            disabled={disabled}
-            onCheckedChange={(newChecked) =>
-              onCheckedChange?.(id, newChecked as boolean)
-            }
-          />
+                style={styles.branch}
+              />
+            )}
+            {!isFirstLevel &&
+              !isLastItem &&
+              ((isExpanded && (hasChildren || isLoading)) || !isExpanded) && (
+                <div
+                  className={cn(
+                    "flex w-[2px] h-1/2 bg-grey-150",
+                    classes?.branch
+                  )}
+                  style={styles.branch}
+                />
+              )}
+          </div>
+
           <div
             className={cn(
-              "ml-2 gap-1 flex flex-1 items-center text-foreground",
-              classes?.item
+              "flex flex-1 items-center py-2 min-h-10",
+              classes?.itemContainer
             )}
-            onClick={handleOnClickItem}
           >
-            {showIcon ? customIcon || defaultIcon : null}
+            {!isFirstLevel && (
+              <div
+                className={cn("bg-grey-150", classes?.horizontalLine)}
+                style={styles.horizontalLine}
+              />
+            )}
+            {isFirstLevel && !shouldExpandButton && (
+              <div
+                className={cn("flex mr-[2px]", classes?.expandButton)}
+                style={styles.expandButton}
+              />
+            )}
+            {shouldExpandButton && (
+              <div
+                className={cn("flex mr-[2px]", classes?.expandButton)}
+                style={styles.expandButton}
+                onClick={!isLoading && handleExpandToggle}
+              >
+                <ActionButton variant="icon" size="sm">
+                  {isLoading ? (
+                    <Loading />
+                  ) : (
+                    <Icon
+                      name={isExpanded ? "chevron-down" : "chevron-right"}
+                    />
+                  )}
+                </ActionButton>
+              </div>
+            )}
+            <Checkbox
+              id={id}
+              className={cn("size-[16pt]", classes?.checkbox)}
+              checked={isChecked}
+              disabled={disabled}
+              onCheckedChange={(newChecked) =>
+                onCheckedChange?.(id, newChecked as boolean)
+              }
+            />
             <div
               className={cn(
-                "flex flex-1 cursor-pointer text-subtitle5 text-ellipsis",
-                classes?.title
+                "ml-2 gap-1 flex flex-1 items-center text-foreground",
+                classes?.item
               )}
+              onClick={handleOnClickItem}
             >
-              {titleContent}
+              {showIcon ? customIcon || defaultIcon : null}
+              <div
+                className={cn(
+                  "flex flex-1 cursor-pointer text-subtitle5 text-ellipsis",
+                  classes?.title
+                )}
+              >
+                {titleContent}
+              </div>
             </div>
+            {rightIcon}
           </div>
-          {rightIcon}
         </div>
+
         {isExpanded && hasChildren && (
           <div
-            className={cn("flex flex-col", classes?.childrenWrapper)}
-            style={styles.childPadding}
+            className={cn(
+              "flex flex-row overflow-hidden max-h-screen",
+              classes?.expandedChildrenWrapper
+            )}
           >
-            {children?.map((child, idx) => (
-              <TreeItem
-                key={child.id}
-                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}
-                {...child}
+            {!isFirstLevel && !isLastItem && (
+              <div
+                className={cn(
+                  "flex w-[2px] h-full bg-grey-150",
+                  classes?.branch
+                )}
+                style={styles.branch}
               />
-            ))}
+            )}
+            <div
+              className={cn(
+                "flex flex-col overflow-hidden max-h-screen",
+                classes?.expandedChildrenWrapperInner
+              )}
+              style={styles.childPadding}
+            >
+              {children?.map((child, idx) => (
+                <TreeItem
+                  key={child.id}
+                  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}
+                />
+              ))}
+            </div>
           </div>
         )}
         {enableSeparatorLine && isFirstLevel && !isLastItem && (

package/src/components/Tree/type.ts

@@ -21,6 +21,10 @@ export interface TreeItemProps extends TreeData {
   showIcon?: boolean;
   showExpandButton?: boolean;
   enableSeparatorLine?: boolean;
+  lineSize?: number;
+  horizontalLineWidth?: number;
+  expandButtonSize?: number;
+  spacing?: number;
   checkIsExpanded: (id: string) => boolean;
   checkIsChecked: (id: string) => boolean;
   checkIsLoading?: (id: string) => void;
@@ -51,17 +55,20 @@ export interface TreeItemProps extends TreeData {
     selected: boolean;
   }) => ReactNode;
   classes?: Partial<{
-    elementWrapper: string;
-    branch: string;
-    itemWrapper: string;
-    itemContainer: string;
-    horizontalLine: string;
-    expandButton: string;
-    separatorLine: string;
-    checkbox: string;
-    item: string;
-    title: string;
-    childrenWrapper: string;
+    elementWrapper?: string;
+    branch?: string;
+    itemWrapper?: string;
+    itemContainer?: string;
+    horizontalLine?: string;
+    expandButton?: string;
+    separatorLine?: string;
+    checkbox?: string;
+    item?: string;
+    title?: string;
+    expandedChildrenWrapper?: string;
+    expandedChildrenWrapperInner?: string;
+    rowWrapperClasses?: string;
+    columnWrapperClasses?: string;
   }>;
 }
 
@@ -76,6 +83,10 @@ export interface TreeProps
     | "disabled"
     | "enableSeparatorLine"
     | "classes"
+    | "lineSize"
+    | "horizontalLineWidth"
+    | "expandButtonSize"
+    | "spacing"
   > {
   data: TreeData[];
   defaultExpandedId?: string[];