@wix/design-system
Version:
@wix/design-system
465 lines (464 loc) • 17.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
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 _CardGalleryItem2 = require("./CardGalleryItem.constants");
var _CardGalleryItemSt = require("./CardGalleryItem.st.css.js");
var _DragHandle = require("../DragHandle/DragHandle");
var _Image = _interopRequireDefault(require("../Image"));
var _DraggableContainer = require("../DraggableContainer/DraggableContainer");
var _context = require("../WixDesignSystemProvider/context");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/CardGalleryItem/CardGalleryItem.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
class CardGalleryItem extends _react.PureComponent {
constructor() {
super(...arguments);
this.state = {
isHovered: false,
isFocused: false
};
this._onMouseEnter = () => {
this.setState({
isHovered: true
});
};
this._onMouseLeave = () => {
this.setState({
isHovered: false
});
};
this._onFocus = e => {
try {
if (process.env.NODE_ENV === 'test' || e.target.matches(':focus-visible')) {
this.setState({
isFocused: true
});
}
} catch (_unused) {
this.setState({
isFocused: true
});
}
};
this._onBlur = () => {
this.setState({
isFocused: false
});
};
}
_hasFooter() {
var _this$props = this.props,
title = _this$props.title,
subtitle = _this$props.subtitle,
suffix = _this$props.suffix,
imagePlacement = _this$props.imagePlacement;
return !!(title || subtitle || suffix || imagePlacement === 'side');
}
_renderBadge() {
return /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItemSt.classes.badgeWrapper,
"data-hook": _CardGalleryItem2.DATA_HOOKS.Badge,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 7
}
}, this.props.badge);
}
_renderDragHandle() {
var _this$props2 = this.props,
dragHandleProps = _this$props2.dragHandleProps,
dragging = _this$props2.dragging,
dragDisabled = _this$props2.dragDisabled;
return /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, (0, _extends2.default)({}, dragHandleProps, {
dragging: dragging,
disabled: dragDisabled,
dataHook: _CardGalleryItem2.DATA_HOOKS.dragHandle,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 7
}
}));
}
_renderFooter() {
var _this$props3 = this.props,
title = _this$props3.title,
subtitle = _this$props3.subtitle,
size = _this$props3.size,
suffix = _this$props3.suffix,
draggable = _this$props3.draggable,
imagePlacement = _this$props3.imagePlacement,
backgroundImageNode = _this$props3.backgroundImageNode,
backgroundImageUrl = _this$props3.backgroundImageUrl,
settingsMenu = _this$props3.settingsMenu;
var heading = size === 'medium' && imagePlacement !== 'side' ? /*#__PURE__*/_react.default.createElement(_Heading.default, {
className: _CardGalleryItemSt.classes.titleHeading,
size: "small",
ellipsis: true,
dataHook: _CardGalleryItem2.DATA_HOOKS.Title,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 101,
columnNumber: 9
}
}, title) : /*#__PURE__*/_react.default.createElement(_Text.default, {
className: _CardGalleryItemSt.classes.titleText,
size: "small",
weight: "normal",
ellipsis: true,
dataHook: _CardGalleryItem2.DATA_HOOKS.Title,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 110,
columnNumber: 9
}
}, title);
var textSize = imagePlacement === 'side' ? 'tiny' : size === 'medium' ? 'small' : 'tiny';
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItemSt.classes.footer,
"data-hook": _CardGalleryItem2.DATA_HOOKS.footer,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 126,
columnNumber: 9
}
}, draggable && /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItemSt.classes.dragHandleWrapper,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 128,
columnNumber: 13
}
}, this._renderDragHandle()), imagePlacement === 'side' && /*#__PURE__*/_react.default.createElement("div", {
className: (0, _CardGalleryItemSt.st)(_CardGalleryItemSt.classes.footerImage, {
size
}),
"data-hook": _CardGalleryItem2.DATA_HOOKS.footerImage,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 133,
columnNumber: 13
}
}, backgroundImageUrl ? /*#__PURE__*/_react.default.createElement(_Image.default, {
src: backgroundImageUrl,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 138,
columnNumber: 17
}
}) : backgroundImageNode), /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItemSt.classes.footerContent,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 144,
columnNumber: 11
}
}, heading, /*#__PURE__*/_react.default.createElement(_Text.default, {
className: _CardGalleryItemSt.classes.subtitle,
size: textSize,
secondary: true,
ellipsis: true,
dataHook: _CardGalleryItem2.DATA_HOOKS.Subtitle,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 146,
columnNumber: 13
}
}, subtitle)), suffix && /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItemSt.classes.footerSuffix,
"data-hook": _CardGalleryItem2.DATA_HOOKS.suffix,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 157,
columnNumber: 13
}
}, suffix), settingsMenu && this._renderSettingsMenu(imagePlacement === 'side' ? _CardGalleryItem2.DATA_HOOKS.SettingsMenu : _CardGalleryItem2.DATA_HOOKS.footerSettingsMenu)));
}
_renderPrimaryAction(skin, dataHook, fullWidth) {
var _this$props4 = this.props,
primaryActionProps = _this$props4.primaryActionProps,
draggable = _this$props4.draggable;
var _ref = primaryActionProps,
label = _ref.label,
disabled = _ref.disabled,
disabledMessage = _ref.disabledMessage;
var primaryAction = /*#__PURE__*/_react.default.createElement(_Button.default, {
dataHook: dataHook,
disabled: disabled,
skin: skin,
fullWidth: fullWidth,
onPointerDown: draggable ? e => e.stopPropagation() : undefined,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 181,
columnNumber: 7
}
}, label);
return disabled && disabledMessage ? /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
disabled: !disabled,
content: disabledMessage,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 193,
columnNumber: 7
}
}, primaryAction) : primaryAction;
}
_renderSecondaryAction(skin, dataHook) {
var _this$props5 = this.props,
secondaryActionProps = _this$props5.secondaryActionProps,
draggable = _this$props5.draggable;
if (!secondaryActionProps) {
return null;
}
return /*#__PURE__*/_react.default.createElement(_TextButton.default, {
skin: skin,
onClick: event => {
if (secondaryActionProps.onClick) {
secondaryActionProps.onClick(event);
}
event.stopPropagation();
},
dataHook: dataHook,
onPointerDown: draggable ? e => e.stopPropagation() : undefined,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 209,
columnNumber: 7
}
}, secondaryActionProps.label);
}
_renderActions() {
var secondaryActionProps = this.props.secondaryActionProps;
return /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItemSt.classes.primaryAction,
"data-hook": _CardGalleryItem2.DATA_HOOKS.HoverContent,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 233,
columnNumber: 7
}
}, this._renderPrimaryAction('light', _CardGalleryItem2.DATA_HOOKS.PrimaryAction), secondaryActionProps && /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItemSt.classes.secondaryAction,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 240,
columnNumber: 11
}
}, this._renderSecondaryAction('light', _CardGalleryItem2.DATA_HOOKS.SecondaryAction)));
}
_renderBottomActions() {
var secondaryActionProps = this.props.secondaryActionProps;
return /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItemSt.classes.bottomActions,
"data-hook": _CardGalleryItem2.DATA_HOOKS.bottomActions,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 252,
columnNumber: 7
}
}, this._renderPrimaryAction('standard', _CardGalleryItem2.DATA_HOOKS.BottomPrimaryAction, true), secondaryActionProps && /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItemSt.classes.bottomSecondaryAction,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 263,
columnNumber: 11
}
}, this._renderSecondaryAction('standard', _CardGalleryItem2.DATA_HOOKS.BottomSecondaryAction)));
}
_renderSettingsMenu() {
var dataHook = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _CardGalleryItem2.DATA_HOOKS.SettingsMenu;
return /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItemSt.classes.settingsMenu,
"data-hook": dataHook,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 276,
columnNumber: 7
}
}, this.props.settingsMenu);
}
render() {
var _this$props6 = this.props,
primaryActionProps = _this$props6.primaryActionProps,
dataHook = _this$props6.dataHook,
badge = _this$props6.badge,
backgroundImageUrl = _this$props6.backgroundImageUrl,
backgroundImageNode = _this$props6.backgroundImageNode,
settingsMenu = _this$props6.settingsMenu,
size = _this$props6.size,
draggable = _this$props6.draggable,
dragging = _this$props6.dragging,
droppable = _this$props6.droppable,
dragDisabled = _this$props6.dragDisabled,
tabIndex = _this$props6.tabIndex,
aspectRatio = _this$props6.aspectRatio,
imagePlacement = _this$props6.imagePlacement,
showSuffixOnHover = _this$props6.showSuffixOnHover,
suffix = _this$props6.suffix,
skin = _this$props6.skin,
skinVisibility = _this$props6.skinVisibility,
footer = _this$props6.footer;
var isHovered = this.state.isHovered;
var _ref2 = this.context,
mobile = _ref2.mobile;
var withCustomFooter = !!footer && imagePlacement === 'top';
var withFooter = !!this._hasFooter();
var isInteractive = !!primaryActionProps;
var showActions = !dragging && !droppable && isInteractive;
var withFloatingDragHandle = !!draggable && !withFooter;
var withHover = showActions || withFloatingDragHandle;
var showOverlayHover = withHover && !mobile;
var showShadow = skin === 'standard' && (skinVisibility === 'always' || isHovered);
return /*#__PURE__*/_react.default.createElement(_DraggableContainer.DraggableContainer, {
draggable: draggable && !showActions,
dragging: dragging,
dim: true,
dragDisabled: dragDisabled,
tabIndex: tabIndex,
className: (0, _CardGalleryItemSt.st)(_CardGalleryItemSt.classes.root, {
withFooter,
size,
dragging,
dragDisabled,
draggable,
showActions,
imagePlacement,
showSuffixOnHover,
suffix: !!suffix,
mobile: !!mobile
}),
"data-hook": dataHook,
onFocus: this._onFocus,
onBlur: this._onBlur,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 322,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItemSt.classes.container,
onMouseEnter: this._onMouseEnter,
onMouseLeave: this._onMouseLeave,
onClick: primaryActionProps == null ? void 0 : primaryActionProps.onClick,
"data-hook": _CardGalleryItem2.DATA_HOOKS.Container,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 344,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement(_Card.default, {
stretchVertically: true,
showShadow: showShadow,
dataHook: _CardGalleryItem2.DATA_HOOKS.Card,
className: (0, _CardGalleryItemSt.st)(_CardGalleryItemSt.classes.cardContainer, {
skin,
skinVisibility,
isInteractive
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 351,
columnNumber: 11
}
}, imagePlacement === 'top' && /*#__PURE__*/_react.default.createElement(_Proportion.default, {
aspectRatio: aspectRatio,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 362,
columnNumber: 15
}
}, /*#__PURE__*/_react.default.createElement(_MediaOverlay.default, {
media: backgroundImageUrl || backgroundImageNode || '',
className: _CardGalleryItemSt.classes.overlay,
hoverSkin: showOverlayHover ? 'dark' : undefined,
hovered: showOverlayHover && (this.state.isHovered || this.state.isFocused),
dataHook: _CardGalleryItem2.DATA_HOOKS.HoverComponent,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 363,
columnNumber: 17
}
}, showActions && !mobile && /*#__PURE__*/_react.default.createElement(_MediaOverlay.default.Content, {
visible: "hover",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 374,
columnNumber: 21
}
}, this._renderActions()), settingsMenu && showActions && !mobile && /*#__PURE__*/_react.default.createElement(_MediaOverlay.default.Content, {
visible: "hover",
placement: "top-end",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 379,
columnNumber: 21
}
}, this._renderSettingsMenu())), badge && this._renderBadge(), /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItemSt.classes.dragHandleFloatingWrapper,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 385,
columnNumber: 17
}
}, withFloatingDragHandle && this._renderDragHandle())), withFooter && this._renderFooter(), withCustomFooter && /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _CardGalleryItem2.DATA_HOOKS.customFooter,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 392,
columnNumber: 15
}
}, footer), showActions && imagePlacement === 'top' && this._renderBottomActions())));
}
}
CardGalleryItem.displayName = 'CardGalleryItem';
CardGalleryItem.contextType = _context.WixDesignSystemContext;
CardGalleryItem.defaultProps = {
aspectRatio: 1.6,
size: 'medium',
imagePlacement: 'top',
showSuffixOnHover: false,
skin: 'standard',
skinVisibility: 'always'
};
var _default = exports.default = CardGalleryItem;
//# sourceMappingURL=CardGalleryItem.js.map