react-animated-info-card/dist/index.esm.js

A React component which can animate a card open on click

import React, { useState } from 'react';
import styled from '@emotion/styled';

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

function _iterableToArrayLimit(arr, i) {
  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
  var _arr = [];
  var _n = true;
  var _d = false;
  var _e = undefined;

  try {
    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
      _arr.push(_s.value);

      if (i && _arr.length === i) break;
    }
  } catch (err) {
    _d = true;
    _e = err;
  } finally {
    try {
      if (!_n && _i["return"] != null) _i["return"]();
    } finally {
      if (_d) throw _e;
    }
  }

  return _arr;
}

function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor) n = o.constructor.name;
  if (n === "Map" || n === "Set") return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}

function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;

  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];

  return arr2;
}

function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

function styleInject(css, ref) {
  if ( ref === void 0 ) ref = {};
  var insertAt = ref.insertAt;

  if (!css || typeof document === 'undefined') { return; }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css_248z = ".react-info-card__container {\n  position: relative;\n}\n\n.react-info-card__slide .react-info-card__image{\n  transform: translate(0, -40px);\n}\n\n.react-info-card__slide .react-info-card__body{\n  transform: translate(0, 40px) scale(1.1);\n  height: auto;\n}\n";
styleInject(css_248z);

var Image = styled.div(function (props) {
  return {
    width: props.width || '400px',
    height: props.height || '300px',
    borderRadius: props.borderRadius || '5px',
    backgroundImage: "url(".concat(props.imagePath, ")"),
    backgroundPosition: 'center',
    backgroundSize: 'cover',
    cursor: 'pointer',
    boxShadow: props.boxShadow || '0 20px 10px -10px rgba(0, 0, 0, 0.2)',
    position: 'absolute',
    top: '0',
    left: '0',
    zIndex: 1,
    transition: 'transform 0.3s ease-in'
  };
});
var Info = styled.div(function (props) {
  return {
    width: props.width || '400px',
    height: props.height || '300px',
    borderRadius: props.borderRadius || '5px',
    padding: '10px',
    paddingTop: parseInt(props.height) - 70 + 'px' || '130px',
    position: 'absolute',
    top: '0',
    left: '0',
    backgroundColor: 'white',
    transition: 'transform 0.3s ease-in'
  };
});

var InfoCard = function InfoCard(_ref) {
  var children = _ref.children,
      styles = _ref.styles;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      isExpanded = _useState2[0],
      setExpanded = _useState2[1];

  var toggleExpanded = function toggleExpanded() {
    setExpanded(!isExpanded);
  };

  var classnames = 'react-info-card__container';

  if (isExpanded) {
    classnames = "".concat(classnames, " react-info-card__slide");
  }

  return /*#__PURE__*/React.createElement("div", {
    className: classnames,
    onClick: toggleExpanded
  }, /*#__PURE__*/React.createElement(Image, _extends({}, styles, {
    className: "react-info-card__image"
  })), /*#__PURE__*/React.createElement(Info, _extends({}, styles, {
    className: "react-info-card__body"
  }), children));
};

export default InfoCard;