@fe-free/core 3.0.3 → 3.0.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @fe-free/core
 
+## 3.0.5
+
+### Patch Changes
+
+- feat: tree
+  - @fe-free/tool@3.0.5
+
+## 3.0.4
+
+### Patch Changes
+
+- feat: file tree
+  - @fe-free/tool@3.0.4
+
 ## 3.0.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "3.0.3",
+  "version": "3.0.5",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -41,7 +41,7 @@
     "safe-stable-stringify": "^2.5.0",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "3.0.3"
+    "@fe-free/tool": "3.0.5"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "2.8.9",

package/src/file/helper.tsx

@@ -99,7 +99,7 @@ const PRESET_FILE_ICONS: {
   {
     key: 'folder',
     icon: <FolderFilled />,
-    color: '#FFDC00',
+    color: '#FFD93B',
     ext: [],
   },
 ];

package/src/tree/file_tree.stories.tsx

@@ -8,7 +8,7 @@ const meta: Meta<typeof FileTree> = {
   decorators: [
     (Story) => {
       return (
-        <div className="w-[200px] overflow-y-auto border border-01">
+        <div className="w-[300px] overflow-y-auto border border-01">
           <Story />
         </div>
       );
@@ -117,6 +117,10 @@ export const Default: Story = {
       operateIsDisabled: (nodeData) => nodeData.key === '5',
       operateIsHidden: (nodeData) => nodeData.key === '6',
     },
+
+    renderTitleRight: () => {
+      return <div className="text-03">10</div>;
+    },
   },
 };
 

package/src/tree/file_tree.tsx

@@ -19,7 +19,6 @@ interface FileTreeProps<D extends DataNode> extends TreeProps<D> {
   /** 注意，没法控制 title 区域的添加（由 actions 来控制） */
   createProps?: {
     operateIsDisabled?: (nodeData: D) => boolean;
-
     operateIsHidden?: (nodeData: D) => boolean;
   };
   updateProps?: {
@@ -30,6 +29,8 @@ interface FileTreeProps<D extends DataNode> extends TreeProps<D> {
     operateIsDisabled?: (nodeData: D) => boolean;
     operateIsHidden?: (nodeData: D) => boolean;
   };
+
+  renderTitleRight?: (nodeData: D) => React.ReactNode;
 }
 
 function Detail<D extends DataNode>({
@@ -164,8 +165,20 @@ function More({
 }
 
 function FileTree<D extends DataNode>(props: FileTreeProps<D>) {
+  const {
+    actions,
+    requestCreateByValues,
+    requestUpdateByValues,
+    requestDeleteByRecord,
+    createProps,
+    updateProps,
+    deleteProps,
+    renderTitleRight,
+    treeProps,
+  } = props;
+
   const titleExtra = useMemo(() => {
-    if (!props.actions?.includes('create')) {
+    if (!actions?.includes('create')) {
       return null;
     }
 
@@ -173,16 +186,16 @@ function FileTree<D extends DataNode>(props: FileTreeProps<D>) {
       <Detail
         action="create"
         trigger={<PlusOutlined />}
-        requestCreateByValues={props.requestCreateByValues}
+        requestCreateByValues={requestCreateByValues}
       />
     );
-  }, [props.actions, props.requestCreateByValues]);
+  }, [actions, requestCreateByValues]);
 
   const titleRender = useCallback(
     (nodeData) => {
-      const hasMore = props.actions?.includes('update') || props.actions?.includes('delete');
+      const hasMore = actions?.includes('update') || actions?.includes('delete');
       return (
-        <div className="group flex gap-1">
+        <div className="group flex items-center gap-2">
           {nodeData.children ? (
             <FileCard.FileIcon isDirectory className="text-base" />
           ) : (
@@ -192,20 +205,20 @@ function FileTree<D extends DataNode>(props: FileTreeProps<D>) {
             />
           )}
           <div className="flex-1 truncate">{nodeData.title}</div>
-          <div className={classNames('text-03', { 'group-hover:hidden': hasMore })}>
-            {nodeData.children?.length || 0}
+          <div className={classNames({ 'group-hover:hidden': hasMore })}>
+            {renderTitleRight?.(nodeData)}
           </div>
           {hasMore && (
             <div className="hidden group-hover:block">
               <More
-                actions={props.actions}
+                actions={actions}
                 nodeData={nodeData}
-                requestCreateByValues={props.requestCreateByValues}
-                requestUpdateByValues={props.requestUpdateByValues}
-                requestDeleteByRecord={props.requestDeleteByRecord}
-                createProps={props.createProps}
-                updateProps={props.updateProps}
-                deleteProps={props.deleteProps}
+                requestCreateByValues={requestCreateByValues}
+                requestUpdateByValues={requestUpdateByValues}
+                requestDeleteByRecord={requestDeleteByRecord}
+                createProps={createProps}
+                updateProps={updateProps}
+                deleteProps={deleteProps}
               />
             </div>
           )}
@@ -213,24 +226,26 @@ function FileTree<D extends DataNode>(props: FileTreeProps<D>) {
       );
     },
     [
-      props.actions,
-      props.requestCreateByValues,
-      props.requestDeleteByRecord,
-      props.requestUpdateByValues,
-      props.createProps,
-      props.updateProps,
-      props.deleteProps,
+      actions,
+      createProps,
+      deleteProps,
+      renderTitleRight,
+      requestCreateByValues,
+      requestDeleteByRecord,
+      requestUpdateByValues,
+      updateProps,
     ],
   );
 
   return (
     <Tree
       titleExtra={titleExtra}
+      size="large"
       {...props}
       treeProps={{
         titleRender,
-        ...props.treeProps,
-        className: classNames('fec-file-tree', props.treeProps?.className),
+        ...treeProps,
+        className: classNames('fec-file-tree', treeProps?.className),
       }}
     />
   );

package/src/tree/style.scss

@@ -8,12 +8,25 @@
   .ant-tree-switcher {
     margin-inline-end: 0 !important;
   }
+
+  &.fec-tree-large {
+    .ant-tree-treenode {
+      line-height: 32px;
+    }
+  }
 }
 
 .fec-file-tree {
   .ant-tree-node-content-wrapper {
     overflow: hidden;
-    padding-inline-start: 0 !important;
+  }
+
+  .ant-tree-switcher {
+    &:hover {
+      &::before {
+        background-color: transparent !important;
+      }
+    }
   }
 
   &.fec-tree-all-leaf {

package/src/tree/tree.tsx

@@ -20,6 +20,8 @@ interface TreeProps<T extends DataNode> {
   enableSearch?: boolean;
   /** Antd 树的 props */
   treeProps?: AntdTreeProps<T>;
+  /** 更宽松的布局 */
+  size?: 'large';
 }
 
 function useHighLightTreeData({ treeData, search }) {
@@ -167,6 +169,7 @@ function Tree<T extends DataNode>(props: TreeProps<T>) {
         'fec-tree fec-tree-no-wrap',
         {
           'fec-tree-all-leaf': isAllLeaf,
+          'fec-tree-large': props.size === 'large',
         },
         treeProps?.className,
       )}