Remove filter props (#2412)

* Remove filter props * Fix ColSpanArgs type * Remove Numeric filter, fix focus * Fix toggle filter * Update src/DataGrid.tsx Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com> * Update src/DataGrid.tsx Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com> * Update src/DataGrid.tsx Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com> * Update stories/demos/HeaderFilters.tsx Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com> * Update stories/demos/HeaderFilters.tsx Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com> * Address comments * Add filters.enabled flag * Update stories/demos/HeaderFilters.tsx Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com> * Move datalist outside the provider. * Use a static class name to filterable columns * Update stories/demos/HeaderFilters.tsx Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com> Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
adazzle · May 19, 2021 · 76c5bb9 · 76c5bb9
1 parent 2f6181d
commit 76c5bb9
Show file tree

Hide file tree

Showing 9 changed files with 203 additions and 352 deletions.
diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
@@ -20,7 +20,6 @@ import {
   RowSelectionChangeProvider
 } from './hooks';
 import HeaderRow from './HeaderRow';
-import FilterRow from './FilterRow';
 import Row from './Row';
 import GroupRowRenderer from './GroupRow';
 import SummaryRow from './SummaryRow';
@@ -40,7 +39,6 @@ import {
 import type {
   CalculatedColumn,
   Column,
-  Filters,
   Position,
   RowRendererProps,
   RowsChangeData,
@@ -116,8 +114,6 @@ export interface DataGridProps<R, SR = unknown, K extends Key = Key> extends Sha
   rowHeight?: number | ((args: RowHeightArgs<R>) => number) | null;
   /** The height of the header row in pixels */
   headerRowHeight?: number | null;
-  /** The height of the header filter row in pixels */
-  headerFiltersHeight?: number | null;
   /** The height of each summary row in pixels */
   summaryRowHeight?: number | null;
 
@@ -134,8 +130,6 @@ export interface DataGridProps<R, SR = unknown, K extends Key = Key> extends Sha
   sortDirection?: SortDirection | null;
   /** Function called whenever grid is sorted*/
   onSort?: ((columnKey: string, direction: SortDirection) => void) | null;
-  filters?: Readonly<Filters> | null;
-  onFiltersChange?: ((filters: Filters) => void) | null;
   defaultColumnOptions?: DefaultColumnOptions<R, SR> | null;
   groupBy?: readonly string[] | null;
   rowGrouper?: ((rows: readonly R[], columnKey: string) => Record<string, readonly R[]>) | null;
@@ -165,8 +159,6 @@ export interface DataGridProps<R, SR = unknown, K extends Key = Key> extends Sha
   /**
    * Toggles and modes
    */
-  /** Toggles whether filters row is displayed or not */
-  enableFilterRow?: boolean | null;
   cellNavigationMode?: CellNavigationMode | null;
   enableVirtualization?: boolean | null;
 
@@ -195,17 +187,14 @@ function DataGrid<R, SR, K extends Key>(
     onRowsChange,
     // Dimensions props
     rowHeight,
-    headerRowHeight,
-    headerFiltersHeight,
+    headerRowHeight: rawHeaderRowHeight,
     summaryRowHeight: rawSummaryRowHeight,
     // Feature props
     selectedRows,
     onSelectedRowsChange,
     sortColumn,
     sortDirection,
     onSort,
-    filters,
-    onFiltersChange,
     defaultColumnOptions,
     groupBy: rawGroupBy,
     rowGrouper,
@@ -222,7 +211,6 @@ function DataGrid<R, SR, K extends Key>(
     onFill,
     onPaste,
     // Toggles and modes
-    enableFilterRow,
     cellNavigationMode: rawCellNavigationMode,
     enableVirtualization,
     // Miscellaneous
@@ -241,11 +229,9 @@ function DataGrid<R, SR, K extends Key>(
    * defaults
    */
   rowHeight ??= 35;
-  headerRowHeight ??= typeof rowHeight === 'number' ? rowHeight : 35;
-  headerFiltersHeight ??= 45;
+  const headerRowHeight = rawHeaderRowHeight ?? (typeof rowHeight === 'number' ? rowHeight : 35);
   const summaryRowHeight = rawSummaryRowHeight ?? (typeof rowHeight === 'number' ? rowHeight : 35);
   const RowRenderer = rowRenderer ?? Row;
-  enableFilterRow ??= false;
   const cellNavigationMode = rawCellNavigationMode ?? 'NONE';
   enableVirtualization ??= true;
   const editorPortalTarget = rawEditorPortalTarget ?? body;
@@ -283,10 +269,9 @@ function DataGrid<R, SR, K extends Key>(
    * computed values
    */
   const [gridRef, gridWidth, gridHeight] = useGridDimensions();
-  const headerRowsCount = enableFilterRow ? 2 : 1;
+  const headerRowsCount = 1;
   const summaryRowsCount = summaryRows?.length ?? 0;
-  const totalHeaderHeight = headerRowHeight + (enableFilterRow ? headerFiltersHeight : 0);
-  const clientHeight = gridHeight - totalHeaderHeight - summaryRowsCount * summaryRowHeight;
+  const clientHeight = gridHeight - headerRowHeight - summaryRowsCount * summaryRowHeight;
   const isSelectable = selectedRows != null && onSelectedRowsChange != null;
 
   const allRowsSelected = useMemo((): boolean => {
@@ -353,7 +338,6 @@ function DataGrid<R, SR, K extends Key>(
     rowOverscanEndIdx,
     rows,
     summaryRows,
-    enableFilterRow,
     isGroupRow
   });
 
@@ -965,7 +949,7 @@ function DataGrid<R, SR, K extends Key>(
     let startRowIndex = 0;
     for (let rowIdx = rowOverscanStartIdx; rowIdx <= rowOverscanEndIdx; rowIdx++) {
       const row = rows[rowIdx];
-      const top = getRowTop(rowIdx) + totalHeaderHeight;
+      const top = getRowTop(rowIdx) + headerRowHeight;
       if (isGroupRow(row)) {
         ({ startRowIndex } = row);
         const isGroupRowSelected =
@@ -1067,7 +1051,6 @@ function DataGrid<R, SR, K extends Key>(
         {
           ...style,
           '--header-row-height': `${headerRowHeight}px`,
-          '--filter-row-height': `${headerFiltersHeight}px`,
           '--row-width': `${totalColumnWidth}px`,
           '--summary-row-height': `${summaryRowHeight}px`,
           ...layoutCssVars
@@ -1088,13 +1071,6 @@ function DataGrid<R, SR, K extends Key>(
         onSort={onSort}
         lastFrozenColumnIndex={lastFrozenColumnIndex}
       />
-      {enableFilterRow && (
-        <FilterRow<R, SR>
-          columns={viewportColumns}
-          filters={filters}
-          onFiltersChange={onFiltersChange}
-        />
-      )}
       {rows.length === 0 && EmptyRowsRenderer ? (
         <EmptyRowsRenderer />
       ) : (

diff --git a/src/FilterRow.tsx b/src/FilterRow.tsx
diff --git a/src/hooks/useViewportColumns.ts b/src/hooks/useViewportColumns.ts
@@ -13,7 +13,6 @@ interface ViewportColumnsArgs<R, SR> {
   lastFrozenColumnIndex: number;
   rowOverscanStartIdx: number;
   rowOverscanEndIdx: number;
-  enableFilterRow: boolean;
   isGroupRow: (row: R | GroupRow<R>) => row is GroupRow<R>;
 }
 
@@ -27,7 +26,6 @@ export function useViewportColumns<R, SR>({
   lastFrozenColumnIndex,
   rowOverscanStartIdx,
   rowOverscanEndIdx,
-  enableFilterRow,
   isGroupRow
 }: ViewportColumnsArgs<R, SR>) {
   // find the column that spans over a column within the visible columns range and adjust colOverscanStartIdx
@@ -52,14 +50,6 @@ export function useViewportColumns<R, SR>({
         break;
       }
 
-      // check filter row
-      if (
-        enableFilterRow &&
-        updateStartIdx(colIdx, getColSpan(column, lastFrozenColumnIndex, { type: 'FILTER' }))
-      ) {
-        break;
-      }
-
       // check viewport rows
       for (let rowIdx = rowOverscanStartIdx; rowIdx <= rowOverscanEndIdx; rowIdx++) {
         const row = rows[rowIdx];
@@ -95,8 +85,7 @@ export function useViewportColumns<R, SR>({
     colOverscanStartIdx,
     lastFrozenColumnIndex,
     colSpanColumns,
-    isGroupRow,
-    enableFilterRow
+    isGroupRow
   ]);
 
   return useMemo((): readonly CalculatedColumn<R, SR>[] => {

diff --git a/src/index.ts b/src/index.ts
@@ -17,8 +17,6 @@ export type {
   HeaderRendererProps,
   CellRendererProps,
   RowRendererProps,
-  FilterRendererProps,
-  Filters,
   RowsChangeData,
   SelectRowEvent,
   FillEvent,

diff --git a/src/style/header.ts b/src/style/header.ts
@@ -1,32 +1,20 @@
 import { css } from '@linaria/core';
 
-const headerRowAndFilterRow = css`
+const headerRow = css`
   contain: strict;
   contain: size layout style paint;
   display: grid;
   grid-template-columns: var(--template-columns);
+  grid-template-rows: var(--header-row-height);
+  height: var(--header-row-height); // needed on Firefox
+  line-height: var(--header-row-height);
   width: var(--row-width);
   position: sticky;
+  top: 0;
   background-color: var(--header-background-color);
   font-weight: bold;
   z-index: 3;
-`;
-
-const headerRow = css`
-  grid-template-rows: var(--header-row-height);
-  height: var(--header-row-height); // needed on Firefox
-  line-height: var(--header-row-height);
-  top: 0;
   touch-action: none;
 `;
 
-export const headerRowClassname = `rdg-header-row ${headerRowAndFilterRow} ${headerRow}`;
-
-const filterRow = css`
-  grid-template-rows: var(--filter-row-height);
-  height: var(--filter-row-height); // needed on Firefox
-  line-height: var(--filter-row-height);
-  top: var(--header-row-height);
-`;
-
-export const filterRowClassname = `rdg-filter-row ${headerRowAndFilterRow} ${filterRow}`;
+export const headerRowClassname = `rdg-header-row ${headerRow}`;
diff --git a/src/types.ts b/src/types.ts
@@ -52,8 +52,6 @@ export interface Column<TRow, TSummaryRow = unknown> {
   } | null;
   /** Header renderer for each header cell */
   headerRenderer?: React.ComponentType<HeaderRendererProps<TRow, TSummaryRow>> | null;
-  /** Component to be used to filter the data of the column */
-  filterRenderer?: React.ComponentType<FilterRendererProps<TRow, any, TSummaryRow>> | null;
 }
 
 export interface CalculatedColumn<TRow, TSummaryRow = unknown> extends Column<TRow, TSummaryRow> {
@@ -186,14 +184,6 @@ export interface RowRendererProps<TRow, TSummaryRow = unknown>
   selectCell: SelectCellFn;
 }
 
-export interface FilterRendererProps<TRow, TFilterValue = unknown, TSummaryRow = unknown> {
-  column: CalculatedColumn<TRow, TSummaryRow>;
-  value: TFilterValue;
-  onChange: (value: TFilterValue) => void;
-}
-
-export type Filters = Record<string, any>;
-
 export interface RowsChangeData<R, SR = unknown> {
   indexes: number[];
   column: CalculatedColumn<R, SR>;
@@ -243,7 +233,7 @@ export type CellNavigationMode = 'NONE' | 'CHANGE_ROW' | 'LOOP_OVER_ROW';
 export type SortDirection = 'ASC' | 'DESC' | 'NONE';
 
 export type ColSpanArgs<R, SR> =
-  | { type: 'HEADER' | 'FILTER' }
+  | { type: 'HEADER' }
   | { type: 'ROW'; row: R }
   | { type: 'SUMMARY'; row: SR };