fix: Table组件开启checkOnItemClick后无法限制选择上限问题 (#5632)

This commit is contained in:
RUNZE LU 2022-11-01 12:16:34 +08:00 committed by GitHub
parent 96d81855ce
commit 82ae87bacc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 45 additions and 6 deletions

View File

@ -202,6 +202,40 @@ export const Row = types
return table && table.itemDraggableOn return table && table.itemDraggableOn
? evalExpression(table.itemDraggableOn, (self as IRow).locals) ? evalExpression(table.itemDraggableOn, (self as IRow).locals)
: true; : true;
},
/**
* check
* checkOnItemClick触发的check事件
*/
get isCheckAvaiableOnClick(): boolean {
const table = getParent(self, self.depth * 2) as ITableStore;
const keepItemSelectionOnPageChange =
table?.keepItemSelectionOnPageChange;
const selectionUpperLimit = table?.maxKeepItemSelectionLength;
// 如果未做配置,或者配置不合法直接通过检查
if (
!keepItemSelectionOnPageChange ||
!Number.isInteger(selectionUpperLimit)
) {
return true;
}
// 使用内置ID不会重复
const selectedIds = (table?.selectedRows ?? []).map(
(item: IRow) => item.id
);
// 此时syncSelected还没有触发所以需要比较点击之后的数量
const selectedCount = selectedIds.includes(self.id)
? selectedIds.length - 1
: selectedIds.length + 1;
if (selectedCount > selectionUpperLimit) {
return false;
}
return true;
} }
})) }))
.actions(self => ({ .actions(self => ({
@ -688,7 +722,8 @@ export const TableStore = iRendererStore
return getHovedRow(); return getHovedRow();
}, },
get disabledHeadCheckbox() { /** 已选择item是否达到数量上限 */
get isSelectionThresholdReached() {
const selectedLength = self.data?.selectedItems?.length; const selectedLength = self.data?.selectedItems?.length;
const maxLength = self.maxKeepItemSelectionLength; const maxLength = self.maxKeepItemSelectionLength;
@ -696,7 +731,7 @@ export const TableStore = iRendererStore
return false; return false;
} }
return maxLength === selectedLength; return maxLength <= selectedLength;
}, },
get firstToggledColumnIndex() { get firstToggledColumnIndex() {

View File

@ -1,12 +1,13 @@
import {observer} from 'mobx-react'; import {observer} from 'mobx-react';
import React from 'react'; import React from 'react';
import uniq from 'lodash/uniq';
import type {IColumn, IRow} from 'amis-core/lib/store/table'; import type {IColumn, IRow} from 'amis-core/lib/store/table';
import {RendererProps} from 'amis-core'; import {RendererProps} from 'amis-core';
import {Action} from '../Action'; import {Action} from '../Action';
import {isClickOnInput, createObject} from 'amis-core'; import {isClickOnInput, createObject} from 'amis-core';
interface TableRowProps extends Pick<RendererProps, 'render'> { interface TableRowProps extends Pick<RendererProps, 'render'> {
onCheck: (item: IRow) => void; onCheck: (item: IRow) => Promise<void>;
classPrefix: string; classPrefix: string;
renderCell: ( renderCell: (
region: string, region: string,
@ -42,7 +43,8 @@ export class TableRow extends React.Component<TableRowProps> {
return; return;
} }
const {itemAction, onAction, item, data, dispatchEvent} = this.props; const {itemAction, onAction, item, data, dispatchEvent, onCheck} =
this.props;
const rendererEvent = await dispatchEvent( const rendererEvent = await dispatchEvent(
'rowClick', 'rowClick',
@ -59,7 +61,9 @@ export class TableRow extends React.Component<TableRowProps> {
onAction && onAction(e, itemAction, item?.data); onAction && onAction(e, itemAction, item?.data);
item.toggle(); item.toggle();
} else { } else {
this.props.onCheck(this.props.item); if (item.checkable && item.isCheckAvaiableOnClick) {
onCheck?.(item);
}
} }
} }

View File

@ -1876,7 +1876,7 @@ export default class Table extends React.Component<TableProps, object> {
classPrefix={ns} classPrefix={ns}
partial={store.someChecked && !store.allChecked} partial={store.someChecked && !store.allChecked}
checked={store.someChecked} checked={store.someChecked}
disabled={store.disabledHeadCheckbox} disabled={store.isSelectionThresholdReached}
onChange={this.handleCheckAll} onChange={this.handleCheckAll}
/> />
) : ( ) : (