@wix/design-system
Version:
@wix/design-system
465 lines (464 loc) • 15.8 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 _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 _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 _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 {
title,
subtitle,
suffix,
imagePlacement
} = this.props;
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: 101,
columnNumber: 7
}
}, this.props.badge);
}
_renderDragHandle() {
var {
dragHandleProps,
dragging,
dragDisabled
} = this.props;
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: 111,
columnNumber: 7
}
}));
}
_renderFooter() {
var {
title,
subtitle,
size,
suffix,
draggable,
imagePlacement,
backgroundImageNode,
backgroundImageUrl,
settingsMenu
} = this.props;
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: 135,
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: 144,
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: 160,
columnNumber: 9
}
}, draggable && /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItemSt.classes.dragHandleWrapper,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 162,
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: 167,
columnNumber: 13
}
}, backgroundImageUrl ? /*#__PURE__*/_react.default.createElement(_Image.default, {
src: backgroundImageUrl,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 172,
columnNumber: 17
}
}) : backgroundImageNode), /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItemSt.classes.footerContent,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 178,
columnNumber: 11
}
}, heading, /*#__PURE__*/_react.default.createElement(_Text.default, {
size: textSize,
secondary: true,
ellipsis: true,
dataHook: _CardGalleryItem2.DATA_HOOKS.Subtitle,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 180,
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: 190,
columnNumber: 13
}
}, suffix), imagePlacement === 'side' && settingsMenu && this._renderSettingsMenu()));
}
_renderActions() {
var {
primaryActionProps,
secondaryActionProps,
draggable
} = this.props;
var {
label,
disabled,
disabledMessage
} = primaryActionProps;
var primaryAction = /*#__PURE__*/_react.default.createElement(_Button.default, {
dataHook: _CardGalleryItem2.DATA_HOOKS.PrimaryAction,
disabled: disabled,
skin: "light",
onPointerDown: draggable ? e => e.stopPropagation() : undefined,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 206,
columnNumber: 7
}
}, label);
return /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItemSt.classes.primaryAction,
"data-hook": _CardGalleryItem2.DATA_HOOKS.HoverContent,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 217,
columnNumber: 7
}
}, disabled && disabledMessage ? /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
disabled: !disabled,
content: disabledMessage,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 222,
columnNumber: 11
}
}, primaryAction) : primaryAction, secondaryActionProps && /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItemSt.classes.secondaryAction,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 230,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement(_TextButton.default, {
skin: "light",
onClick: event => {
if (secondaryActionProps.onClick) {
secondaryActionProps.onClick(event);
}
event.stopPropagation();
},
dataHook: _CardGalleryItem2.DATA_HOOKS.SecondaryAction,
onPointerDown: draggable ? e => e.stopPropagation() : undefined,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 231,
columnNumber: 13
}
}, secondaryActionProps.label)));
}
_renderSettingsMenu() {
return /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItemSt.classes.settingsMenu,
"data-hook": _CardGalleryItem2.DATA_HOOKS.SettingsMenu,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 257,
columnNumber: 7
}
}, this.props.settingsMenu);
}
render() {
var {
primaryActionProps,
dataHook,
badge,
backgroundImageUrl,
backgroundImageNode,
settingsMenu,
size,
draggable,
dragging,
droppable,
dragDisabled,
tabIndex,
aspectRatio,
imagePlacement,
showSuffixOnHover,
suffix,
skin,
skinVisibility,
footer
} = this.props;
var {
isHovered
} = this.state;
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 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
}),
"data-hook": dataHook,
onFocus: this._onFocus,
onBlur: this._onBlur,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 297,
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: 318,
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: 325,
columnNumber: 11
}
}, imagePlacement === 'top' && /*#__PURE__*/_react.default.createElement(_Proportion.default, {
aspectRatio: aspectRatio,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 336,
columnNumber: 15
}
}, /*#__PURE__*/_react.default.createElement(_MediaOverlay.default, {
media: backgroundImageUrl || backgroundImageNode || '',
className: _CardGalleryItemSt.classes.overlay,
hoverSkin: withHover ? 'dark' : undefined,
hovered: this.state.isHovered || this.state.isFocused,
dataHook: _CardGalleryItem2.DATA_HOOKS.HoverComponent,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 337,
columnNumber: 17
}
}, showActions && /*#__PURE__*/_react.default.createElement(_MediaOverlay.default.Content, {
visible: "hover",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 345,
columnNumber: 21
}
}, this._renderActions()), settingsMenu && showActions && /*#__PURE__*/_react.default.createElement(_MediaOverlay.default.Content, {
visible: "hover",
placement: "top-end",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 350,
columnNumber: 21
}
}, this._renderSettingsMenu())), badge && this._renderBadge(), /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItemSt.classes.dragHandleFloatingWrapper,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 356,
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: 363,
columnNumber: 15
}
}, footer))));
}
}
CardGalleryItem.displayName = 'CardGalleryItem';
CardGalleryItem.propTypes = {
badge: _propTypes.default.node,
size: _propTypes.default.oneOf(['small', 'medium']),
title: _propTypes.default.node,
subtitle: _propTypes.default.node,
suffix: _propTypes.default.node,
draggable: _propTypes.default.bool,
droppable: _propTypes.default.bool,
dragHandleProps: _propTypes.default.object,
dragging: _propTypes.default.bool,
dragDisabled: _propTypes.default.bool,
tabIndex: _propTypes.default.number,
backgroundImageUrl: _propTypes.default.string,
backgroundImageNode: _propTypes.default.node,
primaryActionProps: _propTypes.default.shape({
label: _propTypes.default.node,
onClick: _propTypes.default.func,
disabled: _propTypes.default.bool,
disabledMessage: _propTypes.default.string
}),
secondaryActionProps: _propTypes.default.shape({
label: _propTypes.default.node,
onClick: _propTypes.default.func
}),
settingsMenu: _propTypes.default.node,
dataHook: _propTypes.default.string,
aspectRatio: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
imagePlacement: _propTypes.default.oneOf(['top', 'side']),
showSuffixOnHover: _propTypes.default.bool,
skin: _propTypes.default.oneOf(['standard', 'outlined']),
skinVisibility: _propTypes.default.oneOf(['always', 'hover']),
footer: _propTypes.default.node
};
CardGalleryItem.defaultProps = {
aspectRatio: 1.6,
size: 'medium',
imagePlacement: 'top',
showSuffixOnHover: false,
skin: 'standard',
skinVisibility: 'always'
};
var _default = exports.default = CardGalleryItem;
//# sourceMappingURL=CardGalleryItem.js.map