@fe-free/core 2.2.8 → 2.2.10

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @fe-free/core
 
+## 2.2.10
+
+### Patch Changes
+
+- feat: true
+  - @fe-free/tool@2.2.10
+
+## 2.2.9
+
+### Patch Changes
+
+- Updated dependencies
+  - @fe-free/tool@2.2.9
+
 ## 2.2.8
 
 ### Patch Changes

package/package.json

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

package/src/ahooks/ahooks.stories.tsx

@@ -0,0 +1,78 @@
+import { useGlobalRequest } from '@fe-free/core';
+import { useRequest } from 'ahooks';
+
+const meta = {
+  title: '@fe-free/core/ahooks',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `基于 ahooks 封装
+- useGlobalRequest。基于 useRequest 封装，会抛出全局错误。
+- useGlobalInfiniteScroll。基于 useInfiniteScroll 封装，会抛出全局错误。
+`,
+      },
+    },
+  },
+};
+
+export default meta;
+
+const handleError = (event) => {
+  console.log('global error', event);
+  alert('global error');
+};
+
+window.addEventListener('error', handleError);
+window.addEventListener('unhandledrejection', handleError);
+
+export const UseGlobalRequest = () => {
+  const { data, loading, error, run } = useGlobalRequest(
+    async () => {
+      return new Promise((_, reject) => {
+        setTimeout(() => {
+          reject('错误啦');
+        }, 1000);
+      });
+    },
+    {
+      manual: true,
+    },
+  );
+
+  return (
+    <div>
+      <div>useGlobalRequest 会抛出全局错误</div>
+      <button onClick={run}>run</button>
+
+      <div>data: {data}</div>
+      <div>loading: {loading ? 'true' : 'false'}</div>
+      <div>error: {error}</div>
+    </div>
+  );
+};
+
+export const UseRequest = () => {
+  const { data, loading, error, run } = useRequest(
+    async () => {
+      return new Promise((_, reject) => {
+        setTimeout(() => {
+          reject('错误啦');
+        }, 1000);
+      });
+    },
+    {
+      manual: true,
+    },
+  );
+
+  return (
+    <div>
+      <div>ahooks useRequest</div>
+      <button onClick={run}>run</button>
+      <div>data: {data}</div>
+      <div>loading: {loading ? 'true' : 'false'}</div>
+      <div>error: {error}</div>
+    </div>
+  );
+};

package/src/button/button.stories.ts

@@ -8,8 +8,7 @@ const meta: Meta<typeof LoadingButton> = {
   parameters: {
     docs: {
       description: {
-        component:
-          'LoadingButton 是一个带有加载状态的按钮组件，适用于异步操作场景。<br/>区别于 antd Button 需要手动传 loading props。',
+        component: '基于 antd Button 封装的 LoadingButton，自动根据 onClick 显示 loading',
       },
     },
   },

package/src/button/index.tsx

@@ -2,7 +2,9 @@ import type { ButtonProps } from 'antd';
 import { Button } from 'antd';
 import { useCallback, useState } from 'react';
 
-function LoadingButton({ onClick, ...rest }: ButtonProps) {
+function LoadingButton(props: ButtonProps) {
+  const { onClick, ...rest } = props;
+
   const [loading, setLoading] = useState(false);
 
   const handleClick = useCallback(

package/src/copy/copy.stories.tsx

@@ -5,6 +5,13 @@ const meta: Meta<typeof Copy> = {
   title: '@fe-free/core/Copy',
   component: Copy,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: '基于 antd 的 Copy 组件，自动根据 value 显示复制按钮',
+      },
+    },
+  },
 };
 
 export default meta;
@@ -14,7 +21,7 @@ type Story = StoryObj<typeof meta>;
 export const Basic: Story = {
   args: {
     value: '点击复制',
-    children: '点击复制',
+    children: 'children 点击复制',
   },
 };
 
@@ -22,7 +29,7 @@ export const ShowIcon: Story = {
   args: {
     value: 'icon复制',
     showIcon: true,
-    children: 'icon复制',
+    children: 'children 点击复制',
   },
 };
 
@@ -31,7 +38,7 @@ export const HoverIcon: Story = {
     value: 'hover复制',
     showIcon: true,
     hoverIcon: true,
-    children: 'hover复制',
+    children: 'children 点击复制',
   },
 };
 
@@ -41,6 +48,6 @@ export const OnCopied: Story = {
     onCopied: () => {
       alert('复制成功');
     },
-    children: '点击复制',
+    children: 'children 点击复制',
   },
 };

package/src/copy/index.tsx

@@ -4,14 +4,20 @@ import classNames from 'classnames';
 import React, { useCallback } from 'react';
 
 interface CopyProps {
+  /** 复制的内容 */
   value: string;
+  /** 是否显示复制 icon */
   showIcon?: boolean;
+  /** 是否在 hover 时显示复制 icon */
   hoverIcon?: boolean;
   children?: React.ReactNode;
+  /** 复制成功后的回调 */
   onCopied?: () => void;
 }
 
-const Copy: React.FC<CopyProps> = ({ value, showIcon, hoverIcon, children, onCopied }) => {
+function Copy(props: CopyProps) {
+  const { value, showIcon, hoverIcon, children, onCopied } = props;
+
   const handleCopy = useCallback(async () => {
     await copyToClipboard(value);
     onCopied?.();
@@ -39,7 +45,7 @@ const Copy: React.FC<CopyProps> = ({ value, showIcon, hoverIcon, children, onCop
   }
 
   return <div onClick={handleCopy}>{children}</div>;
-};
+}
 
 export { Copy };
 export type { CopyProps };

package/src/tailwindcss.stories.tsx

@@ -7,10 +7,10 @@ export const Default = () => {
   return (
     <div>
       <div>@fe-free/core 扩展的</div>
-      <div className="flex flex-row gap-2">
-        <span className="text-primary">text-primary</span>
-        <span className="text-secondary">text-secondary</span>
-        <span className="text-desc">text-desc</span>
+      <div>
+        <div className="text-primary">text-primary</div>
+        <div className="text-secondary">text-secondary</div>
+        <div className="text-desc">text-desc</div>
       </div>
       <div>
         <div className="c-border-bottom">c-border-bottom</div>

package/src/tree/index.tsx

@@ -3,7 +3,7 @@ import { useDebounce } from 'ahooks';
 import type { TreeProps as AntdTreeProps } from 'antd';
 import { Tree as AntdTree, Input } from 'antd';
 import type { DataNode } from 'antd/es/tree';
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { flatToTreeData } from './helper';
 
 interface TreeProps<T extends DataNode> extends AntdTreeProps<T> {
@@ -101,8 +101,32 @@ function Tree<T extends DataNode>(props: TreeProps<T>) {
     treeData: filterTreeData,
     search: debouncedSearch,
   });
+  const newTreeData = highlightedTreeData;
 
-  const node = <AntdTree {...rest} treeData={highlightedTreeData} />;
+  const handleSearch = useCallback((e) => {
+    setSearch(e.target.value);
+  }, []);
+
+  const searchExpandKeysProps = useMemo(() => {
+    if (!debouncedSearch) {
+      return {};
+    }
+
+    const keys: string[] = [];
+    function loop(arr) {
+      arr.forEach((item) => {
+        keys.push(item.key);
+        if (item.children) {
+          loop(item.children);
+        }
+      });
+    }
+    loop(newTreeData);
+
+    return { expandedKeys: keys };
+  }, [debouncedSearch, newTreeData]);
+
+  const node = <AntdTree {...searchExpandKeysProps} {...rest} treeData={newTreeData} />;
 
   if (!enableSearch) {
     return node;
@@ -114,11 +138,7 @@ function Tree<T extends DataNode>(props: TreeProps<T>) {
       start={
         enableSearch && (
           <div className="px-2 pb-2">
-            <Input.Search
-              placeholder="搜索"
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-            />
+            <Input.Search placeholder="搜索" value={search} onChange={handleSearch} />
           </div>
         )
       }