Skip to content

Commit

Permalink
[docs] Cleanup remaining @mui/styles usages (mui#32313)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mnajdova
mnajdova authored Apr 25, 2022
1 parent 8904aa1 commit 92a4866
Show file tree
Hide file tree
Showing 11 changed files with 214 additions and 255 deletions.
58 changes: 30 additions & 28 deletions docs/data/material/components/tables/ReactVirtualizedTable.js
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,47 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { withStyles } from '@mui/styles';
import { createTheme } from '@mui/material/styles';
import { styled } from '@mui/material/styles';
import TableCell from '@mui/material/TableCell';
import Paper from '@mui/material/Paper';
import { AutoSizer, Column, Table } from 'react-virtualized';

const styles = (theme) => ({
flexContainer: {
const classes = {
flexContainer: 'ReactVirtualizedDemo-flexContainer',
tableRow: 'ReactVirtualizedDemo-tableRow',
tableRowHover: 'ReactVirtualizedDemo-tableRowHover',
tableCell: 'ReactVirtualizedDemo-tableCell',
noClick: 'ReactVirtualizedDemo-noClick',
};

const styles = ({ theme }) => ({
// temporary right-to-left patch, waiting for
// https://github.com/bvaughn/react-virtualized/issues/454
'& .ReactVirtualized__Table__headerRow': {
...(theme.direction === 'rtl' && {
paddingLeft: '0 !important',
}),
...(theme.direction !== 'rtl' && {
paddingRight: undefined,
}),
},
[`& .${classes.flexContainer}`]: {
display: 'flex',
alignItems: 'center',
boxSizing: 'border-box',
},
table: {
// temporary right-to-left patch, waiting for
// https://github.com/bvaughn/react-virtualized/issues/454
'& .ReactVirtualized__Table__headerRow': {
...(theme.direction === 'rtl' && {
paddingLeft: '0 !important',
}),
...(theme.direction !== 'rtl' && {
paddingRight: undefined,
}),
},
},
tableRow: {
[`& .${classes.tableRow}`]: {
cursor: 'pointer',
},
tableRowHover: {
[`& .${classes.tableRowHover}`]: {
'&:hover': {
backgroundColor: theme.palette.grey[200],
},
},
tableCell: {
[`& .${classes.tableCell}`]: {
flex: 1,
},
noClick: {
[`& .${classes.noClick}`]: {
cursor: 'initial',
},
});
Expand All @@ -48,15 +53,15 @@ class MuiVirtualizedTable extends React.PureComponent {
};

getRowClassName = ({ index }) => {
const { classes, onRowClick } = this.props;
const { onRowClick } = this.props;

return clsx(classes.tableRow, classes.flexContainer, {
[classes.tableRowHover]: index !== -1 && onRowClick != null,
});
};

cellRenderer = ({ cellData, columnIndex }) => {
const { columns, classes, rowHeight, onRowClick } = this.props;
const { columns, rowHeight, onRowClick } = this.props;
return (
<TableCell
component="div"
Expand All @@ -77,7 +82,7 @@ class MuiVirtualizedTable extends React.PureComponent {
};

headerRenderer = ({ label, columnIndex }) => {
const { headerHeight, columns, classes } = this.props;
const { headerHeight, columns } = this.props;

return (
<TableCell
Expand All @@ -93,7 +98,7 @@ class MuiVirtualizedTable extends React.PureComponent {
};

render() {
const { classes, columns, rowHeight, headerHeight, ...tableProps } = this.props;
const { columns, rowHeight, headerHeight, ...tableProps } = this.props;
return (
<AutoSizer>
{({ height, width }) => (
Expand All @@ -105,7 +110,6 @@ class MuiVirtualizedTable extends React.PureComponent {
direction: 'inherit',
}}
headerHeight={headerHeight}
className={classes.table}
{...tableProps}
rowClassName={this.getRowClassName}
>
Expand Down Expand Up @@ -134,7 +138,6 @@ class MuiVirtualizedTable extends React.PureComponent {
}

MuiVirtualizedTable.propTypes = {
classes: PropTypes.object.isRequired,
columns: PropTypes.arrayOf(
PropTypes.shape({
dataKey: PropTypes.string.isRequired,
Expand All @@ -148,8 +151,7 @@ MuiVirtualizedTable.propTypes = {
rowHeight: PropTypes.number,
};

const defaultTheme = createTheme();
const VirtualizedTable = withStyles(styles, { defaultTheme })(MuiVirtualizedTable);
const VirtualizedTable = styled(MuiVirtualizedTable)(styles);

// ---

Expand Down
59 changes: 31 additions & 28 deletions docs/data/material/components/tables/ReactVirtualizedTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import * as React from 'react';
import clsx from 'clsx';
import { withStyles, WithStyles } from '@mui/styles';
import { Theme, createTheme } from '@mui/material/styles';
import { Theme, styled } from '@mui/material/styles';
import TableCell from '@mui/material/TableCell';
import Paper from '@mui/material/Paper';
import {
Expand All @@ -12,37 +11,43 @@ import {
TableHeaderProps,
} from 'react-virtualized';

const styles = (theme: Theme) =>
const classes = {
flexContainer: 'ReactVirtualizedDemo-flexContainer',
tableRow: 'ReactVirtualizedDemo-tableRow',
tableRowHover: 'ReactVirtualizedDemo-tableRowHover',
tableCell: 'ReactVirtualizedDemo-tableCell',
noClick: 'ReactVirtualizedDemo-noClick',
};

const styles = ({ theme }: { theme: Theme }) =>
({
flexContainer: {
// temporary right-to-left patch, waiting for
// https://github.com/bvaughn/react-virtualized/issues/454
'& .ReactVirtualized__Table__headerRow': {
...(theme.direction === 'rtl' && {
paddingLeft: '0 !important',
}),
...(theme.direction !== 'rtl' && {
paddingRight: undefined,
}),
},
[`& .${classes.flexContainer}`]: {
display: 'flex',
alignItems: 'center',
boxSizing: 'border-box',
},
table: {
// temporary right-to-left patch, waiting for
// https://github.com/bvaughn/react-virtualized/issues/454
'& .ReactVirtualized__Table__headerRow': {
...(theme.direction === 'rtl' && {
paddingLeft: '0 !important',
}),
...(theme.direction !== 'rtl' && {
paddingRight: undefined,
}),
},
},
tableRow: {
[`& .${classes.tableRow}`]: {
cursor: 'pointer',
},
tableRowHover: {
[`& .${classes.tableRowHover}`]: {
'&:hover': {
backgroundColor: theme.palette.grey[200],
},
},
tableCell: {
[`& .${classes.tableCell}`]: {
flex: 1,
},
noClick: {
[`& .${classes.noClick}`]: {
cursor: 'initial',
},
} as const);
Expand All @@ -58,7 +63,7 @@ interface Row {
index: number;
}

interface MuiVirtualizedTableProps extends WithStyles<typeof styles> {
interface MuiVirtualizedTableProps {
columns: readonly ColumnData[];
headerHeight?: number;
onRowClick?: () => void;
Expand All @@ -74,15 +79,15 @@ class MuiVirtualizedTable extends React.PureComponent<MuiVirtualizedTableProps>
};

getRowClassName = ({ index }: Row) => {
const { classes, onRowClick } = this.props;
const { onRowClick } = this.props;

return clsx(classes.tableRow, classes.flexContainer, {
[classes.tableRowHover]: index !== -1 && onRowClick != null,
});
};

cellRenderer: TableCellRenderer = ({ cellData, columnIndex }) => {
const { columns, classes, rowHeight, onRowClick } = this.props;
const { columns, rowHeight, onRowClick } = this.props;
return (
<TableCell
component="div"
Expand All @@ -106,7 +111,7 @@ class MuiVirtualizedTable extends React.PureComponent<MuiVirtualizedTableProps>
label,
columnIndex,
}: TableHeaderProps & { columnIndex: number }) => {
const { headerHeight, columns, classes } = this.props;
const { headerHeight, columns } = this.props;

return (
<TableCell
Expand All @@ -122,7 +127,7 @@ class MuiVirtualizedTable extends React.PureComponent<MuiVirtualizedTableProps>
};

render() {
const { classes, columns, rowHeight, headerHeight, ...tableProps } = this.props;
const { columns, rowHeight, headerHeight, ...tableProps } = this.props;
return (
<AutoSizer>
{({ height, width }) => (
Expand All @@ -134,7 +139,6 @@ class MuiVirtualizedTable extends React.PureComponent<MuiVirtualizedTableProps>
direction: 'inherit',
}}
headerHeight={headerHeight!}
className={classes.table}
{...tableProps}
rowClassName={this.getRowClassName}
>
Expand Down Expand Up @@ -162,8 +166,7 @@ class MuiVirtualizedTable extends React.PureComponent<MuiVirtualizedTableProps>
}
}

const defaultTheme = createTheme();
const VirtualizedTable = withStyles(styles, { defaultTheme })(MuiVirtualizedTable);
const VirtualizedTable = styled(MuiVirtualizedTable)(styles);

// ---

Expand Down
42 changes: 22 additions & 20 deletions docs/src/modules/components/TopLayoutBlog.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { styled, createTheme, alpha } from '@mui/material/styles';
import { withStyles } from '@mui/styles';
import { styled, alpha } from '@mui/material/styles';
import Head from 'docs/src/modules/components/Head';
import BrandingProvider from 'docs/src/BrandingProvider';
import AppHeader from 'docs/src/layouts/AppHeader';
Expand Down Expand Up @@ -81,23 +80,27 @@ export const authors = {
},
};

const styles = (theme) => ({
root: {
flexGrow: 1,
background:
theme.palette.mode === 'dark'
? `linear-gradient(180deg, ${theme.palette.primaryDark[900]} 0%, #001E3C 100%)`
: `linear-gradient(180deg, ${theme.palette.grey[50]} 0%, #FFFFFF 100%)`,
backgroundSize: 'auto 250px ',
backgroundRepeat: 'no-repeat',
},
back: {
const classes = {
back: 'TopLayoutBlog-back',
time: 'TopLayoutBlog-time',
container: 'TopLayoutBlog-container',
};

const styles = ({ theme }) => ({
flexGrow: 1,
background:
theme.palette.mode === 'dark'
? `linear-gradient(180deg, ${theme.palette.primaryDark[900]} 0%, #001E3C 100%)`
: `linear-gradient(180deg, ${theme.palette.grey[50]} 0%, #FFFFFF 100%)`,
backgroundSize: 'auto 250px ',
backgroundRepeat: 'no-repeat',
[`& .${classes.back}`]: {
display: 'flex',
alignItems: 'center',
marginBottom: theme.spacing(2),
marginLeft: theme.spacing(-1),
},
container: {
[`& .${classes.container}`]: {
paddingTop: 60 + 20,
marginBottom: theme.spacing(8),
maxWidth: `calc(740px + ${theme.spacing(12)})`,
Expand Down Expand Up @@ -162,7 +165,7 @@ const styles = (theme) => ({
},
},
},
time: {
[`& .${classes.time}`]: {
color: theme.palette.text.secondary,
...theme.typography.caption,
fontWeight: 500,
Expand All @@ -185,7 +188,7 @@ const AuthorsContainer = styled('div')(({ theme }) => ({
}));

function TopLayoutBlog(props) {
const { classes, docs } = props;
const { className, docs } = props;
const { description, rendered, title, headers } = docs.en;
const finalTitle = title || headers.title;
const router = useRouter();
Expand All @@ -202,7 +205,7 @@ function TopLayoutBlog(props) {
headers.card === 'true' ? `https://mui.com/static${router.pathname}/card.png` : undefined
}
/>
<div className={classes.root}>
<div className={className}>
<AppContainer component="main" className={classes.container}>
<Link
href={ROUTES.blog}
Expand Down Expand Up @@ -272,13 +275,12 @@ function TopLayoutBlog(props) {
}

TopLayoutBlog.propTypes = {
classes: PropTypes.object.isRequired,
className: PropTypes.string,
docs: PropTypes.object.isRequired,
};

if (process.env.NODE_ENV !== 'production') {
TopLayoutBlog.propTypes = exactProp(TopLayoutBlog.propTypes);
}

const defaultTheme = createTheme();
export default withStyles(styles, { defaultTheme })(TopLayoutBlog);
export default styled(TopLayoutBlog)(styles);
22 changes: 6 additions & 16 deletions docs/src/pages/premium-themes/onepirate/modules/components/Markdown.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,9 @@
import * as React from 'react';
import ReactMarkdown from 'markdown-to-jsx';

import { withStyles } from '@mui/styles';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Link from '@mui/material/Link';

const styles = (theme) => ({
listItem: {
marginTop: theme.spacing(1),
},
});

const options = {
overrides: {
h1: {
Expand Down Expand Up @@ -42,14 +35,11 @@ const options = {
},
a: { component: Link },
li: {
component: withStyles(styles)((props) => {
const { classes, ...other } = props;
return (
<li className={classes.listItem}>
<Typography component="span" {...other} />
</li>
);
}),
component: (props) => (
<Box component="li" sx={{ mt: 1 }}>
<Typography component="span" {...props} />
</Box>
),
},
},
};
Expand Down
Loading

0 comments on commit 92a4866

Please sign in to comment.