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" />