lu-lowcode-package-form 0.6.3 → 0.7.3
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/dist/index.cjs.js +73 -70
- package/dist/index.es.js +9365 -9367
- package/index.html +13 -0
- package/package.json +5 -4
- package/src/{App.js → App.jsx} +5 -3
- package/src/components/form-container/index.jsx +30 -13
- package/src/components/index.jsx +2 -2
- package/src/main.jsx +10 -0
- package/vite.config.js +1 -0
package/index.html
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Vite + React</title>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div id="root"></div>
|
|
11
|
+
<script type="module" src="/src/main.jsx"></script>
|
|
12
|
+
</body>
|
|
13
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "lu-lowcode-package-form",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.3",
|
|
4
4
|
"dependencies": {
|
|
5
5
|
"@ant-design/icons": "^5.3.7",
|
|
6
6
|
"@testing-library/jest-dom": "^5.17.0",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"main": "dist/index.cjs.js",
|
|
13
13
|
"module": "dist/index.es.js",
|
|
14
14
|
"scripts": {
|
|
15
|
-
"start": "
|
|
15
|
+
"start": "vite",
|
|
16
16
|
"build": "vite build",
|
|
17
17
|
"test": "react-scripts test",
|
|
18
18
|
"eject": "react-scripts eject"
|
|
@@ -44,13 +44,14 @@
|
|
|
44
44
|
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
|
|
45
45
|
"@babel/preset-env": "^7.24.7",
|
|
46
46
|
"@babel/preset-react": "^7.24.7",
|
|
47
|
+
"@hot-loader/react-dom": "^17.0.2",
|
|
47
48
|
"@rollup/plugin-babel": "^6.0.4",
|
|
48
49
|
"@vitejs/plugin-react": "^4.3.1",
|
|
49
50
|
"autoprefixer": "^10.4.19",
|
|
50
51
|
"babel-loader": "^9.1.3",
|
|
51
52
|
"postcss": "^8.4.38",
|
|
52
|
-
"react": "^
|
|
53
|
-
"react-dom": "^
|
|
53
|
+
"react": "^18.2.0",
|
|
54
|
+
"react-dom": "^18.2.0",
|
|
54
55
|
"react-scripts": "5.0.1",
|
|
55
56
|
"tailwindcss": "^3.4.4",
|
|
56
57
|
"vite": "^5.2.13",
|
package/src/{App.js → App.jsx}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FormContainer, Field } from './components';
|
|
1
|
+
import { FormContainer, Field,FormContainerWrapper } from './components';
|
|
2
2
|
import './App.css';
|
|
3
3
|
import { Button } from 'antd';
|
|
4
4
|
|
|
@@ -23,14 +23,14 @@ function App() {
|
|
|
23
23
|
|
|
24
24
|
<div className="App flex flex-col items-center">
|
|
25
25
|
<div className='w-[960px] rounded bg-slate-100 flex flex-col items-center pb-10'>
|
|
26
|
-
<
|
|
26
|
+
<FormContainerWrapper cols={1} className="" >
|
|
27
27
|
<Field.Input label="分组名" __id="title" />
|
|
28
28
|
|
|
29
29
|
<Field.CodeMachine label="角色编号" prompt="" __id="code" />
|
|
30
30
|
<Field.Input label="角色名称" __id="name" />
|
|
31
31
|
<Field.CheckboxTree label="角色权限" __id="permissions" addRoot={false} treeData={treeData} />
|
|
32
32
|
<Field.TextArea label="备注" __id="remark" />
|
|
33
|
-
</
|
|
33
|
+
</FormContainerWrapper>
|
|
34
34
|
<Button type="primary">Button</Button>
|
|
35
35
|
</div>
|
|
36
36
|
|
|
@@ -39,3 +39,5 @@ function App() {
|
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
export default App;
|
|
42
|
+
|
|
43
|
+
export {FormContainer, Field ,FormContainerWrapper} from './components'
|
|
@@ -4,7 +4,7 @@ import { Form, Row, Col } from "antd";
|
|
|
4
4
|
|
|
5
5
|
function debounce(func, wait) {
|
|
6
6
|
let timeout;
|
|
7
|
-
return function(...args) {
|
|
7
|
+
return function (...args) {
|
|
8
8
|
clearTimeout(timeout);
|
|
9
9
|
timeout = setTimeout(() => func.apply(this, args), wait);
|
|
10
10
|
}
|
|
@@ -55,7 +55,7 @@ const FormContainer = forwardRef(({ cols, children }, ref) => {
|
|
|
55
55
|
}, [])
|
|
56
56
|
|
|
57
57
|
useEffect(() => {
|
|
58
|
-
},[form])
|
|
58
|
+
}, [form])
|
|
59
59
|
|
|
60
60
|
useEffect(() => {
|
|
61
61
|
initWithMap()
|
|
@@ -76,23 +76,23 @@ const FormContainer = forwardRef(({ cols, children }, ref) => {
|
|
|
76
76
|
show: true
|
|
77
77
|
});
|
|
78
78
|
}
|
|
79
|
-
|
|
79
|
+
|
|
80
80
|
initFieldsShow();
|
|
81
|
-
|
|
81
|
+
|
|
82
82
|
}
|
|
83
|
-
|
|
83
|
+
|
|
84
84
|
// 初始化字段的显示状态
|
|
85
85
|
const initFieldsShow = (reloadFields = false) => {
|
|
86
86
|
const fieldsValues = form.getFieldsValue();
|
|
87
87
|
withMap.current.keys().forEach(function (key) {
|
|
88
|
-
computeNeedShow(key,fieldsValues)
|
|
88
|
+
computeNeedShow(key, fieldsValues)
|
|
89
89
|
});
|
|
90
90
|
|
|
91
|
-
if (reloadFields)
|
|
91
|
+
if (reloadFields) setFormContent(getChildren())
|
|
92
92
|
}
|
|
93
93
|
|
|
94
94
|
// 计算是否显示
|
|
95
|
-
const computeNeedShow = (name,fieldsValues) => {
|
|
95
|
+
const computeNeedShow = (name, fieldsValues) => {
|
|
96
96
|
let needRefresh = false;
|
|
97
97
|
if (withMap.current.has(name)) {
|
|
98
98
|
let withChildrens = withMap.current.get(name).children
|
|
@@ -113,21 +113,21 @@ const FormContainer = forwardRef(({ cols, children }, ref) => {
|
|
|
113
113
|
}
|
|
114
114
|
return needRefresh
|
|
115
115
|
}
|
|
116
|
-
|
|
116
|
+
|
|
117
117
|
const handleFieldsChange = debounce((changedFields, allFields) => {
|
|
118
118
|
// 获得所有字段值
|
|
119
119
|
const fieldsValues = form.getFieldsValue();
|
|
120
120
|
let needRefresh = false;
|
|
121
121
|
for (let index = 0; index < changedFields.length; index++) {
|
|
122
122
|
const element = changedFields[index];
|
|
123
|
-
if (element.name && element.name.length > 0
|
|
124
|
-
needRefresh = computeNeedShow(element.name[0],fieldsValues)
|
|
123
|
+
if (element.name && element.name.length > 0)
|
|
124
|
+
needRefresh = computeNeedShow(element.name[0], fieldsValues)
|
|
125
125
|
}
|
|
126
126
|
if (needRefresh) {
|
|
127
127
|
setFormContent(getChildren())
|
|
128
128
|
}
|
|
129
129
|
}, 100); // 字段变化时会调用三次此函数，使用 100 毫秒的防抖时间
|
|
130
|
-
|
|
130
|
+
|
|
131
131
|
const getChildren = () => {
|
|
132
132
|
let childrenArray = React.Children.toArray(children);
|
|
133
133
|
const newArray = groupArray(childrenArray.filter((item) => {
|
|
@@ -187,5 +187,22 @@ const FormContainer = forwardRef(({ cols, children }, ref) => {
|
|
|
187
187
|
)
|
|
188
188
|
});
|
|
189
189
|
|
|
190
|
-
export default FormContainer;
|
|
191
190
|
|
|
191
|
+
/**
|
|
192
|
+
* 简单包装，不做任何处理
|
|
193
|
+
* 部分组件ref比较特殊，包一层会解决这个问题
|
|
194
|
+
*/
|
|
195
|
+
export function withWrap(Comp) {
|
|
196
|
+
return forwardRef((props, ref) => {
|
|
197
|
+
return <Comp {...props} ref={ref} forwardedRef={ref} />;
|
|
198
|
+
});
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
const FormContainerClass = (props) => {
|
|
202
|
+
const { forwardedRef, ...otherProps } = props;
|
|
203
|
+
return <FormContainer {...otherProps} ref={forwardedRef} />
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
const FormContainerWrapper = withWrap(FormContainerClass);
|
|
207
|
+
|
|
208
|
+
export { FormContainer, FormContainerWrapper }
|
package/src/components/index.jsx
CHANGED
|
@@ -2,7 +2,7 @@ import { Input, TextArea, Password, Search ,CodeMachine} from './field/input/ind
|
|
|
2
2
|
import '../App.css';
|
|
3
3
|
import { TreeSelect, Select } from './field/select/index.jsx'
|
|
4
4
|
import Custom from './field/custom/index.jsx'
|
|
5
|
-
import {
|
|
5
|
+
import {FormContainer, FormContainerWrapper } from './form-container/index.jsx'
|
|
6
6
|
import { Checkbox ,CheckboxTree } from './field/checkbox/index.jsx'
|
|
7
7
|
import { default as RadioGrop } from './field/radio/index.jsx'
|
|
8
8
|
const Field = {
|
|
@@ -19,4 +19,4 @@ const Field = {
|
|
|
19
19
|
Custom,
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
export { FormContainer, Field }
|
|
22
|
+
export { FormContainer, Field ,FormContainerWrapper }
|
package/src/main.jsx
ADDED