@fe-free/core 2.8.0 → 2.8.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @fe-free/core
 
+## 2.8.2
+
+### Patch Changes
+
+- fix: tree
+  - @fe-free/tool@2.8.2
+
+## 2.8.1
+
+### Patch Changes
+
+- fix: tree
+  - @fe-free/tool@2.8.1
+
 ## 2.8.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "2.8.0",
+  "version": "2.8.2",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -41,7 +41,7 @@
     "remark-gfm": "^4.0.1",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "2.8.0"
+    "@fe-free/tool": "2.8.2"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "2.8.9",

package/src/tree/file_tree.stories.tsx

@@ -92,8 +92,30 @@ export const Default: Story = {
           key: '4',
           children: [],
         },
+        {
+          title: 'more operateIsDisabled',
+          key: '5',
+          children: [],
+        },
+        {
+          title: 'more operateIsHidden',
+          key: '6',
+          children: [],
+        },
       ],
     },
+    createProps: {
+      operateIsDisabled: (nodeData) => nodeData?.key === '5',
+      operateIsHidden: (nodeData) => nodeData?.key === '6',
+    },
+    updateProps: {
+      operateIsDisabled: (nodeData) => nodeData.key === '5',
+      operateIsHidden: (nodeData) => nodeData.key === '6',
+    },
+    deleteProps: {
+      operateIsDisabled: (nodeData) => nodeData.key === '5',
+      operateIsHidden: (nodeData) => nodeData.key === '6',
+    },
   },
 };
 

package/src/tree/file_tree.tsx

@@ -16,6 +16,20 @@ interface FileTreeProps<D extends DataNode> extends TreeProps<D> {
   requestCreateByValues?: (values: { key?: string; title: string }) => Promise<false | void>;
   requestUpdateByValues?: (values: { key: string; title: string }) => Promise<false | void>;
   requestDeleteByRecord?: (values: { key: string }) => Promise<void>;
+  /** 注意，没法控制 title 区域的添加（由 actions 来控制） */
+  createProps?: {
+    operateIsDisabled?: (nodeData: D) => boolean;
+
+    operateIsHidden?: (nodeData: D) => boolean;
+  };
+  updateProps?: {
+    operateIsDisabled?: (nodeData: D) => boolean;
+    operateIsHidden?: (nodeData: D) => boolean;
+  };
+  deleteProps?: {
+    operateIsDisabled?: (nodeData: D) => boolean;
+    operateIsHidden?: (nodeData: D) => boolean;
+  };
 }
 
 function Detail<D extends DataNode>({
@@ -77,44 +91,69 @@ function More({
   requestUpdateByValues,
   requestDeleteByRecord,
   requestCreateByValues,
+  createProps,
+  updateProps,
+  deleteProps,
 }) {
+  const isCreateDisabled = createProps?.operateIsDisabled?.(nodeData);
+  const isCreateHidden = createProps?.operateIsHidden?.(nodeData);
+  const isUpdateDisabled = updateProps?.operateIsDisabled?.(nodeData);
+  const isUpdateHidden = updateProps?.operateIsHidden?.(nodeData);
+  const isDeleteDisabled = deleteProps?.operateIsDisabled?.(nodeData);
+  const isDeleteHidden = deleteProps?.operateIsHidden?.(nodeData);
+
+  const menuItems = [
+    actions?.includes('create') &&
+      !isCreateHidden && {
+        label: isCreateDisabled ? (
+          <div className="cursor-not-allowed text-desc">新建子目录</div>
+        ) : (
+          <Detail
+            action="create"
+            nodeData={{ key: nodeData.key }}
+            requestCreateByValues={(values) => requestCreateByValues?.({ ...values })}
+            trigger={<div>新建子目录</div>}
+          />
+        ),
+        key: 'create',
+      },
+    actions?.includes('update') &&
+      !isUpdateHidden && {
+        label: isUpdateDisabled ? (
+          <div className="cursor-not-allowed text-desc">编辑</div>
+        ) : (
+          <Detail
+            action="update"
+            nodeData={nodeData}
+            requestUpdateByValues={(values) => requestUpdateByValues?.({ ...values })}
+            trigger={<div>编辑</div>}
+          />
+        ),
+        key: 'update',
+      },
+    actions?.includes('delete') &&
+      !isDeleteHidden && {
+        label: isDeleteDisabled ? (
+          <div className="cursor-not-allowed text-desc">删除</div>
+        ) : (
+          <OperateDelete
+            name={nodeData.title}
+            onDelete={() => requestDeleteByRecord?.({ key: nodeData.key })}
+          />
+        ),
+        key: 'delete',
+      },
+  ].filter(Boolean);
+
+  if (menuItems.length === 0) {
+    return null;
+  }
+
   return (
     <Dropdown
       placement="bottomRight"
       menu={{
-        items: [
-          actions?.includes('create') && {
-            label: (
-              <Detail
-                action="create"
-                nodeData={{ key: nodeData.key }}
-                requestCreateByValues={(values) => requestCreateByValues?.({ ...values })}
-                trigger={<div>新建子目录</div>}
-              />
-            ),
-            key: 'create',
-          },
-          actions?.includes('update') && {
-            label: (
-              <Detail
-                action="update"
-                nodeData={nodeData}
-                requestUpdateByValues={(values) => requestUpdateByValues?.({ ...values })}
-                trigger={<div>编辑</div>}
-              />
-            ),
-            key: 'update',
-          },
-          actions?.includes('delete') && {
-            label: (
-              <OperateDelete
-                name={nodeData.title}
-                onDelete={() => requestDeleteByRecord?.({ key: nodeData.key })}
-              />
-            ),
-            key: 'delete',
-          },
-        ].filter(Boolean),
+        items: menuItems,
       }}
     >
       <div onClick={(e) => e.preventDefault()}>
@@ -141,14 +180,16 @@ function FileTree<D extends DataNode>(props: FileTreeProps<D>) {
 
   const titleRender = useCallback(
     (nodeData) => {
-      console.log(nodeData);
       const hasMore = props.actions?.includes('update') || props.actions?.includes('delete');
       return (
         <div className="group flex gap-1">
           {nodeData.children ? (
             <FileCard.FileIcon isDirectory className="text-base" />
           ) : (
-            <FileCard.FileIcon name={nodeData.title} className="text-base" />
+            <FileCard.FileIcon
+              name={nodeData.originData?.title || nodeData.title}
+              className="text-base"
+            />
           )}
           <div className="flex-1 truncate">{nodeData.title}</div>
           <div className={classNames('text-desc', { 'group-hover:hidden': hasMore })}>
@@ -162,6 +203,9 @@ function FileTree<D extends DataNode>(props: FileTreeProps<D>) {
                 requestCreateByValues={props.requestCreateByValues}
                 requestUpdateByValues={props.requestUpdateByValues}
                 requestDeleteByRecord={props.requestDeleteByRecord}
+                createProps={props.createProps}
+                updateProps={props.updateProps}
+                deleteProps={props.deleteProps}
               />
             </div>
           )}
@@ -173,6 +217,9 @@ function FileTree<D extends DataNode>(props: FileTreeProps<D>) {
       props.requestCreateByValues,
       props.requestDeleteByRecord,
       props.requestUpdateByValues,
+      props.createProps,
+      props.updateProps,
+      props.deleteProps,
     ],
   );
 

package/src/tree/tree.tsx

@@ -30,10 +30,10 @@ function useHighLightTreeData({ treeData, search }) {
 
     const loop = (data) => {
       return data.map((item) => {
-        const strTitle = item.title as string;
-        const index = strTitle.indexOf(search);
-        const beforeStr = strTitle.substring(0, index);
-        const afterStr = strTitle.slice(index + search.length);
+        const originStrTitle = item.title as string;
+        const index = originStrTitle.indexOf(search);
+        const beforeStr = originStrTitle.substring(0, index);
+        const afterStr = originStrTitle.slice(index + search.length);
         const title =
           index > -1 ? (
             <span key={item.key}>
@@ -42,7 +42,7 @@ function useHighLightTreeData({ treeData, search }) {
               {afterStr}
             </span>
           ) : (
-            <span key={item.key}>{strTitle}</span>
+            <span key={item.key}>{originStrTitle}</span>
           );
 
         if (item.children) {
@@ -52,6 +52,7 @@ function useHighLightTreeData({ treeData, search }) {
         return {
           ...item,
           title,
+          originData: item,
         };
       });
     };
@@ -76,21 +77,23 @@ function useFilterTreeData({ treeData, search }) {
 
     // 递归过滤树形数据
     const filterTree = (nodes) => {
+      // 返回自己。 而非 [] undefined，因为要保留原数据格式。
       if (!nodes || nodes.length === 0) {
-        return [];
+        return nodes;
       }
 
       return nodes
         .map((node) => {
-          const children = node.children ? filterTree(node.children) : [];
           const isMatch = isNodeMatch(node);
-          const hasMatchingChildren = children.length > 0;
+
+          const children = filterTree(node.children);
+          const hasMatchingChildren = children?.length > 0;
 
           // 如果当前节点匹配或者有匹配的子节点，则保留该节点
           if (isMatch || hasMatchingChildren) {
             return {
               ...node,
-              children: hasMatchingChildren ? children : undefined,
+              children,
             };
           }
 
@@ -105,7 +108,11 @@ function useFilterTreeData({ treeData, search }) {
 
 function useIsAllLeaf(treeData?: DataNode[]) {
   return useMemo(() => {
-    return treeData?.every((item) => item.children === undefined) || true;
+    if (treeData) {
+      return !treeData.find((item) => item.children);
+    }
+
+    return true;
   }, [treeData]);
 }