@fe-free/core 1.2.3 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @fe-free/core
 
+## 1.3.0
+
+### Minor Changes
+
+- feat: some
+
+### Patch Changes
+
+- Updated dependencies
+  - @fe-free/tool@1.3.0
+
+## 1.2.4
+
+### Patch Changes
+
+- Updated dependencies
+  - @fe-free/tool@1.2.4
+
 ## 1.2.3
 
 ### Patch Changes

package/package.json

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

package/src/button/button.stories.ts

@@ -0,0 +1,34 @@
+import { LoadingButton } from '@fe-free/core';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof LoadingButton> = {
+  title: '@fe-free/core/LoadingButton',
+  component: LoadingButton,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LoadingButton>;
+
+export const Resolve: Story = {
+  args: {
+    children: 'click and resolve',
+    onClick: () => {
+      return new Promise((resolve) => {
+        setTimeout(resolve, 1000);
+      });
+    },
+  },
+};
+
+export const Reject = {
+  args: {
+    children: 'click and reject',
+    onClick: () => {
+      return new Promise((_, reject) => {
+        setTimeout(reject, 1000);
+      });
+    },
+  },
+};

package/src/button/index.tsx

@@ -13,7 +13,7 @@ function LoadingButton({ onClick, ...rest }: ButtonProps) {
         setLoading(false);
       });
     },
-    [onClick]
+    [onClick],
   );
 
   return <Button loading={loading} {...rest} onClick={handleClick} />;

package/src/crud/crud.stories.tsx

@@ -0,0 +1,350 @@
+import type { ProColumns } from '@ant-design/pro-components';
+import { ProForm, ProFormSwitch, ProFormText } from '@ant-design/pro-components';
+import { CRUD, proFormSelectSearchProps } from '@fe-free/core';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from 'antd';
+import { useRef } from 'react';
+import {
+  fakeCreate,
+  fakeDeleteByRecord,
+  fakeGetByRecord,
+  fakeRequest,
+  fakeRequestArea,
+  fakeRequestCity,
+  fakeRequestSchool,
+  fakeUpdateById,
+  levels,
+} from './demo/data';
+
+const meta: Meta<typeof CRUD> = {
+  title: '@fe-free/core/CRUD',
+  component: CRUD,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof CRUD>;
+
+// 基础用法
+export const Normal: 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,
+        }}
+        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}
+      />
+    );
+  },
+};
+
+// 详情页查看
+export const ReadDetail: Story = {
+  render: () => {
+    const columns = [
+      {
+        title: 'id',
+        dataIndex: 'id',
+        search: true,
+      },
+      {
+        title: '名字',
+        dataIndex: 'name',
+        search: true,
+      },
+    ];
+
+    return (
+      <CRUD
+        actions={['read_detail']}
+        tableProps={{
+          columns,
+          request: fakeRequest,
+        }}
+      />
+    );
+  },
+};
+
+// 表格表单和详情表单 ref
+const RefComponent = () => {
+  const formRef = useRef<any>();
+  const [detailFormInstance] = ProForm.useForm();
+
+  const columns = [
+    {
+      title: 'id',
+      dataIndex: 'id',
+      search: true,
+    },
+    {
+      title: '名字',
+      dataIndex: 'name',
+      search: true,
+    },
+  ];
+
+  return (
+    <CRUD
+      actions={['create', 'read', 'update']}
+      tableProps={{
+        formRef,
+        columns,
+        request: fakeRequest,
+      }}
+      detailFormInstance={detailFormInstance}
+      detailForm={(formProps) => (
+        <>
+          <ProFormText
+            {...formProps}
+            name="name"
+            label="名字"
+            required
+            rules={[{ required: true }]}
+            initialValue={'default'}
+          />
+          <ProFormSwitch {...formProps} name="status" label="开启" initialValue={false} />
+        </>
+      )}
+      requestGetByRecord={fakeGetByRecord}
+      requestCreateByValues={fakeCreate}
+      requestUpdateByValues={fakeUpdateById}
+    />
+  );
+};
+
+export const Ref: Story = {
+  render: () => <RefComponent />,
+};
+
+// 通过 ref 获取 actionRef
+const ActionRefComponent = () => {
+  const ref = useRef<any>();
+
+  const columns = [
+    {
+      title: 'id',
+      dataIndex: 'id',
+      search: true,
+    },
+    {
+      title: '名字',
+      dataIndex: 'name',
+      search: true,
+    },
+  ];
+
+  return (
+    <>
+      <Button onClick={() => ref.current.getActionRef().current?.reload()}>reload</Button>
+      <CRUD
+        ref={ref}
+        actions={[]}
+        tableProps={{
+          columns,
+          request: fakeRequest,
+        }}
+      />
+    </>
+  );
+};
+
+export const ActionRef: Story = {
+  render: () => <ActionRefComponent />,
+};
+
+// 数据 本地&远程&依赖
+export const RemoteData: Story = {
+  render: () => {
+    const columns: ProColumns<any>[] = [
+      {
+        title: 'id',
+        dataIndex: 'id',
+        search: true,
+      },
+      {
+        title: '名字',
+        dataIndex: 'name',
+        search: true,
+      },
+      {
+        title: '等级(本地数据)',
+        dataIndex: 'level',
+        search: true,
+        valueEnum: levels,
+        ...proFormSelectSearchProps,
+      },
+      {
+        title: 'city(远端数据)',
+        dataIndex: 'city',
+        search: true,
+        request: async () => {
+          const res = await fakeRequestCity();
+          return res.map((item) => ({
+            label: item,
+            value: item,
+          }));
+        },
+        ...proFormSelectSearchProps,
+      },
+      {
+        title: 'area(联动 city)',
+        dataIndex: 'area',
+        search: true,
+        request: async (params) => {
+          const res = await fakeRequestArea(params);
+          return res.map((item) => ({
+            label: item,
+            value: item,
+          }));
+        },
+        dependencies: ['city'],
+        ...proFormSelectSearchProps,
+      },
+      {
+        title: '学校(远端数据 label value)',
+        dataIndex: 'school',
+        search: true,
+        valueType: 'select' as const,
+        request: () => fakeRequestSchool(),
+        ...proFormSelectSearchProps,
+      },
+    ];
+
+    return (
+      <CRUD
+        actions={[]}
+        tableProps={{
+          columns,
+          request: fakeRequest,
+        }}
+      />
+    );
+  },
+};
+
+// 没有搜索
+export const NoSearch: Story = {
+  render: () => {
+    const columns = [
+      {
+        title: 'id',
+        dataIndex: 'id',
+      },
+      {
+        title: '名字',
+        dataIndex: 'name',
+      },
+    ];
+
+    return (
+      <CRUD
+        actions={[]}
+        tableProps={{
+          columns,
+          request: fakeRequest,
+          search: false,
+        }}
+      />
+    );
+  },
+};
+
+// 自定义文案
+export const CustomText: Story = {
+  render: () => {
+    const columns = [
+      {
+        title: 'id',
+        dataIndex: 'id',
+        search: true,
+      },
+      {
+        title: '名字',
+        dataIndex: 'name',
+        search: true,
+      },
+    ];
+
+    return (
+      <CRUD
+        actions={['create', 'read', 'delete', 'update']}
+        tableProps={{
+          columns,
+          request: fakeRequest,
+        }}
+        createButton={<Button type="primary">新建</Button>}
+        readProps={{
+          operateText: '查看',
+        }}
+        deleteProps={{
+          nameIndex: 'name',
+          operateText: '删除',
+          desc: '确定要删除吗？',
+        }}
+        updateProps={{
+          operateText: '编辑',
+          successText: '编辑成功',
+        }}
+        requestDeleteByRecord={fakeDeleteByRecord}
+        detailForm={(formProps) => (
+          <>
+            <ProFormText
+              {...formProps}
+              name="name"
+              label="名字"
+              required
+              rules={[{ required: true }]}
+            />
+          </>
+        )}
+        requestGetByRecord={fakeGetByRecord}
+        requestCreateByValues={fakeCreate}
+        requestUpdateByValues={fakeUpdateById}
+      />
+    );
+  },
+};

package/src/crud/crud.tsx

@@ -1,8 +1,7 @@
-import type { ProFormInstance, ActionType } from '@ant-design/pro-components';
-import { Space, Button } from 'antd';
+import type { ActionType, ProFormInstance } from '@ant-design/pro-components';
+import { Button, Space } from 'antd';
 import type { ReactNode } from 'react';
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
-import { Link, useLocation } from 'react-router-dom';
 import type { TableProps } from '../table';
 import { Table } from '../table';
 import { OperateDelete } from './crud_delete';
@@ -65,6 +64,8 @@ interface CRUDProps {
   };
 
   /** 更新接口 */
+  requestUpdateByValues?: (values) => Promise<any>;
+  /** @deprecated 请使用 requestUpdateByValues 替代 */
   requestUpdateById?: (values) => Promise<any>;
   updateProps?: {
     /** 文本 */
@@ -99,22 +100,20 @@ const CRUD = forwardRef<CRUDMethods, CRUDProps>(function CRUD(props, ref) {
     createProps,
     requestCreateByValues,
     updateProps,
-    requestUpdateById,
+    requestUpdateById: originalRequestUpdateById,
+    requestUpdateByValues: originalRequestUpdateByValues,
     detailFormInstance,
   } = props;
 
+  const requestUpdateById = originalRequestUpdateByValues || originalRequestUpdateById;
+
   const actionRef = useRef<ActionType>();
-  const location = useLocation();
 
-  useImperativeHandle(
-    ref,
-    () => {
-      return {
-        getActionRef: () => actionRef,
-      };
-    },
-    [actionRef]
-  );
+  useImperativeHandle(ref, () => {
+    return {
+      getActionRef: () => actionRef,
+    };
+  }, [actionRef]);
 
   const detailProps = useMemo(
     () => ({
@@ -134,7 +133,7 @@ const CRUD = forwardRef<CRUDMethods, CRUDProps>(function CRUD(props, ref) {
       detailFormInstance,
       createProps,
       updateProps,
-    ]
+    ],
   );
 
   const getHandleDelete = useCallback(
@@ -149,7 +148,7 @@ const CRUD = forwardRef<CRUDMethods, CRUDProps>(function CRUD(props, ref) {
         throw new Error('没有传 requestDeleteByRecord');
       };
     },
-    [requestDeleteByRecord]
+    [requestDeleteByRecord],
   );
 
   const handleReload = useCallback(() => {
@@ -176,12 +175,9 @@ const CRUD = forwardRef<CRUDMethods, CRUDProps>(function CRUD(props, ref) {
               />
             )}
             {actions.includes('read_detail') && (
-              <Link
-                to={`${location.pathname}/detail/${record[detailIdIndex || 'id']}`}
-                target={readProps?.target}
-              >
+              <a href={`./detail/${record[detailIdIndex || 'id']}`} target={readProps?.target}>
                 {readProps?.operateText || '查看'}
-              </Link>
+              </a>
             )}
             {actions.includes('update') && (
               <CRUDDetail
@@ -230,7 +226,6 @@ const CRUD = forwardRef<CRUDMethods, CRUDProps>(function CRUD(props, ref) {
     readProps?.operateText,
     readProps?.target,
     detailProps,
-    location.pathname,
     detailIdIndex,
     updateProps?.operateText,
     deleteProps,
@@ -239,6 +234,7 @@ const CRUD = forwardRef<CRUDMethods, CRUDProps>(function CRUD(props, ref) {
 
   const toolBarRender = useCallback(
     (...args) => [
+      // @ts-ignore
       ...(tableProps.toolBarRender ? tableProps.toolBarRender(...args) : []),
       actions.includes('create') && (
         <CRUDDetail
@@ -249,7 +245,7 @@ const CRUD = forwardRef<CRUDMethods, CRUDProps>(function CRUD(props, ref) {
         />
       ),
     ],
-    [actions, createButton, detailProps, handleReload, tableProps]
+    [actions, createButton, detailProps, handleReload, tableProps],
   );
 
   return (
@@ -266,4 +262,4 @@ const CRUD = forwardRef<CRUDMethods, CRUDProps>(function CRUD(props, ref) {
 });
 
 export { CRUD };
-export type { CRUDProps, CRUDMethods };
+export type { CRUDMethods, CRUDProps };

package/src/crud/crud_delete.tsx

@@ -1,5 +1,5 @@
-import { useCallback } from 'react';
 import { Modal } from 'antd';
+import { useCallback } from 'react';
 
 interface Params {
   name: string;
@@ -7,6 +7,7 @@ interface Params {
   operateText?: string;
   onDelete: () => Promise<any>;
 }
+
 function useDelete(params: Params) {
   const { name, desc, onDelete } = params;
 
@@ -48,4 +49,4 @@ function OperateDelete(props: Params) {
   );
 }
 
-export { useDelete, OperateDelete };
+export { OperateDelete, useDelete };

package/src/crud/crud_detail.tsx

@@ -1,9 +1,9 @@
-import { message, Spin } from 'antd';
 import { DrawerForm, ProForm } from '@ant-design/pro-components';
+import { message, Spin } from 'antd';
+import classNames from 'classnames';
+import { isString } from 'lodash-es';
 import { useCallback, useMemo, useState } from 'react';
 import type { CRUDProps } from './crud';
-import { isString } from 'lodash-es';
-import classNames from 'classnames';
 
 /**
  * create 创建
@@ -100,13 +100,13 @@ function CRUDDetail(props: CRUDDetailProps) {
           return true;
         }
       } catch (e) {
-        // 由于 onFinish 吃掉了 error，所以这里自行抛出
+        // 由于 onFinish 吃掉了 error，所以这里自行抛出到全局
         setTimeout(() => {
           throw e;
         }, 10);
       }
     },
-    [action, requestCreateByValues, requestUpdateById, onSuccess, createProps, id, updateProps]
+    [action, requestCreateByValues, requestUpdateById, onSuccess, createProps, id, updateProps],
   );
 
   const handleOpenChange = useCallback(
@@ -132,7 +132,7 @@ function CRUDDetail(props: CRUDDetailProps) {
 
       return;
     },
-    [form, id, requestGetByRecord, record]
+    [form, id, requestGetByRecord, record],
   );
 
   const children = useMemo(() => {

package/src/crud/demo/data.tsx

@@ -43,7 +43,7 @@ function makeData(count) {
 
     return {
       id: `${id}`,
-      name: `这是名字这是名字这是名字 ${id}`,
+      name: `这是名字这是名字这是名字这是名字这是名字 ${id}`,
       city,
       area,
       level: randomLevel(),
@@ -131,14 +131,14 @@ function fakeRequestSchool() {
 }
 
 export {
+  fakeCreate,
   fakeData,
-  levels,
-  fakeRequest,
   fakeDeleteByRecord,
   fakeGetByRecord,
-  fakeCreate,
-  fakeUpdateById,
-  fakeRequestCity,
+  fakeRequest,
   fakeRequestArea,
+  fakeRequestCity,
   fakeRequestSchool,
+  fakeUpdateById,
+  levels,
 };