From d2e16ff11b4c2b1c67044fa36f50d9ff47670935 Mon Sep 17 00:00:00 2001 From: damien Date: Tue, 20 Jul 2021 18:16:16 +0200 Subject: [PATCH 01/43] isolating dataGrid --- .../_modules_/grid/models/gridOptions.tsx | 2 +- packages/grid/data-grid/src/DataGrid.tsx | 284 +++--------------- .../grid/data-grid/src/DataGridPropTypes.ts | 195 ++++++++++++ packages/grid/data-grid/src/DataGridProps.ts | 87 ++++++ packages/grid/data-grid/src/index.ts | 3 + .../data-grid/src/useDataGridComponent.tsx | 74 +++++ 6 files changed, 401 insertions(+), 244 deletions(-) create mode 100644 packages/grid/data-grid/src/DataGridPropTypes.ts create mode 100644 packages/grid/data-grid/src/DataGridProps.ts create mode 100644 packages/grid/data-grid/src/useDataGridComponent.tsx diff --git a/packages/grid/_modules_/grid/models/gridOptions.tsx b/packages/grid/_modules_/grid/models/gridOptions.tsx index e9eb1e33f8600..295e0df68dfc1 100644 --- a/packages/grid/_modules_/grid/models/gridOptions.tsx +++ b/packages/grid/_modules_/grid/models/gridOptions.tsx @@ -469,7 +469,7 @@ export interface GridOptions { /** * Set the selection model of the grid. */ - selectionModel?: GridSelectionModel; + selectionModel?: GridSelectionModel | GridRowId; /** * If `true`, the right border of the cells are displayed. * @default false diff --git a/packages/grid/data-grid/src/DataGrid.tsx b/packages/grid/data-grid/src/DataGrid.tsx index 92248fa4252d2..abfab6656b6e2 100644 --- a/packages/grid/data-grid/src/DataGrid.tsx +++ b/packages/grid/data-grid/src/DataGrid.tsx @@ -1,49 +1,18 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { chainPropTypes } from '@material-ui/utils'; -import { GridComponent, GridComponentProps, GridRowId, useThemeProps } from '../../_modules_/grid'; - -const FORCED_PROPS: Partial = { - disableColumnResize: true, - disableColumnReorder: true, - disableMultipleColumnsFiltering: true, - disableMultipleColumnsSorting: true, - disableMultipleSelection: true, - pagination: true, - apiRef: undefined, - onRowsScrollEnd: undefined, - checkboxSelectionVisibleOnly: false, -}; - -export type DataGridProps = Omit< - GridComponentProps, - | 'apiRef' - | 'checkboxSelectionVisibleOnly' - | 'disableColumnResize' - | 'disableColumnReorder' - | 'disableMultipleColumnsFiltering' - | 'disableMultipleColumnsSorting' - | 'disableMultipleSelection' - | 'licenseStatus' - | 'options' - | 'onRowsScrollEnd' - | 'pagination' - | 'scrollEndThreshold' - | 'selectionModel' -> & { - apiRef?: undefined; - checkboxSelectionVisibleOnly?: false; - disableColumnResize?: true; - disableColumnReorder?: true; - disableMultipleColumnsFiltering?: true; - disableMultipleColumnsSorting?: true; - disableMultipleSelection?: true; - onRowsScrollEnd?: undefined; - selectionModel?: GridRowId | GridRowId[]; - pagination?: true; -}; -const MAX_PAGE_SIZE = 100; +import { DataGridProps, MAX_PAGE_SIZE } from '@material-ui/data-grid/DataGridProps'; +import { DATAGRID_PROPTYPES } from '@material-ui/data-grid/DataGridPropTypes'; +import * as React from 'react'; +import { + DEFAULT_GRID_OPTIONS, + GridFooterPlaceholder, + GridHeaderPlaceholder, GridRoot, + useGridApiRef, + useThemeProps, +} from '../../_modules_/grid'; +import { GridContextProvider } from '../../_modules_/grid/context/GridContextProvider'; +import { GridBody } from '../../_modules_/grid/GridBody'; +import { useDataGridComponent } from './useDataGridComponent'; +import { GridErrorHandler } from '../../_modules_/grid/GridErrorHandler'; const DataGridRaw = React.forwardRef(function DataGrid( inProps, @@ -54,6 +23,7 @@ const DataGridRaw = React.forwardRef(function Dat let pageSize = pageSizeProp; if (pageSize && pageSize > MAX_PAGE_SIZE) { + // TODO throw error? pageSize = MAX_PAGE_SIZE; } @@ -62,208 +32,36 @@ const DataGridRaw = React.forwardRef(function Dat ? [dataGridSelectionModel] : dataGridSelectionModel; + const apiRef = useGridApiRef(); + + useDataGridComponent(apiRef, {...other, selectionModel, pageSize}); + return ( - + + + + + + + + + ); }); +DataGridRaw.defaultProps = { + ...DEFAULT_GRID_OPTIONS, + apiRef: undefined, + disableColumnResize: true, + disableColumnReorder: true, + disableMultipleColumnsFiltering: true, + disableMultipleColumnsSorting: true, + disableMultipleSelection: true, + pagination: true, + onRowsScrollEnd: undefined, + checkboxSelectionVisibleOnly: false, +}; export const DataGrid = React.memo(DataGridRaw); // @ts-ignore -DataGrid.propTypes = { - apiRef: chainPropTypes(PropTypes.any, (props: any) => { - if (props.apiRef != null) { - return new Error( - [ - `Material-UI: \`apiRef\` is not a valid prop.`, - 'GridApiRef is not available in the MIT version.', - '', - 'You need to upgrade to the XGrid component to unlock this feature.', - ].join('\n'), - ); - } - return null; - }), - checkboxSelectionVisibleOnly: chainPropTypes(PropTypes.bool, (props: any) => { - if (props.checkboxSelectionVisibleOnly === true) { - return new Error( - [ - `Material-UI: \`\` is not a valid prop.`, - 'Selecting all columns only on the current page is not available in the MIT version.', - '', - 'You need to upgrade to the XGrid component to unlock this feature.', - ].join('\n'), - ); - } - return null; - }), - columns: chainPropTypes(PropTypes.array.isRequired, (props: any) => { - if (props.columns && props.columns.some((column) => column.resizable)) { - return new Error( - [ - `Material-UI: \`column.resizable = true\` is not a valid prop.`, - 'Column resizing is not available in the MIT version.', - '', - 'You need to upgrade to the XGrid component to unlock this feature.', - ].join('\n'), - ); - } - return null; - }), - disableColumnReorder: chainPropTypes(PropTypes.bool, (props: any) => { - if (props.disableColumnReorder === false) { - return new Error( - [ - `Material-UI: \`\` is not a valid prop.`, - 'Column reordering is not available in the MIT version.', - '', - 'You need to upgrade to the XGrid component to unlock this feature.', - ].join('\n'), - ); - } - return null; - }), - disableColumnResize: chainPropTypes(PropTypes.bool, (props: any) => { - if (props.disableColumnResize === false) { - return new Error( - [ - `Material-UI: \`\` is not a valid prop.`, - 'Column resizing is not available in the MIT version.', - '', - 'You need to upgrade to the XGrid component to unlock this feature.', - ].join('\n'), - ); - } - return null; - }), - disableMultipleColumnsFiltering: chainPropTypes(PropTypes.bool, (props: any) => { - if (props.disableMultipleColumnsFiltering === false) { - return new Error( - [ - `Material-UI: \`\` is not a valid prop.`, - 'Only single column sorting is available in the MIT version.', - '', - 'You need to upgrade to the XGrid component to unlock this feature.', - ].join('\n'), - ); - } - return null; - }), - disableMultipleColumnsSorting: chainPropTypes(PropTypes.bool, (props: any) => { - if (props.disableMultipleColumnsSorting === false) { - return new Error( - [ - `Material-UI: \`\` is not a valid prop.`, - 'Only single column sorting is available in the MIT version.', - '', - 'You need to upgrade to the XGrid component to unlock this feature.', - ].join('\n'), - ); - } - return null; - }), - disableMultipleSelection: chainPropTypes(PropTypes.bool, (props: any) => { - if (props.disableMultipleSelection === false) { - return new Error( - [ - `Material-UI: \`\` is not a valid prop.`, - 'Only single column selection is available in the MIT version.', - '', - 'You need to upgrade to the XGrid component to unlock this feature.', - ].join('\n'), - ); - } - return null; - }), - filterModel: chainPropTypes(PropTypes.any, (props: any) => { - if (props.filterModel != null && props.filterModel.items.length > 1) { - return new Error( - [ - `Material-UI: \`\` is not a valid prop. \`model.items\` has more than 1 item.`, - 'Only single filter is available in the MIT version.', - '', - 'You need to upgrade to the XGrid component to unlock this feature.', - ].join('\n'), - ); - } - return null; - }), - onRowsScrollEnd: chainPropTypes(PropTypes.any, (props: any) => { - if (props.onRowsScrollEnd != null) { - return new Error( - [ - `Material-UI: \`onRowsScrollEnd\` is not a valid prop.`, - 'onRowsScrollEnd is not available in the MIT version.', - '', - 'You need to upgrade to the XGrid component to unlock this feature.', - ].join('\n'), - ); - } - return null; - }), - pageSize: chainPropTypes(PropTypes.number, (props: any) => { - if (props.pageSize && props.pageSize > MAX_PAGE_SIZE) { - return new Error( - [ - `Material-UI: \`\` is not a valid prop.`, - `Only page size below ${MAX_PAGE_SIZE} is available in the MIT version.`, - '', - 'You need to upgrade to the XGrid component to unlock this feature.', - ].join('\n'), - ); - } - return null; - }), - pagination: (props: any) => { - if (props.pagination === false) { - return new Error( - [ - 'Material-UI: `` is not a valid prop.', - 'Infinite scrolling is not available in the MIT version.', - '', - 'You need to upgrade to the XGrid component to disable the pagination.', - ].join('\n'), - ); - } - return null; - }, - rows: PropTypes.array.isRequired, - scrollEndThreshold: chainPropTypes(PropTypes.number, (props: any) => { - if (props.scrollEndThreshold) { - return new Error( - [ - `Material-UI: \`\` is not a valid prop.`, - 'scrollEndThreshold is not available in the MIT version.', - '', - 'You need to upgrade to the XGrid component to unlock this feature.', - ].join('\n'), - ); - } - return null; - }), - selectionModel: chainPropTypes( - PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]), - (props: any) => { - if (Array.isArray(props.selectionModel) && props.selectionModel.length > 1) { - return new Error( - [ - `Material-UI: \`\` is not a valid prop.`, - 'selectionModel can only be of 1 item in DataGrid.', - '', - 'You need to upgrade to the XGrid component to unlock multiple selection.', - ].join('\n'), - ); - } - return null; - }, - ), -} as any; +DataGrid.propTypes=DATAGRID_PROPTYPES; diff --git a/packages/grid/data-grid/src/DataGridPropTypes.ts b/packages/grid/data-grid/src/DataGridPropTypes.ts new file mode 100644 index 0000000000000..e232e8901641d --- /dev/null +++ b/packages/grid/data-grid/src/DataGridPropTypes.ts @@ -0,0 +1,195 @@ +import { MAX_PAGE_SIZE } from '@material-ui/data-grid/DataGridProps'; +import PropTypes from 'prop-types'; +import { chainPropTypes } from '@material-ui/utils'; + +// @ts-ignore +export const DATAGRID_PROPTYPES = { + apiRef: chainPropTypes(PropTypes.any, (props: any) => { + if (props.apiRef != null) { + return new Error( + [ + `Material-UI: \`apiRef\` is not a valid prop.`, + 'GridApiRef is not available in the MIT version.', + '', + 'You need to upgrade to the XGrid component to unlock this feature.', + ].join('\n'), + ); + } + return null; + }), + checkboxSelectionVisibleOnly: chainPropTypes(PropTypes.bool, (props: any) => { + if (props.checkboxSelectionVisibleOnly === true) { + return new Error( + [ + `Material-UI: \`\` is not a valid prop.`, + 'Selecting all columns only on the current page is not available in the MIT version.', + '', + 'You need to upgrade to the XGrid component to unlock this feature.', + ].join('\n'), + ); + } + return null; + }), + columns: chainPropTypes(PropTypes.array.isRequired, (props: any) => { + if (props.columns && props.columns.some((column) => column.resizable)) { + return new Error( + [ + `Material-UI: \`column.resizable = true\` is not a valid prop.`, + 'Column resizing is not available in the MIT version.', + '', + 'You need to upgrade to the XGrid component to unlock this feature.', + ].join('\n'), + ); + } + return null; + }), + disableColumnReorder: chainPropTypes(PropTypes.bool, (props: any) => { + if (props.disableColumnReorder === false) { + return new Error( + [ + `Material-UI: \`\` is not a valid prop.`, + 'Column reordering is not available in the MIT version.', + '', + 'You need to upgrade to the XGrid component to unlock this feature.', + ].join('\n'), + ); + } + return null; + }), + disableColumnResize: chainPropTypes(PropTypes.bool, (props: any) => { + if (props.disableColumnResize === false) { + return new Error( + [ + `Material-UI: \`\` is not a valid prop.`, + 'Column resizing is not available in the MIT version.', + '', + 'You need to upgrade to the XGrid component to unlock this feature.', + ].join('\n'), + ); + } + return null; + }), + disableMultipleColumnsFiltering: chainPropTypes(PropTypes.bool, (props: any) => { + if (props.disableMultipleColumnsFiltering === false) { + return new Error( + [ + `Material-UI: \`\` is not a valid prop.`, + 'Only single column sorting is available in the MIT version.', + '', + 'You need to upgrade to the XGrid component to unlock this feature.', + ].join('\n'), + ); + } + return null; + }), + disableMultipleColumnsSorting: chainPropTypes(PropTypes.bool, (props: any) => { + if (props.disableMultipleColumnsSorting === false) { + return new Error( + [ + `Material-UI: \`\` is not a valid prop.`, + 'Only single column sorting is available in the MIT version.', + '', + 'You need to upgrade to the XGrid component to unlock this feature.', + ].join('\n'), + ); + } + return null; + }), + disableMultipleSelection: chainPropTypes(PropTypes.bool, (props: any) => { + if (props.disableMultipleSelection === false) { + return new Error( + [ + `Material-UI: \`\` is not a valid prop.`, + 'Only single column selection is available in the MIT version.', + '', + 'You need to upgrade to the XGrid component to unlock this feature.', + ].join('\n'), + ); + } + return null; + }), + filterModel: chainPropTypes(PropTypes.any, (props: any) => { + if (props.filterModel != null && props.filterModel.items.length > 1) { + return new Error( + [ + `Material-UI: \`\` is not a valid prop. \`model.items\` has more than 1 item.`, + 'Only single filter is available in the MIT version.', + '', + 'You need to upgrade to the XGrid component to unlock this feature.', + ].join('\n'), + ); + } + return null; + }), + onRowsScrollEnd: chainPropTypes(PropTypes.any, (props: any) => { + if (props.onRowsScrollEnd != null) { + return new Error( + [ + `Material-UI: \`onRowsScrollEnd\` is not a valid prop.`, + 'onRowsScrollEnd is not available in the MIT version.', + '', + 'You need to upgrade to the XGrid component to unlock this feature.', + ].join('\n'), + ); + } + return null; + }), + pageSize: chainPropTypes(PropTypes.number, (props: any) => { + if (props.pageSize && props.pageSize > MAX_PAGE_SIZE) { + return new Error( + [ + `Material-UI: \`\` is not a valid prop.`, + `Only page size below ${MAX_PAGE_SIZE} is available in the MIT version.`, + '', + 'You need to upgrade to the XGrid component to unlock this feature.', + ].join('\n'), + ); + } + return null; + }), + pagination: (props: any) => { + if (props.pagination === false) { + return new Error( + [ + 'Material-UI: `` is not a valid prop.', + 'Infinite scrolling is not available in the MIT version.', + '', + 'You need to upgrade to the XGrid component to disable the pagination.', + ].join('\n'), + ); + } + return null; + }, + rows: PropTypes.array.isRequired, + scrollEndThreshold: chainPropTypes(PropTypes.number, (props: any) => { + if (props.scrollEndThreshold) { + return new Error( + [ + `Material-UI: \`\` is not a valid prop.`, + 'scrollEndThreshold is not available in the MIT version.', + '', + 'You need to upgrade to the XGrid component to unlock this feature.', + ].join('\n'), + ); + } + return null; + }), + selectionModel: chainPropTypes( + PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]), + (props: any) => { + if (Array.isArray(props.selectionModel) && props.selectionModel.length > 1) { + return new Error( + [ + `Material-UI: \`\` is not a valid prop.`, + 'selectionModel can only be of 1 item in DataGrid.', + '', + 'You need to upgrade to the XGrid component to unlock multiple selection.', + ].join('\n'), + ); + } + return null; + }, + ), +} as any; diff --git a/packages/grid/data-grid/src/DataGridProps.ts b/packages/grid/data-grid/src/DataGridProps.ts new file mode 100644 index 0000000000000..b2266ce3c3bef --- /dev/null +++ b/packages/grid/data-grid/src/DataGridProps.ts @@ -0,0 +1,87 @@ +import { GridOptionsProp } from '../../_modules_/grid/GridComponentProps'; +import { GridState } from '../../_modules_/grid/hooks/features/core/gridState'; +import { GridColumns } from '../../_modules_/grid/models/colDef/gridColDef'; +import { GridRowId, GridRowIdGetter, GridRowsProp } from '../../_modules_/grid/models/gridRows'; +import { GridSlotsComponent } from '../../_modules_/grid/models/gridSlotsComponent'; +import { GridSlotsComponentsProps } from '../../_modules_/grid/models/gridSlotsComponentsProps'; +import { GridStateChangeParams } from '../../_modules_/grid/models/params/gridStateChangeParams'; + +export const MAX_PAGE_SIZE = 100; + +/** + * The grid component react props interface. + */ +export interface DataGridProps extends GridOptionsProp { + /** + * The label of the grid. + */ + 'aria-label'?: string; + /** + * The id of the element containing a label for the grid. + */ + 'aria-labelledby'?: string; + /** + * @ignore + */ + className?: string; + /** + * Set of columns of type [[GridColumns]]. + */ + columns: GridColumns; + /** + * Overrideable components. + */ + components?: GridSlotsComponent; + /** + * Overrideable components props dynamically passed to the component at rendering. + */ + componentsProps?: GridSlotsComponentsProps; + /** + * An error that will turn the grid into its error state and display the error component. + */ + error?: any; + /** + * Return the id of a given [[GridRowData]]. + */ + getRowId?: GridRowIdGetter; + /** + * @internal enum + */ + licenseStatus: string; + /** + * If `true`, a loading overlay is displayed. + */ + loading?: boolean; + /** + * Nonce of the inline styles for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute). + */ + nonce?: string; + /** + * Set a callback fired when the state of the grid is updated. + */ + onStateChange?: (params: GridStateChangeParams) => void; // We are overriding the handler in GridOptions to fix the params type and avoid the cycle dependency + /** + * Set of rows of type [[GridRowsProp]]. + */ + rows: GridRowsProp; + /** + * Set the whole state of the grid. + */ + state?: Partial; + /** + * @ignore + */ + style?: React.CSSProperties; + + apiRef: undefined; + disableColumnResize: true; + disableColumnReorder: true; + disableMultipleColumnsFiltering: true; + disableMultipleColumnsSorting: true; + disableMultipleSelection: true; + pagination: true; + onRowsScrollEnd: undefined; + checkboxSelectionVisibleOnly: false; + selectionModel?: GridRowId | GridRowId[]; + +} diff --git a/packages/grid/data-grid/src/index.ts b/packages/grid/data-grid/src/index.ts index e617d7e7cf84c..f4309db11beea 100644 --- a/packages/grid/data-grid/src/index.ts +++ b/packages/grid/data-grid/src/index.ts @@ -1,2 +1,5 @@ export * from '../../_modules_'; export * from './DataGrid'; +export * from './DataGridProps'; +export * from './DataGridPropTypes'; +export * from './useDataGridComponent'; diff --git a/packages/grid/data-grid/src/useDataGridComponent.tsx b/packages/grid/data-grid/src/useDataGridComponent.tsx new file mode 100644 index 0000000000000..2f44323c4ae3b --- /dev/null +++ b/packages/grid/data-grid/src/useDataGridComponent.tsx @@ -0,0 +1,74 @@ +import { GridComponentProps } from '../../_modules_/grid/GridComponentProps'; +import { useGridClipboard } from '../../_modules_/grid/hooks/features/clipboard/useGridClipboard'; +import { useGridColumnMenu } from '../../_modules_/grid/hooks/features/columnMenu/useGridColumnMenu'; +import { useGridColumnReorder } from '../../_modules_/grid/hooks/features/columnReorder/useGridColumnReorder'; +import { useGridColumnResize } from '../../_modules_/grid/hooks/features/columnResize/useGridColumnResize'; +import { useGridColumns } from '../../_modules_/grid/hooks/features/columns/useGridColumns'; +import { useGridControlState } from '../../_modules_/grid/hooks/features/core/useGridControlState'; +import { useGridDensity } from '../../_modules_/grid/hooks/features/density/useGridDensity'; +import { useGridCsvExport } from '../../_modules_/grid/hooks/features/export/useGridCsvExport'; +import { useGridFilter } from '../../_modules_/grid/hooks/features/filter/useGridFilter'; +import { useGridFocus } from '../../_modules_/grid/hooks/features/focus/useGridFocus'; +import { useGridInfiniteLoader } from '../../_modules_/grid/hooks/features/infiniteLoader/useGridInfiniteLoader'; +import { useGridKeyboard } from '../../_modules_/grid/hooks/features/keyboard/useGridKeyboard'; +import { useGridKeyboardNavigation } from '../../_modules_/grid/hooks/features/keyboard/useGridKeyboardNavigation'; +import { useLocaleText } from '../../_modules_/grid/hooks/features/localeText/useLocaleText'; +import { useGridPagination } from '../../_modules_/grid/hooks/features/pagination/useGridPagination'; +import { useGridPreferencesPanel } from '../../_modules_/grid/hooks/features/preferencesPanel/useGridPreferencesPanel'; +import { useGridEditRows } from '../../_modules_/grid/hooks/features/rows/useGridEditRows'; +import { useGridFreezeRows } from '../../_modules_/grid/hooks/features/rows/useGridFreezeRows'; +import { useGridParamsApi } from '../../_modules_/grid/hooks/features/rows/useGridParamsApi'; +import { useGridRows } from '../../_modules_/grid/hooks/features/rows/useGridRows'; +import { useGridSelection } from '../../_modules_/grid/hooks/features/selection/useGridSelection'; +import { useGridSorting } from '../../_modules_/grid/hooks/features/sorting/useGridSorting'; +import { useGridComponents } from '../../_modules_/grid/hooks/features/useGridComponents'; +import { useGridVirtualRows } from '../../_modules_/grid/hooks/features/virtualization/useGridVirtualRows'; +import { useApi } from '../../_modules_/grid/hooks/root/useApi'; +import { useEvents } from '../../_modules_/grid/hooks/root/useEvents'; +import { useGridContainerProps } from '../../_modules_/grid/hooks/root/useGridContainerProps'; +import { useErrorHandler } from '../../_modules_/grid/hooks/utils/useErrorHandler'; +import { useGridScrollbarSizeDetector } from '../../_modules_/grid/hooks/utils/useGridScrollbarSizeDetector'; +import { useLoggerFactory } from '../../_modules_/grid/hooks/utils/useLogger'; +import { useOptionsProp } from '../../_modules_/grid/hooks/utils/useOptionsProp'; +import { useRenderInfoLog } from '../../_modules_/grid/hooks/utils/useRenderInfoLog'; +import { useResizeContainer } from '../../_modules_/grid/hooks/utils/useResizeContainer'; +import { useStateProp } from '../../_modules_/grid/hooks/utils/useStateProp'; +import { GridApiRef } from '../../_modules_/grid/models/api/gridApiRef'; + + +export const useDataGridComponent = (apiRef: GridApiRef, props: GridComponentProps) => { + useLoggerFactory(apiRef, props); + useApi(apiRef); + useErrorHandler(apiRef, props); + useGridControlState(apiRef); + useGridScrollbarSizeDetector(apiRef, props); + useOptionsProp(apiRef, props); + useEvents(apiRef); + useLocaleText(apiRef); + useResizeContainer(apiRef, props); + useGridFreezeRows(apiRef, props); + useGridColumns(apiRef, props); + useGridParamsApi(apiRef); + useGridRows(apiRef, props); + useGridEditRows(apiRef); + useGridFocus(apiRef, props); + useGridKeyboard(apiRef); + useGridKeyboardNavigation(apiRef); + useGridSelection(apiRef, props); + useGridSorting(apiRef, props); + useGridColumnMenu(apiRef); + useGridPreferencesPanel(apiRef); + useGridFilter(apiRef, props); + useGridContainerProps(apiRef); + useGridDensity(apiRef); + useGridVirtualRows(apiRef); + useGridColumnReorder(apiRef); + useGridColumnResize(apiRef); + useGridPagination(apiRef); + useGridCsvExport(apiRef); + useGridInfiniteLoader(apiRef); + useGridClipboard(apiRef); + useGridComponents(apiRef, props); + useStateProp(apiRef, props); + useRenderInfoLog(apiRef); +}; From 3baddcfcbadc86f5e320c9c1d770ac84070caa62 Mon Sep 17 00:00:00 2001 From: damien Date: Wed, 21 Jul 2021 18:26:19 +0200 Subject: [PATCH 02/43] splitting xgrid and data-grid --- ...nentProps.ts => GridBaseComponentProps.ts} | 2 +- .../grid/_modules_/grid/GridComponent.tsx | 38 ---------- .../grid/{ => components/base}/GridBody.tsx | 22 +++--- .../base}/GridErrorHandler.tsx | 12 +-- .../base}/GridFooterPlaceholder.tsx | 4 +- .../base}/GridHeaderPlaceholder.tsx | 4 +- .../{ => components/base}/GridOverlays.tsx | 10 +-- .../_modules_/grid/components/base/index.ts | 5 ++ .../grid/_modules_/grid/components/index.ts | 1 + .../grid/context/GridRootPropsContext.ts | 4 +- .../columnResize/useGridColumnResize.tsx | 4 +- .../hooks/features/columns/useGridColumns.ts | 4 +- .../hooks/features/filter/useGridFilter.ts | 4 +- .../grid/hooks/features/focus/useGridFocus.ts | 4 +- .../infiniteLoader/useGridInfiniteLoader.ts | 4 +- .../hooks/features/rows/useGridEditRows.ts | 4 +- .../grid/hooks/features/rows/useGridRows.ts | 4 +- .../features/selection/useGridSelection.ts | 4 +- .../hooks/features/sorting/useGridSorting.ts | 4 +- .../_modules_/grid/hooks/root/useEvents.ts | 4 +- .../utils/useGridScrollbarSizeDetector.tsx | 4 +- .../grid/hooks/utils/useOptionsProp.ts | 4 +- .../grid/hooks/utils/useResizeContainer.ts | 4 +- packages/grid/_modules_/grid/index.ts | 6 +- .../grid/_modules_/grid/useGridComponent.tsx | 73 ------------------ packages/grid/data-grid/src/DataGrid.tsx | 5 +- packages/grid/data-grid/src/DataGridProps.ts | 72 +----------------- .../data-grid/src/useDataGridComponent.tsx | 13 ++-- packages/grid/x-grid/src/XGrid.tsx | 36 +++++++-- .../x-grid/src/tests/columns.XGrid.test.tsx | 4 +- .../x-grid/src/tests/editRows.XGrid.test.tsx | 6 +- .../x-grid/src/tests/filtering.XGrid.test.tsx | 6 +- .../grid/x-grid/src/tests/rows.XGrid.test.tsx | 4 +- .../x-grid/src/tests/selection.XGrid.test.tsx | 10 +-- .../x-grid/src/tests/sorting.XGrid.test.tsx | 6 +- .../grid/x-grid/src/useXGridComponent.tsx | 75 +++++++++++++++++++ .../src/stories/grid-data.stories.tsx | 4 +- 37 files changed, 198 insertions(+), 276 deletions(-) rename packages/grid/_modules_/grid/{GridComponentProps.ts => GridBaseComponentProps.ts} (97%) delete mode 100644 packages/grid/_modules_/grid/GridComponent.tsx rename packages/grid/_modules_/grid/{ => components/base}/GridBody.tsx (66%) rename packages/grid/_modules_/grid/{ => components/base}/GridErrorHandler.tsx (65%) rename packages/grid/_modules_/grid/{ => components/base}/GridFooterPlaceholder.tsx (75%) rename packages/grid/_modules_/grid/{ => components/base}/GridHeaderPlaceholder.tsx (73%) rename packages/grid/_modules_/grid/{ => components/base}/GridOverlays.tsx (70%) create mode 100644 packages/grid/_modules_/grid/components/base/index.ts delete mode 100644 packages/grid/_modules_/grid/useGridComponent.tsx create mode 100644 packages/grid/x-grid/src/useXGridComponent.tsx diff --git a/packages/grid/_modules_/grid/GridComponentProps.ts b/packages/grid/_modules_/grid/GridBaseComponentProps.ts similarity index 97% rename from packages/grid/_modules_/grid/GridComponentProps.ts rename to packages/grid/_modules_/grid/GridBaseComponentProps.ts index d6457fbfba777..7107c0c07686c 100644 --- a/packages/grid/_modules_/grid/GridComponentProps.ts +++ b/packages/grid/_modules_/grid/GridBaseComponentProps.ts @@ -15,7 +15,7 @@ export type GridOptionsProp = Partial; /** * The grid component react props interface. */ -export interface GridComponentProps extends GridOptionsProp { +export interface GridBaseComponentProps extends GridOptionsProp { /** * The ref object that allows grid manipulation. Can be instantiated with [[useGridApiRef()]]. */ diff --git a/packages/grid/_modules_/grid/GridComponent.tsx b/packages/grid/_modules_/grid/GridComponent.tsx deleted file mode 100644 index 27c38ab215e83..0000000000000 --- a/packages/grid/_modules_/grid/GridComponent.tsx +++ /dev/null @@ -1,38 +0,0 @@ -/** - * Data Grid component implementing [[GridComponentProps]]. - * @returns JSX.Element - */ -import * as React from 'react'; -import { GridRoot } from './components/containers/GridRoot'; -import { GridContextProvider } from './context/GridContextProvider'; -import { GridErrorHandler } from './GridErrorHandler'; -import { GridBody } from './GridBody'; -import { GridComponentProps } from './GridComponentProps'; -import { GridFooterPlaceholder } from './GridFooterPlaceholder'; -import { GridHeaderPlaceholder } from './GridHeaderPlaceholder'; -import { useGridApiRef } from './hooks/features/useGridApiRef'; -import { DEFAULT_GRID_OPTIONS } from './models/gridOptions'; -import { useGridComponent } from './useGridComponent'; - -// TODO recompose the api type -// register new api method -export const GridComponent = React.forwardRef( - function GridComponent(props, ref) { - const apiRef = useGridApiRef(props.apiRef); - - useGridComponent(apiRef, props); - - return ( - - - - - - - - - - ); - }, -); -GridComponent.defaultProps = DEFAULT_GRID_OPTIONS; diff --git a/packages/grid/_modules_/grid/GridBody.tsx b/packages/grid/_modules_/grid/components/base/GridBody.tsx similarity index 66% rename from packages/grid/_modules_/grid/GridBody.tsx rename to packages/grid/_modules_/grid/components/base/GridBody.tsx index 0853b0327d6b3..8fb0800006da2 100644 --- a/packages/grid/_modules_/grid/GridBody.tsx +++ b/packages/grid/_modules_/grid/components/base/GridBody.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; -import { GridColumnsHeader } from './components/columnHeaders/GridColumnHeaders'; -import { GridColumnsContainer } from './components/containers/GridColumnsContainer'; -import { GridMainContainer } from './components/containers/GridMainContainer'; -import { GridWindow } from './components/containers/GridWindow'; -import { useGridApiContext } from './hooks/root/useGridApiContext'; -import { GridAutoSizer } from './components/GridAutoSizer'; -import { GridViewport } from './components/GridViewport'; -import { Watermark } from './components/Watermark'; -import { GRID_RESIZE } from './constants/eventsConstants'; -import { GridRootPropsContext } from './context/GridRootPropsContext'; +import { GRID_RESIZE } from '../../constants/eventsConstants'; +import { GridRootPropsContext } from '../../context/GridRootPropsContext'; +import { useGridApiContext } from '../../hooks/root/useGridApiContext'; +import { ElementSize } from '../../models/elementSize'; +import { GridColumnsHeader } from '../columnHeaders/GridColumnHeaders'; +import { GridColumnsContainer } from '../containers/GridColumnsContainer'; +import { GridMainContainer } from '../containers/GridMainContainer'; +import { GridWindow } from '../containers/GridWindow'; +import { GridAutoSizer } from '../GridAutoSizer'; +import { GridViewport } from '../GridViewport'; +import { Watermark } from '../Watermark'; import { GridOverlays } from './GridOverlays'; -import { ElementSize } from './models/elementSize'; export function GridBody() { const apiRef = useGridApiContext(); diff --git a/packages/grid/_modules_/grid/GridErrorHandler.tsx b/packages/grid/_modules_/grid/components/base/GridErrorHandler.tsx similarity index 65% rename from packages/grid/_modules_/grid/GridErrorHandler.tsx rename to packages/grid/_modules_/grid/components/base/GridErrorHandler.tsx index e148bbc4f968b..84448dbb13a90 100644 --- a/packages/grid/_modules_/grid/GridErrorHandler.tsx +++ b/packages/grid/_modules_/grid/components/base/GridErrorHandler.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import { GridMainContainer } from './components/containers/GridMainContainer'; -import { ErrorBoundary } from './components/ErrorBoundary'; -import { useGridApiContext } from './hooks/root/useGridApiContext'; -import { GridRootPropsContext } from './context/GridRootPropsContext'; -import { useGridState } from './hooks/features/core/useGridState'; -import { useLogger } from './hooks/utils/useLogger'; +import { GridRootPropsContext } from '../../context/GridRootPropsContext'; +import { useGridState } from '../../hooks/features/core/useGridState'; +import { useGridApiContext } from '../../hooks/root/useGridApiContext'; +import { useLogger } from '../../hooks/utils/useLogger'; +import { GridMainContainer } from '../containers/GridMainContainer'; +import { ErrorBoundary } from '../ErrorBoundary'; export function GridErrorHandler(props) { const { children } = props; diff --git a/packages/grid/_modules_/grid/GridFooterPlaceholder.tsx b/packages/grid/_modules_/grid/components/base/GridFooterPlaceholder.tsx similarity index 75% rename from packages/grid/_modules_/grid/GridFooterPlaceholder.tsx rename to packages/grid/_modules_/grid/components/base/GridFooterPlaceholder.tsx index 59d5355a00910..f37c16d5bbf4a 100644 --- a/packages/grid/_modules_/grid/GridFooterPlaceholder.tsx +++ b/packages/grid/_modules_/grid/components/base/GridFooterPlaceholder.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { useGridApiContext } from './hooks/root/useGridApiContext'; -import { GridRootPropsContext } from './context/GridRootPropsContext'; +import { GridRootPropsContext } from '../../context/GridRootPropsContext'; +import { useGridApiContext } from '../../hooks/root/useGridApiContext'; export function GridFooterPlaceholder() { const apiRef = useGridApiContext(); diff --git a/packages/grid/_modules_/grid/GridHeaderPlaceholder.tsx b/packages/grid/_modules_/grid/components/base/GridHeaderPlaceholder.tsx similarity index 73% rename from packages/grid/_modules_/grid/GridHeaderPlaceholder.tsx rename to packages/grid/_modules_/grid/components/base/GridHeaderPlaceholder.tsx index d1dacd5aa9655..db21186709b5b 100644 --- a/packages/grid/_modules_/grid/GridHeaderPlaceholder.tsx +++ b/packages/grid/_modules_/grid/components/base/GridHeaderPlaceholder.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { useGridApiContext } from './hooks/root/useGridApiContext'; -import { GridRootPropsContext } from './context/GridRootPropsContext'; +import { GridRootPropsContext } from '../../context/GridRootPropsContext'; +import { useGridApiContext } from '../../hooks/root/useGridApiContext'; export function GridHeaderPlaceholder() { const apiRef = useGridApiContext(); diff --git a/packages/grid/_modules_/grid/GridOverlays.tsx b/packages/grid/_modules_/grid/components/base/GridOverlays.tsx similarity index 70% rename from packages/grid/_modules_/grid/GridOverlays.tsx rename to packages/grid/_modules_/grid/components/base/GridOverlays.tsx index 49cd5cf5c0fb3..8bec5cbf56afd 100644 --- a/packages/grid/_modules_/grid/GridOverlays.tsx +++ b/packages/grid/_modules_/grid/components/base/GridOverlays.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import { useGridApiContext } from './hooks/root/useGridApiContext'; -import { GridRootPropsContext } from './context/GridRootPropsContext'; -import { useGridSelector } from './hooks/features/core/useGridSelector'; -import { visibleGridRowCountSelector } from './hooks/features/filter/gridFilterSelector'; -import { gridRowCountSelector } from './hooks/features/rows/gridRowsSelector'; +import { GridRootPropsContext } from '../../context/GridRootPropsContext'; +import { useGridSelector } from '../../hooks/features/core/useGridSelector'; +import { visibleGridRowCountSelector } from '../../hooks/features/filter/gridFilterSelector'; +import { gridRowCountSelector } from '../../hooks/features/rows/gridRowsSelector'; +import { useGridApiContext } from '../../hooks/root/useGridApiContext'; export function GridOverlays() { const apiRef = useGridApiContext(); diff --git a/packages/grid/_modules_/grid/components/base/index.ts b/packages/grid/_modules_/grid/components/base/index.ts new file mode 100644 index 0000000000000..5cd26e94f0d89 --- /dev/null +++ b/packages/grid/_modules_/grid/components/base/index.ts @@ -0,0 +1,5 @@ +export * from './GridBody'; +export * from './GridErrorHandler'; +export * from './GridFooterPlaceholder'; +export * from './GridHeaderPlaceholder'; +export * from './GridOverlays'; diff --git a/packages/grid/_modules_/grid/components/index.ts b/packages/grid/_modules_/grid/components/index.ts index 02c3b686fc509..1c3da03bd9052 100644 --- a/packages/grid/_modules_/grid/components/index.ts +++ b/packages/grid/_modules_/grid/components/index.ts @@ -1,3 +1,4 @@ +export * from './base'; export * from './cell'; export * from './containers'; export * from './columnHeaders'; diff --git a/packages/grid/_modules_/grid/context/GridRootPropsContext.ts b/packages/grid/_modules_/grid/context/GridRootPropsContext.ts index 9ca299e52a193..8c202f2701164 100644 --- a/packages/grid/_modules_/grid/context/GridRootPropsContext.ts +++ b/packages/grid/_modules_/grid/context/GridRootPropsContext.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import { GridComponentProps } from '../GridComponentProps'; +import { GridBaseComponentProps } from '../GridBaseComponentProps'; -const GridRootPropsContext = React.createContext(undefined); +const GridRootPropsContext = React.createContext(undefined); if (process.env.NODE_ENV !== 'production') { GridRootPropsContext.displayName = 'GridRootPropsContext'; diff --git a/packages/grid/_modules_/grid/hooks/features/columnResize/useGridColumnResize.tsx b/packages/grid/_modules_/grid/hooks/features/columnResize/useGridColumnResize.tsx index 9fdc0b0d75a05..91eac712808ad 100644 --- a/packages/grid/_modules_/grid/hooks/features/columnResize/useGridColumnResize.tsx +++ b/packages/grid/_modules_/grid/hooks/features/columnResize/useGridColumnResize.tsx @@ -24,7 +24,7 @@ import { GridApiRef, CursorCoordinates, GridColumnHeaderParams } from '../../../ import { useGridApiEventHandler, useGridApiOptionHandler } from '../../root/useGridApiEventHandler'; import { useGridState } from '../core/useGridState'; import { useNativeEventListener } from '../../root/useNativeEventListener'; -import { GridComponentProps } from '../../../GridComponentProps'; +import { GridBaseComponentProps } from '../../../GridBaseComponentProps'; let cachedSupportsTouchActionNone = false; @@ -73,7 +73,7 @@ function trackFinger(event, currentTouchId): CursorCoordinates | boolean { // TODO improve experience for last column export const useGridColumnResize = ( apiRef: GridApiRef, - props: Pick, + props: Pick, ) => { const logger = useLogger('useGridColumnResize'); const [, setGridState, forceUpdate] = useGridState(apiRef); diff --git a/packages/grid/_modules_/grid/hooks/features/columns/useGridColumns.ts b/packages/grid/_modules_/grid/hooks/features/columns/useGridColumns.ts index 40b088e0bf51c..f6189bbdd8987 100644 --- a/packages/grid/_modules_/grid/hooks/features/columns/useGridColumns.ts +++ b/packages/grid/_modules_/grid/hooks/features/columns/useGridColumns.ts @@ -34,7 +34,7 @@ import { } from './gridColumnsSelector'; import { useGridApiOptionHandler } from '../../root/useGridApiEventHandler'; import { GRID_STRING_COL_DEF } from '../../../models/colDef/gridStringColDef'; -import { GridComponentProps } from '../../../GridComponentProps'; +import { GridBaseComponentProps } from '../../../GridBaseComponentProps'; function updateColumnsWidth(columns: GridColumns, viewportWidth: number): GridColumns { const numberOfFluidColumns = columns.filter((column) => !!column.flex && !column.hide).length; @@ -139,7 +139,7 @@ const upsertColumnsState = ( export function useGridColumns( apiRef: GridApiRef, - props: Pick, + props: Pick, ): void { const logger = useLogger('useGridColumns'); const [gridState, setGridState, forceUpdate] = useGridState(apiRef); diff --git a/packages/grid/_modules_/grid/hooks/features/filter/useGridFilter.ts b/packages/grid/_modules_/grid/hooks/features/filter/useGridFilter.ts index 4b452b97e4817..bb30fed6f2a04 100644 --- a/packages/grid/_modules_/grid/hooks/features/filter/useGridFilter.ts +++ b/packages/grid/_modules_/grid/hooks/features/filter/useGridFilter.ts @@ -5,7 +5,7 @@ import { GRID_ROWS_SET, GRID_ROWS_UPDATE, } from '../../../constants/eventsConstants'; -import { GridComponentProps } from '../../../GridComponentProps'; +import { GridBaseComponentProps } from '../../../GridBaseComponentProps'; import { GridApiRef } from '../../../models/api/gridApiRef'; import { GridFilterApi } from '../../../models/api/gridFilterApi'; import { GridFeatureModeConstant } from '../../../models/gridFeatureMode'; @@ -31,7 +31,7 @@ import { getInitialVisibleGridRowsState } from './visibleGridRowsState'; export const useGridFilter = ( apiRef: GridApiRef, - props: Pick, + props: Pick, ): void => { const logger = useLogger('useGridFilter'); const [gridState, setGridState, forceUpdate] = useGridState(apiRef); diff --git a/packages/grid/_modules_/grid/hooks/features/focus/useGridFocus.ts b/packages/grid/_modules_/grid/hooks/features/focus/useGridFocus.ts index e48416de0db1e..da5445be102ed 100644 --- a/packages/grid/_modules_/grid/hooks/features/focus/useGridFocus.ts +++ b/packages/grid/_modules_/grid/hooks/features/focus/useGridFocus.ts @@ -17,9 +17,9 @@ import { useGridApiMethod } from '../../root/useGridApiMethod'; import { useGridState } from '../core/useGridState'; import { useLogger } from '../../utils/useLogger'; import { useGridApiEventHandler } from '../../root/useGridApiEventHandler'; -import { GridComponentProps } from '../../../GridComponentProps'; +import { GridBaseComponentProps } from '../../../GridBaseComponentProps'; -export const useGridFocus = (apiRef: GridApiRef, props: Pick): void => { +export const useGridFocus = (apiRef: GridApiRef, props: Pick): void => { const logger = useLogger('useGridFocus'); const [, setGridState, forceUpdate] = useGridState(apiRef); const insideFocusedCell = React.useRef(false); diff --git a/packages/grid/_modules_/grid/hooks/features/infiniteLoader/useGridInfiniteLoader.ts b/packages/grid/_modules_/grid/hooks/features/infiniteLoader/useGridInfiniteLoader.ts index fc409ffe7bdf5..a70a0a8205c8b 100644 --- a/packages/grid/_modules_/grid/hooks/features/infiniteLoader/useGridInfiniteLoader.ts +++ b/packages/grid/_modules_/grid/hooks/features/infiniteLoader/useGridInfiniteLoader.ts @@ -7,11 +7,11 @@ import { gridContainerSizesSelector } from '../../root/gridContainerSizesSelecto import { useGridApiEventHandler, useGridApiOptionHandler } from '../../root/useGridApiEventHandler'; import { GridRowScrollEndParams } from '../../../models/params/gridRowScrollEndParams'; import { visibleGridColumnsSelector } from '../columns/gridColumnsSelector'; -import { GridComponentProps } from '../../../GridComponentProps'; +import { GridBaseComponentProps } from '../../../GridBaseComponentProps'; export const useGridInfiniteLoader = ( apiRef: GridApiRef, - props: Pick, + props: Pick, ): void => { const options = useGridSelector(apiRef, optionsSelector); const containerSizes = useGridSelector(apiRef, gridContainerSizesSelector); diff --git a/packages/grid/_modules_/grid/hooks/features/rows/useGridEditRows.ts b/packages/grid/_modules_/grid/hooks/features/rows/useGridEditRows.ts index 52cfb55a700dd..8eee5001287ed 100644 --- a/packages/grid/_modules_/grid/hooks/features/rows/useGridEditRows.ts +++ b/packages/grid/_modules_/grid/hooks/features/rows/useGridEditRows.ts @@ -42,12 +42,12 @@ import { useEventCallback } from '../../../utils/material-ui-utils'; import { useLogger } from '../../utils/useLogger'; import { useGridSelector } from '../core/useGridSelector'; import { useGridState } from '../core/useGridState'; -import { GridComponentProps } from '../../../GridComponentProps'; +import { GridBaseComponentProps } from '../../../GridBaseComponentProps'; export function useGridEditRows( apiRef: GridApiRef, props: Pick< - GridComponentProps, + GridBaseComponentProps, | 'onEditCellChangeCommitted' | 'onEditCellChange' | 'onCellValueChange' diff --git a/packages/grid/_modules_/grid/hooks/features/rows/useGridRows.ts b/packages/grid/_modules_/grid/hooks/features/rows/useGridRows.ts index 66fe5ec7bb51b..bdfbba78c6f5a 100644 --- a/packages/grid/_modules_/grid/hooks/features/rows/useGridRows.ts +++ b/packages/grid/_modules_/grid/hooks/features/rows/useGridRows.ts @@ -4,7 +4,7 @@ import { GRID_ROWS_SET, GRID_ROWS_UPDATE, } from '../../../constants/eventsConstants'; -import { GridComponentProps } from '../../../GridComponentProps'; +import { GridBaseComponentProps } from '../../../GridBaseComponentProps'; import { GridApiRef } from '../../../models/api/gridApiRef'; import { GridRowApi } from '../../../models/api/gridRowApi'; import { @@ -52,7 +52,7 @@ export function convertGridRowsPropToState( export const useGridRows = ( apiRef: GridApiRef, - { rows, getRowId }: Pick, + { rows, getRowId }: Pick, ): void => { const logger = useLogger('useGridRows'); const [gridState, setGridState, updateComponent] = useGridState(apiRef); diff --git a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts index 898b16f8e5de9..dc31dcf8ae551 100644 --- a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts +++ b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import { GRID_ROW_CLICK, GRID_SELECTION_CHANGE } from '../../../constants/eventsConstants'; -import { GridComponentProps } from '../../../GridComponentProps'; +import { GridBaseComponentProps } from '../../../GridBaseComponentProps'; import { GridApiRef } from '../../../models/api/gridApiRef'; import { GridSelectionApi } from '../../../models/api/gridSelectionApi'; import { GridRowParams } from '../../../models/params/gridRowParams'; @@ -19,7 +19,7 @@ import { selectedIdsLookupSelector, } from './gridSelectionSelector'; -export const useGridSelection = (apiRef: GridApiRef, props: GridComponentProps): void => { +export const useGridSelection = (apiRef: GridApiRef, props: GridBaseComponentProps): void => { const logger = useLogger('useGridSelection'); const [, setGridState, forceUpdate] = useGridState(apiRef); const options = useGridSelector(apiRef, optionsSelector); diff --git a/packages/grid/_modules_/grid/hooks/features/sorting/useGridSorting.ts b/packages/grid/_modules_/grid/hooks/features/sorting/useGridSorting.ts index c06c24be57f56..48420e6a9bc37 100644 --- a/packages/grid/_modules_/grid/hooks/features/sorting/useGridSorting.ts +++ b/packages/grid/_modules_/grid/hooks/features/sorting/useGridSorting.ts @@ -8,7 +8,7 @@ import { GRID_ROWS_UPDATE, GRID_SORT_MODEL_CHANGE, } from '../../../constants/eventsConstants'; -import { GridComponentProps } from '../../../GridComponentProps'; +import { GridBaseComponentProps } from '../../../GridBaseComponentProps'; import { GridApiRef } from '../../../models/api/gridApiRef'; import { GridSortApi } from '../../../models/api/gridSortApi'; import { GridCellValue } from '../../../models/gridCell'; @@ -38,7 +38,7 @@ import { sortedGridRowIdsSelector, sortedGridRowsSelector } from './gridSortingS export const useGridSorting = ( apiRef: GridApiRef, - props: Pick, + props: Pick, ) => { const logger = useLogger('useGridSorting'); diff --git a/packages/grid/_modules_/grid/hooks/root/useEvents.ts b/packages/grid/_modules_/grid/hooks/root/useEvents.ts index d3502bec2dfb6..eb46302a45150 100644 --- a/packages/grid/_modules_/grid/hooks/root/useEvents.ts +++ b/packages/grid/_modules_/grid/hooks/root/useEvents.ts @@ -29,12 +29,12 @@ import { } from '../../constants/eventsConstants'; import { useGridApiOptionHandler } from './useGridApiEventHandler'; import { useNativeEventListener } from './useNativeEventListener'; -import { GridComponentProps } from '../../GridComponentProps'; +import { GridBaseComponentProps } from '../../GridBaseComponentProps'; export function useEvents( apiRef: GridApiRef, props: Pick< - GridComponentProps, + GridBaseComponentProps, | 'onColumnHeaderClick' | 'onColumnHeaderDoubleClick' | 'onColumnHeaderOver' diff --git a/packages/grid/_modules_/grid/hooks/utils/useGridScrollbarSizeDetector.tsx b/packages/grid/_modules_/grid/hooks/utils/useGridScrollbarSizeDetector.tsx index 93ac279630780..efab5b807a5b2 100644 --- a/packages/grid/_modules_/grid/hooks/utils/useGridScrollbarSizeDetector.tsx +++ b/packages/grid/_modules_/grid/hooks/utils/useGridScrollbarSizeDetector.tsx @@ -1,7 +1,7 @@ // TODO replace with { unstable_getScrollbarSize } from '@material-ui/utils' import { ownerDocument } from '@material-ui/core/utils'; import * as React from 'react'; -import { GridComponentProps } from '../../GridComponentProps'; +import { GridBaseComponentProps } from '../../GridBaseComponentProps'; import { GridApiRef } from '../../models/api/gridApiRef'; import { useEnhancedEffect } from '../../utils/material-ui-utils'; import { allGridColumnsSelector } from '../features/columns/gridColumnsSelector'; @@ -25,7 +25,7 @@ export function getScrollbarSize(doc: Document, element: HTMLElement): number { export function useGridScrollbarSizeDetector( apiRef: GridApiRef, - { scrollbarSize }: Pick, + { scrollbarSize }: Pick, ) { const logger = useLogger('useGridScrollbarSizeDetector'); const [detectedScrollBarSize, setDetectedScrollBarSize] = React.useState(0); diff --git a/packages/grid/_modules_/grid/hooks/utils/useOptionsProp.ts b/packages/grid/_modules_/grid/hooks/utils/useOptionsProp.ts index 38ee7ba3de76e..eb0c15a5ebd7e 100644 --- a/packages/grid/_modules_/grid/hooks/utils/useOptionsProp.ts +++ b/packages/grid/_modules_/grid/hooks/utils/useOptionsProp.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { GRID_DEFAULT_LOCALE_TEXT } from '../../constants/localeTextConstants'; import { mergeGridOptions } from '../../utils/mergeUtils'; -import { GridComponentProps, GridOptionsProp } from '../../GridComponentProps'; +import { GridBaseComponentProps, GridOptionsProp } from '../../GridBaseComponentProps'; import { GridApiRef } from '../../models/api/gridApiRef'; import { DEFAULT_GRID_OPTIONS, GridOptions } from '../../models/gridOptions'; import { composeClasses } from '../../utils/material-ui-utils'; @@ -27,7 +27,7 @@ export function optionsReducer( throw new Error(`Material-UI: Action ${action.type} not found.`); } } -export function useOptionsProp(apiRef: GridApiRef, props: GridComponentProps): GridOptions { +export function useOptionsProp(apiRef: GridApiRef, props: GridBaseComponentProps): GridOptions { const logger = useLogger('useOptionsProp'); const options: GridOptionsProp = React.useMemo( diff --git a/packages/grid/_modules_/grid/hooks/utils/useResizeContainer.ts b/packages/grid/_modules_/grid/hooks/utils/useResizeContainer.ts index 9acc79087df66..d9a75128dba07 100644 --- a/packages/grid/_modules_/grid/hooks/utils/useResizeContainer.ts +++ b/packages/grid/_modules_/grid/hooks/utils/useResizeContainer.ts @@ -5,13 +5,13 @@ import { ElementSize, GridEventsApi } from '../../models'; import { useGridApiEventHandler, useGridApiOptionHandler } from '../root/useGridApiEventHandler'; import { useGridApiMethod } from '../root/useGridApiMethod'; import { useLogger } from './useLogger'; -import { GridComponentProps } from '../../GridComponentProps'; +import { GridBaseComponentProps } from '../../GridBaseComponentProps'; const isTestEnvironment = process.env.NODE_ENV === 'test'; export function useResizeContainer( apiRef, - props: Pick, + props: Pick, ) { const gridLogger = useLogger('useResizeContainer'); const warningShown = React.useRef(false); diff --git a/packages/grid/_modules_/grid/index.ts b/packages/grid/_modules_/grid/index.ts index efe0106709777..fb912712b71c2 100644 --- a/packages/grid/_modules_/grid/index.ts +++ b/packages/grid/_modules_/grid/index.ts @@ -4,8 +4,4 @@ export * from './hooks'; export * from './locales'; export * from './models'; export * from './utils'; -export * from './GridComponentProps'; -export * from './GridComponent'; -export * from './useGridComponent'; -export * from './GridHeaderPlaceholder'; -export * from './GridFooterPlaceholder'; +export * from './GridBaseComponentProps'; diff --git a/packages/grid/_modules_/grid/useGridComponent.tsx b/packages/grid/_modules_/grid/useGridComponent.tsx deleted file mode 100644 index d4d91b07770cb..0000000000000 --- a/packages/grid/_modules_/grid/useGridComponent.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { GridComponentProps } from './GridComponentProps'; -import { useGridColumnMenu } from './hooks/features/columnMenu/useGridColumnMenu'; -import { useGridColumnReorder } from './hooks/features/columnReorder/useGridColumnReorder'; -import { useGridColumnResize } from './hooks/features/columnResize/useGridColumnResize'; -import { useGridColumns } from './hooks/features/columns/useGridColumns'; -import { useGridControlState } from './hooks/features/core/useGridControlState'; -import { useGridDensity } from './hooks/features/density/useGridDensity'; -import { useGridCsvExport } from './hooks/features/export/useGridCsvExport'; -import { useGridFilter } from './hooks/features/filter/useGridFilter'; -import { useGridFocus } from './hooks/features/focus/useGridFocus'; -import { useGridInfiniteLoader } from './hooks/features/infiniteLoader/useGridInfiniteLoader'; -import { useGridKeyboard } from './hooks/features/keyboard/useGridKeyboard'; -import { useGridKeyboardNavigation } from './hooks/features/keyboard/useGridKeyboardNavigation'; -import { useLocaleText } from './hooks/features/localeText/useLocaleText'; -import { useGridPagination } from './hooks/features/pagination/useGridPagination'; -import { useGridPreferencesPanel } from './hooks/features/preferencesPanel/useGridPreferencesPanel'; -import { useGridEditRows } from './hooks/features/rows/useGridEditRows'; -import { useGridFreezeRows } from './hooks/features/rows/useGridFreezeRows'; -import { useGridParamsApi } from './hooks/features/rows/useGridParamsApi'; -import { useGridRows } from './hooks/features/rows/useGridRows'; -import { useGridSelection } from './hooks/features/selection/useGridSelection'; -import { useGridSorting } from './hooks/features/sorting/useGridSorting'; -import { useGridComponents } from './hooks/features/useGridComponents'; -import { useGridVirtualRows } from './hooks/features/virtualization/useGridVirtualRows'; -import { useGridClipboard } from './hooks/features/clipboard/useGridClipboard'; -import { useApi } from './hooks/root/useApi'; -import { useEvents } from './hooks/root/useEvents'; -import { useGridContainerProps } from './hooks/root/useGridContainerProps'; -import { useErrorHandler } from './hooks/utils/useErrorHandler'; -import { useGridScrollbarSizeDetector } from './hooks/utils/useGridScrollbarSizeDetector'; -import { useLoggerFactory } from './hooks/utils/useLogger'; -import { useOptionsProp } from './hooks/utils/useOptionsProp'; -import { useRenderInfoLog } from './hooks/utils/useRenderInfoLog'; -import { useResizeContainer } from './hooks/utils/useResizeContainer'; -import { useStateProp } from './hooks/utils/useStateProp'; -import { GridApiRef } from './models/api/gridApiRef'; - -export const useGridComponent = (apiRef: GridApiRef, props: GridComponentProps) => { - useLoggerFactory(apiRef, props); - useApi(apiRef); - useErrorHandler(apiRef, props); - useGridControlState(apiRef); - useGridScrollbarSizeDetector(apiRef, props); - useOptionsProp(apiRef, props); - useEvents(apiRef, props); - useLocaleText(apiRef); - useResizeContainer(apiRef, props); - useGridFreezeRows(apiRef, props); - useGridColumns(apiRef, props); - useGridParamsApi(apiRef); - useGridRows(apiRef, props); - useGridEditRows(apiRef, props); - useGridFocus(apiRef, props); - useGridKeyboard(apiRef); - useGridKeyboardNavigation(apiRef); - useGridSelection(apiRef, props); - useGridSorting(apiRef, props); - useGridColumnMenu(apiRef); - useGridPreferencesPanel(apiRef); - useGridFilter(apiRef, props); - useGridContainerProps(apiRef); - useGridDensity(apiRef); - useGridVirtualRows(apiRef); - useGridColumnReorder(apiRef); - useGridColumnResize(apiRef, props); - useGridPagination(apiRef); - useGridCsvExport(apiRef); - useGridInfiniteLoader(apiRef, props); - useGridClipboard(apiRef); - useGridComponents(apiRef, props); - useStateProp(apiRef, props); - useRenderInfoLog(apiRef); -}; diff --git a/packages/grid/data-grid/src/DataGrid.tsx b/packages/grid/data-grid/src/DataGrid.tsx index abfab6656b6e2..ef1357bc937a0 100644 --- a/packages/grid/data-grid/src/DataGrid.tsx +++ b/packages/grid/data-grid/src/DataGrid.tsx @@ -3,16 +3,14 @@ import { DataGridProps, MAX_PAGE_SIZE } from '@material-ui/data-grid/DataGridPro import { DATAGRID_PROPTYPES } from '@material-ui/data-grid/DataGridPropTypes'; import * as React from 'react'; import { - DEFAULT_GRID_OPTIONS, + DEFAULT_GRID_OPTIONS, GridBody, GridErrorHandler, GridFooterPlaceholder, GridHeaderPlaceholder, GridRoot, useGridApiRef, useThemeProps, } from '../../_modules_/grid'; import { GridContextProvider } from '../../_modules_/grid/context/GridContextProvider'; -import { GridBody } from '../../_modules_/grid/GridBody'; import { useDataGridComponent } from './useDataGridComponent'; -import { GridErrorHandler } from '../../_modules_/grid/GridErrorHandler'; const DataGridRaw = React.forwardRef(function DataGrid( inProps, @@ -27,6 +25,7 @@ const DataGridRaw = React.forwardRef(function Dat pageSize = MAX_PAGE_SIZE; } + //todo move that to useSorting const selectionModel = dataGridSelectionModel !== undefined && !Array.isArray(dataGridSelectionModel) ? [dataGridSelectionModel] diff --git a/packages/grid/data-grid/src/DataGridProps.ts b/packages/grid/data-grid/src/DataGridProps.ts index b2266ce3c3bef..f75c226bbc16c 100644 --- a/packages/grid/data-grid/src/DataGridProps.ts +++ b/packages/grid/data-grid/src/DataGridProps.ts @@ -1,78 +1,12 @@ -import { GridOptionsProp } from '../../_modules_/grid/GridComponentProps'; -import { GridState } from '../../_modules_/grid/hooks/features/core/gridState'; -import { GridColumns } from '../../_modules_/grid/models/colDef/gridColDef'; -import { GridRowId, GridRowIdGetter, GridRowsProp } from '../../_modules_/grid/models/gridRows'; -import { GridSlotsComponent } from '../../_modules_/grid/models/gridSlotsComponent'; -import { GridSlotsComponentsProps } from '../../_modules_/grid/models/gridSlotsComponentsProps'; -import { GridStateChangeParams } from '../../_modules_/grid/models/params/gridStateChangeParams'; +import { GridBaseComponentProps } from '../../_modules_/grid/GridBaseComponentProps'; +import { GridRowId } from '../../_modules_/grid/models/gridRows'; export const MAX_PAGE_SIZE = 100; /** * The grid component react props interface. */ -export interface DataGridProps extends GridOptionsProp { - /** - * The label of the grid. - */ - 'aria-label'?: string; - /** - * The id of the element containing a label for the grid. - */ - 'aria-labelledby'?: string; - /** - * @ignore - */ - className?: string; - /** - * Set of columns of type [[GridColumns]]. - */ - columns: GridColumns; - /** - * Overrideable components. - */ - components?: GridSlotsComponent; - /** - * Overrideable components props dynamically passed to the component at rendering. - */ - componentsProps?: GridSlotsComponentsProps; - /** - * An error that will turn the grid into its error state and display the error component. - */ - error?: any; - /** - * Return the id of a given [[GridRowData]]. - */ - getRowId?: GridRowIdGetter; - /** - * @internal enum - */ - licenseStatus: string; - /** - * If `true`, a loading overlay is displayed. - */ - loading?: boolean; - /** - * Nonce of the inline styles for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute). - */ - nonce?: string; - /** - * Set a callback fired when the state of the grid is updated. - */ - onStateChange?: (params: GridStateChangeParams) => void; // We are overriding the handler in GridOptions to fix the params type and avoid the cycle dependency - /** - * Set of rows of type [[GridRowsProp]]. - */ - rows: GridRowsProp; - /** - * Set the whole state of the grid. - */ - state?: Partial; - /** - * @ignore - */ - style?: React.CSSProperties; - +export interface DataGridProps extends GridBaseComponentProps { apiRef: undefined; disableColumnResize: true; disableColumnReorder: true; diff --git a/packages/grid/data-grid/src/useDataGridComponent.tsx b/packages/grid/data-grid/src/useDataGridComponent.tsx index 2f44323c4ae3b..da38e6eabab19 100644 --- a/packages/grid/data-grid/src/useDataGridComponent.tsx +++ b/packages/grid/data-grid/src/useDataGridComponent.tsx @@ -1,4 +1,4 @@ -import { GridComponentProps } from '../../_modules_/grid/GridComponentProps'; +import { GridBaseComponentProps } from '../../_modules_/grid/GridBaseComponentProps'; import { useGridClipboard } from '../../_modules_/grid/hooks/features/clipboard/useGridClipboard'; import { useGridColumnMenu } from '../../_modules_/grid/hooks/features/columnMenu/useGridColumnMenu'; import { useGridColumnReorder } from '../../_modules_/grid/hooks/features/columnReorder/useGridColumnReorder'; @@ -35,22 +35,21 @@ import { useResizeContainer } from '../../_modules_/grid/hooks/utils/useResizeCo import { useStateProp } from '../../_modules_/grid/hooks/utils/useStateProp'; import { GridApiRef } from '../../_modules_/grid/models/api/gridApiRef'; - -export const useDataGridComponent = (apiRef: GridApiRef, props: GridComponentProps) => { +export const useDataGridComponent = (apiRef: GridApiRef, props: GridBaseComponentProps) => { useLoggerFactory(apiRef, props); useApi(apiRef); useErrorHandler(apiRef, props); useGridControlState(apiRef); useGridScrollbarSizeDetector(apiRef, props); useOptionsProp(apiRef, props); - useEvents(apiRef); + useEvents(apiRef, props); useLocaleText(apiRef); useResizeContainer(apiRef, props); useGridFreezeRows(apiRef, props); useGridColumns(apiRef, props); useGridParamsApi(apiRef); useGridRows(apiRef, props); - useGridEditRows(apiRef); + useGridEditRows(apiRef, props); useGridFocus(apiRef, props); useGridKeyboard(apiRef); useGridKeyboardNavigation(apiRef); @@ -63,10 +62,10 @@ export const useDataGridComponent = (apiRef: GridApiRef, props: GridComponentPro useGridDensity(apiRef); useGridVirtualRows(apiRef); useGridColumnReorder(apiRef); - useGridColumnResize(apiRef); + useGridColumnResize(apiRef, props); useGridPagination(apiRef); useGridCsvExport(apiRef); - useGridInfiniteLoader(apiRef); + useGridInfiniteLoader(apiRef, props); useGridClipboard(apiRef); useGridComponents(apiRef, props); useStateProp(apiRef, props); diff --git a/packages/grid/x-grid/src/XGrid.tsx b/packages/grid/x-grid/src/XGrid.tsx index 3a2c60bb58e6b..802f978b754b5 100644 --- a/packages/grid/x-grid/src/XGrid.tsx +++ b/packages/grid/x-grid/src/XGrid.tsx @@ -1,8 +1,19 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { LicenseInfo, useLicenseVerifier } from '@material-ui/x-license'; +import { + DEFAULT_GRID_OPTIONS, + GridBody, + GridErrorHandler, + GridFooterPlaceholder, + GridHeaderPlaceholder, + GridRoot, + useGridApiRef, +} from '@material-ui/data-grid'; +import { useXGridComponent } from '@material-ui/x-grid/useXGridComponent'; +import { LicenseInfo } from '@material-ui/x-license'; import { ponyfillGlobal } from '@material-ui/utils'; -import { GridComponent, GridComponentProps, useThemeProps } from '../../_modules_/grid'; +import { GridBaseComponentProps, useThemeProps } from '../../_modules_/grid'; +import { GridContextProvider } from '../../_modules_/grid/context/GridContextProvider'; // This is the package release date. Each package version should update this const // automatically when a new version is published on npm. @@ -16,14 +27,27 @@ if (process.env.NODE_ENV !== 'production' && RELEASE_INFO === '__RELEASE' + '_IN LicenseInfo.setReleaseInfo(RELEASE_INFO); -export type XGridProps = Omit; +export type XGridProps = GridBaseComponentProps; const XGridRaw = React.forwardRef(function XGrid(inProps, ref) { const props = useThemeProps({ props: inProps, name: 'MuiDataGrid' }); - const licenseStatus = useLicenseVerifier(); - - return ; + const apiRef = useGridApiRef(props.apiRef); + + useXGridComponent(apiRef, props); + + return ( + + + + + + + + + + ); }); +XGridRaw.defaultProps = DEFAULT_GRID_OPTIONS; export const XGrid = React.memo(XGridRaw); diff --git a/packages/grid/x-grid/src/tests/columns.XGrid.test.tsx b/packages/grid/x-grid/src/tests/columns.XGrid.test.tsx index b1f30e939fd40..54a48228e988c 100644 --- a/packages/grid/x-grid/src/tests/columns.XGrid.test.tsx +++ b/packages/grid/x-grid/src/tests/columns.XGrid.test.tsx @@ -12,7 +12,7 @@ import { expect } from 'chai'; import { useFakeTimers, spy } from 'sinon'; import { GridApiRef, - GridComponentProps, + GridBaseComponentProps, useGridApiRef, XGrid, GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS, @@ -46,7 +46,7 @@ describe(' - Columns', () => { columns: [{ field: 'brand' }], }; - const Test = (props: Partial) => { + const Test = (props: Partial) => { apiRef = useGridApiRef(); return (
diff --git a/packages/grid/x-grid/src/tests/editRows.XGrid.test.tsx b/packages/grid/x-grid/src/tests/editRows.XGrid.test.tsx index b0c7c9fd223f7..a8fad6259eb97 100644 --- a/packages/grid/x-grid/src/tests/editRows.XGrid.test.tsx +++ b/packages/grid/x-grid/src/tests/editRows.XGrid.test.tsx @@ -1,7 +1,7 @@ import { GRID_CELL_KEY_DOWN, GridApiRef, - GridComponentProps, + GridBaseComponentProps, useGridApiRef, XGrid, } from '@material-ui/x-grid'; @@ -54,7 +54,7 @@ describe(' - Edit Rows', () => { let apiRef: GridApiRef; - const TestCase = (props: Partial) => { + const TestCase = (props: Partial) => { apiRef = useGridApiRef(); return (
@@ -551,7 +551,7 @@ describe(' - Edit Rows', () => { }); it('should keep the right type', () => { - const Test = (props: Partial) => { + const Test = (props: Partial) => { apiRef = useGridApiRef(); return (
diff --git a/packages/grid/x-grid/src/tests/filtering.XGrid.test.tsx b/packages/grid/x-grid/src/tests/filtering.XGrid.test.tsx index fe7f6a2b08c4d..16b2736a73966 100644 --- a/packages/grid/x-grid/src/tests/filtering.XGrid.test.tsx +++ b/packages/grid/x-grid/src/tests/filtering.XGrid.test.tsx @@ -1,7 +1,7 @@ import { getInitialGridFilterState, GridApiRef, - GridComponentProps, + GridBaseComponentProps, GridFilterModel, GridLinkOperator, GridPreferencePanelsValue, @@ -62,7 +62,7 @@ describe(' - Filter', () => { columns: [{ field: 'brand' }], }; - const TestCase = (props: Partial) => { + const TestCase = (props: Partial) => { const { rows, ...other } = props; apiRef = useGridApiRef(); return ( @@ -483,7 +483,7 @@ describe(' - Filter', () => { }); it('should control filter state when the model and the onChange are set', () => { - const ControlCase = (props: Partial) => { + const ControlCase = (props: Partial) => { const { rows, columns, ...others } = props; const [caseFilterModel, setFilterModel] = React.useState(getInitialGridFilterState()); const handleFilterChange = (newModel) => { diff --git a/packages/grid/x-grid/src/tests/rows.XGrid.test.tsx b/packages/grid/x-grid/src/tests/rows.XGrid.test.tsx index 4321a58f61224..b453662c5204d 100644 --- a/packages/grid/x-grid/src/tests/rows.XGrid.test.tsx +++ b/packages/grid/x-grid/src/tests/rows.XGrid.test.tsx @@ -9,7 +9,7 @@ import { expect } from 'chai'; import { getCell, getColumnValues } from 'test/utils/helperFn'; import { GridApiRef, - GridComponentProps, + GridBaseComponentProps, GridRowData, useGridApiRef, XGrid, @@ -166,7 +166,7 @@ describe(' - Rows', () => { let apiRef: GridApiRef; - const TestCase = (props: Partial) => { + const TestCase = (props: Partial) => { apiRef = useGridApiRef(); return (
diff --git a/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx b/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx index 0b101dd4ecc5b..10112ad506284 100644 --- a/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx +++ b/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx @@ -11,7 +11,7 @@ import { } from 'test/utils'; import { GridApiRef, - GridComponentProps, + GridBaseComponentProps, GridSelectionModel, useGridApiRef, XGrid, @@ -60,7 +60,7 @@ describe(' - Selection', () => { columns: [{ field: 'brand' }], }; - const Test = (props: Partial) => { + const Test = (props: Partial) => { apiRef = useGridApiRef(); return (
@@ -144,7 +144,7 @@ describe(' - Selection', () => { }); it('should clean the selected ids when the rows prop changes', () => { - const DemoTest = (props: Partial) => { + const DemoTest = (props: Partial) => { apiRef = useGridApiRef(); const [selectionModelState, setSelectionModelState] = React.useState(props.selectionModel); const handleSelectionChange = (model) => setSelectionModelState(model); @@ -176,7 +176,7 @@ describe(' - Selection', () => { it('should call onSelectionModelChange when selection state changes', () => { const handleSelectionModelChange = spy(); - const DemoTest = (props: Partial) => { + const DemoTest = (props: Partial) => { apiRef = useGridApiRef(); const [selectionModelState] = React.useState(props.selectionModel); @@ -289,7 +289,7 @@ describe(' - Selection', () => { }); it('should control selection state when the model and the onChange are set', () => { - const ControlCase = (props: Partial) => { + const ControlCase = (props: Partial) => { const { rows, columns, ...others } = props; const [selectionModel, setSelectionModel] = React.useState([0]); const handleSelectionChange = (newModel) => { diff --git a/packages/grid/x-grid/src/tests/sorting.XGrid.test.tsx b/packages/grid/x-grid/src/tests/sorting.XGrid.test.tsx index 3ea87712d4eda..20e5a08cdcbff 100644 --- a/packages/grid/x-grid/src/tests/sorting.XGrid.test.tsx +++ b/packages/grid/x-grid/src/tests/sorting.XGrid.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { GridApiRef, - GridComponentProps, + GridBaseComponentProps, GridSortModel, useGridApiRef, } from '@material-ui/data-grid'; @@ -59,7 +59,7 @@ describe(' - Sorting', () => { let apiRef: GridApiRef; - const TestCase = (props: Partial) => { + const TestCase = (props: Partial) => { const { rows, ...other } = props; apiRef = useGridApiRef(); return ( @@ -296,7 +296,7 @@ describe(' - Sorting', () => { it('should control sort state when the model and the onChange are set', () => { let expectedModel: GridSortModel = []; - const ControlCase = (props: Partial) => { + const ControlCase = (props: Partial) => { const { rows, columns, ...others } = props; const [caseSortModel, setSortModel] = React.useState([]); const handleSortChange = (newModel) => { diff --git a/packages/grid/x-grid/src/useXGridComponent.tsx b/packages/grid/x-grid/src/useXGridComponent.tsx new file mode 100644 index 0000000000000..924413a5476e0 --- /dev/null +++ b/packages/grid/x-grid/src/useXGridComponent.tsx @@ -0,0 +1,75 @@ +import { useLicenseVerifier } from '@material-ui/x-license'; +import { GridBaseComponentProps } from '../../_modules_/grid/GridBaseComponentProps'; +import { useGridClipboard } from '../../_modules_/grid/hooks/features/clipboard/useGridClipboard'; +import { useGridColumnMenu } from '../../_modules_/grid/hooks/features/columnMenu/useGridColumnMenu'; +import { useGridColumnReorder } from '../../_modules_/grid/hooks/features/columnReorder/useGridColumnReorder'; +import { useGridColumnResize } from '../../_modules_/grid/hooks/features/columnResize/useGridColumnResize'; +import { useGridColumns } from '../../_modules_/grid/hooks/features/columns/useGridColumns'; +import { useGridControlState } from '../../_modules_/grid/hooks/features/core/useGridControlState'; +import { useGridDensity } from '../../_modules_/grid/hooks/features/density/useGridDensity'; +import { useGridCsvExport } from '../../_modules_/grid/hooks/features/export/useGridCsvExport'; +import { useGridFilter } from '../../_modules_/grid/hooks/features/filter/useGridFilter'; +import { useGridFocus } from '../../_modules_/grid/hooks/features/focus/useGridFocus'; +import { useGridInfiniteLoader } from '../../_modules_/grid/hooks/features/infiniteLoader/useGridInfiniteLoader'; +import { useGridKeyboard } from '../../_modules_/grid/hooks/features/keyboard/useGridKeyboard'; +import { useGridKeyboardNavigation } from '../../_modules_/grid/hooks/features/keyboard/useGridKeyboardNavigation'; +import { useLocaleText } from '../../_modules_/grid/hooks/features/localeText/useLocaleText'; +import { useGridPagination } from '../../_modules_/grid/hooks/features/pagination/useGridPagination'; +import { useGridPreferencesPanel } from '../../_modules_/grid/hooks/features/preferencesPanel/useGridPreferencesPanel'; +import { useGridEditRows } from '../../_modules_/grid/hooks/features/rows/useGridEditRows'; +import { useGridFreezeRows } from '../../_modules_/grid/hooks/features/rows/useGridFreezeRows'; +import { useGridParamsApi } from '../../_modules_/grid/hooks/features/rows/useGridParamsApi'; +import { useGridRows } from '../../_modules_/grid/hooks/features/rows/useGridRows'; +import { useGridSelection } from '../../_modules_/grid/hooks/features/selection/useGridSelection'; +import { useGridSorting } from '../../_modules_/grid/hooks/features/sorting/useGridSorting'; +import { useGridComponents } from '../../_modules_/grid/hooks/features/useGridComponents'; +import { useGridVirtualRows } from '../../_modules_/grid/hooks/features/virtualization/useGridVirtualRows'; +import { useApi } from '../../_modules_/grid/hooks/root/useApi'; +import { useEvents } from '../../_modules_/grid/hooks/root/useEvents'; +import { useGridContainerProps } from '../../_modules_/grid/hooks/root/useGridContainerProps'; +import { useErrorHandler } from '../../_modules_/grid/hooks/utils/useErrorHandler'; +import { useGridScrollbarSizeDetector } from '../../_modules_/grid/hooks/utils/useGridScrollbarSizeDetector'; +import { useLoggerFactory } from '../../_modules_/grid/hooks/utils/useLogger'; +import { useOptionsProp } from '../../_modules_/grid/hooks/utils/useOptionsProp'; +import { useRenderInfoLog } from '../../_modules_/grid/hooks/utils/useRenderInfoLog'; +import { useResizeContainer } from '../../_modules_/grid/hooks/utils/useResizeContainer'; +import { useStateProp } from '../../_modules_/grid/hooks/utils/useStateProp'; +import { GridApiRef } from '../../_modules_/grid/models/api/gridApiRef'; + +export const useXGridComponent = (apiRef: GridApiRef, props: GridBaseComponentProps) => { + useLoggerFactory(apiRef, props); + useLicenseVerifier(); + useApi(apiRef); + useErrorHandler(apiRef, props); + useGridControlState(apiRef); + useGridScrollbarSizeDetector(apiRef, props); + useOptionsProp(apiRef, props); + useEvents(apiRef, props); + useLocaleText(apiRef); + useResizeContainer(apiRef, props); + useGridFreezeRows(apiRef, props); + useGridColumns(apiRef, props); + useGridParamsApi(apiRef); + useGridRows(apiRef, props); + useGridEditRows(apiRef, props); + useGridFocus(apiRef, props); + useGridKeyboard(apiRef); + useGridKeyboardNavigation(apiRef); + useGridSelection(apiRef, props); + useGridSorting(apiRef, props); + useGridColumnMenu(apiRef); + useGridPreferencesPanel(apiRef); + useGridFilter(apiRef, props); + useGridContainerProps(apiRef); + useGridDensity(apiRef); + useGridVirtualRows(apiRef); + useGridColumnReorder(apiRef); + useGridColumnResize(apiRef, props); + useGridPagination(apiRef); + useGridCsvExport(apiRef); + useGridInfiniteLoader(apiRef, props); + useGridClipboard(apiRef); + useGridComponents(apiRef, props); + useStateProp(apiRef, props); + useRenderInfoLog(apiRef); +}; diff --git a/packages/storybook/src/stories/grid-data.stories.tsx b/packages/storybook/src/stories/grid-data.stories.tsx index abca806039542..d2eb6c0f87e4c 100644 --- a/packages/storybook/src/stories/grid-data.stories.tsx +++ b/packages/storybook/src/stories/grid-data.stories.tsx @@ -1,6 +1,6 @@ import { Story } from '@storybook/react'; import * as React from 'react'; -import { XGrid, GridOptionsProp, GridComponentProps } from '@material-ui/x-grid'; +import { XGrid, GridOptionsProp, GridBaseComponentProps } from '@material-ui/x-grid'; import { useData } from '../hooks/useData'; export default { @@ -64,7 +64,7 @@ const DemoDynamicContainerTemplate: Story< width: number | string; nbRows: number; nbCols: number; - } & GridComponentProps + } & GridBaseComponentProps > = ({ nbRows, nbCols, height, width, rows, columns, ...args }) => { const data = useData(nbRows, nbCols); return ( From fd16e9f76b464f4f8c6460917de1becbb253b7bb Mon Sep 17 00:00:00 2001 From: damien Date: Wed, 21 Jul 2021 18:27:51 +0200 Subject: [PATCH 03/43] cleanup --- .../grid/hooks/features/focus/useGridFocus.ts | 5 ++++- packages/grid/data-grid/src/DataGrid.tsx | 14 ++++++++------ packages/grid/data-grid/src/DataGridProps.ts | 1 - packages/grid/x-grid/src/XGrid.tsx | 2 +- 4 files changed, 13 insertions(+), 9 deletions(-) diff --git a/packages/grid/_modules_/grid/hooks/features/focus/useGridFocus.ts b/packages/grid/_modules_/grid/hooks/features/focus/useGridFocus.ts index da5445be102ed..11d4d11d1d0ed 100644 --- a/packages/grid/_modules_/grid/hooks/features/focus/useGridFocus.ts +++ b/packages/grid/_modules_/grid/hooks/features/focus/useGridFocus.ts @@ -19,7 +19,10 @@ import { useLogger } from '../../utils/useLogger'; import { useGridApiEventHandler } from '../../root/useGridApiEventHandler'; import { GridBaseComponentProps } from '../../../GridBaseComponentProps'; -export const useGridFocus = (apiRef: GridApiRef, props: Pick): void => { +export const useGridFocus = ( + apiRef: GridApiRef, + props: Pick, +): void => { const logger = useLogger('useGridFocus'); const [, setGridState, forceUpdate] = useGridState(apiRef); const insideFocusedCell = React.useRef(false); diff --git a/packages/grid/data-grid/src/DataGrid.tsx b/packages/grid/data-grid/src/DataGrid.tsx index ef1357bc937a0..cb33cea6d1ad5 100644 --- a/packages/grid/data-grid/src/DataGrid.tsx +++ b/packages/grid/data-grid/src/DataGrid.tsx @@ -1,11 +1,13 @@ - import { DataGridProps, MAX_PAGE_SIZE } from '@material-ui/data-grid/DataGridProps'; import { DATAGRID_PROPTYPES } from '@material-ui/data-grid/DataGridPropTypes'; import * as React from 'react'; import { - DEFAULT_GRID_OPTIONS, GridBody, GridErrorHandler, + DEFAULT_GRID_OPTIONS, + GridBody, + GridErrorHandler, GridFooterPlaceholder, - GridHeaderPlaceholder, GridRoot, + GridHeaderPlaceholder, + GridRoot, useGridApiRef, useThemeProps, } from '../../_modules_/grid'; @@ -33,10 +35,10 @@ const DataGridRaw = React.forwardRef(function Dat const apiRef = useGridApiRef(); - useDataGridComponent(apiRef, {...other, selectionModel, pageSize}); + useDataGridComponent(apiRef, { ...other, selectionModel, pageSize }); return ( - + @@ -63,4 +65,4 @@ DataGridRaw.defaultProps = { export const DataGrid = React.memo(DataGridRaw); // @ts-ignore -DataGrid.propTypes=DATAGRID_PROPTYPES; +DataGrid.propTypes = DATAGRID_PROPTYPES; diff --git a/packages/grid/data-grid/src/DataGridProps.ts b/packages/grid/data-grid/src/DataGridProps.ts index f75c226bbc16c..3a31efa2f4378 100644 --- a/packages/grid/data-grid/src/DataGridProps.ts +++ b/packages/grid/data-grid/src/DataGridProps.ts @@ -17,5 +17,4 @@ export interface DataGridProps extends GridBaseComponentProps { onRowsScrollEnd: undefined; checkboxSelectionVisibleOnly: false; selectionModel?: GridRowId | GridRowId[]; - } diff --git a/packages/grid/x-grid/src/XGrid.tsx b/packages/grid/x-grid/src/XGrid.tsx index 802f978b754b5..322c454f68d56 100644 --- a/packages/grid/x-grid/src/XGrid.tsx +++ b/packages/grid/x-grid/src/XGrid.tsx @@ -47,7 +47,7 @@ const XGridRaw = React.forwardRef(function XGrid(inP ); }); -XGridRaw.defaultProps = DEFAULT_GRID_OPTIONS; +XGridRaw.defaultProps = DEFAULT_GRID_OPTIONS; export const XGrid = React.memo(XGridRaw); From 0ff1714e41c0729508a364d31da832d3adecc4af Mon Sep 17 00:00:00 2001 From: damien Date: Thu, 22 Jul 2021 12:08:11 +0200 Subject: [PATCH 04/43] refactor license prop --- .../_modules_/grid/GridBaseComponentProps.ts | 4 -- .../_modules_/grid/components/Watermark.tsx | 13 ++++--- .../grid/components/base/GridBody.tsx | 2 +- .../grid/hooks/features/core/gridState.ts | 10 +++-- .../features/selection/useGridSelection.ts | 7 +++- .../grid/hooks/features/useLicenseState.ts | 20 ++++++++++ packages/grid/data-grid/src/DataGrid.tsx | 14 ++----- packages/grid/data-grid/src/DataGridProps.ts | 39 ++++++++++++------- .../grid/x-grid/src/useXGridComponent.tsx | 4 +- .../src/stories/grid-pagination.stories.tsx | 2 +- 10 files changed, 74 insertions(+), 41 deletions(-) create mode 100644 packages/grid/_modules_/grid/hooks/features/useLicenseState.ts diff --git a/packages/grid/_modules_/grid/GridBaseComponentProps.ts b/packages/grid/_modules_/grid/GridBaseComponentProps.ts index 7107c0c07686c..2b0b78ec4f352 100644 --- a/packages/grid/_modules_/grid/GridBaseComponentProps.ts +++ b/packages/grid/_modules_/grid/GridBaseComponentProps.ts @@ -52,10 +52,6 @@ export interface GridBaseComponentProps extends GridOptionsProp { * Return the id of a given [[GridRowData]]. */ getRowId?: GridRowIdGetter; - /** - * @internal enum - */ - licenseStatus: string; /** * If `true`, a loading overlay is displayed. */ diff --git a/packages/grid/_modules_/grid/components/Watermark.tsx b/packages/grid/_modules_/grid/components/Watermark.tsx index e23d1a603e70d..e3e2929710af2 100644 --- a/packages/grid/_modules_/grid/components/Watermark.tsx +++ b/packages/grid/_modules_/grid/components/Watermark.tsx @@ -1,4 +1,7 @@ import * as React from 'react'; +import { GridState } from '../hooks/features/core/gridState'; +import { useGridSelector } from '../hooks/features/core/useGridSelector'; +import { useGridApiContext } from '../hooks/root/useGridApiContext'; // we duplicate licenseStatus to avoid adding a dependency on x-license. enum LicenseStatus { @@ -20,13 +23,13 @@ function getLicenseErrorMessage(licenseStatus: string) { throw new Error('Material-UI: Unhandled license status.'); } } +const licenseStatusSelector = (state: GridState) => + state.verifyLicense ? state.licenseStatus : LicenseStatus.Valid; -export interface WatermarkProps { - licenseStatus: string; -} +export const Watermark = () => { + const apiRef = useGridApiContext(); -export const Watermark = (props: WatermarkProps) => { - const { licenseStatus } = props; + const licenseStatus = useGridSelector(apiRef, licenseStatusSelector); if (licenseStatus === LicenseStatus.Valid.toString()) { return null; } diff --git a/packages/grid/_modules_/grid/components/base/GridBody.tsx b/packages/grid/_modules_/grid/components/base/GridBody.tsx index 8fb0800006da2..38d0ef7e87d96 100644 --- a/packages/grid/_modules_/grid/components/base/GridBody.tsx +++ b/packages/grid/_modules_/grid/components/base/GridBody.tsx @@ -34,7 +34,7 @@ export function GridBody() { return ( - + diff --git a/packages/grid/_modules_/grid/hooks/features/core/gridState.ts b/packages/grid/_modules_/grid/hooks/features/core/gridState.ts index 1474d16835027..9ddbf56713eb2 100644 --- a/packages/grid/_modules_/grid/hooks/features/core/gridState.ts +++ b/packages/grid/_modules_/grid/hooks/features/core/gridState.ts @@ -1,3 +1,4 @@ +import { LicenseStatus } from '@material-ui/x-license'; import { getInitialGridColumnsState, GridInternalColumns } from '../../../models/colDef/gridColDef'; import { GridContainerProps, @@ -8,15 +9,15 @@ import { GridEditRowsModel } from '../../../models/gridEditRowModel'; import { DEFAULT_GRID_OPTIONS, GridOptions } from '../../../models/gridOptions'; import { GridColumnMenuState } from '../columnMenu/columnMenuState'; import { - GridColumnReorderState, getInitialGridColumnReorderState, + GridColumnReorderState, } from '../columnReorder/columnReorderState'; import { getInitialGridColumnResizeState, GridColumnResizeState, } from '../columnResize/columnResizeState'; -import { GridGridDensity, getInitialGridDensityState } from '../density/densityState'; -import { GridFilterModelState, getInitialGridFilterState } from '../filter/gridFilterModelState'; +import { getInitialGridDensityState, GridGridDensity } from '../density/densityState'; +import { getInitialGridFilterState, GridFilterModelState } from '../filter/gridFilterModelState'; import { getInitialVisibleGridRowsState, VisibleGridRowsState, @@ -55,10 +56,13 @@ export interface GridState { preferencePanel: GridPreferencePanelState; density: GridGridDensity; error?: any; + verifyLicense?: boolean; + licenseStatus: LicenseStatus; } export const getInitialGridState: () => GridState = () => ({ rows: getInitialGridRowState(), + licenseStatus: LicenseStatus.NotFound, editRows: {}, pagination: { page: 0, diff --git a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts index dc31dcf8ae551..180adcf095a86 100644 --- a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts +++ b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts @@ -208,9 +208,12 @@ export const useGridSelection = (apiRef: GridApiRef, props: GridBaseComponentPro if (props.selectionModel === undefined) { return; } + const selectionModel = !Array.isArray(props.selectionModel) + ? [props.selectionModel] + : props.selectionModel; const currentModel = apiRef.current.getState().selection; - if (currentModel !== props.selectionModel) { - setGridState((state) => ({ ...state, selection: props.selectionModel || [] })); + if (currentModel !== selectionModel) { + setGridState((state) => ({ ...state, selection: selectionModel || [] })); } }, [apiRef, props.selectionModel, setGridState]); diff --git a/packages/grid/_modules_/grid/hooks/features/useLicenseState.ts b/packages/grid/_modules_/grid/hooks/features/useLicenseState.ts new file mode 100644 index 0000000000000..6926d6be758b0 --- /dev/null +++ b/packages/grid/_modules_/grid/hooks/features/useLicenseState.ts @@ -0,0 +1,20 @@ +import { useLicenseVerifier } from '@material-ui/x-license'; +import * as React from 'react'; +import { GridApiRef } from '../../models/api/gridApiRef'; +import { useGridState } from './core/useGridState'; + +export function useLicenseState(apiRef: GridApiRef) { + const licenseStatus = useLicenseVerifier(); + + const [, setGridState] = useGridState(apiRef); + + React.useEffect(() => { + setGridState((state) => ({ ...state, licenseStatus })); + }, [setGridState, licenseStatus]); + + React.useEffect(() => { + setGridState((state) => ({ ...state, verifyLicense: true })); + }); + + return licenseStatus; +} diff --git a/packages/grid/data-grid/src/DataGrid.tsx b/packages/grid/data-grid/src/DataGrid.tsx index cb33cea6d1ad5..c5913b7fd7ca7 100644 --- a/packages/grid/data-grid/src/DataGrid.tsx +++ b/packages/grid/data-grid/src/DataGrid.tsx @@ -19,26 +19,20 @@ const DataGridRaw = React.forwardRef(function Dat ref, ) { const props = useThemeProps({ props: inProps, name: 'MuiDataGrid' }); - const { pageSize: pageSizeProp, selectionModel: dataGridSelectionModel, ...other } = props; + const { pageSize: pageSizeProp, ...other } = props; let pageSize = pageSizeProp; if (pageSize && pageSize > MAX_PAGE_SIZE) { - // TODO throw error? + // TODO throw error to avoid creating a new prop ref as below. pageSize = MAX_PAGE_SIZE; } - //todo move that to useSorting - const selectionModel = - dataGridSelectionModel !== undefined && !Array.isArray(dataGridSelectionModel) - ? [dataGridSelectionModel] - : dataGridSelectionModel; - const apiRef = useGridApiRef(); - useDataGridComponent(apiRef, { ...other, selectionModel, pageSize }); + useDataGridComponent(apiRef, { ...other, pageSize }); return ( - + diff --git a/packages/grid/data-grid/src/DataGridProps.ts b/packages/grid/data-grid/src/DataGridProps.ts index 3a31efa2f4378..c3bcd0fae210f 100644 --- a/packages/grid/data-grid/src/DataGridProps.ts +++ b/packages/grid/data-grid/src/DataGridProps.ts @@ -1,20 +1,33 @@ import { GridBaseComponentProps } from '../../_modules_/grid/GridBaseComponentProps'; -import { GridRowId } from '../../_modules_/grid/models/gridRows'; export const MAX_PAGE_SIZE = 100; /** * The grid component react props interface. */ -export interface DataGridProps extends GridBaseComponentProps { - apiRef: undefined; - disableColumnResize: true; - disableColumnReorder: true; - disableMultipleColumnsFiltering: true; - disableMultipleColumnsSorting: true; - disableMultipleSelection: true; - pagination: true; - onRowsScrollEnd: undefined; - checkboxSelectionVisibleOnly: false; - selectionModel?: GridRowId | GridRowId[]; -} +export type DataGridProps = Omit< + GridBaseComponentProps, + | 'apiRef' + | 'checkboxSelectionVisibleOnly' + | 'disableColumnResize' + | 'disableColumnReorder' + | 'disableMultipleColumnsFiltering' + | 'disableMultipleColumnsSorting' + | 'disableMultipleSelection' + | 'licenseStatus' + | 'options' + | 'onRowsScrollEnd' + | 'pagination' + | 'scrollEndThreshold' + | 'selectionModel' +> & { + apiRef?: undefined; + checkboxSelectionVisibleOnly?: false; + disableColumnResize?: true; + disableColumnReorder?: true; + disableMultipleColumnsFiltering?: true; + disableMultipleColumnsSorting?: true; + disableMultipleSelection?: true; + onRowsScrollEnd?: undefined; + pagination?: true; +}; diff --git a/packages/grid/x-grid/src/useXGridComponent.tsx b/packages/grid/x-grid/src/useXGridComponent.tsx index 924413a5476e0..a6dd0bfc9ec34 100644 --- a/packages/grid/x-grid/src/useXGridComponent.tsx +++ b/packages/grid/x-grid/src/useXGridComponent.tsx @@ -1,4 +1,3 @@ -import { useLicenseVerifier } from '@material-ui/x-license'; import { GridBaseComponentProps } from '../../_modules_/grid/GridBaseComponentProps'; import { useGridClipboard } from '../../_modules_/grid/hooks/features/clipboard/useGridClipboard'; import { useGridColumnMenu } from '../../_modules_/grid/hooks/features/columnMenu/useGridColumnMenu'; @@ -23,6 +22,7 @@ import { useGridRows } from '../../_modules_/grid/hooks/features/rows/useGridRow import { useGridSelection } from '../../_modules_/grid/hooks/features/selection/useGridSelection'; import { useGridSorting } from '../../_modules_/grid/hooks/features/sorting/useGridSorting'; import { useGridComponents } from '../../_modules_/grid/hooks/features/useGridComponents'; +import { useLicenseState } from '../../_modules_/grid/hooks/features/useLicenseState'; import { useGridVirtualRows } from '../../_modules_/grid/hooks/features/virtualization/useGridVirtualRows'; import { useApi } from '../../_modules_/grid/hooks/root/useApi'; import { useEvents } from '../../_modules_/grid/hooks/root/useEvents'; @@ -38,7 +38,7 @@ import { GridApiRef } from '../../_modules_/grid/models/api/gridApiRef'; export const useXGridComponent = (apiRef: GridApiRef, props: GridBaseComponentProps) => { useLoggerFactory(apiRef, props); - useLicenseVerifier(); + useLicenseState(apiRef); useApi(apiRef); useErrorHandler(apiRef, props); useGridControlState(apiRef); diff --git a/packages/storybook/src/stories/grid-pagination.stories.tsx b/packages/storybook/src/stories/grid-pagination.stories.tsx index fd7bedee50454..5a9ae4b1cc457 100644 --- a/packages/storybook/src/stories/grid-pagination.stories.tsx +++ b/packages/storybook/src/stories/grid-pagination.stories.tsx @@ -38,7 +38,7 @@ export function PageSize100() { return (
- +
); } From e51e39e5a96f7fa87a32d2426dd7e6d8d237695c Mon Sep 17 00:00:00 2001 From: damien Date: Thu, 22 Jul 2021 12:18:15 +0200 Subject: [PATCH 05/43] fix imports --- packages/grid/data-grid/src/DataGrid.tsx | 3 +-- packages/grid/data-grid/src/DataGridPropTypes.ts | 2 +- packages/grid/x-grid/src/XGrid.tsx | 11 ++++++----- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/grid/data-grid/src/DataGrid.tsx b/packages/grid/data-grid/src/DataGrid.tsx index c5913b7fd7ca7..efcb9dfa25bfb 100644 --- a/packages/grid/data-grid/src/DataGrid.tsx +++ b/packages/grid/data-grid/src/DataGrid.tsx @@ -1,5 +1,3 @@ -import { DataGridProps, MAX_PAGE_SIZE } from '@material-ui/data-grid/DataGridProps'; -import { DATAGRID_PROPTYPES } from '@material-ui/data-grid/DataGridPropTypes'; import * as React from 'react'; import { DEFAULT_GRID_OPTIONS, @@ -13,6 +11,7 @@ import { } from '../../_modules_/grid'; import { GridContextProvider } from '../../_modules_/grid/context/GridContextProvider'; import { useDataGridComponent } from './useDataGridComponent'; +import { DataGridProps, MAX_PAGE_SIZE } from './DataGridProps'; const DataGridRaw = React.forwardRef(function DataGrid( inProps, diff --git a/packages/grid/data-grid/src/DataGridPropTypes.ts b/packages/grid/data-grid/src/DataGridPropTypes.ts index e232e8901641d..436ed0f2b056e 100644 --- a/packages/grid/data-grid/src/DataGridPropTypes.ts +++ b/packages/grid/data-grid/src/DataGridPropTypes.ts @@ -1,6 +1,6 @@ -import { MAX_PAGE_SIZE } from '@material-ui/data-grid/DataGridProps'; import PropTypes from 'prop-types'; import { chainPropTypes } from '@material-ui/utils'; +import { MAX_PAGE_SIZE } from './DataGridProps'; // @ts-ignore export const DATAGRID_PROPTYPES = { diff --git a/packages/grid/x-grid/src/XGrid.tsx b/packages/grid/x-grid/src/XGrid.tsx index 322c454f68d56..d3d53afadff8b 100644 --- a/packages/grid/x-grid/src/XGrid.tsx +++ b/packages/grid/x-grid/src/XGrid.tsx @@ -1,19 +1,20 @@ import * as React from 'react'; import PropTypes from 'prop-types'; +import { LicenseInfo } from '@material-ui/x-license'; +import { ponyfillGlobal } from '@material-ui/utils'; import { DEFAULT_GRID_OPTIONS, + GridBaseComponentProps, GridBody, GridErrorHandler, GridFooterPlaceholder, GridHeaderPlaceholder, GridRoot, useGridApiRef, -} from '@material-ui/data-grid'; -import { useXGridComponent } from '@material-ui/x-grid/useXGridComponent'; -import { LicenseInfo } from '@material-ui/x-license'; -import { ponyfillGlobal } from '@material-ui/utils'; -import { GridBaseComponentProps, useThemeProps } from '../../_modules_/grid'; + useThemeProps, +} from '../../_modules_/grid'; import { GridContextProvider } from '../../_modules_/grid/context/GridContextProvider'; +import { useXGridComponent } from './useXGridComponent'; // This is the package release date. Each package version should update this const // automatically when a new version is published on npm. From 2108473e29852a49577809e7e6992a6e71e3e28e Mon Sep 17 00:00:00 2001 From: damien Date: Thu, 22 Jul 2021 12:21:27 +0200 Subject: [PATCH 06/43] fix imports --- packages/grid/data-grid/src/DataGrid.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/grid/data-grid/src/DataGrid.tsx b/packages/grid/data-grid/src/DataGrid.tsx index efcb9dfa25bfb..4b27b0d20f5a7 100644 --- a/packages/grid/data-grid/src/DataGrid.tsx +++ b/packages/grid/data-grid/src/DataGrid.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { DATAGRID_PROPTYPES } from './DataGridPropTypes'; import { DEFAULT_GRID_OPTIONS, GridBody, From 0ddc63451ca5663c2275085868fada890287aeb5 Mon Sep 17 00:00:00 2001 From: damien Date: Thu, 22 Jul 2021 13:09:38 +0200 Subject: [PATCH 07/43] fix props --- packages/grid/data-grid/src/DataGridProps.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/grid/data-grid/src/DataGridProps.ts b/packages/grid/data-grid/src/DataGridProps.ts index c3bcd0fae210f..5f1a541cc5032 100644 --- a/packages/grid/data-grid/src/DataGridProps.ts +++ b/packages/grid/data-grid/src/DataGridProps.ts @@ -19,7 +19,6 @@ export type DataGridProps = Omit< | 'onRowsScrollEnd' | 'pagination' | 'scrollEndThreshold' - | 'selectionModel' > & { apiRef?: undefined; checkboxSelectionVisibleOnly?: false; From a3f51dfa272feae0e6891c5128662d96b73500b6 Mon Sep 17 00:00:00 2001 From: damien Date: Thu, 22 Jul 2021 17:22:43 +0200 Subject: [PATCH 08/43] fix props and selection model --- .../hooks/features/selection/gridSelectionState.ts | 4 ++-- .../hooks/features/selection/useGridSelection.ts | 7 ++----- .../grid/_modules_/grid/models/gridOptions.tsx | 7 +++---- packages/grid/data-grid/src/DataGrid.tsx | 14 ++++---------- .../src/tests/selection.DataGrid.test.tsx | 13 +++++++------ packages/grid/x-grid/src/XGrid.tsx | 8 +++----- 6 files changed, 21 insertions(+), 32 deletions(-) diff --git a/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionState.ts b/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionState.ts index 28fd25e8c7bb2..c138a0fdfc0c5 100644 --- a/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionState.ts +++ b/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionState.ts @@ -1,3 +1,3 @@ -import { GridRowId } from '../../../models/gridRows'; +import { GridSelectionModel } from '../../../models/gridSelectionModel'; -export type GridSelectionState = GridRowId[]; +export type GridSelectionState = GridSelectionModel; diff --git a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts index 180adcf095a86..dc31dcf8ae551 100644 --- a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts +++ b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts @@ -208,12 +208,9 @@ export const useGridSelection = (apiRef: GridApiRef, props: GridBaseComponentPro if (props.selectionModel === undefined) { return; } - const selectionModel = !Array.isArray(props.selectionModel) - ? [props.selectionModel] - : props.selectionModel; const currentModel = apiRef.current.getState().selection; - if (currentModel !== selectionModel) { - setGridState((state) => ({ ...state, selection: selectionModel || [] })); + if (currentModel !== props.selectionModel) { + setGridState((state) => ({ ...state, selection: props.selectionModel || [] })); } }, [apiRef, props.selectionModel, setGridState]); diff --git a/packages/grid/_modules_/grid/models/gridOptions.tsx b/packages/grid/_modules_/grid/models/gridOptions.tsx index 295e0df68dfc1..87c0d8cf227f0 100644 --- a/packages/grid/_modules_/grid/models/gridOptions.tsx +++ b/packages/grid/_modules_/grid/models/gridOptions.tsx @@ -7,7 +7,6 @@ import { getGridDefaultColumnTypes } from './colDef/gridDefaultColumnTypes'; import { GridDensity, GridDensityTypes } from './gridDensity'; import { GridEditRowsModel } from './gridEditRowModel'; import { GridFeatureMode, GridFeatureModeConstant } from './gridFeatureMode'; -import { GridRowId } from './gridRows'; import { Logger } from './logger'; import { GridCellParams } from './params/gridCellParams'; import { GridColumnHeaderParams } from './params/gridColumnHeaderParams'; @@ -411,9 +410,9 @@ export interface GridOptions { onResize?: (param: GridResizeParams) => void; /** * Callback fired when the selection state of one or multiple rows changes. - * @param selectionModel With all the row ids [[GridRowId]][]. + * @param selectionModel With all the row ids [[GridSelectionModel]]. */ - onSelectionModelChange?: (selectionModel: GridRowId[]) => void; + onSelectionModelChange?: (selectionModel: GridSelectionModel) => void; /** * Callback fired when the sort model changes before a column is sorted. * @param param With all properties from [[GridSortModel]]. @@ -469,7 +468,7 @@ export interface GridOptions { /** * Set the selection model of the grid. */ - selectionModel?: GridSelectionModel | GridRowId; + selectionModel?: GridSelectionModel; /** * If `true`, the right border of the cells are displayed. * @default false diff --git a/packages/grid/data-grid/src/DataGrid.tsx b/packages/grid/data-grid/src/DataGrid.tsx index 4b27b0d20f5a7..8bf99900f6daa 100644 --- a/packages/grid/data-grid/src/DataGrid.tsx +++ b/packages/grid/data-grid/src/DataGrid.tsx @@ -8,7 +8,6 @@ import { GridHeaderPlaceholder, GridRoot, useGridApiRef, - useThemeProps, } from '../../_modules_/grid'; import { GridContextProvider } from '../../_modules_/grid/context/GridContextProvider'; import { useDataGridComponent } from './useDataGridComponent'; @@ -18,21 +17,16 @@ const DataGridRaw = React.forwardRef(function Dat inProps, ref, ) { - const props = useThemeProps({ props: inProps, name: 'MuiDataGrid' }); - const { pageSize: pageSizeProp, ...other } = props; - - let pageSize = pageSizeProp; - if (pageSize && pageSize > MAX_PAGE_SIZE) { - // TODO throw error to avoid creating a new prop ref as below. - pageSize = MAX_PAGE_SIZE; + if (inProps.pageSize! > MAX_PAGE_SIZE) { + throw new Error(`'props.pageSize' cannot exceed 100 in DataGrid.`); } const apiRef = useGridApiRef(); - useDataGridComponent(apiRef, { ...other, pageSize }); + useDataGridComponent(apiRef, inProps); return ( - + diff --git a/packages/grid/data-grid/src/tests/selection.DataGrid.test.tsx b/packages/grid/data-grid/src/tests/selection.DataGrid.test.tsx index 4860fd22e06a1..3e2e0616af789 100644 --- a/packages/grid/data-grid/src/tests/selection.DataGrid.test.tsx +++ b/packages/grid/data-grid/src/tests/selection.DataGrid.test.tsx @@ -195,7 +195,7 @@ describe(' - Selection', () => { }, ]} columns={[{ field: 'brand', width: 100 }]} - selectionModel={1} + selectionModel={[1]} />
, ); @@ -234,7 +234,7 @@ describe(' - Selection', () => { const row0 = getRow(0); expect(row0).to.have.class('Mui-selected'); - setProps({ selectionModel: 1 }); + setProps({ selectionModel: [1] }); // TODO fix this assertion. The model is forced from the outside, hence shouldn't change. // https://github.com/mui-org/material-ui-x/issues/190 expect(row0).not.to.have.class('Mui-selected'); @@ -265,11 +265,12 @@ describe(' - Selection', () => {
); } - const { setProps } = render(); + const selectionModel = [0]; + const { setProps } = render(); expect(onSelectionModelChange.callCount).to.equal(0); const firstRow = getRow(0); expect(firstRow).to.have.class('Mui-selected'); - setProps({ selectionModel: 0 }); + setProps({ selectionModel }); expect(onSelectionModelChange.callCount).to.equal(0); expect(getRow(0)).to.have.class('Mui-selected'); }); @@ -288,7 +289,7 @@ describe(' - Selection', () => { }, ], columns: [{ field: 'brand', width: 100 }], - selectionModel: 1, + selectionModel: [1], isRowSelectable: (params) => params.id > 0, }; @@ -304,7 +305,7 @@ describe(' - Selection', () => { expect(getRow(0)).not.to.have.class('Mui-selected'); expect(getRow(1)).to.have.class('Mui-selected'); - setProps({ selectionModel: 0 }); + setProps({ selectionModel: [0] }); expect(getRow(0)).to.have.class('Mui-selected'); expect(getRow(1)).not.to.have.class('Mui-selected'); }); diff --git a/packages/grid/x-grid/src/XGrid.tsx b/packages/grid/x-grid/src/XGrid.tsx index d3d53afadff8b..1d70bbe2c6de9 100644 --- a/packages/grid/x-grid/src/XGrid.tsx +++ b/packages/grid/x-grid/src/XGrid.tsx @@ -11,7 +11,6 @@ import { GridHeaderPlaceholder, GridRoot, useGridApiRef, - useThemeProps, } from '../../_modules_/grid'; import { GridContextProvider } from '../../_modules_/grid/context/GridContextProvider'; import { useXGridComponent } from './useXGridComponent'; @@ -31,13 +30,12 @@ LicenseInfo.setReleaseInfo(RELEASE_INFO); export type XGridProps = GridBaseComponentProps; const XGridRaw = React.forwardRef(function XGrid(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiDataGrid' }); - const apiRef = useGridApiRef(props.apiRef); + const apiRef = useGridApiRef(inProps.apiRef); - useXGridComponent(apiRef, props); + useXGridComponent(apiRef, inProps); return ( - + From 9a16f4c7c7e9d9346c6c5ac43aab0ffe14378f5e Mon Sep 17 00:00:00 2001 From: damien Date: Fri, 23 Jul 2021 15:31:01 +0200 Subject: [PATCH 09/43] revert rename GridComponentProps --- ...GridBaseComponentProps.ts => GridComponentProps.ts} | 2 +- .../_modules_/grid/context/GridRootPropsContext.ts | 4 ++-- .../features/columnResize/useGridColumnResize.tsx | 4 ++-- .../grid/hooks/features/columns/useGridColumns.ts | 4 ++-- .../grid/hooks/features/filter/useGridFilter.ts | 4 ++-- .../grid/hooks/features/focus/useGridFocus.ts | 7 ++----- .../features/infiniteLoader/useGridInfiniteLoader.ts | 4 ++-- .../grid/hooks/features/rows/useGridEditRows.ts | 1 - .../_modules_/grid/hooks/features/rows/useGridRows.ts | 4 ++-- .../grid/hooks/features/selection/useGridSelection.ts | 4 ++-- .../grid/hooks/features/sorting/useGridSorting.ts | 4 ++-- packages/grid/_modules_/grid/hooks/root/useEvents.ts | 4 ++-- .../grid/hooks/utils/useGridScrollbarSizeDetector.tsx | 4 ++-- .../grid/_modules_/grid/hooks/utils/useOptionsProp.ts | 4 ++-- .../_modules_/grid/hooks/utils/useResizeContainer.ts | 4 ++-- packages/grid/_modules_/grid/index.ts | 2 +- packages/grid/data-grid/src/DataGridProps.ts | 4 ++-- packages/grid/data-grid/src/useDataGridComponent.tsx | 4 ++-- packages/grid/x-grid/src/XGrid.tsx | 4 ++-- packages/grid/x-grid/src/tests/columns.XGrid.test.tsx | 4 ++-- packages/grid/x-grid/src/tests/editRows.XGrid.test.tsx | 6 +++--- .../grid/x-grid/src/tests/filtering.XGrid.test.tsx | 6 +++--- packages/grid/x-grid/src/tests/rows.XGrid.test.tsx | 4 ++-- .../grid/x-grid/src/tests/selection.XGrid.test.tsx | 10 +++++----- packages/grid/x-grid/src/tests/sorting.XGrid.test.tsx | 6 +++--- packages/grid/x-grid/src/useXGridComponent.tsx | 4 ++-- packages/storybook/src/stories/grid-data.stories.tsx | 4 ++-- 27 files changed, 56 insertions(+), 60 deletions(-) rename packages/grid/_modules_/grid/{GridBaseComponentProps.ts => GridComponentProps.ts} (97%) diff --git a/packages/grid/_modules_/grid/GridBaseComponentProps.ts b/packages/grid/_modules_/grid/GridComponentProps.ts similarity index 97% rename from packages/grid/_modules_/grid/GridBaseComponentProps.ts rename to packages/grid/_modules_/grid/GridComponentProps.ts index 2b0b78ec4f352..73033d997876f 100644 --- a/packages/grid/_modules_/grid/GridBaseComponentProps.ts +++ b/packages/grid/_modules_/grid/GridComponentProps.ts @@ -15,7 +15,7 @@ export type GridOptionsProp = Partial; /** * The grid component react props interface. */ -export interface GridBaseComponentProps extends GridOptionsProp { +export interface GridComponentProps extends GridOptionsProp { /** * The ref object that allows grid manipulation. Can be instantiated with [[useGridApiRef()]]. */ diff --git a/packages/grid/_modules_/grid/context/GridRootPropsContext.ts b/packages/grid/_modules_/grid/context/GridRootPropsContext.ts index 8c202f2701164..9ca299e52a193 100644 --- a/packages/grid/_modules_/grid/context/GridRootPropsContext.ts +++ b/packages/grid/_modules_/grid/context/GridRootPropsContext.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import { GridBaseComponentProps } from '../GridBaseComponentProps'; +import { GridComponentProps } from '../GridComponentProps'; -const GridRootPropsContext = React.createContext(undefined); +const GridRootPropsContext = React.createContext(undefined); if (process.env.NODE_ENV !== 'production') { GridRootPropsContext.displayName = 'GridRootPropsContext'; diff --git a/packages/grid/_modules_/grid/hooks/features/columnResize/useGridColumnResize.tsx b/packages/grid/_modules_/grid/hooks/features/columnResize/useGridColumnResize.tsx index 91eac712808ad..9fdc0b0d75a05 100644 --- a/packages/grid/_modules_/grid/hooks/features/columnResize/useGridColumnResize.tsx +++ b/packages/grid/_modules_/grid/hooks/features/columnResize/useGridColumnResize.tsx @@ -24,7 +24,7 @@ import { GridApiRef, CursorCoordinates, GridColumnHeaderParams } from '../../../ import { useGridApiEventHandler, useGridApiOptionHandler } from '../../root/useGridApiEventHandler'; import { useGridState } from '../core/useGridState'; import { useNativeEventListener } from '../../root/useNativeEventListener'; -import { GridBaseComponentProps } from '../../../GridBaseComponentProps'; +import { GridComponentProps } from '../../../GridComponentProps'; let cachedSupportsTouchActionNone = false; @@ -73,7 +73,7 @@ function trackFinger(event, currentTouchId): CursorCoordinates | boolean { // TODO improve experience for last column export const useGridColumnResize = ( apiRef: GridApiRef, - props: Pick, + props: Pick, ) => { const logger = useLogger('useGridColumnResize'); const [, setGridState, forceUpdate] = useGridState(apiRef); diff --git a/packages/grid/_modules_/grid/hooks/features/columns/useGridColumns.ts b/packages/grid/_modules_/grid/hooks/features/columns/useGridColumns.ts index 49987237aeec6..83f6b1ffa0fca 100644 --- a/packages/grid/_modules_/grid/hooks/features/columns/useGridColumns.ts +++ b/packages/grid/_modules_/grid/hooks/features/columns/useGridColumns.ts @@ -34,7 +34,7 @@ import { } from './gridColumnsSelector'; import { useGridApiOptionHandler } from '../../root/useGridApiEventHandler'; import { GRID_STRING_COL_DEF } from '../../../models/colDef/gridStringColDef'; -import { GridBaseComponentProps } from '../../../GridBaseComponentProps'; +import { GridComponentProps } from '../../../GridComponentProps'; function updateColumnsWidth(columns: GridColumns, viewportWidth: number): GridColumns { const numberOfFluidColumns = columns.filter((column) => !!column.flex && !column.hide).length; @@ -139,7 +139,7 @@ const upsertColumnsState = ( export function useGridColumns( apiRef: GridApiRef, - props: Pick, + props: Pick, ): void { const logger = useLogger('useGridColumns'); const [gridState, setGridState, forceUpdate] = useGridState(apiRef); diff --git a/packages/grid/_modules_/grid/hooks/features/filter/useGridFilter.ts b/packages/grid/_modules_/grid/hooks/features/filter/useGridFilter.ts index e320de2696991..e6ea26a8601d1 100644 --- a/packages/grid/_modules_/grid/hooks/features/filter/useGridFilter.ts +++ b/packages/grid/_modules_/grid/hooks/features/filter/useGridFilter.ts @@ -5,7 +5,7 @@ import { GRID_ROWS_SET, GRID_ROWS_UPDATE, } from '../../../constants/eventsConstants'; -import { GridBaseComponentProps } from '../../../GridBaseComponentProps'; +import { GridComponentProps } from '../../../GridComponentProps'; import { GridApiRef } from '../../../models/api/gridApiRef'; import { GridFilterApi } from '../../../models/api/gridFilterApi'; import { GridFeatureModeConstant } from '../../../models/gridFeatureMode'; @@ -27,7 +27,7 @@ import { getInitialVisibleGridRowsState } from './visibleGridRowsState'; export const useGridFilter = ( apiRef: GridApiRef, - props: Pick, + props: Pick, ): void => { const logger = useLogger('useGridFilter'); const [gridState, setGridState, forceUpdate] = useGridState(apiRef); diff --git a/packages/grid/_modules_/grid/hooks/features/focus/useGridFocus.ts b/packages/grid/_modules_/grid/hooks/features/focus/useGridFocus.ts index 11d4d11d1d0ed..e48416de0db1e 100644 --- a/packages/grid/_modules_/grid/hooks/features/focus/useGridFocus.ts +++ b/packages/grid/_modules_/grid/hooks/features/focus/useGridFocus.ts @@ -17,12 +17,9 @@ import { useGridApiMethod } from '../../root/useGridApiMethod'; import { useGridState } from '../core/useGridState'; import { useLogger } from '../../utils/useLogger'; import { useGridApiEventHandler } from '../../root/useGridApiEventHandler'; -import { GridBaseComponentProps } from '../../../GridBaseComponentProps'; +import { GridComponentProps } from '../../../GridComponentProps'; -export const useGridFocus = ( - apiRef: GridApiRef, - props: Pick, -): void => { +export const useGridFocus = (apiRef: GridApiRef, props: Pick): void => { const logger = useLogger('useGridFocus'); const [, setGridState, forceUpdate] = useGridState(apiRef); const insideFocusedCell = React.useRef(false); diff --git a/packages/grid/_modules_/grid/hooks/features/infiniteLoader/useGridInfiniteLoader.ts b/packages/grid/_modules_/grid/hooks/features/infiniteLoader/useGridInfiniteLoader.ts index a70a0a8205c8b..fc409ffe7bdf5 100644 --- a/packages/grid/_modules_/grid/hooks/features/infiniteLoader/useGridInfiniteLoader.ts +++ b/packages/grid/_modules_/grid/hooks/features/infiniteLoader/useGridInfiniteLoader.ts @@ -7,11 +7,11 @@ import { gridContainerSizesSelector } from '../../root/gridContainerSizesSelecto import { useGridApiEventHandler, useGridApiOptionHandler } from '../../root/useGridApiEventHandler'; import { GridRowScrollEndParams } from '../../../models/params/gridRowScrollEndParams'; import { visibleGridColumnsSelector } from '../columns/gridColumnsSelector'; -import { GridBaseComponentProps } from '../../../GridBaseComponentProps'; +import { GridComponentProps } from '../../../GridComponentProps'; export const useGridInfiniteLoader = ( apiRef: GridApiRef, - props: Pick, + props: Pick, ): void => { const options = useGridSelector(apiRef, optionsSelector); const containerSizes = useGridSelector(apiRef, gridContainerSizesSelector); diff --git a/packages/grid/_modules_/grid/hooks/features/rows/useGridEditRows.ts b/packages/grid/_modules_/grid/hooks/features/rows/useGridEditRows.ts index 2584a25c9c41e..6f3f4037ca5e9 100644 --- a/packages/grid/_modules_/grid/hooks/features/rows/useGridEditRows.ts +++ b/packages/grid/_modules_/grid/hooks/features/rows/useGridEditRows.ts @@ -39,7 +39,6 @@ import { useEventCallback } from '../../../utils/material-ui-utils'; import { useLogger } from '../../utils/useLogger'; import { useGridSelector } from '../core/useGridSelector'; import { useGridState } from '../core/useGridState'; -import { GridBaseComponentProps } from '../../../GridBaseComponentProps'; export function useGridEditRows( apiRef: GridApiRef, diff --git a/packages/grid/_modules_/grid/hooks/features/rows/useGridRows.ts b/packages/grid/_modules_/grid/hooks/features/rows/useGridRows.ts index bdfbba78c6f5a..66fe5ec7bb51b 100644 --- a/packages/grid/_modules_/grid/hooks/features/rows/useGridRows.ts +++ b/packages/grid/_modules_/grid/hooks/features/rows/useGridRows.ts @@ -4,7 +4,7 @@ import { GRID_ROWS_SET, GRID_ROWS_UPDATE, } from '../../../constants/eventsConstants'; -import { GridBaseComponentProps } from '../../../GridBaseComponentProps'; +import { GridComponentProps } from '../../../GridComponentProps'; import { GridApiRef } from '../../../models/api/gridApiRef'; import { GridRowApi } from '../../../models/api/gridRowApi'; import { @@ -52,7 +52,7 @@ export function convertGridRowsPropToState( export const useGridRows = ( apiRef: GridApiRef, - { rows, getRowId }: Pick, + { rows, getRowId }: Pick, ): void => { const logger = useLogger('useGridRows'); const [gridState, setGridState, updateComponent] = useGridState(apiRef); diff --git a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts index dc31dcf8ae551..898b16f8e5de9 100644 --- a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts +++ b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import { GRID_ROW_CLICK, GRID_SELECTION_CHANGE } from '../../../constants/eventsConstants'; -import { GridBaseComponentProps } from '../../../GridBaseComponentProps'; +import { GridComponentProps } from '../../../GridComponentProps'; import { GridApiRef } from '../../../models/api/gridApiRef'; import { GridSelectionApi } from '../../../models/api/gridSelectionApi'; import { GridRowParams } from '../../../models/params/gridRowParams'; @@ -19,7 +19,7 @@ import { selectedIdsLookupSelector, } from './gridSelectionSelector'; -export const useGridSelection = (apiRef: GridApiRef, props: GridBaseComponentProps): void => { +export const useGridSelection = (apiRef: GridApiRef, props: GridComponentProps): void => { const logger = useLogger('useGridSelection'); const [, setGridState, forceUpdate] = useGridState(apiRef); const options = useGridSelector(apiRef, optionsSelector); diff --git a/packages/grid/_modules_/grid/hooks/features/sorting/useGridSorting.ts b/packages/grid/_modules_/grid/hooks/features/sorting/useGridSorting.ts index 48420e6a9bc37..c06c24be57f56 100644 --- a/packages/grid/_modules_/grid/hooks/features/sorting/useGridSorting.ts +++ b/packages/grid/_modules_/grid/hooks/features/sorting/useGridSorting.ts @@ -8,7 +8,7 @@ import { GRID_ROWS_UPDATE, GRID_SORT_MODEL_CHANGE, } from '../../../constants/eventsConstants'; -import { GridBaseComponentProps } from '../../../GridBaseComponentProps'; +import { GridComponentProps } from '../../../GridComponentProps'; import { GridApiRef } from '../../../models/api/gridApiRef'; import { GridSortApi } from '../../../models/api/gridSortApi'; import { GridCellValue } from '../../../models/gridCell'; @@ -38,7 +38,7 @@ import { sortedGridRowIdsSelector, sortedGridRowsSelector } from './gridSortingS export const useGridSorting = ( apiRef: GridApiRef, - props: Pick, + props: Pick, ) => { const logger = useLogger('useGridSorting'); diff --git a/packages/grid/_modules_/grid/hooks/root/useEvents.ts b/packages/grid/_modules_/grid/hooks/root/useEvents.ts index eb46302a45150..d3502bec2dfb6 100644 --- a/packages/grid/_modules_/grid/hooks/root/useEvents.ts +++ b/packages/grid/_modules_/grid/hooks/root/useEvents.ts @@ -29,12 +29,12 @@ import { } from '../../constants/eventsConstants'; import { useGridApiOptionHandler } from './useGridApiEventHandler'; import { useNativeEventListener } from './useNativeEventListener'; -import { GridBaseComponentProps } from '../../GridBaseComponentProps'; +import { GridComponentProps } from '../../GridComponentProps'; export function useEvents( apiRef: GridApiRef, props: Pick< - GridBaseComponentProps, + GridComponentProps, | 'onColumnHeaderClick' | 'onColumnHeaderDoubleClick' | 'onColumnHeaderOver' diff --git a/packages/grid/_modules_/grid/hooks/utils/useGridScrollbarSizeDetector.tsx b/packages/grid/_modules_/grid/hooks/utils/useGridScrollbarSizeDetector.tsx index efab5b807a5b2..93ac279630780 100644 --- a/packages/grid/_modules_/grid/hooks/utils/useGridScrollbarSizeDetector.tsx +++ b/packages/grid/_modules_/grid/hooks/utils/useGridScrollbarSizeDetector.tsx @@ -1,7 +1,7 @@ // TODO replace with { unstable_getScrollbarSize } from '@material-ui/utils' import { ownerDocument } from '@material-ui/core/utils'; import * as React from 'react'; -import { GridBaseComponentProps } from '../../GridBaseComponentProps'; +import { GridComponentProps } from '../../GridComponentProps'; import { GridApiRef } from '../../models/api/gridApiRef'; import { useEnhancedEffect } from '../../utils/material-ui-utils'; import { allGridColumnsSelector } from '../features/columns/gridColumnsSelector'; @@ -25,7 +25,7 @@ export function getScrollbarSize(doc: Document, element: HTMLElement): number { export function useGridScrollbarSizeDetector( apiRef: GridApiRef, - { scrollbarSize }: Pick, + { scrollbarSize }: Pick, ) { const logger = useLogger('useGridScrollbarSizeDetector'); const [detectedScrollBarSize, setDetectedScrollBarSize] = React.useState(0); diff --git a/packages/grid/_modules_/grid/hooks/utils/useOptionsProp.ts b/packages/grid/_modules_/grid/hooks/utils/useOptionsProp.ts index eb0c15a5ebd7e..38ee7ba3de76e 100644 --- a/packages/grid/_modules_/grid/hooks/utils/useOptionsProp.ts +++ b/packages/grid/_modules_/grid/hooks/utils/useOptionsProp.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { GRID_DEFAULT_LOCALE_TEXT } from '../../constants/localeTextConstants'; import { mergeGridOptions } from '../../utils/mergeUtils'; -import { GridBaseComponentProps, GridOptionsProp } from '../../GridBaseComponentProps'; +import { GridComponentProps, GridOptionsProp } from '../../GridComponentProps'; import { GridApiRef } from '../../models/api/gridApiRef'; import { DEFAULT_GRID_OPTIONS, GridOptions } from '../../models/gridOptions'; import { composeClasses } from '../../utils/material-ui-utils'; @@ -27,7 +27,7 @@ export function optionsReducer( throw new Error(`Material-UI: Action ${action.type} not found.`); } } -export function useOptionsProp(apiRef: GridApiRef, props: GridBaseComponentProps): GridOptions { +export function useOptionsProp(apiRef: GridApiRef, props: GridComponentProps): GridOptions { const logger = useLogger('useOptionsProp'); const options: GridOptionsProp = React.useMemo( diff --git a/packages/grid/_modules_/grid/hooks/utils/useResizeContainer.ts b/packages/grid/_modules_/grid/hooks/utils/useResizeContainer.ts index d9a75128dba07..9acc79087df66 100644 --- a/packages/grid/_modules_/grid/hooks/utils/useResizeContainer.ts +++ b/packages/grid/_modules_/grid/hooks/utils/useResizeContainer.ts @@ -5,13 +5,13 @@ import { ElementSize, GridEventsApi } from '../../models'; import { useGridApiEventHandler, useGridApiOptionHandler } from '../root/useGridApiEventHandler'; import { useGridApiMethod } from '../root/useGridApiMethod'; import { useLogger } from './useLogger'; -import { GridBaseComponentProps } from '../../GridBaseComponentProps'; +import { GridComponentProps } from '../../GridComponentProps'; const isTestEnvironment = process.env.NODE_ENV === 'test'; export function useResizeContainer( apiRef, - props: Pick, + props: Pick, ) { const gridLogger = useLogger('useResizeContainer'); const warningShown = React.useRef(false); diff --git a/packages/grid/_modules_/grid/index.ts b/packages/grid/_modules_/grid/index.ts index fb912712b71c2..dd26af5c2918f 100644 --- a/packages/grid/_modules_/grid/index.ts +++ b/packages/grid/_modules_/grid/index.ts @@ -4,4 +4,4 @@ export * from './hooks'; export * from './locales'; export * from './models'; export * from './utils'; -export * from './GridBaseComponentProps'; +export * from './GridComponentProps'; diff --git a/packages/grid/data-grid/src/DataGridProps.ts b/packages/grid/data-grid/src/DataGridProps.ts index 5f1a541cc5032..4b14f31f1189f 100644 --- a/packages/grid/data-grid/src/DataGridProps.ts +++ b/packages/grid/data-grid/src/DataGridProps.ts @@ -1,4 +1,4 @@ -import { GridBaseComponentProps } from '../../_modules_/grid/GridBaseComponentProps'; +import { GridComponentProps } from '../../_modules_/grid/GridComponentProps'; export const MAX_PAGE_SIZE = 100; @@ -6,7 +6,7 @@ export const MAX_PAGE_SIZE = 100; * The grid component react props interface. */ export type DataGridProps = Omit< - GridBaseComponentProps, + GridComponentProps, | 'apiRef' | 'checkboxSelectionVisibleOnly' | 'disableColumnResize' diff --git a/packages/grid/data-grid/src/useDataGridComponent.tsx b/packages/grid/data-grid/src/useDataGridComponent.tsx index da38e6eabab19..da1eba2a7b748 100644 --- a/packages/grid/data-grid/src/useDataGridComponent.tsx +++ b/packages/grid/data-grid/src/useDataGridComponent.tsx @@ -1,4 +1,4 @@ -import { GridBaseComponentProps } from '../../_modules_/grid/GridBaseComponentProps'; +import { GridComponentProps } from '../../_modules_/grid/GridComponentProps'; import { useGridClipboard } from '../../_modules_/grid/hooks/features/clipboard/useGridClipboard'; import { useGridColumnMenu } from '../../_modules_/grid/hooks/features/columnMenu/useGridColumnMenu'; import { useGridColumnReorder } from '../../_modules_/grid/hooks/features/columnReorder/useGridColumnReorder'; @@ -35,7 +35,7 @@ import { useResizeContainer } from '../../_modules_/grid/hooks/utils/useResizeCo import { useStateProp } from '../../_modules_/grid/hooks/utils/useStateProp'; import { GridApiRef } from '../../_modules_/grid/models/api/gridApiRef'; -export const useDataGridComponent = (apiRef: GridApiRef, props: GridBaseComponentProps) => { +export const useDataGridComponent = (apiRef: GridApiRef, props: GridComponentProps) => { useLoggerFactory(apiRef, props); useApi(apiRef); useErrorHandler(apiRef, props); diff --git a/packages/grid/x-grid/src/XGrid.tsx b/packages/grid/x-grid/src/XGrid.tsx index 1d70bbe2c6de9..e74fa0b0d70db 100644 --- a/packages/grid/x-grid/src/XGrid.tsx +++ b/packages/grid/x-grid/src/XGrid.tsx @@ -4,7 +4,7 @@ import { LicenseInfo } from '@material-ui/x-license'; import { ponyfillGlobal } from '@material-ui/utils'; import { DEFAULT_GRID_OPTIONS, - GridBaseComponentProps, + GridComponentProps, GridBody, GridErrorHandler, GridFooterPlaceholder, @@ -27,7 +27,7 @@ if (process.env.NODE_ENV !== 'production' && RELEASE_INFO === '__RELEASE' + '_IN LicenseInfo.setReleaseInfo(RELEASE_INFO); -export type XGridProps = GridBaseComponentProps; +export type XGridProps = GridComponentProps; const XGridRaw = React.forwardRef(function XGrid(inProps, ref) { const apiRef = useGridApiRef(inProps.apiRef); diff --git a/packages/grid/x-grid/src/tests/columns.XGrid.test.tsx b/packages/grid/x-grid/src/tests/columns.XGrid.test.tsx index 54a48228e988c..b1f30e939fd40 100644 --- a/packages/grid/x-grid/src/tests/columns.XGrid.test.tsx +++ b/packages/grid/x-grid/src/tests/columns.XGrid.test.tsx @@ -12,7 +12,7 @@ import { expect } from 'chai'; import { useFakeTimers, spy } from 'sinon'; import { GridApiRef, - GridBaseComponentProps, + GridComponentProps, useGridApiRef, XGrid, GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS, @@ -46,7 +46,7 @@ describe(' - Columns', () => { columns: [{ field: 'brand' }], }; - const Test = (props: Partial) => { + const Test = (props: Partial) => { apiRef = useGridApiRef(); return (
diff --git a/packages/grid/x-grid/src/tests/editRows.XGrid.test.tsx b/packages/grid/x-grid/src/tests/editRows.XGrid.test.tsx index 4ba187a84bb3c..2b441ff3ac0e6 100644 --- a/packages/grid/x-grid/src/tests/editRows.XGrid.test.tsx +++ b/packages/grid/x-grid/src/tests/editRows.XGrid.test.tsx @@ -1,7 +1,7 @@ import { GRID_CELL_KEY_DOWN, GridApiRef, - GridBaseComponentProps, + GridComponentProps, useGridApiRef, XGrid, } from '@material-ui/x-grid'; @@ -54,7 +54,7 @@ describe(' - Edit Rows', () => { let apiRef: GridApiRef; - const TestCase = (props: Partial) => { + const TestCase = (props: Partial) => { apiRef = useGridApiRef(); return (
@@ -551,7 +551,7 @@ describe(' - Edit Rows', () => { }); it('should keep the right type', () => { - const Test = (props: Partial) => { + const Test = (props: Partial) => { apiRef = useGridApiRef(); return (
diff --git a/packages/grid/x-grid/src/tests/filtering.XGrid.test.tsx b/packages/grid/x-grid/src/tests/filtering.XGrid.test.tsx index 16b2736a73966..fe7f6a2b08c4d 100644 --- a/packages/grid/x-grid/src/tests/filtering.XGrid.test.tsx +++ b/packages/grid/x-grid/src/tests/filtering.XGrid.test.tsx @@ -1,7 +1,7 @@ import { getInitialGridFilterState, GridApiRef, - GridBaseComponentProps, + GridComponentProps, GridFilterModel, GridLinkOperator, GridPreferencePanelsValue, @@ -62,7 +62,7 @@ describe(' - Filter', () => { columns: [{ field: 'brand' }], }; - const TestCase = (props: Partial) => { + const TestCase = (props: Partial) => { const { rows, ...other } = props; apiRef = useGridApiRef(); return ( @@ -483,7 +483,7 @@ describe(' - Filter', () => { }); it('should control filter state when the model and the onChange are set', () => { - const ControlCase = (props: Partial) => { + const ControlCase = (props: Partial) => { const { rows, columns, ...others } = props; const [caseFilterModel, setFilterModel] = React.useState(getInitialGridFilterState()); const handleFilterChange = (newModel) => { diff --git a/packages/grid/x-grid/src/tests/rows.XGrid.test.tsx b/packages/grid/x-grid/src/tests/rows.XGrid.test.tsx index 4c5c1d26be49a..0b93a31b12963 100644 --- a/packages/grid/x-grid/src/tests/rows.XGrid.test.tsx +++ b/packages/grid/x-grid/src/tests/rows.XGrid.test.tsx @@ -9,7 +9,7 @@ import { expect } from 'chai'; import { getCell, getColumnValues } from 'test/utils/helperFn'; import { GridApiRef, - GridBaseComponentProps, + GridComponentProps, GridRowData, useGridApiRef, XGrid, @@ -166,7 +166,7 @@ describe(' - Rows', () => { let apiRef: GridApiRef; - const TestCase = (props: Partial) => { + const TestCase = (props: Partial) => { apiRef = useGridApiRef(); return (
diff --git a/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx b/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx index 10112ad506284..0b101dd4ecc5b 100644 --- a/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx +++ b/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx @@ -11,7 +11,7 @@ import { } from 'test/utils'; import { GridApiRef, - GridBaseComponentProps, + GridComponentProps, GridSelectionModel, useGridApiRef, XGrid, @@ -60,7 +60,7 @@ describe(' - Selection', () => { columns: [{ field: 'brand' }], }; - const Test = (props: Partial) => { + const Test = (props: Partial) => { apiRef = useGridApiRef(); return (
@@ -144,7 +144,7 @@ describe(' - Selection', () => { }); it('should clean the selected ids when the rows prop changes', () => { - const DemoTest = (props: Partial) => { + const DemoTest = (props: Partial) => { apiRef = useGridApiRef(); const [selectionModelState, setSelectionModelState] = React.useState(props.selectionModel); const handleSelectionChange = (model) => setSelectionModelState(model); @@ -176,7 +176,7 @@ describe(' - Selection', () => { it('should call onSelectionModelChange when selection state changes', () => { const handleSelectionModelChange = spy(); - const DemoTest = (props: Partial) => { + const DemoTest = (props: Partial) => { apiRef = useGridApiRef(); const [selectionModelState] = React.useState(props.selectionModel); @@ -289,7 +289,7 @@ describe(' - Selection', () => { }); it('should control selection state when the model and the onChange are set', () => { - const ControlCase = (props: Partial) => { + const ControlCase = (props: Partial) => { const { rows, columns, ...others } = props; const [selectionModel, setSelectionModel] = React.useState([0]); const handleSelectionChange = (newModel) => { diff --git a/packages/grid/x-grid/src/tests/sorting.XGrid.test.tsx b/packages/grid/x-grid/src/tests/sorting.XGrid.test.tsx index 20e5a08cdcbff..3ea87712d4eda 100644 --- a/packages/grid/x-grid/src/tests/sorting.XGrid.test.tsx +++ b/packages/grid/x-grid/src/tests/sorting.XGrid.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { GridApiRef, - GridBaseComponentProps, + GridComponentProps, GridSortModel, useGridApiRef, } from '@material-ui/data-grid'; @@ -59,7 +59,7 @@ describe(' - Sorting', () => { let apiRef: GridApiRef; - const TestCase = (props: Partial) => { + const TestCase = (props: Partial) => { const { rows, ...other } = props; apiRef = useGridApiRef(); return ( @@ -296,7 +296,7 @@ describe(' - Sorting', () => { it('should control sort state when the model and the onChange are set', () => { let expectedModel: GridSortModel = []; - const ControlCase = (props: Partial) => { + const ControlCase = (props: Partial) => { const { rows, columns, ...others } = props; const [caseSortModel, setSortModel] = React.useState([]); const handleSortChange = (newModel) => { diff --git a/packages/grid/x-grid/src/useXGridComponent.tsx b/packages/grid/x-grid/src/useXGridComponent.tsx index a6dd0bfc9ec34..d992af4a8860a 100644 --- a/packages/grid/x-grid/src/useXGridComponent.tsx +++ b/packages/grid/x-grid/src/useXGridComponent.tsx @@ -1,4 +1,4 @@ -import { GridBaseComponentProps } from '../../_modules_/grid/GridBaseComponentProps'; +import { GridComponentProps } from '../../_modules_/grid/GridComponentProps'; import { useGridClipboard } from '../../_modules_/grid/hooks/features/clipboard/useGridClipboard'; import { useGridColumnMenu } from '../../_modules_/grid/hooks/features/columnMenu/useGridColumnMenu'; import { useGridColumnReorder } from '../../_modules_/grid/hooks/features/columnReorder/useGridColumnReorder'; @@ -36,7 +36,7 @@ import { useResizeContainer } from '../../_modules_/grid/hooks/utils/useResizeCo import { useStateProp } from '../../_modules_/grid/hooks/utils/useStateProp'; import { GridApiRef } from '../../_modules_/grid/models/api/gridApiRef'; -export const useXGridComponent = (apiRef: GridApiRef, props: GridBaseComponentProps) => { +export const useXGridComponent = (apiRef: GridApiRef, props: GridComponentProps) => { useLoggerFactory(apiRef, props); useLicenseState(apiRef); useApi(apiRef); diff --git a/packages/storybook/src/stories/grid-data.stories.tsx b/packages/storybook/src/stories/grid-data.stories.tsx index d2eb6c0f87e4c..abca806039542 100644 --- a/packages/storybook/src/stories/grid-data.stories.tsx +++ b/packages/storybook/src/stories/grid-data.stories.tsx @@ -1,6 +1,6 @@ import { Story } from '@storybook/react'; import * as React from 'react'; -import { XGrid, GridOptionsProp, GridBaseComponentProps } from '@material-ui/x-grid'; +import { XGrid, GridOptionsProp, GridComponentProps } from '@material-ui/x-grid'; import { useData } from '../hooks/useData'; export default { @@ -64,7 +64,7 @@ const DemoDynamicContainerTemplate: Story< width: number | string; nbRows: number; nbCols: number; - } & GridBaseComponentProps + } & GridComponentProps > = ({ nbRows, nbCols, height, width, rows, columns, ...args }) => { const data = useData(nbRows, nbCols); return ( From bda9bfac73a2cb0b649f08b47925bf834da339e3 Mon Sep 17 00:00:00 2001 From: delangle Date: Tue, 27 Jul 2021 10:16:22 +0200 Subject: [PATCH 10/43] Prettier --- packages/grid/data-grid/src/DataGridPropTypes.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/grid/data-grid/src/DataGridPropTypes.ts b/packages/grid/data-grid/src/DataGridPropTypes.ts index 7c978b7ee81c7..8d1553227b575 100644 --- a/packages/grid/data-grid/src/DataGridPropTypes.ts +++ b/packages/grid/data-grid/src/DataGridPropTypes.ts @@ -177,11 +177,11 @@ export const DATAGRID_PROPTYPES = { selectionModel: chainPropTypes( PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]), (props: any) => { - if ( - !props.checkboxSelection && - Array.isArray(props.selectionModel) && - props.selectionModel.length > 1 - ) { + if ( + !props.checkboxSelection && + Array.isArray(props.selectionModel) && + props.selectionModel.length > 1 + ) { return new Error( [ `Material-UI: \` Date: Tue, 27 Jul 2021 10:53:50 +0200 Subject: [PATCH 11/43] Fix test error --- packages/grid/data-grid/src/tests/layout.DataGrid.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/data-grid/src/tests/layout.DataGrid.test.tsx b/packages/grid/data-grid/src/tests/layout.DataGrid.test.tsx index e71021fa2a2bc..2c72a46e29147 100644 --- a/packages/grid/data-grid/src/tests/layout.DataGrid.test.tsx +++ b/packages/grid/data-grid/src/tests/layout.DataGrid.test.tsx @@ -593,7 +593,7 @@ describe(' - Layout & Warnings', () => { // @ts-expect-error need to migrate helpers to TypeScript }).toErrorDev([ 'The data grid component requires all rows to have a unique id property', - 'The above error occurred in the component', + 'The above error occurred in the component', ]); expect((errorRef.current as any).errors).to.have.length(1); expect((errorRef.current as any).errors[0].toString()).to.include( From 3ace712e90dff1913b51783c1125b8b2bf06e47d Mon Sep 17 00:00:00 2001 From: delangle Date: Tue, 27 Jul 2021 11:03:13 +0200 Subject: [PATCH 12/43] Fix --- packages/grid/data-grid/src/tests/selection.DataGrid.test.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/grid/data-grid/src/tests/selection.DataGrid.test.tsx b/packages/grid/data-grid/src/tests/selection.DataGrid.test.tsx index 143be7a678c1a..2d2f48dd90433 100644 --- a/packages/grid/data-grid/src/tests/selection.DataGrid.test.tsx +++ b/packages/grid/data-grid/src/tests/selection.DataGrid.test.tsx @@ -376,9 +376,7 @@ describe(' - Selection', () => { render(); }) // @ts-expect-error need to migrate helpers to TypeScript - .toErrorDev( - 'selectionModel can only contain 1 item in DataGrid without checkbox selection.', - ); + .toErrorDev('selectionModel can only be of 1 item in DataGrid'); }); it('should not throw console error when selectionModel contains more than 1 item in DataGrid with checkbox selection', () => { From d6d4f31da7bcc8f5fed0d20d647bfb152ecbb572 Mon Sep 17 00:00:00 2001 From: delangle Date: Tue, 27 Jul 2021 11:26:20 +0200 Subject: [PATCH 13/43] Handle non-array selectionModel --- .../selection/gridSelectionSelector.ts | 38 +++++-------- .../features/selection/useGridSelection.ts | 9 ++- .../grid/models/gridSelectionModel.ts | 2 +- .../src/tests/selection.DataGrid.test.tsx | 56 ++++++++++++++++++- 4 files changed, 76 insertions(+), 29 deletions(-) diff --git a/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionSelector.ts b/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionSelector.ts index a75ec4de19d72..7a7cc412e45e3 100644 --- a/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionSelector.ts +++ b/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionSelector.ts @@ -1,39 +1,29 @@ -import { createSelector, OutputSelector } from 'reselect'; -import { gridRowsLookupSelector, GridRowsLookup } from '../rows/gridRowsSelector'; +import { createSelector } from 'reselect'; +import { gridRowsLookupSelector } from '../rows/gridRowsSelector'; import { GridState } from '../core/gridState'; -import { GridSelectionState } from './gridSelectionState'; -import { GridRowId, GridRowModel } from '../../../models/gridRows'; +import { GridRowId } from '../../../models/gridRows'; export const gridSelectionStateSelector = (state: GridState) => state.selection; -export const selectedGridRowsCountSelector: OutputSelector< - GridState, - number, - (res: GridSelectionState) => number -> = createSelector( - gridSelectionStateSelector, + +export const gridArraySelectionStateSelector = (state: GridState) => + Array.isArray(state.selection) ? state.selection : [state.selection]; + +export const selectedGridRowsCountSelector = createSelector( + gridArraySelectionStateSelector, (selection) => selection.length, ); -export const selectedGridRowsSelector = createSelector< - GridState, - GridSelectionState, - GridRowsLookup, - Map ->( - gridSelectionStateSelector, +export const selectedGridRowsSelector = createSelector( + gridArraySelectionStateSelector, gridRowsLookupSelector, (selectedRows, rowsLookup) => new Map(selectedRows.map((id) => [id, rowsLookup[id]])), ); -export const selectedIdsLookupSelector: OutputSelector< - GridState, - Record, - (res: GridSelectionState) => Record -> = createSelector>( - gridSelectionStateSelector, +export const selectedIdsLookupSelector = createSelector( + gridArraySelectionStateSelector, (selection) => selection.reduce((lookup, rowId) => { lookup[rowId] = rowId; return lookup; - }, {}), + }, {} as Record), ); diff --git a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts index 898b16f8e5de9..ec73b0dd71dbf 100644 --- a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts +++ b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts @@ -19,6 +19,9 @@ import { selectedIdsLookupSelector, } from './gridSelectionSelector'; +const getArraySelectionModel = (selectionModel: GridSelectionModel) => + Array.isArray(selectionModel) ? [...selectionModel] : [selectionModel]; + export const useGridSelection = (apiRef: GridApiRef, props: GridComponentProps): void => { const logger = useLogger('useGridSelection'); const [, setGridState, forceUpdate] = useGridState(apiRef); @@ -142,7 +145,7 @@ export const useGridSelection = (apiRef: GridApiRef, props: GridComponentProps): const setSelectionModel = React.useCallback( (model: GridSelectionModel) => { - apiRef.current.selectRows(model, true, true); + apiRef.current.selectRows(getArraySelectionModel(model), true, true); }, [apiRef], ); @@ -186,7 +189,7 @@ export const useGridSelection = (apiRef: GridApiRef, props: GridComponentProps): React.useEffect(() => { // Rows changed setGridState((state) => { - const newSelectionState = [...state.selection]; + const newSelectionState = getArraySelectionModel(state.selection); const selectionLookup = selectedIdsLookupSelector(state); let hasChanged = false; newSelectionState.forEach((id: GridRowId) => { @@ -217,7 +220,7 @@ export const useGridSelection = (apiRef: GridApiRef, props: GridComponentProps): React.useEffect(() => { // isRowSelectable changed setGridState((state) => { - const newSelectionState = [...state.selection]; + const newSelectionState = getArraySelectionModel(state.selection); const selectionLookup = selectedIdsLookupSelector(state); let hasChanged = false; newSelectionState.forEach((id: GridRowId) => { diff --git a/packages/grid/_modules_/grid/models/gridSelectionModel.ts b/packages/grid/_modules_/grid/models/gridSelectionModel.ts index 808636f89763d..26b314ebeae30 100644 --- a/packages/grid/_modules_/grid/models/gridSelectionModel.ts +++ b/packages/grid/_modules_/grid/models/gridSelectionModel.ts @@ -1,3 +1,3 @@ import { GridRowId } from './gridRows'; -export type GridSelectionModel = GridRowId[]; +export type GridSelectionModel = GridRowId[] | GridRowId; diff --git a/packages/grid/data-grid/src/tests/selection.DataGrid.test.tsx b/packages/grid/data-grid/src/tests/selection.DataGrid.test.tsx index 2d2f48dd90433..383360c426699 100644 --- a/packages/grid/data-grid/src/tests/selection.DataGrid.test.tsx +++ b/packages/grid/data-grid/src/tests/selection.DataGrid.test.tsx @@ -179,7 +179,7 @@ describe(' - Selection', () => { }); describe('props: selectionModel', () => { - it('should select rows when initialised', () => { + it('should select rows when initialised (array-version)', () => { render(
- Selection', () => { expect(row).to.have.class('Mui-selected'); }); + it('should select rows when initialised (non-array version)', () => { + render( +
+ +
, + ); + const row = getRow(1); + expect(row).to.have.class('Mui-selected'); + }); + + it('should allow to switch selectionModel from array version to non array version', () => { + const data = { + rows: [ + { + id: 0, + brand: 'Nike', + }, + { + id: 1, + brand: 'Hugo Boss', + }, + ], + columns: [{ field: 'brand', width: 100 }], + }; + + function Demo(props) { + return ( +
+ +
+ ); + } + + const { setProps } = render(); + + setProps({ selectionModel: 1 }); + const row = getRow(1); + expect(row).to.have.class('Mui-selected'); + }); + it('should deselect other selected rows', () => { const data = { rows: [ From 803303ded6da76c5705cb837b22280248df61cfb Mon Sep 17 00:00:00 2001 From: delangle Date: Tue, 27 Jul 2021 13:33:29 +0200 Subject: [PATCH 14/43] Build api --- .../_modules_/grid/hooks/features/export/useGridCsvExport.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx b/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx index a298326655c52..4a58714a87e33 100644 --- a/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx +++ b/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx @@ -38,7 +38,7 @@ export const useGridCsvExport = (apiRef: GridApiRef): void => { return buildCSV({ columns: exportedColumns, rows: visibleSortedRows, - selectedRowIds: selection, + selectedRowIds: Array.isArray(selection) ? selection : [selection], getCellParams: apiRef.current.getCellParams, delimiterCharacter: options?.delimiter || ',', }); From aae0d22219c578923e6ae4de73404fce64dd1320 Mon Sep 17 00:00:00 2001 From: delangle Date: Tue, 27 Jul 2021 13:40:14 +0200 Subject: [PATCH 15/43] Fix --- .../data-grid/selection/ControlledSelectionGrid.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/components/data-grid/selection/ControlledSelectionGrid.tsx b/docs/src/pages/components/data-grid/selection/ControlledSelectionGrid.tsx index a2be7dc406fde..d068d7c71cc32 100644 --- a/docs/src/pages/components/data-grid/selection/ControlledSelectionGrid.tsx +++ b/docs/src/pages/components/data-grid/selection/ControlledSelectionGrid.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { DataGrid, GridRowId } from '@material-ui/data-grid'; +import { DataGrid, GridSelectionModel } from '@material-ui/data-grid'; import { useDemoData } from '@material-ui/x-grid-data-generator'; export default function ControlledSelectionGrid() { @@ -9,7 +9,7 @@ export default function ControlledSelectionGrid() { maxColumns: 6, }); - const [selectionModel, setSelectionModel] = React.useState([]); + const [selectionModel, setSelectionModel] = React.useState([]); return (
From 27150683d55a4a981e00070c89871a708275a8ac Mon Sep 17 00:00:00 2001 From: delangle Date: Tue, 27 Jul 2021 14:10:49 +0200 Subject: [PATCH 16/43] Do not put XGrid-only-props in DataGrid interface --- .../hooks/features/density/densityState.ts | 15 ++++++--- .../_modules_/grid/models/gridOptions.tsx | 4 +-- packages/grid/data-grid/src/DataGrid.tsx | 32 +++++++++++-------- packages/grid/data-grid/src/DataGridProps.ts | 12 +------ .../data-grid/src/tests/DataGrid.spec.tsx | 3 +- .../src/tests/pagination.DataGrid.test.tsx | 20 ++++++------ .../src/tests/selection.DataGrid.test.tsx | 1 + packages/grid/x-grid/src/XGrid.tsx | 5 ++- 8 files changed, 47 insertions(+), 45 deletions(-) diff --git a/packages/grid/_modules_/grid/hooks/features/density/densityState.ts b/packages/grid/_modules_/grid/hooks/features/density/densityState.ts index dd6b46751cd2c..4ce742a338a0b 100644 --- a/packages/grid/_modules_/grid/hooks/features/density/densityState.ts +++ b/packages/grid/_modules_/grid/hooks/features/density/densityState.ts @@ -1,5 +1,4 @@ -import { GridDensity } from '../../../models/gridDensity'; -import { DEFAULT_GRID_OPTIONS } from '../../../models/gridOptions'; +import { GridDensity, GridDensityTypes } from '../../../models/gridDensity'; export interface GridGridDensity { value: GridDensity; @@ -7,10 +6,16 @@ export interface GridGridDensity { headerHeight: number; } +export const DEFAULT_GRID_DENSITY = GridDensityTypes.Standard; + +export const DEFAULT_GRID_ROW_HEIGHT = 52; + +export const DEFAULT_GRID_HEADER_HEIGHT = 56; + export function getInitialGridDensityState(): GridGridDensity { return { - value: DEFAULT_GRID_OPTIONS.density, - rowHeight: DEFAULT_GRID_OPTIONS.rowHeight, - headerHeight: DEFAULT_GRID_OPTIONS.headerHeight, + value: DEFAULT_GRID_DENSITY, + rowHeight: DEFAULT_GRID_ROW_HEIGHT, + headerHeight: DEFAULT_GRID_HEADER_HEIGHT, }; } diff --git a/packages/grid/_modules_/grid/models/gridOptions.tsx b/packages/grid/_modules_/grid/models/gridOptions.tsx index a3b7f42b365fa..28d9b5b819619 100644 --- a/packages/grid/_modules_/grid/models/gridOptions.tsx +++ b/packages/grid/_modules_/grid/models/gridOptions.tsx @@ -489,7 +489,7 @@ export interface GridOptions { /** * The default [[GridOptions]] object that will be used to merge with the 'options' passed in the react component prop. */ -export const DEFAULT_GRID_OPTIONS: GridOptions = { +export const DEFAULT_GRID_OPTIONS = { columnBuffer: 2, columnTypes: getGridDefaultColumnTypes(), density: GridDensityTypes.Standard, @@ -501,7 +501,7 @@ export const DEFAULT_GRID_OPTIONS: GridOptions = { rowsPerPageOptions: [25, 50, 100], scrollEndThreshold: 80, sortingMode: GridFeatureModeConstant.client, - sortingOrder: ['asc', 'desc', null], + sortingOrder: ['asc' as const, 'desc' as const, null], logger: console, logLevel: process.env.NODE_ENV === 'production' ? 'error' : 'warn', }; diff --git a/packages/grid/data-grid/src/DataGrid.tsx b/packages/grid/data-grid/src/DataGrid.tsx index 8bf99900f6daa..96e1a0bbddb3d 100644 --- a/packages/grid/data-grid/src/DataGrid.tsx +++ b/packages/grid/data-grid/src/DataGrid.tsx @@ -3,6 +3,7 @@ import { DATAGRID_PROPTYPES } from './DataGridPropTypes'; import { DEFAULT_GRID_OPTIONS, GridBody, + GridComponentProps, GridErrorHandler, GridFooterPlaceholder, GridHeaderPlaceholder, @@ -21,12 +22,23 @@ const DataGridRaw = React.forwardRef(function Dat throw new Error(`'props.pageSize' cannot exceed 100 in DataGrid.`); } + const props: GridComponentProps = { + ...inProps, + disableColumnResize: true, + disableColumnReorder: true, + disableMultipleColumnsFiltering: true, + disableMultipleColumnsSorting: true, + disableMultipleSelection: true, + pagination: true, + checkboxSelectionVisibleOnly: false, + }; + const apiRef = useGridApiRef(); - useDataGridComponent(apiRef, inProps); + useDataGridComponent(apiRef, props); return ( - + @@ -37,18 +49,10 @@ const DataGridRaw = React.forwardRef(function Dat ); }); -DataGridRaw.defaultProps = { - ...DEFAULT_GRID_OPTIONS, - apiRef: undefined, - disableColumnResize: true, - disableColumnReorder: true, - disableMultipleColumnsFiltering: true, - disableMultipleColumnsSorting: true, - disableMultipleSelection: true, - pagination: true, - onRowsScrollEnd: undefined, - checkboxSelectionVisibleOnly: false, -}; + +export const DATA_GRID_DEFAULT_PROPS = DEFAULT_GRID_OPTIONS; + +DataGridRaw.defaultProps = DATA_GRID_DEFAULT_PROPS; export const DataGrid = React.memo(DataGridRaw); diff --git a/packages/grid/data-grid/src/DataGridProps.ts b/packages/grid/data-grid/src/DataGridProps.ts index 4b14f31f1189f..cf38b3166f77b 100644 --- a/packages/grid/data-grid/src/DataGridProps.ts +++ b/packages/grid/data-grid/src/DataGridProps.ts @@ -19,14 +19,4 @@ export type DataGridProps = Omit< | 'onRowsScrollEnd' | 'pagination' | 'scrollEndThreshold' -> & { - apiRef?: undefined; - checkboxSelectionVisibleOnly?: false; - disableColumnResize?: true; - disableColumnReorder?: true; - disableMultipleColumnsFiltering?: true; - disableMultipleColumnsSorting?: true; - disableMultipleSelection?: true; - onRowsScrollEnd?: undefined; - pagination?: true; -}; +>; diff --git a/packages/grid/data-grid/src/tests/DataGrid.spec.tsx b/packages/grid/data-grid/src/tests/DataGrid.spec.tsx index 62ecbae6fb2a0..6c568d66cf62d 100644 --- a/packages/grid/data-grid/src/tests/DataGrid.spec.tsx +++ b/packages/grid/data-grid/src/tests/DataGrid.spec.tsx @@ -6,8 +6,9 @@ function EnterpriseTest() { return (
+ {/* @ts-expect-error Object literal may only specify known properties, but 'pagination' does not exist in type */} - {/* @ts-expect-error Type 'false' is not assignable to type 'true | undefined' */} + {/* @ts-expect-error Object literal may only specify known properties, but 'pagination' does not exist in type */} {/* @ts-expect-error Type 'GridApiRef' is not assignable to type 'undefined' */} diff --git a/packages/grid/data-grid/src/tests/pagination.DataGrid.test.tsx b/packages/grid/data-grid/src/tests/pagination.DataGrid.test.tsx index 12cc404979cd0..c95485379b9be 100644 --- a/packages/grid/data-grid/src/tests/pagination.DataGrid.test.tsx +++ b/packages/grid/data-grid/src/tests/pagination.DataGrid.test.tsx @@ -12,7 +12,7 @@ import { expect } from 'chai'; import { DataGrid, DataGridProps, - DEFAULT_GRID_OPTIONS, + DATA_GRID_DEFAULT_PROPS, GridLinkOperator, GridRowsProp, } from '@material-ui/data-grid'; @@ -35,7 +35,7 @@ describe(' - Pagination', () => { return (
- +
); }; @@ -153,7 +153,6 @@ describe(' - Pagination', () => { return ( - Pagination', () => { return (
- +
); }; @@ -333,8 +332,8 @@ describe(' - Pagination', () => { const footerHeight = document.querySelector('.MuiDataGrid-footerContainer')!.clientHeight; const expectedFullPageRowsLength = Math.floor( - (height - DEFAULT_GRID_OPTIONS.headerHeight - footerHeight) / - DEFAULT_GRID_OPTIONS.rowHeight, + (height - DATA_GRID_DEFAULT_PROPS.headerHeight - footerHeight) / + DATA_GRID_DEFAULT_PROPS.rowHeight, ); let rows = getRows(); @@ -384,12 +383,12 @@ describe(' - Pagination', () => { const footerHeight = document.querySelector('.MuiDataGrid-footerContainer')!.clientHeight; const expectedViewportRowsLengthBefore = Math.floor( - (heightBefore - DEFAULT_GRID_OPTIONS.headerHeight - footerHeight) / - DEFAULT_GRID_OPTIONS.rowHeight, + (heightBefore - DATA_GRID_DEFAULT_PROPS.headerHeight - footerHeight) / + DATA_GRID_DEFAULT_PROPS.rowHeight, ); const expectedViewportRowsLengthAfter = Math.floor( - (heightAfter - DEFAULT_GRID_OPTIONS.headerHeight - footerHeight) / - DEFAULT_GRID_OPTIONS.rowHeight, + (heightAfter - DATA_GRID_DEFAULT_PROPS.headerHeight - footerHeight) / + DATA_GRID_DEFAULT_PROPS.rowHeight, ); let rows = document.querySelectorAll('.MuiDataGrid-viewport [role="row"]'); @@ -453,7 +452,6 @@ describe(' - Pagination', () => { - Selection', () => { ]} columns={[{ field: 'brand', width: 100 }]} checkboxSelection + // @ts-ignore pagination pageSize={1} /> diff --git a/packages/grid/x-grid/src/XGrid.tsx b/packages/grid/x-grid/src/XGrid.tsx index e74fa0b0d70db..a86b01e24a264 100644 --- a/packages/grid/x-grid/src/XGrid.tsx +++ b/packages/grid/x-grid/src/XGrid.tsx @@ -46,7 +46,10 @@ const XGridRaw = React.forwardRef(function XGrid(inP ); }); -XGridRaw.defaultProps = DEFAULT_GRID_OPTIONS; + +export const X_GRID_DEFAULT_PROPS = DEFAULT_GRID_OPTIONS; + +XGridRaw.defaultProps = X_GRID_DEFAULT_PROPS; export const XGrid = React.memo(XGridRaw); From 573ee98ecabf626962d17d904077e3f1be58bf63 Mon Sep 17 00:00:00 2001 From: delangle Date: Tue, 27 Jul 2021 14:24:06 +0200 Subject: [PATCH 17/43] Fix --- .../components/data-grid/components/CustomPaginationGrid.js | 1 - .../components/data-grid/components/CustomPaginationGrid.tsx | 1 - .../pages/components/data-grid/pagination/AutoPaginationGrid.js | 2 +- .../components/data-grid/pagination/AutoPaginationGrid.tsx | 2 +- .../components/data-grid/pagination/BasicPaginationGrid.js | 2 +- .../components/data-grid/pagination/BasicPaginationGrid.tsx | 2 +- .../components/data-grid/pagination/ControlledPaginationGrid.js | 1 - .../data-grid/pagination/ControlledPaginationGrid.tsx | 1 - .../components/data-grid/pagination/CursorPaginationGrid.js | 1 - .../components/data-grid/pagination/CursorPaginationGrid.tsx | 1 - .../components/data-grid/pagination/ServerPaginationGrid.js | 1 - .../components/data-grid/pagination/ServerPaginationGrid.tsx | 1 - 12 files changed, 4 insertions(+), 12 deletions(-) diff --git a/docs/src/pages/components/data-grid/components/CustomPaginationGrid.js b/docs/src/pages/components/data-grid/components/CustomPaginationGrid.js index 7a6c245ad52bc..7d615296dac09 100644 --- a/docs/src/pages/components/data-grid/components/CustomPaginationGrid.js +++ b/docs/src/pages/components/data-grid/components/CustomPaginationGrid.js @@ -35,7 +35,6 @@ export default function CustomPaginationGrid() { return (
- +
); } diff --git a/docs/src/pages/components/data-grid/pagination/AutoPaginationGrid.tsx b/docs/src/pages/components/data-grid/pagination/AutoPaginationGrid.tsx index 860d4760fc60f..85a7ca81611b5 100644 --- a/docs/src/pages/components/data-grid/pagination/AutoPaginationGrid.tsx +++ b/docs/src/pages/components/data-grid/pagination/AutoPaginationGrid.tsx @@ -11,7 +11,7 @@ export default function AutoPaginationGrid() { return (
- +
); } diff --git a/docs/src/pages/components/data-grid/pagination/BasicPaginationGrid.js b/docs/src/pages/components/data-grid/pagination/BasicPaginationGrid.js index 2a8fb6ca28d0f..99e7ad882e753 100644 --- a/docs/src/pages/components/data-grid/pagination/BasicPaginationGrid.js +++ b/docs/src/pages/components/data-grid/pagination/BasicPaginationGrid.js @@ -11,7 +11,7 @@ export default function BasicPaginationGrid() { return (
- +
); } diff --git a/docs/src/pages/components/data-grid/pagination/BasicPaginationGrid.tsx b/docs/src/pages/components/data-grid/pagination/BasicPaginationGrid.tsx index 2a8fb6ca28d0f..99e7ad882e753 100644 --- a/docs/src/pages/components/data-grid/pagination/BasicPaginationGrid.tsx +++ b/docs/src/pages/components/data-grid/pagination/BasicPaginationGrid.tsx @@ -11,7 +11,7 @@ export default function BasicPaginationGrid() { return (
- +
); } diff --git a/docs/src/pages/components/data-grid/pagination/ControlledPaginationGrid.js b/docs/src/pages/components/data-grid/pagination/ControlledPaginationGrid.js index fbfe04cccbd14..45cea1d684606 100644 --- a/docs/src/pages/components/data-grid/pagination/ControlledPaginationGrid.js +++ b/docs/src/pages/components/data-grid/pagination/ControlledPaginationGrid.js @@ -17,7 +17,6 @@ export default function ControlledPaginationGrid() { page={page} onPageChange={(newPage) => setPage(newPage)} pageSize={5} - pagination {...data} />
diff --git a/docs/src/pages/components/data-grid/pagination/ControlledPaginationGrid.tsx b/docs/src/pages/components/data-grid/pagination/ControlledPaginationGrid.tsx index d3f6759d8b42e..c902275e6a0ef 100644 --- a/docs/src/pages/components/data-grid/pagination/ControlledPaginationGrid.tsx +++ b/docs/src/pages/components/data-grid/pagination/ControlledPaginationGrid.tsx @@ -16,7 +16,6 @@ export default function ControlledPaginationGrid() { page={page} onPageChange={(newPage) => setPage(newPage)} pageSize={5} - pagination {...data} />
diff --git a/docs/src/pages/components/data-grid/pagination/CursorPaginationGrid.js b/docs/src/pages/components/data-grid/pagination/CursorPaginationGrid.js index 472ffe614928a..aa45ed043c393 100644 --- a/docs/src/pages/components/data-grid/pagination/CursorPaginationGrid.js +++ b/docs/src/pages/components/data-grid/pagination/CursorPaginationGrid.js @@ -71,7 +71,6 @@ export default function CursorPaginationGrid() { Date: Tue, 27 Jul 2021 14:27:15 +0200 Subject: [PATCH 18/43] Fix --- .../components/data-grid/pagination/SizePaginationGrid.js | 1 - .../components/data-grid/pagination/SizePaginationGrid.tsx | 1 - packages/storybook/src/stories/grid-pagination.stories.tsx | 7 +++---- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/docs/src/pages/components/data-grid/pagination/SizePaginationGrid.js b/docs/src/pages/components/data-grid/pagination/SizePaginationGrid.js index 58bb2670cabe5..dd0ab1db2e08f 100644 --- a/docs/src/pages/components/data-grid/pagination/SizePaginationGrid.js +++ b/docs/src/pages/components/data-grid/pagination/SizePaginationGrid.js @@ -17,7 +17,6 @@ export default function SizePaginationGrid() { pageSize={pageSize} onPageSizeChange={(newPageSize) => setPageSize(newPageSize)} rowsPerPageOptions={[5, 10, 20]} - pagination {...data} />
diff --git a/docs/src/pages/components/data-grid/pagination/SizePaginationGrid.tsx b/docs/src/pages/components/data-grid/pagination/SizePaginationGrid.tsx index 3ad101a4e7176..8342557d3596f 100644 --- a/docs/src/pages/components/data-grid/pagination/SizePaginationGrid.tsx +++ b/docs/src/pages/components/data-grid/pagination/SizePaginationGrid.tsx @@ -17,7 +17,6 @@ export default function SizePaginationGrid() { pageSize={pageSize} onPageSizeChange={(newPageSize) => setPageSize(newPageSize)} rowsPerPageOptions={[5, 10, 20]} - pagination {...data} />
diff --git a/packages/storybook/src/stories/grid-pagination.stories.tsx b/packages/storybook/src/stories/grid-pagination.stories.tsx index 84b7c0717c4a3..07d8b7d6f3cdf 100644 --- a/packages/storybook/src/stories/grid-pagination.stories.tsx +++ b/packages/storybook/src/stories/grid-pagination.stories.tsx @@ -32,7 +32,7 @@ export function PageSize100() { return (
- +
); } @@ -366,7 +366,6 @@ export function ServerPaginationDocsDemo() { - +
); } @@ -407,7 +406,7 @@ const xyColumns = [ export function SmallAutoPageSizeLastPageSnap() { return (
- +
); } From 5f3d5dbd730bfba6effa15314e3906e7cd02e714 Mon Sep 17 00:00:00 2001 From: delangle Date: Tue, 27 Jul 2021 14:57:38 +0200 Subject: [PATCH 19/43] Fix --- packages/grid/data-grid/src/DataGrid.tsx | 33 +++++++++++++++--------- 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/packages/grid/data-grid/src/DataGrid.tsx b/packages/grid/data-grid/src/DataGrid.tsx index 96e1a0bbddb3d..c4b84580d5f47 100644 --- a/packages/grid/data-grid/src/DataGrid.tsx +++ b/packages/grid/data-grid/src/DataGrid.tsx @@ -14,6 +14,20 @@ import { GridContextProvider } from '../../_modules_/grid/context/GridContextPro import { useDataGridComponent } from './useDataGridComponent'; import { DataGridProps, MAX_PAGE_SIZE } from './DataGridProps'; +const DATA_GRID_FORCED_PROPS = { + apiRef: undefined, + disableColumnResize: true, + disableColumnReorder: true, + disableMultipleColumnsFiltering: true, + disableMultipleColumnsSorting: true, + disableMultipleSelection: true, + pagination: true, + onRowsScrollEnd: undefined, + checkboxSelectionVisibleOnly: false, +}; + +export const DATA_GRID_DEFAULT_PROPS = DEFAULT_GRID_OPTIONS; + const DataGridRaw = React.forwardRef(function DataGrid( inProps, ref, @@ -22,16 +36,13 @@ const DataGridRaw = React.forwardRef(function Dat throw new Error(`'props.pageSize' cannot exceed 100 in DataGrid.`); } - const props: GridComponentProps = { - ...inProps, - disableColumnResize: true, - disableColumnReorder: true, - disableMultipleColumnsFiltering: true, - disableMultipleColumnsSorting: true, - disableMultipleSelection: true, - pagination: true, - checkboxSelectionVisibleOnly: false, - }; + const props = React.useMemo( + () => ({ + ...inProps, + ...DATA_GRID_FORCED_PROPS, + }), + [inProps], + ); const apiRef = useGridApiRef(); @@ -50,8 +61,6 @@ const DataGridRaw = React.forwardRef(function Dat ); }); -export const DATA_GRID_DEFAULT_PROPS = DEFAULT_GRID_OPTIONS; - DataGridRaw.defaultProps = DATA_GRID_DEFAULT_PROPS; export const DataGrid = React.memo(DataGridRaw); From e41fd1596b003ffa123518bdcb78be8740bc0271 Mon Sep 17 00:00:00 2001 From: delangle Date: Tue, 27 Jul 2021 15:02:01 +0200 Subject: [PATCH 20/43] Fix --- packages/grid/data-grid/src/DataGrid.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/data-grid/src/DataGrid.tsx b/packages/grid/data-grid/src/DataGrid.tsx index c4b84580d5f47..c33feefc33c42 100644 --- a/packages/grid/data-grid/src/DataGrid.tsx +++ b/packages/grid/data-grid/src/DataGrid.tsx @@ -14,7 +14,7 @@ import { GridContextProvider } from '../../_modules_/grid/context/GridContextPro import { useDataGridComponent } from './useDataGridComponent'; import { DataGridProps, MAX_PAGE_SIZE } from './DataGridProps'; -const DATA_GRID_FORCED_PROPS = { +const DATA_GRID_FORCED_PROPS: Omit = { apiRef: undefined, disableColumnResize: true, disableColumnReorder: true, From c64bbdf448396ff96c84f69aa850b48ab15c0998 Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 28 Jul 2021 08:54:43 +0200 Subject: [PATCH 21/43] Code review --- .../components/CustomPaginationGrid.js | 1 + .../components/CustomPaginationGrid.tsx | 1 + .../pagination/AutoPaginationGrid.js | 2 +- .../pagination/AutoPaginationGrid.tsx | 2 +- .../pagination/BasicPaginationGrid.js | 2 +- .../pagination/BasicPaginationGrid.tsx | 2 +- .../pagination/ControlledPaginationGrid.js | 1 + .../pagination/ControlledPaginationGrid.tsx | 1 + .../pagination/CursorPaginationGrid.js | 1 + .../pagination/CursorPaginationGrid.tsx | 1 + .../pagination/ServerPaginationGrid.js | 1 + .../pagination/ServerPaginationGrid.tsx | 1 + .../pagination/SizePaginationGrid.js | 1 + .../pagination/SizePaginationGrid.tsx | 1 + .../hooks/features/density/densityState.ts | 6 ++-- .../features/export/useGridCsvExport.tsx | 6 ++-- .../selection/gridSelectionSelector.ts | 2 +- .../features/selection/useGridSelection.ts | 5 +-- packages/grid/data-grid/src/DataGrid.tsx | 8 ++--- .../grid/data-grid/src/DataGridPropTypes.ts | 2 +- packages/grid/data-grid/src/DataGridProps.ts | 4 ++- .../src/tests/pagination.DataGrid.test.tsx | 33 +++++++++++-------- packages/grid/x-grid/src/XGrid.tsx | 4 +-- 23 files changed, 51 insertions(+), 37 deletions(-) diff --git a/docs/src/pages/components/data-grid/components/CustomPaginationGrid.js b/docs/src/pages/components/data-grid/components/CustomPaginationGrid.js index 7d615296dac09..7a6c245ad52bc 100644 --- a/docs/src/pages/components/data-grid/components/CustomPaginationGrid.js +++ b/docs/src/pages/components/data-grid/components/CustomPaginationGrid.js @@ -35,6 +35,7 @@ export default function CustomPaginationGrid() { return (
- +
); } diff --git a/docs/src/pages/components/data-grid/pagination/AutoPaginationGrid.tsx b/docs/src/pages/components/data-grid/pagination/AutoPaginationGrid.tsx index 85a7ca81611b5..860d4760fc60f 100644 --- a/docs/src/pages/components/data-grid/pagination/AutoPaginationGrid.tsx +++ b/docs/src/pages/components/data-grid/pagination/AutoPaginationGrid.tsx @@ -11,7 +11,7 @@ export default function AutoPaginationGrid() { return (
- +
); } diff --git a/docs/src/pages/components/data-grid/pagination/BasicPaginationGrid.js b/docs/src/pages/components/data-grid/pagination/BasicPaginationGrid.js index 99e7ad882e753..2a8fb6ca28d0f 100644 --- a/docs/src/pages/components/data-grid/pagination/BasicPaginationGrid.js +++ b/docs/src/pages/components/data-grid/pagination/BasicPaginationGrid.js @@ -11,7 +11,7 @@ export default function BasicPaginationGrid() { return (
- +
); } diff --git a/docs/src/pages/components/data-grid/pagination/BasicPaginationGrid.tsx b/docs/src/pages/components/data-grid/pagination/BasicPaginationGrid.tsx index 99e7ad882e753..2a8fb6ca28d0f 100644 --- a/docs/src/pages/components/data-grid/pagination/BasicPaginationGrid.tsx +++ b/docs/src/pages/components/data-grid/pagination/BasicPaginationGrid.tsx @@ -11,7 +11,7 @@ export default function BasicPaginationGrid() { return (
- +
); } diff --git a/docs/src/pages/components/data-grid/pagination/ControlledPaginationGrid.js b/docs/src/pages/components/data-grid/pagination/ControlledPaginationGrid.js index 45cea1d684606..fbfe04cccbd14 100644 --- a/docs/src/pages/components/data-grid/pagination/ControlledPaginationGrid.js +++ b/docs/src/pages/components/data-grid/pagination/ControlledPaginationGrid.js @@ -17,6 +17,7 @@ export default function ControlledPaginationGrid() { page={page} onPageChange={(newPage) => setPage(newPage)} pageSize={5} + pagination {...data} />
diff --git a/docs/src/pages/components/data-grid/pagination/ControlledPaginationGrid.tsx b/docs/src/pages/components/data-grid/pagination/ControlledPaginationGrid.tsx index c902275e6a0ef..d3f6759d8b42e 100644 --- a/docs/src/pages/components/data-grid/pagination/ControlledPaginationGrid.tsx +++ b/docs/src/pages/components/data-grid/pagination/ControlledPaginationGrid.tsx @@ -16,6 +16,7 @@ export default function ControlledPaginationGrid() { page={page} onPageChange={(newPage) => setPage(newPage)} pageSize={5} + pagination {...data} />
diff --git a/docs/src/pages/components/data-grid/pagination/CursorPaginationGrid.js b/docs/src/pages/components/data-grid/pagination/CursorPaginationGrid.js index aa45ed043c393..472ffe614928a 100644 --- a/docs/src/pages/components/data-grid/pagination/CursorPaginationGrid.js +++ b/docs/src/pages/components/data-grid/pagination/CursorPaginationGrid.js @@ -71,6 +71,7 @@ export default function CursorPaginationGrid() { setPageSize(newPageSize)} rowsPerPageOptions={[5, 10, 20]} + pagination {...data} />
diff --git a/docs/src/pages/components/data-grid/pagination/SizePaginationGrid.tsx b/docs/src/pages/components/data-grid/pagination/SizePaginationGrid.tsx index 8342557d3596f..3ad101a4e7176 100644 --- a/docs/src/pages/components/data-grid/pagination/SizePaginationGrid.tsx +++ b/docs/src/pages/components/data-grid/pagination/SizePaginationGrid.tsx @@ -17,6 +17,7 @@ export default function SizePaginationGrid() { pageSize={pageSize} onPageSizeChange={(newPageSize) => setPageSize(newPageSize)} rowsPerPageOptions={[5, 10, 20]} + pagination {...data} />
diff --git a/packages/grid/_modules_/grid/hooks/features/density/densityState.ts b/packages/grid/_modules_/grid/hooks/features/density/densityState.ts index 4ce742a338a0b..c43fc54a84bea 100644 --- a/packages/grid/_modules_/grid/hooks/features/density/densityState.ts +++ b/packages/grid/_modules_/grid/hooks/features/density/densityState.ts @@ -6,11 +6,11 @@ export interface GridGridDensity { headerHeight: number; } -export const DEFAULT_GRID_DENSITY = GridDensityTypes.Standard; +const DEFAULT_GRID_DENSITY = GridDensityTypes.Standard; -export const DEFAULT_GRID_ROW_HEIGHT = 52; +const DEFAULT_GRID_ROW_HEIGHT = 52; -export const DEFAULT_GRID_HEADER_HEIGHT = 56; +const DEFAULT_GRID_HEADER_HEIGHT = 56; export function getInitialGridDensityState(): GridGridDensity { return { diff --git a/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx b/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx index 4a58714a87e33..8a0df95e0e0ef 100644 --- a/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx +++ b/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx @@ -4,7 +4,7 @@ import { useGridApiMethod } from '../../root/useGridApiMethod'; import { useGridSelector } from '../core/useGridSelector'; import { allGridColumnsSelector, visibleGridColumnsSelector } from '../columns'; import { visibleSortedGridRowsSelector } from '../filter'; -import { gridSelectionStateSelector } from '../selection'; +import { gridArraySelectionStateSelector } from '../selection'; import { GridCsvExportApi } from '../../../models/api/gridCsvExportApi'; import { GridExportCsvOptions } from '../../../models/gridExport'; import { useLogger } from '../../utils/useLogger'; @@ -17,7 +17,7 @@ export const useGridCsvExport = (apiRef: GridApiRef): void => { const visibleColumns = useGridSelector(apiRef, visibleGridColumnsSelector); const columns = useGridSelector(apiRef, allGridColumnsSelector); const visibleSortedRows = useGridSelector(apiRef, visibleSortedGridRowsSelector); - const selection = useGridSelector(apiRef, gridSelectionStateSelector); + const selection = useGridSelector(apiRef, gridArraySelectionStateSelector); const getDataAsCsv = React.useCallback( (options?: GridExportCsvOptions): string => { @@ -38,7 +38,7 @@ export const useGridCsvExport = (apiRef: GridApiRef): void => { return buildCSV({ columns: exportedColumns, rows: visibleSortedRows, - selectedRowIds: Array.isArray(selection) ? selection : [selection], + selectedRowIds: selection, getCellParams: apiRef.current.getCellParams, delimiterCharacter: options?.delimiter || ',', }); diff --git a/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionSelector.ts b/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionSelector.ts index 7a7cc412e45e3..5d1a0e16ecfe5 100644 --- a/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionSelector.ts +++ b/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionSelector.ts @@ -6,7 +6,7 @@ import { GridRowId } from '../../../models/gridRows'; export const gridSelectionStateSelector = (state: GridState) => state.selection; export const gridArraySelectionStateSelector = (state: GridState) => - Array.isArray(state.selection) ? state.selection : [state.selection]; + Array.isArray(state.selection) ? [...state.selection] : [state.selection]; export const selectedGridRowsCountSelector = createSelector( gridArraySelectionStateSelector, diff --git a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts index ec73b0dd71dbf..5ab4ac25b3845 100644 --- a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts +++ b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts @@ -14,6 +14,7 @@ import { useGridSelector } from '../core/useGridSelector'; import { useGridState } from '../core/useGridState'; import { gridRowsLookupSelector } from '../rows/gridRowsSelector'; import { + gridArraySelectionStateSelector, gridSelectionStateSelector, selectedGridRowsSelector, selectedIdsLookupSelector, @@ -189,7 +190,7 @@ export const useGridSelection = (apiRef: GridApiRef, props: GridComponentProps): React.useEffect(() => { // Rows changed setGridState((state) => { - const newSelectionState = getArraySelectionModel(state.selection); + const newSelectionState = gridArraySelectionStateSelector(state); const selectionLookup = selectedIdsLookupSelector(state); let hasChanged = false; newSelectionState.forEach((id: GridRowId) => { @@ -220,7 +221,7 @@ export const useGridSelection = (apiRef: GridApiRef, props: GridComponentProps): React.useEffect(() => { // isRowSelectable changed setGridState((state) => { - const newSelectionState = getArraySelectionModel(state.selection); + const newSelectionState = gridArraySelectionStateSelector(state); const selectionLookup = selectedIdsLookupSelector(state); let hasChanged = false; newSelectionState.forEach((id: GridRowId) => { diff --git a/packages/grid/data-grid/src/DataGrid.tsx b/packages/grid/data-grid/src/DataGrid.tsx index c33feefc33c42..642936712124d 100644 --- a/packages/grid/data-grid/src/DataGrid.tsx +++ b/packages/grid/data-grid/src/DataGrid.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { DATAGRID_PROPTYPES } from './DataGridPropTypes'; +import { DATA_GRID_PROPTYPES } from './DataGridPropTypes'; import { DEFAULT_GRID_OPTIONS, GridBody, @@ -26,8 +26,6 @@ const DATA_GRID_FORCED_PROPS: Omit = { checkboxSelectionVisibleOnly: false, }; -export const DATA_GRID_DEFAULT_PROPS = DEFAULT_GRID_OPTIONS; - const DataGridRaw = React.forwardRef(function DataGrid( inProps, ref, @@ -61,9 +59,9 @@ const DataGridRaw = React.forwardRef(function Dat ); }); -DataGridRaw.defaultProps = DATA_GRID_DEFAULT_PROPS; +DataGridRaw.defaultProps = DEFAULT_GRID_OPTIONS; export const DataGrid = React.memo(DataGridRaw); // @ts-ignore -DataGrid.propTypes = DATAGRID_PROPTYPES; +DataGrid.propTypes = DATA_GRID_PROPTYPES; diff --git a/packages/grid/data-grid/src/DataGridPropTypes.ts b/packages/grid/data-grid/src/DataGridPropTypes.ts index 8d1553227b575..cbce4eccdf135 100644 --- a/packages/grid/data-grid/src/DataGridPropTypes.ts +++ b/packages/grid/data-grid/src/DataGridPropTypes.ts @@ -3,7 +3,7 @@ import { chainPropTypes } from '@material-ui/utils'; import { MAX_PAGE_SIZE } from './DataGridProps'; // @ts-ignore -export const DATAGRID_PROPTYPES = { +export const DATA_GRID_PROPTYPES = { apiRef: chainPropTypes(PropTypes.any, (props: any) => { if (props.apiRef != null) { return new Error( diff --git a/packages/grid/data-grid/src/DataGridProps.ts b/packages/grid/data-grid/src/DataGridProps.ts index cf38b3166f77b..a369a59df68b9 100644 --- a/packages/grid/data-grid/src/DataGridProps.ts +++ b/packages/grid/data-grid/src/DataGridProps.ts @@ -19,4 +19,6 @@ export type DataGridProps = Omit< | 'onRowsScrollEnd' | 'pagination' | 'scrollEndThreshold' ->; +> & { + pagination?: true; +}; diff --git a/packages/grid/data-grid/src/tests/pagination.DataGrid.test.tsx b/packages/grid/data-grid/src/tests/pagination.DataGrid.test.tsx index c95485379b9be..9cb1c05b01152 100644 --- a/packages/grid/data-grid/src/tests/pagination.DataGrid.test.tsx +++ b/packages/grid/data-grid/src/tests/pagination.DataGrid.test.tsx @@ -9,13 +9,7 @@ import { waitFor, } from 'test/utils'; import { expect } from 'chai'; -import { - DataGrid, - DataGridProps, - DATA_GRID_DEFAULT_PROPS, - GridLinkOperator, - GridRowsProp, -} from '@material-ui/data-grid'; +import { DataGrid, DataGridProps, GridLinkOperator, GridRowsProp } from '@material-ui/data-grid'; import { getColumnValues, getRows } from 'test/utils/helperFn'; import { spy } from 'sinon'; import { useData } from 'packages/storybook/src/hooks/useData'; @@ -328,12 +322,21 @@ describe(' - Pagination', () => { it('should always render the same amount of rows and fit the viewport', () => { const nbRows = 27; const height = 780; - render(); + const headerHeight = 56; + const rowHeight = 52; + + render( + , + ); const footerHeight = document.querySelector('.MuiDataGrid-footerContainer')!.clientHeight; const expectedFullPageRowsLength = Math.floor( - (height - DATA_GRID_DEFAULT_PROPS.headerHeight - footerHeight) / - DATA_GRID_DEFAULT_PROPS.rowHeight, + (height - headerHeight - footerHeight) / rowHeight, ); let rows = getRows(); @@ -372,23 +375,25 @@ describe(' - Pagination', () => { const heightBefore = 780; const heightAfter = 360; + const headerHeight = 56; + const rowHeight = 52; const { setProps } = render( , ); const footerHeight = document.querySelector('.MuiDataGrid-footerContainer')!.clientHeight; const expectedViewportRowsLengthBefore = Math.floor( - (heightBefore - DATA_GRID_DEFAULT_PROPS.headerHeight - footerHeight) / - DATA_GRID_DEFAULT_PROPS.rowHeight, + (heightBefore - headerHeight - footerHeight) / rowHeight, ); const expectedViewportRowsLengthAfter = Math.floor( - (heightAfter - DATA_GRID_DEFAULT_PROPS.headerHeight - footerHeight) / - DATA_GRID_DEFAULT_PROPS.rowHeight, + (heightAfter - headerHeight - footerHeight) / rowHeight, ); let rows = document.querySelectorAll('.MuiDataGrid-viewport [role="row"]'); diff --git a/packages/grid/x-grid/src/XGrid.tsx b/packages/grid/x-grid/src/XGrid.tsx index a86b01e24a264..602c04d75052d 100644 --- a/packages/grid/x-grid/src/XGrid.tsx +++ b/packages/grid/x-grid/src/XGrid.tsx @@ -47,9 +47,7 @@ const XGridRaw = React.forwardRef(function XGrid(inP ); }); -export const X_GRID_DEFAULT_PROPS = DEFAULT_GRID_OPTIONS; - -XGridRaw.defaultProps = X_GRID_DEFAULT_PROPS; +XGridRaw.defaultProps = DEFAULT_GRID_OPTIONS; export const XGrid = React.memo(XGridRaw); From e4cf37f77e2150253c6bc364ead149408b1b1a15 Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 28 Jul 2021 08:57:37 +0200 Subject: [PATCH 22/43] Fix --- packages/grid/data-grid/src/DataGrid.tsx | 5 ++++- packages/grid/data-grid/src/tests/DataGrid.spec.tsx | 3 +-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/grid/data-grid/src/DataGrid.tsx b/packages/grid/data-grid/src/DataGrid.tsx index 642936712124d..43a1881d7bbbc 100644 --- a/packages/grid/data-grid/src/DataGrid.tsx +++ b/packages/grid/data-grid/src/DataGrid.tsx @@ -14,7 +14,10 @@ import { GridContextProvider } from '../../_modules_/grid/context/GridContextPro import { useDataGridComponent } from './useDataGridComponent'; import { DataGridProps, MAX_PAGE_SIZE } from './DataGridProps'; -const DATA_GRID_FORCED_PROPS: Omit = { +const DATA_GRID_FORCED_PROPS: Omit< + GridComponentProps, + Exclude +> = { apiRef: undefined, disableColumnResize: true, disableColumnReorder: true, diff --git a/packages/grid/data-grid/src/tests/DataGrid.spec.tsx b/packages/grid/data-grid/src/tests/DataGrid.spec.tsx index 6c568d66cf62d..62ecbae6fb2a0 100644 --- a/packages/grid/data-grid/src/tests/DataGrid.spec.tsx +++ b/packages/grid/data-grid/src/tests/DataGrid.spec.tsx @@ -6,9 +6,8 @@ function EnterpriseTest() { return (
- {/* @ts-expect-error Object literal may only specify known properties, but 'pagination' does not exist in type */} - {/* @ts-expect-error Object literal may only specify known properties, but 'pagination' does not exist in type */} + {/* @ts-expect-error Type 'false' is not assignable to type 'true | undefined' */} {/* @ts-expect-error Type 'GridApiRef' is not assignable to type 'undefined' */} From cac3a7117ea3a66cc757cba86b57350aaca5d33e Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 28 Jul 2021 13:19:25 +0200 Subject: [PATCH 23/43] Remove useGridColumnReorder from DataGrid bundle --- .../grid/hooks/features/columnReorder/useGridColumnReorder.tsx | 3 +++ packages/grid/data-grid/src/useDataGridComponent.tsx | 2 -- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/grid/_modules_/grid/hooks/features/columnReorder/useGridColumnReorder.tsx b/packages/grid/_modules_/grid/hooks/features/columnReorder/useGridColumnReorder.tsx index 856b77385bd01..a47f71ca75575 100644 --- a/packages/grid/_modules_/grid/hooks/features/columnReorder/useGridColumnReorder.tsx +++ b/packages/grid/_modules_/grid/hooks/features/columnReorder/useGridColumnReorder.tsx @@ -38,6 +38,9 @@ const hasCursorPositionChanged = ( ): boolean => currentCoordinates.x !== nextCoordinates.x || currentCoordinates.y !== nextCoordinates.y; +/** + * Only available in XGrid + */ export const useGridColumnReorder = (apiRef: GridApiRef): void => { const logger = useLogger('useGridColumnReorder'); diff --git a/packages/grid/data-grid/src/useDataGridComponent.tsx b/packages/grid/data-grid/src/useDataGridComponent.tsx index 1a1343907e54b..ea97ef98717ef 100644 --- a/packages/grid/data-grid/src/useDataGridComponent.tsx +++ b/packages/grid/data-grid/src/useDataGridComponent.tsx @@ -1,7 +1,6 @@ import { GridComponentProps } from '../../_modules_/grid/GridComponentProps'; import { useGridClipboard } from '../../_modules_/grid/hooks/features/clipboard/useGridClipboard'; import { useGridColumnMenu } from '../../_modules_/grid/hooks/features/columnMenu/useGridColumnMenu'; -import { useGridColumnReorder } from '../../_modules_/grid/hooks/features/columnReorder/useGridColumnReorder'; import { useGridColumnResize } from '../../_modules_/grid/hooks/features/columnResize/useGridColumnResize'; import { useGridColumns } from '../../_modules_/grid/hooks/features/columns/useGridColumns'; import { useGridControlState } from '../../_modules_/grid/hooks/features/core/useGridControlState'; @@ -62,7 +61,6 @@ export const useDataGridComponent = (apiRef: GridApiRef, props: GridComponentPro useGridContainerProps(apiRef); useGridDensity(apiRef); useGridVirtualRows(apiRef); - useGridColumnReorder(apiRef); useGridColumnResize(apiRef, props); useGridPageSize(apiRef, props); useGridPage(apiRef, props); From 185ee29531d19c6c8a38bd06d7ce802b62b9c627 Mon Sep 17 00:00:00 2001 From: delangle Date: Thu, 29 Jul 2021 09:42:48 +0200 Subject: [PATCH 24/43] Fix intl --- .../_modules_/grid/models/gridOptions.tsx | 13 +++++-- .../_modules_/grid/utils/material-ui-utils.ts | 21 ++++++----- packages/grid/data-grid/src/DataGrid.tsx | 36 +++---------------- .../grid/data-grid/src/useDataGridProps.ts | 34 ++++++++++++++++++ packages/grid/x-grid/src/XGrid.tsx | 10 +++--- 5 files changed, 67 insertions(+), 47 deletions(-) create mode 100644 packages/grid/data-grid/src/useDataGridProps.ts diff --git a/packages/grid/_modules_/grid/models/gridOptions.tsx b/packages/grid/_modules_/grid/models/gridOptions.tsx index ae2c6e97f3983..aa6b0e5aacf92 100644 --- a/packages/grid/_modules_/grid/models/gridOptions.tsx +++ b/packages/grid/_modules_/grid/models/gridOptions.tsx @@ -523,15 +523,14 @@ export interface GridOptions { } /** - * The default [[GridOptions]] object that will be used to merge with the 'options' passed in the react component prop. + * The default options to inject in the props of DataGrid or XGrid. */ -export const DEFAULT_GRID_OPTIONS = { +export const DEFAULT_GRID_PROPS_FROM_OPTIONS = { columnBuffer: 2, columnTypes: getGridDefaultColumnTypes(), density: GridDensityTypes.Standard, filterMode: GridFeatureModeConstant.client, headerHeight: 56, - localeText: GRID_DEFAULT_LOCALE_TEXT, paginationMode: GridFeatureModeConstant.client, rowHeight: 52, rowsPerPageOptions: [25, 50, 100], @@ -541,3 +540,11 @@ export const DEFAULT_GRID_OPTIONS = { logger: console, logLevel: process.env.NODE_ENV === 'production' ? 'error' : 'warn', }; + +/** + * The default [[GridOptions]] object that will be used to merge with the 'options' passed in the react component prop. + */ +export const DEFAULT_GRID_OPTIONS = { + ...DEFAULT_GRID_PROPS_FROM_OPTIONS, + localeText: GRID_DEFAULT_LOCALE_TEXT, +}; diff --git a/packages/grid/_modules_/grid/utils/material-ui-utils.ts b/packages/grid/_modules_/grid/utils/material-ui-utils.ts index fd2efa2ef6527..b11ba57153998 100644 --- a/packages/grid/_modules_/grid/utils/material-ui-utils.ts +++ b/packages/grid/_modules_/grid/utils/material-ui-utils.ts @@ -45,17 +45,20 @@ export const useEnhancedEffect = // TODO replace with { useThemeProps } from @material-ui/core/styles. export function useThemeProps({ props: inputProps, name }) { - const props = { ...inputProps }; const contextTheme: any = useTheme(); - const more = getThemeProps({ theme: contextTheme, name, props }); - const theme = more.theme || contextTheme; - const isRtl = theme.direction === 'rtl'; - return { - theme, - isRtl, - ...more, - }; + return React.useMemo(() => { + const props = { ...inputProps }; + const more = getThemeProps({ theme: contextTheme, name, props }); + const theme = more.theme || contextTheme; + const isRtl = theme.direction === 'rtl'; + + return { + theme, + isRtl, + ...more, + }; + }, [inputProps, name, contextTheme]); } // TODO replace with { unstable_composeClasses } from '@material-ui/unstyled' diff --git a/packages/grid/data-grid/src/DataGrid.tsx b/packages/grid/data-grid/src/DataGrid.tsx index 43a1881d7bbbc..1ab95deda214b 100644 --- a/packages/grid/data-grid/src/DataGrid.tsx +++ b/packages/grid/data-grid/src/DataGrid.tsx @@ -1,9 +1,8 @@ import * as React from 'react'; import { DATA_GRID_PROPTYPES } from './DataGridPropTypes'; import { - DEFAULT_GRID_OPTIONS, + DEFAULT_GRID_PROPS_FROM_OPTIONS, GridBody, - GridComponentProps, GridErrorHandler, GridFooterPlaceholder, GridHeaderPlaceholder, @@ -12,39 +11,14 @@ import { } from '../../_modules_/grid'; import { GridContextProvider } from '../../_modules_/grid/context/GridContextProvider'; import { useDataGridComponent } from './useDataGridComponent'; -import { DataGridProps, MAX_PAGE_SIZE } from './DataGridProps'; - -const DATA_GRID_FORCED_PROPS: Omit< - GridComponentProps, - Exclude -> = { - apiRef: undefined, - disableColumnResize: true, - disableColumnReorder: true, - disableMultipleColumnsFiltering: true, - disableMultipleColumnsSorting: true, - disableMultipleSelection: true, - pagination: true, - onRowsScrollEnd: undefined, - checkboxSelectionVisibleOnly: false, -}; +import { DataGridProps } from './DataGridProps'; +import { useDataGridProps } from './useDataGridProps'; const DataGridRaw = React.forwardRef(function DataGrid( inProps, ref, ) { - if (inProps.pageSize! > MAX_PAGE_SIZE) { - throw new Error(`'props.pageSize' cannot exceed 100 in DataGrid.`); - } - - const props = React.useMemo( - () => ({ - ...inProps, - ...DATA_GRID_FORCED_PROPS, - }), - [inProps], - ); - + const props = useDataGridProps(inProps); const apiRef = useGridApiRef(); useDataGridComponent(apiRef, props); @@ -62,7 +36,7 @@ const DataGridRaw = React.forwardRef(function Dat ); }); -DataGridRaw.defaultProps = DEFAULT_GRID_OPTIONS; +DataGridRaw.defaultProps = DEFAULT_GRID_PROPS_FROM_OPTIONS; export const DataGrid = React.memo(DataGridRaw); diff --git a/packages/grid/data-grid/src/useDataGridProps.ts b/packages/grid/data-grid/src/useDataGridProps.ts new file mode 100644 index 0000000000000..05afe19d9063e --- /dev/null +++ b/packages/grid/data-grid/src/useDataGridProps.ts @@ -0,0 +1,34 @@ +import * as React from 'react'; +import { DataGridProps, MAX_PAGE_SIZE } from './DataGridProps'; +import { GRID_DEFAULT_LOCALE_TEXT, GridComponentProps, useThemeProps } from '../../_modules_'; + +const DATA_GRID_FORCED_PROPS: Omit< + GridComponentProps, + Exclude +> = { + apiRef: undefined, + disableColumnResize: true, + disableColumnReorder: true, + disableMultipleColumnsFiltering: true, + disableMultipleColumnsSorting: true, + disableMultipleSelection: true, + pagination: true, + onRowsScrollEnd: undefined, + checkboxSelectionVisibleOnly: false, +}; + +export const useDataGridProps = (inProps: DataGridProps): GridComponentProps => { + if (inProps.pageSize! > MAX_PAGE_SIZE) { + throw new Error(`'props.pageSize' cannot exceed 100 in DataGrid.`); + } + + const themedProps = useThemeProps({ props: inProps, name: 'MuiDataGrid' }); + + return React.useMemo( + () => ({ + ...themedProps, + ...DATA_GRID_FORCED_PROPS, + }), + [themedProps], + ); +}; diff --git a/packages/grid/x-grid/src/XGrid.tsx b/packages/grid/x-grid/src/XGrid.tsx index 602c04d75052d..a365917526a3c 100644 --- a/packages/grid/x-grid/src/XGrid.tsx +++ b/packages/grid/x-grid/src/XGrid.tsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { LicenseInfo } from '@material-ui/x-license'; import { ponyfillGlobal } from '@material-ui/utils'; import { - DEFAULT_GRID_OPTIONS, + DEFAULT_GRID_PROPS_FROM_OPTIONS, GridComponentProps, GridBody, GridErrorHandler, @@ -11,6 +11,7 @@ import { GridHeaderPlaceholder, GridRoot, useGridApiRef, + useThemeProps, } from '../../_modules_/grid'; import { GridContextProvider } from '../../_modules_/grid/context/GridContextProvider'; import { useXGridComponent } from './useXGridComponent'; @@ -31,11 +32,12 @@ export type XGridProps = GridComponentProps; const XGridRaw = React.forwardRef(function XGrid(inProps, ref) { const apiRef = useGridApiRef(inProps.apiRef); + const props = useThemeProps({ props: inProps, name: 'MuiDataGrid' }); - useXGridComponent(apiRef, inProps); + useXGridComponent(apiRef, props); return ( - + @@ -47,7 +49,7 @@ const XGridRaw = React.forwardRef(function XGrid(inP ); }); -XGridRaw.defaultProps = DEFAULT_GRID_OPTIONS; +XGridRaw.defaultProps = DEFAULT_GRID_PROPS_FROM_OPTIONS; export const XGrid = React.memo(XGridRaw); From 2ec476f4c8db3eb682adfed574e0f10ab46509d3 Mon Sep 17 00:00:00 2001 From: delangle Date: Thu, 29 Jul 2021 10:17:00 +0200 Subject: [PATCH 25/43] Fix --- packages/grid/data-grid/src/DataGrid.tsx | 1 - packages/grid/data-grid/src/useDataGridProps.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/grid/data-grid/src/DataGrid.tsx b/packages/grid/data-grid/src/DataGrid.tsx index 1ab95deda214b..37ad8658741b0 100644 --- a/packages/grid/data-grid/src/DataGrid.tsx +++ b/packages/grid/data-grid/src/DataGrid.tsx @@ -20,7 +20,6 @@ const DataGridRaw = React.forwardRef(function Dat ) { const props = useDataGridProps(inProps); const apiRef = useGridApiRef(); - useDataGridComponent(apiRef, props); return ( diff --git a/packages/grid/data-grid/src/useDataGridProps.ts b/packages/grid/data-grid/src/useDataGridProps.ts index 05afe19d9063e..8b39b6c52d45c 100644 --- a/packages/grid/data-grid/src/useDataGridProps.ts +++ b/packages/grid/data-grid/src/useDataGridProps.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import { DataGridProps, MAX_PAGE_SIZE } from './DataGridProps'; -import { GRID_DEFAULT_LOCALE_TEXT, GridComponentProps, useThemeProps } from '../../_modules_'; +import { GridComponentProps, useThemeProps } from '../../_modules_'; const DATA_GRID_FORCED_PROPS: Omit< GridComponentProps, From 6d4812e7bb4e2c74ea322c77fb9d0654850c131d Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 31 Jul 2021 21:55:47 +0200 Subject: [PATCH 26/43] convention --- packages/grid/_modules_/grid/components/Watermark.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/grid/_modules_/grid/components/Watermark.tsx b/packages/grid/_modules_/grid/components/Watermark.tsx index e3e2929710af2..9a1b8c265e46e 100644 --- a/packages/grid/_modules_/grid/components/Watermark.tsx +++ b/packages/grid/_modules_/grid/components/Watermark.tsx @@ -23,10 +23,11 @@ function getLicenseErrorMessage(licenseStatus: string) { throw new Error('Material-UI: Unhandled license status.'); } } + const licenseStatusSelector = (state: GridState) => state.verifyLicense ? state.licenseStatus : LicenseStatus.Valid; -export const Watermark = () => { +export function Watermark() { const apiRef = useGridApiContext(); const licenseStatus = useGridSelector(apiRef, licenseStatusSelector); @@ -53,4 +54,4 @@ export const Watermark = () => { {getLicenseErrorMessage(licenseStatus)}{' '}
); -}; +} From f64a4818d8f40fbfc71b74d37b756e65f69e3ed5 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 31 Jul 2021 21:57:52 +0200 Subject: [PATCH 27/43] remove useless variable --- .../grid/hooks/features/density/densityState.ts | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/grid/_modules_/grid/hooks/features/density/densityState.ts b/packages/grid/_modules_/grid/hooks/features/density/densityState.ts index c43fc54a84bea..5cca5b290ce1d 100644 --- a/packages/grid/_modules_/grid/hooks/features/density/densityState.ts +++ b/packages/grid/_modules_/grid/hooks/features/density/densityState.ts @@ -6,16 +6,10 @@ export interface GridGridDensity { headerHeight: number; } -const DEFAULT_GRID_DENSITY = GridDensityTypes.Standard; - -const DEFAULT_GRID_ROW_HEIGHT = 52; - -const DEFAULT_GRID_HEADER_HEIGHT = 56; - export function getInitialGridDensityState(): GridGridDensity { return { - value: DEFAULT_GRID_DENSITY, - rowHeight: DEFAULT_GRID_ROW_HEIGHT, - headerHeight: DEFAULT_GRID_HEADER_HEIGHT, + value: GridDensityTypes.Standard, + rowHeight: 52, + headerHeight: 56, }; } From 3338acdd346e0950c50318d115192d3da7b10802 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 31 Jul 2021 22:09:39 +0200 Subject: [PATCH 28/43] convention --- packages/grid/_modules_/grid/hooks/features/useLicenseState.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/_modules_/grid/hooks/features/useLicenseState.ts b/packages/grid/_modules_/grid/hooks/features/useLicenseState.ts index 6926d6be758b0..824447de1e3e3 100644 --- a/packages/grid/_modules_/grid/hooks/features/useLicenseState.ts +++ b/packages/grid/_modules_/grid/hooks/features/useLicenseState.ts @@ -1,5 +1,5 @@ -import { useLicenseVerifier } from '@material-ui/x-license'; import * as React from 'react'; +import { useLicenseVerifier } from '@material-ui/x-license'; import { GridApiRef } from '../../models/api/gridApiRef'; import { useGridState } from './core/useGridState'; From 7ae79327d83259333fa9d30d8825816d8bcbe188 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 31 Jul 2021 22:14:52 +0200 Subject: [PATCH 29/43] remove Watermark from DataGrid --- packages/grid/_modules_/grid/components/Watermark.tsx | 3 +-- .../grid/_modules_/grid/components/base/GridBody.tsx | 10 +++++++--- .../_modules_/grid/hooks/features/core/gridState.ts | 1 - .../_modules_/grid/hooks/features/useLicenseState.ts | 4 ---- packages/grid/x-grid/src/XGrid.tsx | 5 ++++- 5 files changed, 12 insertions(+), 11 deletions(-) diff --git a/packages/grid/_modules_/grid/components/Watermark.tsx b/packages/grid/_modules_/grid/components/Watermark.tsx index 9a1b8c265e46e..d5504d39fa1cf 100644 --- a/packages/grid/_modules_/grid/components/Watermark.tsx +++ b/packages/grid/_modules_/grid/components/Watermark.tsx @@ -24,8 +24,7 @@ function getLicenseErrorMessage(licenseStatus: string) { } } -const licenseStatusSelector = (state: GridState) => - state.verifyLicense ? state.licenseStatus : LicenseStatus.Valid; +const licenseStatusSelector = (state: GridState) => state.licenseStatus; export function Watermark() { const apiRef = useGridApiContext(); diff --git a/packages/grid/_modules_/grid/components/base/GridBody.tsx b/packages/grid/_modules_/grid/components/base/GridBody.tsx index 38d0ef7e87d96..a7b2f27069b7d 100644 --- a/packages/grid/_modules_/grid/components/base/GridBody.tsx +++ b/packages/grid/_modules_/grid/components/base/GridBody.tsx @@ -9,10 +9,14 @@ import { GridMainContainer } from '../containers/GridMainContainer'; import { GridWindow } from '../containers/GridWindow'; import { GridAutoSizer } from '../GridAutoSizer'; import { GridViewport } from '../GridViewport'; -import { Watermark } from '../Watermark'; import { GridOverlays } from './GridOverlays'; -export function GridBody() { +interface GridBodyProps { + children?: React.ReactNode; +} + +export function GridBody(props: GridBodyProps) { + const { children } = props; const apiRef = useGridApiContext(); const rootProps = React.useContext(GridRootPropsContext)!; @@ -34,7 +38,6 @@ export function GridBody() { return ( - @@ -49,6 +52,7 @@ export function GridBody() { )} + {children} ); } diff --git a/packages/grid/_modules_/grid/hooks/features/core/gridState.ts b/packages/grid/_modules_/grid/hooks/features/core/gridState.ts index 77f7f4aae25d8..986a59ecd8e5f 100644 --- a/packages/grid/_modules_/grid/hooks/features/core/gridState.ts +++ b/packages/grid/_modules_/grid/hooks/features/core/gridState.ts @@ -56,7 +56,6 @@ export interface GridState { preferencePanel: GridPreferencePanelState; density: GridGridDensity; error?: any; - verifyLicense?: boolean; licenseStatus: LicenseStatus; } diff --git a/packages/grid/_modules_/grid/hooks/features/useLicenseState.ts b/packages/grid/_modules_/grid/hooks/features/useLicenseState.ts index 824447de1e3e3..70e7cfdea8590 100644 --- a/packages/grid/_modules_/grid/hooks/features/useLicenseState.ts +++ b/packages/grid/_modules_/grid/hooks/features/useLicenseState.ts @@ -12,9 +12,5 @@ export function useLicenseState(apiRef: GridApiRef) { setGridState((state) => ({ ...state, licenseStatus })); }, [setGridState, licenseStatus]); - React.useEffect(() => { - setGridState((state) => ({ ...state, verifyLicense: true })); - }); - return licenseStatus; } diff --git a/packages/grid/x-grid/src/XGrid.tsx b/packages/grid/x-grid/src/XGrid.tsx index 471fae8f218db..1070673119091 100644 --- a/packages/grid/x-grid/src/XGrid.tsx +++ b/packages/grid/x-grid/src/XGrid.tsx @@ -15,6 +15,7 @@ import { import { GridContextProvider } from '../../_modules_/grid/context/GridContextProvider'; import { useThemeProps } from '../../_modules_/grid/utils/material-ui-utils'; import { useXGridComponent } from './useXGridComponent'; +import { Watermark } from '../../_modules_/grid/components/Watermark'; // This is the package release date. Each package version should update this const // automatically when a new version is published on npm. @@ -41,7 +42,9 @@ const XGridRaw = React.forwardRef(function XGrid(inP - + + + From 92ce93a931490db0f4663b64548b017802a8ab90 Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 4 Aug 2021 09:42:32 +0200 Subject: [PATCH 30/43] Fix --- .../_modules_/grid/hooks/features/selection/useGridSelection.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts index 7bbfb9384679c..d6a46b13d217b 100644 --- a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts +++ b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts @@ -213,7 +213,7 @@ export const useGridSelection = (apiRef: GridApiRef, props: GridComponentProps): return; } - apiRef.current.setSelectionModel(props.selectionModel); + apiRef.current.setSelectionModel(getArraySelectionModel(props.selectionModel)); }, [apiRef, props.selectionModel, setGridState]); React.useEffect(() => { From b9722b1e9fae9bef6217d3983b788010650f630e Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 4 Aug 2021 09:43:14 +0200 Subject: [PATCH 31/43] Lint --- packages/grid/data-grid/src/tests/selection.DataGrid.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/data-grid/src/tests/selection.DataGrid.test.tsx b/packages/grid/data-grid/src/tests/selection.DataGrid.test.tsx index 0e96097214114..30e5df8fcc385 100644 --- a/packages/grid/data-grid/src/tests/selection.DataGrid.test.tsx +++ b/packages/grid/data-grid/src/tests/selection.DataGrid.test.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { fireEvent, screen, createClientRenderStrictMode } from 'test/utils'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { DataGrid, DataGridProps } from '@material-ui/data-grid'; +import { DataGrid } from '@material-ui/data-grid'; import { getCell, getRow } from 'test/utils/helperFn'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); From 673f6b17b0390aa4d2ec676280e6d8052b8cd132 Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 4 Aug 2021 10:03:29 +0200 Subject: [PATCH 32/43] Clean selection --- .../grid/hooks/features/core/gridState.ts | 4 +-- .../features/export/useGridCsvExport.tsx | 4 +-- .../selection/gridSelectionSelector.ts | 19 ++++------- .../features/selection/gridSelectionState.ts | 3 -- .../grid/hooks/features/selection/index.ts | 1 - .../features/selection/useGridSelection.ts | 33 +++++++++++++------ .../grid/data-grid/src/useDataGridProps.ts | 2 +- 7 files changed, 35 insertions(+), 31 deletions(-) delete mode 100644 packages/grid/_modules_/grid/hooks/features/selection/gridSelectionState.ts diff --git a/packages/grid/_modules_/grid/hooks/features/core/gridState.ts b/packages/grid/_modules_/grid/hooks/features/core/gridState.ts index 9218cf70337de..702c17533dc66 100644 --- a/packages/grid/_modules_/grid/hooks/features/core/gridState.ts +++ b/packages/grid/_modules_/grid/hooks/features/core/gridState.ts @@ -26,13 +26,13 @@ import { import { GridFocusState, GridTabIndexState } from '../focus/gridFocusState'; import { GridPreferencePanelState } from '../preferencesPanel/gridPreferencePanelState'; import { getInitialGridRowState, InternalGridRowsState } from '../rows/gridRowsState'; -import { GridSelectionState } from '../selection/gridSelectionState'; import { getInitialGridSortingState, GridSortingState } from '../sorting/gridSortingState'; import { getInitialGridRenderingState, InternalRenderingState, } from '../virtualization/renderingState'; import { getInitialPaginationState, GridPaginationState } from '../pagination/gridPaginationState'; +import { GridRowId } from '../../../models/gridRows'; export interface GridState { rows: InternalGridRowsState; @@ -51,7 +51,7 @@ export interface GridState { sorting: GridSortingState; focus: GridFocusState; tabIndex: GridTabIndexState; - selection: GridSelectionState; + selection: GridRowId[]; filter: GridFilterModel; visibleRows: VisibleGridRowsState; preferencePanel: GridPreferencePanelState; diff --git a/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx b/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx index ce089a0900f80..6f25290dcf598 100644 --- a/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx +++ b/packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx @@ -4,7 +4,7 @@ import { useGridApiMethod } from '../../root/useGridApiMethod'; import { useGridSelector } from '../core/useGridSelector'; import { allGridColumnsSelector, visibleGridColumnsSelector } from '../columns'; import { visibleSortedGridRowsSelector } from '../filter'; -import { gridArraySelectionStateSelector } from '../selection'; +import { gridSelectionStateSelector } from '../selection'; import { GridCsvExportApi } from '../../../models/api/gridCsvExportApi'; import { GridExportCsvOptions } from '../../../models/gridExport'; import { useLogger } from '../../utils/useLogger'; @@ -17,7 +17,7 @@ export const useGridCsvExport = (apiRef: GridApiRef): void => { const visibleColumns = useGridSelector(apiRef, visibleGridColumnsSelector); const columns = useGridSelector(apiRef, allGridColumnsSelector); const visibleSortedRows = useGridSelector(apiRef, visibleSortedGridRowsSelector); - const selection = useGridSelector(apiRef, gridArraySelectionStateSelector); + const selection = useGridSelector(apiRef, gridSelectionStateSelector); const getDataAsCsv = React.useCallback( (options?: GridExportCsvOptions): string => { diff --git a/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionSelector.ts b/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionSelector.ts index 5d1a0e16ecfe5..be5d87b81a1c3 100644 --- a/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionSelector.ts +++ b/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionSelector.ts @@ -5,25 +5,20 @@ import { GridRowId } from '../../../models/gridRows'; export const gridSelectionStateSelector = (state: GridState) => state.selection; -export const gridArraySelectionStateSelector = (state: GridState) => - Array.isArray(state.selection) ? [...state.selection] : [state.selection]; - export const selectedGridRowsCountSelector = createSelector( - gridArraySelectionStateSelector, + gridSelectionStateSelector, (selection) => selection.length, ); export const selectedGridRowsSelector = createSelector( - gridArraySelectionStateSelector, + gridSelectionStateSelector, gridRowsLookupSelector, (selectedRows, rowsLookup) => new Map(selectedRows.map((id) => [id, rowsLookup[id]])), ); -export const selectedIdsLookupSelector = createSelector( - gridArraySelectionStateSelector, - (selection) => - selection.reduce((lookup, rowId) => { - lookup[rowId] = rowId; - return lookup; - }, {} as Record), +export const selectedIdsLookupSelector = createSelector(gridSelectionStateSelector, (selection) => + selection.reduce((lookup, rowId) => { + lookup[rowId] = rowId; + return lookup; + }, {} as Record), ); diff --git a/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionState.ts b/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionState.ts deleted file mode 100644 index c138a0fdfc0c5..0000000000000 --- a/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionState.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { GridSelectionModel } from '../../../models/gridSelectionModel'; - -export type GridSelectionState = GridSelectionModel; diff --git a/packages/grid/_modules_/grid/hooks/features/selection/index.ts b/packages/grid/_modules_/grid/hooks/features/selection/index.ts index eeabddf8403ab..89dc7db8f87b1 100644 --- a/packages/grid/_modules_/grid/hooks/features/selection/index.ts +++ b/packages/grid/_modules_/grid/hooks/features/selection/index.ts @@ -1,3 +1,2 @@ -export * from './gridSelectionState'; export * from './gridSelectionSelector'; export * from './useGridSelection'; diff --git a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts index d6a46b13d217b..94dfb18a69c1d 100644 --- a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts +++ b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts @@ -14,14 +14,22 @@ import { useGridSelector } from '../core/useGridSelector'; import { useGridState } from '../core/useGridState'; import { gridRowsLookupSelector } from '../rows/gridRowsSelector'; import { - gridArraySelectionStateSelector, gridSelectionStateSelector, selectedGridRowsSelector, selectedIdsLookupSelector, } from './gridSelectionSelector'; -const getArraySelectionModel = (selectionModel: GridSelectionModel) => - Array.isArray(selectionModel) ? [...selectionModel] : [selectionModel]; +const getArraySelectionModel = (selectionModel: GridSelectionModel | undefined) => { + if (selectionModel == null) { + return selectionModel; + } + + if (Array.isArray(selectionModel)) { + return selectionModel; + } + + return [selectionModel]; +}; export const useGridSelection = (apiRef: GridApiRef, props: GridComponentProps): void => { const logger = useLogger('useGridSelection'); @@ -29,6 +37,11 @@ export const useGridSelection = (apiRef: GridApiRef, props: GridComponentProps): const options = useGridSelector(apiRef, optionsSelector); const rowsLookup = useGridSelector(apiRef, gridRowsLookupSelector); + const propSelectionModel = React.useMemo( + () => getArraySelectionModel(props.selectionModel), + [props.selectionModel], + ); + const { checkboxSelection, disableMultipleSelection, disableSelectionOnClick, isRowSelectable } = options; @@ -181,17 +194,17 @@ export const useGridSelection = (apiRef: GridApiRef, props: GridComponentProps): React.useEffect(() => { apiRef.current.updateControlState({ stateId: 'selection', - propModel: props.selectionModel, + propModel: propSelectionModel, propOnChange: props.onSelectionModelChange, stateSelector: gridSelectionStateSelector, changeEvent: GRID_SELECTION_CHANGE, }); - }, [apiRef, props.onSelectionModelChange, props.selectionModel]); + }, [apiRef, props.onSelectionModelChange, propSelectionModel]); React.useEffect(() => { // Rows changed setGridState((state) => { - const newSelectionState = gridArraySelectionStateSelector(state); + const newSelectionState = gridSelectionStateSelector(state); const selectionLookup = selectedIdsLookupSelector(state); let hasChanged = false; newSelectionState.forEach((id: GridRowId) => { @@ -209,17 +222,17 @@ export const useGridSelection = (apiRef: GridApiRef, props: GridComponentProps): }, [rowsLookup, apiRef, setGridState, forceUpdate]); React.useEffect(() => { - if (props.selectionModel === undefined) { + if (propSelectionModel === undefined) { return; } - apiRef.current.setSelectionModel(getArraySelectionModel(props.selectionModel)); - }, [apiRef, props.selectionModel, setGridState]); + apiRef.current.setSelectionModel(propSelectionModel); + }, [apiRef, propSelectionModel, setGridState]); React.useEffect(() => { // isRowSelectable changed setGridState((state) => { - const newSelectionState = gridArraySelectionStateSelector(state); + const newSelectionState = gridSelectionStateSelector(state); const selectionLookup = selectedIdsLookupSelector(state); let hasChanged = false; newSelectionState.forEach((id: GridRowId) => { diff --git a/packages/grid/data-grid/src/useDataGridProps.ts b/packages/grid/data-grid/src/useDataGridProps.ts index a9b66ef249de2..85c8a77a6e172 100644 --- a/packages/grid/data-grid/src/useDataGridProps.ts +++ b/packages/grid/data-grid/src/useDataGridProps.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import { DataGridProps, MAX_PAGE_SIZE } from './DataGridProps'; -import { GridComponentProps } from '../../_modules_'; +import { GridComponentProps } from '../../_modules_/grid/GridComponentProps'; import { useThemeProps } from '../../_modules_/grid/utils/material-ui-utils'; const DATA_GRID_FORCED_PROPS: Omit< From ec9d1f215821e0acf1944bb397f445e23046c06d Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 4 Aug 2021 10:09:25 +0200 Subject: [PATCH 33/43] Fix --- .../grid/_modules_/grid/hooks/features/core/gridState.ts | 4 ++-- .../grid/hooks/features/selection/gridSelectionState.ts | 3 +++ .../grid/hooks/features/selection/useGridSelection.ts | 6 +++--- 3 files changed, 8 insertions(+), 5 deletions(-) create mode 100644 packages/grid/_modules_/grid/hooks/features/selection/gridSelectionState.ts diff --git a/packages/grid/_modules_/grid/hooks/features/core/gridState.ts b/packages/grid/_modules_/grid/hooks/features/core/gridState.ts index 702c17533dc66..9218cf70337de 100644 --- a/packages/grid/_modules_/grid/hooks/features/core/gridState.ts +++ b/packages/grid/_modules_/grid/hooks/features/core/gridState.ts @@ -26,13 +26,13 @@ import { import { GridFocusState, GridTabIndexState } from '../focus/gridFocusState'; import { GridPreferencePanelState } from '../preferencesPanel/gridPreferencePanelState'; import { getInitialGridRowState, InternalGridRowsState } from '../rows/gridRowsState'; +import { GridSelectionState } from '../selection/gridSelectionState'; import { getInitialGridSortingState, GridSortingState } from '../sorting/gridSortingState'; import { getInitialGridRenderingState, InternalRenderingState, } from '../virtualization/renderingState'; import { getInitialPaginationState, GridPaginationState } from '../pagination/gridPaginationState'; -import { GridRowId } from '../../../models/gridRows'; export interface GridState { rows: InternalGridRowsState; @@ -51,7 +51,7 @@ export interface GridState { sorting: GridSortingState; focus: GridFocusState; tabIndex: GridTabIndexState; - selection: GridRowId[]; + selection: GridSelectionState; filter: GridFilterModel; visibleRows: VisibleGridRowsState; preferencePanel: GridPreferencePanelState; diff --git a/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionState.ts b/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionState.ts new file mode 100644 index 0000000000000..28fd25e8c7bb2 --- /dev/null +++ b/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionState.ts @@ -0,0 +1,3 @@ +import { GridRowId } from '../../../models/gridRows'; + +export type GridSelectionState = GridRowId[]; diff --git a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts index 94dfb18a69c1d..9ae43e02e93fd 100644 --- a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts +++ b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts @@ -157,11 +157,11 @@ export const useGridSelection = (apiRef: GridApiRef, props: GridComponentProps): ], ); - const setSelectionModel = React.useCallback( - (model: GridSelectionModel) => { + const setSelectionModel = React.useCallback( + (model) => { const currentModel = apiRef.current.getState().selection; if (currentModel !== model) { - setGridState((state) => ({ ...state, selection: getArraySelectionModel(model) || [] })); + setGridState((state) => ({ ...state, selection: model })); } }, [setGridState, apiRef], From 0a1d87259642e2c1cf38cda25bfeafeb23db186c Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 4 Aug 2021 10:24:51 +0200 Subject: [PATCH 34/43] Revert selection selector changes --- .../selection/gridSelectionSelector.ts | 49 ++++++++++++------- 1 file changed, 32 insertions(+), 17 deletions(-) diff --git a/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionSelector.ts b/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionSelector.ts index be5d87b81a1c3..cdf773f07f21e 100644 --- a/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionSelector.ts +++ b/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionSelector.ts @@ -1,24 +1,39 @@ -import { createSelector } from 'reselect'; -import { gridRowsLookupSelector } from '../rows/gridRowsSelector'; +import { createSelector, OutputSelector } from 'reselect'; +import { gridRowsLookupSelector, GridRowsLookup } from '../rows/gridRowsSelector'; import { GridState } from '../core/gridState'; -import { GridRowId } from '../../../models/gridRows'; +import { GridSelectionState } from './gridSelectionState'; +import { GridRowId, GridRowModel } from '../../../models/gridRows'; export const gridSelectionStateSelector = (state: GridState) => state.selection; - -export const selectedGridRowsCountSelector = createSelector( - gridSelectionStateSelector, - (selection) => selection.length, +export const selectedGridRowsCountSelector: OutputSelector< + GridState, + number, + (res: GridSelectionState) => number + > = createSelector( + gridSelectionStateSelector, + (selection) => selection.length, ); -export const selectedGridRowsSelector = createSelector( - gridSelectionStateSelector, - gridRowsLookupSelector, - (selectedRows, rowsLookup) => new Map(selectedRows.map((id) => [id, rowsLookup[id]])), +export const selectedGridRowsSelector = createSelector< + GridState, + GridSelectionState, + GridRowsLookup, + Map + >( + gridSelectionStateSelector, + gridRowsLookupSelector, + (selectedRows, rowsLookup) => new Map(selectedRows.map((id) => [id, rowsLookup[id]])), ); -export const selectedIdsLookupSelector = createSelector(gridSelectionStateSelector, (selection) => - selection.reduce((lookup, rowId) => { - lookup[rowId] = rowId; - return lookup; - }, {} as Record), -); +export const selectedIdsLookupSelector: OutputSelector< + GridState, + Record, + (res: GridSelectionState) => Record + > = createSelector>( + gridSelectionStateSelector, + (selection) => + selection.reduce((lookup, rowId) => { + lookup[rowId] = rowId; + return lookup; + }, {}), +); \ No newline at end of file From 3a28278fca0d988e840cacd9d8149e0d7219ab9f Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 4 Aug 2021 10:25:36 +0200 Subject: [PATCH 35/43] Prettier --- .../selection/gridSelectionSelector.ts | 50 +++++++++---------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionSelector.ts b/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionSelector.ts index cdf773f07f21e..a75ec4de19d72 100644 --- a/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionSelector.ts +++ b/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionSelector.ts @@ -6,34 +6,34 @@ import { GridRowId, GridRowModel } from '../../../models/gridRows'; export const gridSelectionStateSelector = (state: GridState) => state.selection; export const selectedGridRowsCountSelector: OutputSelector< - GridState, - number, - (res: GridSelectionState) => number - > = createSelector( - gridSelectionStateSelector, - (selection) => selection.length, + GridState, + number, + (res: GridSelectionState) => number +> = createSelector( + gridSelectionStateSelector, + (selection) => selection.length, ); export const selectedGridRowsSelector = createSelector< - GridState, - GridSelectionState, - GridRowsLookup, - Map - >( - gridSelectionStateSelector, - gridRowsLookupSelector, - (selectedRows, rowsLookup) => new Map(selectedRows.map((id) => [id, rowsLookup[id]])), + GridState, + GridSelectionState, + GridRowsLookup, + Map +>( + gridSelectionStateSelector, + gridRowsLookupSelector, + (selectedRows, rowsLookup) => new Map(selectedRows.map((id) => [id, rowsLookup[id]])), ); export const selectedIdsLookupSelector: OutputSelector< - GridState, - Record, - (res: GridSelectionState) => Record - > = createSelector>( - gridSelectionStateSelector, - (selection) => - selection.reduce((lookup, rowId) => { - lookup[rowId] = rowId; - return lookup; - }, {}), -); \ No newline at end of file + GridState, + Record, + (res: GridSelectionState) => Record +> = createSelector>( + gridSelectionStateSelector, + (selection) => + selection.reduce((lookup, rowId) => { + lookup[rowId] = rowId; + return lookup; + }, {}), +); From 226c83e14cb0b35eac3aceac5d0c72f334623845 Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 4 Aug 2021 10:26:53 +0200 Subject: [PATCH 36/43] Fix --- .../features/selection/useGridSelection.ts | 27 ++++++++----------- 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts index 9ae43e02e93fd..e8142fb19f8c5 100644 --- a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts +++ b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts @@ -19,28 +19,23 @@ import { selectedIdsLookupSelector, } from './gridSelectionSelector'; -const getArraySelectionModel = (selectionModel: GridSelectionModel | undefined) => { - if (selectionModel == null) { - return selectionModel; - } - - if (Array.isArray(selectionModel)) { - return selectionModel; - } - - return [selectionModel]; -}; - export const useGridSelection = (apiRef: GridApiRef, props: GridComponentProps): void => { const logger = useLogger('useGridSelection'); const [, setGridState, forceUpdate] = useGridState(apiRef); const options = useGridSelector(apiRef, optionsSelector); const rowsLookup = useGridSelector(apiRef, gridRowsLookupSelector); - const propSelectionModel = React.useMemo( - () => getArraySelectionModel(props.selectionModel), - [props.selectionModel], - ); + const propSelectionModel = React.useMemo(() => { + if (props.selectionModel == null) { + return props.selectionModel; + } + + if (Array.isArray(props.selectionModel)) { + return props.selectionModel; + } + + return [props.selectionModel]; + }, [props.selectionModel]); const { checkboxSelection, disableMultipleSelection, disableSelectionOnClick, isRowSelectable } = options; From c51c90bc6a6cc9e4b3186cacd5e45e8e2afaef91 Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 4 Aug 2021 10:27:45 +0200 Subject: [PATCH 37/43] Fix --- packages/grid/_modules_/grid/hooks/features/selection/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/grid/_modules_/grid/hooks/features/selection/index.ts b/packages/grid/_modules_/grid/hooks/features/selection/index.ts index 89dc7db8f87b1..eeabddf8403ab 100644 --- a/packages/grid/_modules_/grid/hooks/features/selection/index.ts +++ b/packages/grid/_modules_/grid/hooks/features/selection/index.ts @@ -1,2 +1,3 @@ +export * from './gridSelectionState'; export * from './gridSelectionSelector'; export * from './useGridSelection'; From b220cb1335b88f3afccb919b3b9226acf53cc1ea Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 4 Aug 2021 10:28:57 +0200 Subject: [PATCH 38/43] Fix --- .../_modules_/grid/hooks/features/selection/useGridSelection.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts index e8142fb19f8c5..a6aaf332b7d0e 100644 --- a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts +++ b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts @@ -227,7 +227,7 @@ export const useGridSelection = (apiRef: GridApiRef, props: GridComponentProps): React.useEffect(() => { // isRowSelectable changed setGridState((state) => { - const newSelectionState = gridSelectionStateSelector(state); + const newSelectionState = [...state.selection]; const selectionLookup = selectedIdsLookupSelector(state); let hasChanged = false; newSelectionState.forEach((id: GridRowId) => { From 4e8cdcb74af4bde555f866556f21b394ca62c747 Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 4 Aug 2021 10:31:07 +0200 Subject: [PATCH 39/43] Fix doc --- .../grid/hooks/features/selection/useGridSelection.ts | 3 +-- packages/grid/_modules_/grid/models/gridOptions.tsx | 5 +++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts index a6aaf332b7d0e..3561fd5aada7d 100644 --- a/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts +++ b/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts @@ -5,7 +5,6 @@ import { GridApiRef } from '../../../models/api/gridApiRef'; import { GridSelectionApi } from '../../../models/api/gridSelectionApi'; import { GridRowParams } from '../../../models/params/gridRowParams'; import { GridRowId, GridRowModel } from '../../../models/gridRows'; -import { GridSelectionModel } from '../../../models/gridSelectionModel'; import { useGridApiEventHandler } from '../../root/useGridApiEventHandler'; import { useGridApiMethod } from '../../root/useGridApiMethod'; import { optionsSelector } from '../../utils/optionsSelector'; @@ -187,7 +186,7 @@ export const useGridSelection = (apiRef: GridApiRef, props: GridComponentProps): useGridApiMethod(apiRef, selectionApi, 'GridSelectionApi'); React.useEffect(() => { - apiRef.current.updateControlState({ + apiRef.current.updateControlState({ stateId: 'selection', propModel: propSelectionModel, propOnChange: props.onSelectionModelChange, diff --git a/packages/grid/_modules_/grid/models/gridOptions.tsx b/packages/grid/_modules_/grid/models/gridOptions.tsx index 21d43155db7cf..2cc7c706c1bf3 100644 --- a/packages/grid/_modules_/grid/models/gridOptions.tsx +++ b/packages/grid/_modules_/grid/models/gridOptions.tsx @@ -24,6 +24,7 @@ import { GridResizeParams } from './params/gridResizeParams'; import { GridColumnResizeParams } from './params/gridColumnResizeParams'; import { GridColumnVisibilityChangeParams } from './params/gridColumnVisibilityChangeParams'; import { GridClasses } from './gridClasses'; +import { GridRowId } from './gridRows'; export type MuiEvent = E & { defaultMuiPrevented?: boolean; @@ -441,9 +442,9 @@ export interface GridOptions { onResize?: (param: GridResizeParams, event: MuiEvent<{}>) => void; /** * Callback fired when the selection state of one or multiple rows changes. - * @param selectionModel With all the row ids [[GridSelectionModel]]. + * @param selectionModel With all the row ids [[GridRowId]]. */ - onSelectionModelChange?: (selectionModel: GridSelectionModel) => void; + onSelectionModelChange?: (selectionModel: GridRowId[]) => void; /** * Callback fired when the sort model changes before a column is sorted. * @param param With all properties from [[GridSortModel]]. From f2e9e80a33b429b9a539be9fc63b3bd570b948fa Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 4 Aug 2021 10:36:42 +0200 Subject: [PATCH 40/43] Fix --- .../_modules_/grid/hooks/features/core/gridState.ts | 4 ++-- .../features/selection/gridSelectionSelector.ts | 12 ++++++------ .../hooks/features/selection/gridSelectionState.ts | 3 --- .../_modules_/grid/hooks/features/selection/index.ts | 1 - packages/grid/_modules_/grid/models/gridOptions.tsx | 9 ++++----- .../grid/_modules_/grid/models/gridSelectionModel.ts | 4 +++- .../models/params/gridSelectionModelChangeParams.ts | 11 ----------- packages/grid/_modules_/grid/models/params/index.ts | 1 - .../grid/x-grid/src/tests/selection.XGrid.test.tsx | 4 ++-- .../storybook/src/stories/grid-selection.stories.tsx | 4 ++-- 10 files changed, 19 insertions(+), 34 deletions(-) delete mode 100644 packages/grid/_modules_/grid/hooks/features/selection/gridSelectionState.ts delete mode 100644 packages/grid/_modules_/grid/models/params/gridSelectionModelChangeParams.ts diff --git a/packages/grid/_modules_/grid/hooks/features/core/gridState.ts b/packages/grid/_modules_/grid/hooks/features/core/gridState.ts index 9218cf70337de..f9f56014d771c 100644 --- a/packages/grid/_modules_/grid/hooks/features/core/gridState.ts +++ b/packages/grid/_modules_/grid/hooks/features/core/gridState.ts @@ -26,7 +26,7 @@ import { import { GridFocusState, GridTabIndexState } from '../focus/gridFocusState'; import { GridPreferencePanelState } from '../preferencesPanel/gridPreferencePanelState'; import { getInitialGridRowState, InternalGridRowsState } from '../rows/gridRowsState'; -import { GridSelectionState } from '../selection/gridSelectionState'; +import { GridSelectionModel } from '../../../models/gridSelectionModel'; import { getInitialGridSortingState, GridSortingState } from '../sorting/gridSortingState'; import { getInitialGridRenderingState, @@ -51,7 +51,7 @@ export interface GridState { sorting: GridSortingState; focus: GridFocusState; tabIndex: GridTabIndexState; - selection: GridSelectionState; + selection: GridSelectionModel; filter: GridFilterModel; visibleRows: VisibleGridRowsState; preferencePanel: GridPreferencePanelState; diff --git a/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionSelector.ts b/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionSelector.ts index a75ec4de19d72..64144027654d7 100644 --- a/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionSelector.ts +++ b/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionSelector.ts @@ -1,22 +1,22 @@ import { createSelector, OutputSelector } from 'reselect'; import { gridRowsLookupSelector, GridRowsLookup } from '../rows/gridRowsSelector'; import { GridState } from '../core/gridState'; -import { GridSelectionState } from './gridSelectionState'; import { GridRowId, GridRowModel } from '../../../models/gridRows'; +import { GridSelectionModel } from '../../../models/gridSelectionModel'; export const gridSelectionStateSelector = (state: GridState) => state.selection; export const selectedGridRowsCountSelector: OutputSelector< GridState, number, - (res: GridSelectionState) => number -> = createSelector( + (res: GridSelectionModel) => number +> = createSelector( gridSelectionStateSelector, (selection) => selection.length, ); export const selectedGridRowsSelector = createSelector< GridState, - GridSelectionState, + GridSelectionModel, GridRowsLookup, Map >( @@ -28,8 +28,8 @@ export const selectedGridRowsSelector = createSelector< export const selectedIdsLookupSelector: OutputSelector< GridState, Record, - (res: GridSelectionState) => Record -> = createSelector>( + (res: GridSelectionModel) => Record +> = createSelector>( gridSelectionStateSelector, (selection) => selection.reduce((lookup, rowId) => { diff --git a/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionState.ts b/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionState.ts deleted file mode 100644 index 28fd25e8c7bb2..0000000000000 --- a/packages/grid/_modules_/grid/hooks/features/selection/gridSelectionState.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { GridRowId } from '../../../models/gridRows'; - -export type GridSelectionState = GridRowId[]; diff --git a/packages/grid/_modules_/grid/hooks/features/selection/index.ts b/packages/grid/_modules_/grid/hooks/features/selection/index.ts index eeabddf8403ab..89dc7db8f87b1 100644 --- a/packages/grid/_modules_/grid/hooks/features/selection/index.ts +++ b/packages/grid/_modules_/grid/hooks/features/selection/index.ts @@ -1,3 +1,2 @@ -export * from './gridSelectionState'; export * from './gridSelectionSelector'; export * from './useGridSelection'; diff --git a/packages/grid/_modules_/grid/models/gridOptions.tsx b/packages/grid/_modules_/grid/models/gridOptions.tsx index 2cc7c706c1bf3..c67bd63b74a4e 100644 --- a/packages/grid/_modules_/grid/models/gridOptions.tsx +++ b/packages/grid/_modules_/grid/models/gridOptions.tsx @@ -11,7 +11,7 @@ import { Logger } from './logger'; import { GridCellParams } from './params/gridCellParams'; import { GridColumnHeaderParams } from './params/gridColumnHeaderParams'; import { GridRowParams } from './params/gridRowParams'; -import { GridSelectionModel } from './gridSelectionModel'; +import { GridInputSelectionModel, GridSelectionModel } from './gridSelectionModel'; import { GridSortDirection, GridSortModel } from './gridSortModel'; import { GridEditCellPropsParams, @@ -24,7 +24,6 @@ import { GridResizeParams } from './params/gridResizeParams'; import { GridColumnResizeParams } from './params/gridColumnResizeParams'; import { GridColumnVisibilityChangeParams } from './params/gridColumnVisibilityChangeParams'; import { GridClasses } from './gridClasses'; -import { GridRowId } from './gridRows'; export type MuiEvent = E & { defaultMuiPrevented?: boolean; @@ -442,9 +441,9 @@ export interface GridOptions { onResize?: (param: GridResizeParams, event: MuiEvent<{}>) => void; /** * Callback fired when the selection state of one or multiple rows changes. - * @param selectionModel With all the row ids [[GridRowId]]. + * @param selectionModel With all the row ids [[GridSelectionModel]]. */ - onSelectionModelChange?: (selectionModel: GridRowId[]) => void; + onSelectionModelChange?: (selectionModel: GridSelectionModel) => void; /** * Callback fired when the sort model changes before a column is sorted. * @param param With all properties from [[GridSortModel]]. @@ -500,7 +499,7 @@ export interface GridOptions { /** * Set the selection model of the grid. */ - selectionModel?: GridSelectionModel; + selectionModel?: GridInputSelectionModel; /** * If `true`, the right border of the cells are displayed. * @default false diff --git a/packages/grid/_modules_/grid/models/gridSelectionModel.ts b/packages/grid/_modules_/grid/models/gridSelectionModel.ts index 26b314ebeae30..436c366b4f249 100644 --- a/packages/grid/_modules_/grid/models/gridSelectionModel.ts +++ b/packages/grid/_modules_/grid/models/gridSelectionModel.ts @@ -1,3 +1,5 @@ import { GridRowId } from './gridRows'; -export type GridSelectionModel = GridRowId[] | GridRowId; +export type GridInputSelectionModel = GridRowId[] | GridRowId; + +export type GridSelectionModel = GridRowId[]; diff --git a/packages/grid/_modules_/grid/models/params/gridSelectionModelChangeParams.ts b/packages/grid/_modules_/grid/models/params/gridSelectionModelChangeParams.ts deleted file mode 100644 index aa54877ece835..0000000000000 --- a/packages/grid/_modules_/grid/models/params/gridSelectionModelChangeParams.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { GridRowId } from '../gridRows'; - -/** - * Object passed as parameter as the selection change event handler. - */ -export interface GridSelectionModelChangeParams { - /** - * The set of rows that had their selection state change. - */ - selectionModel: GridRowId[]; -} diff --git a/packages/grid/_modules_/grid/models/params/index.ts b/packages/grid/_modules_/grid/models/params/index.ts index 348df6ce21524..6e01324a59e5c 100644 --- a/packages/grid/_modules_/grid/models/params/index.ts +++ b/packages/grid/_modules_/grid/models/params/index.ts @@ -6,7 +6,6 @@ export * from './gridColumnResizeParams'; export * from './gridSlotComponentProps'; export * from './gridRowParams'; export * from './gridScrollParams'; -export * from './gridSelectionModelChangeParams'; export * from './gridSortModelParams'; export * from './gridStateChangeParams'; export * from './gridRowScrollEndParams'; diff --git a/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx b/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx index 2a64c219c2254..45ed9b42e5ea0 100644 --- a/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx +++ b/packages/grid/x-grid/src/tests/selection.XGrid.test.tsx @@ -12,7 +12,7 @@ import { import { GridApiRef, GridComponentProps, - GridSelectionModel, + GridInputSelectionModel, useGridApiRef, XGrid, GRID_SELECTION_CHANGE, @@ -271,7 +271,7 @@ describe(' - Selection', () => { }); it('should not update the selection model when the selectionModelProp is set', () => { - const selectionModel: GridSelectionModel = [1]; + const selectionModel: GridInputSelectionModel = [1]; render(); expect(getRow(0)).not.to.have.class('Mui-selected'); diff --git a/packages/storybook/src/stories/grid-selection.stories.tsx b/packages/storybook/src/stories/grid-selection.stories.tsx index df00c45bb680f..e57b4051d693e 100644 --- a/packages/storybook/src/stories/grid-selection.stories.tsx +++ b/packages/storybook/src/stories/grid-selection.stories.tsx @@ -1,7 +1,7 @@ import { useDemoData } from '@material-ui/x-grid-data-generator'; import * as React from 'react'; import { action } from '@storybook/addon-actions'; -import { XGrid, GridOptionsProp, useGridApiRef, GridRowId } from '@material-ui/x-grid'; +import { XGrid, GridOptionsProp, useGridApiRef } from '@material-ui/x-grid'; import { getData, GridData } from '../data/data-service'; import { useData } from '../hooks/useData'; @@ -70,7 +70,7 @@ export function HandleSelection() { rowLength: 100, }); - const [selectionModel, setSelectionModel] = React.useState([]); + const [selectionModel, setSelectionModel] = React.useState([]); const handleSelection = React.useCallback( (model) => { setSelectionModel(model); From 5a3c506ab07b1289986a9753d999b8ca7554ad85 Mon Sep 17 00:00:00 2001 From: delangle Date: Wed, 4 Aug 2021 10:44:28 +0200 Subject: [PATCH 41/43] Fix --- packages/storybook/src/stories/grid-selection.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/storybook/src/stories/grid-selection.stories.tsx b/packages/storybook/src/stories/grid-selection.stories.tsx index e57b4051d693e..aa20576e72587 100644 --- a/packages/storybook/src/stories/grid-selection.stories.tsx +++ b/packages/storybook/src/stories/grid-selection.stories.tsx @@ -1,7 +1,7 @@ import { useDemoData } from '@material-ui/x-grid-data-generator'; import * as React from 'react'; import { action } from '@storybook/addon-actions'; -import { XGrid, GridOptionsProp, useGridApiRef } from '@material-ui/x-grid'; +import { XGrid, GridOptionsProp, GridSelectionModel, useGridApiRef } from '@material-ui/x-grid'; import { getData, GridData } from '../data/data-service'; import { useData } from '../hooks/useData'; @@ -87,7 +87,7 @@ export function HandleSelection() { /> ); } -export const GridSelectionModel = () => { +export const GridSelection = () => { const data = useData(200, 200); return ; From 26bc41735e389039e737c90bd58b29292922a599 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 5 Aug 2021 00:12:40 +0200 Subject: [PATCH 42/43] Add todo for defaultProps --- packages/grid/x-grid/src/XGrid.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/grid/x-grid/src/XGrid.tsx b/packages/grid/x-grid/src/XGrid.tsx index 1070673119091..ce3cc07ea03c5 100644 --- a/packages/grid/x-grid/src/XGrid.tsx +++ b/packages/grid/x-grid/src/XGrid.tsx @@ -52,6 +52,7 @@ const XGridRaw = React.forwardRef(function XGrid(inP ); }); +// TODO remove defaultProps, API is going away in React, soon or later. XGridRaw.defaultProps = DEFAULT_GRID_PROPS_FROM_OPTIONS; export const XGrid = React.memo(XGridRaw); From fc1ebbc674a06d817c3e2843eb086c791c6ec750 Mon Sep 17 00:00:00 2001 From: delangle Date: Thu, 5 Aug 2021 09:20:42 +0200 Subject: [PATCH 43/43] Fix --- packages/grid/x-grid/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/x-grid/src/index.ts b/packages/grid/x-grid/src/index.ts index 8f145324eaed7..82e84574a437f 100644 --- a/packages/grid/x-grid/src/index.ts +++ b/packages/grid/x-grid/src/index.ts @@ -1,4 +1,4 @@ export { LicenseInfo } from '@material-ui/x-license'; export * from '../../_modules_'; export * from './XGrid'; -export * from './XGridProps' \ No newline at end of file +export * from './XGridProps';