@fe-free/core 2.7.1 → 2.8.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @fe-free/core
 
+## 2.8.1
+
+### Patch Changes
+
+- fix: tree
+  - @fe-free/tool@2.8.1
+
+## 2.8.0
+
+### Minor Changes
+
+- feat: className
+
+### Patch Changes
+
+- @fe-free/tool@2.8.0
+
 ## 2.7.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "2.7.1",
+  "version": "2.8.1",
   "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.7.1"
+    "@fe-free/tool": "2.8.1"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "2.8.9",

package/src/crud_of_list/crud_of_list.stories.tsx

@@ -22,7 +22,7 @@ CRUDOfList 组件。（简洁的列表形态的 CRUD 组件）
   decorators: [
     (Story) => {
       return (
-        <div className="c-border h-[500px] w-[300px] overflow-y-auto">
+        <div className="fec-border h-[500px] w-[300px] overflow-y-auto">
           <Story />
         </div>
       );

package/src/editor_mention/index.tsx

@@ -27,11 +27,11 @@ interface EditorMentionProps {
 }
 
 const emptyArr = [];
-const tagClassName = 'cl-editor-mention-tag';
+const tagClassName = 'fec-editor-mention-tag';
 const defaultPrefix = ['/'];
 
 function defaultRenderItem({ item }) {
-  return <div className="py-1 text-sm pl-4 pr-2">{item.label}</div>;
+  return <div className="py-1 pl-4 pr-2 text-sm">{item.label}</div>;
 }
 
 function defaultRenderTagHTML({ item }) {
@@ -104,16 +104,16 @@ function useDropdown({ items, renderItem, onSelect, editorRef }) {
     <div
       // 阻止下拉菜单点击事件冒泡
       onClick={(e) => e.stopPropagation()}
-      className="shadow-md rounded p-1 z-10 max-h-[250px] overflow-y-auto bg-white absolute max-w-[250px]"
+      className="absolute z-10 max-h-[250px] max-w-[250px] overflow-y-auto rounded bg-white p-1 shadow-md"
       style={{
         top: `${position.top}px`,
         left: `${position.left}px`,
       }}
     >
-      {items.length === 0 && <div className="text-desc text-sm p-2">暂无数据</div>}
+      {items.length === 0 && <div className="p-2 text-sm text-desc">暂无数据</div>}
       {items.map((group, i) => (
         <div key={group.label}>
-          <div className="text-desc text-sm p-2">{group.label}</div>
+          <div className="p-2 text-sm text-desc">{group.label}</div>
           <div>
             {group.options.map((item) => (
               <div
@@ -122,7 +122,7 @@ function useDropdown({ items, renderItem, onSelect, editorRef }) {
                   e.preventDefault(); // 防止失去焦点
                   handleSelect(item);
                 }}
-                className="cursor-pointer hover:bg-gray-100 rounded"
+                className="cursor-pointer rounded hover:bg-gray-100"
               >
                 {renderItem({ item, index: i })}
               </div>
@@ -200,7 +200,7 @@ function useChange({ content, editorRef, onChange }) {
   const node = (
     <div
       ref={ref}
-      className="absolute top-[-10px] left-[-10px] w-[1px] h-[1px] overflow-auto"
+      className="absolute left-[-10px] top-[-10px] h-[1px] w-[1px] overflow-auto"
       contentEditable="true"
     />
   );
@@ -324,7 +324,7 @@ const EditorMention = ({
   const isEmpty = !content || content === '<br>';
 
   return (
-    <div className="c-editor-mention relative h-full flex">
+    <div className="c-editor-mention relative flex h-full">
       <div
         ref={editorRef}
         contentEditable="true"
@@ -332,7 +332,7 @@ const EditorMention = ({
         onInput={handleInput}
         onKeyDown={handleKeyDown}
         className={classNames(
-          'flex-1 w-full p-2 c-border rounded outline-none overflow-y-auto focus:border-primary',
+          'fec-border w-full flex-1 overflow-y-auto rounded p-2 outline-none focus:border-primary',
           resizeHeight && 'resize-y',
         )}
         style={{
@@ -341,7 +341,7 @@ const EditorMention = ({
       />
       {placeholder && isEmpty && (
         <div
-          className="absolute top-0 left-0 text-gray-500 p-2 cursor-text"
+          className="absolute left-0 top-0 cursor-text p-2 text-gray-500"
           onClick={() => {
             editorRef.current?.focus();
           }}

package/src/record/index.tsx

@@ -85,7 +85,7 @@ function RecordArray(props: RecordArrayProps) {
 
   return (
     <ProFormListHelper
-      className={classNames('c-bg rounded p-2', className)}
+      className={classNames('fec-bg rounded p-2', className)}
       value={value}
       onChange={onChange}
       getAdd={() => ({

package/src/style.scss

@@ -8,31 +8,31 @@
 /* stylelint-disable-next-line at-rule-no-unknown */
 @tailwind utilities;
 
-.c-border {
+.fec-border {
   border: 1px solid #f0f0f0;
 }
 
-.c-border-bottom {
+.fec-border-bottom {
   border-bottom: 1px solid #f0f0f0;
 }
 
-.c-border-top {
+.fec-border-top {
   border-top: 1px solid #f0f0f0;
 }
 
-.c-border-left {
+.fec-border-left {
   border-left: 1px solid #f0f0f0;
 }
 
-.c-border-right {
+.fec-border-right {
   border-right: 1px solid #f0f0f0;
 }
 
-.c-bg {
+.fec-bg {
   background-color: #f3f5f6;
 }
 
-.c-bg-hover {
+.fec-bg-hover {
   background-color: #f3f5f6;
 
   &:hover {

package/src/tailwindcss.stories.tsx

@@ -13,12 +13,12 @@ export const Default = () => {
         <div className="text-desc">text-desc</div>
       </div>
       <div>
-        <div className="c-border-bottom">c-border-bottom</div>
-        <div className="c-border-top">c-border-top</div>
-        <div className="c-border-left">c-border-left</div>
-        <div className="c-border-right">c-border-right</div>
-        <div className="c-bg">c-bg</div>
-        <div className="c-bg-hover">c-bg-hover</div>
+        <div className="fec-border-bottom">fec-border-bottom</div>
+        <div className="fec-border-top">fec-border-top</div>
+        <div className="fec-border-left">fec-border-left</div>
+        <div className="fec-border-right">fec-border-right</div>
+        <div className="fec-bg">fec-bg</div>
+        <div className="fec-bg-hover">fec-bg-hover</div>
       </div>
     </div>
   );

package/src/tree/file_tree.stories.tsx

@@ -8,7 +8,7 @@ const meta: Meta<typeof FileTree> = {
   decorators: [
     (Story) => {
       return (
-        <div className="c-border w-[200px] overflow-y-auto">
+        <div className="fec-border w-[200px] overflow-y-auto">
           <Story />
         </div>
       );

package/src/tree/file_tree.tsx

@@ -141,14 +141,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 })}>
@@ -183,7 +185,7 @@ function FileTree<D extends DataNode>(props: FileTreeProps<D>) {
       treeProps={{
         titleRender,
         ...props.treeProps,
-        className: classNames('cl-file-tree', props.treeProps?.className),
+        className: classNames('fec-file-tree', props.treeProps?.className),
       }}
     />
   );

package/src/tree/style.scss

@@ -1,5 +1,5 @@
-.cl-tree {
-  &.cl-tree-no-wrap {
+.fec-tree {
+  &.fec-tree-no-wrap {
     .ant-tree-title {
       white-space: nowrap;
     }
@@ -10,13 +10,13 @@
   }
 }
 
-.cl-file-tree {
+.fec-file-tree {
   .ant-tree-node-content-wrapper {
     overflow: hidden;
     padding-inline-start: 0 !important;
   }
 
-  &.cl-tree-all-leaf {
+  &.fec-tree-all-leaf {
     .ant-tree-switcher {
       display: none;
     }

package/src/tree/tree.stories.tsx

@@ -7,7 +7,7 @@ const meta: Meta<typeof Tree> = {
   tags: ['autodocs'],
   decorators: [
     (Story) => (
-      <div className="c-border w-[300px]">
+      <div className="fec-border w-[300px]">
         <Story />
       </div>
     ),

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]);
 }
 
@@ -157,9 +164,9 @@ function Tree<T extends DataNode>(props: TreeProps<T>) {
       {...treeProps}
       treeData={newTreeData}
       className={classNames(
-        'cl-tree cl-tree-no-wrap',
+        'fec-tree fec-tree-no-wrap',
         {
-          'cl-tree-all-leaf': isAllLeaf,
+          'fec-tree-all-leaf': isAllLeaf,
         },
         treeProps?.className,
       )}