@magicbe/antd-crud 0.0.43 → 0.0.45

package/README.md

@@ -0,0 +1,301 @@
+# @magicbe/antd-crud
+
+一个基于 Ant Design 的 CRUD 表格组件库，简化开发中的增删改查操作。
+
+## 特性
+
+- 快速构建完整的 CRUD 表格界面
+- 支持多种表单字段类型
+- 内置筛选、新增、编辑、删除功能
+- 可自定义操作按钮
+- 基于 Ant Design，样式统一
+
+## 安装
+
+```bash
+# 使用 npm
+npm install @magicbe/antd-crud
+
+# 使用 yarn
+yarn add @magicbe/antd-crud
+
+# 使用 pnpm
+pnpm add @magicbe/antd-crud
+```
+
+## 依赖
+
+- antd: 5.22.5+
+- react: 18.2.0+
+- react-dom: 18.2.0+
+
+## 基本使用
+
+```tsx
+import React from 'react';
+import { CrudTable, type ContentProps, type ColumnType, type delHandle, type editHandle, type addHandle } from '@magicbe/antd-crud';
+
+interface User {
+    id: number;
+    name: string;
+    age: number;
+    address: string;
+}
+
+const columns: ColumnType<User>['columns'] = [
+    {
+        title: '姓名',
+        dataIndex: 'name',
+        filter: 'Input',
+        field: {
+            type: 'Input',
+            rules: [{ required: true }],
+            ...({})
+        },
+        add: true,
+        edit: true,
+    },
+    {
+        title: '年龄',
+        dataIndex: 'age',
+        field: 'InputNumber',
+        add: true,
+        edit: true,
+    },
+    {
+        title: '地址',
+        dataIndex: 'address',
+        field: 'TextArea',
+        add: true,
+        edit: true,
+    },
+    {
+        title: "所属区域",
+        dataIndex: "region",
+        field: {
+            type: "Select",
+            option: {
+                options: [
+                    {
+                        label: "区域1",
+                        value: "1",
+                    },
+                    {
+                        label: "区域2",
+                        value: "2",
+                    },
+                ]
+            },
+            rules: [{ required: true }]
+        },
+        edit: true,
+    },
+];
+
+const App: React.FC = () => {
+    const getSources: ContentProps<User>['getSources'] = async (params: any = {}) => {
+        const {
+            current: page = 1,
+            pageSize: size = 10,
+        } = params;
+
+        // 模拟API请求
+        
+        return {
+            sources: [
+                { id: 1, name: '张三', age: 28, address: '北京市海淀区' },
+                { id: 2, name: '李四', age: 32, address: '上海市浦东新区' },
+            ],
+            total: 2,
+            page,
+            size,
+        };
+    };
+
+    const add: addHandle = async (value) => {
+        // 模拟新增操作
+        console.log('add:', value);
+        return Promise.resolve();
+    };
+
+    const edit: editHandle = async (value) => {
+        // 模拟编辑操作
+        console.log('edit:', value);
+        return Promise.resolve();
+    };
+
+    const del: delHandle = async (value) => {      
+        // 模拟删除操作
+        console.log('delete:', value);
+        return Promise.resolve();
+    };
+
+    return (
+        <CrudTable
+            columns={columns}
+            getSources={getSources}
+            add={add}
+            edit={edit}
+            del={del}
+            rowKey={"uuid"}
+        />
+    );
+};
+
+export default App;
+```
+
+## API 文档
+
+### CrudTable
+
+主要组件，集成了筛选、操作按钮和表格功能。
+
+#### 属性
+
+| 属性名 | 类型 | 说明 |
+|--------|------|------|
+| columns | ColumnType[] | 表格列配置 |
+| getSources | (params?: GetSourceFunctionParams) => Promise<Source> | 获取数据的方法 |
+| add | addHandle \| addHandleMap | 新增操作方法 |
+| edit | editHandle \| editHandleMap | 编辑操作方法 |
+| del | delHandle \| Partial<HandleMap<delHandle>> | 删除操作方法 |
+| action | Action | 自定义操作按钮 |
+| rowSelection | RowSelectionType | 行选择类型 |
+| pagination | false | 是否显示分页（暂仅支持false） |
+| drawer | number \| DrawerProps | 抽屉配置 |
+| pageSizeOptions | PaginationProps['pageSizeOptions'] | 每页条数选项 |
+| actionColumn | ColumnType<any> | 操作列配置 |
+
+### ColumnType
+
+表格列配置，继承自 Ant Design 的 ColumnType，增加了以下属性：
+
+| 属性名 | 类型 | 说明 |
+|--------|------|------|
+| field | ColumnFieldKeys \| ColumnField \| React.FC | 表单字段类型 |
+| filter | boolean \| ColumnFieldKeys \| ColumnField \| React.FC | 筛选字段类型 |
+| add | boolean \| ColumnFieldKeys \| ColumnField \| React.FC | 新增表单字段类型 |
+| edit | boolean \| ColumnFieldKeys \| ColumnField \| React.FC | 编辑表单字段类型 |
+
+### ColumnField 类型
+
+支持的表单字段类型：
+- Input
+- Input.Password
+- TextArea
+- InputNumber
+- Select
+- Cascader
+- TreeSelect
+- Checkbox
+- Checkbox.Group
+- DatePicker
+- DatePicker.YearPicker
+- DatePicker.MonthPicker
+- DatePicker.WeekPicker
+- DatePicker.TimePicker
+- DatePicker.RangePicker
+- DatePicker.QuarterPicker
+- TimePicker
+- TimePicker.RangePicker
+- Radio
+- Radio.Group
+- Switch
+
+### TableContextProvider 和 useTableContext
+
+提供表格上下文，可用于自定义组件中获取表格状态和方法。
+
+### Filter
+
+筛选组件，可单独使用。
+
+### Action
+
+操作按钮组件，提供了新增、编辑、删除等默认操作。
+
+### Table
+
+表格组件，继承自 Ant Design 的 Table。
+
+### CrudConfigProvider
+
+配置提供者，继承自 Ant Design 的 ConfigProvider。
+
+## 高级用法
+
+### 自定义操作按钮
+
+```tsx
+<CrudTable
+  columns={columns}
+  getSources={getSources}
+  action={{
+    master: {
+      add: true,
+      del: true,
+      // 自定义主操作按钮
+    },
+    record: {
+      edit: true,
+      del: true,
+      // 自定义行操作按钮
+    },
+  }}
+/>
+```
+
+### 使用 Context
+
+```tsx
+import { TableContextProvider, useTableContext } from '@magicbe/antd-crud';
+
+const CustomComponent: React.FC = () => {
+  const { table_ref } = useTableContext();
+  
+  const handleRefresh = () => {
+    table_ref.current?.loadRecords();
+  };
+  
+  return (
+    <button onClick={handleRefresh}>刷新数据</button>
+  );
+};
+
+const App: React.FC = () => {
+  return (
+    <TableContextProvider {...props}>
+      <CustomComponent />
+    </TableContextProvider>
+  );
+};
+```
+
+### 配置主题
+
+```tsx
+import { CrudConfigProvider } from '@magicbe/antd-crud';
+
+const App: React.FC = () => {
+  return (
+    <CrudConfigProvider theme={{
+      token: {
+        colorPrimary: '#1890ff',
+      },
+    }}>
+      <CrudTable {...props} />
+    </CrudConfigProvider>
+  );
+};
+```
+
+## 注意事项
+
+1. 组件依赖 antd 5.22.5 及以上版本，请确保项目中 antd 版本符合要求。
+2. 目前 pagination 仅支持设置为 false，分页功能内置实现。
+3. 自定义组件时，请使用 TableContextProvider 包裹以确保能正确获取上下文。
+
+## License
+
+MIT

package/dist/components/Action.d.ts

@@ -1,6 +1,5 @@
 import React, { PropsWithChildren } from "react";
-import { ActionProps, ActionRef } from "../interface";
-declare const _default: React.ForwardRefExoticComponent<ActionProps & React.RefAttributes<ActionRef>>;
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
 export default _default;
 /**自定义渲染 */
 export declare const CustormRender: React.FC<PropsWithChildren>;

package/dist/components/Action.js

@@ -47,10 +47,11 @@ import createEmotion from "@emotion/css/create-instance";
 import { useTableContext } from "./Context";
 import AddForm from "./Add";
 import EditForm from "./Edit";
+import { useCrudConfigContext } from "../config";
 var _a = createEmotion({ key: "action" }), css = _a.css, cx = _a.cx;
 var wrapper_css = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    margin-bottom: 25px;\n"], ["\n    margin-bottom: 25px;\n"])));
 /**操作 */
-var Action = function (_a, ref) {
+var Action = React.forwardRef(function (_a, ref) {
     var className = _a.className;
     var action = useTableContext().action;
     useImperativeHandle(ref, function () { return ({}); });
@@ -124,8 +125,11 @@ var Action = function (_a, ref) {
     }
     /**默认渲染 */
     return (_jsxs(Space, { className: cx(wrapper_css, className), children: [_jsx(AppendAction, {}), _jsx(EditAction, {}), _jsx(DeleteAction, {})] }));
-};
-export default React.forwardRef(Action);
+});
+export default (function () {
+    var action_ref = useTableContext().action_ref;
+    return _jsx(Action, { ref: action_ref });
+});
 /**自定义渲染 */
 export var CustormRender = function (_a) {
     var children = _a.children;
@@ -139,7 +143,8 @@ var append_action_default_children = (_jsxs(Button, { type: "primary", children:
 export var AppendAction = function (_a) {
     var _b = _a.children, children = _b === void 0 ? append_action_default_children : _b;
     var _c = Modal.useModal(), modalInstance = _c[0], modalContextHolder = _c[1];
-    var _d = useTableContext(), content_ref = _d.content_ref, table_ref = _d.table_ref, filter_ref = _d.filter_ref, form_ref = _d.form_ref, add = _d.add, drawer = _d.drawer;
+    var showErrorModal = useCrudConfigContext().showErrorModal;
+    var _d = useTableContext(), table_ref = _d.table_ref, filter_ref = _d.filter_ref, form_ref = _d.form_ref, add = _d.add, drawer = _d.drawer;
     /**添加表单抽屉 */
     var _e = useState(false), add_drawer_open = _e[0], setAdd_drawer_open = _e[1];
     var _f = useState(), init_data = _f[0], setInit_data = _f[1];
@@ -215,7 +220,7 @@ export var AppendAction = function (_a) {
                     case 10:
                         error_1 = _f.sent();
                         console.error(error_1);
-                        modalInstance.error({
+                        showErrorModal && modalInstance.error({
                             title: "错误",
                             content: String(error_1)
                         });
@@ -347,7 +352,8 @@ var edit_action_default_children = (_jsxs(Button, { children: [_jsx(EditFilled,
 export var EditAction = function (_a) {
     var _b = _a.children, children = _b === void 0 ? edit_action_default_children : _b;
     var _c = Modal.useModal(), modalInstance = _c[0], modalContextHolder = _c[1];
-    var _d = useTableContext(), content_ref = _d.content_ref, table_ref = _d.table_ref, filter_ref = _d.filter_ref, form_ref = _d.form_ref, edit = _d.edit, drawer = _d.drawer;
+    var showErrorModal = useCrudConfigContext().showErrorModal;
+    var _d = useTableContext(), table_ref = _d.table_ref, filter_ref = _d.filter_ref, form_ref = _d.form_ref, edit = _d.edit, drawer = _d.drawer;
     /**编辑 */
     var _e = useState(false), edit_drawer_open = _e[0], setEdit_drawer_open = _e[1];
     var _f = useState(false), loading = _f[0], setLoading = _f[1];
@@ -425,7 +431,7 @@ export var EditAction = function (_a) {
                     case 10:
                         error_4 = _f.sent();
                         console.error(error_4);
-                        modalInstance.error({
+                        showErrorModal && modalInstance.error({
                             title: "错误",
                             content: String(error_4)
                         });

package/dist/components/Filter.d.ts

@@ -1,4 +1,2 @@
-import React from "react";
-import { FilterProps, FilterRef } from "../interface";
-declare const _default: React.ForwardRefExoticComponent<FilterProps & React.RefAttributes<FilterRef>>;
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/dist/components/Filter.js

@@ -33,9 +33,9 @@ import { Button, Form, Space } from "antd";
 import createEmotion from "@emotion/css/create-instance";
 import { SearchOutlined, UndoOutlined } from "@ant-design/icons";
 import { get, isObject, isString } from "lodash";
-var _a = createEmotion({ key: "filter" }), css = _a.css, cx = _a.cx;
+var css = createEmotion({ key: "filter" }).css;
 var wrapper_css = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    margin-bottom: 25px;\n"], ["\n    margin-bottom: 25px;\n"])));
-var Filter = function (_a, ref) {
+var Filter = React.forwardRef(function (_a, ref) {
     var form = Form.useForm()[0];
     var _b = useTableContext(), columns = _b.columns, table_ref = _b.table_ref;
     var filters = columns === null || columns === void 0 ? void 0 : columns.filter(function (_a) {
@@ -72,6 +72,9 @@ var Filter = function (_a, ref) {
     if (!(filters === null || filters === void 0 ? void 0 : filters.length))
         return _jsx(Fragment, {});
     return (_jsxs(Form, { layout: "inline", onFinish: onFinish, className: wrapper_css, form: form, initialValues: initialValues, children: [filters === null || filters === void 0 ? void 0 : filters.map(function (filter) { return _createElement(Field, __assign({}, filter, { key: String(filter.dataIndex) })); }), _jsxs(Space, { size: 14, children: [_jsxs(Button, { htmlType: "submit", type: "primary", children: [_jsx(SearchOutlined, {}), "\u67E5\u8BE2"] }), _jsxs(Button, { htmlType: "reset", children: [_jsx(UndoOutlined, {}), "\u91CD\u7F6E"] })] })] }));
-};
-export default React.forwardRef(Filter);
+});
+export default (function () {
+    var filter_ref = useTableContext().filter_ref;
+    return _jsx(Filter, { ref: filter_ref });
+});
 var templateObject_1;

package/dist/components/Table.d.ts

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from "react";
-import { TableProps, TableRef, type AnyObject } from "../interface";
-declare const _default: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<TableRef>>;
+import { type AnyObject } from "../interface";
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
 export default _default;
 interface ActionProps {
     row: AnyObject;

package/dist/components/Table.js

@@ -69,7 +69,8 @@ import { useTableContext } from "./Context";
 import AddForm from "./Add";
 import EditForm from "./Edit";
 import { css } from "@emotion/css";
-var Table = function (_a, ref) {
+import { useCrudConfigContext } from "../config";
+var Table = React.forwardRef(function (_a, ref) {
     var _b = useTableContext(), getSources = _b.getSources, selectionType = _b.rowSelection, action = _b.action, content_ref = _b.content_ref, filter_ref = _b.filter_ref, pageSizeOptions = _b.pageSizeOptions, _c = _b.actionColumn, actionColumn = _c === void 0 ? {} : _c, _pagination_ = _b.pagination, props = __rest(_b, ["getSources", "rowSelection", "action", "content_ref", "filter_ref", "pageSizeOptions", "actionColumn", "pagination"]);
     var _d = useState([]), sources = _d[0], setSources = _d[1];
     var _e = useState(), total = _e[0], setTotal = _e[1];
@@ -200,13 +201,17 @@ var Table = function (_a, ref) {
     }); });
     useEffect(loadRecords, []);
     return (_jsx(AntdTable, __assign({}, props, { rowSelection: rowSelection, columns: columns, loading: loading, onChange: loadRecords, dataSource: sources, pagination: pagination })));
-};
-export default React.forwardRef(Table);
+});
+export default (function () {
+    var table_ref = useTableContext().table_ref;
+    return _jsx(Table, { ref: table_ref });
+});
 var action_cls = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding-top: 0;\n    padding-bottom: 0;\n"], ["\n    padding-top: 0;\n    padding-bottom: 0;\n"])));
 var append_action_default_children = (_jsxs(Button, { type: "link", size: "small", className: action_cls, children: [_jsx(PlusOutlined, {}), "\u65B0\u589E"] }));
 export var AppendAction = function (_a) {
     var _b = _a.children, children = _b === void 0 ? append_action_default_children : _b, row = _a.row;
-    var _c = useTableContext(), rowKey = _c.rowKey, content_ref = _c.content_ref, table_ref = _c.table_ref, filter_ref = _c.filter_ref, form_ref = _c.form_ref, add = _c.add, drawer = _c.drawer;
+    var showErrorModal = useCrudConfigContext().showErrorModal;
+    var _c = useTableContext(), rowKey = _c.rowKey, table_ref = _c.table_ref, filter_ref = _c.filter_ref, form_ref = _c.form_ref, add = _c.add, drawer = _c.drawer;
     var _d = Modal.useModal(), modalInstance = _d[0], modalContextHolder = _d[1];
     var _e = useState(false), add_drawer_open = _e[0], setAdd_drawer_open = _e[1];
     var _f = useState(false), loading = _f[0], setLoading = _f[1];
@@ -279,7 +284,7 @@ export var AppendAction = function (_a) {
                     case 9:
                         error_1 = _d.sent();
                         console.error(error_1);
-                        modalInstance.error({
+                        showErrorModal && modalInstance.error({
                             title: "错误",
                             content: String(error_1)
                         });
@@ -329,7 +334,8 @@ export var AppendAction = function (_a) {
 var edit_action_default_children = (_jsxs(Button, { type: "link", size: "small", className: action_cls, children: [_jsx(EditFilled, {}), "\u7F16\u8F91"] }));
 export var EditAction = function (_a) {
     var _b = _a.children, children = _b === void 0 ? edit_action_default_children : _b, row = _a.row;
-    var _c = useTableContext(), edit = _c.edit, rowKey = _c.rowKey, content_ref = _c.content_ref, table_ref = _c.table_ref, filter_ref = _c.filter_ref, form_ref = _c.form_ref, drawer = _c.drawer;
+    var showErrorModal = useCrudConfigContext().showErrorModal;
+    var _c = useTableContext(), edit = _c.edit, rowKey = _c.rowKey, table_ref = _c.table_ref, filter_ref = _c.filter_ref, form_ref = _c.form_ref, drawer = _c.drawer;
     var _d = Modal.useModal(), modalInstance = _d[0], modalContextHolder = _d[1];
     var _e = useState(false), edit_drawer_open = _e[0], setEdit_drawer_open = _e[1];
     var _f = useState(), init_data = _f[0], setInit_data = _f[1];
@@ -418,7 +424,7 @@ export var EditAction = function (_a) {
                     case 10:
                         error_3 = _d.sent();
                         console.error(error_3);
-                        modalInstance.error({
+                        showErrorModal && modalInstance.error({
                             title: "错误",
                             content: String(error_3)
                         });

package/dist/components/index.js

@@ -16,10 +16,11 @@ import Action from "./Action";
 import Table from "./Table";
 import { TableContextProvider, useTableContext } from "./Context";
 var Content = function () {
-    var _a = useTableContext(), filter_ref = _a.filter_ref, action_ref = _a.action_ref, table_ref = _a.table_ref, content_ref = _a.content_ref;
-    return (_jsxs("div", { ref: content_ref, children: [_jsx(Filter, { ref: filter_ref }), _jsx(Action, { ref: action_ref }), _jsx(Table, { ref: table_ref })] }));
+    var content_ref = useTableContext().content_ref;
+    return (_jsxs("div", { ref: content_ref, children: [_jsx(Filter, {}), _jsx(Action, {}), _jsx(Table, {})] }));
 };
 var ContentPrev = function (props, ref) {
-    return (_jsx(TableContextProvider, __assign({}, props, { ref: ref, children: _jsx(Content, {}) })));
+    var _a = props.children, children = _a === void 0 ? _jsx(Content, {}) : _a;
+    return (_jsx(TableContextProvider, __assign({}, props, { ref: ref, children: children })));
 };
 export default React.forwardRef(ContentPrev);

package/dist/config.d.ts

@@ -1,4 +1,9 @@
 import { ConfigProviderProps } from "antd";
-import React, { PropsWithChildren } from "react";
-declare const CrudConfigProvider: React.FC<PropsWithChildren & ConfigProviderProps>;
+import React, { FC, PropsWithChildren } from "react";
+export interface CustomConfigProviderProps {
+    showErrorModal?: boolean;
+}
+export declare const CrudConfigContextProvider: FC<PropsWithChildren<CustomConfigProviderProps>>;
+export declare const useCrudConfigContext: () => CustomConfigProviderProps;
+declare const CrudConfigProvider: React.FC<PropsWithChildren<ConfigProviderProps & CustomConfigProviderProps>>;
 export default CrudConfigProvider;

package/dist/config.js

@@ -22,8 +22,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ConfigProvider } from "antd";
+import React from "react";
+var CrudConfigContext = React.createContext({});
+export var CrudConfigContextProvider = function (_a) {
+    var children = _a.children, _b = _a.showErrorModal, showErrorModal = _b === void 0 ? true : _b;
+    return (_jsx(CrudConfigContext.Provider, { value: { showErrorModal: showErrorModal }, children: children }));
+};
+export var useCrudConfigContext = function () { return React.useContext(CrudConfigContext); };
 var CrudConfigProvider = function (_a) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    return (_jsx(ConfigProvider, __assign({}, props, { children: children })));
+    var children = _a.children, _b = _a.showErrorModal, showErrorModal = _b === void 0 ? true : _b, props = __rest(_a, ["children", "showErrorModal"]);
+    return (_jsx(CrudConfigContextProvider, { showErrorModal: showErrorModal, children: _jsx(ConfigProvider, __assign({}, props, { children: children })) }));
 };
 export default CrudConfigProvider;

package/dist/index.d.ts

@@ -4,4 +4,4 @@ export { TableContextProvider, useTableContext, } from "./components/Context";
 export { default as Filter, } from "./components/Filter";
 export { default as Action, AppendAction as MastAppend, DeleteAction as MastDelete, EditAction as MastEdit, } from "./components/Action";
 export { default as Table, AppendAction as RowAppend, DeleteAction as RowDelete, EditAction as RowEdit, } from "./components/Table";
-export { default as CrudConfigProvider, } from "./config";
+export { default as CrudConfigProvider, type CustomConfigProviderProps, CrudConfigContextProvider, useCrudConfigContext, } from "./config";

package/dist/index.js

@@ -3,4 +3,4 @@ export { TableContextProvider, useTableContext, } from "./components/Context";
 export { default as Filter, } from "./components/Filter";
 export { default as Action, AppendAction as MastAppend, DeleteAction as MastDelete, EditAction as MastEdit, } from "./components/Action";
 export { default as Table, AppendAction as RowAppend, DeleteAction as RowDelete, EditAction as RowEdit, } from "./components/Table";
-export { default as CrudConfigProvider, } from "./config";
+export { default as CrudConfigProvider, CrudConfigContextProvider, useCrudConfigContext, } from "./config";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magicbe/antd-crud",
-  "version": "0.0.43",
+  "version": "0.0.45",
   "description": "antd crud table",
   "author": "wang quan",
   "private": false,