From 105a32d5b6e50bfb858f0a176befd41a0558f47c Mon Sep 17 00:00:00 2001
From: joylee <jie.li@shuyun.com>
Date: Tue, 30 Jan 2024 13:51:18 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E7=BA=A7=E8=81=94=E9=80=89=E6=8B=A9?=
=?UTF-8?q?=E5=99=A8=E3=80=91=E5=AE=8C=E5=96=84=E5=85=A8=E9=80=89=E5=8A=9F?=
=?UTF-8?q?=E8=83=BD=E7=9A=84=E5=9B=9E=E6=98=BE=E6=A1=88=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../c-cascader/demos/customer-render-two.md | 20 +--
.../c-cascader/demos/dropdown-render.md | 117 ++++++++++++++++++
src/components/c-cascader/index.js | 10 +-
src/components/c-cascader/index.md | 5 +-
4 files changed, 135 insertions(+), 17 deletions(-)
create mode 100644 src/components/c-cascader/demos/dropdown-render.md
diff --git a/src/components/c-cascader/demos/customer-render-two.md b/src/components/c-cascader/demos/customer-render-two.md
index 3b653843..b31ca282 100644
--- a/src/components/c-cascader/demos/customer-render-two.md
+++ b/src/components/c-cascader/demos/customer-render-two.md
@@ -8,7 +8,7 @@ desc: 全选
import React, { useState } from 'react';
import { CCascader, Input } from 'cloud-react';
-const LABEL_KEY = {
+const LABEL_ENUM = {
fj: '贵州 - 黔西南布依族苗族自治州',
fuzhou: '福州',
mawei: '马尾',
@@ -21,6 +21,7 @@ const LABEL_KEY = {
chaoyang: '朝阳区',
haidian: '海淀区'
}
+
const addressOptions = [{
label: '贵州 - 黔西南布依族苗族自治州',
value: 'fj',
@@ -63,19 +64,11 @@ const addressOptions = [{
export default function Demo() {
const [ value, setValue ] = useState([['zj']]);
- const [ inputValue, setInputValue] =useState('');
- const maxTagCount = addressOptions.reduce((acc, item) => {
- if (item.children && item.children.length){
- acc = acc + item.children.length;
- } else {
- acc += 1;
- }
- return acc;
- }, 0)
+ const [ inputValue, setInputValue] =useState('浙江');
const onChange = (value, selectedOptions, isSelectedAll) => {
setValue(value);
- setInputValue(isSelectedAll ? '全部' : value.map(x => x[x.length - 1]).map(x => LABEL_KEY[x]).join(','));
+ setInputValue(isSelectedAll ? '全部' : value.map(x => x[x.length - 1]).map(x => LABEL_ENUM[x]).join(','));
}
const filter = (inputValue, path) => {
@@ -93,12 +86,11 @@ export default function Demo() {
value={value}
multiple
allowClear
- showSearch={{ filter: filter }}
- maxTagCount={1}>
+ showSearch={{ filter: filter }}>
<Input
placeholder={'请选择'}
value={inputValue}
- style={{ width: 170 }}
+ style={{ width: 170, fontSize: '12px' }}
/>
</CCascader>
</div>
diff --git a/src/components/c-cascader/demos/dropdown-render.md b/src/components/c-cascader/demos/dropdown-render.md
new file mode 100644
index 00000000..ee288be1
--- /dev/null
+++ b/src/components/c-cascader/demos/dropdown-render.md
@@ -0,0 +1,117 @@
+---
+order: 1
+title: 级联选择器
+desc: 扩展菜单
+---
+
+```jsx
+
+import React, { useState } from 'react';
+import { CCascader, Input, Checkbox } from 'cloud-react';
+const LABEL_ENUM = {
+ fj: '贵州 - 黔西南布依族苗族自治州',
+ fuzhou: '福州',
+ mawei: '马尾',
+ mawei1: '马尾1',
+ quanzhou: '泉州',
+ zj: '浙江',
+ hangzhou: '杭州',
+ yuhang: '余杭',
+ bj: '北京',
+ chaoyang: '朝阳区',
+ haidian: '海淀区'
+}
+
+const addressOptions = [{
+ label: '贵州 - 黔西南布依族苗族自治州',
+ value: 'fj',
+ children: [{
+ label: '福州',
+ value: 'fuzhou',
+ children: [{
+ label: '马尾',
+ value: 'mawei',
+ },{
+ label: '马尾1',
+ value: 'mawei1',
+ }],
+ }, {
+ label: '泉州',
+ value: 'quanzhou',
+ }],
+}, {
+ label: '浙江',
+ value: 'zj',
+ children: [{
+ label: '杭州',
+ value: 'hangzhou',
+ children: [{
+ label: '余杭',
+ value: 'yuhang',
+ }],
+ }],
+}, {
+ label: '北京',
+ value: 'bj',
+ children: [{
+ label: '朝阳区',
+ value: 'chaoyang',
+ }, {
+ label: '海淀区',
+ value: 'haidian',
+ }],
+}];
+
+export default function Demo() {
+ const [ checked, setChecked] = useState(false);
+ const [ value, setValue ] = useState([['zj']]);
+ const [ inputValue, setInputValue] =useState('浙江');
+
+ const onChange = (value, selectedOptions, isSelectedAll) => {
+ setValue(value);
+ setChecked(!!isSelectedAll);
+ setInputValue(isSelectedAll ? '全部' : value.map(x => x[x.length - 1]).map(x => LABEL_ENUM[x]).join(','));
+ }
+
+ const filter = (inputValue, path) => {
+ return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
+ }
+
+ const handleALlChange = value => {
+ setChecked(value);
+ if (value) {
+ setValue([['zj'], ['fj'], ['bj']]);
+ return;
+ }
+ setValue([]);
+ }
+ return (
+ <div>
+ <div style={{ marginBottom: 24 }}>多选级联组件</div>
+ <CCascader
+ options={addressOptions}
+ onChange={onChange}
+ placeholder="Please select"
+ value={value}
+ multiple
+ allowClear
+ showSearch={{ filter: filter }}
+ dropdownRender={menus => (
+ <div>
+ {menus}
+ <hr />
+ <Checkbox checked={checked} onChange={handleALlChange} style={{ marginLeft: 12 }}>
+ 全选
+ </Checkbox>
+ </div>
+ )}>
+ <Input
+ placeholder={'请选择'}
+ value={inputValue}
+ style={{ width: 170, fontSize: '12px' }}
+ />
+ </CCascader>
+ </div>
+ );
+}
+```
diff --git a/src/components/c-cascader/index.js b/src/components/c-cascader/index.js
index 3ed1d611..ad17b236 100644
--- a/src/components/c-cascader/index.js
+++ b/src/components/c-cascader/index.js
@@ -34,10 +34,16 @@ class Cascader extends Component {
}
componentDidUpdate(prevProps) {
+ const { options, hasSelectAll, value } = this.props;
+ if (JSON.stringify(prevProps.options) !== JSON.stringify(options)) {
+ this.initOptions();
+ }
+ // hasSelectAll: 全选选项是内部实现提供的。 仅在组件刚挂着的时候赋值，外部取值
if (
- JSON.stringify(prevProps.options) !== JSON.stringify(this.props.options)
+ !hasSelectAll
+ && JSON.stringify(prevProps.value) !== JSON.stringify(value)
) {
- this.initOptions();
+ this.setState({ value });
}
}
diff --git a/src/components/c-cascader/index.md b/src/components/c-cascader/index.md
index e00f1885..ef3bd868 100644
--- a/src/components/c-cascader/index.md
+++ b/src/components/c-cascader/index.md
@@ -76,4 +76,7 @@ group:
<embed src="@components/c-cascader/demos/has-select-all.md" />
### 全选 - 自定义回显格式
-<embed src="@components/c-cascader/demos/customer-render-two.md" />
\ No newline at end of file
+<embed src="@components/c-cascader/demos/customer-render-two.md" />
+
+### 自定义级联Footer
+<embed src="@components/c-cascader/demos/dropdown-render.md" />