Skip to content

Commit 4b7df45

Browse files
ChenlingasMxChenlingasMx
committed
feat(TreeSelect):新增TreeSelect级联选择器组件
1 parent a902518 commit 4b7df45

File tree

10 files changed

+437
-1
lines changed

10 files changed

+437
-1
lines changed

‎example/examples/src/routes.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -474,4 +474,12 @@ export const stackPageData: Routes[] = [
474474
description: '可自定义拖曳抽屉高度',
475475
},
476476
},
477+
{
478+
name: 'TreeSelect',
479+
component: require('./routes/TreeSelect').default,
480+
params: {
481+
title: 'TreeSelect 级联选择器',
482+
description: '级联选择器',
483+
},
484+
},
477485
];

‎example/examples/src/routes/TreeSelect/index.tsx

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import React from 'react';
2+
import {TreeSelect} from '@uiw/react-native';
3+
import {View} from 'react-native';
4+
import {ComProps} from '../../routes';
5+
import Layout, {Container} from '../../Layout';
6+
const {Header, Body, Footer} = Layout;
7+
8+
export interface TreeSelectViewProps extends ComProps {}
9+
10+
export default class TreeSelectDemo extends React.Component<TreeSelectViewProps> {
11+
render() {
12+
const {route} = this.props;
13+
const description = route.params.description;
14+
const title = route.params.title;
15+
const option = [
16+
{
17+
label: '北京',
18+
value: '01',
19+
children: [
20+
{
21+
label: '东城区',
22+
value: '01-1',
23+
},
24+
{
25+
label: '西城区',
26+
value: '01-2',
27+
},
28+
{
29+
label: '崇文区',
30+
value: '01-3',
31+
},
32+
{
33+
label: '宣武区',
34+
value: '01-4',
35+
},
36+
],
37+
},
38+
{
39+
label: '浙江',
40+
value: '02',
41+
children: [
42+
{
43+
label: '杭州',
44+
value: '02-1',
45+
children: [
46+
{
47+
label: '西湖区',
48+
value: '02-1-1',
49+
},
50+
{
51+
label: '上城区',
52+
value: '02-1-2',
53+
},
54+
{
55+
label: '江干区',
56+
value: '02-1-3',
57+
},
58+
{
59+
label: '下城区',
60+
value: '02-1-4',
61+
},
62+
],
63+
},
64+
{
65+
label: '宁波',
66+
value: '02-2',
67+
children: [
68+
{
69+
label: 'xx区',
70+
value: '02-2-1',
71+
},
72+
{
73+
label: 'yy区',
74+
value: '02-2-2',
75+
},
76+
],
77+
},
78+
{
79+
label: '温州',
80+
value: '02-3',
81+
},
82+
{
83+
label: '嘉兴',
84+
value: '02-4',
85+
},
86+
{
87+
label: '湖州',
88+
value: '02-5',
89+
},
90+
{
91+
label: '绍兴',
92+
value: '02-6',
93+
},
94+
],
95+
},
96+
];
97+
return (
98+
<Container>
99+
<Layout>
100+
<Header title={title} description={description} />
101+
<Body>
102+
<TreeSelect
103+
defaultValue={['01', '01-1']}
104+
// activeColor="#fd8a00"
105+
options={option}
106+
onChange={(value: any, nodes: any) => {
107+
console.log(value, nodes);
108+
}}
109+
/>
110+
</Body>
111+
<Footer />
112+
</Layout>
113+
</Container>
114+
);
115+
}
116+
}

‎packages/core/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,8 @@
6161
"prop-types": "15.7.2",
6262
"react-native-gesture-handler": "2.0.0",
6363
"react-native-root-siblings": "4.1.1",
64-
"react-native-svg": "12.1.1"
64+
"react-native-svg": "12.1.1",
65+
"ahooks": "2.10.14"
6566
},
6667
"peerDependencies": {
6768
"react": ">=16.9.0",

‎packages/core/src/TreeSelect/README.md

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
TreeSelect 级联选择器
2+
---
3+
4+
⚠️测试版本谨慎使用<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
5+
6+
### 基础示例
7+
8+
```jsx
9+
import React from 'react';
10+
import { TreeSelect } from '@uiw/react-native';
11+
12+
13+
function Demo() {
14+
const option = [
15+
{
16+
label: '北京',
17+
value: '01',
18+
children: [
19+
{
20+
label: '东城区',
21+
value: '01-1',
22+
},
23+
{
24+
label: '西城区',
25+
value: '01-2',
26+
},
27+
{
28+
label: '崇文区',
29+
value: '01-3',
30+
},
31+
{
32+
label: '宣武区',
33+
value: '01-4',
34+
},
35+
],
36+
},
37+
{
38+
label: '浙江',
39+
value: '02',
40+
children: [
41+
{
42+
label: '杭州',
43+
value: '02-1',
44+
children: [
45+
{
46+
label: '西湖区',
47+
value: '02-1-1',
48+
},
49+
{
50+
label: '上城区',
51+
value: '02-1-2',
52+
},
53+
{
54+
label: '江干区',
55+
value: '02-1-3',
56+
},
57+
{
58+
label: '下城区',
59+
value: '02-1-4',
60+
},
61+
],
62+
},
63+
{
64+
label: '宁波',
65+
value: '02-2',
66+
children: [
67+
{
68+
label: 'xx区',
69+
value: '02-2-1',
70+
},
71+
{
72+
label: 'yy区',
73+
value: '02-2-2',
74+
},
75+
],
76+
},
77+
{
78+
label: '温州',
79+
value: '02-3',
80+
},
81+
{
82+
label: '嘉兴',
83+
value: '02-4',
84+
},
85+
{
86+
label: '湖州',
87+
value: '02-5',
88+
},
89+
{
90+
label: '绍兴',
91+
value: '02-6',
92+
},
93+
],
94+
}
95+
]
96+
return (
97+
<React.Fragment>
98+
<TreeSelect
99+
defaultValue={['01','01-1']}
100+
options={option}
101+
onChange={(value: any, nodes: any) => {
102+
console.log(value, nodes)
103+
}}
104+
/>
105+
</React.Fragment>
106+
);
107+
}
108+
```
109+
110+
111+
### TransitionImage Props
112+
113+
```ts
114+
export interface TreeSelectOption {
115+
[key: string]: any
116+
}
117+
118+
export type TreeSelectProps = {
119+
// 级联数据
120+
options: TreeSelectOption[]
121+
// 默认选中项
122+
defaultValue?: string[]
123+
// 选中项
124+
value?: string[]
125+
// value 变化时触发
126+
onChange?: (value: string[], extend: { options: TreeSelectOption[] }) => void
127+
// 自定义 options 中 label value children 的字段
128+
fieldNames?: { label: string; value: string; children: string } | any
129+
// 选中文本颜色
130+
activeColor?:ColorValue
131+
}
132+
```

‎packages/core/src/TreeSelect/index.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { TreeSelect } from './tree-select';
2+
3+
export type { TreeSelectProps, TreeSelectOption } from './tree-select';
4+
5+
export default TreeSelect;

‎packages/core/src/TreeSelect/styles.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { StyleSheet } from 'react-native';
2+
3+
export const style = StyleSheet.create({
4+
item: {
5+
minHeight: 50,
6+
paddingVertical: 6,
7+
paddingHorizontal: 12,
8+
position: 'relative',
9+
display: 'flex',
10+
alignItems: 'center',
11+
justifyContent: 'center',
12+
},
13+
});

0 commit comments

Comments
 (0)