@regenbio/regenbio-components-react 1.2.16 → 1.2.18

package/packages/form/src/components/ModalForm/demos/modal-form-reset.tsx

@@ -1,112 +0,0 @@
-import type { ProFormInstance } from '@ant-design/pro-components';
-import { ModalForm, ProFormText } from '@ant-design/pro-components';
-import { Button, Space, message } from 'antd';
-import { useRef, useState } from 'react';
-
-const waitTime = (time: number = 100) => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(true);
-    }, time);
-  });
-};
-
-export default () => {
-  const restFormRef = useRef<ProFormInstance>();
-  const formRef = useRef<ProFormInstance>();
-  const [modalVisible, setModalVisible] = useState<boolean>(false);
-
-  return (
-    <Space>
-      <ModalForm
-        title="新建表单"
-        formRef={restFormRef}
-        open={modalVisible}
-        trigger={
-          <Button
-            type="primary"
-            onClick={() => {
-              setModalVisible(true);
-            }}
-          >
-            通过 formRef 重置
-          </Button>
-        }
-        onOpenChange={setModalVisible}
-        submitter={{
-          searchConfig: {
-            resetText: '重置',
-          },
-          resetButtonProps: {
-            onClick: () => {
-              restFormRef.current?.resetFields();
-              //   setModalVisible(false);
-            },
-          },
-        }}
-        onFinish={async (values) => {
-          await waitTime(2000);
-          console.log(values);
-          message.success('提交成功');
-          return true;
-        }}
-      >
-        <ProFormText
-          width="md"
-          name="name"
-          label="签约客户名称"
-          tooltip="最长为 24 位"
-          placeholder="请输入名称"
-        />
-
-        <ProFormText
-          width="md"
-          name="company"
-          label="我方公司名称"
-          placeholder="请输入名称"
-        />
-      </ModalForm>
-      <ModalForm
-        title="新建表单"
-        formRef={formRef}
-        trigger={<Button type="primary">通过自定义 footer 按钮重置</Button>}
-        submitter={{
-          render: (props, defaultDoms) => {
-            return [
-              ...defaultDoms,
-              <Button
-                key="extra-reset"
-                onClick={() => {
-                  props.reset();
-                }}
-              >
-                重置
-              </Button>,
-            ];
-          },
-        }}
-        onFinish={async (values) => {
-          await waitTime(2000);
-          console.log(values);
-          message.success('提交成功');
-          return true;
-        }}
-      >
-        <ProFormText
-          width="md"
-          name="name"
-          label="签约客户名称"
-          tooltip="最长为 24 位"
-          placeholder="请输入名称"
-        />
-
-        <ProFormText
-          width="md"
-          name="company"
-          label="我方公司名称"
-          placeholder="请输入名称"
-        />
-      </ModalForm>
-    </Space>
-  );
-};

package/packages/form/src/components/ModalForm/demos/modal-form-submitter.tsx

@@ -1,143 +0,0 @@
-import { ModalForm, ProFormText } from '@ant-design/pro-components';
-import { Button, Space, message } from 'antd';
-
-const waitTime = (time: number = 100) => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(true);
-    }, time);
-  });
-};
-
-export default () => {
-  return (
-    <Space>
-      <ModalForm
-        title="新建表单"
-        trigger={<Button type="primary">自己定义 footer 的按钮</Button>}
-        submitter={{
-          render: (props, defaultDoms) => {
-            return [
-              ...defaultDoms,
-              <Button
-                key="ok"
-                onClick={() => {
-                  props.submit();
-                }}
-              >
-                ok
-              </Button>,
-            ];
-          },
-        }}
-        onFinish={async (values) => {
-          await waitTime(2000);
-          console.log(values);
-          message.success('提交成功');
-          return true;
-        }}
-      >
-        <ProFormText
-          width="md"
-          name="name"
-          label="签约客户名称"
-          tooltip="最长为 24 位"
-          placeholder="请输入名称"
-        />
-
-        <ProFormText
-          width="md"
-          name="company"
-          label="我方公司名称"
-          placeholder="请输入名称"
-        />
-      </ModalForm>
-      <ModalForm
-        title="新建表单"
-        trigger={<Button type="primary">自定义文字</Button>}
-        submitter={{
-          searchConfig: {
-            submitText: '确认',
-            resetText: '取消',
-          },
-        }}
-        onFinish={async (values) => {
-          await waitTime(2000);
-          console.log(values);
-          message.success('提交成功');
-          return true;
-        }}
-      >
-        <ProFormText
-          width="md"
-          name="name"
-          label="签约客户名称"
-          tooltip="最长为 24 位"
-          placeholder="请输入名称"
-        />
-
-        <ProFormText
-          width="md"
-          name="company"
-          label="我方公司名称"
-          placeholder="请输入名称"
-        />
-      </ModalForm>
-      <ModalForm
-        title="新建表单"
-        trigger={<Button type="primary">隐藏或修改按钮样式</Button>}
-        submitter={{
-          resetButtonProps: {
-            type: 'dashed',
-          },
-          submitButtonProps: {
-            style: {
-              display: 'none',
-            },
-          },
-        }}
-        onFinish={async (values) => {
-          await waitTime(2000);
-          console.log(values);
-          message.success('提交成功');
-          return true;
-        }}
-      >
-        <ProFormText
-          width="md"
-          name="name"
-          label="签约客户名称"
-          tooltip="最长为 24 位"
-          placeholder="请输入名称"
-        />
-
-        <ProFormText
-          width="md"
-          name="company"
-          label="我方公司名称"
-          placeholder="请输入名称"
-        />
-      </ModalForm>
-      <ModalForm
-        title="隐藏footer"
-        trigger={<Button type="primary">隐藏footer</Button>}
-        submitter={false}
-      >
-        <ProFormText
-          width="md"
-          name="name"
-          label="签约客户名称"
-          tooltip="最长为 24 位"
-          placeholder="请输入名称"
-        />
-
-        <ProFormText
-          width="md"
-          name="company"
-          label="我方公司名称"
-          placeholder="请输入名称"
-        />
-      </ModalForm>
-    </Space>
-  );
-};

package/packages/form/src/components/ModalForm/demos/modal-form.tsx

@@ -1,112 +0,0 @@
-import { PlusOutlined } from '@ant-design/icons';
-import {
-  ModalForm,
-  ProForm,
-  ProFormDateRangePicker,
-  ProFormSelect,
-  ProFormText,
-} from '@ant-design/pro-components';
-import { Button, Form, message } from 'antd';
-
-const waitTime = (time: number = 100) => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(true);
-    }, time);
-  });
-};
-
-export default () => {
-  const [form] = Form.useForm<{ name: string; company: string }>();
-  return (
-    <ModalForm<{
-      name: string;
-      company: string;
-    }>
-      title="新建表单"
-      trigger={
-        <Button type="primary">
-          <PlusOutlined />
-          新建表单
-        </Button>
-      }
-      form={form}
-      autoFocusFirstInput
-      modalProps={{
-        destroyOnClose: true,
-        onCancel: () => console.log('run'),
-      }}
-      submitTimeout={2000}
-      onFinish={async (values) => {
-        await waitTime(2000);
-        console.log(values.name);
-        message.success('提交成功');
-        return true;
-      }}
-    >
-      <ProForm.Group>
-        <ProFormText
-          width="md"
-          name="name"
-          label="签约客户名称"
-          tooltip="最长为 24 位"
-          placeholder="请输入名称"
-        />
-
-        <ProFormText
-          width="md"
-          name="company"
-          label="我方公司名称"
-          placeholder="请输入名称"
-        />
-      </ProForm.Group>
-      <ProForm.Group>
-        <ProFormText
-          width="md"
-          name="contract"
-          label="合同名称"
-          placeholder="请输入名称"
-        />
-        <ProFormDateRangePicker name="contractTime" label="合同生效时间" />
-      </ProForm.Group>
-      <ProForm.Group>
-        <ProFormSelect
-          request={async () => [
-            {
-              value: 'chapter',
-              label: '盖章后生效',
-            },
-          ]}
-          width="xs"
-          name="useMode"
-          label="合同约定生效方式"
-        />
-        <ProFormSelect
-          width="xs"
-          options={[
-            {
-              value: 'time',
-              label: '履行完终止',
-            },
-          ]}
-          name="unusedMode"
-          label="合同约定失效效方式"
-        />
-      </ProForm.Group>
-      <ProFormText width="sm" name="id" label="主合同编号" />
-      <ProFormText
-        name="project"
-        disabled
-        label="项目名称"
-        initialValue="xxxx项目"
-      />
-      <ProFormText
-        width="xs"
-        name="mangerName"
-        disabled
-        label="商务经理"
-        initialValue="启途"
-      />
-    </ModalForm>
-  );
-};

package/packages/form/src/components/ModalForm/demos/visible-on-visible-change.tsx

@@ -1,187 +0,0 @@
-import { PlusOutlined } from '@ant-design/icons';
-import {
-  DrawerForm,
-  ModalForm,
-  ProForm,
-  ProFormDateRangePicker,
-  ProFormSelect,
-  ProFormText,
-} from '@ant-design/pro-components';
-import { Button, Space, message } from 'antd';
-import { useState } from 'react';
-
-export default () => {
-  const [modalVisit, setModalVisit] = useState(false);
-  const [drawerVisit, setDrawerVisit] = useState(false);
-
-  return (
-    <>
-      <Space>
-        <Button
-          type="primary"
-          onClick={() => {
-            setModalVisit(true);
-          }}
-        >
-          <PlusOutlined />
-          Modal 展示
-        </Button>
-        <Button
-          type="primary"
-          onClick={() => {
-            setDrawerVisit(true);
-          }}
-        >
-          <PlusOutlined />
-          Drawer 展示
-        </Button>
-      </Space>
-      <ModalForm
-        title="新建表单"
-        open={modalVisit}
-        onFinish={async () => {
-          message.success('提交成功');
-          return true;
-        }}
-        onOpenChange={setModalVisit}
-      >
-        <ProForm.Group>
-          <ProFormText
-            width="md"
-            name="name"
-            label="签约客户名称"
-            tooltip="最长为 24 位"
-            placeholder="请输入名称"
-          />
-
-          <ProFormText
-            width="md"
-            name="company"
-            label="我方公司名称"
-            placeholder="请输入名称"
-          />
-        </ProForm.Group>
-        <ProForm.Group>
-          <ProFormText
-            width="md"
-            name="contract"
-            label="合同名称"
-            placeholder="请输入名称"
-          />
-          <ProFormDateRangePicker name="contractTime" label="合同生效时间" />
-        </ProForm.Group>
-        <ProForm.Group>
-          <ProFormSelect
-            options={[
-              {
-                value: 'chapter',
-                label: '盖章后生效',
-              },
-            ]}
-            width="xs"
-            name="useMode"
-            label="合同约定生效方式"
-          />
-          <ProFormSelect
-            width="xs"
-            options={[
-              {
-                value: 'time',
-                label: '履行完终止',
-              },
-            ]}
-            name="unusedMode"
-            label="合同约定失效效方式"
-          />
-        </ProForm.Group>
-        <ProFormText width="sm" name="id" label="主合同编号" />
-        <ProFormText
-          name="project"
-          disabled
-          label="项目名称"
-          initialValue="xxxx项目"
-        />
-        <ProFormText
-          width="xs"
-          name="mangerName"
-          disabled
-          label="商务经理"
-          initialValue="启途"
-        />
-      </ModalForm>
-      <DrawerForm
-        onOpenChange={setDrawerVisit}
-        title="新建表单"
-        open={drawerVisit}
-        onFinish={async () => {
-          message.success('提交成功');
-          return true;
-        }}
-      >
-        <ProForm.Group>
-          <ProFormText
-            width="md"
-            name="name"
-            label="签约客户名称"
-            tooltip="最长为 24 位"
-            placeholder="请输入名称"
-          />
-
-          <ProFormText
-            width="md"
-            name="company"
-            label="我方公司名称"
-            placeholder="请输入名称"
-          />
-        </ProForm.Group>
-        <ProForm.Group>
-          <ProFormText
-            width="md"
-            name="contract"
-            label="合同名称"
-            placeholder="请输入名称"
-          />
-          <ProFormDateRangePicker name="contractTime" label="合同生效时间" />
-        </ProForm.Group>
-        <ProForm.Group>
-          <ProFormSelect
-            options={[
-              {
-                value: 'chapter',
-                label: '盖章后生效',
-              },
-            ]}
-            width="xs"
-            name="useMode"
-            label="合同约定生效方式"
-          />
-          <ProFormSelect
-            width="xs"
-            options={[
-              {
-                value: 'time',
-                label: '履行完终止',
-              },
-            ]}
-            name="unusedMode"
-            label="合同约定失效效方式"
-          />
-        </ProForm.Group>
-        <ProFormText width="sm" name="id" label="主合同编号" />
-        <ProFormText
-          name="project"
-          disabled
-          label="项目名称"
-          initialValue="xxxx项目"
-        />
-        <ProFormText
-          width="xs"
-          name="mangerName"
-          disabled
-          label="商务经理"
-          initialValue="启途"
-        />
-      </DrawerForm>
-    </>
-  );
-};

package/packages/form/src/components/ModalForm/index.en-US.md

@@ -1,70 +0,0 @@
----
-title: Modal/DrawerForm
-atomId: ModalForm,DrawerForm
-nav:
-  title: Components
----
-
-# Modal/DrawerForm - Floating Forms
-
-ModalForm and DrawerForm are a variant of ProForm, which is still a form in essence. So you can't customize the footer with `footer`, if you want to define the footer you need to use `submitter.render` to customize it. These two forms behave like ProForm and can be modified directly from ProForm.
-
-ModalForm and DrawerForm both provide triggers to reduce state usage, if you need to use state control you can use `open` and `onOpenChange` to control opening and closing.
-
-## Modal Forms
-
-<code src="./demos/modal-form.tsx"  background="var(--main-bg-color)" oldtitle="Modal Forms"></code>
-
-## Drawer Forms
-
-<code src="./demos/drawer-form.tsx"  background="var(--main-bg-color)" oldtitle="Drawer Forms"></code>
-
-## Nested Drawer Forms
-
-<code src="./demos/drawer-form-nested.tsx" debug  background="var(--main-bg-color)" oldtitle="Drawer Forms"></code>
-
-## Custom Modal Forms' Button
-
-<code src="./demos/modal-form-submitter.tsx"  background="var(--main-bg-color)" oldtitle="Custom Modal Forms' Button"></code>
-
-## Use open and onOpenChange
-
-<code src="./demos/visible-on-visible-change.tsx"  background="var(--main-bg-color)" oldtitle="Use open and onOpenChange"></code>
-
-## Reset Form
-
-<code src="./demos/modal-form-reset.tsx"  background="var(--main-bg-color)" oldtitle="Reset Form"></code>
-
-## API
-
-### ModalForm
-
-ModalForm combines Modal and ProForm to reduce tedious state management.
-
-| Parameters | Description | Type | Default |
-| --- | --- | --- | --- |
-| trigger | The dom used to trigger the Modal to open, usually the button | `ReactNode` | - |
-| open | whether to open | `boolean` | - |
-| onOpenChange | trigger when visible changes | `(visible:boolean)=>void` | - |
-| modalProps | Modal's props, used in the same way as [antd](https://ant.design/components/modal/). Note: 'visible' is not supported, please use the global visible | [props](https://ant.design/components/modal/#API) | - |
-| title | The title of the popup box | `ReactNode` | - |
-| width | the width of the popup box（Controlled attribute, when used, the weight is higher than resize） | `Number` | - |
-| onFinish | Triggered when submitting data, if returns a true, will close the popup and reset the form | `async (values)=>boolean` | - |
-| submitTimeout | Disable timeout for the Cancel button when submitting data (ms) | `Number` | - |
-| submitter | Submit button configurations in the same way as [ProForm](https://procomponents.ant.design/components/form) | [ProForm](https://procomponents.ant.design/components/form) | - |
-
-### DrawerForm
-
-DrawerForm combines Drawer and ProForm to reduce tedious state management.
-
-| Parameters | Description | Type | Default |
-| --- | --- | --- | --- |
-| trigger | The dom used to trigger the opening of the Modal, typically the button | `ReactNode` | - |
-| open | whether to open | `boolean` | - |
-| resize | whether to resize | `{onResize,maxWidth,minWidth}` \| `Boolean` | { onResize: () => { }, maxWidth: window\.innerWidth \* 0.8, minWidth: 300} |
-| onOpenChange | trigger when open changes | `(open:boolean)=>void` | - |
-| drawerProps | Drawer's props, used in the same way as [antd](https://ant.design/components/drawer/). Note: 'open' is not supported, please use the global open | [props](https://ant.design/components/drawer/#API) | - |
-| title | The title of the drawer | `ReactNode` | - |
-| width | width of the drawer | `Number` | - |
-| onFinish | Triggered when data is submitted. If a true is returned, it will close the drawer and reset the form | `async (values)=>boolean` | - |
-| submitTimeout | Disable timeout for the Cancel button when submitting data (ms) | `Number` | - |

package/packages/form/src/components/ModalForm/index.md

@@ -1,68 +0,0 @@
----
-title: Modal/Drawer - 浮层表单
-atomId: ModalForm,DrawerForm
-order: 2
----
-
-# 浮层表单
-
-ModalForm 和 DrawerForm 是 ProForm 的一个变体，本质上仍然是个表单。所以无法通过 `footer` 来自定义页脚，如果要定义页脚需要使用 `submitter.render` 来进行自定义。这两个表单的表现与 ProForm 相同，可以从 ProForm 直接修改而来。
-
-ModalForm 和 DrawerForm 都提供了 trigger 来减少 state 的使用，如果你需要使用 state 来控制可以使用 `open` 和 `onOpenChange` 来控制打开与关闭。
-
-## Modal 表单
-
-<code src="./demos/modal-form.tsx"  background="var(--main-bg-color)" title="Modal 表单"></code>
-
-## Drawer 表单
-
-<code src="./demos/drawer-form.tsx"  background="var(--main-bg-color)" title="Drawer 表单"></code>
-
-## 嵌套浮层表单
-
-<code src="./demos/drawer-form-nested.tsx" debug  background="var(--main-bg-color)" title="Drawer Forms"></code>
-
-## 自定义 Modal 表单按钮
-
-<code src="./demos/modal-form-submitter.tsx"  background="var(--main-bg-color)" title="自定义 Modal 表单按钮"></code>
-
-## 使用 open 和 onOpenChange
-
-<code src="./demos/visible-on-visible-change.tsx"  background="var(--main-bg-color)" title="使用 open 和 onOpenChange"></code>
-
-## 重置表单
-
-<code src="./demos/modal-form-reset.tsx"  background="var(--main-bg-color)" title="重置表单"></code>
-
-## API
-
-### ModalForm
-
-ModalForm 组合了 Modal 和 ProForm 可以减少繁琐的状态管理。
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| trigger | 用于触发 Modal 打开的 dom，一般是 button | `ReactNode` | - |
-| open | 是否打开 | `open` | - |
-| onOpenChange | visible 改变时触发 | `(open:boolean)=>void` | - |
-| modalProps | Modal 的 props，使用方式与 [antd](https://ant.design/components/modal-cn/) 相同。注意：不支持 'visible'，请使用全局的 visible | [props](https://ant.design/components/modal-cn/#API) | - |
-| title | 弹框的标题 | `ReactNode` | - |
-| width | 弹框的宽度 | `Number` | - |
-| onFinish | 提交数据时触发，如果返回一个 true。会关掉抽屉，如果配置了 `destroyOnClose` 还会重置表单。 | `async (values)=>boolean` | - |
-| submitTimeout | 提交数据时，禁用取消按钮的超时时间（毫秒）。 | `Number` | - |
-| submitter | 提交按钮相关配置，使用方式与 [ProForm](https://procomponents.ant.design/components/form) 相同。 | [ProForm](https://procomponents.ant.design/components/form) | - |
-
-### DrawerForm
-
-DrawerForm 组合了 Drawer 和 ProForm 可以减少繁琐的状态管理。
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| trigger | 用于触发 Modal 打开的 dom，一般是 button | `ReactNode` | - |
-| resize | 是否调整大小 | `{onResize,maxWidth,minWidth}` \| `Boolean` | { onResize: () => { }, maxWidth: window\.innerWidth \* 0.8, minWidth: 300} |
-| onOpenChange | open 改变时触发 | `(open:boolean)=>void` | - |
-| drawerProps | Drawer 的 props，使用方式与 [antd](https://ant.design/components/drawer-cn/) 相同。注意：不支持 'visible'，请使用全局的 visible | [props](https://ant.design/components/drawer-cn/#API) | - |
-| title | 抽屉的标题 | `ReactNode` | - |
-| width | 抽屉的宽度（受控属性，使用时权重高于 resize） | `Number` | - |
-| onFinish | 提交数据时触发，如果返回一个 true。会关掉抽屉，如果配置了 `destroyOnClose` 还会重置表单。 | `async (values)=>boolean` | - |
-| submitTimeout | 提交数据时，禁用取消按钮的超时时间（毫秒）。 | `Number` | - |