Skip to content

Commit

Permalink
[Table] Use makeStyles over withStyles
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari committed Mar 23, 2019
1 parent 6e750ac commit 6a643eb
Show file tree
Hide file tree
Showing 13 changed files with 183 additions and 32 deletions.
1 change: 1 addition & 0 deletions packages/material-ui-styles/src/useThemeProps/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './useThemeProps';
15 changes: 15 additions & 0 deletions packages/material-ui-styles/src/useThemeProps/useThemeProps.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import useTheme from '../useTheme';
import getThemeProps from '../getThemeProps';

function useThemeProps(props, options) {
const { defaultTheme, name } = options;
const theme = useTheme() || defaultTheme;
const output = getThemeProps({
theme,
name,
props,
});
return output;
}

export default useThemeProps;
2 changes: 1 addition & 1 deletion packages/material-ui-styles/src/withStyles/withStyles.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const withStyles = (stylesOrCreator, options = {}) => Component => {
});

let WithStyles = React.forwardRef(function WithStyles(props, ref) {
const { classes: classesProp, innerRef, ...other } = props;
const { classes: _, innerRef, ...other } = props;
const classes = useStyles(props);

let theme;
Expand Down
13 changes: 10 additions & 3 deletions packages/material-ui/src/Table/Table.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
import makeStyles from '../styles/makeStyles';
import useThemeProps from '../styles/useThemeProps';
import TableContext from './TableContext';

export const styles = {
Expand All @@ -14,8 +15,14 @@ export const styles = {
},
};

const useStyles = makeStyles(styles, { name: 'MuiTable' });

const Table = React.forwardRef(function Table(props, ref) {
const { classes, className, component: Component, padding, size, ...other } = props;
const { classes: _, className, component: Component, padding, size, ...other } = useThemeProps(
props,
{ name: 'MuiTable' },
);
const classes = useStyles(props);
const table = React.useMemo(() => ({ padding, size }), [padding, size]);

return (
Expand Down Expand Up @@ -65,4 +72,4 @@ Table.defaultProps = {
size: 'medium',
};

export default withStyles(styles, { name: 'MuiTable' })(Table);
export default Table;
18 changes: 12 additions & 6 deletions packages/material-ui/src/TableBody/TableBody.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,28 @@
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
import makeStyles from '../styles/makeStyles';
import useThemeProps from '../styles/useThemeProps';
import Tablelvl2Context from '../Table/Tablelvl2Context';

const tablelvl2 = {
variant: 'body',
};

export const styles = {
/* Styles applied to the root element. */
root: {
display: 'table-row-group',
},
};

const tablelvl2 = {
variant: 'body',
};
const useStyles = makeStyles(styles, { name: 'MuiTableBody' });

const TableBody = React.forwardRef(function TableBody(props, ref) {
const { classes, className, component: Component, ...other } = props;
const { classes: _, className, component: Component, ...other } = useThemeProps(props, {
name: 'MuiTableBody',
});
const classes = useStyles(props);

return (
<Tablelvl2Context.Provider value={tablelvl2}>
Expand Down Expand Up @@ -50,4 +56,4 @@ TableBody.defaultProps = {
component: 'tbody',
};

export default withStyles(styles, { name: 'MuiTableBody' })(TableBody);
export default TableBody;
12 changes: 8 additions & 4 deletions packages/material-ui/src/TableCell/TableCell.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
import makeStyles from '../styles/makeStyles';
import useThemeProps from '../styles/useThemeProps';
import { capitalize } from '../utils/helpers';
import { darken, fade, lighten } from '../styles/colorManipulator';
import TableContext from '../Table/TableContext';
Expand Down Expand Up @@ -98,11 +99,13 @@ export const styles = theme => ({
},
});

const useStyles = makeStyles(styles, { name: 'MuiTableCell' })

const TableCell = React.forwardRef(function TableCell(props, ref) {
const {
align,
children,
classes,
classes: _,
className,
component,
padding: paddingProp,
Expand All @@ -111,8 +114,9 @@ const TableCell = React.forwardRef(function TableCell(props, ref) {
sortDirection,
variant,
...other
} = props;
} = useThemeProps(props, { name: 'MuiTableCell' });

const classes = useStyles(props)
const table = React.useContext(TableContext);
const tablelvl2 = React.useContext(Tablelvl2Context);

Expand Down Expand Up @@ -216,4 +220,4 @@ TableCell.defaultProps = {
align: 'inherit',
};

export default withStyles(styles, { name: 'MuiTableCell' })(TableCell);
export default TableCell;
18 changes: 12 additions & 6 deletions packages/material-ui/src/TableFooter/TableFooter.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,28 @@
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
import makeStyles from '../styles/makeStyles';
import useThemeProps from '../styles/useThemeProps';
import Tablelvl2Context from '../Table/Tablelvl2Context';

const tablelvl2 = {
variant: 'footer',
};

export const styles = {
/* Styles applied to the root element. */
root: {
display: 'table-footer-group',
},
};

const tablelvl2 = {
variant: 'footer',
};
const useStyles = makeStyles(styles, { name: 'MuiTableFooter' });

const TableFooter = React.forwardRef(function TableFooter(props, ref) {
const { classes, className, component: Component, ...other } = props;
const { classes: _, className, component: Component, ...other } = useThemeProps(props, {
name: 'MuiTableFooter',
});
const classes = useStyles(props);

return (
<Tablelvl2Context.Provider value={tablelvl2}>
Expand Down Expand Up @@ -50,4 +56,4 @@ TableFooter.defaultProps = {
component: 'tfoot',
};

export default withStyles(styles, { name: 'MuiTableFooter' })(TableFooter);
export default TableFooter;
18 changes: 12 additions & 6 deletions packages/material-ui/src/TableHead/TableHead.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,28 @@
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
import makeStyles from '../styles/makeStyles';
import useThemeProps from '../styles/useThemeProps';
import Tablelvl2Context from '../Table/Tablelvl2Context';

const tablelvl2 = {
variant: 'head',
};

export const styles = {
/* Styles applied to the root element. */
root: {
display: 'table-header-group',
},
};

const tablelvl2 = {
variant: 'head',
};
const useStyles = makeStyles(styles, { name: 'MuiTableHead' });

const TableHead = React.forwardRef(function TableHead(props, ref) {
const { classes, className, component: Component, ...other } = props;
const { classes: _, className, component: Component, ...other } = useThemeProps(props, {
name: 'MuiTableHead',
});
const classes = useStyles(props);

return (
<Tablelvl2Context.Provider value={tablelvl2}>
Expand Down Expand Up @@ -50,4 +56,4 @@ TableHead.defaultProps = {
component: 'thead',
};

export default withStyles(styles, { name: 'MuiTableHead' })(TableHead);
export default TableHead;
9 changes: 6 additions & 3 deletions packages/material-ui/src/TableRow/TableRow.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
import makeStyles from '../styles/makeStyles';
import Tablelvl2Context from '../Table/Tablelvl2Context';

export const styles = theme => ({
Expand Down Expand Up @@ -35,13 +35,16 @@ export const styles = theme => ({
footer: {},
});

const useStyles = makeStyles(styles, { name: 'MuiTableRow' });

/**
* Will automatically set dynamic row height
* based on the material table element parent (head, body, etc).
*/
const TableRow = React.forwardRef(function TableRow(props, ref) {
const { classes, className, component: Component, hover, selected, ...other } = props;
const { classes: _, className, component: Component, hover, selected, ...other } = props;
const tablelvl2 = React.useContext(Tablelvl2Context);
const classes = useStyles(props);

return (
<Component
Expand Down Expand Up @@ -96,4 +99,4 @@ TableRow.defaultProps = {
selected: false,
};

export default withStyles(styles, { name: 'MuiTableRow' })(TableRow);
export default TableRow;
9 changes: 6 additions & 3 deletions packages/material-ui/src/TableSortLabel/TableSortLabel.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import ArrowDownwardIcon from '../internal/svg-icons/ArrowDownward';
import withStyles from '../styles/withStyles';
import makeStyles from '../styles/makeStyles';
import ButtonBase from '../ButtonBase';
import { capitalize } from '../utils/helpers';

Expand Down Expand Up @@ -59,20 +59,23 @@ export const styles = theme => ({
},
});

const useStyles = makeStyles(styles, { name: 'MuiTableSortLabel' });

/**
* A button based label for placing inside `TableCell` for column sorting.
*/
const TableSortLabel = React.forwardRef(function TableSortLabel(props, ref) {
const {
active,
children,
classes,
classes: _,
className,
direction,
hideSortIcon,
IconComponent,
...other
} = props;
const classes = useStyles(props);

return (
<ButtonBase
Expand Down Expand Up @@ -131,4 +134,4 @@ TableSortLabel.defaultProps = {
IconComponent: ArrowDownwardIcon,
};

export default withStyles(styles, { name: 'MuiTableSortLabel' })(TableSortLabel);
export default TableSortLabel;
9 changes: 9 additions & 0 deletions packages/material-ui/src/styles/useThemeProps.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { useThemeProps as useThemePropsWithoutDefault } from '@material-ui/styles';
import defaultTheme from './defaultTheme';

export default function useThemeProps(props, options) {
return useThemePropsWithoutDefault(props, {
defaultTheme,
...options,
});
}
49 changes: 49 additions & 0 deletions pages/performance/tableMui.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/* eslint-disable react/no-array-index-key */

import React from 'react';
import NoSsr from '@material-ui/core/NoSsr';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';

function createData(name, calories, fat, carbs, protein) {
return { name, calories, fat, carbs, protein };
}

const data = createData('Frozen yoghurt', 159, 6.0, 24, 4.0);
const rows = Array.from(new Array(100)).map(() => data);

function TableMui() {
return (
<NoSsr defer>
<Table>
<TableHead>
<TableRow>
<TableCell>Dessert (100g serving)</TableCell>
<TableCell>Calories</TableCell>
<TableCell>Fat (g)</TableCell>
<TableCell>Carbs (g)</TableCell>
<TableCell>Protein (g)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, index) => (
<TableRow key={index}>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell>{row.calories}</TableCell>
<TableCell>{row.fat}</TableCell>
<TableCell>{row.carbs}</TableCell>
<TableCell>{row.protein}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</NoSsr>
);
}

export default TableMui;
42 changes: 42 additions & 0 deletions pages/performance/tableRaw.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
/* eslint-disable react/no-array-index-key */

import React from 'react';
import NoSsr from '@material-ui/core/NoSsr';

function createData(name, calories, fat, carbs, protein) {
return { name, calories, fat, carbs, protein };
}

const data = createData('Frozen yoghurt', 159, 6.0, 24, 4.0);
const rows = Array.from(new Array(100)).map(() => data);

function TableRaw() {
return (
<NoSsr defer>
<table>
<thead>
<tr>
<th>Dessert (100g serving)</th>
<th>Calories</th>
<th>Fat (g)</th>
<th>Carbs (g)</th>
<th>Protein (g)</th>
</tr>
</thead>
<tbody>
{rows.map((row, index) => (
<tr key={index}>
<th scope="row">{row.name}</th>
<td>{row.calories}</td>
<td>{row.fat}</td>
<td>{row.carbs}</td>
<td>{row.protein}</td>
</tr>
))}
</tbody>
</table>
</NoSsr>
);
}

export default TableRaw;

0 comments on commit 6a643eb

Please sign in to comment.