wix-style-react/dist/es/src/CardGalleryItem/CardGalleryItem.js

wix-style-react

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _class, _temp;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import Hover from './Hover';
import Card from '../Card';
import Button from '../Button';
import TextButton from '../TextButton';
import Text from '../Text';
import Heading from '../Heading';
import Proportion from '../Proportion';

import styles from './CardGalleryItem.scss';
import animationStyles from './CardGalleryItemAnimation.scss';

var CardGalleryItem = (_temp = _class = function (_React$Component) {
  _inherits(CardGalleryItem, _React$Component);

  function CardGalleryItem() {
    _classCallCheck(this, CardGalleryItem);

    return _possibleConstructorReturn(this, (CardGalleryItem.__proto__ || Object.getPrototypeOf(CardGalleryItem)).apply(this, arguments));
  }

  _createClass(CardGalleryItem, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          title = _props.title,
          subtitle = _props.subtitle,
          backgroundImageUrl = _props.backgroundImageUrl,
          primaryActionProps = _props.primaryActionProps,
          secondaryActionProps = _props.secondaryActionProps,
          className = _props.className,
          dataHook = _props.dataHook;


      var hoveredContent = React.createElement(
        'div',
        { className: styles.hoveredContent, 'data-hook': 'hovered-content' },
        React.createElement(
          'div',
          { className: styles.primaryAction },
          React.createElement(
            Button,
            { dataHook: 'primary-action' },
            primaryActionProps.label
          ),
          React.createElement(
            'div',
            { className: styles.secondaryAction },
            React.createElement(
              TextButton,
              {
                skin: 'light',
                onClick: function onClick(event) {
                  secondaryActionProps.onClick(event);
                  event.stopPropagation();
                },
                dataHook: 'secondary-action'
              },
              secondaryActionProps.label
            )
          )
        )
      );

      return React.createElement(
        Proportion,
        null,
        React.createElement(
          'div',
          {
            className: classNames(styles.root, className),
            onClick: primaryActionProps.onClick,
            'data-hook': dataHook
          },
          React.createElement(
            Card,
            { stretchVertically: true, hideOverflow: true },
            React.createElement(
              Hover,
              {
                classNames: animationStyles,
                timeout: 200,
                hoveredContent: hoveredContent,
                dataHook: 'hover-component'
              },
              React.createElement('div', {
                className: styles.content,
                style: {
                  backgroundImage: 'url(' + backgroundImageUrl + ')'
                },
                'data-hook': 'background-image'
              }),
              React.createElement(Card.Divider, null),
              React.createElement(
                'div',
                { className: styles.footer },
                React.createElement(
                  Heading,
                  { appearance: 'H4', ellipsis: true, 'data-hook': 'title' },
                  title
                ),
                React.createElement(
                  Text,
                  {
                    size: 'small',
                    weight: 'thin',
                    secondary: true,
                    ellipsis: true,
                    'data-hook': 'subtitle'
                  },
                  subtitle
                )
              )
            )
          )
        )
      );
    }
  }]);

  return CardGalleryItem;
}(React.Component), _class.displayName = 'CardGalleryItem', _class.propTypes = {
  /** Card title */
  title: PropTypes.node,

  /** Card subtitle */
  subtitle: PropTypes.node,

  /** Background image of CardGalleryItem */
  backgroundImageUrl: PropTypes.string,

  /** Properties for primary action button */
  primaryActionProps: PropTypes.shape({
    /** Label of primary action button */
    label: PropTypes.node,
    /** On click handler of primary action button and of the whole card */
    onClick: PropTypes.func
  }).isRequired,

  /** Properties for secondary action text button */
  secondaryActionProps: PropTypes.shape({
    /** Label of secondary action text button */
    label: PropTypes.node,
    /** On click handler of secondary action text button */
    onClick: PropTypes.func
  }).isRequired,

  /** className for root */
  className: PropTypes.string,

  /** data-hook value */
  dataHook: PropTypes.string
}, _class.defaultProps = {
  primaryActionProps: {
    onClick: function onClick() {}
  },
  secondaryActionProps: {
    onClick: function onClick() {}
  }
}, _temp);


export default CardGalleryItem;