- Cards now use hooks

AmerTm · Aug 13, 2019 · e90f74a · e90f74a
1 parent 72a9e9f
commit e90f74a
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 24 deletions.
diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js
@@ -4,14 +4,17 @@ import classNames from "classnames";
 // nodejs library to set properties for components
 import PropTypes from "prop-types";
 // @material-ui/core components
-import withStyles from "@material-ui/core/styles/withStyles";
+import { makeStyles } from "@material-ui/core/styles";
 // @material-ui/icons
 
 // core components
-import cardStyle from "assets/jss/material-kit-react/components/cardStyle.js";
+import styles from "assets/jss/material-kit-react/components/cardStyle.js";
 
-function Card({ ...props }) {
-  const { classes, className, children, plain, carousel, ...rest } = props;
+const useStyles = makeStyles(styles);
+
+export default function Card(props) {
+  const classes = useStyles();
+  const { className, children, plain, carousel, ...rest } = props;
   const cardClasses = classNames({
     [classes.card]: true,
     [classes.cardPlain]: plain,
@@ -32,5 +35,3 @@ Card.propTypes = {
   carousel: PropTypes.bool,
   children: PropTypes.node
 };
-
-export default withStyles(cardStyle)(Card);
diff --git a/src/components/Card/CardBody.js b/src/components/Card/CardBody.js
@@ -4,14 +4,17 @@ import classNames from "classnames";
 // nodejs library to set properties for components
 import PropTypes from "prop-types";
 // @material-ui/core components
-import withStyles from "@material-ui/core/styles/withStyles";
+import { makeStyles } from "@material-ui/core/styles";
 // @material-ui/icons
 
 // core components
-import cardBodyStyle from "assets/jss/material-kit-react/components/cardBodyStyle.js";
+import styles from "assets/jss/material-kit-react/components/cardBodyStyle.js";
 
-function CardBody({ ...props }) {
-  const { classes, className, children, ...rest } = props;
+const useStyles = makeStyles(styles);
+
+export default function CardBody(props) {
+  const classes = useStyles();
+  const { className, children, ...rest } = props;
   const cardBodyClasses = classNames({
     [classes.cardBody]: true,
     [className]: className !== undefined
@@ -28,5 +31,3 @@ CardBody.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node
 };
-
-export default withStyles(cardBodyStyle)(CardBody);
diff --git a/src/components/Card/CardFooter.js b/src/components/Card/CardFooter.js
@@ -4,14 +4,17 @@ import classNames from "classnames";
 // nodejs library to set properties for components
 import PropTypes from "prop-types";
 // @material-ui/core components
-import withStyles from "@material-ui/core/styles/withStyles";
+import { makeStyles } from "@material-ui/core/styles";
 // @material-ui/icons
 
 // core components
-import cardFooterStyle from "assets/jss/material-kit-react/components/cardFooterStyle.js";
+import styles from "assets/jss/material-kit-react/components/cardFooterStyle.js";
 
-function CardFooter({ ...props }) {
-  const { classes, className, children, ...rest } = props;
+const useStyles = makeStyles(styles);
+
+export default function CardFooter(props) {
+  const classes = useStyles();
+  const { className, children, ...rest } = props;
   const cardFooterClasses = classNames({
     [classes.cardFooter]: true,
     [className]: className !== undefined
@@ -28,5 +31,3 @@ CardFooter.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node
 };
-
-export default withStyles(cardFooterStyle)(CardFooter);
diff --git a/src/components/Card/CardHeader.js b/src/components/Card/CardHeader.js
@@ -4,14 +4,17 @@ import classNames from "classnames";
 // nodejs library to set properties for components
 import PropTypes from "prop-types";
 // @material-ui/core components
-import withStyles from "@material-ui/core/styles/withStyles";
+import { makeStyles } from "@material-ui/core/styles";
 // @material-ui/icons
 
 // core components
-import cardHeaderStyle from "assets/jss/material-kit-react/components/cardHeaderStyle.js";
+import styles from "assets/jss/material-kit-react/components/cardHeaderStyle.js";
 
-function CardHeader({ ...props }) {
-  const { classes, className, children, color, plain, ...rest } = props;
+const useStyles = makeStyles(styles);
+
+export default function CardHeader(props) {
+  const classes = useStyles();
+  const { className, children, color, plain, ...rest } = props;
   const cardHeaderClasses = classNames({
     [classes.cardHeader]: true,
     [classes[color + "CardHeader"]]: color,
@@ -32,5 +35,3 @@ CardHeader.propTypes = {
   plain: PropTypes.bool,
   children: PropTypes.node
 };
-
-export default withStyles(cardHeaderStyle)(CardHeader);