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

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

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

26
src/components/Select.tsx
View File

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