@brightleaf/elements/lib/card/card.js

React UI elements styled with Bulma CSS

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Card = exports.CardBody = exports.CardImageContainer = exports.CardImage = exports.CardFooter = exports.CardFooterItem = exports.CardHeader = exports.CardHeaderIcon = void 0;

var _react = _interopRequireDefault(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _modifiers = require("../modifiers");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var CardHeaderIcon = function CardHeaderIcon(_ref) {
  var children = _ref.children,
      onClick = _ref.onClick,
      props = _objectWithoutProperties(_ref, ["children", "onClick"]);

  return _react.default.createElement("a", {
    href: "#",
    className: "card-header-icon",
    "aria-label": "more options",
    onClick: onClick
  }, children);
};

exports.CardHeaderIcon = CardHeaderIcon;

var CardHeader = function CardHeader(_ref2) {
  var title = _ref2.title,
      className = _ref2.className,
      children = _ref2.children;
  return _react.default.createElement("header", {
    className: (0, _classnames.default)('card-header', className)
  }, _react.default.createElement("p", {
    className: "card-header-title"
  }, title), children);
};

exports.CardHeader = CardHeader;
CardHeader.sortOrder = 0;

var CardFooterItem = function CardFooterItem(_ref3) {
  var className = _ref3.className,
      children = _ref3.children;

  var kid = _react.default.cloneElement(children, {
    className: (0, _classnames.default)('card-footer-item', className)
  });

  return _react.default.createElement(_react.default.Fragment, null, kid);
};

exports.CardFooterItem = CardFooterItem;

var CardFooter = function CardFooter(_ref4) {
  var children = _ref4.children,
      className = _ref4.className;
  return _react.default.createElement("footer", {
    className: (0, _classnames.default)('card-footer', className)
  }, children);
};

exports.CardFooter = CardFooter;
CardFooter.sortOrder = 5;

var CardImage = function CardImage(_ref5) {
  var src = _ref5.src,
      alt = _ref5.alt,
      className = _ref5.className;
  return _react.default.createElement("div", {
    className: (0, _classnames.default)('card-image', className)
  }, _react.default.createElement("figure", {
    className: "image is-4by3"
  }, _react.default.createElement("img", {
    src: src,
    alt: alt
  })));
};

exports.CardImage = CardImage;
CardImage.sortOrder = 1;

var CardImageContainer = function CardImageContainer(_ref6) {
  var children = _ref6.children,
      className = _ref6.className,
      hasTextCentered = _ref6.hasTextCentered;
  var classes = {
    'has-text-centered': hasTextCentered
  };
  return _react.default.createElement("div", {
    className: (0, _classnames.default)('card-image', className, classes)
  }, children);
};

exports.CardImageContainer = CardImageContainer;
CardImageContainer.sortOrder = 1;

var CardBody = function CardBody(_ref7) {
  var children = _ref7.children,
      className = _ref7.className;
  return _react.default.createElement("div", {
    className: (0, _classnames.default)('card-content', className)
  }, children);
};

exports.CardBody = CardBody;
CardBody.sortOrder = 2;

var Card = function Card(_ref8) {
  var children = _ref8.children,
      isMobile = _ref8.isMobile,
      isFluid = _ref8.isFluid,
      isWideScreen = _ref8.isWideScreen,
      isFullHD = _ref8.isFullHD,
      className = _ref8.className,
      onClick = _ref8.onClick;
  var classes = (0, _modifiers.Screens)({
    isMobile: isMobile,
    isFluid: isFluid,
    isWideScreen: isWideScreen,
    isFullHD: isFullHD
  });

  var childrenAsArray = _react.default.Children.toArray(children).sort(function (childA, childB) {
    if (childA.type.sortOrder < childB.type.sortOrder) {
      return -1;
    }

    if (childA.type.sortOrder > childB.type.sortOrder) {
      return 1;
    }

    return 0;
  });

  var types = [CardHeader, CardBody, CardFooter, CardImage, CardImageContainer];
  childrenAsArray.forEach(function (child) {
    if (types.indexOf(child.type) > -1 || child.props.className && child.props.className.indexOf('card') > -1) {
      return;
    }

    if (child.type.name === 'Collapse') {
      return;
    }

    console.warn("'".concat(child.type, "' not allowed"));
  });
  return _react.default.createElement("div", {
    className: (0, _classnames.default)('card', className, classes),
    onClick: onClick
  }, childrenAsArray);
};

exports.Card = Card;
Card.propTypes = {};
Card.defaultProps = {
  className: '',
  isMobile: false,
  isFluid: false,
  isWideScreen: false,
  isFullHD: false,
  onClick: function onClick() {}
};