@fe-free/core 2.6.0 → 2.6.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @fe-free/core
 
+## 2.6.2
+
+### Patch Changes
+
+- feat: crud
+  - @fe-free/tool@2.6.2
+
+## 2.6.1
+
+### Patch Changes
+
+- feat: page layout tabs
+  - @fe-free/tool@2.6.1
+
 ## 2.6.0
 
 ### Minor Changes

package/package.json

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

package/src/crud_of_pure/crud_of_pure.stories.tsx

@@ -51,7 +51,7 @@ export const Basic: Story = {
 
     return (
       <CRUDOfPure
-        actions={['delete']}
+        actions={['create', 'delete']}
         tableProps={{
           columns,
           request: fakeRequest,
@@ -201,3 +201,57 @@ export const NoSearch: Story = {
     );
   },
 };
+
+export const SpecialToolbar: Story = {
+  render: () => {
+    const columns = [
+      {
+        title: 'id',
+        dataIndex: 'id',
+        search: true,
+      },
+      {
+        title: '名字(省略)',
+        dataIndex: 'name',
+        search: true,
+        ellipsis: true,
+      },
+      {
+        title: 'city',
+        dataIndex: 'city',
+      },
+      {
+        title: 'area',
+        dataIndex: 'area',
+      },
+    ];
+
+    return (
+      <CRUDOfPure
+        actions={['create', 'delete']}
+        tableProps={{
+          columns,
+          request: fakeRequest,
+          pagination: false,
+        }}
+        requestDeleteByRecord={fakeDeleteByRecord}
+        deleteProps={{
+          nameIndex: 'id',
+        }}
+        detailForm={() => (
+          <>
+            <ProFormText
+              name="name"
+              label="名字"
+              required
+              rules={[{ required: true }]}
+              extra="extra extra extra extra"
+            />
+          </>
+        )}
+        requestCreateByValues={fakeCreate}
+        specialToolbar
+      />
+    );
+  },
+};

package/src/crud_of_pure/index.tsx

@@ -9,7 +9,8 @@ interface CRUDOfPureProps<
   DataSource extends Record<string, any> = any,
   Key extends string | number = string,
 > extends CRUDProps<DataSource, Key> {
-  // nothing
+  /** 特殊位置的 toolbar */
+  specialToolbar?: boolean;
 }
 
 function CRUDOfPureComponent(props: CRUDOfPureProps, ref: React.ForwardedRef<CRUDMethods>) {
@@ -43,6 +44,7 @@ function CRUDOfPureComponent(props: CRUDOfPureProps, ref: React.ForwardedRef<CRU
         'fec-crud-of-pure-no-search': noSearch,
         // 先这样实现
         'fec-crud-of-pure-no-toolbar': !props.actions.includes('create'),
+        'fec-crud-of-pure-special-toolbar': props.specialToolbar,
       })}
     >
       <CRUD

package/src/crud_of_pure/style.scss

@@ -54,4 +54,15 @@
       padding-block: 0;
     }
   }
+
+  &.fec-crud-of-pure-special-toolbar {
+    .ant-pro-table-list-toolbar {
+      margin-top: -48px;
+      pointer-events: none;
+
+      .ant-pro-table-list-toolbar-right > div {
+        pointer-events: auto;
+      }
+    }
+  }
 }

package/src/index.ts

@@ -41,7 +41,8 @@ export { downloadInterceptor } from './global/interceptors';
 export { InfiniteList } from './infinite_list';
 export type { InfiniteListProps } from './infinite_list';
 export { Markdown } from './markdown';
-export { PageLayout } from './page_layout';
+export { PageLayout, PageLayoutTabs } from './page_layout';
+export type { PageLayoutProps, PageLayoutTabsProps } from './page_layout';
 export { routeTool } from './route';
 export { NumberSlider, PercentageSlider } from './slider';
 export type { NumberSliderProps, PercentageSliderProps } from './slider';

package/src/page_layout/index.tsx

@@ -1,4 +1,8 @@
 import cn from 'classnames';
+import { Fragment, useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import type { TabsProps } from '../tabs';
+import { Tabs } from '../tabs';
 
 interface PageLayoutProps {
   direction?: 'horizontal' | 'vertical';
@@ -24,7 +28,7 @@ function PageLayout({
   return (
     <div
       className={cn(
-        'flex w-full h-full',
+        'flex h-full w-full',
         {
           'flex-row': direction === 'horizontal',
           'flex-col': direction === 'vertical',
@@ -39,4 +43,56 @@ function PageLayout({
   );
 }
 
-export { PageLayout };
+interface PageLayoutTabsProps extends PageLayoutProps {
+  tabsProps: Omit<TabsProps, 'items' | 'withSearchParams'> & {
+    items: {
+      key: string;
+      label: React.ReactNode;
+      children: React.ReactNode;
+    }[];
+  };
+}
+
+function PageLayoutTabs(props: PageLayoutTabsProps) {
+  const { tabsProps, ...rest } = props;
+
+  const [searchParams] = useSearchParams();
+  const tab = searchParams.get(tabsProps.tabKey || 'tab') || undefined;
+
+  const { children, newItems } = useMemo(() => {
+    const items = props.tabsProps.items;
+
+    const item = items.find((item) => item.key === tab);
+    const children = item?.children || items[0]?.children;
+
+    const newItems = items.map((item) => ({
+      ...item,
+      children: undefined,
+    }));
+
+    return { children, newItems };
+  }, [props.tabsProps.items, tab]);
+
+  return (
+    <PageLayout
+      direction="vertical"
+      start={
+        <Tabs
+          tabBarExtraContent={{
+            left: <div className="w-4" />,
+            right: <div className="w-4" />,
+          }}
+          {...tabsProps}
+          items={newItems}
+          withSearchParams
+        />
+      }
+      {...rest}
+    >
+      <Fragment key={tab}>{children}</Fragment>
+    </PageLayout>
+  );
+}
+
+export { PageLayout, PageLayoutTabs };
+export type { PageLayoutProps, PageLayoutTabsProps };

package/src/tabs/index.tsx

@@ -1,37 +1,46 @@
 import type { TabsProps as AntdTabsProps } from 'antd';
 import { Tabs as AntdTabs } from 'antd';
-import { useEffect } from 'react';
+import classNames from 'classnames';
 import { useSearchParams } from 'react-router-dom';
+import { routeTool } from '../route';
+import './style.scss';
 
 interface TabsProps extends AntdTabsProps {
   /** 自动时设置和同步 searchParams tab */
   withSearchParams?: boolean;
+  /** 设置 searchParams 的类型，默认 set */
+  searchParamsType?: 'set' | 'change';
+  /** 默认 tab */
+  tabKey?: string;
 }
 
 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]);
+  const {
+    withSearchParams,
+    searchParamsType = 'set',
+    tabKey = 'tab',
+    activeKey,
+    onChange,
+    className,
+    ...rest
+  } = props;
+  const [searchParams] = useSearchParams();
+  const tab = searchParams.get(tabKey) || undefined;
 
   return (
     <AntdTabs
       {...rest}
+      className={classNames('fec-tabs', className)}
       activeKey={withSearchParams ? tab : activeKey}
       onChange={(key) => {
         onChange?.(key);
-        if (props.withSearchParams) {
-          searchParams.set('tab', key);
 
-          setSearchParams({ tab: key });
+        if (props.withSearchParams) {
+          if (searchParamsType === 'set') {
+            routeTool.setSearchParams({ [tabKey]: key });
+          } else {
+            routeTool.changeSearchParams({ [tabKey]: key });
+          }
         }
       }}
     />

package/src/tabs/style.scss

@@ -0,0 +1,5 @@
+.fec-tabs {
+  .ant-tabs-nav {
+    margin: 0;
+  }
+}