Skip to content

Commit 0bcee92

Browse files
fengjingxuan8fengjingxuan8
committed
【级联选择器】 完善级联选择器功能、样式
1 parent 5b4a808 commit 0bcee92

16 files changed

Lines changed: 1102 additions & 195 deletions

File tree

‎src/components/c-cascader/demos/basic.md‎

Lines changed: 91 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ desc: 默认样式
66

77
```jsx
88

9-
import React from 'react';
9+
import React, { useState, useEffect } from 'react';
1010
import { CCascader } from 'cloud-react';
1111
const addressOptions = [
1212
{
@@ -49,32 +49,99 @@ const addressOptions = [
4949
},
5050
];
5151

52-
const defaultOptions = [{
53-
label: '浙江',
54-
value: 'zj',
55-
}, {
56-
label: '杭州',
57-
value: 'hangzhou',
58-
}, {
59-
label: '余杭',
60-
value: 'yuhang',
61-
}];
62-
export default class Demo extends React.Component {
63-
onChange(value) {
64-
console.log(value);
52+
const key = 'tmp_area_data';
53+
export default function Demo() {
54+
const [data, setData] = useState([]);
55+
const [loading, setLoading] = useState(true);
56+
57+
const getStorageData = () =>{
58+
try {
59+
const resultStr = localStorage.getItem(key);
60+
return JSON.parse(resultStr);
61+
} catch (error) {
62+
return null; // 异常时需要重新获取数据
63+
}
6564
}
66-
filter(inputValue, path) {
67-
return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
65+
66+
/**
67+
* 保存数据到缓存
68+
*/
69+
const setStorageData = (data) => {
70+
localStorage.setItem(key, JSON.stringify(data));
6871
}
69-
render() {
70-
const defaultValue = defaultOptions.map(o => o.value);
7172

72-
return (
73-
<>
74-
<CCascader allowClear options={addressOptions} onChange={this.onChange} placeholder="Please select" showSearch={{filter:this.filter }}/>
7573

76-
</>
77-
);
78-
}
74+
useEffect(() => {
75+
76+
// fetcher
77+
async function fetchData(url) {
78+
const res = await window.fetch(url, {
79+
credentials: 'include',
80+
method: 'GET',
81+
mode: 'cors'
82+
});
83+
84+
if (!res.ok) { return null; }
85+
const resData = await res.json();
86+
if (!Array.isArray(resData)) { return null; }
87+
88+
return resData;
89+
}
90+
91+
setLoading(true);
92+
const platform = 'unification';
93+
const server = 'https://qa-ual.shuyun.com/shuyun-searchapi/1.0/area';
94+
// 使用全渠道的数据后面要增加showall参数
95+
const unificationInterface = platform === 'unification' ? '&showall=true' : '';
96+
const url = `${server}?platform=${platform}${unificationInterface}`;
97+
const dataSource = getStorageData();
98+
if (dataSource) {
99+
setData(dataSource);
100+
setLoading(false);
101+
} else {
102+
fetchData(url).then(res => {
103+
if (!res) return;
104+
setData(res);
105+
setLoading(false);
106+
setStorageData(res);
107+
});
108+
}
109+
}, []);
110+
111+
const onChange = (value) => {
112+
console.log(value);
113+
}
114+
115+
const filter = (inputValue, path) => {
116+
return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
117+
}
118+
119+
return (
120+
<div>
121+
<div style={{ marginBottom: 24 }}>仅叶子选项支持选择</div>
122+
<CCascader
123+
options={addressOptions}
124+
onChange={onChange}
125+
placeholder="Please select"
126+
/>
127+
<div style={{ marginBottom: 24, marginTop: 40 }}>任意选项支持选择</div>
128+
<CCascader
129+
options={addressOptions}
130+
onChange={onChange}
131+
placeholder="Please select"
132+
showSearch={{ filter: filter }}
133+
changeOnSelect/>
134+
<div style={{ marginBottom: 24, marginTop: 40 }}>用级联组件展示地址</div>
135+
{
136+
!loading && <CCascader
137+
options={data}
138+
onChange={onChange}
139+
fieldNames={{ label: 'name', value: 'id', children: 'children' }}
140+
placeholder="Please select"
141+
changeOnSelect
142+
/>
143+
}
144+
</div>
145+
);
79146
}
80147
```

‎src/components/c-cascader/demos/clear.md‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
order: 1
3+
title: 级联选择器
4+
desc: 清空选中项
5+
---
6+
7+
```jsx
8+
9+
import React from 'react';
10+
import { CCascader } from 'cloud-react';
11+
const addressOptions = [
12+
{
13+
value: 'zhejiang',
14+
label: 'Zhejiang',
15+
16+
17+
children: [
18+
{
19+
value: 'hangzhou',
20+
label: 'Hangzhou',
21+
children: [
22+
{
23+
value: 'xihu',
24+
label: 'West Lake',
25+
},
26+
{
27+
value: 'xiasha',
28+
label: 'Xia Sha',
29+
},
30+
],
31+
},
32+
],
33+
},
34+
{
35+
value: 'jiangsu',
36+
label: 'Jiangsu',
37+
children: [
38+
{
39+
value: 'nanjing',
40+
label: 'Nanjing',
41+
children: [
42+
{
43+
value: 'zhonghuamen',
44+
label: 'Zhong Hua men',
45+
},
46+
],
47+
},
48+
],
49+
},
50+
];
51+
52+
export default function Demo() {
53+
const onChange = value => {
54+
console.log(value);
55+
}
56+
57+
const filter = (inputValue, path) => {
58+
return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
59+
}
60+
61+
return (
62+
<CCascader
63+
options={addressOptions}
64+
onChange={onChange}
65+
placeholder="Please select"
66+
showSearch={{ filter: filter }}
67+
allowClear/>
68+
);
69+
}
70+
```

‎src/components/c-cascader/demos/customer-render.md‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
---
2+
order: 1
3+
title: 级联选择器
4+
desc: 支持选择子选项，选中后，仅展示最后一级
5+
---
6+
7+
```jsx
8+
9+
import React from 'react';
10+
import { CCascader } from 'cloud-react';
11+
const addressOptions = [
12+
{
13+
value: 'zhejiang',
14+
label: 'Zhejiang',
15+
16+
17+
children: [
18+
{
19+
value: 'hangzhou',
20+
label: 'Hangzhou',
21+
children: [
22+
{
23+
value: 'xihu',
24+
label: 'West Lake',
25+
},
26+
{
27+
value: 'xiasha',
28+
label: 'Xia Sha',
29+
},
30+
],
31+
},
32+
],
33+
},
34+
{
35+
value: 'jiangsu',
36+
label: 'Jiangsu',
37+
children: [
38+
{
39+
value: 'nanjing',
40+
label: 'Nanjing',
41+
children: [
42+
{
43+
value: 'zhonghuamen',
44+
label: 'Zhong Hua men',
45+
},
46+
],
47+
},
48+
],
49+
},
50+
];
51+
52+
export default function Demo() {
53+
const onChange = value => {
54+
console.log(value);
55+
}
56+
57+
const filter = (inputValue, path) => {
58+
return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
59+
}
60+
61+
const displayRender = labels => labels[labels.length - 1];
62+
63+
return (
64+
<CCascader
65+
options={addressOptions}
66+
onChange={onChange}
67+
placeholder="Please select"
68+
displayRender={displayRender}
69+
showSearch={{ filter: filter }}/>
70+
);
71+
}
72+
```

‎src/components/c-cascader/demos/disable.md‎

Lines changed: 0 additions & 93 deletions
This file was deleted.

0 commit comments

Comments
 (0)