@regenbio/regenbio-components-react 1.2.16 → 1.2.17

package/packages/form/src/components/LoginForm/demos/login-form.tsx

@@ -1,190 +0,0 @@
-import {
-  AlipayCircleOutlined,
-  LockOutlined,
-  MobileOutlined,
-  TaobaoCircleOutlined,
-  UserOutlined,
-  WeiboCircleOutlined,
-} from '@ant-design/icons';
-import {
-  LoginForm,
-  ProConfigProvider,
-  ProFormCaptcha,
-  ProFormCheckbox,
-  ProFormText,
-  setAlpha,
-} from '@ant-design/pro-components';
-import { Space, Tabs, message, theme } from 'antd';
-import type { CSSProperties } from 'react';
-import { useState } from 'react';
-
-type LoginType = 'phone' | 'account';
-
-export default () => {
-  const { token } = theme.useToken();
-  const [loginType, setLoginType] = useState<LoginType>('phone');
-
-  const iconStyles: CSSProperties = {
-    marginInlineStart: '16px',
-    color: setAlpha(token.colorTextBase, 0.2),
-    fontSize: '24px',
-    verticalAlign: 'middle',
-    cursor: 'pointer',
-  };
-
-  return (
-    <ProConfigProvider hashed={false}>
-      <div style={{ backgroundColor: token.colorBgContainer }}>
-        <LoginForm
-          logo="https://github.githubassets.com/favicons/favicon.png"
-          title="Github"
-          subTitle="全球最大的代码托管平台"
-          actions={
-            <Space>
-              其他登录方式
-              <AlipayCircleOutlined style={iconStyles} />
-              <TaobaoCircleOutlined style={iconStyles} />
-              <WeiboCircleOutlined style={iconStyles} />
-            </Space>
-          }
-        >
-          <Tabs
-            centered
-            activeKey={loginType}
-            onChange={(activeKey) => setLoginType(activeKey as LoginType)}
-          >
-            <Tabs.TabPane key={'account'} tab={'账号密码登录'} />
-            <Tabs.TabPane key={'phone'} tab={'手机号登录'} />
-          </Tabs>
-          {loginType === 'account' && (
-            <>
-              <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'} />,
-                  strengthText:
-                    'Password should contain numbers, letters and special characters, at least 8 characters long.',
-                  statusRender: (value) => {
-                    const getStatus = () => {
-                      if (value && value.length > 12) {
-                        return 'ok';
-                      }
-                      if (value && value.length > 6) {
-                        return 'pass';
-                      }
-                      return 'poor';
-                    };
-                    const status = getStatus();
-                    if (status === 'pass') {
-                      return (
-                        <div style={{ color: token.colorWarning }}>
-                          强度：中
-                        </div>
-                      );
-                    }
-                    if (status === 'ok') {
-                      return (
-                        <div style={{ color: token.colorSuccess }}>
-                          强度：强
-                        </div>
-                      );
-                    }
-                    return (
-                      <div style={{ color: token.colorError }}>强度：弱</div>
-                    );
-                  },
-                }}
-                placeholder={'密码: ant.design'}
-                rules={[
-                  {
-                    required: true,
-                    message: '请输入密码！',
-                  },
-                ]}
-              />
-            </>
-          )}
-          {loginType === 'phone' && (
-            <>
-              <ProFormText
-                fieldProps={{
-                  size: 'large',
-                  prefix: <MobileOutlined className={'prefixIcon'} />,
-                }}
-                name="mobile"
-                placeholder={'手机号'}
-                rules={[
-                  {
-                    required: true,
-                    message: '请输入手机号！',
-                  },
-                  {
-                    pattern: /^1\d{10}$/,
-                    message: '手机号格式错误！',
-                  },
-                ]}
-              />
-              <ProFormCaptcha
-                fieldProps={{
-                  size: 'large',
-                  prefix: <LockOutlined className={'prefixIcon'} />,
-                }}
-                captchaProps={{
-                  size: 'large',
-                }}
-                placeholder={'请输入验证码'}
-                captchaTextRender={(timing, count) => {
-                  if (timing) {
-                    return `${count} ${'获取验证码'}`;
-                  }
-                  return '获取验证码';
-                }}
-                name="captcha"
-                rules={[
-                  {
-                    required: true,
-                    message: '请输入验证码！',
-                  },
-                ]}
-                onGetCaptcha={async () => {
-                  message.success('获取验证码成功！验证码为：1234');
-                }}
-              />
-            </>
-          )}
-          <div
-            style={{
-              marginBlockEnd: 24,
-            }}
-          >
-            <ProFormCheckbox noStyle name="autoLogin">
-              自动登录
-            </ProFormCheckbox>
-            <a
-              style={{
-                float: 'right',
-              }}
-            >
-              忘记密码
-            </a>
-          </div>
-        </LoginForm>
-      </div>
-    </ProConfigProvider>
-  );
-};

package/packages/form/src/components/LoginForm/index.en-US.md

@@ -1,45 +0,0 @@
----
-title: LoginForm/Page
-Order: 2
-atomId: LoginForm,PageForm
-navigation:
-  Title: Components
----
-
-# LoginForm/Page
-
-LoginForm and LoginFormPage are variants of ProForm. They are specially implemented to adapt to common login form layouts. They are suitable for various login scenarios and reduce layout pressure.
-
-## Login form
-
-<code src="./demos/login-form"  background="var(--main-bg-color)" oldtitle="login-form"></code>
-
-## page level LoginForm
-
-<code src="./demos/login-form-page.tsx"  background="var(--main-bg-color)" oldtitle="Page level form"></code>
-
-### LoginForm
-
-LoginForm represents the more common centered layout style.
-
-| parameter | description | type | default value |
-| --- | --- | --- | --- |
-| logo | Configuration of logo, supports ReactNode and string | `ReactNode \| url` | - |
-| title | title, can be empty | `ReactNode` | - |
-| subTitle | Secondary title, can be configured as empty | `ReactNode` | - |
-| actions | Customize additional login functionality | `ReactNode` |  |
-| message | A prompt configuration at the top of the form, you can configure some error message | `ReactNode` | - |
-
-### LoginFormPage
-
-LoginFormPage uses the left and right layout, and adds some ad slot configuration.
-
-| parameter | description | type | default value |
-| --- | --- | --- | --- |
-| logo | Configuration of logo, supports ReactNode and string | `ReactNode \| url` | - |
-| title | title, can be empty | `ReactNode` | - |
-| subTitle | Secondary title, can be configured as empty | `ReactNode` | - |
-| actions | Customize additional login functionality | `ReactNode` |  |
-| message | A prompt configuration at the top of the form, you can configure some error message | `ReactNode` | - |
-| backgroundImageUrl | The background image configuration of the entire area, it will not be displayed on the mobile phone | `url` | - |
-| activityConfig | The configuration of the activity, including title, subTitle, action, which represent the title, subtitle and action button respectively. You can also configure style to control the style of the area | `{title,subTitle,action,style}` | - |

package/packages/form/src/components/LoginForm/index.md

@@ -1,45 +0,0 @@
----
-title: LoginForm/Page - 登录表单
-atomId: LoginForm,PageForm
-order: 2
----
-
-# 登录表单
-
-LoginForm 和 LoginFormPage 是 ProForm 的变体，两者是为了适应常见的登录表单布局来专门实现，适用于各类登录场景，降低布局的压力。
-
-## 登录表单
-
-<code src="./demos/login-form"  background="var(--main-bg-color)" title="登录表单"></code>
-
-## 页面级别的登录表单
-
-<code src="./demos/login-form-page.tsx"  background="var(--main-bg-color)" iframe="887" title="页面级别的表单"></code>
-
-## API
-
-### LoginForm
-
-LoginForm 代表了比较常见的居中布局样式。
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| logo | logo 的配置，支持 ReactNode 和 string | `ReactNode \| url` | - |
-| title | 标题，可以配置为空 | `ReactNode` | - |
-| subTitle | 二级标题，可以配置为空 | `ReactNode` | - |
-| actions | 自定义额外的登录功能 | `ReactNode` |  |
-| message | form 顶部的一个提示配置，可以配置一些错误的提示信息 | `ReactNode` | - |
-
-### LoginFormPage
-
-LoginFormPage 使用了左右布局，并且增加了一些广告位的配置。
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| logo | logo 的配置，支持 ReactNode 和 string | `ReactNode \| url` | - |
-| title | 标题，可以配置为空 | `ReactNode` | - |
-| subTitle | 二级标题，可以配置为空 | `ReactNode` | - |
-| actions | 自定义额外的登录功能 | `ReactNode` |  |
-| message | form 顶部的一个提示配置，可以配置一些错误的提示信息 | `ReactNode` | - |
-| backgroundImageUrl | 整个区域的背景图片配置，手机端不会展示 | `url` | - |
-| activityConfig | 活动的配置，包含 title，subTitle，action，分别代表标题，次标题和行动按钮，也可配置 style 来控制区域的样式 | `{title,subTitle,action,style}` | - |

package/packages/form/src/components/ModalForm/demos/drawer-form-nested.tsx

@@ -1,265 +0,0 @@
-import { PlusOutlined } from '@ant-design/icons';
-import {
-  DrawerForm,
-  ModalForm,
-  ProForm,
-  ProFormDateRangePicker,
-  ProFormSelect,
-  ProFormText,
-} from '@ant-design/pro-components';
-import { Button, Space, message } from 'antd';
-import { useRef } from 'react';
-
-const waitTime = (time: number = 100) => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(true);
-    }, time);
-  });
-};
-
-export default () => {
-  const formRef = useRef();
-  return (
-    <div
-      style={{
-        height: '325px',
-      }}
-    >
-      <Space>
-        <DrawerForm<{
-          name: string;
-          company: string;
-        }>
-          title="新建表单"
-          formRef={formRef}
-          width={600}
-          trigger={
-            <Button type="primary">
-              <PlusOutlined />
-              新建 Drawer 表单
-            </Button>
-          }
-          drawerProps={{
-            forceRender: true,
-            destroyOnClose: true,
-          }}
-          onFinish={async (values) => {
-            await waitTime(2000);
-            console.log(values.name);
-            message.success('提交成功');
-            // 不返回不会关闭弹框
-            return true;
-          }}
-        >
-          <DrawerForm<{
-            name: string;
-            company: string;
-          }>
-            title="新建表单"
-            formRef={formRef}
-            trigger={
-              <Button type="primary">
-                <PlusOutlined />
-                新建 Drawer 表单
-              </Button>
-            }
-            drawerProps={{
-              forceRender: true,
-              destroyOnClose: true,
-            }}
-            onFinish={async (values) => {
-              await waitTime(2000);
-              console.log(values.name);
-              message.success('提交成功');
-              // 不返回不会关闭弹框
-              return true;
-            }}
-          >
-            <ProForm.Group>
-              <ProFormText
-                name="name"
-                width="md"
-                label="签约客户名称"
-                tooltip="最长为 24 位"
-                placeholder="请输入名称"
-              />
-              <ProFormText
-                width="md"
-                name="company"
-                label="我方公司名称"
-                placeholder="请输入名称"
-              />
-            </ProForm.Group>
-            <ProForm.Group>
-              <ProFormText
-                width="md"
-                name="contract"
-                label="合同名称"
-                placeholder="请输入名称"
-              />
-              <ProFormDateRangePicker
-                name="contractTime"
-                label="合同生效时间"
-              />
-            </ProForm.Group>
-            <ProForm.Group>
-              <ProFormSelect
-                options={[
-                  {
-                    value: 'chapter',
-                    label: '盖章后生效',
-                  },
-                ]}
-                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"
-              disabled
-              label="项目名称"
-              initialValue="xxxx项目"
-            />
-            <ProFormText
-              width="xs"
-              name="mangerName"
-              disabled
-              label="商务经理"
-              initialValue="启途"
-            />
-          </DrawerForm>
-        </DrawerForm>
-
-        <ModalForm<{
-          name: string;
-          company: string;
-        }>
-          title="新建表单"
-          formRef={formRef}
-          trigger={
-            <Button type="primary">
-              <PlusOutlined />
-              新建 Model 表单
-            </Button>
-          }
-          modalProps={{
-            forceRender: true,
-            destroyOnClose: true,
-          }}
-          onFinish={async (values) => {
-            await waitTime(2000);
-            console.log(values.name);
-            message.success('提交成功');
-            // 不返回不会关闭弹框
-            return true;
-          }}
-        >
-          <ModalForm<{
-            name: string;
-            company: string;
-          }>
-            title="新建表单"
-            formRef={formRef}
-            trigger={
-              <Button type="primary">
-                <PlusOutlined />
-                新建 Model 表单
-              </Button>
-            }
-            modalProps={{
-              forceRender: true,
-              destroyOnClose: true,
-            }}
-            onFinish={async (values) => {
-              await waitTime(2000);
-              console.log(values.name);
-              message.success('提交成功');
-              // 不返回不会关闭弹框
-              return true;
-            }}
-          >
-            <ProForm.Group>
-              <ProFormText
-                name="name"
-                width="md"
-                label="签约客户名称"
-                tooltip="最长为 24 位"
-                placeholder="请输入名称"
-              />
-              <ProFormText
-                width="md"
-                name="company"
-                label="我方公司名称"
-                placeholder="请输入名称"
-              />
-            </ProForm.Group>
-            <ProForm.Group>
-              <ProFormText
-                width="md"
-                name="contract"
-                label="合同名称"
-                placeholder="请输入名称"
-              />
-              <ProFormDateRangePicker
-                name="contractTime"
-                label="合同生效时间"
-              />
-            </ProForm.Group>
-            <ProForm.Group>
-              <ProFormSelect
-                options={[
-                  {
-                    value: 'chapter',
-                    label: '盖章后生效',
-                  },
-                ]}
-                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"
-              disabled
-              label="项目名称"
-              initialValue="xxxx项目"
-            />
-            <ProFormText
-              width="xs"
-              name="mangerName"
-              disabled
-              label="商务经理"
-              initialValue="启途"
-            />
-          </ModalForm>
-        </ModalForm>
-      </Space>
-    </div>
-  );
-};

package/packages/form/src/components/ModalForm/demos/drawer-form.tsx

@@ -1,129 +0,0 @@
-import { PlusOutlined } from '@ant-design/icons';
-import {
-  DrawerForm,
-  ProForm,
-  ProFormDateRangePicker,
-  ProFormSelect,
-  ProFormText,
-} from '@ant-design/pro-components';
-import { Button, Form, message } from 'antd';
-
-const waitTime = (time: number = 100) => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(true);
-    }, time);
-  });
-};
-
-export default () => {
-  const [form] = Form.useForm<{ name: string; company: string }>();
-
-  return (
-    <DrawerForm<{
-      name: string;
-      company: string;
-    }>
-      title="新建表单"
-      resize={{
-        onResize() {
-          console.log('resize!');
-        },
-        maxWidth: window.innerWidth * 0.8,
-        minWidth: 300,
-      }}
-      form={form}
-      trigger={
-        <Button type="primary">
-          <PlusOutlined />
-          新建表单
-        </Button>
-      }
-      autoFocusFirstInput
-      drawerProps={{
-        destroyOnClose: true,
-      }}
-      submitTimeout={2000}
-      onFinish={async (values) => {
-        await waitTime(2000);
-        console.log(values.name);
-        message.success('提交成功');
-        // 不返回不会关闭弹框
-        return true;
-      }}
-    >
-      <ProForm.Group>
-        <ProFormText
-          name="name"
-          width="md"
-          label="签约客户名称"
-          tooltip="最长为 24 位"
-          placeholder="请输入名称"
-        />
-        <ProFormText
-          rules={[
-            {
-              required: true,
-            },
-          ]}
-          width="md"
-          name="company"
-          label="我方公司名称"
-          placeholder="请输入名称"
-        />
-      </ProForm.Group>
-      <ProForm.Group>
-        <ProFormText
-          width="md"
-          name="contract"
-          label="合同名称"
-          placeholder="请输入名称"
-        />
-        <ProFormDateRangePicker name="contractTime" label="合同生效时间" />
-      </ProForm.Group>
-      <ProForm.Group>
-        <ProFormSelect
-          options={[
-            {
-              value: 'chapter',
-              label: '盖章后生效',
-            },
-          ]}
-          width="xs"
-          name="useMode"
-          label="合同约定生效方式"
-        />
-        <ProFormSelect
-          width="xs"
-          options={[
-            {
-              value: 'time',
-              label: '履行完终止',
-            },
-          ]}
-          formItemProps={{
-            style: {
-              margin: 0,
-            },
-          }}
-          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="启途"
-      />
-    </DrawerForm>
-  );
-};