@regenbio/regenbio-components-react 1.2.14 → 1.2.16

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

@@ -0,0 +1,153 @@
+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

@@ -0,0 +1,201 @@
+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

@@ -0,0 +1,153 @@
+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

@@ -0,0 +1,157 @@
+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>
+  );
+};