@regenbio/regenbio-components-react 1.2.16 → 1.2.18

package/packages/form/src/components/StepsForm/demos/modal-step-form.tsx

@@ -1,153 +0,0 @@
-import { PlusOutlined } from '@ant-design/icons';
-import {
-  ProForm,
-  ProFormCheckbox,
-  ProFormDatePicker,
-  ProFormDateTimePicker,
-  ProFormSelect,
-  ProFormText,
-  ProFormTextArea,
-  StepsForm,
-} from '@ant-design/pro-components';
-import { Button, Modal, message } from 'antd';
-import { useState } from 'react';
-
-const waitTime = (time: number = 100) => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(true);
-    }, time);
-  });
-};
-
-export default () => {
-  const [visible, setVisible] = useState(false);
-  return (
-    <>
-      <Button type="primary" onClick={() => setVisible(true)}>
-        <PlusOutlined />
-        分步表单新建
-      </Button>
-      <StepsForm
-        onFinish={async (values) => {
-          console.log(values);
-          await waitTime(1000);
-          setVisible(false);
-          message.success('提交成功');
-        }}
-        formProps={{
-          validateMessages: {
-            required: '此项为必填项',
-          },
-        }}
-        stepsFormRender={(dom, submitter) => {
-          return (
-            <Modal
-              title="分步表单"
-              width={800}
-              onCancel={() => setVisible(false)}
-              open={visible}
-              footer={submitter}
-              destroyOnClose
-            >
-              {dom}
-            </Modal>
-          );
-        }}
-      >
-        <StepsForm.StepForm
-          name="base"
-          title="创建实验"
-          onFinish={async () => {
-            await waitTime(2000);
-            return true;
-          }}
-        >
-          <ProFormText
-            name="name"
-            width="md"
-            label="实验名称"
-            tooltip="最长为 24 位，用于标定的唯一 id"
-            placeholder="请输入名称"
-            rules={[{ required: true }]}
-          />
-          <ProFormDatePicker name="date" label="日期" />
-          <ProForm.Group title="时间选择">
-            <ProFormDateTimePicker name="dateTime" label="开始时间" />
-            <ProFormDatePicker name="date" label="结束时间" />
-          </ProForm.Group>
-          <ProFormTextArea
-            name="remark"
-            label="备注"
-            width="lg"
-            placeholder="请输入备注"
-          />
-        </StepsForm.StepForm>
-        <StepsForm.StepForm name="checkbox" title="设置参数">
-          <ProFormCheckbox.Group
-            name="checkbox"
-            label="迁移类型"
-            width="lg"
-            options={['结构迁移', '全量迁移', '增量迁移', '全量校验']}
-          />
-          <ProForm.Group>
-            <ProFormText width="md" name="dbname" label="业务 DB 用户名" />
-            <ProFormDatePicker
-              name="datetime"
-              label="记录保存时间"
-              width="sm"
-            />
-            <ProFormCheckbox.Group
-              name="checkbox"
-              label="迁移类型"
-              options={['完整 LOB', '不同步 LOB', '受限制 LOB']}
-            />
-          </ProForm.Group>
-        </StepsForm.StepForm>
-        <StepsForm.StepForm name="time" title="发布实验">
-          <ProFormCheckbox.Group
-            name="checkbox"
-            label="部署单元"
-            rules={[
-              {
-                required: true,
-              },
-            ]}
-            options={['部署单元1', '部署单元2', '部署单元3']}
-          />
-          <ProFormSelect
-            label="部署分组策略"
-            name="remark"
-            rules={[
-              {
-                required: true,
-              },
-            ]}
-            width="md"
-            initialValue="1"
-            options={[
-              {
-                value: '1',
-                label: '策略一',
-              },
-              { value: '2', label: '策略二' },
-            ]}
-          />
-          <ProFormSelect
-            label="Pod 调度策略"
-            name="remark2"
-            width="md"
-            initialValue="2"
-            options={[
-              {
-                value: '1',
-                label: '策略一',
-              },
-              { value: '2', label: '策略二' },
-            ]}
-          />
-        </StepsForm.StepForm>
-      </StepsForm>
-    </>
-  );
-};

package/packages/form/src/components/StepsForm/demos/multi-card-step-form.tsx

@@ -1,201 +0,0 @@
-import {
-  ProCard,
-  ProForm,
-  ProFormCheckbox,
-  ProFormDatePicker,
-  ProFormDateRangePicker,
-  ProFormDigit,
-  ProFormSelect,
-  ProFormText,
-  StepsForm,
-} from '@ant-design/pro-components';
-import { message } from 'antd';
-
-const waitTime = (time: number = 100) => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(true);
-    }, time);
-  });
-};
-
-export default () => {
-  return (
-    <>
-      <StepsForm
-        onFinish={async (values) => {
-          console.log(values);
-          await waitTime(1000);
-          message.success('提交成功');
-        }}
-        formProps={{
-          validateMessages: {
-            required: '此项为必填项',
-          },
-        }}
-      >
-        <StepsForm.StepForm
-          name="base"
-          title="第一步骤"
-          onFinish={async () => {
-            await waitTime(2000);
-            return true;
-          }}
-        >
-          <ProCard
-            title="源和目标"
-            bordered
-            headerBordered
-            collapsible
-            style={{
-              marginBlockEnd: 16,
-              minWidth: 800,
-              maxWidth: '100%',
-            }}
-          >
-            <ProFormText
-              name="name"
-              width="md"
-              label="迁移任务名称"
-              tooltip="最长为 24 位，用于标定的唯一 id"
-              placeholder="请输入名称"
-              rules={[{ required: true }]}
-            />
-            <ProForm.Group title="节点" size={8}>
-              <ProFormSelect
-                width="sm"
-                name="source"
-                placeholder="选择来源节点"
-              />
-              <ProFormSelect
-                width="sm"
-                name="target"
-                placeholder="选择目标节点"
-              />
-            </ProForm.Group>
-          </ProCard>
-
-          <ProCard
-            title="顶部对齐"
-            bordered
-            headerBordered
-            collapsible
-            style={{
-              minWidth: 800,
-              marginBlockEnd: 16,
-            }}
-          >
-            <ProFormDigit
-              name="xs"
-              label="XS号表单"
-              initialValue={9999}
-              tooltip="悬浮出现的气泡。"
-              placeholder="请输入名称"
-              width="xs"
-            />
-            <ProFormText
-              name="s"
-              label="S号表单"
-              placeholder="请输入名称"
-              width="sm"
-            />
-            <ProFormDateRangePicker name="m" label="M 号表单" />
-            <ProFormSelect
-              name="l"
-              label="L 号表单"
-              fieldProps={{
-                mode: 'tags',
-              }}
-              width="lg"
-              initialValue={['吴家豪', '周星星']}
-              options={['吴家豪', '周星星', '陈拉风'].map((item) => ({
-                label: item,
-                value: item,
-              }))}
-            />
-          </ProCard>
-        </StepsForm.StepForm>
-        <StepsForm.StepForm name="checkbox" title="第二步骤">
-          <ProCard
-            style={{
-              minWidth: 800,
-              marginBlockEnd: 16,
-              maxWidth: '100%',
-            }}
-          >
-            <ProFormCheckbox.Group
-              name="checkbox"
-              label="迁移类型"
-              width="lg"
-              options={['结构迁移', '全量迁移', '增量迁移', '全量校验']}
-            />
-            <ProForm.Group>
-              <ProFormText name="dbname" label="业务 DB 用户名" />
-              <ProFormDatePicker
-                name="datetime"
-                label="记录保存时间"
-                width="sm"
-              />
-            </ProForm.Group>
-            <ProFormCheckbox.Group
-              name="checkbox"
-              label="迁移类型"
-              options={['完整 LOB', '不同步 LOB', '受限制 LOB']}
-            />
-          </ProCard>
-        </StepsForm.StepForm>
-        <StepsForm.StepForm name="time" title="第三步骤">
-          <ProCard
-            style={{
-              marginBlockEnd: 16,
-              minWidth: 800,
-              maxWidth: '100%',
-            }}
-          >
-            <ProFormCheckbox.Group
-              name="checkbox"
-              label="部署单元"
-              rules={[
-                {
-                  required: true,
-                },
-              ]}
-              options={['部署单元1', '部署单元2', '部署单元3']}
-            />
-            <ProFormSelect
-              label="部署分组策略"
-              name="remark"
-              rules={[
-                {
-                  required: true,
-                },
-              ]}
-              width="md"
-              initialValue="1"
-              options={[
-                {
-                  value: '1',
-                  label: '策略一',
-                },
-                { value: '2', label: '策略二' },
-              ]}
-            />
-            <ProFormSelect
-              label="Pod 调度策略"
-              name="remark2"
-              width="md"
-              initialValue="2"
-              options={[
-                {
-                  value: '1',
-                  label: '策略一',
-                },
-                { value: '2', label: '策略二' },
-              ]}
-            />
-          </ProCard>
-        </StepsForm.StepForm>
-      </StepsForm>
-    </>
-  );
-};

package/packages/form/src/components/StepsForm/demos/steps-form-vertical.tsx

@@ -1,153 +0,0 @@
-import type { ProFormInstance } from '@ant-design/pro-components';
-import {
-  ProCard,
-  ProForm,
-  ProFormCheckbox,
-  ProFormDatePicker,
-  ProFormDateRangePicker,
-  ProFormText,
-  ProFormTextArea,
-  StepsForm,
-} from '@ant-design/pro-components';
-import { message } from 'antd';
-import { useRef } from 'react';
-
-const waitTime = (time: number = 100) => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(true);
-    }, time);
-  });
-};
-
-export default () => {
-  const formRef = useRef<ProFormInstance>();
-
-  return (
-    <ProCard>
-      <StepsForm<{
-        name: string;
-      }>
-        stepsProps={{
-          direction: 'vertical',
-        }}
-        formRef={formRef}
-        onFinish={async () => {
-          await waitTime(1000);
-          message.success('提交成功');
-        }}
-        formProps={{
-          validateMessages: {
-            required: '此项为必填项',
-          },
-        }}
-      >
-        <StepsForm.StepForm<{
-          name: string;
-        }>
-          name="base"
-          title="创建实验"
-          stepProps={{
-            description: '这里填入的都是基本信息',
-          }}
-          onFinish={async () => {
-            console.log(formRef.current?.getFieldsValue());
-            await waitTime(2000);
-            return true;
-          }}
-        >
-          <ProFormText
-            name="name"
-            label="实验名称"
-            width="md"
-            tooltip="最长为 24 位，用于标定的唯一 id"
-            placeholder="请输入名称"
-            rules={[{ required: true }]}
-          />
-          <ProFormDatePicker name="date" label="日期" />
-          <ProFormDateRangePicker name="dateTime" label="时间区间" />
-          <ProFormTextArea
-            name="remark"
-            label="备注"
-            width="lg"
-            placeholder="请输入备注"
-          />
-        </StepsForm.StepForm>
-        <StepsForm.StepForm<{
-          checkbox: string;
-        }>
-          name="checkbox"
-          title="设置参数"
-          stepProps={{
-            description: '这里填入运维参数',
-          }}
-          onFinish={async () => {
-            console.log(formRef.current?.getFieldsValue());
-            return true;
-          }}
-        >
-          <ProFormCheckbox.Group
-            name="checkbox"
-            label="迁移类型"
-            width="lg"
-            options={[
-              '结构迁移',
-              '全量迁移',
-              '增量迁移',
-              '全量校验',
-              '增量校验',
-              '全量替换',
-              '增量替换',
-            ]}
-          />
-          <ProForm.Group>
-            <ProFormText name="dbname" label="业务 DB 用户名" />
-            <ProFormDatePicker
-              name="datetime"
-              label="记录保存时间"
-              width="sm"
-            />
-          </ProForm.Group>
-          <ProFormCheckbox.Group
-            name="checkbox"
-            label="迁移类型"
-            options={['完整 LOB', '不同步 LOB', '受限制 LOB']}
-          />
-        </StepsForm.StepForm>
-        <StepsForm.StepForm<{
-          checkbox: string;
-        }>
-          name="step3"
-          title="第三步"
-          stepProps={{
-            description: '这里填入运维参数',
-          }}
-          onFinish={async () => {
-            console.log(formRef.current?.getFieldsValue());
-            return true;
-          }}
-        >
-          <ProFormCheckbox.Group
-            name="checkbox"
-            label="迁移类型"
-            width="lg"
-            options={['结构迁移', '全量迁移', '全量校验', '增量替换']}
-          />
-          <ProForm.Group>
-            <ProFormText name="dbname" label="业务 DB 用户名" />
-            <ProFormDatePicker
-              name="datetime"
-              label="记录保存时间"
-              width="sm"
-            />
-          </ProForm.Group>
-          <ProFormCheckbox.Group
-            name="checkbox"
-            label="迁移类型"
-            options={['完整 LOB', '不同步 LOB', '受限制 LOB']}
-          />
-        </StepsForm.StepForm>
-      </StepsForm>
-    </ProCard>
-  );
-};

package/packages/form/src/components/StepsForm/demos/steps-from.tsx

@@ -1,157 +0,0 @@
-import type { ProFormInstance } from '@ant-design/pro-components';
-import {
-  ProCard,
-  ProForm,
-  ProFormCheckbox,
-  ProFormDatePicker,
-  ProFormDateRangePicker,
-  ProFormSelect,
-  ProFormText,
-  ProFormTextArea,
-  StepsForm,
-} from '@ant-design/pro-components';
-import { message } from 'antd';
-import { useRef } from 'react';
-
-const waitTime = (time: number = 100) => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(true);
-    }, time);
-  });
-};
-
-export default () => {
-  const formRef = useRef<ProFormInstance>();
-
-  return (
-    <ProCard>
-      <StepsForm<{
-        name: string;
-      }>
-        formRef={formRef}
-        onFinish={async () => {
-          await waitTime(1000);
-          message.success('提交成功');
-        }}
-        formProps={{
-          validateMessages: {
-            required: '此项为必填项',
-          },
-        }}
-      >
-        <StepsForm.StepForm<{
-          name: string;
-        }>
-          name="base"
-          title="创建实验"
-          stepProps={{
-            description: '这里填入的都是基本信息',
-          }}
-          onFinish={async () => {
-            console.log(formRef.current?.getFieldsValue());
-            await waitTime(2000);
-            return true;
-          }}
-        >
-          <ProFormText
-            name="name"
-            label="实验名称"
-            width="md"
-            tooltip="最长为 24 位，用于标定的唯一 id"
-            placeholder="请输入名称"
-            rules={[{ required: true }]}
-          />
-          <ProFormDatePicker name="date" label="日期" />
-          <ProFormDateRangePicker name="dateTime" label="时间区间" />
-          <ProFormTextArea
-            name="remark"
-            label="备注"
-            width="lg"
-            placeholder="请输入备注"
-          />
-        </StepsForm.StepForm>
-        <StepsForm.StepForm<{
-          checkbox: string;
-        }>
-          name="checkbox"
-          title="设置参数"
-          stepProps={{
-            description: '这里填入运维参数',
-          }}
-          onFinish={async () => {
-            console.log(formRef.current?.getFieldsValue());
-            return true;
-          }}
-        >
-          <ProFormCheckbox.Group
-            name="checkbox"
-            label="迁移类型"
-            width="lg"
-            options={['结构迁移', '全量迁移', '增量迁移', '全量校验']}
-          />
-          <ProForm.Group>
-            <ProFormText name="dbname" label="业务 DB 用户名" />
-            <ProFormDatePicker
-              name="datetime"
-              label="记录保存时间"
-              width="sm"
-            />
-            <ProFormCheckbox.Group
-              name="checkbox"
-              label="迁移类型"
-              options={['完整 LOB', '不同步 LOB', '受限制 LOB']}
-            />
-          </ProForm.Group>
-        </StepsForm.StepForm>
-        <StepsForm.StepForm
-          name="time"
-          title="发布实验"
-          stepProps={{
-            description: '这里填入发布判断',
-          }}
-        >
-          <ProFormCheckbox.Group
-            name="checkbox"
-            label="部署单元"
-            rules={[
-              {
-                required: true,
-              },
-            ]}
-            options={['部署单元1', '部署单元2', '部署单元3']}
-          />
-          <ProFormSelect
-            label="部署分组策略"
-            name="remark"
-            rules={[
-              {
-                required: true,
-              },
-            ]}
-            initialValue="1"
-            options={[
-              {
-                value: '1',
-                label: '策略一',
-              },
-              { value: '2', label: '策略二' },
-            ]}
-          />
-          <ProFormSelect
-            label="Pod 调度策略"
-            name="remark2"
-            initialValue="2"
-            options={[
-              {
-                value: '1',
-                label: '策略一',
-              },
-              { value: '2', label: '策略二' },
-            ]}
-          />
-        </StepsForm.StepForm>
-      </StepsForm>
-    </ProCard>
-  );
-};