[Table] Use makeStyles over withStyles

mui · Mar 23, 2019 · a77e578 · a77e578
1 parent 1d91e0a
commit a77e578
Show file tree

Hide file tree

Showing 17 changed files with 231 additions and 51 deletions.
diff --git a/packages/material-ui-styles/src/useThemeProps/index.js b/packages/material-ui-styles/src/useThemeProps/index.js
@@ -0,0 +1 @@
+export { default } from './useThemeProps';
diff --git a/packages/material-ui-styles/src/useThemeProps/useThemeProps.d.ts b/packages/material-ui-styles/src/useThemeProps/useThemeProps.d.ts
diff --git a/packages/material-ui-styles/src/useThemeProps/useThemeProps.js b/packages/material-ui-styles/src/useThemeProps/useThemeProps.js
@@ -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;
diff --git a/packages/material-ui-styles/src/withStyles/withStyles.js b/packages/material-ui-styles/src/withStyles/withStyles.js
@@ -45,7 +45,7 @@ const withStyles = (stylesOrCreator, options = {}) => Component => {
   });
 
   const WithStyles = React.forwardRef(function WithStyles(props, ref) {
-    const { classes: classesProp, innerRef, ...other } = props;
+    const { classes: _, innerRef, ...other } = props;
     const classes = useStyles(props);
 
     let theme;

diff --git a/packages/material-ui/src/Table/Table.js b/packages/material-ui/src/Table/Table.js
@@ -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 = {
@@ -14,8 +15,14 @@ export const styles = {
   },
 };
 
+export 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 (
@@ -34,7 +41,7 @@ Table.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
   /**
    * @ignore
    */
@@ -65,4 +72,9 @@ Table.defaultProps = {
   size: 'medium',
 };
 
-export default withStyles(styles, { name: 'MuiTable' })(Table);
+Table.useStyles = useStyles;
+Table.options = {
+  name: 'MuiTable',
+};
+
+export default Table;
diff --git a/packages/material-ui/src/TableBody/TableBody.js b/packages/material-ui/src/TableBody/TableBody.js
@@ -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}>
@@ -34,7 +40,7 @@ TableBody.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
   /**
    * @ignore
    */
@@ -50,4 +56,9 @@ TableBody.defaultProps = {
   component: 'tbody',
 };
 
-export default withStyles(styles, { name: 'MuiTableBody' })(TableBody);
+TableBody.useStyles = useStyles;
+TableBody.options = {
+  name: 'MuiTableBody',
+};
+
+export default TableBody;
diff --git a/packages/material-ui/src/TableCell/TableCell.js b/packages/material-ui/src/TableCell/TableCell.js
@@ -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';
@@ -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,
@@ -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);
 
@@ -177,7 +181,7 @@ TableCell.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
   /**
    * @ignore
    */
@@ -216,4 +220,9 @@ TableCell.defaultProps = {
   align: 'inherit',
 };
 
-export default withStyles(styles, { name: 'MuiTableCell' })(TableCell);
+TableCell.useStyles = useStyles;
+TableCell.options = {
+  name: 'MuiTableCell',
+};
+
+export default TableCell;
diff --git a/packages/material-ui/src/TableFooter/TableFooter.js b/packages/material-ui/src/TableFooter/TableFooter.js
@@ -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}>
@@ -34,7 +40,7 @@ TableFooter.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
   /**
    * @ignore
    */
@@ -50,4 +56,9 @@ TableFooter.defaultProps = {
   component: 'tfoot',
 };
 
-export default withStyles(styles, { name: 'MuiTableFooter' })(TableFooter);
+TableFooter.useStyles = useStyles;
+TableFooter.options = {
+  name: 'MuiTableFooter',
+};
+
+export default TableFooter;
diff --git a/packages/material-ui/src/TableHead/TableHead.js b/packages/material-ui/src/TableHead/TableHead.js
@@ -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}>
@@ -34,7 +40,7 @@ TableHead.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
   /**
    * @ignore
    */
@@ -50,4 +56,9 @@ TableHead.defaultProps = {
   component: 'thead',
 };
 
-export default withStyles(styles, { name: 'MuiTableHead' })(TableHead);
+TableHead.useStyles = useStyles;
+TableHead.options = {
+  name: 'MuiTableHead',
+};
+
+export default TableHead;
diff --git a/packages/material-ui/src/TableRow/TableRow.js b/packages/material-ui/src/TableRow/TableRow.js
@@ -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 => ({
@@ -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
@@ -70,7 +73,7 @@ TableRow.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
   /**
    * @ignore
    */
@@ -96,4 +99,9 @@ TableRow.defaultProps = {
   selected: false,
 };
 
-export default withStyles(styles, { name: 'MuiTableRow' })(TableRow);
+TableRow.useStyles = useStyles;
+TableRow.options = {
+  name: 'MuiTableRow',
+};
+
+export default TableRow;
diff --git a/packages/material-ui/src/TableSortLabel/TableSortLabel.js b/packages/material-ui/src/TableSortLabel/TableSortLabel.js
@@ -4,7 +4,8 @@ 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 useThemeProps from '../styles/useThemeProps';
 import ButtonBase from '../ButtonBase';
 import { capitalize } from '../utils/helpers';
 
@@ -59,20 +60,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;
+  } = useThemeProps(props, { name: 'MuiTableSortLabel' });
+  const classes = useStyles(props);
 
   return (
     <ButtonBase
@@ -105,7 +109,7 @@ TableSortLabel.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
   /**
    * @ignore
    */
@@ -131,4 +135,9 @@ TableSortLabel.defaultProps = {
   IconComponent: ArrowDownwardIcon,
 };
 
-export default withStyles(styles, { name: 'MuiTableSortLabel' })(TableSortLabel);
+TableSortLabel.useStyles = useStyles;
+TableSortLabel.options = {
+  name: 'MuiTableSortLabel',
+};
+
+export default TableSortLabel;