react-misc-toolbox/dist/Card.js

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SC = undefined;

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');

var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n    background-color: rgba(255, 255, 255, 0.8);\n    position: relative;\n    padding: 0.5rem 1rem;\n    margin-left: 1rem;\n    min-width: 16rem;\n  '], ['\n    background-color: rgba(255, 255, 255, 0.8);\n    position: relative;\n    padding: 0.5rem 1rem;\n    margin-left: 1rem;\n    min-width: 16rem;\n  ']),
    _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n    background-image: ', ';\n    overflow: hidden;\n    background-position: center;\n    margin-bottom: 8px;\n    border-radius: 3px 3px 0;\n    display: flex;\n    background-repeat: no-repeat;\n    background-size: contain;\n    height: 19rem;\n  '], ['\n    background-image: ', ';\n    overflow: hidden;\n    background-position: center;\n    margin-bottom: 8px;\n    border-radius: 3px 3px 0;\n    display: flex;\n    background-repeat: no-repeat;\n    background-size: contain;\n    height: 19rem;\n  ']),
    _templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n    text-align: center;\n    padding: 5px;\n  '], ['\n    text-align: center;\n    padding: 5px;\n  ']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

var SC = exports.SC = {
  Container: _styledComponents2.default.div(_templateObject),
  Image: _styledComponents2.default.div(_templateObject2, function (_ref) {
    var imageURL = _ref.imageURL;
    return 'url("' + imageURL + '")';
  }),
  Title: _styledComponents2.default.div(_templateObject3),
  Subtitle: _styledComponents2.default.div(_templateObject3)
};

var Card = function Card(_ref2) {
  var style = _ref2.style,
      className = _ref2.className,
      _onClick = _ref2.onClick,
      children = _ref2.children;

  var getContainerProps = function getContainerProps() {
    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
    return (0, _extends3.default)({
      style: style,
      className: className ? className + ' card__container' : 'card__container',
      onClick: function onClick(e) {
        for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
          args[_key - 1] = arguments[_key];
        }

        e.stopPropagation();
        _onClick && _onClick.apply(undefined, [e].concat(args));
      }
    }, props);
  };

  var getImageProps = function getImageProps() {
    var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    var className = _ref3.className,
        style = _ref3.style,
        _onClick2 = _ref3.onClick,
        props = (0, _objectWithoutProperties3.default)(_ref3, ['className', 'style', 'onClick']);
    return (0, _extends3.default)({
      style: style,
      className: className ? className + ' card__image' : 'card__image',
      onClick: function onClick(e) {
        for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
          args[_key2 - 1] = arguments[_key2];
        }

        e.stopPropagation();
        _onClick2 && _onClick2.apply(undefined, [e].concat(args));
      }
    }, props);
  };
  var getTitleProps = function getTitleProps() {
    var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    var className = _ref4.className,
        style = _ref4.style,
        _onClick3 = _ref4.onClick,
        props = (0, _objectWithoutProperties3.default)(_ref4, ['className', 'style', 'onClick']);
    return (0, _extends3.default)({
      style: style,
      className: className ? className + ' card__title' : 'card__title',
      onClick: function onClick(e) {
        for (var _len3 = arguments.length, args = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
          args[_key3 - 1] = arguments[_key3];
        }

        e.stopPropagation();
        _onClick3 && _onClick3.apply(undefined, [e].concat(args));
      }
    }, props);
  };
  var getSubtitleProps = function getSubtitleProps() {
    var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    var className = _ref5.className,
        style = _ref5.style,
        _onClick4 = _ref5.onClick,
        props = (0, _objectWithoutProperties3.default)(_ref5, ['className', 'style', 'onClick']);
    return (0, _extends3.default)({
      style: style,
      className: className ? className + ' card__subtitle' : 'card__subtitle',
      onClick: function onClick(e) {
        for (var _len4 = arguments.length, args = Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
          args[_key4 - 1] = arguments[_key4];
        }

        e.stopPropagation();
        _onClick4 && _onClick4.apply(undefined, [e].concat(args));
      }
    }, props);
  };

  return children({
    getContainerProps: getContainerProps,
    getImageProps: getImageProps,
    getTitleProps: getTitleProps,
    getSubtitleProps: getSubtitleProps
  });
};

exports.default = Card;