@fe-free/core 1.3.1 → 1.3.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @fe-free/core
 
+## 1.3.3
+
+### Patch Changes
+
+- feat: add CRUDOfSimple
+  - @fe-free/tool@1.3.3
+
+## 1.3.2
+
+### Patch Changes
+
+- feat: crud
+  - @fe-free/tool@1.3.2
+
 ## 1.3.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "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.1"
+    "@fe-free/tool": "1.3.3"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "^2.8.7",

package/src/crud/crud.stories.tsx

@@ -109,8 +109,78 @@ export const ReadDetail: Story = {
   },
 };
 
+export const MoreCustom: 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,
+          toolBarRender: () => {
+            return [<div key="custom1">自定义1</div>, <div key="custom2">自定义2</div>];
+          },
+        }}
+        operateColumnProps={{
+          // 自定义宽度
+          width: 300,
+          // 自定义操作列
+          moreOperator: () => {
+            return <div>自定义</div>;
+          },
+          // 自定义操作列之后
+          moreOperatorAfter: () => {
+            return <div>自定义</div>;
+          },
+        }}
+        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}
+      />
+    );
+  },
+};
+
 // 表格表单和详情表单 ref
-const RefComponent = () => {
+const FormRefComponent = () => {
   const formRef = useRef<any>();
   const [detailFormInstance] = ProForm.useForm();
 
@@ -156,8 +226,8 @@ const RefComponent = () => {
   );
 };
 
-export const Ref: Story = {
-  render: () => <RefComponent />,
+export const FormRef: Story = {
+  render: () => <FormRefComponent />,
 };
 
 // 通过 ref 获取 actionRef

package/src/crud/crud.tsx

@@ -8,6 +8,7 @@ import { CRUDDetail } from './crud_detail';
 import './style.scss';
 import type { CRUDMethods, CRUDProps } from './types';
 import { useRowSelection } from './use_row_selection';
+import { useTips } from './use_tips';
 
 function CRUDComponent<
   DataSource extends Record<string, any> = any,
@@ -33,9 +34,11 @@ function CRUDComponent<
     batchActions,
   } = props;
 
+  useTips(props);
+
   const requestUpdateById = originalRequestUpdateByValues || originalRequestUpdateById;
 
-  const actionRef = useRef<ActionType>();
+  const actionRef = useRef<ActionType | undefined>(undefined);
 
   useImperativeHandle(ref, () => {
     return {
@@ -161,18 +164,19 @@ function CRUDComponent<
   ]);
 
   const toolBarRender = useCallback(
-    (...args) => [
-      // @ts-ignore
-      ...(tableProps.toolBarRender ? tableProps.toolBarRender(...args) : []),
-      actions.includes('create') && (
-        <CRUDDetail
-          onSuccess={handleReload}
-          trigger={createButton || <Button type="primary">新建</Button>}
-          action="create"
-          {...detailProps}
-        />
-      ),
-    ],
+    (...args) =>
+      [
+        // @ts-ignore
+        ...(tableProps.toolBarRender ? tableProps.toolBarRender(...args) : []),
+        actions.includes('create') && (
+          <CRUDDetail
+            onSuccess={handleReload}
+            trigger={createButton || <Button type="primary">新建</Button>}
+            action="create"
+            {...detailProps}
+          />
+        ),
+      ].filter(Boolean),
     [actions, createButton, detailProps, handleReload, tableProps],
   );
 
@@ -181,11 +185,12 @@ function CRUDComponent<
     Key
   >({
     batchActions,
+    actionRef,
   });
 
   return (
     <div className="crud-table">
-      <Table
+      <Table<DataSource>
         rowKey="id"
         {...tableProps}
         actionRef={actionRef}

package/src/crud/crud_of_simple.stories.tsx

@@ -0,0 +1,109 @@
+import { ProFormText } from '@ant-design/pro-components';
+import { CRUDOfSimple } from '@fe-free/core';
+import type { Meta, StoryObj } from '@storybook/react';
+import { fakeCreate, fakeDeleteByRecord, fakeRequest } from './demo/data';
+
+const meta: Meta<typeof CRUDOfSimple> = {
+  title: '@fe-free/core/CRUDOfSimple',
+  component: CRUDOfSimple,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof CRUDOfSimple>;
+
+// 基础用法
+export const Normal: Story = {
+  render: () => {
+    const columns = [
+      {
+        title: 'id',
+        dataIndex: 'id',
+        search: true,
+      },
+      {
+        title: '名字(省略)',
+        dataIndex: 'name',
+        search: true,
+        ellipsis: true,
+      },
+    ];
+
+    return (
+      <CRUDOfSimple
+        actions={['create', 'delete']}
+        tableProps={{
+          columns,
+          request: fakeRequest,
+          pagination: false,
+        }}
+        requestDeleteByRecord={fakeDeleteByRecord}
+        deleteProps={{
+          nameIndex: 'name',
+        }}
+        detailForm={(formProps) => (
+          <>
+            <ProFormText
+              {...formProps}
+              name="name"
+              label="名字"
+              required
+              rules={[{ required: true }]}
+              extra="extra extra extra extra"
+            />
+          </>
+        )}
+        requestCreateByValues={fakeCreate}
+      />
+    );
+  },
+};
+
+export const WithSearch: Story = {
+  render: () => {
+    const columns = [
+      {
+        title: 'id',
+        dataIndex: 'id',
+        search: true,
+      },
+      {
+        title: '名字(省略)',
+        dataIndex: 'name',
+        search: true,
+        ellipsis: true,
+      },
+    ];
+
+    return (
+      <CRUDOfSimple
+        actions={['create', 'delete']}
+        tableProps={{
+          columns,
+          request: fakeRequest,
+          pagination: false,
+        }}
+        requestDeleteByRecord={fakeDeleteByRecord}
+        deleteProps={{
+          nameIndex: 'name',
+        }}
+        detailForm={(formProps) => (
+          <>
+            <ProFormText
+              {...formProps}
+              name="name"
+              label="名字"
+              required
+              rules={[{ required: true }]}
+              extra="extra extra extra extra"
+            />
+          </>
+        )}
+        requestCreateByValues={fakeCreate}
+        simpleSearchProps={{
+          name: 'id',
+        }}
+      />
+    );
+  },
+};

package/src/crud/crud_of_simple.tsx

@@ -0,0 +1,118 @@
+import { useDebounce } from 'ahooks';
+import { Input } from 'antd';
+import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
+import { CRUD } from './crud';
+import type { CRUDMethods, CRUDProps } from './types';
+
+interface CRUDOfSimpleProps<
+  DataSource extends Record<string, any> = any,
+  Key extends string | number = string,
+> extends CRUDProps<DataSource, Key> {
+  // 传才开启搜索
+  simpleSearchProps?: {
+    /** 搜索项的名称，默认 keywords */
+    name: string;
+    /** 搜索项的 placeholder，默认 请输入 */
+    placeholder?: string;
+  };
+}
+
+function useTips(props) {
+  const { columns } = props;
+
+  useEffect(() => {
+    const hasSearchColumn = columns?.find((column) => column.search);
+    if (hasSearchColumn) {
+      console.warn('CRUDOfSimple 的 columns 中不能有 search 为 true 的列');
+    }
+  }, []);
+}
+
+function SearchRender(props: {
+  placeholder?: string;
+  value?: string;
+  onChange: (value: string) => void;
+}) {
+  return (
+    <Input
+      placeholder={props.placeholder ?? '输入搜索'}
+      allowClear
+      value={props.value}
+      onChange={(e) => props.onChange(e.target.value)}
+    />
+  );
+}
+
+function CRUDOfSimpleComponent(props: CRUDOfSimpleProps, ref: React.ForwardedRef<CRUDMethods>) {
+  const { simpleSearchProps, tableProps, ...rest } = props;
+
+  useTips(props);
+  const [searchValue, setSearchValue] = useState<string>('');
+
+  const debouncedSearchValue = useDebounce(searchValue, { wait: 300 });
+
+  const newColumns = useMemo(() => {
+    return (tableProps.columns || []).map((column) => ({
+      ...column,
+      search: false,
+    }));
+  }, [tableProps.columns]);
+
+  const toolBarRender = useCallback(
+    (...args) => {
+      return [
+        <div key="search">
+          {simpleSearchProps && (
+            <SearchRender
+              placeholder={simpleSearchProps.placeholder}
+              value={searchValue}
+              onChange={(value) => setSearchValue(value)}
+            />
+          )}
+        </div>,
+        // @ts-ignore
+        ...(tableProps.toolBarRender ? tableProps.toolBarRender(...args) : []),
+      ];
+    },
+    [searchValue, simpleSearchProps, tableProps],
+  );
+
+  const newParams = useMemo(() => {
+    if (!simpleSearchProps) {
+      return tableProps.params;
+    }
+
+    return {
+      ...tableProps.params,
+      [simpleSearchProps.name]: debouncedSearchValue,
+    };
+  }, [debouncedSearchValue, simpleSearchProps, tableProps.params]);
+
+  return (
+    <div className="crud-of-simple">
+      <CRUD
+        ref={ref}
+        {...rest}
+        tableProps={{
+          ...tableProps,
+          params: newParams,
+          cardBordered: false,
+          showHeader: false,
+          ghost: true,
+          columns: newColumns,
+          toolBarRender,
+        }}
+      />
+    </div>
+  );
+}
+
+const CRUDOfSimple = forwardRef(CRUDOfSimpleComponent) as <
+  DataSource extends Record<string, any> = any,
+  Key extends string | number = string,
+>(
+  props: CRUDOfSimpleProps<DataSource, Key> & { ref?: React.ForwardedRef<CRUDMethods> },
+) => JSX.Element;
+
+export { CRUDOfSimple };
+export type { CRUDOfSimpleProps };

package/src/crud/demo/data.tsx

@@ -58,12 +58,24 @@ let fakeData = makeData(21);
 async function fakeRequest(params) {
   console.log('fakeRequest', params);
 
+  let data = fakeData;
+  Object.keys(params).forEach((field) => {
+    if (params[field] !== undefined && params[field] !== '') {
+      data = data.filter((item) => {
+        if (typeof item[field] === 'string') {
+          return item[field].includes(params[field]);
+        }
+        return true;
+      });
+    }
+  });
+
   return new Promise((resolve) => {
     setTimeout(() => {
       resolve({
-        data: fakeData,
+        data,
         success: true,
-        total: fakeData.length,
+        total: data.length,
       });
     }, 1000);
   }) as Promise<any>;

package/src/crud/index.tsx

@@ -2,4 +2,6 @@ export { CRUD } from './crud';
 export { OperateDelete, useDelete } from './crud_delete';
 export { CRUDDetail } from './crud_detail';
 export type { CRUDDetailProps } from './crud_detail';
+export { CRUDOfSimple } from './crud_of_simple';
+export type { CRUDOfSimpleProps } from './crud_of_simple';
 export type { CRUDMethods, CRUDProps } from './types';

package/src/crud/types.tsx

@@ -11,17 +11,33 @@ import type { TableProps } from '../table';
  */
 type CrudAction = 'create' | 'read' | 'read_detail' | 'update' | 'delete';
 
-interface CRUDProps<
-  DataSource extends Record<string, any> = any,
-  Key extends string | number = string,
-> {
+interface CRUDProps<DataSource = any, Key = string> {
   actions: CrudAction[];
 
+  // *** 表单 ***
+
+  /** 弹窗表单 */
+  detailForm?: (formProps: { readonly: boolean }, info: { action: CrudAction }) => ReactNode;
+  /** detailForm 的 formRef */
+  detailFormInstance?: ProFormInstance;
+
+  // *** Create 新建 ***
+
+  /** 新增接口 */
+  requestCreateByValues?: (values: Partial<DataSource>) => Promise<any>;
   /** 新建按钮，默认新建 */
   createButton?: ReactNode;
+  /** create 更多设置 */
+  createProps?: {
+    /** 成功文案 */
+    successText?: string | (() => string);
+  };
+
+  // *** Read 表格 ***
 
   /** 表格相关 */
   tableProps: TableProps<DataSource>;
+  /** 表格操作列相关 */
   operateColumnProps?: {
     width?: number;
     /** 扩展操作区域，再其他操作之前 */
@@ -29,6 +45,14 @@ interface CRUDProps<
     /** 扩展操作区域，在其他操作之后 */
     moreOperatorAfter?: (record: DataSource) => ReactNode;
   };
+
+  // *** Read 详情 ***
+
+  /** 获取详情接口 */
+  requestGetByRecord?: (record: DataSource) => Promise<any>;
+  /** 跳转到详情的索引 ，默认 id */
+  detailIdIndex?: string;
+  /** read 更多设置 */
   readProps?: {
     /** 文本 */
     operateText?: string;
@@ -36,29 +60,7 @@ interface CRUDProps<
     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);
-  };
+  // *** Update 更新 ***
 
   /** 更新接口 */
   requestUpdateByValues?: (values: Partial<DataSource>) => Promise<any>;
@@ -71,11 +73,21 @@ interface CRUDProps<
     successText?: string | (() => string);
   };
 
-  /** 获取详情接口 */
-  requestGetByRecord?: (record: DataSource) => Promise<any>;
+  // *** Delete 删除 ***
 
-  /** 跳转到详情的索引 ，默认 id */
-  detailIdIndex?: string;
+  /** 删除接口 */
+  requestDeleteByRecord?: (record: DataSource) => Promise<any>;
+  /** 删除相关 */
+  deleteProps?: {
+    /** 显示名称索引 */
+    nameIndex: keyof DataSource;
+    /** 删除确认描述 */
+    desc?: string;
+    /** 文本 */
+    operateText?: string;
+  };
+
+  // *** 批量操作 ***
 
   /** 批量操作 */
   batchActions?: {

package/src/crud/use_row_selection.tsx

@@ -1,12 +1,17 @@
+import type { ActionType } from '@ant-design/pro-components';
 import { Modal } from 'antd';
+import type { MutableRefObject } from 'react';
 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'] }) {
+function useRowSelection<DataSource, Key>({
+  batchActions,
+  actionRef,
+}: {
+  batchActions?: CRUDProps<DataSource, Key>['batchActions'];
+  actionRef?: MutableRefObject<ActionType | undefined>;
+}) {
   const rowSelection = useMemo(() => ({}), []);
 
   const tableAlertRender = useCallback(({ selectedRowKeys, onCleanSelected }) => {
@@ -55,6 +60,8 @@ function useRowSelection<
                     selectedRows,
                   });
                 }
+
+                actionRef?.current?.reload();
               }}
             >
               {action.btnText}
@@ -63,7 +70,7 @@ function useRowSelection<
         </div>
       );
     },
-    [batchActions],
+    [actionRef, batchActions],
   );
 
   if (!batchActions || batchActions.length === 0) {

package/src/crud/use_tips.tsx

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import type { CRUDProps } from './types';
+
+function useTips<DataSource, Key>(props: CRUDProps<DataSource, Key>) {
+  useEffect(() => {
+    if (props.actions.includes('create')) {
+      if (!props.requestCreateByValues) {
+        console.warn('actions 包含 create 时，需要传递 requestCreateByValues');
+      }
+    }
+
+    if (props.actions.includes('read')) {
+      if (!props.requestGetByRecord) {
+        console.warn('actions 包含 read 时，需要传递 requestGetByRecord');
+      }
+    }
+
+    if (props.actions.includes('update')) {
+      if (!props.requestGetByRecord || !props.requestUpdateByValues) {
+        console.warn(
+          'actions 包含 update 时，需要传递 requestGetByRecord 和 requestUpdateByValues',
+        );
+      }
+    }
+
+    if (props.actions.includes('delete')) {
+      if (!props.deleteProps?.nameIndex || !props.requestDeleteByRecord) {
+        console.warn('actions 包含 delete 时，需要传递 deleteProps 和 requestDeleteByRecord');
+      }
+    }
+  }, []);
+}
+
+export { useTips };

package/src/index.ts

@@ -1,7 +1,7 @@
 export { LoadingButton } from './button';
 
-export { CRUD, CRUDDetail, OperateDelete, useDelete } from './crud';
-export type { CRUDDetailProps, CRUDMethods, CRUDProps } from './crud';
+export { CRUD, CRUDDetail, CRUDOfSimple, OperateDelete, useDelete } from './crud';
+export type { CRUDDetailProps, CRUDMethods, CRUDOfSimpleProps, CRUDProps } from './crud';
 
 export { EditorJavascript } from './editor_javascript';
 export type { EditorJavascriptProps } from './editor_javascript';