@regenbio/regenbio-components-react 1.2.16 → 1.2.18

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

@@ -1,98 +0,0 @@
-import type { ProFormInstance } from '@ant-design/pro-components';
-import {
-  ProForm,
-  ProFormDatePicker,
-  ProFormText,
-} from '@ant-design/pro-components';
-import { Button, message } from 'antd';
-import dayjs from 'dayjs';
-import { useRef } from 'react';
-
-const waitTime = (time: number = 100) => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(true);
-    }, time);
-  });
-};
-
-export default () => {
-  const formRef = useRef<ProFormInstance>();
-  const onFill = () => {
-    formRef?.current?.setFieldsValue({
-      name: '张三',
-      company: '蚂蚁金服',
-    });
-  };
-
-  const getCompanyName = () => {
-    message.info(`公司名称为 "${formRef?.current?.getFieldValue('company')}"`);
-  };
-
-  const getFormatValues = () => {
-    console.log(
-      '格式化后的所有数据：',
-      formRef.current?.getFieldsFormatValue?.(),
-    );
-  };
-
-  const validateAndGetFormatValue = () => {
-    formRef.current?.validateFieldsReturnFormatValue?.().then((values) => {
-      console.log('校验表单并返回格式化后的所有数据：', values);
-    });
-  };
-
-  return (
-    <ProForm
-      title="新建表单"
-      formRef={formRef}
-      submitter={{
-        render: (props, doms) => {
-          return [
-            ...doms,
-            <Button htmlType="button" onClick={onFill} key="edit">
-              一键填写
-            </Button>,
-            <Button htmlType="button" onClick={getCompanyName} key="read">
-              读取公司
-            </Button>,
-            <Button.Group key="refs" style={{ display: 'block' }}>
-              <Button htmlType="button" onClick={getFormatValues} key="format">
-                获取格式化后的所有数据
-              </Button>
-              <Button
-                htmlType="button"
-                onClick={validateAndGetFormatValue}
-                key="format2"
-              >
-                校验表单并返回格式化后的所有数据
-              </Button>
-            </Button.Group>,
-          ];
-        },
-      }}
-      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="请输入名称"
-      />
-      <ProFormDatePicker name="date" initialValue={dayjs('2021-08-09')} />
-    </ProForm>
-  );
-};

package/packages/form/src/demos/label-col.tsx

@@ -1,48 +0,0 @@
-import {
-  ProForm,
-  ProFormCheckbox,
-  ProFormRadio,
-  ProFormText,
-} from '@ant-design/pro-components';
-import { Button } from 'antd';
-
-const layout = {
-  labelCol: { span: 8 },
-  wrapperCol: { span: 16 },
-};
-const tailLayout = {
-  wrapperCol: { offset: 8, span: 16 },
-};
-
-export default () => {
-  return (
-    <>
-      <ProForm
-        {...layout}
-        layout="horizontal"
-        submitter={false}
-        name="basic"
-        initialValues={{ remember: true }}
-      >
-        <ProFormText label="Name" name="name" />
-
-        <ProFormText.Password
-          label="Password"
-          name="password"
-          rules={[{ required: true, message: 'Please input your password!' }]}
-        />
-        <ProFormCheckbox name="remember" {...tailLayout}>
-          Remember me
-        </ProFormCheckbox>
-        <ProFormRadio name="remember" {...tailLayout}>
-          Remember me
-        </ProFormRadio>
-        <ProForm.Item {...tailLayout}>
-          <Button type="primary" htmlType="submit">
-            Submit
-          </Button>
-        </ProForm.Item>
-      </ProForm>
-    </>
-  );
-};

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

@@ -1,34 +0,0 @@
-import { ProForm, ProFormSelect } from '@ant-design/pro-components';
-import { message } from 'antd';
-
-export default () => {
-  return (
-    <ProForm
-      onFinish={async () => {
-        message.success('提交成功');
-      }}
-      onValuesChange={(v) => console.log(v)}
-    >
-      <ProFormSelect
-        options={[
-          {
-            value: 'chapter',
-            label: '盖章后生效',
-          },
-        ]}
-        width="sm"
-        name="useMode"
-        label="合同约定生效方式"
-        fieldProps={{
-          labelInValue: true,
-        }}
-        rules={[
-          {
-            required: true,
-            message: '请选择',
-          },
-        ]}
-      />
-    </ProForm>
-  );
-};

package/packages/form/src/demos/layout-change.tsx

@@ -1,347 +0,0 @@
-import {
-  AlipayCircleOutlined,
-  LockOutlined,
-  PlusOutlined,
-  TaobaoCircleOutlined,
-  UserOutlined,
-  WeiboCircleOutlined,
-} from '@ant-design/icons';
-import {
-  DrawerForm,
-  LightFilter,
-  LoginForm,
-  ModalForm,
-  ProForm,
-  ProFormDateRangePicker,
-  ProFormRadio,
-  ProFormSelect,
-  ProFormText,
-  QueryFilter,
-  StepsForm,
-} from '@ant-design/pro-components';
-import { Button, Space, message } from 'antd';
-import { useState } from 'react';
-
-const iconStyles = {
-  marginInlineStart: '16px',
-  color: 'rgba(0, 0, 0, 0.2)',
-  fontSize: '24px',
-  verticalAlign: 'middle',
-  cursor: 'pointer',
-};
-
-const waitTime = (time: number = 100) => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(true);
-    }, time);
-  });
-};
-
-export default () => {
-  const Components = {
-    ProForm,
-    ModalForm,
-    DrawerForm,
-    QueryFilter,
-    LightFilter,
-    StepsForm,
-    LoginForm,
-  };
-  const [type, setType] = useState<keyof typeof Components>('ProForm');
-
-  if (type === 'StepsForm') {
-    return (
-      <>
-        <ProFormRadio.Group
-          style={{
-            margin: 16,
-          }}
-          radioType="button"
-          fieldProps={{
-            value: type,
-            onChange: (e) => setType(e.target.value),
-          }}
-          options={[
-            'LightFilter',
-            'ProForm',
-            'ModalForm',
-            'DrawerForm',
-            'QueryFilter',
-            'StepsForm',
-            'LoginForm',
-          ]}
-        />
-        <StepsForm
-          onFinish={async (values: any) => {
-            await waitTime(2000);
-            console.log(values);
-            message.success('提交成功');
-          }}
-        >
-          <StepsForm.StepForm title="第一步">
-            <ProForm.Group>
-              <ProFormText
-                width="md"
-                name="name"
-                label="签约客户名称"
-                tooltip="最长为 24 位"
-                placeholder="请输入名称"
-              />
-              <ProFormText
-                width="md"
-                name="company"
-                label="我方公司名称"
-                placeholder="请输入名称"
-              />
-            </ProForm.Group>
-            <ProForm.Group>
-              <ProFormText
-                name={['contract', 'name']}
-                width="md"
-                label="合同名称"
-                placeholder="请输入名称"
-              />
-              <ProFormDateRangePicker
-                width="md"
-                name={['contract', 'createTime']}
-                label="合同生效时间"
-              />
-            </ProForm.Group>
-          </StepsForm.StepForm>
-          <StepsForm.StepForm title="第二步">
-            <ProForm.Group>
-              <ProFormSelect
-                options={[
-                  {
-                    value: 'chapter',
-                    label: '盖章后生效',
-                  },
-                ]}
-                readonly
-                width="xs"
-                name="useMode"
-                label="合同约定生效方式"
-              />
-              <ProFormSelect
-                width="xs"
-                options={[
-                  {
-                    value: 'time',
-                    label: '履行完终止',
-                  },
-                ]}
-                name="unusedMode"
-                label="合同约定失效效方式"
-              />
-            </ProForm.Group>
-          </StepsForm.StepForm>
-          <StepsForm.StepForm title="第二步">
-            <ProFormText width="sm" name="id" label="主合同编号" />
-            <ProFormText
-              name="project"
-              width="md"
-              disabled
-              label="项目名称"
-              initialValue="xxxx项目"
-            />
-            <ProFormText
-              width="xs"
-              name="mangerName"
-              disabled
-              label="商务经理"
-              initialValue="启途"
-            />
-          </StepsForm.StepForm>
-        </StepsForm>
-      </>
-    );
-  }
-
-  const FormComponents = Components[type as 'LoginForm'];
-
-  if (type === 'LoginForm') {
-    return (
-      <>
-        <ProFormRadio.Group
-          style={{
-            margin: 16,
-          }}
-          radioType="button"
-          fieldProps={{
-            value: type,
-            onChange: (e) => setType(e.target.value),
-          }}
-          options={[
-            'LightFilter',
-            'ProForm',
-            'ModalForm',
-            'DrawerForm',
-            'QueryFilter',
-            'StepsForm',
-            'LoginForm',
-          ]}
-        />
-        <FormComponents
-          title="Github"
-          subTitle="全球最大的代码托管平台"
-          actions={
-            <Space>
-              其他登录方式
-              <AlipayCircleOutlined style={iconStyles} />
-              <TaobaoCircleOutlined style={iconStyles} />
-              <WeiboCircleOutlined style={iconStyles} />
-            </Space>
-          }
-        >
-          <ProFormText
-            name="username"
-            fieldProps={{
-              size: 'large',
-              prefix: <UserOutlined className={'prefixIcon'} />,
-            }}
-            placeholder={'用户名: admin or user'}
-            rules={[
-              {
-                required: true,
-                message: '请输入用户名!',
-              },
-            ]}
-          />
-          <ProFormText.Password
-            name="password"
-            fieldProps={{
-              size: 'large',
-              prefix: <LockOutlined className={'prefixIcon'} />,
-            }}
-            placeholder={'密码: ant.design'}
-            rules={[
-              {
-                required: true,
-                message: '请输入密码！',
-              },
-            ]}
-          />
-        </FormComponents>
-      </>
-    );
-  }
-
-  return (
-    <>
-      <ProFormRadio.Group
-        style={{
-          margin: 16,
-        }}
-        radioType="button"
-        fieldProps={{
-          value: type,
-          onChange: (e) => setType(e.target.value),
-        }}
-        options={[
-          'LightFilter',
-          'ProForm',
-          'ModalForm',
-          'DrawerForm',
-          'QueryFilter',
-          'StepsForm',
-          'LoginForm',
-        ]}
-      />
-      <div
-        style={{
-          margin: 24,
-        }}
-      >
-        <FormComponents
-          // @ts-ignore
-          labelWidth="auto"
-          trigger={
-            <Button type="primary">
-              <PlusOutlined />
-              新建表单
-            </Button>
-          }
-          onFinish={async (values: any) => {
-            await waitTime(2000);
-            console.log(values);
-            message.success('提交成功');
-          }}
-          initialValues={{
-            name: '蚂蚁设计有限公司',
-            useMode: 'chapter',
-          }}
-        >
-          <ProForm.Group>
-            <ProFormText
-              width="md"
-              name="name"
-              label="签约客户名称"
-              tooltip="最长为 24 位"
-              placeholder="请输入名称"
-            />
-            <ProFormText
-              width="md"
-              name="company"
-              label="我方公司名称"
-              placeholder="请输入名称"
-            />
-          </ProForm.Group>
-          <ProForm.Group>
-            <ProFormText
-              name={['contract', 'name']}
-              width="md"
-              label="合同名称"
-              placeholder="请输入名称"
-            />
-            <ProFormDateRangePicker
-              width="md"
-              name={['contract', 'createTime']}
-              label="合同生效时间"
-            />
-          </ProForm.Group>
-          <ProForm.Group>
-            <ProFormSelect
-              options={[
-                {
-                  value: 'chapter',
-                  label: '盖章后生效',
-                },
-              ]}
-              readonly
-              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"
-            width="md"
-            disabled
-            label="项目名称"
-            initialValue="xxxx项目"
-          />
-          <ProFormText
-            width="xs"
-            name="mangerName"
-            disabled
-            label="商务经理"
-            initialValue="启途"
-          />
-        </FormComponents>
-      </div>
-    </>
-  );
-};

package/packages/form/src/demos/layout-footer.tsx

@@ -1,168 +0,0 @@
-import { SmileOutlined } from '@ant-design/icons';
-import {
-  FooterToolbar,
-  PageContainer,
-  ProForm,
-  ProFormDateRangePicker,
-  ProFormDigit,
-  ProFormRadio,
-  ProFormSelect,
-  ProFormText,
-  ProFormTextArea,
-  ProFormUploadButton,
-  ProLayout,
-} from '@ant-design/pro-components';
-import { Card } from 'antd';
-
-export default () => {
-  return (
-    <ProLayout
-      fixSiderbar
-      fixedHeader
-      breakpoint={false}
-      defaultCollapsed
-      pageTitleRender={false}
-      menuDataRender={() => [
-        {
-          path: '/one',
-          icon: <SmileOutlined />,
-          name: '一级名称',
-          children: [
-            {
-              path: 'two',
-              name: '二级名称',
-            },
-          ],
-        },
-      ]}
-      layout="mix"
-      location={{
-        pathname: '/one/two',
-      }}
-    >
-      <PageContainer title="输入表单">
-        <Card>
-          <ProForm
-            submitter={{
-              render: (_, dom) => <FooterToolbar>{dom}</FooterToolbar>,
-            }}
-            onFinish={async (values) => console.log(values)}
-          >
-            <ProForm.Group>
-              <ProFormText
-                name="name"
-                label="签约客户名称"
-                tooltip="最长为 24 位"
-                placeholder="请输入名称"
-              />
-              <ProFormText
-                width="md"
-                name="company"
-                label="我方公司名称"
-                placeholder="请输入名称"
-              />
-            </ProForm.Group>
-            <ProForm.Group>
-              <ProFormText
-                name={['contract', 'name']}
-                label="合同名称"
-                placeholder="请输入名称"
-              />
-              <ProFormDateRangePicker
-                name={['contract', 'createTime']}
-                label="合同生效时间"
-              />
-            </ProForm.Group>
-            <ProForm.Group>
-              <ProFormSelect
-                options={[
-                  {
-                    value: 'chapter',
-                    label: '盖章后生效',
-                  },
-                ]}
-                width="xs"
-                name="chapter"
-                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="启途"
-            />
-            <ProForm.Group>
-              <ProFormSelect
-                initialValue="money"
-                options={[
-                  {
-                    value: 'money',
-                    label: '确认金额',
-                  },
-                ]}
-                width="xs"
-                name="useMode"
-                label="金额类型"
-              />
-              <ProFormSelect
-                options={[
-                  {
-                    value: '6',
-                    label: '6%',
-                  },
-                  {
-                    value: '12',
-                    label: '12%',
-                  },
-                ]}
-                initialValue="6"
-                width="xs"
-                name="taxRate"
-                label="税率"
-              />
-              <ProFormRadio.Group
-                label="发票类型"
-                name="invoiceType"
-                initialValue="发票"
-                options={['发票', '普票', '无票']}
-              />
-            </ProForm.Group>
-            <ProFormUploadButton
-              extra="支持扩展名：.jpg .zip .doc .wps"
-              label="倒签报备附件"
-              name="file"
-              title="上传文件"
-            />
-            <ProFormDigit
-              width="xs"
-              name="num"
-              label="合同份数"
-              initialValue={5}
-            />
-            <ProFormTextArea width="xl" label="合同备注说明" name="remark" />
-          </ProForm>
-        </Card>
-      </PageContainer>
-    </ProLayout>
-  );
-};