@regenbio/regenbio-components-react 1.2.15 → 1.2.16

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

@@ -0,0 +1,64 @@
+import { SmileOutlined } from '@ant-design/icons';
+import {
+  ProForm,
+  ProFormCheckbox,
+  ProFormField,
+  ProFormRadio,
+  ProFormSlider,
+  ProFormSwitch,
+  ProFormUploadButton,
+  ProFormUploadDragger,
+} from '@ant-design/pro-components';
+import { Button, Input } from 'antd';
+import { useRef } from 'react';
+
+const Demo = () => {
+  const formRef = useRef();
+  return (
+    <ProForm
+      name="validate_other"
+      initialValues={{
+        'input-number': 3,
+        'checkbox-group': ['A', 'B'],
+        rate: 3.5,
+        range: 5,
+        name: 'qixian',
+      }}
+      formRef={formRef}
+      onFinish={async (value) => console.log(value)}
+    >
+      <ProFormUploadButton
+        name="upload"
+        icon={<SmileOutlined />}
+        label="Upload"
+        title="点击上传"
+        action="/upload.do"
+        extra="longgggggggggggggggggggggggggggggggggg"
+      />
+      <ProFormRadio name="test" />
+      <ProFormCheckbox name="test2" />
+      <ProFormSwitch width="lg" label="是否打开" />
+      <ProFormUploadDragger
+        title="拖动上传"
+        icon={<SmileOutlined />}
+        description="支持 text"
+        label="Dragger"
+        name="dragger"
+        fieldProps={{
+          showUploadList: true,
+        }}
+      />
+      <ProFormSlider name="range" label="范围" />
+      <ProFormField>test</ProFormField>
+      <ProFormField>
+        <Input />
+      </ProFormField>
+      <ProForm.Item>
+        <Button>查看记录数</Button>
+        <span>共有200条</span>
+      </ProForm.Item>
+    </ProForm>
+  );
+};
+
+export default Demo;

package/packages/form/src/demos/config-provider.tsx

@@ -0,0 +1,67 @@
+import { SmileOutlined } from '@ant-design/icons';
+import {
+  ProForm,
+  ProFormCheckbox,
+  ProFormField,
+  ProFormRadio,
+  ProFormSlider,
+  ProFormSwitch,
+  ProFormText,
+  ProFormUploadButton,
+  ProFormUploadDragger,
+  StepsForm,
+} from '@ant-design/pro-components';
+import { ConfigProvider, Input } from 'antd';
+import enUS from 'antd/lib/locale/en_US';
+import { LightWrapper } from '../BaseForm/LightWrapper';
+
+export default () => (
+  <ConfigProvider locale={enUS}>
+    <StepsForm>
+      <StepsForm.StepForm title="新建">
+        <ProFormText name="name" />
+      </StepsForm.StepForm>
+    </StepsForm>
+
+    <ProForm
+      name="validate_other"
+      initialValues={{
+        'input-number': 3,
+        'checkbox-group': ['A', 'B'],
+        rate: 3.5,
+        range: 5,
+        name: 'qixian',
+      }}
+      onFinish={async (value) => console.log(value)}
+    >
+      <ProFormUploadButton
+        name="upload"
+        icon={<SmileOutlined />}
+        label="Upload"
+        title="点击上传"
+        action="/upload.do"
+        extra="longgggggggggggggggggggggggggggggggggg"
+      />
+      <ProFormRadio name="test" />
+      <ProFormCheckbox name="test2" />
+      <ProFormSwitch width="lg" label="是否打开" />
+      <ProFormUploadDragger
+        title="拖动上传"
+        icon={<SmileOutlined />}
+        description="支持 text"
+        label="Dragger"
+        name="dragger"
+        fieldProps={{
+          showUploadList: true,
+        }}
+      />
+      <LightWrapper valuePropName="value">test</LightWrapper>
+      <LightWrapper valuePropName="value">test</LightWrapper>
+      <ProFormSlider name="range" label="范围" />
+      <ProFormField>test</ProFormField>
+      <ProFormField>
+        <Input />
+      </ProFormField>
+    </ProForm>
+  </ConfigProvider>
+);

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

@@ -0,0 +1,85 @@
+import {
+  ProForm,
+  ProFormDependency,
+  ProFormSelect,
+  ProFormText,
+} 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 (
+    <ProForm
+      onFinish={async (values) => {
+        await waitTime(2000);
+        console.log(values);
+        message.success('提交成功');
+      }}
+      initialValues={{
+        name: '蚂蚁设计有限公司',
+        name2: '蚂蚁设计集团',
+        useMode: 'chapter',
+      }}
+    >
+      <ProFormText
+        width="md"
+        name="name"
+        label="签约客户名称"
+        tooltip="最长为 24 位"
+        placeholder="请输入名称"
+      />
+      <ProFormText
+        width="md"
+        name={['name2', 'text']}
+        label="签约客户名称"
+        tooltip="最长为 24 位"
+        placeholder="请输入名称"
+      />
+      {/*  ProFormDependency 会自动注入并且 进行 shouldUpdate 的比对  */}
+      <ProFormDependency name={['name', ['name2', 'text']]}>
+        {({ name, name2 }) => {
+          return (
+            <ProFormSelect
+              options={[
+                {
+                  value: 'chapter',
+                  label: '盖章后生效',
+                },
+              ]}
+              width="md"
+              name="useMode"
+              label={`与《${name || ''}》 与 《${
+                name2?.text || ''
+              }》合同约定生效方式`}
+            />
+          );
+        }}
+      </ProFormDependency>
+      {/* noStyle shouldUpdate 是必选的，写了 name 就会失效 */}
+      <ProForm.Item noStyle shouldUpdate>
+        {(form) => {
+          return (
+            <ProFormSelect
+              options={[
+                {
+                  value: 'chapter',
+                  label: '盖章后生效',
+                },
+              ]}
+              width="md"
+              name="useMode"
+              label={`与《${form.getFieldValue('name')}》合同约定生效方式`}
+            />
+          );
+        }}
+      </ProForm.Item>
+    </ProForm>
+  );
+};

package/packages/form/src/demos/form-control-render.tsx

@@ -0,0 +1,81 @@
+import {
+  FormControlRender,
+  pickControlPropsWithId,
+} from '@ant-design/pro-components';
+import { Button, Checkbox, Form } from 'antd';
+import React, { useEffect } from 'react';
+
+const App: React.FC = () => {
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    form.validateFields();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <Form form={form} onFinish={console.log}>
+      <Form.Item
+        name={'text1'}
+        label="文本框（没错误边框）"
+        rules={[{ required: true }]}
+      >
+        <textarea />
+      </Form.Item>
+      <Form.Item
+        name="text2"
+        label="文本框（添加自定义的错误边框）"
+        rules={[{ required: true }]}
+      >
+        <FormControlRender>
+          {(itemProps) => {
+            return (
+              <textarea
+                style={{
+                  borderColor: itemProps.status === 'error' ? 'red' : undefined,
+                }}
+                {...pickControlPropsWithId(itemProps)}
+              />
+            );
+          }}
+        </FormControlRender>
+      </Form.Item>
+      <Form.Item
+        valuePropName="checked"
+        name="check"
+        label="复选框"
+        rules={[{ required: true }]}
+      >
+        <Checkbox>是否</Checkbox>
+      </Form.Item>
+      <Form.Item
+        valuePropName="checked"
+        name="check2"
+        label="复选框"
+        rules={[{ required: true }]}
+      >
+        <FormControlRender>
+          {(itemProps) => {
+            return (
+              <Checkbox
+                {...itemProps}
+                style={{
+                  color: itemProps.status === 'error' ? 'red' : undefined,
+                }}
+              >
+                是否
+              </Checkbox>
+            );
+          }}
+        </FormControlRender>
+      </Form.Item>
+      <Form.Item>
+        <Button type="primary" htmlType="submit">
+          Submit
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default App;

package/packages/form/src/demos/form-item-render.tsx

@@ -0,0 +1,164 @@
+import {
+  FormControlFC,
+  FormItemRender,
+  ProForm,
+  ProFormItemRender,
+  WithControlPropsType,
+  pickControlProps,
+  pickControlPropsWithId,
+  useControlModel,
+} from '@ant-design/pro-components';
+import { Checkbox, Input, Select } from 'antd';
+
+const SingletonA = (
+  props: WithControlPropsType<{
+    title: string;
+  }>,
+) => {
+  const model = useControlModel(props);
+  return (
+    <>
+      <span>{props.title}</span>
+      <Input {...model} placeholder="直接使用useControlModel" />
+    </>
+  );
+};
+const SingletonB = (
+  props: WithControlPropsType<{
+    title: string;
+  }>,
+) => {
+  const model = useControlModel(props);
+  return (
+    <>
+      <span>{props.title}</span>
+      <Select
+        {...model}
+        options={[
+          { label: 'A', value: 'a' },
+          { label: 'B', value: 'b' },
+        ]}
+      />
+    </>
+  );
+};
+
+const CustomInput = (
+  props: WithControlPropsType<{
+    title: string;
+    description: string;
+  }>,
+) => {
+  const model = useControlModel(props, [
+    {
+      name: 'a',
+      valuePropName: 'checked',
+    },
+    {
+      name: 'b',
+    },
+  ]);
+
+  return (
+    <div>
+      <div>title: {props.title}</div>
+      <Checkbox {...model.a} />
+      <div>description: {props.description}</div>
+      <Input
+        {...model.b}
+        placeholder="可以通过第二个参数达到使用多个实例的情况"
+      />
+    </div>
+  );
+};
+
+const CustomInput2: FormControlFC<{
+  title: string;
+}> = (props) => {
+  const model = useControlModel(props, ['a', 'b']);
+  return (
+    <div>
+      <div>{props.title}</div>
+      <Input {...model.a} />
+    </div>
+  );
+};
+
+export default () => {
+  const [form] = ProForm.useForm();
+
+  return (
+    <div>
+      <ProForm
+        form={form}
+        onValuesChange={console.log}
+        onFinish={async (values) => {
+          console.log(values);
+          return;
+        }}
+      >
+        <ProForm.Item name={'SingletonA'}>
+          <SingletonA title="单实例A" />
+        </ProForm.Item>
+        <ProForm.Item name={'SingletonB'}>
+          <SingletonB title="单实例B" />
+        </ProForm.Item>
+        <ProForm.Item name={'customInput'} label="多实例">
+          <CustomInput
+            title="customInput-title"
+            description="customInput-desc"
+          />
+        </ProForm.Item>
+        <ProForm.Item name={'FormControlFC'} label="使用FormControlFC类型定义">
+          <CustomInput2 title="FormControlFC title" />
+        </ProForm.Item>
+        <ProFormItemRender name={'inputA'}>
+          {(itemProps) => {
+            return (
+              <div id={itemProps.id}>
+                <h3>使用pickControlProps提取表单项属性</h3>
+                <Input {...pickControlProps(itemProps)} />
+              </div>
+            );
+          }}
+        </ProFormItemRender>
+        <ProFormItemRender name={'inputB'}>
+          {(itemProps) => {
+            return (
+              <div>
+                <h3>使用pickControlPropsWithId提取表单项属性（包括id）</h3>
+                <Input {...pickControlPropsWithId(itemProps)} />
+              </div>
+            );
+          }}
+        </ProFormItemRender>
+        <ProFormItemRender name={'selectA'}>
+          {(itemProps) => {
+            return (
+              <div>
+                <h3>自定义标题：</h3>
+                <Select
+                  {...pickControlProps(itemProps)}
+                  options={[{ label: 'A', value: 'a' }]}
+                />
+              </div>
+            );
+          }}
+        </ProFormItemRender>
+        <FormItemRender
+          label="FormItemRender"
+          name={'selectB'}
+          initialValue={'xxx'}
+        >
+          {(itemProps) => {
+            return (
+              <div>
+                <Input {...pickControlPropsWithId(itemProps)} />
+              </div>
+            );
+          }}
+        </FormItemRender>
+      </ProForm>
+    </div>
+  );
+};

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

@@ -0,0 +1,130 @@
+import {
+  ProForm,
+  ProFormDatePicker,
+  ProFormDateRangePicker,
+  ProFormDigit,
+  ProFormRadio,
+  ProFormSelect,
+  ProFormSwitch,
+  ProFormText,
+  ProFormTextArea,
+} from '@ant-design/pro-components';
+import { Col, Row, Space, message } from 'antd';
+import type { FormLayout } from 'antd/lib/form/Form';
+import { useState } from 'react';
+
+const LAYOUT_TYPE_HORIZONTAL = 'horizontal';
+
+const waitTime = (time: number = 100) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, time);
+  });
+};
+
+export default () => {
+  const [formLayoutType, setFormLayoutType] = useState<FormLayout>(
+    LAYOUT_TYPE_HORIZONTAL,
+  );
+
+  const [grid, setGrid] = useState(true);
+
+  return (
+    <ProForm<{
+      name: string;
+      company?: string;
+      useMode?: string;
+    }>
+      layout={formLayoutType}
+      grid={grid}
+      rowProps={{
+        gutter: [16, formLayoutType === 'inline' ? 16 : 0],
+      }}
+      submitter={{
+        render: (props, doms) => {
+          return formLayoutType === LAYOUT_TYPE_HORIZONTAL ? (
+            <Row>
+              <Col span={14} offset={4}>
+                <Space>{doms}</Space>
+              </Col>
+            </Row>
+          ) : (
+            doms
+          );
+        },
+      }}
+      onFinish={async (values) => {
+        await waitTime(2000);
+        console.log(values);
+        message.success('提交成功');
+      }}
+      params={{}}
+      request={async () => {
+        await waitTime(100);
+        return {
+          name: '蚂蚁设计有限公司',
+          useMode: 'chapter',
+        };
+      }}
+    >
+      <ProFormRadio.Group
+        label="标签布局"
+        radioType="button"
+        fieldProps={{
+          value: formLayoutType,
+          onChange: (e) => setFormLayoutType(e.target.value),
+        }}
+        colProps={{
+          span: 20,
+        }}
+        options={['horizontal', 'vertical', 'inline']}
+      />
+      <ProFormSwitch
+        colProps={{
+          span: 4,
+        }}
+        fieldProps={{
+          onChange: setGrid,
+        }}
+        initialValue={true}
+        label="grid开关"
+        name="grid"
+      />
+      <ProFormText
+        name="name"
+        label="标题"
+        tooltip="最长为 24 位"
+        placeholder="请输入名称"
+      />
+      <ProFormText colProps={{ md: 12, xl: 8 }} name="company" label="姓名" />
+      <ProFormDigit colProps={{ md: 12, xl: 8 }} name="phone" label="电话" />
+      <ProFormText colProps={{ md: 12, xl: 8 }} name="email" label="邮箱" />
+      <ProFormTextArea
+        colProps={{ span: 24 }}
+        name="address"
+        label="详细的工作地址或家庭住址"
+      />
+      <ProFormDatePicker
+        colProps={{ xl: 8, md: 12 }}
+        label="入职日期"
+        name="date"
+      />
+      <ProFormDateRangePicker
+        colProps={{ xl: 8, md: 12 }}
+        label="工作周期"
+        name="dateRange"
+      />
+      <ProFormSelect
+        colProps={{ xl: 8, md: 12 }}
+        label="职位"
+        name="level"
+        valueEnum={{
+          1: 'front end',
+          2: 'back end',
+          3: 'full stack',
+        }}
+      />
+    </ProForm>
+  );
+};

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

@@ -0,0 +1,97 @@
+import { ProForm, ProFormRadio, ProFormText } from '@ant-design/pro-components';
+import { Col, Row, Space, message } from 'antd';
+import { useState } from 'react';
+
+type LayoutType = Parameters<typeof ProForm>[0]['layout'];
+const LAYOUT_TYPE_HORIZONTAL = 'horizontal';
+
+const waitTime = (time: number = 100) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, time);
+  });
+};
+
+export default () => {
+  const [formLayoutType, setFormLayoutType] = useState<LayoutType>(
+    LAYOUT_TYPE_HORIZONTAL,
+  );
+
+  const formItemLayout =
+    formLayoutType === LAYOUT_TYPE_HORIZONTAL
+      ? {
+          labelCol: { span: 4 },
+          wrapperCol: { span: 14 },
+        }
+      : null;
+
+  return (
+    <ProForm<{
+      name: string;
+      company?: string;
+      useMode?: string;
+    }>
+      {...formItemLayout}
+      layout={formLayoutType}
+      submitter={{
+        render: (props, doms) => {
+          return formLayoutType === LAYOUT_TYPE_HORIZONTAL ? (
+            <Row>
+              <Col span={14} offset={4}>
+                <Space>{doms}</Space>
+              </Col>
+            </Row>
+          ) : (
+            doms
+          );
+        },
+      }}
+      onFinish={async (values) => {
+        await waitTime(2000);
+        console.log(values);
+        message.success('提交成功');
+      }}
+      params={{}}
+      request={async () => {
+        await waitTime(100);
+        return {
+          name: '蚂蚁设计有限公司',
+          useMode: 'chapter',
+        };
+      }}
+    >
+      <ProFormRadio.Group
+        style={{
+          margin: 16,
+        }}
+        label="标签布局"
+        radioType="button"
+        fieldProps={{
+          value: formLayoutType,
+          onChange: (e) => setFormLayoutType(e.target.value),
+        }}
+        options={['horizontal', 'vertical', 'inline']}
+      />
+      <ProFormText
+        width="md"
+        name="name"
+        label="签约客户名称"
+        tooltip="最长为 24 位"
+        placeholder="请输入名称"
+      />
+      <ProFormText
+        width="md"
+        name="company"
+        label="我方公司名称"
+        placeholder="请输入名称"
+      />
+      <ProFormText
+        name={['contract', 'name']}
+        width="md"
+        label="合同名称"
+        placeholder="请输入名称"
+      />
+    </ProForm>
+  );
+};