@fe-free/core 2.5.5 → 2.5.6

package/CHANGELOG.md

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

package/package.json

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

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/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>