@fe-free/core 2.5.4 → 2.5.6

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @fe-free/core
 
+## 2.5.6
+
+### Patch Changes
+
+- feat: crud
+  - @fe-free/tool@2.5.6
+
+## 2.5.5
+
+### Patch Changes
+
+- feat: crud
+  - @fe-free/tool@2.5.5
+
 ## 2.5.4
 
 ### Patch Changes

package/package.json

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

package/src/crud/index.tsx

@@ -2,6 +2,4 @@ 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/style.scss

@@ -8,39 +8,3 @@
     }
   }
 }
-
-.fec-crud-of-simple {
-  .ant-pro-table-list-toolbar {
-    border-bottom: 1px solid #f0f0f0;
-  }
-
-  &.fec-crud-of-simple-hover-show {
-    .ant-table-cell-fix-right {
-      position: absolute !important;
-      display: none;
-    }
-
-    .ant-table-row {
-      &:hover {
-        .ant-table-cell-fix-right {
-          display: block;
-        }
-      }
-    }
-  }
-
-  &.fec-crud-of-simple-search-width-full {
-    .ant-pro-table-list-toolbar-container {
-      justify-content: unset;
-
-      .ant-pro-table-list-toolbar-right {
-        justify-content: unset;
-
-        & > div {
-          flex: 1;
-          margin-right: 8px;
-        }
-      }
-    }
-  }
-}

package/src/{crud/crud_of_simple.stories.tsx → crud_of_list/crud_of_list.stories.tsx}

@@ -1,16 +1,28 @@
 import { ProFormText } from '@ant-design/pro-components';
-import { CRUDOfSimple } from '@fe-free/core';
+import { CRUDOfList } from '@fe-free/core';
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { fakeCreate, fakeDeleteByRecord, fakeRequest } from './demo/data';
+import { fakeCreate, fakeDeleteByRecord, fakeRequest } from '../crud/demo/data';
 
-const meta: Meta<typeof CRUDOfSimple> = {
-  title: '@fe-free/core/CRUDOfSimple',
-  component: CRUDOfSimple,
+const meta: Meta<typeof CRUDOfList> = {
+  title: '@fe-free/core/CRUDOfList',
+  component: CRUDOfList,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+CRUDOfList 组件。（简洁的列表形态的 CRUD 组件）
+- 隐藏 label
+- 搜索表单按钮一行
+- 移除卡片布局
+`,
+      },
+    },
+  },
   decorators: [
     (Story) => {
       return (
-        <div className="c-border h-[500px] w-[300px] overflow-x-auto">
+        <div className="c-border h-[500px] w-[300px] overflow-y-auto">
           <Story />
         </div>
       );
@@ -19,27 +31,25 @@ const meta: Meta<typeof CRUDOfSimple> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof CRUDOfSimple>;
+type Story = StoryObj<typeof CRUDOfList>;
 
-// 基础用法
-export const Normal: Story = {
+export const Basic: Story = {
   render: () => {
     const columns = [
       {
         title: '名字(省略)',
         dataIndex: 'name',
-        search: true,
+        // search: true,
         ellipsis: true,
       },
     ];
 
     return (
-      <CRUDOfSimple
-        actions={['create', 'delete']}
+      <CRUDOfList
+        actions={[]}
         tableProps={{
           columns,
           request: fakeRequest,
-          pagination: false,
         }}
         requestDeleteByRecord={fakeDeleteByRecord}
         deleteProps={{
@@ -47,13 +57,7 @@ export const Normal: Story = {
         }}
         detailForm={() => (
           <>
-            <ProFormText
-              name="name"
-              label="名字"
-              required
-              rules={[{ required: true }]}
-              extra="extra extra extra extra"
-            />
+            <ProFormText name="name" label="名字" required rules={[{ required: true }]} />
           </>
         )}
         requestCreateByValues={fakeCreate}
@@ -74,12 +78,11 @@ export const WithSearch: Story = {
     ];
 
     return (
-      <CRUDOfSimple
-        actions={['create', 'delete']}
+      <CRUDOfList
+        actions={['delete']}
         tableProps={{
           columns,
           request: fakeRequest,
-          pagination: false,
         }}
         requestDeleteByRecord={fakeDeleteByRecord}
         deleteProps={{
@@ -87,26 +90,16 @@ export const WithSearch: Story = {
         }}
         detailForm={() => (
           <>
-            <ProFormText
-              name="name"
-              label="名字"
-              required
-              rules={[{ required: true }]}
-              extra="extra extra extra extra"
-            />
+            <ProFormText name="name" label="名字" required rules={[{ required: true }]} />
           </>
         )}
         requestCreateByValues={fakeCreate}
-        simpleSearchProps={{
-          name: 'name',
-          widthFull: true,
-        }}
       />
     );
   },
 };
 
-export const HoverShow: Story = {
+export const WithCreateDelete: Story = {
   render: () => {
     const columns = [
       {
@@ -118,12 +111,11 @@ export const HoverShow: Story = {
     ];
 
     return (
-      <CRUDOfSimple
+      <CRUDOfList
         actions={['create', 'delete']}
         tableProps={{
           columns,
           request: fakeRequest,
-          pagination: false,
         }}
         requestDeleteByRecord={fakeDeleteByRecord}
         deleteProps={{
@@ -131,40 +123,31 @@ export const HoverShow: Story = {
         }}
         detailForm={() => (
           <>
-            <ProFormText
-              name="name"
-              label="名字"
-              required
-              rules={[{ required: true }]}
-              extra="extra extra extra extra"
-            />
+            <ProFormText name="name" label="名字" required rules={[{ required: true }]} />
           </>
         )}
         requestCreateByValues={fakeCreate}
-        simpleOperateHoverShow
       />
     );
   },
 };
 
-export const JustSearch: Story = {
+export const NoSearch: Story = {
   render: () => {
     const columns = [
       {
         title: '名字(省略)',
         dataIndex: 'name',
-        search: true,
         ellipsis: true,
       },
     ];
 
     return (
-      <CRUDOfSimple
-        actions={['delete']}
+      <CRUDOfList
+        actions={['create', 'delete']}
         tableProps={{
           columns,
           request: fakeRequest,
-          pagination: false,
         }}
         requestDeleteByRecord={fakeDeleteByRecord}
         deleteProps={{
@@ -172,20 +155,10 @@ export const JustSearch: Story = {
         }}
         detailForm={() => (
           <>
-            <ProFormText
-              name="name"
-              label="名字"
-              required
-              rules={[{ required: true }]}
-              extra="extra extra extra extra"
-            />
+            <ProFormText name="name" label="名字" required rules={[{ required: true }]} />
           </>
         )}
         requestCreateByValues={fakeCreate}
-        simpleSearchProps={{
-          name: 'name',
-          widthFull: true,
-        }}
       />
     );
   },

package/src/{crud/crud_of_simple.tsx → crud_of_list/index.tsx}

@@ -2,32 +2,26 @@ import { useDebounce } from 'ahooks';
 import { Input } from 'antd';
 import classNames from 'classnames';
 import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
-import { CRUD } from './crud';
-import type { CRUDMethods, CRUDProps } from './types';
+import type { CRUDMethods, CRUDProps } from '../crud';
+import { CRUD } from '../crud';
+import './style.scss';
 
-interface CRUDOfSimpleProps<
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+interface CRUDOfListProps<
   DataSource extends Record<string, any> = any,
   Key extends string | number = string,
 > extends CRUDProps<DataSource, Key> {
-  simpleOperateHoverShow?: boolean;
-  // 传才开启搜索
-  simpleSearchProps?: {
-    /** 搜索项的名称，默认 keywords */
-    name: string;
-    /** 搜索项的 placeholder，默认 请输入 */
-    placeholder?: string;
-    /** 占满宽度 */
-    widthFull?: boolean;
-  };
+  // nothing
 }
 
 function useTips(props) {
-  const { columns } = props;
-
   useEffect(() => {
-    const hasSearchColumn = columns?.find((column) => column.search);
-    if (hasSearchColumn) {
-      console.warn('CRUDOfSimple 的 columns 中不能有 search 为 true 的列');
+    const count = props.tableProps.columns?.filter((column) => column.search).length;
+    if (!count) {
+      console.warn('CRUDOfList 的 columns 中至少有一个 search 为 true 的列');
+    }
+    if (count > 1) {
+      console.warn('CRUDOfList 的 columns 中只能有一个 search 为 true 的列');
     }
   }, []);
 }
@@ -48,14 +42,18 @@ function SearchRender(props: {
   );
 }
 
-function CRUDOfSimpleComponent(props: CRUDOfSimpleProps, ref: React.ForwardedRef<CRUDMethods>) {
-  const { simpleSearchProps, tableProps, simpleOperateHoverShow, ...rest } = props;
-
+function CRUDOfListComponent(props: CRUDOfListProps, ref: React.ForwardedRef<CRUDMethods>) {
   useTips(props);
-  const [searchValue, setSearchValue] = useState<string>('');
 
+  const { tableProps, ...rest } = props;
+
+  const [searchValue, setSearchValue] = useState<string>('');
   const debouncedSearchValue = useDebounce(searchValue, { wait: 300 });
 
+  const searchDataIndex = useMemo(() => {
+    return tableProps.columns?.find((column) => column.search)?.dataIndex;
+  }, [tableProps.columns]);
+
   const newColumns = useMemo(() => {
     return (tableProps.columns || []).map((column) => ({
       ...column,
@@ -66,56 +64,49 @@ function CRUDOfSimpleComponent(props: CRUDOfSimpleProps, ref: React.ForwardedRef
   const toolBarRender = useCallback(
     (...args) => {
       return [
-        simpleSearchProps && (
-          <SearchRender
-            key="search-input"
-            placeholder={simpleSearchProps.placeholder}
-            value={searchValue}
-            onChange={(value) => setSearchValue(value)}
-          />
-        ),
+        <div key="search-input-container" className="w-full">
+          {searchDataIndex && (
+            <SearchRender value={searchValue} onChange={(value) => setSearchValue(value)} />
+          )}
+        </div>,
         // @ts-ignore
         ...(tableProps.toolBarRender ? tableProps.toolBarRender(...args) : []),
       ];
     },
-    [searchValue, simpleSearchProps, tableProps],
+    [searchValue, searchDataIndex, tableProps],
   );
 
   const newParams = useMemo(() => {
-    if (!simpleSearchProps) {
-      return tableProps.params;
-    }
-
     return {
-      ...tableProps.params,
-      [simpleSearchProps.name]: debouncedSearchValue,
+      ...(tableProps.params || {}),
+      [searchDataIndex]: debouncedSearchValue,
     };
-  }, [debouncedSearchValue, simpleSearchProps, tableProps.params]);
+  }, [debouncedSearchValue, searchDataIndex, tableProps.params]);
 
   return (
     <div
-      className={classNames('fec-crud-of-simple', {
-        'fec-crud-of-simple-hover-show': simpleOperateHoverShow,
-        'fec-crud-of-simple-search-width-full': simpleSearchProps?.widthFull,
+      className={classNames('fec-crud-of-list', {
+        // 先这样实现
+        'fec-crud-of-list-no-toolbar': !searchDataIndex && !props.actions.includes('create'),
       })}
     >
       <CRUD
         ref={ref}
         {...rest}
         tableProps={{
-          ...tableProps,
-          params: newParams,
           cardBordered: false,
           showHeader: false,
           ghost: true,
-          columns: newColumns,
-          toolBarRender,
           // 简单的隐藏搜索栏
           search: false,
+          pagination: false,
+          ...tableProps,
+          params: newParams,
+          columns: newColumns,
+          toolBarRender,
         }}
         operateColumnProps={{
-          // hoverShow 情况下，默认 width 1
-          width: simpleOperateHoverShow ? 1 : undefined,
+          width: 1,
           ...props.operateColumnProps,
         }}
       />
@@ -123,12 +114,12 @@ function CRUDOfSimpleComponent(props: CRUDOfSimpleProps, ref: React.ForwardedRef
   );
 }
 
-const CRUDOfSimple = forwardRef(CRUDOfSimpleComponent) as <
+const CRUDOfList = forwardRef(CRUDOfListComponent) as <
   DataSource extends Record<string, any> = any,
   Key extends string | number = string,
 >(
-  props: CRUDOfSimpleProps<DataSource, Key> & { ref?: React.ForwardedRef<CRUDMethods> },
+  props: CRUDOfListProps<DataSource, Key> & { ref?: React.ForwardedRef<CRUDMethods> },
 ) => JSX.Element;
 
-export { CRUDOfSimple };
-export type { CRUDOfSimpleProps };
+export { CRUDOfList };
+export type { CRUDOfListProps };

package/src/crud_of_list/style.scss

@@ -0,0 +1,37 @@
+.fec-crud-of-list {
+  .ant-pro-table-list-toolbar {
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  .ant-table-cell-fix-right {
+    position: absolute !important;
+    display: none;
+  }
+
+  .ant-table-row {
+    &:hover {
+      .ant-table-cell-fix-right {
+        display: block;
+      }
+    }
+  }
+
+  .ant-pro-table-list-toolbar-container {
+    justify-content: unset;
+
+    .ant-pro-table-list-toolbar-right {
+      justify-content: unset;
+
+      & > div {
+        flex: 1;
+        margin-right: 8px;
+      }
+    }
+  }
+
+  &.fec-crud-of-list-no-toolbar {
+    .ant-pro-table-list-toolbar-container {
+      padding-block: 0;
+    }
+  }
+}

package/src/crud_of_pure/crud_of_pure.stories.tsx

@@ -25,8 +25,7 @@ CRUDOfPure 组件。（更简洁的 CRUD 组件）
 export default meta;
 type Story = StoryObj<typeof CRUDOfPure>;
 
-// 基础用法
-export const Normal: Story = {
+export const Basic: Story = {
   render: () => {
     const columns = [
       {
@@ -88,3 +87,117 @@ export const Normal: Story = {
     );
   },
 };
+
+export const WithCreate: 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,
+          search: {
+            optionRender: (_, __, dom) => {
+              return [
+                ...dom,
+                <Button key="1" type="primary" className="ml-2">
+                  额外的按钮
+                </Button>,
+              ];
+            },
+          },
+        }}
+        requestDeleteByRecord={fakeDeleteByRecord}
+        deleteProps={{
+          nameIndex: 'id',
+        }}
+        detailForm={() => (
+          <>
+            <ProFormText
+              name="name"
+              label="名字"
+              required
+              rules={[{ required: true }]}
+              extra="extra extra extra extra"
+            />
+          </>
+        )}
+        requestCreateByValues={fakeCreate}
+      />
+    );
+  },
+};
+
+export const NoSearch: Story = {
+  render: () => {
+    const columns = [
+      {
+        title: 'id',
+        dataIndex: 'id',
+      },
+      {
+        title: '名字(省略)',
+        dataIndex: 'name',
+        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}
+      />
+    );
+  },
+};

package/src/crud_of_pure/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import type { CRUDMethods, CRUDProps } from '../crud';
 import { CRUD } from '../crud';
 import './style.scss';
@@ -33,8 +33,16 @@ function CRUDOfPureComponent(props: CRUDOfPureProps, ref: React.ForwardedRef<CRU
     return column;
   });
 
+  const noSearch = useMemo(() => {
+    return !props.tableProps.columns?.find((column) => column.search);
+  }, [props.tableProps.columns]);
+
   return (
-    <div className={classNames('fec-crud-of-pure')}>
+    <div
+      className={classNames('fec-crud-of-pure', {
+        'fec-crud-of-pure-no-search': noSearch,
+      })}
+    >
       <CRUD
         ref={ref}
         {...props}

package/src/crud_of_pure/style.scss

@@ -40,7 +40,12 @@
   }
 
   .ant-pro-table-list-toolbar-container {
-    padding-block: 0;
-    padding-block-end: 8px;
+    padding-block: 0 8px;
+  }
+
+  &.fec-crud-of-pure-no-search {
+    .ant-pro-table-list-toolbar-container {
+      padding-block-start: 8px;
+    }
   }
 }

package/src/index.ts

@@ -6,8 +6,10 @@ export { LoadingButton } from './button';
 export { Copy } from './copy';
 export type { CopyProps } from './copy';
 export { CoreApp } from './core_app';
-export { CRUD, CRUDDetail, CRUDOfSimple, OperateDelete, useDelete } from './crud';
-export type { CRUDDetailProps, CRUDMethods, CRUDOfSimpleProps, CRUDProps } from './crud';
+export { CRUD, CRUDDetail, OperateDelete, useDelete } from './crud';
+export type { CRUDDetailProps, CRUDMethods, CRUDProps } from './crud';
+export { CRUDOfList } from './crud_of_list';
+export type { CRUDOfListProps } from './crud_of_list';
 export { CRUDOfPure } from './crud_of_pure';
 export type { CRUDOfPureProps } from './crud_of_pure';
 export { Editor } from './editor';

package/src/table/index.tsx

@@ -38,19 +38,28 @@ function Table<
   const hasSearch = !!newColumns?.find((column) => column.search);
 
   let newSearch: any = undefined;
+  // 如果有搜索，则使用 search 的配置
   if (hasSearch) {
     newSearch = {
       labelWidth: 'auto',
       defaultCollapsed: false,
       ...search,
     };
-  } else if (search === false) {
-    newSearch = false;
-  } else {
+  }
+  // 如果是个对象
+  else if (typeof search === 'object') {
     newSearch = {
       ...search,
     };
   }
+  // 明确 search false 的情况，这样外部可以控制搜索的显示
+  else if (search === false) {
+    newSearch = false;
+  }
+  // 最后兜底 false
+  else {
+    newSearch = false;
+  }
 
   return (
     <ProTable<DataSource, Params>