@fe-free/core 2.2.4 → 2.2.5

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @fe-free/core
 
+## 2.2.5
+
+### Patch Changes
+
+- feat: add copy and route
+- Updated dependencies
+  - @fe-free/tool@2.2.5
+
 ## 2.2.4
 
 ### Patch Changes

package/package.json

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

package/src/copy/copy.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Copy } from './index';
+
+const meta: Meta<typeof Copy> = {
+  title: '@fe-free/core/Copy',
+  component: Copy,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// 基础用法
+export const Basic: Story = {
+  args: {
+    value: '点击复制',
+    children: '点击复制',
+  },
+};
+
+export const ShowIcon: Story = {
+  args: {
+    value: 'icon复制',
+    showIcon: true,
+    children: 'icon复制',
+  },
+};
+
+export const HoverIcon: Story = {
+  args: {
+    value: 'hover复制',
+    showIcon: true,
+    hoverIcon: true,
+    children: 'hover复制',
+  },
+};
+
+export const OnCopied: Story = {
+  args: {
+    value: '点击复制',
+    onCopied: () => {
+      alert('复制成功');
+    },
+    children: '点击复制',
+  },
+};

package/src/copy/index.tsx

@@ -0,0 +1,44 @@
+import { CopyOutlined } from '@ant-design/icons';
+import { copyToClipboard } from '@fe-free/tool';
+import classNames from 'classnames';
+import React, { useCallback } from 'react';
+
+interface CopyProps {
+  value: string;
+  showIcon?: boolean;
+  hoverIcon?: boolean;
+  children?: React.ReactNode;
+  onCopied?: () => void;
+}
+
+const Copy: React.FC<CopyProps> = ({ value, showIcon, hoverIcon, children, onCopied }) => {
+  const handleCopy = useCallback(async () => {
+    await copyToClipboard(value);
+    onCopied?.();
+  }, [value, onCopied]);
+
+  if (showIcon || hoverIcon) {
+    return (
+      <div
+        className={classNames('flex gap-1', {
+          group: hoverIcon,
+        })}
+      >
+        {children}
+        <div
+          className={classNames('cursor-pointer text-primary', {
+            hidden: hoverIcon,
+            'group-hover:block': hoverIcon,
+          })}
+          onClick={handleCopy}
+        >
+          <CopyOutlined />
+        </div>
+      </div>
+    );
+  }
+
+  return <div onClick={handleCopy}>{children}</div>;
+};
+
+export { Copy };

package/src/index.ts

@@ -30,6 +30,7 @@ export {
 } from './form';
 export { Markdown } from './markdown';
 export { PageLayout } from './page_layout';
+export { routeTool } from './route';
 export { Table } from './table';
 export type { TableProps } from './table';
 export { Tree, flatToTreeData } from './tree';

package/src/route/index.tsx

@@ -0,0 +1,69 @@
+import type { NavigateFunction } from 'react-router-dom';
+import { generatePath } from 'react-router-dom';
+
+const routeTool = {
+  _baseName: '' as string,
+  _navigate: null as NavigateFunction | null,
+  setNavigate: (navigate: NavigateFunction) => {
+    routeTool._navigate = navigate;
+  },
+  setBaseName: (baseName: string) => {
+    routeTool._baseName = baseName;
+  },
+  getNavigate: () => {
+    if (!routeTool._navigate) {
+      throw new Error('routeTool need set navigate first');
+    }
+    return routeTool._navigate;
+  },
+  setSearchParams: (sp: Record<string, any>) => {
+    const url = new URL(window.location.href);
+
+    const p = new URLSearchParams();
+    Object.keys(sp).forEach((key) => {
+      const value = sp[key];
+      // undefined 不能 set，否则 会出现 ?x=undefined 的情况
+      if (value !== undefined) {
+        p.set(key, value);
+      }
+    });
+    url.search = p.toString();
+
+    routeTool.getNavigate()(
+      `${url.pathname.replace(routeTool._baseName, '')}${url.search}${url.hash}`,
+    );
+  },
+  changeSearchParams: (sp: Record<string, any>) => {
+    const url = new URL(window.location.href);
+
+    Object.keys(sp).forEach((key) => {
+      const value = sp[key];
+      if (value !== undefined) {
+        url.searchParams.set(key, value);
+      } else {
+        url.searchParams.delete(key);
+      }
+    });
+
+    routeTool.getNavigate()(
+      `${url.pathname.replace(routeTool._baseName, '')}${url.search}${url.hash}`,
+    );
+  },
+  navigateTo: ({
+    path,
+    params,
+    searchParams,
+  }: {
+    path: string;
+    params?: Record<string, string>;
+    searchParams?: Record<string, string>;
+  }) => {
+    const sp = new URLSearchParams(searchParams);
+
+    routeTool.getNavigate()(
+      `${generatePath(path, params)}${searchParams ? `?${sp.toString()}` : ''}`,
+    );
+  },
+};
+
+export { routeTool };