From 14070ff03f6a005885833d97e3dd27fc64c8cc07 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 30 Nov 2020 12:18:44 +0100 Subject: [PATCH] [DataGrid] Grid depends on side effects --- .../grid/_modules_/grid/GridComponent.tsx | 2 +- .../grid/components/column-headers.tsx | 8 ++- .../menu/columnMenu/GridColumnHeaderMenu.tsx | 12 ++-- .../_modules_/grid/components/pagination.tsx | 10 ++- .../grid/components/tools/ColumnsPanel.tsx | 48 +++++++------ .../grid/components/tools/FilterForm.tsx | 70 ++++++++++--------- .../components/tools/FilterInputValue.tsx | 9 +-- .../grid/components/tools/FilterPanel.tsx | 12 ++-- .../_modules_/grid/components/tools/Panel.tsx | 6 +- .../{Preferences.tsx => PreferencesPanel.tsx} | 16 +++-- .../_modules_/grid/components/tools/index.ts | 2 +- 11 files changed, 112 insertions(+), 83 deletions(-) rename packages/grid/_modules_/grid/components/tools/{Preferences.tsx => PreferencesPanel.tsx} (75%) diff --git a/packages/grid/_modules_/grid/GridComponent.tsx b/packages/grid/_modules_/grid/GridComponent.tsx index 35b63274f5fd0..7a471cf148031 100644 --- a/packages/grid/_modules_/grid/GridComponent.tsx +++ b/packages/grid/_modules_/grid/GridComponent.tsx @@ -202,7 +202,7 @@ export const GridComponent = React.forwardRef) + (customComponents.paginationComponent || ) } /> )} diff --git a/packages/grid/_modules_/grid/components/column-headers.tsx b/packages/grid/_modules_/grid/components/column-headers.tsx index f29ab7d9aa3ea..73f3c901d7b02 100644 --- a/packages/grid/_modules_/grid/components/column-headers.tsx +++ b/packages/grid/_modules_/grid/components/column-headers.tsx @@ -7,7 +7,7 @@ import { ColumnHeaderItem } from './column-header-item'; import { ApiContext } from './api-context'; import { LeftEmptyCell, RightEmptyCell } from './cell'; import { GridColumnHeaderMenu } from './menu/columnMenu/GridColumnHeaderMenu'; -import { PreferencesPanel } from './tools/Preferences'; +import { PreferencesPanel } from './tools/PreferencesPanel'; import { containerSizesSelector } from './viewport'; import { OptionsContext } from './options-context'; import { ScrollArea } from './ScrollArea'; @@ -57,8 +57,10 @@ export const ColumnHeaderItemCollection: React.FC - - + {/* apiRef deopt for plugin-transform-react-constant-elements */} + + {/* apiRef deopt for plugin-transform-react-constant-elements */} + {items} ); diff --git a/packages/grid/_modules_/grid/components/menu/columnMenu/GridColumnHeaderMenu.tsx b/packages/grid/_modules_/grid/components/menu/columnMenu/GridColumnHeaderMenu.tsx index 2427af7fa30af..0e399a23b5b12 100644 --- a/packages/grid/_modules_/grid/components/menu/columnMenu/GridColumnHeaderMenu.tsx +++ b/packages/grid/_modules_/grid/components/menu/columnMenu/GridColumnHeaderMenu.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import { ColumnMenuState } from '../../../hooks/features/columnMenu/columnMenuState'; import { GridState } from '../../../hooks/features/core/gridState'; import { useGridSelector } from '../../../hooks/features/core/useGridSelector'; +import { ApiRef } from '../../../models/api/apiRef'; import { findHeaderElementFromField } from '../../../utils/domUtils'; -import { ApiContext } from '../../api-context'; import { GridMenu } from '../GridMenu'; import { FilterMenuItem } from './FilterMenuItem'; import { HideColMenuItem } from './HideColMenuItem'; @@ -11,8 +11,12 @@ import { SortMenuItems } from './SortMenuItems'; const columnMenuStateSelector = (state: GridState) => state.columnMenu; -export const GridColumnHeaderMenu: React.FC<{}> = () => { - const apiRef = React.useContext(ApiContext); +interface GridColumnHeaderMenuProps { + apiRef?: ApiRef; +} + +export function GridColumnHeaderMenu(props: GridColumnHeaderMenuProps) { + const { apiRef } = props; const columnMenuState = useGridSelector(apiRef!, columnMenuStateSelector); const currentColumn = columnMenuState.field ? apiRef?.current.getColumnFromField(columnMenuState.field) @@ -74,4 +78,4 @@ export const GridColumnHeaderMenu: React.FC<{}> = () => { ); -}; +} diff --git a/packages/grid/_modules_/grid/components/pagination.tsx b/packages/grid/_modules_/grid/components/pagination.tsx index e484c21032c1d..2169a2c1f2963 100644 --- a/packages/grid/_modules_/grid/components/pagination.tsx +++ b/packages/grid/_modules_/grid/components/pagination.tsx @@ -4,7 +4,7 @@ import { makeStyles, Theme } from '@material-ui/core/styles'; import { useGridSelector } from '../hooks/features/core/useGridSelector'; import { paginationSelector } from '../hooks/features/pagination/paginationSelector'; import { optionsSelector } from '../hooks/utils/useOptionsProp'; -import { ApiContext } from './api-context'; +import { ApiRef } from '../models/api/apiRef'; // Used to hide the drop down select from the TablePaginagion const useStyles = makeStyles((theme: Theme) => ({ @@ -25,9 +25,13 @@ const useStyles = makeStyles((theme: Theme) => ({ }, })); -export function Pagination() { +interface PaginationProps { + apiRef?: ApiRef; +} + +export function Pagination(props: PaginationProps) { const classes = useStyles(); - const apiRef = React.useContext(ApiContext); + const { apiRef } = props; const paginationState = useGridSelector(apiRef, paginationSelector); const options = useGridSelector(apiRef, optionsSelector); diff --git a/packages/grid/_modules_/grid/components/tools/ColumnsPanel.tsx b/packages/grid/_modules_/grid/components/tools/ColumnsPanel.tsx index 883cef7120250..85609e9d51e35 100644 --- a/packages/grid/_modules_/grid/components/tools/ColumnsPanel.tsx +++ b/packages/grid/_modules_/grid/components/tools/ColumnsPanel.tsx @@ -9,31 +9,37 @@ import { makeStyles } from '@material-ui/core/styles'; import { allColumnsSelector } from '../../hooks/features/columns/columnsSelector'; import { useGridSelector } from '../../hooks/features/core/useGridSelector'; import { optionsSelector } from '../../hooks/utils/useOptionsProp'; -import { ApiContext } from '../api-context'; +import { ApiRef } from '../../models/api/apiRef'; import { DragIcon } from '../icons/index'; -const useStyles = makeStyles(() => ({ - columnsListContainer: { - paddingTop: 8, - paddingLeft: 12, - }, - column: { - display: 'flex', - justifyContent: 'space-between', - padding: '2px 4px', - }, - switch: { - marginRight: 4, - }, - dragIconRoot: { - justifyContent: 'flex-end', +const useStyles = makeStyles( + { + columnsListContainer: { + paddingTop: 8, + paddingLeft: 12, + }, + column: { + display: 'flex', + justifyContent: 'space-between', + padding: '2px 4px', + }, + switch: { + marginRight: 4, + }, + dragIconRoot: { + justifyContent: 'flex-end', + }, }, -})); + { name: 'MuiDataGridColumnsPanel' }, +); -export const ColumnsPanel: React.FC<{}> = () => { - const classes = useStyles(); +interface ColumnsPanelProps { + apiRef?: ApiRef; +} - const apiRef = React.useContext(ApiContext); +export function ColumnsPanel(props: ColumnsPanelProps) { + const classes = useStyles(); + const { apiRef } = props; const searchInputRef = React.useRef(null); const columns = useGridSelector(apiRef, allColumnsSelector); const { disableColumnReorder } = useGridSelector(apiRef, optionsSelector); @@ -139,4 +145,4 @@ export const ColumnsPanel: React.FC<{}> = () => { ); -}; +} diff --git a/packages/grid/_modules_/grid/components/tools/FilterForm.tsx b/packages/grid/_modules_/grid/components/tools/FilterForm.tsx index add7a6115a4bb..f3512ed7375e8 100644 --- a/packages/grid/_modules_/grid/components/tools/FilterForm.tsx +++ b/packages/grid/_modules_/grid/components/tools/FilterForm.tsx @@ -23,39 +23,43 @@ export interface FilterFormProps { deleteFilter: (item: FilterItem) => void; } -const useStyles = makeStyles(() => ({ - root: { - display: 'flex', - justifyContent: 'space-around', - padding: 8, - }, - linkOperatorSelect: { - width: 60, - }, - columnSelect: { - width: 150, - }, - operatorSelect: { - width: 120, - }, - filterValueInput: { - width: 190, - }, - closeIconRoot: { - justifyContent: 'flex-end', - }, -})); +const useStyles = makeStyles( + () => ({ + root: { + display: 'flex', + justifyContent: 'space-around', + padding: 8, + }, + linkOperatorSelect: { + width: 60, + }, + columnSelect: { + width: 150, + }, + operatorSelect: { + width: 120, + }, + filterValueInput: { + width: 190, + }, + closeIconRoot: { + justifyContent: 'flex-end', + }, + }), + { name: 'MuiDataGridFilterForm' }, +); -export const FilterForm: React.FC = ({ - item, - hasMultipleFilters, - deleteFilter, - applyFilterChanges, - multiFilterOperator, - showMultiFilterOperators, - disableMultiFilterOperator, - applyMultiFilterOperatorChanges, -}) => { +export function FilterForm(props: FilterFormProps) { + const { + item, + hasMultipleFilters, + deleteFilter, + applyFilterChanges, + multiFilterOperator, + showMultiFilterOperators, + disableMultiFilterOperator, + applyMultiFilterOperatorChanges, + } = props; const classes = useStyles(); const apiRef = React.useContext(ApiContext); const filterableColumns = useGridSelector(apiRef, filterableColumnsSelector); @@ -198,4 +202,4 @@ export const FilterForm: React.FC = ({ ); -}; +} diff --git a/packages/grid/_modules_/grid/components/tools/FilterInputValue.tsx b/packages/grid/_modules_/grid/components/tools/FilterInputValue.tsx index 480b45d6ff3f1..810e00d561e6a 100644 --- a/packages/grid/_modules_/grid/components/tools/FilterInputValue.tsx +++ b/packages/grid/_modules_/grid/components/tools/FilterInputValue.tsx @@ -9,11 +9,8 @@ export interface TypeFilterInputValueProps extends FilterInputValueProps { type?: 'text' | 'number' | 'date' | 'datetime-local'; } -export const FilterInputValue: React.FC = ({ - item, - applyValue, - type, -}) => { +export function FilterInputValue(props: TypeFilterInputValueProps) { + const { item, applyValue, type } = props; const filterTimeout = React.useRef(); const [filterValueState, setFilterValueState] = React.useState(item.value || ''); const [applying, setIsApplying] = React.useState(false); @@ -57,4 +54,4 @@ export const FilterInputValue: React.FC = ({ }} /> ); -}; +} diff --git a/packages/grid/_modules_/grid/components/tools/FilterPanel.tsx b/packages/grid/_modules_/grid/components/tools/FilterPanel.tsx index 1dd855912da4f..69f3b410efd6f 100644 --- a/packages/grid/_modules_/grid/components/tools/FilterPanel.tsx +++ b/packages/grid/_modules_/grid/components/tools/FilterPanel.tsx @@ -4,12 +4,16 @@ import { useGridSelector } from '../../hooks/features/core/useGridSelector'; import { useGridState } from '../../hooks/features/core/useGridState'; import { optionsSelector } from '../../hooks/utils/useOptionsProp'; import { FilterItem, LinkOperator } from '../../models/filterItem'; -import { ApiContext } from '../api-context'; +import { ApiRef } from '../../models/api/apiRef'; import { AddIcon } from '../icons/index'; import { FilterForm } from './FilterForm'; -export const FilterPanel: React.FC<{}> = () => { - const apiRef = React.useContext(ApiContext); +interface FilterPanelProps { + apiRef?: ApiRef; +} + +export function FilterPanel(props: FilterPanelProps) { + const { apiRef } = props; const [gridState] = useGridState(apiRef!); const { disableMultipleColumnsFiltering } = useGridSelector(apiRef, optionsSelector); @@ -74,4 +78,4 @@ export const FilterPanel: React.FC<{}> = () => { )} ); -}; +} diff --git a/packages/grid/_modules_/grid/components/tools/Panel.tsx b/packages/grid/_modules_/grid/components/tools/Panel.tsx index b93e392a1b1b6..5097efff7b8cf 100644 --- a/packages/grid/_modules_/grid/components/tools/Panel.tsx +++ b/packages/grid/_modules_/grid/components/tools/Panel.tsx @@ -37,10 +37,12 @@ const useStyles = makeStyles( ); export interface PanelProps { + children?: React.ReactNode; open: boolean; } -export const Panel: React.FC = ({ children, open }) => { +export function Panel(props: PanelProps) { + const { children, open } = props; const classes = useStyles(); const apiRef = React.useContext(ApiContext); const viewportSizes = useGridSelector(apiRef, viewportSizeStateSelector); @@ -80,4 +82,4 @@ export const Panel: React.FC = ({ children, open }) => { ); -}; +} diff --git a/packages/grid/_modules_/grid/components/tools/Preferences.tsx b/packages/grid/_modules_/grid/components/tools/PreferencesPanel.tsx similarity index 75% rename from packages/grid/_modules_/grid/components/tools/Preferences.tsx rename to packages/grid/_modules_/grid/components/tools/PreferencesPanel.tsx index a8331adf15da6..11c0e633451fe 100644 --- a/packages/grid/_modules_/grid/components/tools/Preferences.tsx +++ b/packages/grid/_modules_/grid/components/tools/PreferencesPanel.tsx @@ -4,13 +4,17 @@ import { useGridSelector } from '../../hooks/features/core/useGridSelector'; import { preferencePanelStateSelector } from '../../hooks/features/preferencesPanel/preferencePanelSelector'; import { PreferencePanelsValue } from '../../hooks/features/preferencesPanel/preferencesPanelValue'; import { optionsSelector } from '../../hooks/utils/useOptionsProp'; -import { ApiContext } from '../api-context'; +import { ApiRef } from '../../models/api/apiRef'; import { ColumnsPanel } from './ColumnsPanel'; import { FilterPanel } from './FilterPanel'; import { Panel } from './Panel'; -export function PreferencesPanel() { - const apiRef = React.useContext(ApiContext); +interface PreferencesPanelProps { + apiRef?: ApiRef; +} + +export function PreferencesPanel(props: PreferencesPanelProps) { + const { apiRef } = props; const columns = useGridSelector(apiRef, allColumnsSelector); const options = useGridSelector(apiRef, optionsSelector); const preferencePanelState = useGridSelector(apiRef, preferencePanelStateSelector); @@ -20,8 +24,10 @@ export function PreferencesPanel() { return ( 0 && preferencePanelState.open}> - {!options.disableColumnSelector && isColumnsTabOpen && } - {!options.disableColumnFilter && isFiltersTabOpen && } + {/* apiRef deopt for plugin-transform-react-constant-elements */} + {!options.disableColumnSelector && isColumnsTabOpen && } + {/* apiRef deopt for plugin-transform-react-constant-elements */} + {!options.disableColumnFilter && isFiltersTabOpen && } ); } diff --git a/packages/grid/_modules_/grid/components/tools/index.ts b/packages/grid/_modules_/grid/components/tools/index.ts index 96a79959fa059..db2db98b85a6c 100644 --- a/packages/grid/_modules_/grid/components/tools/index.ts +++ b/packages/grid/_modules_/grid/components/tools/index.ts @@ -4,4 +4,4 @@ export * from './FilterInputValue'; export * from './FilterInputValueProps'; export * from './FilterPanel'; export * from './Panel'; -export * from './Preferences'; +export * from './PreferencesPanel';