【级联选择器】完善全选功能的回显案例

ShuyunFF2E · Jan 30, 2024 · 105a32d · 105a32d
1 parent 5de9011
commit 105a32d
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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" />
+<embed src="@components/c-cascader/demos/customer-render-two.md" />
+
+### 自定义级联Footer
+<embed src="@components/c-cascader/demos/dropdown-render.md" />