@fe-free/core 1.2.4 → 1.3.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @fe-free/core
 
+## 1.3.1
+
+### Patch Changes
+
+- feat: crud
+  - @fe-free/tool@1.3.1
+
+## 1.3.0
+
+### Minor Changes
+
+- feat: some
+
+### Patch Changes
+
+- Updated dependencies
+  - @fe-free/tool@1.3.0
+
 ## 1.2.4
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "1.2.4",
+  "version": "1.3.1",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -29,11 +29,11 @@
     "react-syntax-highlighter": "^15.5.0",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "1.2.4"
+    "@fe-free/tool": "1.3.1"
   },
   "peerDependencies": {
-    "@ant-design/pro-components": "^2.7.15",
-    "antd": "^5.20.0",
+    "@ant-design/pro-components": "^2.8.7",
+    "antd": "^5.25.1",
     "react": "^18.2.0"
   },
   "scripts": {

package/src/button/button.stories.ts

@@ -1,12 +1,17 @@
 import { LoadingButton } from '@fe-free/core';
+import type { Meta, StoryObj } from '@storybook/react';
 
-export default {
+const meta: Meta<typeof LoadingButton> = {
   title: '@fe-free/core/LoadingButton',
   component: LoadingButton,
   tags: ['autodocs'],
 };
 
-export const Default = {
+export default meta;
+
+type Story = StoryObj<typeof LoadingButton>;
+
+export const Resolve: Story = {
   args: {
     children: 'click and resolve',
     onClick: () => {

package/src/button/index.tsx

@@ -13,7 +13,7 @@ function LoadingButton({ onClick, ...rest }: ButtonProps) {
         setLoading(false);
       });
     },
-    [onClick]
+    [onClick],
   );
 
   return <Button loading={loading} {...rest} onClick={handleClick} />;

package/src/crud/crud.stories.tsx

@@ -0,0 +1,384 @@
+import type { ProColumns } from '@ant-design/pro-components';
+import { ProForm, ProFormSwitch, ProFormText } from '@ant-design/pro-components';
+import { CRUD, proFormSelectSearchProps } from '@fe-free/core';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from 'antd';
+import { useRef } from 'react';
+import {
+  fakeCreate,
+  fakeDeleteByRecord,
+  fakeGetByRecord,
+  fakeRequest,
+  fakeRequestArea,
+  fakeRequestCity,
+  fakeRequestSchool,
+  fakeUpdateById,
+  levels,
+} from './demo/data';
+
+const meta: Meta<typeof CRUD> = {
+  title: '@fe-free/core/CRUD',
+  component: CRUD,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof CRUD>;
+
+// 基础用法
+export const Normal: 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 (
+      <CRUD
+        actions={['create', 'read', 'delete', 'update']}
+        tableProps={{
+          columns,
+          request: fakeRequest,
+        }}
+        requestDeleteByRecord={fakeDeleteByRecord}
+        deleteProps={{
+          nameIndex: 'name',
+        }}
+        detailForm={(formProps) => (
+          <>
+            <ProFormText
+              {...formProps}
+              name="name"
+              label="名字"
+              required
+              rules={[{ required: true }]}
+              extra="extra extra extra extra"
+            />
+          </>
+        )}
+        requestGetByRecord={fakeGetByRecord}
+        requestCreateByValues={fakeCreate}
+        requestUpdateById={fakeUpdateById}
+      />
+    );
+  },
+};
+
+// 详情页查看
+export const ReadDetail: Story = {
+  render: () => {
+    const columns = [
+      {
+        title: 'id',
+        dataIndex: 'id',
+        search: true,
+      },
+      {
+        title: '名字',
+        dataIndex: 'name',
+        search: true,
+      },
+    ];
+
+    return (
+      <CRUD
+        actions={['read_detail']}
+        tableProps={{
+          columns,
+          request: fakeRequest,
+        }}
+      />
+    );
+  },
+};
+
+// 表格表单和详情表单 ref
+const RefComponent = () => {
+  const formRef = useRef<any>();
+  const [detailFormInstance] = ProForm.useForm();
+
+  const columns = [
+    {
+      title: 'id',
+      dataIndex: 'id',
+      search: true,
+    },
+    {
+      title: '名字',
+      dataIndex: 'name',
+      search: true,
+    },
+  ];
+
+  return (
+    <CRUD
+      actions={['create', 'read', 'update']}
+      tableProps={{
+        formRef,
+        columns,
+        request: fakeRequest,
+      }}
+      detailFormInstance={detailFormInstance}
+      detailForm={(formProps) => (
+        <>
+          <ProFormText
+            {...formProps}
+            name="name"
+            label="名字"
+            required
+            rules={[{ required: true }]}
+            initialValue={'default'}
+          />
+          <ProFormSwitch {...formProps} name="status" label="开启" initialValue={false} />
+        </>
+      )}
+      requestGetByRecord={fakeGetByRecord}
+      requestCreateByValues={fakeCreate}
+      requestUpdateByValues={fakeUpdateById}
+    />
+  );
+};
+
+export const Ref: Story = {
+  render: () => <RefComponent />,
+};
+
+// 通过 ref 获取 actionRef
+const ActionRefComponent = () => {
+  const ref = useRef<any>();
+
+  const columns = [
+    {
+      title: 'id',
+      dataIndex: 'id',
+      search: true,
+    },
+    {
+      title: '名字',
+      dataIndex: 'name',
+      search: true,
+    },
+  ];
+
+  return (
+    <>
+      <Button onClick={() => ref.current.getActionRef().current?.reload()}>reload</Button>
+      <CRUD
+        ref={ref}
+        actions={[]}
+        tableProps={{
+          columns,
+          request: fakeRequest,
+        }}
+      />
+    </>
+  );
+};
+
+export const ActionRef: Story = {
+  render: () => <ActionRefComponent />,
+};
+
+// 数据 本地&远程&依赖
+export const RemoteData: Story = {
+  render: () => {
+    const columns: ProColumns<any>[] = [
+      {
+        title: 'id',
+        dataIndex: 'id',
+        search: true,
+      },
+      {
+        title: '名字',
+        dataIndex: 'name',
+        search: true,
+      },
+      {
+        title: '等级(本地数据)',
+        dataIndex: 'level',
+        search: true,
+        valueEnum: levels,
+        ...proFormSelectSearchProps,
+      },
+      {
+        title: 'city(远端数据)',
+        dataIndex: 'city',
+        search: true,
+        request: async () => {
+          const res = await fakeRequestCity();
+          return res.map((item) => ({
+            label: item,
+            value: item,
+          }));
+        },
+        ...proFormSelectSearchProps,
+      },
+      {
+        title: 'area(联动 city)',
+        dataIndex: 'area',
+        search: true,
+        request: async (params) => {
+          const res = await fakeRequestArea(params);
+          return res.map((item) => ({
+            label: item,
+            value: item,
+          }));
+        },
+        dependencies: ['city'],
+        ...proFormSelectSearchProps,
+      },
+      {
+        title: '学校(远端数据 label value)',
+        dataIndex: 'school',
+        search: true,
+        valueType: 'select' as const,
+        request: () => fakeRequestSchool(),
+        ...proFormSelectSearchProps,
+      },
+    ];
+
+    return (
+      <CRUD
+        actions={[]}
+        tableProps={{
+          columns,
+          request: fakeRequest,
+        }}
+      />
+    );
+  },
+};
+
+// 没有搜索
+export const NoSearch: Story = {
+  render: () => {
+    const columns = [
+      {
+        title: 'id',
+        dataIndex: 'id',
+      },
+      {
+        title: '名字',
+        dataIndex: 'name',
+      },
+    ];
+
+    return (
+      <CRUD
+        actions={[]}
+        tableProps={{
+          columns,
+          request: fakeRequest,
+          search: false,
+        }}
+      />
+    );
+  },
+};
+
+// 自定义文案
+export const CustomText: Story = {
+  render: () => {
+    const columns = [
+      {
+        title: 'id',
+        dataIndex: 'id',
+        search: true,
+      },
+      {
+        title: '名字',
+        dataIndex: 'name',
+        search: true,
+      },
+    ];
+
+    return (
+      <CRUD
+        actions={['create', 'read', 'delete', 'update']}
+        tableProps={{
+          columns,
+          request: fakeRequest,
+        }}
+        createButton={<Button type="primary">新建</Button>}
+        readProps={{
+          operateText: '查看',
+        }}
+        deleteProps={{
+          nameIndex: 'name',
+          operateText: '删除',
+          desc: '确定要删除吗？',
+        }}
+        updateProps={{
+          operateText: '编辑',
+          successText: '编辑成功',
+        }}
+        requestDeleteByRecord={fakeDeleteByRecord}
+        detailForm={(formProps) => (
+          <>
+            <ProFormText
+              {...formProps}
+              name="name"
+              label="名字"
+              required
+              rules={[{ required: true }]}
+            />
+          </>
+        )}
+        requestGetByRecord={fakeGetByRecord}
+        requestCreateByValues={fakeCreate}
+        requestUpdateByValues={fakeUpdateById}
+      />
+    );
+  },
+};
+
+export const RowSelection: Story = {
+  render: () => {
+    return (
+      <CRUD
+        actions={[]}
+        tableProps={{
+          columns: [
+            {
+              title: 'id',
+              dataIndex: 'id',
+              search: true,
+            },
+            {
+              title: '名字',
+              dataIndex: 'name',
+              search: true,
+            },
+          ],
+          request: fakeRequest,
+        }}
+        batchActions={[
+          {
+            btnText: '批量删除',
+            danger: true,
+            onClick: async (_, { selectedRowKeys }) => {
+              console.log(selectedRowKeys);
+            },
+          },
+        ]}
+      />
+    );
+  },
+};

package/src/crud/crud.tsx

@@ -1,90 +1,18 @@
-import type { ProFormInstance, ActionType } from '@ant-design/pro-components';
-import { Space, Button } from 'antd';
-import type { ReactNode } from 'react';
+import type { ActionType } from '@ant-design/pro-components';
+import { Button, Space } from 'antd';
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
-import { Link, useLocation } from 'react-router-dom';
 import type { TableProps } from '../table';
 import { Table } from '../table';
 import { OperateDelete } from './crud_delete';
 import { CRUDDetail } from './crud_detail';
 import './style.scss';
+import type { CRUDMethods, CRUDProps } from './types';
+import { useRowSelection } from './use_row_selection';
 
-/**
- * create 创建
- * read 查看
- * read_detail 详情页查看
- * update 编辑
- * delete 删除
- */
-type CrudAction = 'create' | 'read' | 'read_detail' | 'update' | 'delete';
-
-interface CRUDProps {
-  actions: CrudAction[];
-
-  /** 新建按钮，默认新建 */
-  createButton?: ReactNode;
-
-  /** 表格相关 */
-  tableProps: TableProps;
-  operateColumnProps?: {
-    width?: number;
-    /** 扩展操作区域，再其他操作之前 */
-    moreOperator?: (record) => ReactNode;
-    /** 扩展操作区域，在其他操作之后 */
-    moreOperatorAfter?: (record) => ReactNode;
-  };
-  readProps?: {
-    /** 文本 */
-    operateText?: string;
-    /** 打开方式, action 为 read_detail 有效 */
-    target?: '_blank';
-  };
-
-  /** 删除接口 */
-  requestDeleteByRecord?: (record) => Promise<any>;
-  /** 删除相关 */
-  deleteProps?: {
-    /** 显示名称索引 */
-    nameIndex: string;
-    /** 删除确认描述 */
-    desc?: string;
-    /** 文本 */
-    operateText?: string;
-  };
-
-  /** 弹窗表单 */
-  detailForm?: (formProps: { readonly: boolean }, info: { action: CrudAction }) => ReactNode;
-  /** detailForm 的 formRef */
-  detailFormInstance?: ProFormInstance;
-
-  /** 新增接口 */
-  requestCreateByValues?: (values) => Promise<any>;
-  createProps?: {
-    /** 成功文案 */
-    successText?: string | (() => string);
-  };
-
-  /** 更新接口 */
-  requestUpdateById?: (values) => Promise<any>;
-  updateProps?: {
-    /** 文本 */
-    operateText?: string;
-    /** 成功文案 */
-    successText?: string | (() => string);
-  };
-
-  /** 获取详情接口 */
-  requestGetByRecord?: (record) => Promise<any>;
-
-  /** 跳转到详情的索引 ，默认 id */
-  detailIdIndex?: string;
-}
-
-interface CRUDMethods {
-  getActionRef: () => React.MutableRefObject<ActionType | undefined>;
-}
-
-const CRUD = forwardRef<CRUDMethods, CRUDProps>(function CRUD(props, ref) {
+function CRUDComponent<
+  DataSource extends Record<string, any> = any,
+  Key extends string | number = string,
+>(props: CRUDProps<DataSource, Key>, ref: React.ForwardedRef<CRUDMethods>) {
   const {
     actions,
     tableProps,
@@ -99,22 +27,21 @@ const CRUD = forwardRef<CRUDMethods, CRUDProps>(function CRUD(props, ref) {
     createProps,
     requestCreateByValues,
     updateProps,
-    requestUpdateById,
+    requestUpdateById: originalRequestUpdateById,
+    requestUpdateByValues: originalRequestUpdateByValues,
     detailFormInstance,
+    batchActions,
   } = props;
 
+  const requestUpdateById = originalRequestUpdateByValues || originalRequestUpdateById;
+
   const actionRef = useRef<ActionType>();
-  const location = useLocation();
 
-  useImperativeHandle(
-    ref,
-    () => {
-      return {
-        getActionRef: () => actionRef,
-      };
-    },
-    [actionRef]
-  );
+  useImperativeHandle(ref, () => {
+    return {
+      getActionRef: () => actionRef,
+    };
+  }, [actionRef]);
 
   const detailProps = useMemo(
     () => ({
@@ -134,7 +61,7 @@ const CRUD = forwardRef<CRUDMethods, CRUDProps>(function CRUD(props, ref) {
       detailFormInstance,
       createProps,
       updateProps,
-    ]
+    ],
   );
 
   const getHandleDelete = useCallback(
@@ -149,7 +76,7 @@ const CRUD = forwardRef<CRUDMethods, CRUDProps>(function CRUD(props, ref) {
         throw new Error('没有传 requestDeleteByRecord');
       };
     },
-    [requestDeleteByRecord]
+    [requestDeleteByRecord],
   );
 
   const handleReload = useCallback(() => {
@@ -176,12 +103,9 @@ const CRUD = forwardRef<CRUDMethods, CRUDProps>(function CRUD(props, ref) {
               />
             )}
             {actions.includes('read_detail') && (
-              <Link
-                to={`${location.pathname}/detail/${record[detailIdIndex || 'id']}`}
-                target={readProps?.target}
-              >
+              <a href={`./detail/${record[detailIdIndex || 'id']}`} target={readProps?.target}>
                 {readProps?.operateText || '查看'}
-              </Link>
+              </a>
             )}
             {actions.includes('update') && (
               <CRUDDetail
@@ -230,7 +154,6 @@ const CRUD = forwardRef<CRUDMethods, CRUDProps>(function CRUD(props, ref) {
     readProps?.operateText,
     readProps?.target,
     detailProps,
-    location.pathname,
     detailIdIndex,
     updateProps?.operateText,
     deleteProps,
@@ -239,6 +162,7 @@ const CRUD = forwardRef<CRUDMethods, CRUDProps>(function CRUD(props, ref) {
 
   const toolBarRender = useCallback(
     (...args) => [
+      // @ts-ignore
       ...(tableProps.toolBarRender ? tableProps.toolBarRender(...args) : []),
       actions.includes('create') && (
         <CRUDDetail
@@ -249,9 +173,16 @@ const CRUD = forwardRef<CRUDMethods, CRUDProps>(function CRUD(props, ref) {
         />
       ),
     ],
-    [actions, createButton, detailProps, handleReload, tableProps]
+    [actions, createButton, detailProps, handleReload, tableProps],
   );
 
+  const { rowSelection, tableAlertRender, tableAlertOptionRender } = useRowSelection<
+    DataSource,
+    Key
+  >({
+    batchActions,
+  });
+
   return (
     <div className="crud-table">
       <Table
@@ -260,10 +191,19 @@ const CRUD = forwardRef<CRUDMethods, CRUDProps>(function CRUD(props, ref) {
         actionRef={actionRef}
         toolBarRender={toolBarRender}
         columns={newColumns}
+        rowSelection={rowSelection}
+        tableAlertRender={tableAlertRender}
+        tableAlertOptionRender={tableAlertOptionRender}
       />
     </div>
   );
-});
+}
+
+const CRUD = forwardRef(CRUDComponent) as <
+  DataSource extends Record<string, any> = any,
+  Key extends string | number = string,
+>(
+  props: CRUDProps<DataSource, Key> & { ref?: React.ForwardedRef<CRUDMethods> },
+) => JSX.Element;
 
 export { CRUD };
-export type { CRUDProps, CRUDMethods };