@rovula/ui 0.0.52 → 0.0.54

package/src/components/Tree/Tree.tsx

@@ -20,12 +20,16 @@ const Tree: FC<TreeProps> = ({
   renderTitle,
   onExpandChange,
   onCheckedChange,
+  onClickItem,
+  onCheckedItem,
   defaultExpandAll = false,
   defaultCheckAll = false,
   hierarchicalCheck = false,
   showIcon = true,
   disabled,
   enableSeparatorLine = true,
+  checkable = true,
+  maxLevel,
 }) => {
   const [checkedState, setCheckedState] = useState<Record<string, boolean>>({});
   const [expandedState, setExpandedState] = useState<Record<string, boolean>>(
@@ -89,6 +93,7 @@ const Tree: FC<TreeProps> = ({
 
   const handleCheckedChange = useCallback(
     (id: string, checked: boolean) => {
+      onCheckedItem?.(id, checked);
       let newState = { ...checkedState, [id]: checked };
 
       if (hierarchicalCheck) {
@@ -139,11 +144,10 @@ const Tree: FC<TreeProps> = ({
       setCheckedState(newState);
 
       if (onCheckedChange) {
-        const checkedIds = Object.keys(newState).filter((key) => newState[key]);
-        onCheckedChange(checkedIds);
+        onCheckedChange?.(newState);
       }
     },
-    [checkedState, data, onCheckedChange, hierarchicalCheck]
+    [checkedState, data, onCheckedChange, hierarchicalCheck, onCheckedItem]
   );
 
   const checkIsExpanded = useCallback(
@@ -194,6 +198,10 @@ const Tree: FC<TreeProps> = ({
           horizontalLineWidth={horizontalLineWidth}
           expandButtonSize={expandButtonSize}
           spacing={spacing}
+          notifyClickItem={onClickItem}
+          maxLevel={maxLevel}
+          currentLevel={1}
+          checkable={checkable}
           {...item}
         />
       ))}

package/src/components/Tree/TreeItem.tsx

@@ -10,12 +10,14 @@ const TreeItem: FC<TreeItemProps> = ({
   classes,
   children,
   isFirstLevel = false,
+  isLeaf = false,
   disabled,
   icon,
   showIcon,
   showExpandButton,
   enableSeparatorLine = true,
   isLastItem,
+  checkable,
   checkIsExpanded,
   checkIsChecked,
   checkIsLoading,
@@ -30,19 +32,26 @@ const TreeItem: FC<TreeItemProps> = ({
   horizontalLineWidth = 4,
   expandButtonSize = 30,
   spacing = 2,
+  currentLevel = 1,
+  maxLevel = 10,
+  notifyClickItem,
 }) => {
   const isLoading = useMemo(() => checkIsLoading?.(id), [checkIsLoading, id]);
   const isChecked = useMemo(() => checkIsChecked(id), [checkIsChecked, id]);
   const isExpanded = useMemo(() => checkIsExpanded(id), [checkIsExpanded, id]);
   const hasChildren = useMemo(() => !!children?.length, [children]);
   const shouldExpandButton = useMemo(
-    () => (showExpandButton !== undefined ? showExpandButton : hasChildren),
-    [hasChildren, showExpandButton]
+    () =>
+      (showExpandButton !== undefined ? showExpandButton : hasChildren) &&
+      currentLevel < (maxLevel || Infinity),
+    [hasChildren, showExpandButton, maxLevel, currentLevel]
+  );
+  const shouldShowCheckbox = useMemo(
+    () => (!checkable ? false : !isLeaf),
+    [checkable, isLeaf]
   );
 
-  const handleExpandToggle = useCallback(() => {
-    onExpandChange?.(id, !isExpanded);
-  }, [id, isExpanded, onExpandChange]);
+  const checkboxSpace = isLeaf ? 21.328 : 0;
 
   const styles = useMemo(
     () => ({
@@ -55,7 +64,8 @@ const TreeItem: FC<TreeItemProps> = ({
         width:
           lineSize +
           horizontalLineWidth +
-          (shouldExpandButton ? 0 : expandButtonSize + spacing),
+          (shouldExpandButton ? 0 : expandButtonSize + spacing) +
+          checkboxSpace,
         marginLeft: -lineSize,
         borderBottomLeftRadius: lineSize / 2,
       },
@@ -77,9 +87,14 @@ const TreeItem: FC<TreeItemProps> = ({
       isFirstLevel,
       isLastItem,
       shouldExpandButton,
+      checkboxSpace,
     ]
   );
 
+  const handleExpandToggle = useCallback(() => {
+    onExpandChange?.(id, !isExpanded);
+  }, [id, isExpanded, onExpandChange]);
+
   useEffect(() => {
     if (isExpanded && !isLoading && !hasChildren) {
       handleExpandToggle();
@@ -88,7 +103,8 @@ const TreeItem: FC<TreeItemProps> = ({
 
   const handleOnClickItem = useCallback(() => {
     onClickItem?.(id);
-  }, [onClickItem, id]);
+    notifyClickItem?.(id);
+  }, [onClickItem, notifyClickItem, id]);
 
   const defaultIcon = (
     <Icon
@@ -194,15 +210,25 @@ const TreeItem: FC<TreeItemProps> = ({
                 </ActionButton>
               </div>
             )}
-            <Checkbox
-              id={id}
-              className={cn("size-[16pt]", classes?.checkbox)}
-              checked={isChecked}
-              disabled={disabled}
-              onCheckedChange={(newChecked) =>
-                onCheckedChange?.(id, newChecked as boolean)
-              }
-            />
+            {shouldShowCheckbox ? (
+              <Checkbox
+                id={id}
+                className={cn("size-[16pt]", classes?.checkbox)}
+                checked={isChecked}
+                disabled={disabled}
+                onCheckedChange={(newChecked) =>
+                  onCheckedChange?.(id, newChecked as boolean)
+                }
+              />
+            ) : (
+              <div
+                className={
+                  isFirstLevel && checkable
+                    ? cn("size-[16pt]", classes?.checkbox)
+                    : ""
+                }
+              />
+            )}
             <div
               className={cn(
                 "ml-2 gap-1 flex flex-1 items-center text-foreground",
@@ -224,7 +250,7 @@ const TreeItem: FC<TreeItemProps> = ({
           </div>
         </div>
 
-        {isExpanded && hasChildren && (
+        {isExpanded && hasChildren && currentLevel < (maxLevel || Infinity) && (
           <div
             className={cn(
               "flex flex-row overflow-hidden max-h-screen",
@@ -266,6 +292,10 @@ const TreeItem: FC<TreeItemProps> = ({
                   horizontalLineWidth={horizontalLineWidth}
                   expandButtonSize={expandButtonSize}
                   spacing={spacing}
+                  notifyClickItem={notifyClickItem}
+                  maxLevel={maxLevel}
+                  currentLevel={currentLevel + 1}
+                  checkable={checkable}
                   {...child}
                 />
               ))}