Skip to content

Commit

Permalink
MuiDatagrid: remove block border and add type in theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@ddecrulle
ddecrulle committed Nov 28, 2024
1 parent fc124a2 commit ba7c305
Show file tree
Hide file tree
Showing 3 changed files with 146 additions and 110 deletions.
9 changes: 5 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,19 +52,19 @@
"@mui/icons-material": "^6.1.7",
"evt": "^2.5.8",
"memoizee": "^0.4.17",
"@types/memoizee": "^0.4.11",
"minimal-polyfills": "^2.2.3",
"powerhooks": "^1.0.19",
"react-markdown": "^9.0.1",
"run-exclusive": "^2.2.19",
"tsafe": "^1.8.5",
"tss-react": "^4.9.13",
"react-markdown": "^9.0.1"
"tss-react": "^4.9.13"
},
"devDependencies": {
"@emotion/cache": "^11.11.0",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@emotion/cache": "^11.11.0",
"@mui/material": "^6.1.7",
"@mui/x-data-grid": "^7.22.3",
"@storybook/addon-actions": "^6.5.9",
"@storybook/addon-essentials": "^6.5.9",
"@storybook/addon-links": "^6.5.9",
Expand All @@ -78,6 +78,7 @@
"@types/color": "^3.0.3",
"@types/dompurify": "^3.0.5",
"@types/make-fetch-happen": "^10.0.3",
"@types/memoizee": "^0.4.11",
"@types/node": "^17.0.24",
"@types/react": "^18.0.14",
"@types/react-dom": "^18.0.5",
Expand Down
204 changes: 101 additions & 103 deletions src/lib/theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import {
createTheme as createMuiTheme,
unstable_createMuiStrictModeTheme,
} from "@mui/material/styles";
// cf https://mui.com/x/react-data-grid/getting-started/#typescript
import type {} from "@mui/x-data-grid/themeAugmentation";
import type {
PaletteBase,
ColorUseCasesBase,
Expand All @@ -28,6 +30,7 @@ import type { IconSizeName } from "./icon";
import { useContext, createContext } from "react";
import { memoize } from "../tools/memoize";
import { alpha } from "@mui/material/styles";
import { type GridRowClassNameParams } from "@mui/x-data-grid";

export type Theme<
Palette extends PaletteBase = PaletteBase,
Expand Down Expand Up @@ -150,114 +153,109 @@ export function createThemeFactory<
underline: "hover",
},
},
...(() => {
const nonTypedMuiComponents = {
MuiDataGrid: {
styleOverrides: {
root: (() => {
const set = new WeakSet<Function>();

const borderNone = {
border: "none",
};

return (params: {
ownerState?: {
getRowClassName?: (params: {
indexRelativeToCurrentPage: number;
}) => string;
MuiDataGrid: {
styleOverrides: {
root: (() => {
const set = new WeakSet<
(
params: GridRowClassNameParams,
) => string
>();

const borderNone = {
border: "none",
"--DataGrid-rowBorderColor":
"transparent",
};

return (params: {
ownerState?: {
getRowClassName?: (
params: GridRowClassNameParams,
) => string;
};
}) => {
const { ownerState } = params;

if (ownerState === undefined) {
return borderNone;
}

if (
ownerState.getRowClassName ===
undefined ||
!set.has(ownerState.getRowClassName)
) {
const originalGetRowClassName =
ownerState.getRowClassName;

ownerState.getRowClassName =
params => {
const {
indexRelativeToCurrentPage,
} = params;

const parityClassName =
indexRelativeToCurrentPage %
2 ===
0
? "even"
: "odd";

const className =
originalGetRowClassName?.(
params,
);

return className ===
undefined
? parityClassName
: `${parityClassName} ${className}`;
};
}) => {
const { ownerState } = params;

if (ownerState === undefined) {
return borderNone;
}

if (
ownerState.getRowClassName ===
undefined ||
!set.has(
ownerState.getRowClassName,
)
) {
const originalGetRowClassName =
ownerState.getRowClassName;

ownerState.getRowClassName =
params => {
const {
indexRelativeToCurrentPage,
} = params;

const parityClassName =
indexRelativeToCurrentPage %
2 ===
0
? "even"
: "odd";

const className =
originalGetRowClassName?.(
params,
);

return className ===
undefined
? parityClassName
: `${parityClassName} ${className}`;
};

set.add(
ownerState.getRowClassName,
);
}

return borderNone;
};
})(),
row: () => {
const hoveredAndSelected = {
"&.Mui-hovered": {
backgroundColor: alpha(
useCases.typography
.textFocus,
0.6,
),
},
"&.Mui-selected": {
backgroundColor: alpha(
useCases.typography
.textFocus,
0.2,
),
},
};

return {
"&.even": {
backgroundColor:
useCases.surfaces
.surface2,
...hoveredAndSelected,
},
"&.odd": {
backgroundColor:
useCases.surfaces
.background,
...hoveredAndSelected,
},
};

set.add(ownerState.getRowClassName);
}
return borderNone;
};
})(),
row: () => {
const hoveredAndSelected = {
"&.Mui-hovered": {
backgroundColor: alpha(
useCases.typography.textFocus,
0.6,
),
},
"&.Mui-selected": {
backgroundColor: alpha(
useCases.typography.textFocus,
0.2,
),
},
};

return {
"&.even": {
backgroundColor:
useCases.surfaces.surface2,
...hoveredAndSelected,
},
withBorderColor: {
borderColor: "transparent",
"&.odd": {
backgroundColor:
useCases.surfaces.background,
...hoveredAndSelected,
},
},
};
},
};

return nonTypedMuiComponents as any as {};
})(),
cell: {
border: "none",
},
withBorderColor: {
borderColor: "transparent",
},
},
},
},
});

Expand Down
43 changes: 40 additions & 3 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1221,7 +1221,7 @@
dependencies:
regenerator-runtime "^0.14.0"

"@babel/runtime@^7.26.0":
"@babel/runtime@^7.23.9", "@babel/runtime@^7.25.7", "@babel/runtime@^7.26.0":
version "7.26.0"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.0.tgz#8600c2f595f277c60815256418b85356a65173c1"
integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==
Expand Down Expand Up @@ -2042,11 +2042,23 @@
csstype "^3.1.3"
prop-types "^15.8.1"

"@mui/types@^7.2.19":
"@mui/types@^7.2.15", "@mui/types@^7.2.19":
version "7.2.19"
resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.19.tgz#c941954dd24393fdce5f07830d44440cf4ab6c80"
integrity sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA==

"@mui/utils@^5.16.6 || ^6.0.0":
version "5.16.8"
resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.16.8.tgz#e44acf38d446d361347c46b3e81ae366f615f37b"
integrity sha512-P/yb7BSWallQUeiNGxb+TM8epHteIUC8gzNTdPV2VfKhVY/EnGliHgt5np0GPkjQ7EzwDi/+gBevrAJtf+K94A==
dependencies:
"@babel/runtime" "^7.23.9"
"@mui/types" "^7.2.15"
"@types/prop-types" "^15.7.12"
clsx "^2.1.1"
prop-types "^15.8.1"
react-is "^18.3.1"

"@mui/utils@^6.1.7":
version "6.1.7"
resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-6.1.7.tgz#0959d9772ae13c6ceac984a493e06aebb9087e71"
Expand All @@ -2059,6 +2071,26 @@
prop-types "^15.8.1"
react-is "^18.3.1"

"@mui/x-data-grid@^7.22.3":
version "7.22.3"
resolved "https://registry.yarnpkg.com/@mui/x-data-grid/-/x-data-grid-7.22.3.tgz#22c4c23212434c6256ed5d11f7ba12a8310f9c4b"
integrity sha512-O6kBf6yt/GkOcWjHca5xWN10qBQ/MkITvJmBuIOtX+LH7YtOAriMgD2zkhNbXxHChi7QdEud3bNC3jw5RLRVCA==
dependencies:
"@babel/runtime" "^7.25.7"
"@mui/utils" "^5.16.6 || ^6.0.0"
"@mui/x-internals" "7.21.0"
clsx "^2.1.1"
prop-types "^15.8.1"
reselect "^5.1.1"

"@mui/[email protected]":
version "7.21.0"
resolved "https://registry.yarnpkg.com/@mui/x-internals/-/x-internals-7.21.0.tgz#daca984059015b27efdb47bb44dc7ff4a6816673"
integrity sha512-94YNyZ0BhK5Z+Tkr90RKf47IVCW8R/1MvdUhh6MCQg6sZa74jsX+x+gEZ4kzuCqOsuyTyxikeQ8vVuCIQiP7UQ==
dependencies:
"@babel/runtime" "^7.25.7"
"@mui/utils" "^5.16.6 || ^6.0.0"

"@nicolo-ribaudo/[email protected]":
version "5.1.1-v1"
resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz#dbf733a965ca47b1973177dc0bb6c889edcfb129"
Expand Down Expand Up @@ -3621,7 +3653,7 @@
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.9.tgz#b6f785caa7ea1fe4414d9df42ee0ab67f23d8a6d"
integrity sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==

"@types/prop-types@^15.7.13":
"@types/prop-types@^15.7.12", "@types/prop-types@^15.7.13":
version "15.7.13"
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.13.tgz#2af91918ee12d9d32914feb13f5326658461b451"
integrity sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==
Expand Down Expand Up @@ -13711,6 +13743,11 @@ requires-port@^1.0.0:
resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==

reselect@^5.1.1:
version "5.1.1"
resolved "https://registry.yarnpkg.com/reselect/-/reselect-5.1.1.tgz#c766b1eb5d558291e5e550298adb0becc24bb72e"
integrity sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==

resolve-cwd@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
Expand Down

0 comments on commit ba7c305

Please sign in to comment.