@regenbio/regenbio-components-react 1.2.16 → 1.2.18

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

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

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

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

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

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

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

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