wix-style-react
Version:
wix-style-react
498 lines (497 loc) • 16.2 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 = _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");
var _context = require("../WixStyleReactProvider/context");
var _DragHandle = require("../DragHandle/DragHandle");
var _Image = _interopRequireDefault(require("../Image"));
var _DraggableContainer = require("../DraggableContainer/DraggableContainer");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/CardGalleryItem/CardGalleryItem.js";
class CardGalleryItem extends _react.default.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": _constants.DataHook.Badge,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 160,
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: _constants.DataHook.dragHandle,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 170,
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, {
size: "small",
ellipsis: true,
dataHook: _constants.DataHook.Title,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 194,
columnNumber: 9
}
}, title) : /*#__PURE__*/_react.default.createElement(_Text.default, {
size: "small",
weight: "normal",
ellipsis: true,
dataHook: _constants.DataHook.Title,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 198,
columnNumber: 9
}
}, title);
var textSize = imagePlacement === 'side' ? 'tiny' : size === 'medium' ? 'small' : 'tiny';
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, imagePlacement === 'top' && /*#__PURE__*/_react.default.createElement(_Card.default.Divider, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 208,
columnNumber: 38
}
}), /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItemSt.classes.footer,
"data-hook": _constants.DataHook.footer,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 209,
columnNumber: 9
}
}, draggable && /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItemSt.classes.dragHandleWrapper,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 211,
columnNumber: 13
}
}, this._renderDragHandle()), imagePlacement === 'side' && /*#__PURE__*/_react.default.createElement("div", {
className: (0, _CardGalleryItemSt.st)(_CardGalleryItemSt.classes.footerImage, {
size
}),
"data-hook": _constants.DataHook.footerImage,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 216,
columnNumber: 13
}
}, backgroundImageUrl ? /*#__PURE__*/_react.default.createElement(_Image.default, {
src: backgroundImageUrl,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 221,
columnNumber: 17
}
}) : backgroundImageNode), /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItemSt.classes.footerContent,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 227,
columnNumber: 11
}
}, heading, /*#__PURE__*/_react.default.createElement(_Text.default, {
size: textSize,
secondary: true,
ellipsis: true,
dataHook: _constants.DataHook.Subtitle,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 229,
columnNumber: 13
}
}, subtitle)), suffix && /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItemSt.classes.footerSuffix,
"data-hook": _constants.DataHook.suffix,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 239,
columnNumber: 13
}
}, suffix), imagePlacement === 'side' && settingsMenu && this._renderSettingsMenu()));
}
_renderActions() {
var {
primaryActionProps: {
label,
disabled,
disabledMessage
},
secondaryActionProps,
draggable
} = this.props;
var primaryAction = /*#__PURE__*/_react.default.createElement(_context.WixStyleReactContext.Consumer, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 259,
columnNumber: 7
}
}, _ref => {
var {
newColorsBranding
} = _ref;
return /*#__PURE__*/_react.default.createElement(_Button.default, {
dataHook: _constants.DataHook.PrimaryAction,
disabled: disabled,
skin: newColorsBranding ? 'light' : 'standard',
onPointerDown: draggable ? e => e.stopPropagation() : undefined,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 261,
columnNumber: 11
}
}, label);
});
return /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItemSt.classes.primaryAction,
"data-hook": _constants.DataHook.HoverContent,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 274,
columnNumber: 7
}
}, disabled && disabledMessage ? /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
disabled: !disabled,
content: disabledMessage,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 276,
columnNumber: 11
}
}, primaryAction) : primaryAction, secondaryActionProps && /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItemSt.classes.secondaryAction,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 284,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement(_TextButton.default, {
skin: "light",
onClick: event => {
if (secondaryActionProps.onClick) {
secondaryActionProps.onClick(event);
}
event.stopPropagation();
},
dataHook: _constants.DataHook.SecondaryAction,
onPointerDown: draggable ? e => e.stopPropagation() : undefined,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 285,
columnNumber: 13
}
}, secondaryActionProps.label)));
}
_renderSettingsMenu() {
return /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItemSt.classes.settingsMenu,
"data-hook": _constants.DataHook.SettingsMenu,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 306,
columnNumber: 7
}
}, this.props.settingsMenu);
}
render() {
var {
primaryActionProps,
secondaryActionProps,
dataHook,
badge,
backgroundImageUrl,
backgroundImageNode,
settingsMenu,
size,
draggable,
dragging,
droppable,
dragDisabled,
tabIndex,
aspectRatio,
imagePlacement,
showSuffixOnHover,
suffix
} = this.props;
var withFooter = !!this._hasFooter();
var showActions = !dragging && !droppable && !!(primaryActionProps || secondaryActionProps);
var withFloatingDragHandle = !!draggable && !withFooter;
var withHover = showActions || withFloatingDragHandle;
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,
draggable,
showActions,
imagePlacement,
showSuffixOnHover,
suffix: !!suffix
}),
"data-hook": dataHook,
onFocus: this._onFocus,
onBlur: this._onBlur,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 340,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("div", {
onMouseEnter: this._onMouseEnter,
onMouseLeave: this._onMouseLeave,
onClick: primaryActionProps.onClick,
"data-hook": _constants.DataHook.Container,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 360,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement(_Card.default, {
stretchVertically: true,
showShadow: true,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 366,
columnNumber: 11
}
}, imagePlacement === 'top' && /*#__PURE__*/_react.default.createElement(_Proportion.default, {
aspectRatio: aspectRatio,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 368,
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: _constants.DataHook.HoverComponent,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 369,
columnNumber: 17
}
}, showActions && /*#__PURE__*/_react.default.createElement(_MediaOverlay.default.Content, {
visible: "hover",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 377,
columnNumber: 21
}
}, this._renderActions()), settingsMenu && showActions && /*#__PURE__*/_react.default.createElement(_MediaOverlay.default.Content, {
visible: "hover",
placement: "top-end",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 382,
columnNumber: 21
}
}, this._renderSettingsMenu())), badge && this._renderBadge(), /*#__PURE__*/_react.default.createElement("div", {
className: _CardGalleryItemSt.classes.dragHandleFloatingWrapper,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 388,
columnNumber: 17
}
}, withFloatingDragHandle && this._renderDragHandle())), withFooter && this._renderFooter())));
}
}
CardGalleryItem.displayName = 'CardGalleryItem';
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 size. */
size: _propTypes.default.oneOf(['small', 'medium']),
/** Set card title. */
title: _propTypes.default.node,
/** Set card subtitle. */
subtitle: _propTypes.default.node,
/** Accepts any component to be rendered as a suffix of the card's footer */
suffix: _propTypes.default.node,
/**
Show drag handle
*/
draggable: _propTypes.default.bool,
/**
* Removes buttons when other element is dragging and this card is droppable
*/
droppable: _propTypes.default.bool,
/**
Extra props to pass to the `<DragHandle />` element
*/
dragHandleProps: _propTypes.default.object,
/**
* Indicates the element is dragging
*/
dragging: _propTypes.default.bool,
/**
Show disabled drag handle
*/
dragDisabled: _propTypes.default.bool,
/** Specifies the tab order of the component. */
tabIndex: _propTypes.default.number,
/** 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
}),
/** 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,
/**
* Recommended values:
* - Square - 1
* - Portrait - 3/4
* - Cinema - 16/9
* - Landscape - 4/3
* - Custom number (e.g. 1.5)
*/
aspectRatio: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
/** Sets placement of background image. */
imagePlacement: _propTypes.default.oneOf(['top', 'side']),
/** Sets suffix behavior to appear only on card hover. */
showSuffixOnHover: _propTypes.default.bool
};
CardGalleryItem.defaultProps = {
aspectRatio: 1.6,
primaryActionProps: {
onClick: () => {}
},
size: 'medium',
imagePlacement: 'top',
showSuffixOnHover: false
};
var _default = exports.default = CardGalleryItem;
//# sourceMappingURL=CardGalleryItem.js.map