@regenbio/regenbio-components-react 1.2.14 → 1.2.16

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

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

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

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

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

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