@kne/react-form-antd 3.0.35 → 3.1.1

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.
Files changed (2) hide show
  1. package/README.md +82 -35
  2. package/package.json +5 -5
package/README.md CHANGED
@@ -1,35 +1,82 @@
1
- # react-form
2
- 用于表单验证的react组件
3
-
4
- ### demo
5
- ``
6
-
7
- <Avatar editor={{open: true, width: 250, height: 250, borderRadius: 1}}
8
- beforeUpload={(file) => {}}/>
9
-
10
- <Input realtime debounce={1000} name="name" label="姓名" rule="REQ TEL EXIT"/>
11
- {isShow ? <Input name="rname" label="姓名哈哈哈" rule="REQ TEL EXIT"/> : null}
12
- <Select name="select" label="选项" rule="REQ">
13
- <Select.Option value="1">选项一</Select.Option>
14
- <Select.Option value="2">选项二</Select.Option>
15
- <Select.Option value="3">选项三</Select.Option>
16
- </Select>
17
- <DatePicker name="date" label="日期" rule="REQ" format="" YYYY-MM-DD/>
18
- <RadioGroup name="radio" label="单选" rule="REQ">
19
- <RadioGroup.Radio value="1">选项一</RadioGroup.Radio>
20
- <RadioGroup.Radio value="2">选项二</RadioGroup.Radio>
21
- <RadioGroup.Radio value="3">选项三</RadioGroup.Radio>
22
- </RadioGroup>
23
-
24
- ``
25
-
26
- # Change Log
27
-
28
- 20200430 v0.1.13 添加了SelectFetch和SelectSearch控件
29
- 20200430 v0.1.14 修改Select组件样式的默认宽度为100%
30
- 20200508 v0.1.16 删除field last-child 样式 margin-bottom 为0
31
- 20200509 v0.1.17 修改导出文件结构，增加fields导出所有field组件
32
- 20200522 v0.1.20 添加头像上传组件
33
- 20200525 v0.1.22 更新@kne/react-fetch以支持setData方法
34
- 20200529 v0.1.23 添加头像上传组件field Avatar
35
- 20200603 v0.1.24 修正Switch的值转换bug
1
+
2
+ # react-form-antd
3
+
4
+
5
+ ### 描述
6
+
7
+ 把 @kne/react-form 表单校验逻辑应用到antd
8
+
9
+
10
+ ### 安装
11
+
12
+ ```shell
13
+ npm i --save @kne/react-form-antd
14
+ ```
15
+
16
+
17
+ ### 概述
18
+
19
+ #### 特点
20
+
21
+ * UI分离，支持自定义UI框架。提供了antd的组件封装 @kne/react-form-antd 和 taro的组件封装 @kne/react-form-taro
22
+ * 分级校验规则配置，校验规则支持异步校验
23
+ * 事件驱动，方便灵活扩展。可以通过debug选项配置，通过触发事件顺序和参数轻松调试
24
+ * 支持包含Group的复杂表单，子表单
25
+
26
+
27
+ ### 示例
28
+
29
+ #### 示例代码
30
+
31
+ - 这里填写示例标题
32
+ - 这里填写示例说明
33
+ - reactFormAntd(@kne/react-form-antd),antd(antd)
34
+
35
+ ```jsx
36
+ const {Button} = antd;
37
+ const {Form, Select, Input, Group, GroupList, SubmitButton, DatePickerToday} = reactFormAntd;
38
+ const {useRef} = React;
39
+
40
+ const Example = () => {
41
+ const addButton = useRef();
42
+ return <Form>
43
+ <Select name="select" label="哈哈哈" options={[{label: 'sss', value: 1}]}/>
44
+ <Input name="name" label="名称" realtime rule="REQ LEN-0-4"/>
45
+ <Input.Password name="password" label="密码"/>
46
+ <br/>
47
+ <Group name="target">
48
+ <Input name="name" label="名称"/>
49
+ <Input name="des" label="描述"/>
50
+ </Group>
51
+ <Group name="target">
52
+ <Input name="name" label="名称"/>
53
+ <Input name="des" label="描述"/>
54
+ </Group>
55
+ <br/>
56
+ <div>
57
+ <Button onClick={() => {
58
+ addButton.current.onAdd();
59
+ }}>添加</Button>
60
+ </div>
61
+ <GroupList name="list" ref={addButton}>
62
+ {(key, {onRemove}) => {
63
+ return <div>
64
+ <Button onClick={onRemove}>删除</Button>
65
+ <Input name="name" label="名称"/>
66
+ <Input name="des" label="描述"/>
67
+ </div>;
68
+ }}
69
+ </GroupList>
70
+ <DatePickerToday label="时间" name="time" selectToday={true}/>
71
+ <SubmitButton>提交</SubmitButton>
72
+ </Form>
73
+ };
74
+
75
+ render(<Example />);
76
+
77
+ ```
78
+
79
+
80
+ ### API
81
+
82
+
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kne/react-form-antd",
3
- "version": "3.0.35",
3
+ "version": "3.1.1",
4
4
  "syntax": {
5
5
  "esmodules": true
6
6
  },
@@ -9,7 +9,7 @@
9
9
  "module": "dist/index.modern.js",
10
10
  "source": "src/index.js",
11
11
  "scripts": {
12
- "init": "npm install --legacy-peer-deps && cd example && npm install --legacy-peer-deps",
12
+ "init-example": "modules-dev-libs-init",
13
13
  "create-fields": "node ./scripts/createIndex.mjs",
14
14
  "start": "run-p start:lib start:example",
15
15
  "build": "run-s create-fields build:lib build:example",
@@ -74,7 +74,9 @@
74
74
  "react-avatar-editor": "^13.0.0"
75
75
  },
76
76
  "devDependencies": {
77
+ "@craco/craco": "^7.1.0",
77
78
  "@kne/microbundle": "^0.15.4",
79
+ "@kne/modules-dev": "^2.0.3",
78
80
  "@kne/react-fetch": "^0.1.12",
79
81
  "antd": "^5.0.2",
80
82
  "axios": "^0.21.4",
@@ -83,13 +85,11 @@
83
85
  "gh-pages": "^3.2.3",
84
86
  "glob": "^10.3.3",
85
87
  "husky": "^7.0.2",
86
- "microbundle": "0.13.3",
87
88
  "node-sass": "^9.0.0",
88
89
  "npm-run-all": "^4.1.5",
89
90
  "pify": "^5.0.0",
90
91
  "prettier": "^2.4.1",
91
92
  "react": "^18.2.0",
92
- "react-dom": "^18.2.0",
93
- "react-scripts": "^4.0.3"
93
+ "react-dom": "^18.2.0"
94
94
  }
95
95
  }