@geezee/react-ui/esm/card/card.js

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React, { useMemo } from 'react';
import useTheme from '../styles/use-theme';
import { getStyles } from './styles';
import CardFooter from './card-footer';
import CardContent from './card-content';
import Image from '../image';
import { hasChild, pickChild } from '../utils/collections';
var defaultProps = {
  color: 'default',
  hoverable: false,
  shadow: false,
  width: '100%',
  className: '',
  variant: 'solid'
};

var Card = function Card(_ref) {
  var children = _ref.children,
      hoverable = _ref.hoverable,
      className = _ref.className,
      shadow = _ref.shadow,
      customColor = _ref.color,
      width = _ref.width,
      variant = _ref.variant,
      props = _objectWithoutProperties(_ref, ["children", "hoverable", "className", "shadow", "color", "width", "variant"]);

  var theme = useTheme();
  var boxShadow = shadow || customColor === 'default' && variant === 'solid' ? theme.expressiveness.D4 : 'none';
  var hoverShadow = useMemo(function () {
    if (!hoverable) return boxShadow;
    if (shadow || customColor === 'default' && variant === 'solid') return theme.expressiveness.D5;
    return theme.expressiveness.D4;
  }, [hoverable, shadow, theme.expressiveness, boxShadow]);

  var _useMemo = useMemo(function () {
    return getStyles(customColor, theme.palette, variant, hoverable);
  }, [customColor, theme.palette, shadow]),
      color = _useMemo.color,
      bgColor = _useMemo.bgColor,
      borderColor = _useMemo.borderColor,
      hoverBgColor = _useMemo.hoverBgColor,
      hoverBorderColor = _useMemo.hoverBorderColor;

  var _pickChild = pickChild(children, CardFooter),
      _pickChild2 = _slicedToArray(_pickChild, 2),
      withoutFooterChildren = _pickChild2[0],
      footerChildren = _pickChild2[1];

  var _pickChild3 = pickChild(withoutFooterChildren, Image),
      _pickChild4 = _slicedToArray(_pickChild3, 2),
      withoutImageChildren = _pickChild4[0],
      imageChildren = _pickChild4[1];

  var hasContent = hasChild(withoutImageChildren, CardContent);
  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
    className: _JSXStyle.dynamic([["838067488", [theme.palette.background, width, theme.expressiveness.R2, boxShadow, color, bgColor, theme.expressiveness.L2, theme.expressiveness.cLineStyle1, borderColor, hoverShadow, hoverBgColor, theme.expressiveness.L2, theme.expressiveness.cLineStyle1, hoverBorderColor]]]) + " " + (props && props.className != null && props.className || "card ".concat(className, " ").concat(variant || 'solid'))
  }), imageChildren, hasContent ? withoutImageChildren : /*#__PURE__*/React.createElement(CardContent, null, withoutImageChildren), footerChildren, /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "838067488",
    dynamic: [theme.palette.background, width, theme.expressiveness.R2, boxShadow, color, bgColor, theme.expressiveness.L2, theme.expressiveness.cLineStyle1, borderColor, hoverShadow, hoverBgColor, theme.expressiveness.L2, theme.expressiveness.cLineStyle1, hoverBorderColor]
  }, ".card.__jsx-style-dynamic-selector{background:".concat(theme.palette.background, ";margin:0;padding:0;width:").concat(width, ";-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:").concat(theme.expressiveness.R2, ";box-shadow:").concat(boxShadow, ";box-sizing:border-box;color:").concat(color, ";background-color:").concat(bgColor, ";border:").concat(theme.expressiveness.L2, " ").concat(theme.expressiveness.cLineStyle1, " ").concat(borderColor, ";}.card.__jsx-style-dynamic-selector:hover{box-shadow:").concat(hoverShadow, ";background-color:").concat(hoverBgColor, ";border:").concat(theme.expressiveness.L2, " ").concat(theme.expressiveness.cLineStyle1, " ").concat(hoverBorderColor, ";}")));
};

Card.defaultProps = defaultProps;
export default React.memo(Card);