@regenbio/regenbio-components-react 1.2.15 → 1.2.16

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

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

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

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

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

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