@fe-free/core 2.2.12 → 2.2.13

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @fe-free/core
 
+## 2.2.13
+
+### Patch Changes
+
+- feat: tabs
+  - @fe-free/tool@2.2.13
+
 ## 2.2.12
 
 ### Patch Changes

package/package.json

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

package/src/index.ts

@@ -37,6 +37,8 @@ export { PageLayout } from './page_layout';
 export { routeTool } from './route';
 export { Table } from './table';
 export type { TableProps } from './table';
+export { Tabs } from './tabs';
+export type { TabsProps } from './tabs';
 export { Tree, flatToTreeData } from './tree';
 export type { TreeProps } from './tree';
 export { useLocalforageState } from './use_localforage_state';

package/src/page_layout/page_layout.stories.tsx

@@ -8,22 +8,22 @@ const meta: Meta<typeof PageLayout> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof PageLayout>;
 
 export const Default: Story = {
   args: {
-    start: <div className="bg-red-500 w-[100px] h-[100px]">start</div>,
-    children: <div className="bg-blue-500 h-[100px]">children</div>,
-    end: <div className="bg-green-500 w-[100px] h-[100px]">end</div>,
+    start: <div className="h-[100px] w-[100px] bg-red-500">start</div>,
+    children: <div className="h-[100px] bg-blue-500">children</div>,
+    end: <div className="h-[100px] w-[100px] bg-green-500">end</div>,
   },
 };
 
 export const DirectionVertical: Story = {
   args: {
     direction: 'vertical',
-    start: <div className="bg-red-500 h-[100px]">start</div>,
-    children: <div className="bg-blue-500 h-[100px]">children</div>,
-    end: <div className="bg-green-500 h-[100px]">end</div>,
+    start: <div className="h-[100px] bg-red-500">start</div>,
+    children: <div className="h-[100px] bg-blue-500">children</div>,
+    end: <div className="h-[100px] bg-green-500">end</div>,
   },
 };
 
@@ -33,8 +33,8 @@ export const ClassName: Story = {
     startClassName: 'p-4 bg-red-200',
     childrenClassName: 'p-4 bg-blue-200',
     endClassName: 'p-4 bg-green-200',
-    start: <div className="bg-red-500 w-[100px] h-full">start</div>,
-    children: <div className="bg-blue-500 h-full">children</div>,
-    end: <div className="bg-green-500 w-[100px] h-full">end</div>,
+    start: <div className="h-full w-[100px] bg-red-500">start</div>,
+    children: <div className="h-full bg-blue-500">children</div>,
+    end: <div className="h-full w-[100px] bg-green-500">end</div>,
   },
 };

package/src/tabs/index.tsx

@@ -0,0 +1,42 @@
+import type { TabsProps as AntdTabsProps } from 'antd';
+import { Tabs as AntdTabs } from 'antd';
+import { useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+interface TabsProps extends AntdTabsProps {
+  /** 自动时设置和同步 searchParams tab */
+  withSearchParams?: boolean;
+}
+
+function Tabs(props: TabsProps) {
+  const { withSearchParams, activeKey, onChange, ...rest } = props;
+  const [searchParams, setSearchParams] = useSearchParams();
+  const tab = searchParams.get('tab') || undefined;
+
+  useEffect(() => {
+    if (withSearchParams) {
+      if (!tab && props.items?.[0]?.key) {
+        setSearchParams({ tab: props.items?.[0]?.key });
+      }
+    }
+    // tab 清空的时候要重新设置第一个
+  }, [tab]);
+
+  return (
+    <AntdTabs
+      {...rest}
+      activeKey={withSearchParams ? tab : activeKey}
+      onChange={(key) => {
+        onChange?.(key);
+        if (props.withSearchParams) {
+          searchParams.set('tab', key);
+
+          setSearchParams({ tab: key });
+        }
+      }}
+    />
+  );
+}
+
+export { Tabs };
+export type { TabsProps };

package/src/tabs/tabs.stories.tsx

@@ -0,0 +1,26 @@
+import { Tabs } from '@fe-free/core';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta: Meta<typeof Tabs> = {
+  title: '@fe-free/core/Tabs',
+  component: Tabs,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '基于 antd Tabs 封装的 Tabs，设置 withSearchParams 则自动根据 ?tab= 设置 activeKey',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+
+// 基础用法
+export const Basic: Story = {
+  render: () => {
+    return <div>依赖 react-router-dom 的 Route 组件，暂不提供 demo</div>;
+  },
+};