test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 02:58:05 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

select多选和检索同时开时，全选支持只选中检索命中的项 (#2542)

Browse Source 
Co-authored-by: zhangjun08 <zhangjun08@baidu.com>
This commit is contained in:
张军 2021-09-13 10:35:32 +08:00 committed by GitHub
parent e0a7ee2faa
commit 80e5387157
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/zh-CN/components/form/select.md
View File

@ -58,6 +58,7 @@ order: 48
| extractValue | `boolean` | `false` | [提取值](./options#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue) |
| checkAll | `boolean` | `false` | 是否支持全选 |
| checkAllLabel | `string` | `全选` | 全选的文字 |
| checkAllBySearch | `boolean` | `false` | 有检索时只全选检索命中的项 |
| defaultCheckAll | `boolean` | `false` | 默认是否全选 |
| creatable | `boolean` | `false` | [新增选项](./options#%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable) |
| multiple | `boolean` | `false` | [多选](./options#多选-multiple) |

3
scss/components/form/_select.scss
View File

@ -156,6 +156,9 @@
max-height: px2rem(300px);
overflow: auto;
user-select: none;
.#{$ns}Checkbox--sm > i {
margin-top: px2rem(-3px);
}
}
&--longlist {
overflow: hidden;

26
src/components/Select.tsx
View File

@ -286,6 +286,7 @@ interface SelectProps extends OptionProps, ThemeProps, LocaleProps {
onBlur?: Function;
checkAll?: boolean;
checkAllLabel?: string;
checkAllBySearch?: boolean;
defaultCheckAll?: boolean;
simpleValue?: boolean;
defaultOpen?: boolean;
@ -473,15 +474,29 @@ export class Select extends React.Component<SelectProps, SelectState> {
}
toggleCheckAll() {
const {options, onChange, simpleValue} = this.props;
const {
options,
onChange,
simpleValue,
checkAllBySearch,
labelField,
valueField
} = this.props;
const inputValue = this.state.inputValue;
let {selection} = this.state;
const optionsValues = options.map(option => option.value);
let filtedOptions: Array<Option> =
inputValue && checkAllBySearch
? matchSorter(options, inputValue, {
keys: [labelField || 'label', valueField || 'value']
})
: options.concat();
const optionsValues = filtedOptions.map(option => option.value);
const selectionValues = selection.map(select => select.value);
const checkedAll = optionsValues.every(
option => selectionValues.indexOf(option) > -1
);
selection = checkedAll ? [] : options;
selection = checkedAll ? [] : filtedOptions;
onChange(simpleValue ? selection.map(item => item.value) : selection);
}
@ -687,6 +702,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
popoverClassName,
checkAll,
checkAllLabel,
checkAllBySearch,
searchable,
createBtnLabel,
disabled,
@ -712,7 +728,9 @@ export class Select extends React.Component<SelectProps, SelectState> {
const selectionValues = selection.map(select => select[valueField]);
if (multiple && checkAll) {
const optionsValues = options.map(option => option[valueField]);
const optionsValues = (checkAllBySearch ? filtedOptions : options).map(
option => option[valueField]
);
checkedAll = optionsValues.every(
option => selectionValues.indexOf(option) > -1