@regenbio/regenbio-components-react 1.2.14 → 1.2.16

package/packages/form/src/demos/linkage-customization.tsx

@@ -0,0 +1,179 @@
+import {
+  ProCard,
+  ProForm,
+  ProFormCheckbox,
+  ProFormDatePicker,
+  ProFormDateRangePicker,
+  ProFormDependency,
+  ProFormSelect,
+  ProFormText,
+  ProFormTextArea,
+  StepsForm,
+} from '@ant-design/pro-components';
+import { Button, message } from 'antd';
+import { useState } from 'react';
+
+const waitTime = (time: number = 100) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, time);
+  });
+};
+
+export default () => {
+  const [loading, setLoading] = useState(false);
+  return (
+    <ProCard>
+      <StepsForm
+        onFinish={async () => {
+          setLoading(true);
+          await waitTime(1000);
+          message.success('提交成功');
+          setLoading(false);
+        }}
+        submitter={{
+          render: ({ form, onSubmit, step, onPre }) => {
+            return [
+              <Button
+                key="rest"
+                onClick={() => {
+                  form?.resetFields();
+                }}
+              >
+                重置
+              </Button>,
+              step > 0 && (
+                <Button
+                  key="pre"
+                  onClick={() => {
+                    onPre?.();
+                  }}
+                >
+                  上一步
+                </Button>
+              ),
+              <Button
+                key="next"
+                loading={loading}
+                type="primary"
+                onClick={() => {
+                  onSubmit?.();
+                }}
+              >
+                下一步
+              </Button>,
+            ];
+          },
+        }}
+        formProps={{
+          validateMessages: {
+            required: '此项为必填项',
+          },
+        }}
+      >
+        <StepsForm.StepForm
+          name="base"
+          title="创建实验"
+          onFinish={async () => {
+            setLoading(true);
+            await waitTime(2000);
+            setLoading(false);
+            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 name="checkbox" title="设置参数">
+          <ProFormCheckbox.Group
+            name="checkbox"
+            label="迁移类型"
+            width="lg"
+            options={['结构迁移', '全量迁移', '增量迁移', '全量校验']}
+          />
+          <ProForm.Group>
+            <ProFormText name="dbName" label="业务 DB 用户名" />
+            <ProFormDatePicker
+              name="datetime"
+              label="记录保存时间"
+              width="sm"
+            />
+          </ProForm.Group>
+          <ProFormDependency name={['dbName']}>
+            {({ dbName }) => {
+              return (
+                <ProFormCheckbox.Group
+                  name="checkbox"
+                  label="迁移类型"
+                  options={
+                    dbName
+                      ? ['完整 LOB', '不同步 LOB', '受限制 LOB']
+                      : ['完整 LOB']
+                  }
+                />
+              );
+            }}
+          </ProFormDependency>
+        </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,
+              },
+            ]}
+            initialValue="1"
+            width="md"
+            options={[
+              {
+                value: '1',
+                label: '策略一',
+              },
+              { value: '2', label: '策略二' },
+            ]}
+          />
+          <ProFormSelect
+            label="Pod 调度策略"
+            name="remark2"
+            initialValue="2"
+            width="md"
+            options={[
+              {
+                value: '1',
+                label: '策略一',
+              },
+              { value: '2', label: '策略二' },
+            ]}
+          />
+        </StepsForm.StepForm>
+      </StepsForm>
+    </ProCard>
+  );
+};

package/packages/form/src/demos/modalform-test.tsx

@@ -0,0 +1,121 @@
+import { PlusOutlined } from '@ant-design/icons';
+import {
+  ModalForm,
+  ProCard,
+  ProForm,
+  ProFormList,
+  ProFormText,
+} from '@ant-design/pro-components';
+import { Button } from 'antd';
+
+// 弹窗表单
+const FormModal = () => {
+  return (
+    <ModalForm<{
+      name: string;
+      company: string;
+    }>
+      title="新建表单"
+      trigger={
+        <Button type="primary">
+          <PlusOutlined />
+          新建表单
+        </Button>
+      }
+      onFinish={async (values) => {
+        console.log(values);
+        alert(JSON.stringify(values));
+        return true;
+      }}
+    >
+      <ProFormText width="sm" name="id" label="主合同编号" />
+    </ModalForm>
+  );
+};
+
+const Demo = () => {
+  return (
+    <div>
+      <div>
+        在form外边可以
+        <FormModal />
+      </div>
+      <div>
+        在form里面可以
+        <ProForm layout="horizontal">
+          <FormModal />
+          <ProFormList
+            name="attributes"
+            label="规格"
+            creatorButtonProps={{
+              creatorButtonText: '添加规格项',
+            }}
+            min={1}
+            copyIconProps={false}
+            itemRender={({ listDom, action }, { index }) => (
+              <ProCard
+                bordered
+                style={{ marginBlockEnd: 8 }}
+                title={`规格${index + 1}`}
+                extra={action}
+                bodyStyle={{ paddingBlockEnd: 0 }}
+              >
+                {listDom}
+              </ProCard>
+            )}
+            creatorRecord={{ name: '', items: [{ name: '' }] }}
+            initialValue={[{ name: '颜色', items: [{ name: '红' }] }]}
+          >
+            <ProFormText
+              style={{ padding: 0 }}
+              width="md"
+              name="name"
+              label="规格名"
+            />
+            <ProForm.Item
+              isListField
+              style={{ marginBlockEnd: 0 }}
+              label="规格值"
+            >
+              <ProFormList
+                name="items"
+                creatorButtonProps={{
+                  creatorButtonText: '新建',
+                  icon: false,
+                  type: 'link',
+                  style: { width: 'unset' },
+                }}
+                min={1}
+                copyIconProps={false}
+                deleteIconProps={{ tooltipText: '删除' }}
+                itemRender={({ listDom, action }) => (
+                  <div
+                    style={{
+                      display: 'inline-flex',
+                      marginInlineEnd: 25,
+                    }}
+                  >
+                    {listDom}
+                    {action}
+                  </div>
+                )}
+              >
+                <ProFormText allowClear={false} width="xs" name={['name']} />
+                <div>
+                  在内层formlist拿不到
+                  <FormModal />
+                </div>
+              </ProFormList>
+            </ProForm.Item>
+            <div>
+              在外层formlist拿不到
+              <FormModal />
+            </div>
+          </ProFormList>
+        </ProForm>
+      </div>
+    </div>
+  );
+};
+
+export default Demo;

package/packages/form/src/demos/money.tsx

@@ -0,0 +1,139 @@
+import type { ProFormInstance } from '@ant-design/pro-components';
+import {
+  ProForm,
+  ProFormMoney,
+  ProFormSwitch,
+} from '@ant-design/pro-components';
+import { message } from 'antd';
+import { useRef, useState } from 'react';
+
+const waitTime = (time: number = 100) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, time);
+  });
+};
+
+export default () => {
+  const formRef = useRef<
+    ProFormInstance<{
+      name: string;
+      company?: string;
+      useMode?: string;
+    }>
+  >();
+
+  const [readonly, setReadonly] = useState(false);
+  return (
+    <>
+      <ProFormSwitch
+        checkedChildren="开启"
+        unCheckedChildren="关闭"
+        label="是否只读"
+        fieldProps={{
+          onChange: setReadonly,
+        }}
+      />
+      <ProForm<{
+        name: string;
+        company?: string;
+        useMode?: string;
+      }>
+        onFinish={async (values) => {
+          await waitTime(2000);
+          console.log(values);
+          const val1 = await formRef.current?.validateFields();
+          console.log('validateFields:', val1);
+          const val2 =
+            await formRef.current?.validateFieldsReturnFormatValue?.();
+          console.log('validateFieldsReturnFormatValue:', val2);
+          message.success('提交成功');
+        }}
+        formRef={formRef}
+        params={{ id: '100' }}
+        formKey="base-form-use-demo"
+        readonly={readonly}
+        request={async () => {
+          await waitTime(100);
+          return {
+            name: '蚂蚁设计有限公司',
+            useMode: 'chapter',
+          };
+        }}
+        autoFocusFirstInput
+      >
+        <ProFormMoney
+          label="不显示符号"
+          name="amount0"
+          fieldProps={{
+            moneySymbol: false,
+          }}
+          locale="en-US"
+          initialValue={22.22}
+          min={0}
+          width="lg"
+        />
+        <ProFormMoney
+          label="宽度"
+          name="amount1"
+          locale="en-US"
+          initialValue={22.22}
+          min={0}
+          width="lg"
+        />
+        <ProFormMoney
+          label="限制金额最小为0"
+          name="amount2"
+          locale="en-US"
+          initialValue={22.22}
+          min={0}
+          trigger="onBlur"
+        />
+        <ProFormMoney
+          label="不限制金额大小"
+          name="amount3"
+          locale="en-GB"
+          initialValue={22.22}
+        />
+        <ProFormMoney
+          label="货币符号跟随全局国际化"
+          name="amount4"
+          initialValue={22.22}
+        />
+        <ProFormMoney
+          label="货币符号指定为 ms-MY"
+          name="amount-ms-My"
+          locale="ms-MY"
+          initialValue={-22.22}
+        />
+        <ProFormMoney
+          label="货币符号指定为 zh-TW"
+          name="amount-zh-TW"
+          locale="zh-TW"
+          initialValue={22.22}
+        />
+        <ProFormMoney
+          label="自定义货币符号"
+          name="amount5"
+          initialValue={22.22}
+          customSymbol="💰"
+        />
+        <ProFormMoney
+          label="小数点精度"
+          name="amount6"
+          initialValue={2222222222.222222}
+          fieldProps={{ precision: 2 }}
+          customSymbol="💰"
+        />
+        <ProFormMoney
+          label="小数点精度-0"
+          name="amount6"
+          initialValue={2222222222.222222}
+          fieldProps={{ precision: 0 }}
+          customSymbol="💰"
+        />
+      </ProForm>
+    </>
+  );
+};

package/packages/form/src/demos/params-formref.tsx

@@ -0,0 +1,36 @@
+import { BetaSchemaForm } from '@ant-design/pro-components';
+import { useEffect, useRef, useState } from 'react';
+
+export default () => {
+  const targetRef = useRef();
+
+  const [requestLibData, setRequestLibData] = useState(0);
+  useEffect(() => {
+    // 更新requestLibData，并引发reRender
+    setTimeout(() => {
+      setRequestLibData(1);
+    });
+  }, []);
+  // 查看reRender后的ref标记
+  useEffect(() => console.log('targetRef.current1', targetRef.current));
+  // 查看reRender后的ref标记
+  useEffect(() => {
+    setTimeout(() => {
+      console.log('targetRef.current1', targetRef.current);
+    }, 1000);
+  });
+  return (
+    <BetaSchemaForm
+      request={async () => ({})}
+      params={{ requestLibData }}
+      columns={[
+        {
+          title: 'money',
+          dataIndex: 'money',
+          valueType: 'money',
+        },
+      ]}
+      formRef={targetRef}
+    />
+  );
+};

package/packages/form/src/demos/pro-form-dependency.debug.tsx

@@ -0,0 +1,95 @@
+import {
+  ProCard,
+  ProForm,
+  ProFormDependency,
+  ProFormGroup,
+  ProFormList,
+  ProFormSwitch,
+  ProFormText,
+} from '@ant-design/pro-components';
+
+const Demo = () => {
+  return (
+    <ProForm onFinish={async (e) => console.log(e)}>
+      <ProFormText name="name" label="姓名" />
+      <ProFormList
+        name="users"
+        label="用户信息"
+        initialValue={[
+          {
+            name: '1111',
+          },
+        ]}
+        itemRender={({ listDom, action }, { record }) => {
+          return (
+            <ProCard
+              bordered
+              extra={action}
+              title={record?.name}
+              style={{
+                marginBlockEnd: 8,
+              }}
+            >
+              {listDom}
+            </ProCard>
+          );
+        }}
+      >
+        <ProFormGroup>
+          <ProFormText name="name" label="姓名" />
+        </ProFormGroup>
+        <ProFormList
+          name="labels"
+          label="用户信息"
+          initialValue={[
+            {
+              value: '333',
+              label: '333',
+            },
+          ]}
+          copyIconProps={{
+            tooltipText: '复制此项到末尾',
+          }}
+          deleteIconProps={{
+            tooltipText: '不需要这行了',
+          }}
+        >
+          <ProFormGroup>
+            <ProFormSwitch name="is_show" label="显示名称" />
+          </ProFormGroup>
+          <ProFormDependency name={['is_show']}>
+            {({ is_show }) => {
+              console.log(is_show);
+              if (!is_show) return null;
+              return (
+                <ProFormList
+                  name="labels"
+                  label="用户信息"
+                  initialValue={[
+                    {
+                      value: '333',
+                      label: '333',
+                    },
+                  ]}
+                  copyIconProps={{
+                    tooltipText: '复制此项到末尾',
+                  }}
+                  deleteIconProps={{
+                    tooltipText: '不需要这行了',
+                  }}
+                >
+                  <ProFormGroup>
+                    <ProFormText name="value" label="值" />
+                    <ProFormSwitch name="is_show" label="显示名称" />
+                  </ProFormGroup>
+                </ProFormList>
+              );
+            }}
+          </ProFormDependency>
+        </ProFormList>
+      </ProFormList>
+    </ProForm>
+  );
+};
+
+export default Demo;