From b6af1192c07c3b5ca869e3590a9488e0b3cb2829 Mon Sep 17 00:00:00 2001 From: joylee Date: Mon, 29 Jan 2024 17:53:33 +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=E6=B7=BB=E5=8A=A0=E5=A4=87=E6=B3=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../c-cascader/demos/customer-render-two.md | 107 ++++++++++++++++++ .../{hasSelectAll.md => has-select-all.md} | 1 + src/components/c-cascader/index.js | 79 ++++++++----- src/components/c-cascader/index.md | 9 +- 4 files changed, 164 insertions(+), 32 deletions(-) create mode 100644 src/components/c-cascader/demos/customer-render-two.md rename src/components/c-cascader/demos/{hasSelectAll.md => has-select-all.md} (99%) diff --git a/src/components/c-cascader/demos/customer-render-two.md b/src/components/c-cascader/demos/customer-render-two.md new file mode 100644 index 00000000..3b653843 --- /dev/null +++ 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 ( +
+
多选级联组件
+ + + +
+ ); +} +``` diff --git a/src/components/c-cascader/demos/hasSelectAll.md b/src/components/c-cascader/demos/has-select-all.md similarity index 99% rename from src/components/c-cascader/demos/hasSelectAll.md rename to src/components/c-cascader/demos/has-select-all.md index a0b80de1..1f19d48d 100644 --- a/src/components/c-cascader/demos/hasSelectAll.md +++ b/src/components/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 (
多选级联组件
diff --git a/src/components/c-cascader/index.js b/src/components/c-cascader/index.js index bb25f832..e670efbb 100644 --- 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 ( -### 自定义回写格式 +### 自定义回显格式 ### 触发方式 @@ -77,4 +77,7 @@ group: ### 全选 - + + +### 全选 - 自定义回显格式 +