@fe-free/core 1.3.0 → 1.3.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @fe-free/core
 
+## 1.3.1
+
+### Patch Changes
+
+- feat: crud
+  - @fe-free/tool@1.3.1
+
 ## 1.3.0
 
 ### Minor Changes

package/package.json

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

package/src/crud/crud.stories.tsx

@@ -348,3 +348,37 @@ export const CustomText: Story = {
     );
   },
 };
+
+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,91 +1,18 @@
-import type { ActionType, ProFormInstance } from '@ant-design/pro-components';
+import type { ActionType } from '@ant-design/pro-components';
 import { Button, Space } from 'antd';
-import type { ReactNode } from 'react';
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
 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);
-  };
-
-  /** 更新接口 */
-  requestUpdateByValues?: (values) => Promise<any>;
-  /** @deprecated 请使用 requestUpdateByValues 替代 */
-  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,
@@ -103,6 +30,7 @@ const CRUD = forwardRef<CRUDMethods, CRUDProps>(function CRUD(props, ref) {
     requestUpdateById: originalRequestUpdateById,
     requestUpdateByValues: originalRequestUpdateByValues,
     detailFormInstance,
+    batchActions,
   } = props;
 
   const requestUpdateById = originalRequestUpdateByValues || originalRequestUpdateById;
@@ -248,6 +176,13 @@ const CRUD = forwardRef<CRUDMethods, CRUDProps>(function CRUD(props, ref) {
     [actions, createButton, detailProps, handleReload, tableProps],
   );
 
+  const { rowSelection, tableAlertRender, tableAlertOptionRender } = useRowSelection<
+    DataSource,
+    Key
+  >({
+    batchActions,
+  });
+
   return (
     <div className="crud-table">
       <Table
@@ -256,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 { CRUDMethods, CRUDProps };

package/src/crud/crud_delete.tsx

@@ -11,15 +11,20 @@ interface Params {
 function useDelete(params: Params) {
   const { name, desc, onDelete } = params;
 
-  const doDelete = useCallback(() => {
-    Modal.confirm({
-      title: `确认删除 “${name}” 吗？`,
-      content: desc || '删除后不可恢复，请谨慎操作',
-      okText: '确定',
-      cancelText: '取消',
-      onOk: () => {
-        onDelete();
-      },
+  const doDelete = useCallback(async () => {
+    await new Promise((resolve) => {
+      Modal.confirm({
+        title: `确认删除 “${name}” 吗？`,
+        content: desc || '删除后不可恢复，请谨慎操作',
+        okText: '确定',
+        cancelText: '取消',
+        onOk: () => {
+          resolve(onDelete());
+        },
+        onCancel: () => {
+          resolve(undefined);
+        },
+      });
     });
   }, [name, desc, onDelete]);
 
@@ -30,20 +35,10 @@ function useDelete(params: Params) {
 
 function OperateDelete(props: Params) {
   const { name, desc, onDelete, operateText } = props;
-  const handleClick = useCallback(() => {
-    Modal.confirm({
-      title: `确认删除 “${name}” 吗？`,
-      content: desc || '删除后不可恢复，请谨慎操作',
-      okText: '确定',
-      cancelText: '取消',
-      onOk: () => {
-        onDelete();
-      },
-    });
-  }, [name, desc, onDelete]);
+  const { doDelete } = useDelete({ name, desc, onDelete, operateText });
 
   return (
-    <a style={{ color: 'red' }} onClick={handleClick}>
+    <a style={{ color: 'red' }} onClick={doDelete}>
       {operateText || '删除'}
     </a>
   );

package/src/crud/index.tsx

@@ -1,5 +1,5 @@
 export { CRUD } from './crud';
-export type { CRUDProps, CRUDMethods } from './crud';
+export { OperateDelete, useDelete } from './crud_delete';
 export { CRUDDetail } from './crud_detail';
 export type { CRUDDetailProps } from './crud_detail';
-export { useDelete, OperateDelete } from './crud_delete';
+export type { CRUDMethods, CRUDProps } from './types';

package/src/crud/types.tsx

@@ -0,0 +1,98 @@
+import type { ActionType, ProFormInstance } from '@ant-design/pro-components';
+import type { ReactNode } from 'react';
+import type { TableProps } from '../table';
+
+/**
+ * create 创建
+ * read 查看
+ * read_detail 详情页查看
+ * update 编辑
+ * delete 删除
+ */
+type CrudAction = 'create' | 'read' | 'read_detail' | 'update' | 'delete';
+
+interface CRUDProps<
+  DataSource extends Record<string, any> = any,
+  Key extends string | number = string,
+> {
+  actions: CrudAction[];
+
+  /** 新建按钮，默认新建 */
+  createButton?: ReactNode;
+
+  /** 表格相关 */
+  tableProps: TableProps<DataSource>;
+  operateColumnProps?: {
+    width?: number;
+    /** 扩展操作区域，再其他操作之前 */
+    moreOperator?: (record: DataSource) => ReactNode;
+    /** 扩展操作区域，在其他操作之后 */
+    moreOperatorAfter?: (record: DataSource) => ReactNode;
+  };
+  readProps?: {
+    /** 文本 */
+    operateText?: string;
+    /** 打开方式, action 为 read_detail 有效 */
+    target?: '_blank';
+  };
+
+  /** 删除接口 */
+  requestDeleteByRecord?: (record: DataSource) => Promise<any>;
+  /** 删除相关 */
+  deleteProps?: {
+    /** 显示名称索引 */
+    nameIndex: keyof DataSource;
+    /** 删除确认描述 */
+    desc?: string;
+    /** 文本 */
+    operateText?: string;
+  };
+
+  /** 弹窗表单 */
+  detailForm?: (formProps: { readonly: boolean }, info: { action: CrudAction }) => ReactNode;
+  /** detailForm 的 formRef */
+  detailFormInstance?: ProFormInstance;
+
+  /** 新增接口 */
+  requestCreateByValues?: (values: Partial<DataSource>) => Promise<any>;
+  createProps?: {
+    /** 成功文案 */
+    successText?: string | (() => string);
+  };
+
+  /** 更新接口 */
+  requestUpdateByValues?: (values: Partial<DataSource>) => Promise<any>;
+  /** @deprecated 请使用 requestUpdateByValues 替代 */
+  requestUpdateById?: (values: Partial<DataSource>) => Promise<any>;
+  updateProps?: {
+    /** 文本 */
+    operateText?: string;
+    /** 成功文案 */
+    successText?: string | (() => string);
+  };
+
+  /** 获取详情接口 */
+  requestGetByRecord?: (record: DataSource) => Promise<any>;
+
+  /** 跳转到详情的索引 ，默认 id */
+  detailIdIndex?: string;
+
+  /** 批量操作 */
+  batchActions?: {
+    /** 按钮文本 */
+    btnText: string;
+    /** 红色，且有确认框 */
+    danger?: boolean;
+    /** 批量操作接口 */
+    onClick: (
+      event: React.MouseEvent<HTMLElement>,
+      options: { selectedRowKeys: Key[]; selectedRows: DataSource[] },
+    ) => Promise<any>;
+  }[];
+}
+
+interface CRUDMethods {
+  getActionRef: () => React.MutableRefObject<ActionType | undefined>;
+}
+
+export type { CRUDMethods, CRUDProps };

package/src/crud/use_row_selection.tsx

@@ -0,0 +1,84 @@
+import { Modal } from 'antd';
+import { useCallback, useMemo } from 'react';
+import { LoadingButton } from '../button';
+import type { CRUDProps } from './types';
+
+function useRowSelection<
+  DataSource extends Record<string, any> = any,
+  Key extends string | number = string,
+>({ batchActions }: { batchActions?: CRUDProps<DataSource, Key>['batchActions'] }) {
+  const rowSelection = useMemo(() => ({}), []);
+
+  const tableAlertRender = useCallback(({ selectedRowKeys, onCleanSelected }) => {
+    return (
+      <div>
+        <span>
+          已选 {selectedRowKeys.length} 项
+          <a style={{ marginInlineStart: 8 }} onClick={onCleanSelected}>
+            取消选择
+          </a>
+        </span>
+      </div>
+    );
+  }, []);
+
+  const tableAlertOptionRender = useCallback(
+    ({ selectedRowKeys, selectedRows }) => {
+      return (
+        <div className="flex gap-2 items-center">
+          {batchActions?.map((action) => (
+            <LoadingButton
+              key={action.btnText}
+              type="link"
+              danger={action.danger}
+              onClick={async (event) => {
+                if (action.danger) {
+                  await new Promise((resolve) => {
+                    Modal.confirm({
+                      title: `确定要执行 ${action.btnText} 吗？`,
+                      onOk: () => {
+                        resolve(
+                          action.onClick(event, {
+                            selectedRowKeys,
+                            selectedRows,
+                          }),
+                        );
+                      },
+                      onCancel: () => {
+                        resolve(undefined);
+                      },
+                    });
+                  });
+                } else {
+                  await action.onClick(event, {
+                    selectedRowKeys,
+                    selectedRows,
+                  });
+                }
+              }}
+            >
+              {action.btnText}
+            </LoadingButton>
+          ))}
+        </div>
+      );
+    },
+    [batchActions],
+  );
+
+  if (!batchActions || batchActions.length === 0) {
+    return {
+      rowSelection: undefined,
+      tableAlertRender: undefined,
+      tableAlertOptionRender: undefined,
+    };
+  }
+
+  return {
+    rowSelection,
+    tableAlertRender,
+    tableAlertOptionRender,
+  };
+}
+
+export { useRowSelection };

package/src/table/index.tsx

@@ -1,5 +1,5 @@
+import type { ParamsType, ProTableProps } from '@ant-design/pro-components';
 import { ProTable } from '@ant-design/pro-components';
-import type { ProTableProps, ParamsType } from '@ant-design/pro-components';
 import { useMemo } from 'react';
 
 interface TableProps<DataSource = any, Params = any, ValueType = 'text'>
@@ -10,7 +10,7 @@ interface TableProps<DataSource = any, Params = any, ValueType = 'text'>
 
 function Table<
   DataSource extends Record<string, any> = any,
-  Params extends ParamsType = ParamsType
+  Params extends ParamsType = ParamsType,
 >(props: TableProps<DataSource, Params>) {
   const { columns, rowKey = 'id', search, ...rest } = props;
 
@@ -48,7 +48,7 @@ function Table<
       scroll={getTableScroll(newColumns)}
       search={
         hasSearch && {
-          layout: 'vertical',
+          labelWidth: 'auto',
           defaultCollapsed: false,
           ...search,
         }