Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

[DataGrid] Drop support of v4 below 4.12.0 #2281

Merged
merged 7 commits into from
Aug 12, 2021
Merged

[DataGrid] Drop support of v4 below 4.12.0 #2281

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cc75498
Check if valueOptions exsit
DanailH Aug 2, 2021
fe483ab
Fix docs
DanailH Aug 4, 2021
4294436
revert unwanted changes
DanailH Aug 4, 2021
ccde79d
Drop support of v4 below 4.12.0
DanailH Aug 10, 2021
61e9b46
Resolve conflicts
DanailH Aug 10, 2021
aa8a0aa
Merge branch 'master' of github.com:mui-org/material-ui-x into bug/Da…
DanailH Aug 11, 2021
5c455e6
Change styles version
DanailH Aug 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/src/pages/components/data-grid/components/CustomColumnMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/styles';
import { createMuiTheme } from '@material-ui/core/styles';
import { createTheme } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import {
GridColumnMenu,
Expand All @@ -13,7 +13,7 @@ import {
} from '@material-ui/x-grid';
import StarOutlineIcon from '@material-ui/icons/StarOutline';

const defaultTheme = createMuiTheme();
const defaultTheme = createTheme();
const useStyles = makeStyles(
(theme) => ({
primary: {
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/data-grid/components/CustomColumnMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/styles';
import { createMuiTheme, Theme } from '@material-ui/core/styles';
import { createTheme, Theme } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import {
GridColumnMenu,
Expand All @@ -13,7 +13,7 @@ import {
} from '@material-ui/x-grid';
import StarOutlineIcon from '@material-ui/icons/StarOutline';

const defaultTheme = createMuiTheme();
const defaultTheme = createTheme();
const useStyles = makeStyles(
(theme: Theme) => ({
primary: {
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/data-grid/components/CustomEmptyOverlayGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import * as React from 'react';
import { GridOverlay, DataGrid } from '@material-ui/data-grid';
import { useDemoData } from '@material-ui/x-grid-data-generator';
import { createMuiTheme } from '@material-ui/core/styles';
import { createTheme } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/styles';

const defaultTheme = createMuiTheme();
const defaultTheme = createTheme();
const useStyles = makeStyles(
(theme) => ({
root: {
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/data-grid/components/CustomEmptyOverlayGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import * as React from 'react';
import { GridOverlay, DataGrid } from '@material-ui/data-grid';
import { useDemoData } from '@material-ui/x-grid-data-generator';
import { createMuiTheme, Theme } from '@material-ui/core/styles';
import { createTheme, Theme } from '@material-ui/core/styles';
import { createStyles, makeStyles } from '@material-ui/styles';

const defaultTheme = createMuiTheme();
const defaultTheme = createTheme();
const useStyles = makeStyles(
(theme: Theme) =>
createStyles({
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/data-grid/demo/FullFeaturedDemo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ import { XGrid, GridToolbar } from '@material-ui/x-grid';
import { useDemoData } from '@material-ui/x-grid-data-generator';
import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
import { makeStyles } from '@material-ui/styles';
import { createMuiTheme } from '@material-ui/core/styles';
import { createTheme } from '@material-ui/core/styles';
import FormControl from '@material-ui/core/FormControl';
import FormGroup from '@material-ui/core/FormGroup';
import Button from '@material-ui/core/Button';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select';

const defaultTheme = createMuiTheme();
const defaultTheme = createTheme();
const useStylesAntDesign = makeStyles(
(theme) => ({
root: {
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/data-grid/demo/FullFeaturedDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@ import { XGrid, GridToolbar } from '@material-ui/x-grid';
import { useDemoData } from '@material-ui/x-grid-data-generator';
import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
import { makeStyles } from '@material-ui/styles';
import { createMuiTheme, Theme } from '@material-ui/core/styles';
import { createTheme, Theme } from '@material-ui/core/styles';
import FormControl from '@material-ui/core/FormControl';
import FormGroup from '@material-ui/core/FormGroup';
import Button from '@material-ui/core/Button';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select';

const defaultTheme = createMuiTheme();
const defaultTheme = createTheme();
const useStylesAntDesign = makeStyles(
(theme) => ({
root: {
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/data-grid/editing/IsCellEditableGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/no-use-before-define */
import * as React from 'react';
import { createMuiTheme } from '@material-ui/core/styles';
import { createTheme } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/styles';
import { DataGrid } from '@material-ui/data-grid';
import {
Expand All @@ -14,7 +14,7 @@ function getThemePaletteMode(palette) {
return palette.type || palette.mode;
}

const defaultTheme = createMuiTheme();
const defaultTheme = createTheme();
const useStyles = makeStyles(
(theme) => {
const backgroundColor =
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/data-grid/editing/IsCellEditableGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/no-use-before-define */
import * as React from 'react';
import { createMuiTheme, Theme } from '@material-ui/core/styles';
import { createTheme, Theme } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/styles';
import { DataGrid, GridColumns, GridRowsProp } from '@material-ui/data-grid';
import {
Expand All @@ -14,7 +14,7 @@ function getThemePaletteMode(palette: any): string {
return palette.type || palette.mode;
}

const defaultTheme = createMuiTheme();
const defaultTheme = createTheme();
const useStyles = makeStyles(
(theme: Theme) => {
const backgroundColor =
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/data-grid/editing/StartEditButtonGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ import {
randomTraderName,
randomUpdatedDate,
} from '@material-ui/x-grid-data-generator';
import { createMuiTheme } from '@material-ui/core/styles';
import { createTheme } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/styles';

const defaultTheme = createMuiTheme();
const defaultTheme = createTheme();
const useStyles = makeStyles(
(theme) => ({
root: {
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/data-grid/editing/StartEditButtonGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@ import {
randomTraderName,
randomUpdatedDate,
} from '@material-ui/x-grid-data-generator';
import { createMuiTheme, Theme } from '@material-ui/core/styles';
import { createTheme, Theme } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/styles';

const defaultTheme = createMuiTheme();
const defaultTheme = createTheme();
const useStyles = makeStyles(
(theme: Theme) => ({
root: {
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/data-grid/editing/ValidateRowModelControlGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/no-use-before-define */
import * as React from 'react';
import { createMuiTheme } from '@material-ui/core/styles';
import { createTheme } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/styles';
import { DataGrid } from '@material-ui/data-grid';
import {
Expand All @@ -15,7 +15,7 @@ function getThemePaletteMode(palette) {
return palette.type || palette.mode;
}

const defaultTheme = createMuiTheme();
const defaultTheme = createTheme();
const useStyles = makeStyles(
(theme) => {
const isDark = getThemePaletteMode(theme.palette) === 'dark';
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/data-grid/editing/ValidateRowModelControlGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/no-use-before-define */
import * as React from 'react';
import { createMuiTheme, Theme } from '@material-ui/core/styles';
import { createTheme, Theme } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/styles';
import {
DataGrid,
Expand All @@ -20,7 +20,7 @@ function getThemePaletteMode(palette: any): string {
return palette.type || palette.mode;
}

const defaultTheme = createMuiTheme();
const defaultTheme = createTheme();
const useStyles = makeStyles(
(theme: Theme) => {
const isDark = getThemePaletteMode(theme.palette) === 'dark';
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/data-grid/editing/ValidateServerNameGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/no-use-before-define */
import * as React from 'react';
import { createMuiTheme } from '@material-ui/core/styles';
import { createTheme } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/styles';
import { useGridApiRef, XGrid } from '@material-ui/x-grid';

Expand All @@ -9,7 +9,7 @@ function getThemePaletteMode(palette) {
return palette.type || palette.mode;
}

const defaultTheme = createMuiTheme();
const defaultTheme = createTheme();
const useStyles = makeStyles(
(theme) => {
const isDark = getThemePaletteMode(theme.palette) === 'dark';
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/data-grid/editing/ValidateServerNameGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/no-use-before-define */
import * as React from 'react';
import { createMuiTheme, Theme } from '@material-ui/core/styles';
import { createTheme, Theme } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/styles';
import {
GridColumns,
Expand All @@ -15,7 +15,7 @@ function getThemePaletteMode(palette: any): string {
return palette.type || palette.mode;
}

const defaultTheme = createMuiTheme();
const defaultTheme = createTheme();
const useStyles = makeStyles(
(theme: Theme) => {
const isDark = getThemePaletteMode(theme.palette) === 'dark';
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/data-grid/filtering/QuickFilteringGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ import {
import { useDemoData } from '@material-ui/x-grid-data-generator';
import ClearIcon from '@material-ui/icons/Clear';
import SearchIcon from '@material-ui/icons/Search';
import { createMuiTheme } from '@material-ui/core/styles';
import { createTheme } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/styles';

function escapeRegExp(value) {
return value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
}

const defaultTheme = createMuiTheme();
const defaultTheme = createTheme();
const useStyles = makeStyles(
(theme) => ({
root: {
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/data-grid/filtering/QuickFilteringGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@ import {
import { useDemoData } from '@material-ui/x-grid-data-generator';
import ClearIcon from '@material-ui/icons/Clear';
import SearchIcon from '@material-ui/icons/Search';
import { createMuiTheme, Theme } from '@material-ui/core/styles';
import { createTheme, Theme } from '@material-ui/core/styles';
import { createStyles, makeStyles } from '@material-ui/styles';

function escapeRegExp(value: string): string {
return value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
}

const defaultTheme = createMuiTheme();
const defaultTheme = createTheme();
const useStyles = makeStyles(
(theme: Theme) =>
createStyles({
Expand Down
12 changes: 6 additions & 6 deletions docs/src/pages/components/data-grid/localization/localization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,10 @@ The default locale of Material-UI is English (United States).
You can use the theme to configure the locale text:

```jsx
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import { createTheme, ThemeProvider } from '@material-ui/core/styles';
import { DataGrid, bgBG } from '@material-ui/data-grid';

const theme = createMuiTheme(
const theme = createTheme(
{
palette: {
primary: { main: '#1976d2' },
Expand All @@ -40,16 +40,16 @@ const theme = createMuiTheme(
</ThemeProvider>;
```

Note that `createMuiTheme` accepts any number of arguments.
Note that `createTheme` accepts any number of arguments.
If you are already using the [translations of the core components](/guides/localization/#locale-text), you can add `bgBG` as a new argument.
The same import works for `XGrid` as it's an extension of `DataGrid`.

```jsx
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import { createTheme, ThemeProvider } from '@material-ui/core/styles';
import { DataGrid, bgBG } from '@material-ui/data-grid';
import { bgBG as coreBgBG } from '@material-ui/core/locale';

const theme = createMuiTheme(
const theme = createTheme(
{
palette: {
primary: { main: '#1976d2' },
Expand All @@ -64,7 +64,7 @@ const theme = createMuiTheme(
</ThemeProvider>;
```

If you want to pass language translations directly to the grid without using `createMuiTheme` and `ThemeProvider`, you can directly load the language translations from the `@material-ui/data-grid` or `@material-ui/x-grid` package.
If you want to pass language translations directly to the grid without using `createTheme` and `ThemeProvider`, you can directly load the language translations from the `@material-ui/data-grid` or `@material-ui/x-grid` package.

```jsx
import { DataGrid, nlNL } from '@material-ui/data-grid';
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/data-grid/style/AntDesignGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import { DataGrid, useGridSlotComponentProps } from '@material-ui/data-grid';
import { useDemoData } from '@material-ui/x-grid-data-generator';
import { createMuiTheme } from '@material-ui/core/styles';
import { createTheme } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/styles';
import Pagination from '@material-ui/lab/Pagination';
import PaginationItem from '@material-ui/lab/PaginationItem';
Expand Down Expand Up @@ -50,7 +50,7 @@ function customCheckbox(theme) {
};
}

const defaultTheme = createMuiTheme();
const defaultTheme = createTheme();
const useStyles = makeStyles(
(theme) => ({
root: {
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/data-grid/style/AntDesignGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import { DataGrid, useGridSlotComponentProps } from '@material-ui/data-grid';
import { useDemoData } from '@material-ui/x-grid-data-generator';
import { createMuiTheme, Theme } from '@material-ui/core/styles';
import { createTheme, Theme } from '@material-ui/core/styles';
import { createStyles, makeStyles } from '@material-ui/styles';
import Pagination from '@material-ui/lab/Pagination';
import PaginationItem from '@material-ui/lab/PaginationItem';
Expand Down Expand Up @@ -50,7 +50,7 @@ function customCheckbox(theme: Theme) {
};
}

const defaultTheme = createMuiTheme();
const defaultTheme = createTheme();
const useStyles = makeStyles(
(theme: Theme) =>
createStyles({
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/data-grid/style/StylingRowsGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import * as React from 'react';
import { DataGrid } from '@material-ui/data-grid';
import { useDemoData } from '@material-ui/x-grid-data-generator';
import { createMuiTheme, darken, lighten } from '@material-ui/core/styles';
import { createTheme, darken, lighten } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/styles';

// TODO v5: remove
function getThemePaletteMode(palette) {
return palette.type || palette.mode;
}

const defaultTheme = createMuiTheme();
const defaultTheme = createTheme();
const useStyles = makeStyles(
(theme) => {
const getBackgroundColor = (color) =>
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/components/data-grid/style/StylingRowsGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import * as React from 'react';
import { DataGrid } from '@material-ui/data-grid';
import { useDemoData } from '@material-ui/x-grid-data-generator';
import { createMuiTheme, darken, lighten, Theme } from '@material-ui/core/styles';
import { createTheme, darken, lighten, Theme } from '@material-ui/core/styles';
DanailH marked this conversation as resolved.
Show resolved Hide resolved
import { makeStyles } from '@material-ui/styles';

// TODO v5: remove
function getThemePaletteMode(palette: any): string {
return palette.type || palette.mode;
}

const defaultTheme = createMuiTheme();
const defaultTheme = createTheme();
const useStyles = makeStyles(
(theme: Theme) => {
const getBackgroundColor = (color) =>
Expand Down
4 changes: 2 additions & 2 deletions packages/grid/_modules_/grid/components/toolbar/GridToolbarFilterButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,9 +76,9 @@ export const GridToolbarFilterButton = React.forwardRef<
<div>
{apiRef!.current.getLocaleText('toolbarFiltersTooltipActive')(counter)}
<ul className={classes.list}>
{activeFilters.map((item) => ({
{activeFilters.map((item, index) => ({
...(lookup[item.columnField!] && (
<li key={item.id}>
<li key={index}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1 for reverting this change that Damien did recently.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So keep that change right?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeap

{`${lookup[item.columnField!].headerName || item.columnField}
${getOperatorLabel(item)}
${item.value}`}
Expand Down
2 changes: 1 addition & 1 deletion packages/grid/data-grid/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ This component has two peer dependencies that you will need to install as well.

```json
"peerDependencies": {
"@material-ui/core": "^4.9.12 || ^5.0.0-beta.0",
"@material-ui/core": "^4.12.0 || ^5.0.0-beta.0",
"react": "^17.0.0"
},
```
Expand Down
Loading