Card

card.js

import React from "react";
import PropTypes from "prop-types";
import clsx from "clsx";

import {
  Card as NativeCard,
  CardContent,
  CircularProgress,
  Box,
} from "@material-ui/core";

import { CardHeader, CardFooter, CardPlaceholder } from "./components";
import NoDataImg from "@assets/images/no-data.png";
import isEmpty from "@helpers/isEmpty";
import get from "@helpers/get";

import styles from "./styles.js";

/**
 * Card
 * @param {object} header - Header of the Card
 * @param {ReactNode} children  - Container of the Card
 * @param {string} className - Overwrite classes
 * @param {boolean} loading - Card loading
 * @param {boolean} empty - Card empty
 * @param {object} footer - Footer of the Card
 */
const Card = (props) => {
  const {
    header,
    children,
    className,
    loading,
    empty,
    footer,
    ...rest
  } = props;

  const classes = styles();

  const cardClassname = clsx(classes.root, className, {
    [classes.loadingState]: loading,
  });

  return (
    <NativeCard {...rest} className={cardClassname}>
      {loading && (
        <Box className={classes.loading}>
          <CircularProgress cover visible size={24} />
        </Box>
      )}

      {!loading && (
        <>
          {get(header, "title", null) && <CardHeader {...header} />}

          <CardContent
            className={clsx(
              classes.rootContent,
              classes.cardContent,
              className
            )}
          >
            {empty ? <CardPlaceholder img={NoDataImg} /> : children}
          </CardContent>

          {!isEmpty(footer) && <CardFooter {...footer} />}
        </>
      )}
    </NativeCard>
  );
};

Card.propTypes = {
  /* Header of the Card */
  header: PropTypes.shape({
    /* Title content of the card */
    title: PropTypes.string.isRequired,
    /* Description of the card */
    subtitle: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
    /* Avatar to the left of the title */
    avatar: PropTypes.oneOfType([
      PropTypes.node,
      PropTypes.shape({
        src: PropTypes.string.isRequired,
        size: PropTypes.string,
        square: PropTypes.bool,
      }),
    ]),
    className: PropTypes.string,
  }),
  /* Container of the Card */
  children: PropTypes.node,
  /* Overwrite classes */
  className: PropTypes.string,
  /* Card loading */
  loading: PropTypes.bool,
  /* Card empty */
  empty: PropTypes.bool,
  /* Footer of the Card */
  footer: PropTypes.shape({
    primaryAction: PropTypes.shape({ label: PropTypes.string }),
    /* Secondary with multiples actions */
    secondaryActions: PropTypes.arrayOf(
      PropTypes.shape({ label: PropTypes.string })
    ),
    /* Overwrite classes */
    className: PropTypes.string,
  }),
};

Card.defaultProps = {
  header: null,
  className: "",
  loading: false,
  empty: false,
  footer: null,
};

export default Card;