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

wix-style-react

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

import React from 'react';
import PropTypes from 'prop-types';
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 Tooltip from '../Tooltip';
import MediaOverlay from '../MediaOverlay';
import { DataHook } from './constants';
import { st, classes } from './CardGalleryItem.st.css';

var CardGalleryItem = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(CardGalleryItem, _React$PureComponent);

  var _super = _createSuper(CardGalleryItem);

  function CardGalleryItem() {
    var _this;

    _classCallCheck(this, CardGalleryItem);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));

    _defineProperty(_assertThisInitialized(_this), "state", {
      isHovered: false
    });

    _defineProperty(_assertThisInitialized(_this), "_onMouseEnter", function () {
      _this.setState({
        isHovered: true
      });
    });

    _defineProperty(_assertThisInitialized(_this), "_onMouseLeave", function () {
      _this.setState({
        isHovered: false
      });
    });

    return _this;
  }

  _createClass(CardGalleryItem, [{
    key: "_hasFooter",
    value: function _hasFooter() {
      var _this$props = this.props,
          title = _this$props.title,
          subtitle = _this$props.subtitle;
      return !!(title || subtitle);
    }
  }, {
    key: "_renderBadge",
    value: function _renderBadge() {
      return /*#__PURE__*/React.createElement("div", {
        className: classes.badgeWrapper,
        "data-hook": DataHook.Badge
      }, this.props.badge);
    }
  }, {
    key: "_renderFooter",
    value: function _renderFooter() {
      var _this$props2 = this.props,
          title = _this$props2.title,
          subtitle = _this$props2.subtitle;
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Card.Divider, null), /*#__PURE__*/React.createElement("div", {
        className: classes.footer
      }, /*#__PURE__*/React.createElement(Heading, {
        appearance: "H3",
        ellipsis: true,
        dataHook: DataHook.Title
      }, title), /*#__PURE__*/React.createElement(Text, {
        size: "small",
        secondary: true,
        ellipsis: true,
        dataHook: DataHook.Subtitle
      }, subtitle)));
    }
  }, {
    key: "_renderActions",
    value: function _renderActions() {
      var _this$props3 = this.props,
          _this$props3$primaryA = _this$props3.primaryActionProps,
          label = _this$props3$primaryA.label,
          disabled = _this$props3$primaryA.disabled,
          disabledMessage = _this$props3$primaryA.disabledMessage,
          secondaryActionProps = _this$props3.secondaryActionProps;
      var primaryAction = /*#__PURE__*/React.createElement(Button, {
        dataHook: DataHook.PrimaryAction,
        disabled: disabled
      }, label);
      return /*#__PURE__*/React.createElement("div", {
        className: classes.primaryAction,
        "data-hook": DataHook.HoverContent
      }, disabled && disabledMessage ? /*#__PURE__*/React.createElement(Tooltip, {
        disabled: !disabled,
        content: disabledMessage
      }, primaryAction) : primaryAction, /*#__PURE__*/React.createElement("div", {
        className: classes.secondaryAction
      }, /*#__PURE__*/React.createElement(TextButton, {
        skin: "light",
        onClick: function onClick(event) {
          secondaryActionProps.onClick(event);
          event.stopPropagation();
        },
        dataHook: DataHook.SecondaryAction
      }, secondaryActionProps.label)));
    }
  }, {
    key: "_renderSettingsMenu",
    value: function _renderSettingsMenu() {
      return /*#__PURE__*/React.createElement("div", {
        "data-hook": DataHook.SettingsMenu
      }, this.props.settingsMenu);
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props4 = this.props,
          primaryActionProps = _this$props4.primaryActionProps,
          dataHook = _this$props4.dataHook,
          badge = _this$props4.badge,
          backgroundImageUrl = _this$props4.backgroundImageUrl,
          backgroundImageNode = _this$props4.backgroundImageNode,
          settingsMenu = _this$props4.settingsMenu;
      return /*#__PURE__*/React.createElement(Proportion, {
        dataHook: dataHook
      }, /*#__PURE__*/React.createElement("div", {
        className: st(classes.root, {
          withFooter: !!this._hasFooter()
        }),
        onMouseEnter: this._onMouseEnter,
        onMouseLeave: this._onMouseLeave,
        onClick: primaryActionProps.onClick,
        "data-hook": DataHook.Container
      }, /*#__PURE__*/React.createElement(Card, {
        stretchVertically: true
      }, /*#__PURE__*/React.createElement(MediaOverlay, {
        media: backgroundImageUrl || backgroundImageNode || '',
        className: classes.overlay,
        hoverSkin: "dark",
        hovered: this.state.isHovered,
        dataHook: DataHook.HoverComponent
      }, /*#__PURE__*/React.createElement(MediaOverlay.Content, {
        visible: "hover"
      }, this._renderActions()), settingsMenu && /*#__PURE__*/React.createElement(MediaOverlay.Content, {
        visible: "hover",
        placement: "top-end"
      }, this._renderSettingsMenu())), badge && this._renderBadge(), this._hasFooter() && this._renderFooter())));
    }
  }]);

  return CardGalleryItem;
}(React.PureComponent);

_defineProperty(CardGalleryItem, "displayName", 'CardGalleryItem');

_defineProperty(CardGalleryItem, "propTypes", {
  /** Accepts a <Badge/> or any other static indicator. Passed element will be displayed at the top left corner of a card. */
  badge: PropTypes.node,

  /** Set card title. */
  title: PropTypes.node,

  /** Set card subtitle. */
  subtitle: PropTypes.node,

  /** Specifies background image URL. */
  backgroundImageUrl: PropTypes.string,

  /** Accepts any component to be rendered as a background image. */
  backgroundImageNode: PropTypes.node,

  /** Defines properties for the 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,

    /** Disable the primary action button */
    disabled: PropTypes.bool,

    /** Message to be displayed when primary action button is disabled */
    disabledMessage: PropTypes.string
  }).isRequired,

  /** Defines properties for the secondary action 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,

  /** Defines a popover menu to be displayed on hover at the top right corner or a card. */
  settingsMenu: PropTypes.node,

  /** Applies a data-hook HTML attribute that can be used in the tests. */
  dataHook: PropTypes.string
});

_defineProperty(CardGalleryItem, "defaultProps", {
  primaryActionProps: {
    onClick: function onClick() {}
  },
  secondaryActionProps: {
    onClick: function onClick() {}
  }
});

export default CardGalleryItem;