@krowdy-ui/core/esm/Fab/Fab.js

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["color", "className"];
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/styles';
import MuiFab from '@material-ui/core/Fab';
var useStyles = makeStyles(function (theme) {
  return {
    /* Styles applied to the root element if `color="krowdy"`. */
    error: {
      '&:hover': {
        '@media (hover: none)': {
          backgroundColor: theme.palette.error.main
        },
        // Reset on touch devices, it doesn't add specificity
        backgroundColor: theme.palette.error.dark
      },
      backgroundColor: theme.palette.error.main,
      color: theme.palette.error.contrastText
    },

    /* Styles applied to the root element if `color="error"`. */
    krowdy: {
      '&:hover': {
        '@media (hover: none)': {
          backgroundColor: theme.palette.krowdy.main
        },
        // Reset on touch devices, it doesn't add specificity
        backgroundColor: theme.palette.krowdy.dark
      },
      backgroundColor: theme.palette.krowdy.main,
      color: theme.palette.krowdy.contrastText
    }
  };
});

function Fab(_ref) {
  var _ref$color = _ref.color,
      color = _ref$color === void 0 ? 'default' : _ref$color,
      classNameProps = _ref.className,
      props = _objectWithoutProperties(_ref, _excluded);

  var classes = useStyles();
  var className = clsx(classNameProps, {
    krowdy: classes.krowdy,
    error: classes.error
  }[color]);
  if (color === 'krowdy' || color === 'error') color = 'default';
  return /*#__PURE__*/React.createElement(MuiFab, _extends({
    className: className,
    color: color
  }, props));
}

process.env.NODE_ENV !== "production" ? Fab.propTypes = {
  /**
   * @ignore
   */
  className: PropTypes.string,

  /**
   * The color of the component. It supports those theme colors that make sense for this component.
   */
  color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'krowdy', 'error'])
} : void 0;
export default Fab;