@regenbio/regenbio-components-react 1.2.16 → 1.2.18

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

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

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

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

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

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