@wix/design-system
Version:
@wix/design-system
477 lines (476 loc) • 17.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.CardGalleryItem = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _Card = require("../Card");
var _Button = require("../Button");
var _TextButton = require("../TextButton");
var _Text = require("../Text");
var _Heading = require("../Heading");
var _Proportion = require("../Proportion");
var _Tooltip = require("../Tooltip");
var _MediaOverlay = require("../MediaOverlay");
var _CardGalleryItem2 = require("./CardGalleryItem.constants");
var _CardGalleryItem3 = require("./CardGalleryItem.classes");
var _DragHandle = require("../DragHandle/DragHandle");
var _Image = 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: _CardGalleryItem3.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.Heading, {
className: _CardGalleryItem3.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.Text, {
className: _CardGalleryItem3.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: _CardGalleryItem3.classes.footer(),
"data-hook": _CardGalleryItem2.DATA_HOOKS.footer,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 126,
columnNumber: 9
}
}, draggable && /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItem3.classes.dragHandleWrapper(),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 128,
columnNumber: 13
}
}, this._renderDragHandle()), imagePlacement === 'side' && /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItem3.classes.footerImage({
size
}),
"data-hook": _CardGalleryItem2.DATA_HOOKS.footerImage,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 133,
columnNumber: 13
}
}, backgroundImageUrl ? /*#__PURE__*/_react.default.createElement(_Image.Image, {
src: backgroundImageUrl,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 138,
columnNumber: 17
}
}) : backgroundImageNode), /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItem3.classes.footerContent(),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 144,
columnNumber: 11
}
}, heading, /*#__PURE__*/_react.default.createElement(_Text.Text, {
className: _CardGalleryItem3.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: _CardGalleryItem3.classes.footerSuffix(),
"data-hook": _CardGalleryItem2.DATA_HOOKS.suffix,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 157,
columnNumber: 13
}
}, suffix), settingsMenu && imagePlacement === 'side' && this._renderSettingsMenu(), settingsMenu && imagePlacement !== 'side' && /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItem3.classes.settingsMenu(),
"data-hook": _CardGalleryItem2.DATA_HOOKS.footerSettingsMenu,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 168,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _CardGalleryItem2.DATA_HOOKS.SettingsMenu,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 172,
columnNumber: 15
}
}, settingsMenu))));
}
_renderPrimaryAction(skin, dataHook, fullWidth, className) {
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.Button, {
dataHook: dataHook,
disabled: disabled,
skin: skin,
fullWidth: fullWidth,
className: className,
onPointerDown: draggable ? e => e.stopPropagation() : undefined,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 190,
columnNumber: 7
}
}, label);
return disabled && disabledMessage ? /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
disabled: !disabled,
content: disabledMessage,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 203,
columnNumber: 7
}
}, primaryAction) : primaryAction;
}
_renderSecondaryAction(skin, dataHook, className) {
var _this$props5 = this.props,
secondaryActionProps = _this$props5.secondaryActionProps,
draggable = _this$props5.draggable;
if (!secondaryActionProps) {
return null;
}
return /*#__PURE__*/_react.default.createElement(_TextButton.TextButton, {
skin: skin,
className: className,
onClick: event => {
if (secondaryActionProps.onClick) {
secondaryActionProps.onClick(event);
}
event.stopPropagation();
},
dataHook: dataHook,
onPointerDown: draggable ? e => e.stopPropagation() : undefined,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 223,
columnNumber: 7
}
}, secondaryActionProps.label);
}
_renderActions() {
var secondaryActionProps = this.props.secondaryActionProps;
return /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItem3.classes.primaryAction(),
"data-hook": _CardGalleryItem2.DATA_HOOKS.HoverContent,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 248,
columnNumber: 7
}
}, this._renderPrimaryAction('light', _CardGalleryItem2.DATA_HOOKS.PrimaryAction, undefined, _CardGalleryItem3.classes.actionButton()), secondaryActionProps && /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItem3.classes.secondaryAction(),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 260,
columnNumber: 11
}
}, this._renderSecondaryAction('light', _CardGalleryItem2.DATA_HOOKS.SecondaryAction, _CardGalleryItem3.classes.actionTextButton())));
}
_renderBottomActions() {
var secondaryActionProps = this.props.secondaryActionProps;
return /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItem3.classes.bottomActions(),
"data-hook": _CardGalleryItem2.DATA_HOOKS.bottomActions,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 276,
columnNumber: 7
}
}, this._renderPrimaryAction('standard', _CardGalleryItem2.DATA_HOOKS.BottomPrimaryAction, true), secondaryActionProps && /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItem3.classes.bottomSecondaryAction(),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 287,
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: _CardGalleryItem3.classes.settingsMenu(),
"data-hook": dataHook,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 300,
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: _CardGalleryItem3.classes.root({
withFooter,
size,
dragging,
dragDisabled,
draggable,
showActions,
imagePlacement,
showSuffixOnHover,
suffix: !!suffix,
hasBadge: !!badge,
mobile: !!mobile
}),
"data-hook": dataHook,
onFocus: this._onFocus,
onBlur: this._onBlur,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 346,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItem3.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: 369,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement(_Card.Card, {
stretchVertically: true,
showShadow: showShadow,
dataHook: _CardGalleryItem2.DATA_HOOKS.Card,
className: _CardGalleryItem3.classes.cardContainer({
skin,
skinVisibility,
isInteractive,
showShadow
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 376,
columnNumber: 11
}
}, imagePlacement === 'top' && /*#__PURE__*/_react.default.createElement(_Proportion.Proportion, {
aspectRatio: aspectRatio,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 388,
columnNumber: 15
}
}, /*#__PURE__*/_react.default.createElement(_MediaOverlay.MediaOverlay, {
media: backgroundImageUrl || backgroundImageNode || '',
className: _CardGalleryItem3.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: 389,
columnNumber: 17
}
}, showActions && !mobile && /*#__PURE__*/_react.default.createElement(_MediaOverlay.MediaOverlay.Content, {
visible: "hover",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 400,
columnNumber: 21
}
}, this._renderActions())), badge && this._renderBadge(), /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItem3.classes.dragHandleFloatingWrapper(),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 406,
columnNumber: 17
}
}, withFloatingDragHandle && this._renderDragHandle())), withFooter && this._renderFooter(), settingsMenu && !withFooter && imagePlacement === 'top' && this._renderSettingsMenu(), withCustomFooter && /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _CardGalleryItem2.DATA_HOOKS.customFooter,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 417,
columnNumber: 15
}
}, footer), showActions && imagePlacement === 'top' && this._renderBottomActions())));
}
}
exports.CardGalleryItem = CardGalleryItem;
CardGalleryItem.displayName = 'CardGalleryItem';
CardGalleryItem.contextType = _context.WixDesignSystemContext;
CardGalleryItem.defaultProps = {
aspectRatio: 1.6,
size: 'medium',
imagePlacement: 'top',
showSuffixOnHover: false,
skin: 'standard',
skinVisibility: 'always'
};
//# sourceMappingURL=CardGalleryItem.js.map