From a0ae2690aa7e815b018e5c01f06dd842e86ec602 Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Thu, 10 Oct 2019 20:49:23 +0100 Subject: [PATCH] Delete Grid component --- .../src/__tests__/Grid.spec.js | 41 +++--- packages/react-data-grid/src/Canvas.tsx | 38 ++--- packages/react-data-grid/src/Grid.tsx | 136 ----------------- packages/react-data-grid/src/Header.tsx | 38 ++--- .../react-data-grid/src/ReactDataGrid.tsx | 109 +++++++++----- .../src/__tests__/Grid.spec.js | 139 ------------------ packages/react-data-grid/style/rdg-core.less | 7 +- 7 files changed, 129 insertions(+), 379 deletions(-) delete mode 100644 packages/react-data-grid/src/Grid.tsx delete mode 100644 packages/react-data-grid/src/__tests__/Grid.spec.js diff --git a/packages/react-data-grid-addons/src/__tests__/Grid.spec.js b/packages/react-data-grid-addons/src/__tests__/Grid.spec.js index dadf1187c3..f2ded81909 100644 --- a/packages/react-data-grid-addons/src/__tests__/Grid.spec.js +++ b/packages/react-data-grid-addons/src/__tests__/Grid.spec.js @@ -42,8 +42,13 @@ describe('Grid', () => { return { wrapper, props, columns, rows }; }; - const getBaseGrid = (wrapper) => { - return wrapper.find('Grid'); + const getBaseHeader = (wrapper) => { + // console.log(wrapper.debug()); + return wrapper.find('ForwardRef(Header)'); + }; + + const getBaseCanvas = (wrapper) => { + return wrapper.find('Canvas'); }; it('should create a new instance of Grid', () => { @@ -52,21 +57,17 @@ describe('Grid', () => { }); it('should render a BaseGrid stub', () => { - expect(getBaseGrid(setup().wrapper)).toBeDefined(); + expect(getBaseCanvas(setup().wrapper)).toBeDefined(); }); // Set of tests for the props that defined the height of our rows - describe('when defininig heigths on props', () => { + describe('when defininig heights on props', () => { describe('for defaults props', () => { function innerSetup() { const { wrapper } = setup({ enableHeaderFilters: true }); - return getBaseGrid(wrapper); + return getBaseHeader(wrapper); } - it('uses the appropriate default for the grid row height', () => { - expect(innerSetup().props().rowHeight).toEqual(35); - }); - it('uses the appropriate default for the header row height', () => { expect(innerSetup().props().headerRows[0].height).toEqual(35); }); @@ -79,14 +80,10 @@ describe('Grid', () => { describe('for a given row height prop', () => { function innerSetup() { const { wrapper } = setup({ enableHeaderFilters: true, rowHeight: 40 }); - return getBaseGrid(wrapper); + return getBaseHeader(wrapper); } - it('passes the correct heigth to the grid rows', () => { - expect(innerSetup().props().rowHeight).toEqual(40); - }); - - it('passes the grid row heigth to the header row when no height to the specific header row is provided', () => { + it('passes the grid row height to the header row when no height to the specific header row is provided', () => { expect(innerSetup().props().headerRows[0].height).toEqual(40); }); @@ -103,18 +100,14 @@ describe('Grid', () => { headerRowHeight: 50, headerFiltersHeight: 60 }); - return getBaseGrid(wrapper); + return getBaseHeader(wrapper); } - it('passes the correct heigth to the grid rows', () => { - expect(innerSetup().props().rowHeight).toEqual(40); - }); - - it('passes the correct heigth to the header row', () => { + it('passes the correct height to the header row', () => { expect(innerSetup().props().headerRows[0].height).toEqual(50); }); - it('passes the correct heigth to the header filter row', () => { + it('passes the correct height to the header filter row', () => { expect(innerSetup().props().headerRows[1].height).toEqual(60); }); }); @@ -123,7 +116,7 @@ describe('Grid', () => { describe('if passed in as props to grid', () => { it('should set filter state of grid and render a filterable header row', () => { const { wrapper } = setup({ enableHeaderFilters: true }); - expect(getBaseGrid(wrapper).props().headerRows.length).toEqual(2); + expect(getBaseHeader(wrapper).props().headerRows.length).toEqual(2); }); }); @@ -156,7 +149,7 @@ describe('Grid', () => { } }); - getBaseGrid(wrapper).props().cellMetaData.onCellClick({ idx: 1, rowIdx: 1 }); + getBaseCanvas(wrapper).props().cellMetaData.onCellClick({ idx: 1, rowIdx: 1 }); expect(rowClicks).toBe(1); const { row, column } = rowClicked; expect(row).toMatchObject(rows[1]); diff --git a/packages/react-data-grid/src/Canvas.tsx b/packages/react-data-grid/src/Canvas.tsx index 0b142a654e..93d2166608 100644 --- a/packages/react-data-grid/src/Canvas.tsx +++ b/packages/react-data-grid/src/Canvas.tsx @@ -6,38 +6,40 @@ import RowGroup from './RowGroup'; import InteractionMasks from './masks/InteractionMasks'; import { getColumnScrollPosition, isPositionStickySupported, getScrollbarSize } from './utils'; import { EventTypes } from './common/enums'; -import { CalculatedColumn, Position, ScrollPosition, SubRowDetails, RowRenderer, RowRendererProps, RowData } from './common/types'; -import { GridProps } from './Grid'; +import { CalculatedColumn, Position, ScrollPosition, SubRowDetails, RowRenderer, RowRendererProps, RowData, ColumnMetrics, CellMetaData, InteractionMasksMetaData } from './common/types'; +import { ReactDataGridProps } from './ReactDataGrid'; +import EventBus from './EventBus'; import { getVerticalRangeToRender, getHorizontalRangeToRender } from './utils/viewportUtils'; -type SharedGridProps = Pick, -| 'rowKey' +type SharedDataGridProps = Pick, | 'rowGetter' | 'rowsCount' -| 'columnMetrics' -| 'selectedRows' -| 'onRowSelectionChange' | 'rowRenderer' -| 'cellMetaData' -| 'rowHeight' +| 'rowGroupRenderer' | 'scrollToRowIndex' | 'contextMenu' +| 'RowsContainer' | 'getSubRowDetails' -| 'rowGroupRenderer' +| 'selectedRows' +> & Required, +| 'rowKey' | 'enableCellSelect' -| 'enableCellAutoFocus' +| 'rowHeight' | 'cellNavigationMode' -| 'eventBus' -| 'RowsContainer' +| 'enableCellAutoFocus' | 'editorPortalTarget' -| 'interactionMasksMetaData' -| 'onCanvasKeydown' -| 'onCanvasKeyup' ->; +>>; -export interface CanvasProps extends SharedGridProps { +export interface CanvasProps extends SharedDataGridProps { + columnMetrics: ColumnMetrics; + cellMetaData: CellMetaData; height: number; + eventBus: EventBus; + interactionMasksMetaData: InteractionMasksMetaData; onScroll(position: ScrollPosition): void; + onCanvasKeydown?(e: React.KeyboardEvent): void; + onCanvasKeyup?(e: React.KeyboardEvent): void; + onRowSelectionChange(rowIdx: number, row: R, checked: boolean, isShiftClick: boolean): void; } interface RendererProps extends Pick, 'cellMetaData' | 'onRowSelectionChange'> { diff --git a/packages/react-data-grid/src/Grid.tsx b/packages/react-data-grid/src/Grid.tsx deleted file mode 100644 index 5a31e81d53..0000000000 --- a/packages/react-data-grid/src/Grid.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import React, { useRef, createElement } from 'react'; -import { isValidElementType } from 'react-is'; - -import Header, { HeaderHandle, HeaderProps } from './Header'; -import Canvas from './Canvas'; -import { HeaderRowData, CellMetaData, InteractionMasksMetaData, ColumnMetrics, ScrollPosition } from './common/types'; -import { DEFINE_SORT } from './common/enums'; -import { ReactDataGridProps } from './ReactDataGrid'; -import EventBus from './EventBus'; - -type SharedDataGridProps = Pick, -| 'draggableHeaderCell' -| 'getValidFilterValues' -| 'rowGetter' -| 'rowsCount' -| 'rowRenderer' -| 'rowGroupRenderer' -| 'scrollToRowIndex' -| 'contextMenu' -| 'onScroll' -| 'RowsContainer' -| 'emptyRowsView' -| 'onHeaderDrop' -| 'getSubRowDetails' -| 'selectedRows' -| 'onSelectedRowsChange' -| 'sortColumn' -| 'sortDirection' -> & Required, -| 'rowKey' -| 'enableCellSelect' -| 'rowHeight' -| 'minHeight' -| 'cellNavigationMode' -| 'enableCellAutoFocus' -| 'editorPortalTarget' ->>; - -export interface GridProps extends SharedDataGridProps { - columnMetrics: ColumnMetrics; - headerRows: [HeaderRowData, HeaderRowData | undefined]; - cellMetaData: CellMetaData; - rowOffsetHeight: number; - eventBus: EventBus; - interactionMasksMetaData: InteractionMasksMetaData; - onSort?(columnKey: keyof R, direction: DEFINE_SORT): void; - onCanvasKeydown?(e: React.KeyboardEvent): void; - onCanvasKeyup?(e: React.KeyboardEvent): void; - onColumnResize(idx: number, width: number): void; - onRowSelectionChange(rowIdx: number, row: R, checked: boolean, isShiftClick: boolean): void; -} - -export default function Grid({ - rowGetter, - rowKey, - rowOffsetHeight, - rowsCount, - columnMetrics, - emptyRowsView, - headerRows, - selectedRows, - ...props -}: GridProps) { - const header = useRef(null); - const scrollLeft = useRef(0); - - function onScroll(scrollPosition: ScrollPosition) { - if (header.current && scrollLeft.current !== scrollPosition.scrollLeft) { - scrollLeft.current = scrollPosition.scrollLeft; - header.current.setScrollLeft(scrollPosition.scrollLeft); - } - if (props.onScroll) { - props.onScroll(scrollPosition); - } - } - - type FullHeaderProps = HeaderProps & React.RefAttributes; - - return ( -
- { - React.createElement(Header as React.FunctionComponent, { - rowKey, - rowsCount, - ref: header, - rowGetter, - columnMetrics, - onColumnResize: props.onColumnResize, - headerRows, - rowOffsetHeight, - sortColumn: props.sortColumn, - sortDirection: props.sortDirection, - draggableHeaderCell: props.draggableHeaderCell, - onSort: props.onSort, - onHeaderDrop: props.onHeaderDrop, - allRowsSelected: selectedRows !== undefined && selectedRows.size === rowsCount, - onSelectedRowsChange: props.onSelectedRowsChange, - getValidFilterValues: props.getValidFilterValues, - cellMetaData: props.cellMetaData - }) - } - {rowsCount === 0 && isValidElementType(emptyRowsView) ? ( -
- {createElement(emptyRowsView)} -
- ) : ( - - rowKey={rowKey} - rowHeight={props.rowHeight} - rowRenderer={props.rowRenderer} - rowGetter={rowGetter} - rowsCount={rowsCount} - selectedRows={selectedRows} - onRowSelectionChange={props.onRowSelectionChange} - columnMetrics={columnMetrics} - onScroll={onScroll} - cellMetaData={props.cellMetaData} - height={props.minHeight - rowOffsetHeight} - scrollToRowIndex={props.scrollToRowIndex} - contextMenu={props.contextMenu} - getSubRowDetails={props.getSubRowDetails} - rowGroupRenderer={props.rowGroupRenderer} - enableCellSelect={props.enableCellSelect} - enableCellAutoFocus={props.enableCellAutoFocus} - cellNavigationMode={props.cellNavigationMode} - eventBus={props.eventBus} - interactionMasksMetaData={props.interactionMasksMetaData} - RowsContainer={props.RowsContainer} - editorPortalTarget={props.editorPortalTarget} - onCanvasKeydown={props.onCanvasKeydown} - onCanvasKeyup={props.onCanvasKeyup} - /> - )} -
- ); -} diff --git a/packages/react-data-grid/src/Header.tsx b/packages/react-data-grid/src/Header.tsx index 19a531baa8..3a3c020316 100644 --- a/packages/react-data-grid/src/Header.tsx +++ b/packages/react-data-grid/src/Header.tsx @@ -4,29 +4,31 @@ import classNames from 'classnames'; import HeaderRow from './HeaderRow'; import { getColumnMetrics } from './utils/columnUtils'; import { getScrollbarSize } from './utils'; -import { CalculatedColumn, HeaderRowData } from './common/types'; -import { GridProps } from './Grid'; +import { CalculatedColumn, HeaderRowData, ColumnMetrics, CellMetaData } from './common/types'; +import { DEFINE_SORT } from './common/enums'; +import { ReactDataGridProps } from './ReactDataGrid'; -type SharedGridProps = Pick, -| 'rowKey' -| 'rowsCount' +type SharedDataGridProps = Pick, +| 'draggableHeaderCell' +| 'getValidFilterValues' | 'rowGetter' -| 'columnMetrics' -| 'onColumnResize' -| 'headerRows' -| 'rowOffsetHeight' +| 'rowsCount' +| 'onHeaderDrop' +| 'onSelectedRowsChange' | 'sortColumn' | 'sortDirection' -| 'draggableHeaderCell' -| 'onSelectedRowsChange' -| 'onSort' -| 'onHeaderDrop' -| 'getValidFilterValues' -| 'cellMetaData' ->; +> & Required, +| 'rowKey' +>>; -export interface HeaderProps extends SharedGridProps { +export interface HeaderProps extends SharedDataGridProps { allRowsSelected: boolean; + columnMetrics: ColumnMetrics; + headerRows: [HeaderRowData, HeaderRowData | undefined]; + cellMetaData: CellMetaData; + rowOffsetHeight: number; + onSort?(columnKey: keyof R, direction: DEFINE_SORT): void; + onColumnResize(idx: number, width: number): void; } export interface HeaderHandle { @@ -138,4 +140,4 @@ export default forwardRef(function Header(props: HeaderProps, ref: React.R {getHeaderRows()} ); -}); +}) as (props: HeaderProps & { ref?: React.Ref }) => JSX.Element; diff --git a/packages/react-data-grid/src/ReactDataGrid.tsx b/packages/react-data-grid/src/ReactDataGrid.tsx index e646f377d5..026fd31bb1 100644 --- a/packages/react-data-grid/src/ReactDataGrid.tsx +++ b/packages/react-data-grid/src/ReactDataGrid.tsx @@ -5,10 +5,13 @@ import React, { useEffect, useLayoutEffect, useMemo, - useImperativeHandle + useImperativeHandle, + createElement } from 'react'; +import { isValidElementType } from 'react-is'; -import Grid from './Grid'; +import Header, { HeaderHandle } from './Header'; +import Canvas from './Canvas'; import { getColumnMetrics } from './utils/columnUtils'; import EventBus from './EventBus'; import { CellNavigationMode, EventTypes, UpdateActions, HeaderRowType, DEFINE_SORT } from './common/enums'; @@ -176,8 +179,10 @@ const ReactDataGridBase = forwardRef(function ReactDataGrid({ const [eventBus] = useState(() => new EventBus()); const [gridWidth, setGridWidth] = useState(0); const gridRef = useRef(null); + const headerRef = useRef(null); const lastSelectedRowIdx = useRef(-1); const viewportWidth = (width || gridWidth) - 2; // 2 for border width; + const scrollLeft = useRef(0); const columnMetrics = useMemo(() => { if (viewportWidth <= 0) return null; @@ -238,6 +243,16 @@ const ReactDataGridBase = forwardRef(function ReactDataGrid({ } } + function handleScroll(scrollPosition: ScrollPosition) { + if (headerRef.current && scrollLeft.current !== scrollPosition.scrollLeft) { + scrollLeft.current = scrollPosition.scrollLeft; + headerRef.current.setScrollLeft(scrollPosition.scrollLeft); + } + if (props.onScroll) { + props.onScroll(scrollPosition); + } + } + function handleDragEnter(overRowIdx: number) { eventBus.dispatch(EventTypes.DRAG_ENTER, overRowIdx); } @@ -389,43 +404,59 @@ const ReactDataGridBase = forwardRef(function ReactDataGrid({ ref={gridRef} > {columnMetrics && ( - - rowKey={rowKey} - headerRows={headerRows} - draggableHeaderCell={props.draggableHeaderCell} - getValidFilterValues={props.getValidFilterValues} - columnMetrics={columnMetrics} - rowGetter={rowGetter} - rowsCount={rowsCount} - rowHeight={rowHeight} - rowRenderer={props.rowRenderer} - rowGroupRenderer={props.rowGroupRenderer} - cellMetaData={cellMetaData} - selectedRows={selectedRows} - onRowSelectionChange={handleRowSelectionChange} - onSelectedRowsChange={onSelectedRowsChange} - rowOffsetHeight={rowOffsetHeight} - sortColumn={props.sortColumn} - sortDirection={props.sortDirection} - onSort={props.onGridSort} - minHeight={minHeight} - onCanvasKeydown={props.onGridKeyDown} - onCanvasKeyup={props.onGridKeyUp} - onColumnResize={handleColumnResize} - scrollToRowIndex={props.scrollToRowIndex} - contextMenu={props.contextMenu} - enableCellSelect={enableCellSelect} - enableCellAutoFocus={enableCellAutoFocus} - cellNavigationMode={cellNavigationMode} - eventBus={eventBus} - onScroll={props.onScroll} - RowsContainer={props.RowsContainer} - emptyRowsView={props.emptyRowsView} - onHeaderDrop={props.onHeaderDrop} - getSubRowDetails={props.getSubRowDetails} - editorPortalTarget={editorPortalTarget} - interactionMasksMetaData={interactionMasksMetaData} - /> + <> + + ref={headerRef} + rowKey={rowKey} + rowsCount={rowsCount} + rowGetter={rowGetter} + columnMetrics={columnMetrics} + onColumnResize={handleColumnResize} + headerRows={headerRows} + rowOffsetHeight={rowOffsetHeight} + sortColumn={props.sortColumn} + sortDirection={props.sortDirection} + draggableHeaderCell={props.draggableHeaderCell} + onSort={props.onGridSort} + onHeaderDrop={props.onHeaderDrop} + allRowsSelected={selectedRows !== undefined && selectedRows.size === rowsCount} + onSelectedRowsChange={onSelectedRowsChange} + getValidFilterValues={props.getValidFilterValues} + cellMetaData={cellMetaData} + /> + {rowsCount === 0 && isValidElementType(props.emptyRowsView) ? ( +
+ {createElement(props.emptyRowsView)} +
+ ) : ( + + rowKey={rowKey} + rowHeight={rowHeight} + rowRenderer={props.rowRenderer} + rowGetter={rowGetter} + rowsCount={rowsCount} + selectedRows={selectedRows} + onRowSelectionChange={handleRowSelectionChange} + columnMetrics={columnMetrics} + onScroll={handleScroll} + cellMetaData={cellMetaData} + height={minHeight - rowOffsetHeight} + scrollToRowIndex={props.scrollToRowIndex} + contextMenu={props.contextMenu} + getSubRowDetails={props.getSubRowDetails} + rowGroupRenderer={props.rowGroupRenderer} + enableCellSelect={enableCellSelect} + enableCellAutoFocus={enableCellAutoFocus} + cellNavigationMode={cellNavigationMode} + eventBus={eventBus} + interactionMasksMetaData={interactionMasksMetaData} + RowsContainer={props.RowsContainer} + editorPortalTarget={editorPortalTarget} + onCanvasKeydown={props.onGridKeyDown} + onCanvasKeyup={props.onGridKeyUp} + /> + )} + )} ); diff --git a/packages/react-data-grid/src/__tests__/Grid.spec.js b/packages/react-data-grid/src/__tests__/Grid.spec.js deleted file mode 100644 index 37450b9d37..0000000000 --- a/packages/react-data-grid/src/__tests__/Grid.spec.js +++ /dev/null @@ -1,139 +0,0 @@ -import React from 'react'; -import { ContextMenu } from 'react-contextmenu'; -import { shallow } from 'enzyme'; - -import Grid from '../Grid'; -import helpers, { fakeCellMetaData } from './GridPropHelpers'; - -describe('Empty Grid Tests', () => { - class EmptyRowsView extends React.Component { - render() { - return
Nothing to show
; - } - } - - const testProps = { - columnMetrics: { - columns: helpers.columns - }, - headerRows: [], - rowsCount: 0, - rowOffsetHeight: 50, - rowGetter() { - return []; - }, - minHeight: 600, - emptyRowsView: EmptyRowsView, - onViewportKeydown() {}, - onViewportDragStart() {}, - onViewportDragEnd() {}, - onViewportDoubleClick() {}, - cellMetaData: fakeCellMetaData, - rowKey: 'id', - enableCellSelect: true, - enableCellAutoFocus: true, - cellNavigationMode: 'changeRow', - eventBus: {}, - onGridRowsUpdated: () => null, - onDragHandleDoubleClick: () => null, - onCommit: () => null - }; - - it('should not have any viewport', () => { - const wrapper = shallow(); - expect(wrapper.find(EmptyRowsView).exists()); - }); -}); - -describe('Rendering Grid component', () => { - const renderComponent = (props) => { - return shallow(); - }; - - const allProperties = () => { - return { - rowGetter: jest.fn(), - columnMetrics: { - columns: helpers.columns, - width: 1200 - }, - minHeight: 500, - totalWidth: 700, - headerRows: [], - rowHeight: 50, - rowRenderer: jest.fn(), - emptyRowsView: jest.fn(), - selectedRows: jest.fn(), - rowsCount: 14, - sortColumn: 'sortColumn', - sortDirection: 'ASC', - tabIndex: -1, - rowOffsetHeight: 100, - onViewportKeydown: jest.fn(), - onViewportKeyup: jest.fn(), - onViewportDragStart: jest.fn(), - onViewportDragEnd: jest.fn(), - onViewportDoubleClick: jest.fn(), - onColumnResize: jest.fn(), - onSort: jest.fn(), - cellMetaData: { - selected: { idx: 2, rowIdx: 3 }, - dragged: null, - onCellClick: jest.fn(), - onCellContextMenu: jest.fn(), - onCellDoubleClick: jest.fn(), - onCommit: jest.fn(), - onCommitCancel: jest.fn(), - copied: null, - handleDragEnterRow: jest.fn(), - handleTerminateDrag: jest.fn() - }, - rowKey: 'rowKeyValue', - contextMenu: , - getSubRowDetails: jest.fn(), - draggableHeaderCell: jest.fn(), - getValidFilterValues: jest.fn(), - rowGroupRenderer: jest.fn(), - overScan: { key: 'value' } - }; - }; - it('passes classname property', () => { - const wrapper = renderComponent(allProperties()); - const draggableDiv = wrapper.find('div').at(0); - expect(draggableDiv.hasClass('rdg-root')); - }); - it('does not pass unknown properties to the div', () => { - const wrapper = renderComponent(allProperties()); - const draggableDiv = wrapper.find('div').at(0); - expect(draggableDiv.props().rowGetter).toBeUndefined(); - expect(draggableDiv.props().columnMetrics).toBeUndefined(); - expect(draggableDiv.props().minHeight).toBeUndefined(); - expect(draggableDiv.props().totalWidth).toBeUndefined(); - expect(draggableDiv.props().headerRows).toBeUndefined(); - expect(draggableDiv.props().rowHeight).toBeUndefined(); - expect(draggableDiv.props().rowRenderer).toBeUndefined(); - expect(draggableDiv.props().emptyRowsView).toBeUndefined(); - expect(draggableDiv.props().selectedRows).toBeUndefined(); - expect(draggableDiv.props().rowSelection).toBeUndefined(); - expect(draggableDiv.props().rowsCount).toBeUndefined(); - expect(draggableDiv.props().sortColumn).toBeUndefined(); - expect(draggableDiv.props().sortDirection).toBeUndefined(); - expect(draggableDiv.props().rowOffsetHeight).toBeUndefined(); - expect(draggableDiv.props().onViewportKeydown).toBeUndefined(); - expect(draggableDiv.props().onViewportKeyup).toBeUndefined(); - expect(draggableDiv.props().onViewportDragStart).toBeUndefined(); - expect(draggableDiv.props().onViewportDragEnd).toBeUndefined(); - expect(draggableDiv.props().onViewportDoubleClick).toBeUndefined(); - expect(draggableDiv.props().onColumnResize).toBeUndefined(); - expect(draggableDiv.props().onSort).toBeUndefined(); - expect(draggableDiv.props().cellMetaData).toBeUndefined(); - expect(draggableDiv.props().rowKey).toBeUndefined(); - expect(draggableDiv.props().contextMenu).toBeUndefined(); - expect(draggableDiv.props().getSubRowDetails).toBeUndefined(); - expect(draggableDiv.props().draggableHeaderCell).toBeUndefined(); - expect(draggableDiv.props().getValidFilterValues).toBeUndefined(); - expect(draggableDiv.props().rowGroupRenderer).toBeUndefined(); - expect(draggableDiv.props().overScan).toBeUndefined(); - expect(draggableDiv.props().tabIndex).toBeUndefined(); - }); -}); diff --git a/packages/react-data-grid/style/rdg-core.less b/packages/react-data-grid/style/rdg-core.less index 7497f47218..8e9bdeb9a6 100644 --- a/packages/react-data-grid/style/rdg-core.less +++ b/packages/react-data-grid/style/rdg-core.less @@ -5,6 +5,8 @@ // We set a stacking context so internal components don't render above external components. position: relative; z-index: 0; + border: 1px solid #ddd; + .user-select(); *, *::before, @@ -13,11 +15,6 @@ } } -.react-grid-Grid { - border: 1px solid #ddd; - .user-select(); -} - .react-grid-Canvas { position: relative; overflow-x: auto;