@pointcloud/pcloud-components 0.1.27 → 0.1.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +47 -45
- package/README_USER.md +133 -0
- package/dist/esm/DForm/DItem/itemType.d.ts +29 -29
- package/dist/esm/Loading/index.js +3 -2
- package/dist/esm/LoginForm/defaultConfig.d.ts +4 -0
- package/dist/esm/LoginForm/defaultConfig.js +35 -0
- package/dist/esm/LoginForm/index.d.ts +21 -0
- package/dist/esm/LoginForm/index.js +122 -0
- package/dist/esm/index.d.ts +2 -0
- package/dist/esm/index.js +1 -0
- package/dist/umd/pcloud-components.min.js +1 -1
- package/package.json +110 -108
package/README.md
CHANGED
|
@@ -1,29 +1,18 @@
|
|
|
1
1
|
# pcloud-components
|
|
2
2
|
|
|
3
|
-
>)  ?style=flat&logo=antdesign>)  >)  ?style=flat&logo=antdesign>)  ?style=flat&logo=webcomponentsdotorg>) ?style=flat>)
|
|
4
4
|
|
|
5
|
-
pcloud-components 是一套基于 Antd v4.24.16+ React v17 开发的业务组件库。
|
|
6
|
-
该项目已经发布到
|
|
5
|
+
pcloud-components 是一套基于 Antd v4.24.16 + React v17 开发的业务组件库。
|
|
6
|
+
该项目已经发布到 [npm](https://www.npmjs.com/package/@pointcloud/pcloud-components)仓库。
|
|
7
7
|
|
|
8
|
-
##
|
|
8
|
+
## 快速使用
|
|
9
9
|
|
|
10
10
|
```
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
cd pcloud-components
|
|
17
|
-
|
|
18
|
-
npm install
|
|
19
|
-
or
|
|
20
|
-
pnpm install
|
|
21
|
-
or
|
|
22
|
-
yarn install
|
|
23
|
-
|
|
24
|
-
// 启动项目
|
|
25
|
-
npm start or npm run dev
|
|
26
|
-
pnpm start or pnpm dev
|
|
11
|
+
# 安装依赖
|
|
12
|
+
npm i @pointcloud/pcloud-components or yarn add @pointcloud/pcloud-components
|
|
13
|
+
|
|
14
|
+
# 引入组件
|
|
15
|
+
import { DCascader } from '@pointcloud/pcloud-components';
|
|
27
16
|
```
|
|
28
17
|
|
|
29
18
|
## 推荐环境
|
|
@@ -37,32 +26,33 @@ pnpm >= 8.15.9
|
|
|
37
26
|
|
|
38
27
|
```
|
|
39
28
|
📁pcloud-components
|
|
40
|
-
├─ 📁.dumi
|
|
41
|
-
│ ├─ 📁tmp
|
|
42
|
-
│ └─ 📄global.less
|
|
43
|
-
├─ 📁.husky
|
|
44
|
-
├─ 📁docker
|
|
45
|
-
│ └─ 📄nginx.conf
|
|
46
|
-
├─ 📁scripts
|
|
47
|
-
│ ├─ 📄clean-tmp.js
|
|
29
|
+
├─ 📁.dumi # api站点相关目录,例如全局样式、全局脚本、站点主题、自定义组件等
|
|
30
|
+
│ ├─ 📁tmp # dumi运行时目录
|
|
31
|
+
│ └─ 📄global.less # 全局样式
|
|
32
|
+
├─ 📁.husky # 代码提交相关配置
|
|
33
|
+
├─ 📁docker # docker部署相关文件
|
|
34
|
+
│ └─ 📄nginx.conf # nginx配置
|
|
35
|
+
├─ 📁scripts # 全局脚本目录
|
|
36
|
+
│ ├─ 📄clean-tmp.js # 清除.dumi目录下自动生成的tmp目录
|
|
48
37
|
│ └─ 📄source-replace-loader.js # 用于解决第三方主题antd版本冲突的webpack loader
|
|
49
|
-
├─ 📁docs
|
|
50
|
-
│ ├─ 📁components
|
|
51
|
-
│ ├─ 📄guide.zh-CN.md
|
|
52
|
-
│ └─ 📄index.zh-CN.md
|
|
53
|
-
├─ 📁
|
|
54
|
-
├─ 📁
|
|
55
|
-
|
|
56
|
-
│ ├─ 📁
|
|
57
|
-
│
|
|
58
|
-
│
|
|
59
|
-
|
|
60
|
-
├─ 📄.
|
|
61
|
-
├─ 📄.
|
|
62
|
-
├─ 📄.
|
|
63
|
-
├─ 📄.
|
|
64
|
-
├─ 📄.
|
|
65
|
-
|
|
38
|
+
├─ 📁docs # 文档目录,适用于普通文档生成路由,详见dumi官方介绍
|
|
39
|
+
│ ├─ 📁components # 组件库页面的文档
|
|
40
|
+
│ ├─ 📄guide.zh-CN.md # 指南页面的文档
|
|
41
|
+
│ └─ 📄index.zh-CN.md # 首页页面的文档
|
|
42
|
+
├─ 📁docs-dist # 组件文档目录
|
|
43
|
+
├─ 📁public # 站点的静态资源目录
|
|
44
|
+
├─ 📁src # 组件目录
|
|
45
|
+
│ ├─ 📁DCascader # 组件1
|
|
46
|
+
│ ├─ 📁DForm # 组件2
|
|
47
|
+
│ ...... # 组件n
|
|
48
|
+
│ └─ 📄index.ts # 组件导出配置
|
|
49
|
+
├─ 📄.dumirc.ts # dumi 的配置文件
|
|
50
|
+
├─ 📄.fatherrc.ts # father 的配置文件,用于组件库打包
|
|
51
|
+
├─ 📄.eslintrc.js # eslint插件配置
|
|
52
|
+
├─ 📄.release-it.js # release-it配置
|
|
53
|
+
├─ 📄.prettierrc.js # prettier插件配置
|
|
54
|
+
├─ 📄.stylelintrc # stylelint插件配置
|
|
55
|
+
└─ 📄tsconfig.json # ts相关配置
|
|
66
56
|
```
|
|
67
57
|
|
|
68
58
|
## 组件开发指南
|
|
@@ -335,3 +325,15 @@ git commit -m "fix: 修复bug" // type后的冒号和空格不可省略,descri
|
|
|
335
325
|
```
|
|
336
326
|
npm run release
|
|
337
327
|
```
|
|
328
|
+
|
|
329
|
+
## FAQ
|
|
330
|
+
|
|
331
|
+
1. 安装组件后, 为什么项目中的 antd 组件都是英文的?
|
|
332
|
+
|
|
333
|
+
|
|
334
|
+
- 这是因为antd的默认语言是英文,项目启动时,会自动加载中文语言包,如果项目需要使用英文,请自行在项目入口处导入英文语言包, 并使用ConfigProvider组件注入.
|
|
335
|
+
|
|
336
|
+
2. 项目安装的是 antd5 的版本, 能使用组件吗?
|
|
337
|
+
|
|
338
|
+
|
|
339
|
+
- 此组件库基于antd 4.24.16开发,antd5的版本暂时不兼容,请使用antd4.x版本, 后续会升级到antd5版本
|
package/README_USER.md
ADDED
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
# @pointcloud/pcloud-components
|
|
2
|
+
|
|
3
|
+
[](https://npmjs.org/package/@pointcloud/pcloud-components)
|
|
4
|
+
[](https://npmjs.org/package/@pointcloud/pcloud-components)
|
|
5
|
+
[](https://npmjs.org/package/@pointcloud/pcloud-components)
|
|
6
|
+
|
|
7
|
+
一套基于 Ant Design v4.24.16 和 React v17.0.2 开发的业务组件库,包含 20+ 个高质量组件,可帮助您快速构建企业级中后台产品原型。
|
|
8
|
+
|
|
9
|
+
## 🎁 组件列表
|
|
10
|
+
|
|
11
|
+
### 表单组件
|
|
12
|
+
|
|
13
|
+
| 组件名称 | 描述 |
|
|
14
|
+
| ----------- | ----------------------------------- |
|
|
15
|
+
| DForm | 基于 Ant Design Form 的增强表单组件 |
|
|
16
|
+
| DInput | 增强版输入框组件 |
|
|
17
|
+
| DSelect | 支持异步加载的下拉选择组件 |
|
|
18
|
+
| DCascader | 支持异步加载的级联选择组件 |
|
|
19
|
+
| DTreeSelect | 支持异步加载的树选择组件 |
|
|
20
|
+
| DUpload | 文件上传组件 |
|
|
21
|
+
| ColorPicker | 颜色选择器组件 |
|
|
22
|
+
|
|
23
|
+
### 数据展示组件
|
|
24
|
+
|
|
25
|
+
| 组件名称 | 描述 |
|
|
26
|
+
| ------------ | ---------------- |
|
|
27
|
+
| DTable | 增强版表格组件 |
|
|
28
|
+
| LabelValue | 标签值展示组件 |
|
|
29
|
+
| WordCloud | 词云组件 |
|
|
30
|
+
| ScrollNumber | 数字滚动动画组件 |
|
|
31
|
+
| AspectRatio | 宽高比容器组件 |
|
|
32
|
+
| NoData | 无数据展示组件 |
|
|
33
|
+
| IPAddress | IP 地址输入组件 |
|
|
34
|
+
|
|
35
|
+
### 模态框组件
|
|
36
|
+
|
|
37
|
+
| 组件名称 | 描述 |
|
|
38
|
+
| --------- | ---------------- |
|
|
39
|
+
| DModal | 增强版模态框组件 |
|
|
40
|
+
| ModalForm | 表单模态框组件 |
|
|
41
|
+
| LoginForm | 登录表单组件 |
|
|
42
|
+
|
|
43
|
+
### 其他业务组件
|
|
44
|
+
|
|
45
|
+
| 组件名称 | 描述 |
|
|
46
|
+
| ------------------ | ------------------ |
|
|
47
|
+
| Loading | 全局加载组件 |
|
|
48
|
+
| ContextMenu | 右键菜单组件 |
|
|
49
|
+
| AdvancedFilter | 高级筛选组件 |
|
|
50
|
+
| InfiniteScrollList | 无限滚动列表组件 |
|
|
51
|
+
| PictureCard | 图片卡片组件 |
|
|
52
|
+
| SignaturePad | 签名板组件 |
|
|
53
|
+
| RndDrag | 可拖拽调整大小组件 |
|
|
54
|
+
| RCropper | 图片裁剪组件 |
|
|
55
|
+
|
|
56
|
+
## 🚀 安装
|
|
57
|
+
|
|
58
|
+
```bash
|
|
59
|
+
# 使用 npm
|
|
60
|
+
npm install @pointcloud/pcloud-components
|
|
61
|
+
|
|
62
|
+
# 使用 yarn
|
|
63
|
+
yarn add @pointcloud/pcloud-components
|
|
64
|
+
|
|
65
|
+
# 使用 pnpm
|
|
66
|
+
pnpm add @pointcloud/pcloud-components
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## 🔨 快速开始
|
|
70
|
+
|
|
71
|
+
### 1. 基础使用
|
|
72
|
+
|
|
73
|
+
```jsx
|
|
74
|
+
import React from 'react';
|
|
75
|
+
import { DCascader } from '@pointcloud/pcloud-components';
|
|
76
|
+
|
|
77
|
+
const App = () => {
|
|
78
|
+
const handleChange = (value, selectedOptions) => {
|
|
79
|
+
console.log(value, selectedOptions);
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
return <DCascader showSearch placeholder="请选择" onChange={handleChange} />;
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
export default App;
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### 2. 使用表单组件
|
|
89
|
+
|
|
90
|
+
```jsx
|
|
91
|
+
import React from 'react';
|
|
92
|
+
import { DForm, DInput, DSelect } from '@pointcloud/pcloud-components';
|
|
93
|
+
|
|
94
|
+
const App = () => {
|
|
95
|
+
const onFinish = (values) => {
|
|
96
|
+
console.log('表单值:', values);
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
return (
|
|
100
|
+
<DForm onFinish={onFinish}>
|
|
101
|
+
<DForm.Item label="用户名" name="username">
|
|
102
|
+
<DInput placeholder="请输入用户名" />
|
|
103
|
+
</DForm.Item>
|
|
104
|
+
|
|
105
|
+
<DForm.Item label="状态" name="status">
|
|
106
|
+
<DSelect
|
|
107
|
+
options={[
|
|
108
|
+
{ label: '启用', value: 1 },
|
|
109
|
+
{ label: '禁用', value: 0 },
|
|
110
|
+
]}
|
|
111
|
+
/>
|
|
112
|
+
</DForm.Item>
|
|
113
|
+
|
|
114
|
+
<DForm.Item>
|
|
115
|
+
<button type="submit">提交</button>
|
|
116
|
+
</DForm.Item>
|
|
117
|
+
</DForm>
|
|
118
|
+
);
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
export default App;
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
## 📖 详细文档
|
|
125
|
+
|
|
126
|
+
访问我们的[在线文档](https://frank17008.github.io/pcloud-components)查看完整的组件列表和使用示例。
|
|
127
|
+
|
|
128
|
+
## ⚙️ 环境支持
|
|
129
|
+
|
|
130
|
+
- React >= 17.0.2
|
|
131
|
+
- Ant Design <= 4.24.16
|
|
132
|
+
- Node >= 16.20.0
|
|
133
|
+
- Modern browsers
|
|
@@ -28,91 +28,91 @@ declare type CustomItemProps = DItemBaseProps & HTMLAttributes<HTMLElement> & {
|
|
|
28
28
|
children?: ReactNode;
|
|
29
29
|
[key: string]: any;
|
|
30
30
|
};
|
|
31
|
-
declare type DInputItemProps = {
|
|
31
|
+
export declare type DInputItemProps = {
|
|
32
32
|
renderType?: 'dInput';
|
|
33
33
|
} & DItemBaseProps & DInputProps;
|
|
34
|
-
declare type DIpAddressProps = {
|
|
34
|
+
export declare type DIpAddressProps = {
|
|
35
35
|
renderType?: 'ipAddress';
|
|
36
36
|
} & DItemBaseProps & IPAddressProps;
|
|
37
|
-
declare type InputItemProps = {
|
|
37
|
+
export declare type InputItemProps = {
|
|
38
38
|
renderType?: 'input';
|
|
39
39
|
} & DItemBaseProps & InputProps;
|
|
40
|
-
declare type TextAreaItemProps = {
|
|
40
|
+
export declare type TextAreaItemProps = {
|
|
41
41
|
renderType?: 'textArea';
|
|
42
42
|
} & DItemBaseProps & TextAreaProps;
|
|
43
|
-
declare type PasswordItemProps = {
|
|
43
|
+
export declare type PasswordItemProps = {
|
|
44
44
|
renderType?: 'password';
|
|
45
45
|
} & DItemBaseProps & PasswordProps;
|
|
46
|
-
declare type InputNumberItemProps = {
|
|
46
|
+
export declare type InputNumberItemProps = {
|
|
47
47
|
renderType?: 'inputNumber';
|
|
48
48
|
} & DItemBaseProps & InputNumberProps;
|
|
49
|
-
declare type AutoCompleteItemProps = {
|
|
49
|
+
export declare type AutoCompleteItemProps = {
|
|
50
50
|
renderType?: 'autoComplete';
|
|
51
51
|
} & DItemBaseProps & AutoCompleteProps;
|
|
52
|
-
declare type DSelectItemProps = {
|
|
52
|
+
export declare type DSelectItemProps = {
|
|
53
53
|
renderType?: 'dSelect';
|
|
54
54
|
} & DItemBaseProps & DSelectProps;
|
|
55
|
-
declare type SelectItemProps = {
|
|
55
|
+
export declare type SelectItemProps = {
|
|
56
56
|
renderType?: 'select';
|
|
57
57
|
} & DItemBaseProps & SelectProps;
|
|
58
|
-
declare type DCascaderItemProps = {
|
|
58
|
+
export declare type DCascaderItemProps = {
|
|
59
59
|
renderType?: 'dCascader';
|
|
60
60
|
} & DItemBaseProps & DCascaderProps;
|
|
61
|
-
declare type CascaderItemProps = {
|
|
61
|
+
export declare type CascaderItemProps = {
|
|
62
62
|
renderType?: 'cascader';
|
|
63
63
|
} & DItemBaseProps & CascaderProps;
|
|
64
|
-
declare type DTreeSelectItemProps = {
|
|
64
|
+
export declare type DTreeSelectItemProps = {
|
|
65
65
|
renderType?: 'dTreeSelect';
|
|
66
66
|
} & DItemBaseProps & DTreeSelectProps;
|
|
67
|
-
declare type TreeSelectItemProps = {
|
|
67
|
+
export declare type TreeSelectItemProps = {
|
|
68
68
|
renderType?: 'treeSelect';
|
|
69
69
|
} & DItemBaseProps & TreeSelectProps;
|
|
70
|
-
declare type DatePickerItemProps = {
|
|
70
|
+
export declare type DatePickerItemProps = {
|
|
71
71
|
renderType?: 'datePicker';
|
|
72
72
|
} & DItemBaseProps & DatePickerProps;
|
|
73
|
-
declare type TimePickerItemProps = {
|
|
73
|
+
export declare type TimePickerItemProps = {
|
|
74
74
|
renderType?: 'timePicker';
|
|
75
75
|
} & DItemBaseProps & TimePickerProps;
|
|
76
|
-
declare type RangePickerItemProps = {
|
|
76
|
+
export declare type RangePickerItemProps = {
|
|
77
77
|
renderType?: 'rangePicker';
|
|
78
78
|
} & DItemBaseProps & RangePickerProps;
|
|
79
|
-
declare type MentionItemProps = {
|
|
79
|
+
export declare type MentionItemProps = {
|
|
80
80
|
renderType?: 'mentions';
|
|
81
81
|
} & DItemBaseProps & MentionProps;
|
|
82
|
-
declare type CheckboxItemProps = {
|
|
82
|
+
export declare type CheckboxItemProps = {
|
|
83
83
|
renderType?: 'checkbox';
|
|
84
84
|
} & DItemBaseProps & CheckboxProps;
|
|
85
|
-
declare type DCheckboxGroupProps = {
|
|
85
|
+
export declare type DCheckboxGroupProps = {
|
|
86
86
|
renderType?: 'checkboxGroup';
|
|
87
87
|
} & DItemBaseProps & CheckboxGroupProps;
|
|
88
|
-
declare type RadioItemProps = {
|
|
88
|
+
export declare type RadioItemProps = {
|
|
89
89
|
renderType?: 'radio';
|
|
90
90
|
} & DItemBaseProps & RadioProps;
|
|
91
|
-
declare type DRadioGorupProps = {
|
|
91
|
+
export declare type DRadioGorupProps = {
|
|
92
92
|
renderType?: 'radioGroup';
|
|
93
93
|
} & DItemBaseProps & RadioGroupProps;
|
|
94
|
-
declare type RateItemProps = {
|
|
94
|
+
export declare type RateItemProps = {
|
|
95
95
|
renderType?: 'rate';
|
|
96
96
|
} & DItemBaseProps & RateProps;
|
|
97
|
-
declare type SliderItemProps = {
|
|
97
|
+
export declare type SliderItemProps = {
|
|
98
98
|
renderType?: 'slider';
|
|
99
99
|
} & DItemBaseProps & SliderSingleProps;
|
|
100
|
-
declare type SwitchItemProps = {
|
|
100
|
+
export declare type SwitchItemProps = {
|
|
101
101
|
renderType?: 'switch';
|
|
102
102
|
} & DItemBaseProps & SwitchProps;
|
|
103
|
-
declare type TransferItemProps = {
|
|
103
|
+
export declare type TransferItemProps = {
|
|
104
104
|
renderType?: 'transfer';
|
|
105
105
|
} & DItemBaseProps & TransferProps<any>;
|
|
106
|
-
declare type UploadItemProps = {
|
|
106
|
+
export declare type UploadItemProps = {
|
|
107
107
|
renderType?: 'upload';
|
|
108
108
|
} & DItemBaseProps & UploadProps;
|
|
109
|
-
declare type DUploadItemProps = {
|
|
109
|
+
export declare type DUploadItemProps = {
|
|
110
110
|
renderType?: 'dUpload';
|
|
111
111
|
} & DItemBaseProps & DUploadProps;
|
|
112
|
-
declare type ButtonItemProps = {
|
|
112
|
+
export declare type ButtonItemProps = {
|
|
113
113
|
renderType?: 'button';
|
|
114
114
|
} & DItemBaseProps & ButtonProps;
|
|
115
|
-
declare type DividerItemProps = {
|
|
115
|
+
export declare type DividerItemProps = {
|
|
116
116
|
renderType?: 'divider';
|
|
117
117
|
} & DItemBaseProps & DividerProps;
|
|
118
118
|
export declare type DItemProps = CustomItemProps | DInputItemProps | DIpAddressProps | InputItemProps | TextAreaItemProps | PasswordItemProps | InputNumberItemProps | AutoCompleteItemProps | DSelectItemProps | SelectItemProps | DCascaderItemProps | CascaderItemProps | DTreeSelectItemProps | TreeSelectItemProps | DatePickerItemProps | TimePickerItemProps | RangePickerItemProps | MentionItemProps | CheckboxItemProps | CheckboxGroupProps | DCheckboxGroupProps | RadioItemProps | RadioGroupProps | DRadioGorupProps | RateItemProps | SliderItemProps | SwitchItemProps | TransferItemProps | UploadItemProps | DUploadItemProps | ButtonItemProps | DividerItemProps;
|
|
@@ -3,9 +3,10 @@ import { useLoading } from "./hooks/useLoading";
|
|
|
3
3
|
var loadingInstance = null;
|
|
4
4
|
export default {
|
|
5
5
|
open: function open(params) {
|
|
6
|
-
if (
|
|
7
|
-
|
|
6
|
+
if (loadingInstance) {
|
|
7
|
+
this.close();
|
|
8
8
|
}
|
|
9
|
+
loadingInstance = Loading.newInstance(params);
|
|
9
10
|
return loadingInstance;
|
|
10
11
|
},
|
|
11
12
|
close: function close() {
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { InputItemProps, PasswordItemProps, ButtonItemProps } from '../DForm/DItem/itemType';
|
|
2
|
+
export declare const defaultUsernameItem: InputItemProps;
|
|
3
|
+
export declare const defaultPasswordItem: PasswordItemProps;
|
|
4
|
+
export declare const defaultLoginButtonItem: ButtonItemProps;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { LockOutlined, UserOutlined } from '@ant-design/icons';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
export var defaultUsernameItem = {
|
|
4
|
+
name: 'username',
|
|
5
|
+
label: '用户名',
|
|
6
|
+
renderType: 'input',
|
|
7
|
+
formItemProps: {
|
|
8
|
+
rules: [{
|
|
9
|
+
required: true,
|
|
10
|
+
message: '请输入用户名'
|
|
11
|
+
}]
|
|
12
|
+
},
|
|
13
|
+
placeholder: '请输入用户名',
|
|
14
|
+
prefix: /*#__PURE__*/_jsx(UserOutlined, {})
|
|
15
|
+
};
|
|
16
|
+
export var defaultPasswordItem = {
|
|
17
|
+
name: 'password',
|
|
18
|
+
label: '密码',
|
|
19
|
+
renderType: 'password',
|
|
20
|
+
formItemProps: {
|
|
21
|
+
rules: [{
|
|
22
|
+
required: true,
|
|
23
|
+
message: '请输入密码'
|
|
24
|
+
}]
|
|
25
|
+
},
|
|
26
|
+
placeholder: '请输入密码',
|
|
27
|
+
prefix: /*#__PURE__*/_jsx(LockOutlined, {})
|
|
28
|
+
};
|
|
29
|
+
export var defaultLoginButtonItem = {
|
|
30
|
+
renderType: 'button',
|
|
31
|
+
type: 'primary',
|
|
32
|
+
htmlType: 'submit',
|
|
33
|
+
label: '登录',
|
|
34
|
+
block: true
|
|
35
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { FormProps, FormInstance } from 'antd';
|
|
3
|
+
import { type DItemProps } from "./..";
|
|
4
|
+
export interface LoginFormProps extends Omit<FormProps, 'onFinish'> {
|
|
5
|
+
/** 登录表单额外的表单项 */
|
|
6
|
+
extraItems?: DItemProps[];
|
|
7
|
+
/** 点击登录按钮的回调 */
|
|
8
|
+
onFinish?: (values: any) => void | Promise<any>;
|
|
9
|
+
/** 登录按钮文本 */
|
|
10
|
+
loginText?: string;
|
|
11
|
+
/** 是否禁用登录按钮 */
|
|
12
|
+
loginButtonDisabled?: boolean;
|
|
13
|
+
/** 用户名表单项配置 */
|
|
14
|
+
usernameItem?: Partial<DItemProps>;
|
|
15
|
+
/** 密码表单项配置 */
|
|
16
|
+
passwordItem?: Partial<DItemProps>;
|
|
17
|
+
/** 登录按钮表单项配置 */
|
|
18
|
+
loginButtonItem?: Partial<DItemProps>;
|
|
19
|
+
}
|
|
20
|
+
declare const LoginForm: React.ForwardRefExoticComponent<LoginFormProps & React.RefAttributes<FormInstance<any>>>;
|
|
21
|
+
export default LoginForm;
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
|
|
2
|
+
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
|
|
3
|
+
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
4
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
5
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
6
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
7
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
8
|
+
var _excluded = ["extraItems", "onFinish", "loginText", "loginButtonDisabled", "usernameItem", "passwordItem", "loginButtonItem", "className"];
|
|
9
|
+
import React, { useState, useEffect, forwardRef, useContext, useMemo } from 'react';
|
|
10
|
+
import classNames from 'classnames';
|
|
11
|
+
import { DForm } from "./..";
|
|
12
|
+
import { defaultUsernameItem, defaultPasswordItem, defaultLoginButtonItem } from "./defaultConfig";
|
|
13
|
+
import { ConfigContext } from "../ConfigProvider";
|
|
14
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
15
|
+
var mergeItemProps = function mergeItemProps(defaultItem, item, options) {
|
|
16
|
+
var baseMerged = _objectSpread(_objectSpread({}, defaultItem), item);
|
|
17
|
+
// 检查是否存在 formItemProps 属性
|
|
18
|
+
if ('formItemProps' in defaultItem && 'formItemProps' in item) {
|
|
19
|
+
baseMerged['formItemProps'] = _objectSpread(_objectSpread({}, defaultItem.formItemProps), item.formItemProps);
|
|
20
|
+
}
|
|
21
|
+
if (options) {
|
|
22
|
+
baseMerged = _objectSpread(_objectSpread({}, baseMerged), options);
|
|
23
|
+
}
|
|
24
|
+
return baseMerged;
|
|
25
|
+
};
|
|
26
|
+
var LoginForm = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
27
|
+
var _props$extraItems = props.extraItems,
|
|
28
|
+
extraItems = _props$extraItems === void 0 ? [] : _props$extraItems,
|
|
29
|
+
onFinish = props.onFinish,
|
|
30
|
+
_props$loginText = props.loginText,
|
|
31
|
+
loginText = _props$loginText === void 0 ? '登录' : _props$loginText,
|
|
32
|
+
_props$loginButtonDis = props.loginButtonDisabled,
|
|
33
|
+
loginButtonDisabled = _props$loginButtonDis === void 0 ? false : _props$loginButtonDis,
|
|
34
|
+
_props$usernameItem = props.usernameItem,
|
|
35
|
+
usernameItem = _props$usernameItem === void 0 ? {} : _props$usernameItem,
|
|
36
|
+
_props$passwordItem = props.passwordItem,
|
|
37
|
+
passwordItem = _props$passwordItem === void 0 ? {} : _props$passwordItem,
|
|
38
|
+
_props$loginButtonIte = props.loginButtonItem,
|
|
39
|
+
loginButtonItem = _props$loginButtonIte === void 0 ? {} : _props$loginButtonIte,
|
|
40
|
+
_props$className = props.className,
|
|
41
|
+
className = _props$className === void 0 ? '' : _props$className,
|
|
42
|
+
restProps = _objectWithoutProperties(props, _excluded);
|
|
43
|
+
var _useContext = useContext(ConfigContext),
|
|
44
|
+
prefixCls = _useContext.prefixCls,
|
|
45
|
+
getPrefixCls = _useContext.getPrefixCls;
|
|
46
|
+
var _useState = useState(false),
|
|
47
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
48
|
+
loading = _useState2[0],
|
|
49
|
+
setLoading = _useState2[1];
|
|
50
|
+
var _DForm$useForm = DForm.useForm(),
|
|
51
|
+
_DForm$useForm2 = _slicedToArray(_DForm$useForm, 1),
|
|
52
|
+
form = _DForm$useForm2[0];
|
|
53
|
+
var classname = getPrefixCls('login-form');
|
|
54
|
+
var wrapperClass = classNames(_defineProperty({}, "".concat(prefixCls, "-login-form"), !!prefixCls), classname, className).trim();
|
|
55
|
+
var mergedUsernameItem = useMemo(function () {
|
|
56
|
+
return mergeItemProps(defaultUsernameItem, usernameItem);
|
|
57
|
+
}, [usernameItem]);
|
|
58
|
+
var mergedPasswordItem = useMemo(function () {
|
|
59
|
+
return mergeItemProps(defaultPasswordItem, passwordItem);
|
|
60
|
+
}, [passwordItem]);
|
|
61
|
+
var mergedLoginButtonItem = useMemo(function () {
|
|
62
|
+
return mergeItemProps(defaultLoginButtonItem, loginButtonItem, {
|
|
63
|
+
label: loginText,
|
|
64
|
+
disabled: loginButtonDisabled || loading,
|
|
65
|
+
loading: loading
|
|
66
|
+
});
|
|
67
|
+
}, [loginButtonItem, loginText, loginButtonDisabled, loading]);
|
|
68
|
+
var items = useMemo(function () {
|
|
69
|
+
return [mergedUsernameItem, mergedPasswordItem].concat(_toConsumableArray(extraItems), [mergedLoginButtonItem]);
|
|
70
|
+
}, [mergedUsernameItem, mergedPasswordItem, extraItems, mergedLoginButtonItem]);
|
|
71
|
+
useEffect(function () {
|
|
72
|
+
if (ref) {
|
|
73
|
+
if (typeof ref === 'function') {
|
|
74
|
+
ref(form);
|
|
75
|
+
} else {
|
|
76
|
+
ref.current = form;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}, [form, ref]);
|
|
80
|
+
var handleFinish = /*#__PURE__*/function () {
|
|
81
|
+
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(values) {
|
|
82
|
+
var result;
|
|
83
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
84
|
+
while (1) switch (_context.prev = _context.next) {
|
|
85
|
+
case 0:
|
|
86
|
+
if (onFinish) {
|
|
87
|
+
_context.next = 2;
|
|
88
|
+
break;
|
|
89
|
+
}
|
|
90
|
+
return _context.abrupt("return");
|
|
91
|
+
case 2:
|
|
92
|
+
setLoading(true);
|
|
93
|
+
_context.prev = 3;
|
|
94
|
+
result = onFinish(values);
|
|
95
|
+
if (!(result instanceof Promise)) {
|
|
96
|
+
_context.next = 8;
|
|
97
|
+
break;
|
|
98
|
+
}
|
|
99
|
+
_context.next = 8;
|
|
100
|
+
return result;
|
|
101
|
+
case 8:
|
|
102
|
+
_context.prev = 8;
|
|
103
|
+
setLoading(false);
|
|
104
|
+
return _context.finish(8);
|
|
105
|
+
case 11:
|
|
106
|
+
case "end":
|
|
107
|
+
return _context.stop();
|
|
108
|
+
}
|
|
109
|
+
}, _callee, null, [[3,, 8, 11]]);
|
|
110
|
+
}));
|
|
111
|
+
return function handleFinish(_x) {
|
|
112
|
+
return _ref.apply(this, arguments);
|
|
113
|
+
};
|
|
114
|
+
}();
|
|
115
|
+
return /*#__PURE__*/_jsx(DForm, _objectSpread({
|
|
116
|
+
form: form,
|
|
117
|
+
items: items,
|
|
118
|
+
onFinish: handleFinish,
|
|
119
|
+
className: wrapperClass
|
|
120
|
+
}, restProps));
|
|
121
|
+
});
|
|
122
|
+
export default LoginForm;
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -30,6 +30,8 @@ export { default as DModal } from './DModal';
|
|
|
30
30
|
export type { DModalProps } from './DModal/interface';
|
|
31
31
|
export { default as ModalForm } from './ModalForm';
|
|
32
32
|
export type { ModalFormProps } from './ModalForm';
|
|
33
|
+
export { default as LoginForm } from './LoginForm';
|
|
34
|
+
export type { LoginFormProps } from './LoginForm';
|
|
33
35
|
export { default as ColorPicker } from './ColorPicker';
|
|
34
36
|
export type { ColorPickerType, TwitterPickerType, HuePickerType, AlphaPickerType, BlockPickerType, ChromePickerType, CompactPickerType, CirclePickerType, SliderPickerType, } from './ColorPicker/interface';
|
|
35
37
|
export { default as ScrollNumber } from './ScrollNumber';
|
package/dist/esm/index.js
CHANGED
|
@@ -15,6 +15,7 @@ export { default as DTable } from "./DTable";
|
|
|
15
15
|
export { default as DForm } from "./DForm";
|
|
16
16
|
export { default as DModal } from "./DModal";
|
|
17
17
|
export { default as ModalForm } from "./ModalForm";
|
|
18
|
+
export { default as LoginForm } from "./LoginForm";
|
|
18
19
|
export { default as ColorPicker } from "./ColorPicker";
|
|
19
20
|
export { default as ScrollNumber } from "./ScrollNumber";
|
|
20
21
|
export { default as WordCloud } from "./WordCloud";
|