【级联选择器】添加备注

ShuyunFF2E · Jan 29, 2024 · b6af119 · b6af119
1 parent 399e90d
commit b6af119
Show file tree

Hide file tree

Showing 4 changed files with 164 additions and 32 deletions.
diff --git a/src/components/c-cascader/demos/customer-render-two.md b/src/components/c-cascader/demos/customer-render-two.md
@@ -0,0 +1,107 @@
+---
+order: 1
+title: 级联选择器
+desc: 全选
+---
+
+```jsx
+
+import React, { useState } from 'react';
+import { CCascader, Input } from 'cloud-react';
+const LABEL_KEY = {
+	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 [ 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 onChange = (value, selectedOptions, isSelectedAll) => {
+		setValue(value);
+		setInputValue(isSelectedAll ? '全部' : value.map(x => x[x.length - 1]).map(x => LABEL_KEY[x]).join(','));
+	}
+
+	const filter = (inputValue, path) => {
+		return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
+	}
+
+	return (
+		<div>
+			<div style={{ marginBottom: 24 }}>多选级联组件</div>
+			<CCascader
+                hasSelectAll
+				options={addressOptions}
+				onChange={onChange}
+				placeholder="Please select"
+				value={value}
+				multiple
+                allowClear
+				showSearch={{ filter: filter }}
+				maxTagCount={1}>
+                <Input
+                    placeholder={'请选择'}
+                    value={inputValue}
+                    style={{ width: 170 }}
+                    />
+            </CCascader>
+		</div>
+    );
+}
+```
diff --git a/...mponents/c-cascader/demos/hasSelectAll.md → ...onents/c-cascader/demos/has-select-all.md b/...mponents/c-cascader/demos/hasSelectAll.md → ...onents/c-cascader/demos/has-select-all.md
@@ -66,6 +66,7 @@ export default function Demo() {
 	const filter = (inputValue, path) => {
 		return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
 	}
+
 	return (
 		<div>
 			<div style={{ marginBottom: 24 }}>多选级联组件</div>

diff --git a/src/components/c-cascader/index.js b/src/components/c-cascader/index.js
@@ -71,12 +71,48 @@ class Cascader extends Component {
     });
   };
 
+  getValue = (value) => {
+    const { options } = this.props;
+
+    // value数据结构 [['ALL'], ['pId1','pId11'], ['pId2','pId21'], ['pId3']]
+    // 获取除全选以外的选中项
+    const removeAllItem = value.filter(
+      (item) => JSON.stringify(item) !== JSON.stringify([ALL_VALUE]),
+    );
+
+    // 获取选中的一级节点。
+    const parentValue = removeAllItem.filter((item) => item.length === 1);
+    let result = {
+      isSelectedAll: false,
+      innerValue: removeAllItem,
+      outerValue: removeAllItem,
+    };
+    // 一级节点是否全部选中
+    if (parentValue.length === options.length) {
+      result = {
+        ...result,
+        isSelectedAll: true,
+        innerValue: [[ALL_VALUE], ...removeAllItem],
+      };
+    }
+    return result;
+  };
+
+  changeValue = (
+    innerValue = [],
+    outerValue = [],
+    selectedOptions = [],
+    isSelectedAll = false,
+  ) => {
+    this.setState({ value: innerValue });
+    this.props.onChange(outerValue, selectedOptions, isSelectedAll);
+  };
+
   handleChange = (value, valueObj) => {
     const { value: preValue } = this.state;
     const { hasSelectAll } = this.props;
     if (!hasSelectAll) {
-      this.setState({ value });
-      this.props.onChange(value, valueObj);
+      this.changeValue(value, value, valueObj);
       return;
     }
 
@@ -99,8 +135,8 @@ class Cascader extends Component {
       return;
     }
     // 【点击其他项目】
-    this.setState({ value: this.getInnerValue(value) });
-    this.props.onChange(value, valueObj);
+    const { innerValue, outerValue, isSelectedAll } = this.getValue(value);
+    this.changeValue(innerValue, [...outerValue], valueObj, isSelectedAll);
   };
 
   // 全选项目是否选中， 选中
@@ -111,31 +147,10 @@ class Cascader extends Component {
     } = this.props;
     if (checked) {
       const _value = options?.map((x) => [x[valueKey]]);
-      this.setState({ value: [[ALL_VALUE], ..._value] });
-      this.props.onChange([..._value], options);
+      this.changeValue([[ALL_VALUE], ..._value], [..._value], options, true);
       return;
     }
-    this.setState({ value: [] });
-    this.props.onChange([]);
-  };
-
-  getInnerValue = (value) => {
-    const { options } = this.props;
-
-    // value数据结构 [['ALL'], ['pId1','pId11'], ['pId2','pId21'], ['pId3']]
-    // 获取除全选以外的选中项
-    const removeAllItem = value.filter(
-      (item) => JSON.stringify(item) !== JSON.stringify([ALL_VALUE]),
-    );
-
-    // 获取选中的一级节点。
-    const parentValue = removeAllItem.filter((item) => item.length === 1);
-
-    // 一级节点是否全部选中
-    if (parentValue.length === options.length) {
-      return [[ALL_VALUE], ...removeAllItem];
-    }
-    return removeAllItem;
+    this.changeValue();
   };
 
   mergedNotFoundContent = this.props.notFoundContent || (
@@ -175,9 +190,15 @@ class Cascader extends Component {
 
       return searchConfig;
     };
+
+    // fixed: React does not recognize the `***` prop on a DOM element
+    const divProps = Object.assign({}, props);
+    delete divProps.splitInput;
+    delete divProps.hasSelectAll;
+
     return (
       <CascaderMenu
-        {...props}
+        {...divProps}
         dropdownClassName={`${popupClassName} ${borderRadiusSize}`}
         value={this.state.value}
         options={[...this.state.options]}
@@ -235,7 +256,7 @@ Cascader.propTypes = {
   fieldNames: PropTypes.object,
   expandIcon: PropTypes.element,
   clearIcon: PropTypes.element,
-  loadingIcon: undefined,
+  loadingIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
   removeIcon: PropTypes.element,
   splitInput: PropTypes.string,
 };

diff --git a/src/components/c-cascader/index.md b/src/components/c-cascader/index.md
@@ -21,7 +21,7 @@ group:
 | disabled       | 是否禁用                 | boolean           | false  |
 | defaultValue   | 初始化所选值    | Array           | false  |
 | value          | 所选值         | Array            | --     |
-| onChange         | 变化时回调函数            | Function(value, selectedOptions) | --     | 
+| onChange         | 变化时回调函数            | Function(value, selectedOptions, isSelectedAll) | --     | 
 | changeOnSelect | 每个选项都触发改变  | boolean            | false  | 
 | displayRender  | 自定义回写格式  | Function(labels:Array)        | --  |
 | expandTrigger  | 展开当前选项的事件点击或者移动，默认是 点击 | string | "click" |
@@ -46,7 +46,7 @@ group:
 ### 多选级联组件
 <embed src="@components/c-cascader/demos/multiple.md" /> 
 
-### 自定义回写格式
+### 自定义回显格式
 <embed src="@components/c-cascader/demos/customer-render.md" /> 
 
 ### 触发方式
@@ -77,4 +77,7 @@ group:
 <embed src="@components/c-cascader/demos/borderRadius.md" />
 
 ### 全选
-<embed src="@components/c-cascader/demos/hasSelectAll.md" />
+<embed src="@components/c-cascader/demos/has-select-all.md" />
+
+### 全选 - 自定义回显格式
+<embed src="@components/c-cascader/demos/customer-render-two.md" />