@fe-free/core 1.4.20 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @fe-free/core
 
+## 1.5.0
+
+### Minor Changes
+
+- feat: form
+
+### Patch Changes
+
+- @fe-free/tool@1.5.0
+
 ## 1.4.20
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "1.4.20",
+  "version": "1.5.0",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -36,7 +36,7 @@
     "react-syntax-highlighter": "^15.5.0",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "1.4.20"
+    "@fe-free/tool": "1.5.0"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "^2.8.7",

package/src/button/button.stories.ts

@@ -1,10 +1,18 @@
 import { LoadingButton } from '@fe-free/core';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta: Meta<typeof LoadingButton> = {
   title: '@fe-free/core/LoadingButton',
   component: LoadingButton,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'LoadingButton 是一个带有加载状态的按钮组件，适用于异步操作场景。<br/>区别于 antd Button 需要手动传 loading props。',
+      },
+    },
+  },
 };
 
 export default meta;

package/src/crud/crud.stories.tsx

@@ -1,7 +1,7 @@
 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 type { Meta, StoryObj } from '@storybook/react-vite';
 import { Button } from 'antd';
 import { useRef } from 'react';
 import {
@@ -500,3 +500,56 @@ export const RowSelection: Story = {
     );
   },
 };
+
+export const ExpandedRowRender: Story = {
+  render: () => {
+    const columns = [
+      {
+        title: 'id',
+        dataIndex: 'id',
+        search: true,
+      },
+      {
+        title: '名字(省略)',
+        dataIndex: 'name',
+        search: true,
+        ellipsis: true,
+      },
+    ];
+
+    return (
+      <CRUD
+        actions={['create', 'read', 'delete', 'update']}
+        tableProps={{
+          columns,
+          request: fakeRequest,
+          defaultExpandAllRows: true,
+          expandable: {
+            expandedRowKeys: ['0', '1'],
+            expandedRowRender: () => {
+              return <div>123</div>;
+            },
+          },
+        }}
+        requestDeleteByRecord={fakeDeleteByRecord}
+        deleteProps={{
+          nameIndex: 'name',
+        }}
+        detailForm={() => (
+          <>
+            <ProFormText
+              name="name"
+              label="名字"
+              required
+              rules={[{ required: true }]}
+              extra="extra extra extra extra"
+            />
+          </>
+        )}
+        requestGetByRecord={fakeGetByRecord}
+        requestCreateByValues={fakeCreate}
+        requestUpdateById={fakeUpdateById}
+      />
+    );
+  },
+};

package/src/crud/crud_detail.tsx

@@ -183,7 +183,7 @@ function CRUDDetail(props: CRUDDetailProps) {
 
   const drawerProps = useMemo(() => {
     return {
-      destroyOnClose: true,
+      destroyOnHidden: true,
     };
   }, []);
 

package/src/crud/crud_of_simple.stories.tsx

@@ -1,6 +1,6 @@
 import { ProFormText } from '@ant-design/pro-components';
 import { CRUDOfSimple } from '@fe-free/core';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { fakeCreate, fakeDeleteByRecord, fakeRequest } from './demo/data';
 
 const meta: Meta<typeof CRUDOfSimple> = {

package/src/editor/editor.stories.tsx

@@ -1,6 +1,6 @@
 import type { EditorProps } from '@fe-free/core';
 import { Editor } from '@fe-free/core';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 
 const meta: Meta<typeof Editor> = {

package/src/editor_javascript/editor_javascript.stories.tsx

@@ -1,5 +1,5 @@
 import { EditorJavascript } from '@fe-free/core';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 
 const meta: Meta<typeof EditorJavascript> = {

package/src/editor_json/editor_json.stories.tsx

@@ -1,5 +1,5 @@
 import { EditorJSON } from '@fe-free/core';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 
 const meta: Meta<typeof EditorJSON> = {

package/src/editor_logs/editor_logs.stories.tsx

@@ -1,5 +1,5 @@
 import { EditorLogs } from '@fe-free/core';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 const meta: Meta<typeof EditorLogs> = {
   title: '@fe-free/core/EditorLogs',

package/src/editor_markdown/editor_markdown.stories.tsx

@@ -1,5 +1,5 @@
 import { EditorMarkdown } from '@fe-free/core';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 
 const meta: Meta<typeof EditorMarkdown> = {

package/src/form/form.stories.tsx

@@ -1,15 +1,31 @@
 import { ProForm } from '@ant-design/pro-components';
-import { ProFormEditor, ProFormJSON, ProFormJavascript, ProFormSwitchNumber } from '@fe-free/core';
-import type { Meta, StoryObj } from '@storybook/react';
+import {
+  ProFormEditor,
+  ProFormJSON,
+  ProFormJavascript,
+  ProFormListNumber,
+  ProFormListText,
+  ProFormSwitchNumber,
+} from '@fe-free/core';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 
-const meta: Meta = {
+const meta: Meta<typeof ProForm> = {
   title: '@fe-free/core/Form',
+  component: ProForm,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Form 组件基于 Ant Design ProForm，支持多种表单类型和扩展字段，适用于复杂表单场景。',
+      },
+    },
+  },
 };
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof ProForm>;
 
 function ProFormBase({
   children,
@@ -23,9 +39,11 @@ function ProFormBase({
   return (
     <ProForm
       initialValues={initialValues}
-      onValuesChange={(values) => {
-        console.log('values', values);
-        setValues(values);
+      onValuesChange={(newValues) => {
+        setValues({
+          ...values,
+          ...newValues,
+        });
       }}
       onFinish={(values) => {
         console.log('values', values);
@@ -46,7 +64,7 @@ console.log('hello', name);
 `,
       }}
     >
-      <ProFormEditor name="code" fieldProps={{ language: 'javascript', height: '50vh' }} />
+      <ProFormEditor name="code" fieldProps={{ language: 'javascript', height: '400px' }} />
     </ProFormBase>
   ),
 };
@@ -101,3 +119,20 @@ export const ProFormSwitchNumberComponent: Story = {
     </ProFormBase>
   ),
 };
+
+export const ProFormListTextComponent: Story = {
+  render: () => (
+    <ProFormBase>
+      <ProFormListText name="listText" />
+    </ProFormBase>
+  ),
+};
+
+export const ProFormListNumberComponent: Story = {
+  render: () => (
+    <ProFormBase>
+      <ProFormListNumber name="listNumber" label="listNumber" />
+      <ProFormListNumber name="listInteger" label="listInteger" fieldProps={{ precision: 0 }} />
+    </ProFormBase>
+  ),
+};

package/src/form/form_list/form_list.tsx

@@ -0,0 +1,127 @@
+import type { ProFormItemProps } from '@ant-design/pro-components';
+import { ProForm } from '@ant-design/pro-components';
+import { Input, InputNumber } from 'antd';
+
+import { ProFormListHelper } from './form_list_helper';
+
+interface ListTextProps {
+  value?: (string | { value: string; label: string })[];
+  onChange?: (value: (string | { value: string; label: string })[]) => void;
+  isValueLabel?: boolean;
+  placeholder?: string;
+}
+
+function ListText(props: ListTextProps) {
+  const { isValueLabel, placeholder } = props;
+  return (
+    <ProFormListHelper value={props.value} onChange={props.onChange} getAdd={() => ''}>
+      {({ item, onItemChange }) => {
+        // @ts-ignore
+        const value = isValueLabel ? item.value : item;
+        return (
+          <Input
+            placeholder={placeholder}
+            value={value}
+            onChange={(e) => {
+              if (isValueLabel) {
+                onItemChange({ value: e.target.value, label: e.target.value });
+              } else {
+                onItemChange(e.target.value);
+              }
+            }}
+          />
+        );
+      }}
+    </ProFormListHelper>
+  );
+}
+
+interface ListNumberProps {
+  value?: (number | { value: number; label: string })[];
+  onChange?: (value: (number | { value: number; label: string })[]) => void;
+  isValueLabel?: boolean;
+  placeholder?: string;
+  precision?: number;
+}
+
+function ListNumber(props: ListNumberProps) {
+  const { isValueLabel, placeholder, precision } = props;
+  return (
+    <ProFormListHelper value={props.value} onChange={props.onChange} getAdd={() => 0}>
+      {({ item, onItemChange }) => {
+        // @ts-ignore
+        const value = isValueLabel ? item.value : item;
+        return (
+          <InputNumber
+            value={value}
+            onChange={(nv) => {
+              if (isValueLabel) {
+                onItemChange({ value: nv, label: nv.toString() });
+              } else {
+                onItemChange(nv);
+              }
+            }}
+            precision={precision}
+            style={{ width: '100%' }}
+            placeholder={placeholder}
+          />
+        );
+      }}
+    </ProFormListHelper>
+  );
+}
+
+function ProFormListBase(props) {
+  const { fieldProps, ...rest } = props;
+
+  const isValueLabel = fieldProps?.isValueLabel;
+
+  return (
+    <ProForm.Item
+      {...rest}
+      required={props.required ?? true}
+      rules={[
+        ...(props.rules || []),
+        // { required: true },
+        {
+          validator: async (_, value) => {
+            if (isValueLabel) {
+              if (value?.some((item) => item.value === undefined)) {
+                return Promise.reject('每个选项都不能为空');
+              }
+            } else {
+              if (value?.some((item) => item === undefined)) {
+                return Promise.reject('每个选项都不能为空');
+              }
+            }
+            return Promise.resolve();
+          },
+        },
+      ]}
+    >
+      {props.children}
+    </ProForm.Item>
+  );
+}
+
+function ProFormListText(props: ProFormItemProps<ListTextProps>) {
+  const { fieldProps, ...rest } = props;
+
+  return (
+    <ProFormListBase {...rest}>
+      <ListText {...fieldProps} />
+    </ProFormListBase>
+  );
+}
+
+function ProFormListNumber(props: ProFormItemProps<ListNumberProps>) {
+  const { fieldProps, ...rest } = props;
+
+  return (
+    <ProFormListBase {...rest}>
+      <ListNumber {...fieldProps} />
+    </ProFormListBase>
+  );
+}
+
+export { ProFormListNumber, ProFormListText };

package/src/form/form_list/form_list_helper.tsx

@@ -0,0 +1,74 @@
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+
+interface ProFormListHelperProps<T> {
+  value?: T[];
+  onChange?: (value: T[]) => void;
+  children: (props: {
+    value?: T[];
+    item: T;
+    index: number;
+    onItemChange: (newItem: T) => void;
+  }) => React.ReactNode;
+  addText?: string;
+  getAdd: () => T;
+  readOnly?: boolean;
+}
+
+const emptyArr = [];
+function ProFormListHelper<T = any>(props: ProFormListHelperProps<T>) {
+  const options = props.value || emptyArr;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-2">
+        {options.map((item, index) => {
+          return (
+            <div key={index} className="flex">
+              <div className="flex-1 overflow-hidden">
+                {props.children({
+                  value: props.value,
+                  item,
+                  index,
+                  onItemChange: (newItem) => {
+                    const newOptions = [...options];
+                    newOptions[index] = newItem;
+                    props.onChange?.(newOptions);
+                  },
+                })}
+              </div>
+              {!props.readOnly && (
+                <Button
+                  icon={<DeleteOutlined />}
+                  type="text"
+                  onClick={() => {
+                    const newOptions = [...options];
+                    newOptions.splice(index, 1);
+                    props.onChange?.(newOptions);
+                  }}
+                />
+              )}
+            </div>
+          );
+        })}
+      </div>
+      {!props.readOnly && (
+        <div className="flex justify-center">
+          <Button
+            size="small"
+            icon={<PlusOutlined />}
+            onClick={() => {
+              const newOptions = [...options];
+              newOptions.push(props.getAdd());
+              props.onChange?.(newOptions);
+            }}
+          >
+            {props.addText || '添加'}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { ProFormListHelper };

package/src/form/form_list/form_list_modal_helper.tsx

@@ -0,0 +1,147 @@
+import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
+import { ModalForm } from '@ant-design/pro-components';
+import { Button } from 'antd';
+import React from 'react';
+
+const emptyArr = [];
+
+function Edit<T>(props: {
+  children: JSX.Element;
+  values?: T;
+  onChange: (values: T) => void;
+  detailForm: JSX.Element;
+  editForm?: any;
+  disabledAddFormSubmitter?: boolean;
+}) {
+  const handleFinish = async (newValues) => {
+    props.onChange(newValues as T);
+
+    return true;
+  };
+
+  return (
+    <ModalForm
+      title={props.values ? '编辑' : '添加'}
+      trigger={props.children}
+      onFinish={handleFinish}
+      formRef={props?.editForm}
+      initialValues={props.values || undefined}
+      submitter={
+        props.disabledAddFormSubmitter
+          ? false
+          : {
+              render: (props, defaultDoms) => {
+                return [
+                  <div
+                    key="cancel"
+                    className="pr-[20px] w-[500px] pt-[12px]"
+                    style={{ borderTop: '1px solid rgba(0, 0, 0, 0.1)' }}
+                  >
+                    <div className="custom-button-container">
+                      {React.Children.map(defaultDoms, (dom) => {
+                        return React.cloneElement(dom, {
+                          className:
+                            'w-[88px] h-[40px] text-base rounded-[0.5rem] ml-3' +
+                            (dom.props?.className || ''),
+                        });
+                      })}
+                    </div>
+                  </div>,
+                ];
+              },
+            }
+      }
+    >
+      {props.detailForm}
+    </ModalForm>
+  );
+}
+
+interface ProFormListModalHelperProps<T> {
+  value?: T[];
+  onChange?: (value: T[]) => void;
+  children: (props: { value?: T[]; item: T; index: number }) => React.ReactNode;
+  readOnly?: boolean;
+  detailForm: JSX.Element;
+  // 如果 addForm 存在，则使用 addForm 作为添加按钮
+  addForm?: JSX.Element;
+  // 禁用添加的提交按钮
+  disabledAddFormSubmitter?: boolean;
+
+  disabledAdd?: boolean;
+  // 触发添加
+  addTrigger?: JSX.Element;
+
+  editForm?: any;
+}
+
+function ProFormListModalHelper<T = any>(props: ProFormListModalHelperProps<T>) {
+  const options = props.value || emptyArr;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-2">
+        {options.map((item, index) => {
+          return (
+            <div key={index} className="group relative">
+              <div className="flex-1">
+                {props.children({
+                  value: props.value,
+                  item,
+                  index,
+                })}
+              </div>
+              {!props.readOnly && (
+                <div className="absolute right-1 top-1 hidden items-center bg-white group-hover:flex">
+                  <Edit<T>
+                    values={item}
+                    onChange={(newValues) => {
+                      const newOptions = [...options];
+                      newOptions[index] = newValues;
+                      props.onChange?.(newOptions);
+                    }}
+                    detailForm={props.detailForm}
+                    editForm={props?.editForm}
+                  >
+                    <Button icon={<EditOutlined />} type="text" size="small" />
+                  </Edit>
+                  <Button
+                    icon={<DeleteOutlined />}
+                    type="text"
+                    size="small"
+                    onClick={() => {
+                      const newOptions = [...options];
+                      newOptions.splice(index, 1);
+                      props.onChange?.(newOptions);
+                    }}
+                  />
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+      {!props.readOnly && !props.disabledAdd && (
+        <div className="flex justify-center">
+          <Edit<T>
+            onChange={(newValues) => {
+              props.onChange?.([...options, newValues]);
+            }}
+            detailForm={props.addForm || props.detailForm}
+            editForm={props?.editForm}
+            disabledAddFormSubmitter={props.disabledAddFormSubmitter}
+          >
+            {props.addTrigger || (
+              <Button size="small" icon={<PlusOutlined />}>
+                添加
+              </Button>
+            )}
+          </Edit>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { ProFormListModalHelper };
+export type { ProFormListModalHelperProps };

package/src/form/index.tsx

@@ -1,3 +1,7 @@
+export { ProFormListNumber, ProFormListText } from './form_list/form_list';
+export { ProFormListHelper } from './form_list/form_list_helper';
+export { ProFormListModalHelper } from './form_list/form_list_modal_helper';
+
 export { ProFormEditor } from './pro_form_editor';
 export { ProFormJavascript } from './pro_form_javascript';
 export { ProFormJSON } from './pro_form_json';

package/src/form/pro_form_editor.tsx

@@ -8,12 +8,11 @@ function EditorItem(props: EditorProps) {
 }
 
 function ProFormEditor(props: ProFormItemProps<EditorProps>) {
-  /* eslint-disable-next-line */
-  const { fieldProps, readonly, ...rest } = props;
+  const { fieldProps, ...rest } = props;
 
   return (
     <ProForm.Item {...rest}>
-      <EditorItem readOnly={readonly} {...(fieldProps as EditorProps)} />
+      <EditorItem {...fieldProps} />
     </ProForm.Item>
   );
 }

package/src/form/pro_form_javascript.tsx

@@ -12,12 +12,11 @@ function JavascriptItem(props: EditorJavascriptProps) {
 }
 
 function ProFormJavascript(props: ProFormItemProps<EditorJavascriptProps>) {
-  /* eslint-disable-next-line */
-  const { fieldProps, readonly, ...rest } = props;
+  const { fieldProps, ...rest } = props;
 
   return (
     <ProForm.Item {...rest}>
-      <JavascriptItem readonly={readonly} {...(fieldProps as EditorJavascriptProps)} />
+      <JavascriptItem {...(fieldProps as EditorJavascriptProps)} />
     </ProForm.Item>
   );
 }

package/src/form/pro_form_json.tsx

@@ -12,12 +12,11 @@ function JSONItem(props: EditorJSONProps) {
 }
 
 function ProFormJSON(props: ProFormItemProps<EditorJSONProps>) {
-  /* eslint-disable-next-line */
-  const { fieldProps, readonly, ...rest } = props;
+  const { fieldProps, ...rest } = props;
 
   return (
     <ProForm.Item {...rest}>
-      <JSONItem readonly={props.readonly} {...(fieldProps as EditorJSONProps)} />
+      <JSONItem {...(fieldProps as EditorJSONProps)} />
     </ProForm.Item>
   );
 }

package/src/form/pro_form_switch_number.tsx

@@ -25,8 +25,7 @@ function SwitchNumber(props: SwitchNumberProps) {
 }
 
 function ProFormSwitchNumber(props: ProFormItemProps<SwitchNumberProps>) {
-  /* eslint-disable-next-line */
-  const { fieldProps, readonly, ...rest } = props;
+  const { fieldProps, ...rest } = props;
 
   return (
     <ProForm.Item {...rest}>

package/src/index.ts

@@ -21,6 +21,10 @@ export {
   ProFormEditor,
   ProFormJSON,
   ProFormJavascript,
+  ProFormListHelper,
+  ProFormListModalHelper,
+  ProFormListNumber,
+  ProFormListText,
   ProFormSwitchNumber,
   proFormSelectSearchProps,
 } from './form';

package/src/table/index.tsx

@@ -47,11 +47,15 @@ function Table<
       columns={newColumns}
       scroll={getTableScroll(newColumns)}
       search={
-        hasSearch && {
-          labelWidth: 'auto',
-          defaultCollapsed: false,
-          ...search,
-        }
+        hasSearch
+          ? {
+              labelWidth: 'auto',
+              defaultCollapsed: false,
+              ...search,
+            }
+          : {
+              ...search,
+            }
       }
       {...rest}
     />

package/src/table/table.stories.tsx

@@ -1,15 +1,28 @@
 import type { ProColumns } from '@ant-design/pro-components';
 import { Table } from '@fe-free/core';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { fakeData } from '../crud/demo/data';
 
-const meta: Meta = {
+const meta: Meta<typeof Table> = {
   title: '@fe-free/core/Table',
+  component: Table,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `Table 基于 ProTable 做了一些封装：<br>
+- props column 需要显示的提供 search: true;
+- 列宽默认 120，和滚动条
+- 搜索样式做了默认设置，具体见代码
+- 页码做了默认设置，具体见代码
+`,
+      },
+    },
+  },
 };
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Table>;
 
 // 定义列配置
 const columns: ProColumns[] = [
@@ -51,30 +64,32 @@ export const Basic: Story = {
   ),
 };
 
-export const Search: Story = {
+export const ScrollX: Story = {
   render: () => (
-    <Table
-      columns={[
-        {
-          title: 'id',
-          dataIndex: 'id',
-        },
-        {
-          title: '名字(省略)',
-          dataIndex: 'name',
+    <div className="w-[400px]">
+      <Table
+        rowKey="id"
+        columns={[
+          {
+            title: 'id',
+            dataIndex: 'id',
+          },
+          {
+            title: '名字(省略)',
+            dataIndex: 'name',
 
-          ellipsis: true,
-        },
-        {
-          title: 'city',
-          dataIndex: 'city',
-        },
-        {
-          title: 'area',
-          dataIndex: 'area',
-        },
-      ]}
-      rowKey="id"
-    />
+            ellipsis: true,
+          },
+          {
+            title: 'city',
+            dataIndex: 'city',
+          },
+          {
+            title: 'area',
+            dataIndex: 'area',
+          },
+        ]}
+      />
+    </div>
   ),
 };

package/src/value_type_map/value_type_map.stories.tsx

@@ -1,6 +1,6 @@
 import { ProConfigProvider } from '@ant-design/pro-components';
 import { CRUD, CustomValueTypeEnum, customValueTypeMap } from '@fe-free/core';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import dayjs from 'dayjs';
 import { range } from 'lodash-es';