conditional-selection 1.0.7 → 1.0.9
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 +95 -22
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,18 +3,6 @@
|
|
|
3
3
|
## 简介
|
|
4
4
|
本项目为一个支持条件树编辑的 React 组件库，支持递归嵌套、条件分组、动态增删、禁用控制等功能，适用于复杂表单、规则配置等场景。
|
|
5
5
|
|
|
6
|
-
## 安装依赖
|
|
7
|
-
|
|
8
|
-
```bash
|
|
9
|
-
npm install
|
|
10
|
-
```
|
|
11
|
-
|
|
12
|
-
## 启动示例项目
|
|
13
|
-
|
|
14
|
-
```bash
|
|
15
|
-
npm run dev
|
|
16
|
-
```
|
|
17
|
-
|
|
18
6
|
## 主要功能
|
|
19
7
|
- 条件树递归编辑
|
|
20
8
|
- 条件分组（AND/OR）切换
|
|
@@ -28,18 +16,103 @@ npm run dev
|
|
|
28
16
|
### 基本用法
|
|
29
17
|
|
|
30
18
|
```tsx
|
|
19
|
+
import React, { useMemo, useRef, useState } from 'react';
|
|
31
20
|
import { ConditionalSelection } from '../packages/ConditionalSelection';
|
|
32
21
|
import type { TConditionalSelection } from '../packages/ConditionalSelection/types';
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
22
|
+
import '../packages/ConditionalSelection/index.less';
|
|
23
|
+
|
|
24
|
+
const fieldOptions = [
|
|
25
|
+
{ label: '测试字段1', value: 1 },
|
|
26
|
+
{ label: '测试字段2', value: 2 },
|
|
27
|
+
];
|
|
28
|
+
const functionOptions = [
|
|
29
|
+
{ label: '等于', value: 1 },
|
|
30
|
+
{ label: '不等于', value: 2 },
|
|
31
|
+
];
|
|
32
|
+
const valueOptions = [
|
|
33
|
+
{ label: '测试值1', value: 1 },
|
|
34
|
+
{ label: '测试值2', value: 2 },
|
|
35
|
+
];
|
|
36
|
+
|
|
37
|
+
const FlexSelect: React.FC<{ item: TConditionalSelection; onChange: (val: Record<string, any>) => void }> = ({ item, onChange }) => {
|
|
38
|
+
// field / function / value 存放在节点的 individual 里
|
|
39
|
+
const data = useMemo(() => item.individual ?? {}, [item.individual]);
|
|
40
|
+
|
|
41
|
+
const handleFieldChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
42
|
+
const val = e.target.value ? Number(e.target.value) : undefined;
|
|
43
|
+
onChange({ field: val, function: '', value: undefined });
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
const handleFunctionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
47
|
+
const val = e.target.value ? Number(e.target.value) : undefined;
|
|
48
|
+
onChange({ ...data, function: val, value: undefined });
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
const handleValueChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
52
|
+
const val = e.target.value ? Number(e.target.value) : undefined;
|
|
53
|
+
onChange({ ...data, value: val });
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
return (
|
|
57
|
+
<div style={{ display: 'flex', width: '100%' }}>
|
|
58
|
+
<select style={{ width: '33%', marginRight: 16 }} value={data.field ?? ''} onChange={handleFieldChange}>
|
|
59
|
+
<option value="">请选择字段</option>
|
|
60
|
+
{fieldOptions.map(opt => (
|
|
61
|
+
<option key={opt.value} value={opt.value}>{opt.label}</option>
|
|
62
|
+
))}
|
|
63
|
+
</select>
|
|
64
|
+
{data.field && (
|
|
65
|
+
<select style={{ width: '33%', marginRight: 16 }} value={data.function ?? ''} onChange={handleFunctionChange}>
|
|
66
|
+
<option value="">请选择函数</option>
|
|
67
|
+
{functionOptions.map(opt => (
|
|
68
|
+
<option key={opt.value} value={opt.value}>{opt.label}</option>
|
|
69
|
+
))}
|
|
70
|
+
</select>
|
|
71
|
+
)}
|
|
72
|
+
{data.function && (
|
|
73
|
+
<select style={{ width: '33%', marginRight: 16 }} value={data.value ?? ''} onChange={handleValueChange}>
|
|
74
|
+
<option value="">请选择值</option>
|
|
75
|
+
{valueOptions.map(opt => (
|
|
76
|
+
<option key={opt.value} value={opt.value}>{opt.label}</option>
|
|
77
|
+
))}
|
|
78
|
+
</select>
|
|
79
|
+
)}
|
|
80
|
+
</div>
|
|
81
|
+
);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
export default function App() {
|
|
85
|
+
const refConditionalSelection = useRef<any>(null);
|
|
86
|
+
const [rules, setRules] = useState<TConditionalSelection | undefined>();
|
|
87
|
+
const [maxDeep, setMaxLevel] = useState(3);
|
|
88
|
+
const [disabled, setDisabled] = useState(false);
|
|
89
|
+
const [disabledConfig, setDisabledConfig] = useState({
|
|
90
|
+
addItem: false,
|
|
91
|
+
delItem: false,
|
|
92
|
+
linkChange: false,
|
|
93
|
+
});
|
|
94
|
+
|
|
95
|
+
const getResult = async () => {
|
|
96
|
+
const data = await refConditionalSelection.current.getConditionalSelectionData()
|
|
97
|
+
console.log('当前数据：', data);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
return (
|
|
101
|
+
<ConditionalSelection
|
|
102
|
+
ref={refConditionalSelection}
|
|
103
|
+
conditionalRules={rules}
|
|
104
|
+
maxDeep={maxDeep}
|
|
105
|
+
disabled={disabled || disabledConfig}
|
|
106
|
+
onChange={setRules}
|
|
107
|
+
renderConditionRules={(item, change) => (
|
|
108
|
+
<FlexSelect
|
|
109
|
+
item={item}
|
|
110
|
+
onChange={val => change(val)}
|
|
111
|
+
/>
|
|
112
|
+
)}
|
|
113
|
+
/>
|
|
114
|
+
);
|
|
115
|
+
}
|
|
43
116
|
```
|
|
44
117
|
|
|
45
118
|
### 参数说明
|