wix-style-react
Version:
252 lines (207 loc) • 10.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Card = _interopRequireDefault(require("../Card"));
var _Button = _interopRequireDefault(require("../Button"));
var _TextButton = _interopRequireDefault(require("../TextButton"));
var _Text = _interopRequireDefault(require("../Text"));
var _Heading = _interopRequireDefault(require("../Heading"));
var _Proportion = _interopRequireDefault(require("../Proportion"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _MediaOverlay = _interopRequireDefault(require("../MediaOverlay"));
var _constants = require("./constants");
var _CardGalleryItemSt = require("./CardGalleryItem.st.css");
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(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; } }
var CardGalleryItem = /*#__PURE__*/function (_React$PureComponent) {
(0, _inherits2["default"])(CardGalleryItem, _React$PureComponent);
var _super = _createSuper(CardGalleryItem);
function CardGalleryItem() {
var _this;
(0, _classCallCheck2["default"])(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));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
isHovered: false
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onMouseEnter", function () {
_this.setState({
isHovered: true
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onMouseLeave", function () {
_this.setState({
isHovered: false
});
});
return _this;
}
(0, _createClass2["default"])(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["default"].createElement("div", {
className: _CardGalleryItemSt.classes.badgeWrapper,
"data-hook": _constants.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["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Card["default"].Divider, null), /*#__PURE__*/_react["default"].createElement("div", {
className: _CardGalleryItemSt.classes.footer
}, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
appearance: "H3",
ellipsis: true,
dataHook: _constants.DataHook.Title
}, title), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
size: "small",
secondary: true,
ellipsis: true,
dataHook: _constants.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["default"].createElement(_Button["default"], {
dataHook: _constants.DataHook.PrimaryAction,
disabled: disabled
}, label);
return /*#__PURE__*/_react["default"].createElement("div", {
className: _CardGalleryItemSt.classes.primaryAction,
"data-hook": _constants.DataHook.HoverContent
}, disabled && disabledMessage ? /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
disabled: !disabled,
content: disabledMessage
}, primaryAction) : primaryAction, /*#__PURE__*/_react["default"].createElement("div", {
className: _CardGalleryItemSt.classes.secondaryAction
}, /*#__PURE__*/_react["default"].createElement(_TextButton["default"], {
skin: "light",
onClick: function onClick(event) {
secondaryActionProps.onClick(event);
event.stopPropagation();
},
dataHook: _constants.DataHook.SecondaryAction
}, secondaryActionProps.label)));
}
}, {
key: "_renderSettingsMenu",
value: function _renderSettingsMenu() {
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": _constants.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["default"].createElement(_Proportion["default"], {
dataHook: dataHook
}, /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _CardGalleryItemSt.st)(_CardGalleryItemSt.classes.root, {
withFooter: !!this._hasFooter()
}),
onMouseEnter: this._onMouseEnter,
onMouseLeave: this._onMouseLeave,
onClick: primaryActionProps.onClick,
"data-hook": _constants.DataHook.Container
}, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
stretchVertically: true
}, /*#__PURE__*/_react["default"].createElement(_MediaOverlay["default"], {
media: backgroundImageUrl || backgroundImageNode || '',
className: _CardGalleryItemSt.classes.overlay,
hoverSkin: "dark",
hovered: this.state.isHovered,
dataHook: _constants.DataHook.HoverComponent
}, /*#__PURE__*/_react["default"].createElement(_MediaOverlay["default"].Content, {
visible: "hover"
}, this._renderActions()), settingsMenu && /*#__PURE__*/_react["default"].createElement(_MediaOverlay["default"].Content, {
visible: "hover",
placement: "top-end"
}, this._renderSettingsMenu())), badge && this._renderBadge(), this._hasFooter() && this._renderFooter())));
}
}]);
return CardGalleryItem;
}(_react["default"].PureComponent);
(0, _defineProperty2["default"])(CardGalleryItem, "displayName", 'CardGalleryItem');
(0, _defineProperty2["default"])(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["default"].node,
/** Set card title. */
title: _propTypes["default"].node,
/** Set card subtitle. */
subtitle: _propTypes["default"].node,
/** Specifies background image URL. */
backgroundImageUrl: _propTypes["default"].string,
/** Accepts any component to be rendered as a background image. */
backgroundImageNode: _propTypes["default"].node,
/** Defines properties for the primary action button. */
primaryActionProps: _propTypes["default"].shape({
/** Label of primary action button */
label: _propTypes["default"].node,
/** On click handler of primary action button and of the whole card */
onClick: _propTypes["default"].func,
/** Disable the primary action button */
disabled: _propTypes["default"].bool,
/** Message to be displayed when primary action button is disabled */
disabledMessage: _propTypes["default"].string
}).isRequired,
/** Defines properties for the secondary action button. */
secondaryActionProps: _propTypes["default"].shape({
/** Label of secondary action text button */
label: _propTypes["default"].node,
/** On click handler of secondary action text button */
onClick: _propTypes["default"].func
}).isRequired,
/** Defines a popover menu to be displayed on hover at the top right corner or a card. */
settingsMenu: _propTypes["default"].node,
/** Applies a data-hook HTML attribute that can be used in the tests. */
dataHook: _propTypes["default"].string
});
(0, _defineProperty2["default"])(CardGalleryItem, "defaultProps", {
primaryActionProps: {
onClick: function onClick() {}
},
secondaryActionProps: {
onClick: function onClick() {}
}
});
var _default = CardGalleryItem;
exports["default"] = _default;