Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DataGrid] Select all checkbox click should select only filtered rows after filter #1879

Merged
merged 15 commits into from
Jun 21, 2021
Merged

[DataGrid] Select all checkbox click should select only filtered rows after filter #1879

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
72f945a
fix select all checkbox not rendering due to React.memo
ZeeshanTamboli Jun 9, 2021
57f3f19
Merge branch 'master' into issue/1141
ZeeshanTamboli Jun 12, 2021
5193f92
fix core issue
ZeeshanTamboli Jun 12, 2021
0adfe4b
fix indeterminate checkbox state issue
ZeeshanTamboli Jun 12, 2021
1f5b93a
add tests for select all after filtering
ZeeshanTamboli Jun 12, 2021
57ff224
remove apiRef unnecessary dependency from useEffect
ZeeshanTamboli Jun 12, 2021
e53e774
move getColumnHeaderElement inside effect
ZeeshanTamboli Jun 13, 2021
50a0c2c
use visible row count selector
ZeeshanTamboli Jun 15, 2021
bc2ae4d
resolve conflicts
ZeeshanTamboli Jun 15, 2021
fb69664
apply code suggestions
ZeeshanTamboli Jun 16, 2021
f6de641
Merge branch 'master' into issue/1141
ZeeshanTamboli Jun 17, 2021
c5c358a
remove code
ZeeshanTamboli Jun 19, 2021
cb6914f
resolve conflicts
ZeeshanTamboli Jun 19, 2021
ff52c74
make test failing
ZeeshanTamboli Jun 19, 2021
701fa06
fix select all select only filtered rows
ZeeshanTamboli Jun 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
359 changes: 179 additions & 180 deletions packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,8 @@ interface GridColumnHeaderItemProps {
tabIndex: 0 | -1;
}

export const GridColumnHeaderItem = React.memo(
({
export function GridColumnHeaderItem(props: GridColumnHeaderItemProps) {
const {
column,
columnMenuOpen,
colIndex,
Expand All @@ -59,186 +59,185 @@ export const GridColumnHeaderItem = React.memo(
filterItemsCounter,
hasFocus,
tabIndex,
}: GridColumnHeaderItemProps) => {
const apiRef = useGridApiContext();
const headerCellRef = React.useRef<HTMLDivElement>(null);
const columnMenuId: string = useId();
const columnMenuButtonId: string = useId();
const iconButtonRef = React.useRef<HTMLButtonElement>(null);
const {
classes,
disableColumnReorder,
showColumnRightBorder,
disableColumnResize,
disableColumnMenu,
disableColumnFilter,
} = options;
const isColumnSorted = sortDirection != null;
// todo refactor to a prop on col isNumeric or ?? ie: coltype===price wont work
const isColumnNumeric = column.type === GRID_NUMBER_COLUMN_TYPE;

let headerComponent: React.ReactNode = null;
if (column.renderHeader && apiRef!.current) {
headerComponent = column.renderHeader(apiRef!.current.getColumnHeaderParams(column.field));
}

const publish = React.useCallback(
(eventName: string) => (event: React.MouseEvent | React.DragEvent) =>
apiRef!.current.publishEvent(
eventName,
apiRef!.current.getColumnHeaderParams(column.field),
event,
),
[apiRef, column.field],
);

const mouseEventsHandlers = React.useMemo(
() => ({
onClick: publish(GRID_COLUMN_HEADER_CLICK),
onDoubleClick: publish(GRID_COLUMN_HEADER_DOUBLE_CLICK),
onMouseOver: publish(GRID_COLUMN_HEADER_OVER),
onMouseOut: publish(GRID_COLUMN_HEADER_OUT),
onMouseEnter: publish(GRID_COLUMN_HEADER_ENTER),
onMouseLeave: publish(GRID_COLUMN_HEADER_LEAVE),
onKeyDown: publish(GRID_COLUMN_HEADER_KEYDOWN),
onFocus: publish(GRID_COLUMN_HEADER_FOCUS),
onBlur: publish(GRID_COLUMN_HEADER_BLUR),
}),
[publish],
);

const draggableEventHandlers = React.useMemo(
() => ({
onDragStart: publish(GRID_COLUMN_HEADER_DRAG_START),
onDragEnter: publish(GRID_COLUMN_HEADER_DRAG_ENTER),
onDragOver: publish(GRID_COLUMN_HEADER_DRAG_OVER),
onDragEnd: publish(GRID_COLUMN_HEADER_DRAG_END),
}),
[publish],
);

const resizeEventHandlers = React.useMemo(
() => ({
onMouseDown: publish(GRID_COLUMN_SEPARATOR_MOUSE_DOWN),
}),
[publish],
);

const classNames = [classes?.columnHeader];

if (column.headerClassName) {
const headerClassName = isFunction(column.headerClassName)
? column.headerClassName({ field: column.field, colDef: column, api: apiRef })
: column.headerClassName;

classNames.push(headerClassName);
}

const cssClasses = clsx(
column.headerAlign === 'center' && 'MuiDataGrid-columnHeaderCenter',
column.headerAlign === 'right' && 'MuiDataGrid-columnHeaderRight',
{
'MuiDataGrid-columnHeaderSortable': column.sortable,
'MuiDataGrid-columnHeaderMoving': isDragging,
'MuiDataGrid-columnHeaderSorted': isColumnSorted,
'MuiDataGrid-columnHeaderNumeric': isColumnNumeric,
'MuiDataGrid-withBorder': showColumnRightBorder,
},
...classNames,
);

const width = column.width!;

let ariaSort: any;
if (sortDirection != null) {
ariaSort = {
'aria-sort': sortDirection === 'asc' ? 'ascending' : 'descending',
};
}

const columnMenuIconButton = !disableColumnMenu && !column.disableColumnMenu && (
<ColumnHeaderMenuIcon
column={column}
columnMenuId={columnMenuId}
columnMenuButtonId={columnMenuButtonId}
open={columnMenuOpen}
iconButtonRef={iconButtonRef}
/>
);

const columnTitleIconButtons = (
<React.Fragment>
{!disableColumnFilter && <ColumnHeaderFilterIcon counter={filterItemsCounter} />}
{column.sortable && !column.hideSortIcons && (
<GridColumnHeaderSortIcon direction={sortDirection} index={sortIndex} />
)}
</React.Fragment>
);

React.useLayoutEffect(() => {
const columnMenuState = apiRef!.current.getState().columnMenu;
if (hasFocus && !columnMenuState.open) {
const focusableElement = headerCellRef.current!.querySelector(
'[tabindex="0"]',
) as HTMLElement;
if (focusableElement) {
focusableElement!.focus();
} else {
headerCellRef.current!.focus();
}
} = props;
const apiRef = useGridApiContext();
const headerCellRef = React.useRef<HTMLDivElement>(null);
const columnMenuId: string = useId();
const columnMenuButtonId: string = useId();
const iconButtonRef = React.useRef<HTMLButtonElement>(null);
const {
classes,
disableColumnReorder,
showColumnRightBorder,
disableColumnResize,
disableColumnMenu,
disableColumnFilter,
} = options;
const isColumnSorted = sortDirection != null;
// todo refactor to a prop on col isNumeric or ?? ie: coltype===price wont work
const isColumnNumeric = column.type === GRID_NUMBER_COLUMN_TYPE;

let headerComponent: React.ReactNode = null;
if (column.renderHeader && apiRef!.current) {
headerComponent = column.renderHeader(apiRef!.current.getColumnHeaderParams(column.field));
}

const publish = React.useCallback(
(eventName: string) => (event: React.MouseEvent | React.DragEvent) =>
apiRef!.current.publishEvent(
eventName,
apiRef!.current.getColumnHeaderParams(column.field),
event,
),
[apiRef, column.field],
);

const mouseEventsHandlers = React.useMemo(
() => ({
onClick: publish(GRID_COLUMN_HEADER_CLICK),
onDoubleClick: publish(GRID_COLUMN_HEADER_DOUBLE_CLICK),
onMouseOver: publish(GRID_COLUMN_HEADER_OVER),
onMouseOut: publish(GRID_COLUMN_HEADER_OUT),
onMouseEnter: publish(GRID_COLUMN_HEADER_ENTER),
onMouseLeave: publish(GRID_COLUMN_HEADER_LEAVE),
onKeyDown: publish(GRID_COLUMN_HEADER_KEYDOWN),
onFocus: publish(GRID_COLUMN_HEADER_FOCUS),
onBlur: publish(GRID_COLUMN_HEADER_BLUR),
}),
[publish],
);

const draggableEventHandlers = React.useMemo(
() => ({
onDragStart: publish(GRID_COLUMN_HEADER_DRAG_START),
onDragEnter: publish(GRID_COLUMN_HEADER_DRAG_ENTER),
onDragOver: publish(GRID_COLUMN_HEADER_DRAG_OVER),
onDragEnd: publish(GRID_COLUMN_HEADER_DRAG_END),
}),
[publish],
);

const resizeEventHandlers = React.useMemo(
() => ({
onMouseDown: publish(GRID_COLUMN_SEPARATOR_MOUSE_DOWN),
}),
[publish],
);

const classNames = [classes?.columnHeader];

if (column.headerClassName) {
const headerClassName = isFunction(column.headerClassName)
? column.headerClassName({ field: column.field, colDef: column, api: apiRef })
: column.headerClassName;

classNames.push(headerClassName);
}

const cssClasses = clsx(
column.headerAlign === 'center' && 'MuiDataGrid-columnHeaderCenter',
column.headerAlign === 'right' && 'MuiDataGrid-columnHeaderRight',
{
'MuiDataGrid-columnHeaderSortable': column.sortable,
'MuiDataGrid-columnHeaderMoving': isDragging,
'MuiDataGrid-columnHeaderSorted': isColumnSorted,
'MuiDataGrid-columnHeaderNumeric': isColumnNumeric,
'MuiDataGrid-withBorder': showColumnRightBorder,
},
...classNames,
);

const width = column.width!;

let ariaSort: any;
if (sortDirection != null) {
ariaSort = {
'aria-sort': sortDirection === 'asc' ? 'ascending' : 'descending',
};
}

const columnMenuIconButton = !disableColumnMenu && !column.disableColumnMenu && (
<ColumnHeaderMenuIcon
column={column}
columnMenuId={columnMenuId}
columnMenuButtonId={columnMenuButtonId}
open={columnMenuOpen}
iconButtonRef={iconButtonRef}
/>
);

const columnTitleIconButtons = (
<React.Fragment>
{!disableColumnFilter && <ColumnHeaderFilterIcon counter={filterItemsCounter} />}
{column.sortable && !column.hideSortIcons && (
<GridColumnHeaderSortIcon direction={sortDirection} index={sortIndex} />
)}
</React.Fragment>
);

React.useLayoutEffect(() => {
const columnMenuState = apiRef!.current.getState().columnMenu;
if (hasFocus && !columnMenuState.open) {
const focusableElement = headerCellRef.current!.querySelector(
'[tabindex="0"]',
) as HTMLElement;
if (focusableElement) {
focusableElement!.focus();
} else {
headerCellRef.current!.focus();
}
});

return (
}
});

return (
<div
ref={headerCellRef}
className={cssClasses}
key={column.field}
data-field={column.field}
style={{
width,
minWidth: width,
maxWidth: width,
}}
role="columnheader"
tabIndex={tabIndex}
aria-colindex={colIndex + 1}
{...ariaSort}
{...mouseEventsHandlers}
>
<div
ref={headerCellRef}
className={cssClasses}
key={column.field}
data-field={column.field}
style={{
width,
minWidth: width,
maxWidth: width,
}}
role="columnheader"
tabIndex={tabIndex}
aria-colindex={colIndex + 1}
{...ariaSort}
{...mouseEventsHandlers}
className="MuiDataGrid-columnHeader-draggable"
draggable={!disableColumnReorder}
{...draggableEventHandlers}
>
<div
className="MuiDataGrid-columnHeader-draggable"
draggable={!disableColumnReorder}
{...draggableEventHandlers}
>
<div className="MuiDataGrid-columnHeaderTitleContainer">
{headerComponent || (
<GridColumnHeaderTitle
label={column.headerName || column.field}
description={column.description}
columnWidth={width}
/>
)}
{columnTitleIconButtons}
</div>
{columnMenuIconButton}
<div className="MuiDataGrid-columnHeaderTitleContainer">
{headerComponent || (
<GridColumnHeaderTitle
label={column.headerName || column.field}
description={column.description}
columnWidth={width}
/>
)}
{columnTitleIconButtons}
</div>
<GridColumnHeaderSeparator
resizable={!disableColumnResize && !!column.resizable}
resizing={isResizing}
height={headerHeight}
{...resizeEventHandlers}
/>
<GridColumnHeaderMenu
columnMenuId={columnMenuId}
columnMenuButtonId={columnMenuButtonId}
field={column.field}
open={columnMenuOpen}
target={iconButtonRef.current}
ContentComponent={apiRef!.current.components.ColumnMenu}
contentComponentProps={apiRef!.current.componentsProps?.columnMenu}
/>
{columnMenuIconButton}
</div>
);
},
);
<GridColumnHeaderSeparator
resizable={!disableColumnResize && !!column.resizable}
resizing={isResizing}
height={headerHeight}
{...resizeEventHandlers}
/>
<GridColumnHeaderMenu
columnMenuId={columnMenuId}
columnMenuButtonId={columnMenuButtonId}
field={column.field}
open={columnMenuOpen}
target={iconButtonRef.current}
ContentComponent={apiRef!.current.components.ColumnMenu}
contentComponentProps={apiRef!.current.componentsProps?.columnMenu}
/>
</div>
);
}
Loading