@wix/design-system
Version:
@wix/design-system
162 lines • 9.89 kB
JavaScript
import React, { PureComponent } from 'react';
import Card from '../Card';
import Button from '../Button';
import TextButton from '../TextButton';
import Text from '../Text';
import Heading from '../Heading';
import Proportion from '../Proportion';
import Tooltip from '../Tooltip';
import MediaOverlay from '../MediaOverlay';
import { DATA_HOOKS } from './CardGalleryItem.constants';
import { classes, st } from './CardGalleryItem.st.css.js';
import { DragHandle } from '../DragHandle/DragHandle';
import Image from '../Image';
import { DraggableContainer } from '../DraggableContainer/DraggableContainer';
import { WixDesignSystemContext } from '../WixDesignSystemProvider/context';
class CardGalleryItem extends 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 {
this.setState({ isFocused: true });
}
};
this._onBlur = () => {
this.setState({ isFocused: false });
};
}
_hasFooter() {
const { title, subtitle, suffix, imagePlacement } = this.props;
return !!(title || subtitle || suffix || imagePlacement === 'side');
}
_renderBadge() {
return (React.createElement("div", { className: classes.badgeWrapper, "data-hook": DATA_HOOKS.Badge }, this.props.badge));
}
_renderDragHandle() {
const { dragHandleProps, dragging, dragDisabled } = this.props;
return (React.createElement(DragHandle, { ...dragHandleProps, dragging: dragging, disabled: dragDisabled, dataHook: DATA_HOOKS.dragHandle }));
}
_renderFooter() {
const { title, subtitle, size, suffix, draggable, imagePlacement, backgroundImageNode, backgroundImageUrl, settingsMenu, } = this.props;
const heading = size === 'medium' && imagePlacement !== 'side' ? (React.createElement(Heading, { className: classes.titleHeading, size: "small", ellipsis: true, dataHook: DATA_HOOKS.Title }, title)) : (React.createElement(Text, { className: classes.titleText, size: "small", weight: "normal", ellipsis: true, dataHook: DATA_HOOKS.Title }, title));
const textSize = imagePlacement === 'side' ? 'tiny' : size === 'medium' ? 'small' : 'tiny';
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: classes.footer, "data-hook": DATA_HOOKS.footer },
draggable && (React.createElement("div", { className: classes.dragHandleWrapper }, this._renderDragHandle())),
imagePlacement === 'side' && (React.createElement("div", { className: st(classes.footerImage, { size }), "data-hook": DATA_HOOKS.footerImage }, backgroundImageUrl ? (React.createElement(Image, { src: backgroundImageUrl })) : (backgroundImageNode))),
React.createElement("div", { className: classes.footerContent },
heading,
React.createElement(Text, { className: classes.subtitle, size: textSize, secondary: true, ellipsis: true, dataHook: DATA_HOOKS.Subtitle }, subtitle)),
suffix && (React.createElement("div", { className: classes.footerSuffix, "data-hook": DATA_HOOKS.suffix }, suffix)),
settingsMenu &&
this._renderSettingsMenu(imagePlacement === 'side'
? DATA_HOOKS.SettingsMenu
: DATA_HOOKS.footerSettingsMenu))));
}
_renderPrimaryAction(skin, dataHook, fullWidth) {
const { primaryActionProps, draggable } = this.props;
const { label, disabled, disabledMessage } = primaryActionProps;
const primaryAction = (React.createElement(Button, { dataHook: dataHook, disabled: disabled, skin: skin, fullWidth: fullWidth, onPointerDown: draggable ? e => e.stopPropagation() : undefined }, label));
return disabled && disabledMessage ? (React.createElement(Tooltip, { disabled: !disabled, content: disabledMessage }, primaryAction)) : (primaryAction);
}
_renderSecondaryAction(skin, dataHook) {
const { secondaryActionProps, draggable } = this.props;
if (!secondaryActionProps) {
return null;
}
return (React.createElement(TextButton, { skin: skin, onClick: (event) => {
if (secondaryActionProps.onClick) {
secondaryActionProps.onClick(event);
}
event.stopPropagation();
}, dataHook: dataHook, onPointerDown: draggable
? (e) => e.stopPropagation()
: undefined }, secondaryActionProps.label));
}
_renderActions() {
const { secondaryActionProps } = this.props;
return (React.createElement("div", { className: classes.primaryAction, "data-hook": DATA_HOOKS.HoverContent },
this._renderPrimaryAction('light', DATA_HOOKS.PrimaryAction),
secondaryActionProps && (React.createElement("div", { className: classes.secondaryAction }, this._renderSecondaryAction('light', DATA_HOOKS.SecondaryAction)))));
}
_renderBottomActions() {
const { secondaryActionProps } = this.props;
return (React.createElement("div", { className: classes.bottomActions, "data-hook": DATA_HOOKS.bottomActions },
this._renderPrimaryAction('standard', DATA_HOOKS.BottomPrimaryAction, true),
secondaryActionProps && (React.createElement("div", { className: classes.bottomSecondaryAction }, this._renderSecondaryAction('standard', DATA_HOOKS.BottomSecondaryAction)))));
}
_renderSettingsMenu(dataHook = DATA_HOOKS.SettingsMenu) {
return (React.createElement("div", { className: classes.settingsMenu, "data-hook": dataHook }, this.props.settingsMenu));
}
render() {
const { primaryActionProps, dataHook, badge, backgroundImageUrl, backgroundImageNode, settingsMenu, size, draggable, dragging, droppable, dragDisabled, tabIndex, aspectRatio, imagePlacement, showSuffixOnHover, suffix, skin, skinVisibility, footer, } = this.props;
const { isHovered } = this.state;
const { mobile } = this.context;
const withCustomFooter = !!footer && imagePlacement === 'top';
const withFooter = !!this._hasFooter();
const isInteractive = !!primaryActionProps;
const showActions = !dragging && !droppable && isInteractive;
const withFloatingDragHandle = !!draggable && !withFooter;
const withHover = showActions || withFloatingDragHandle;
const showOverlayHover = withHover && !mobile;
const showShadow = skin === 'standard' && (skinVisibility === 'always' || isHovered);
return (React.createElement(DraggableContainer, { draggable: draggable && !showActions, dragging: dragging, dim: true, dragDisabled: dragDisabled, tabIndex: tabIndex, className: st(classes.root, {
withFooter,
size,
dragging,
dragDisabled,
draggable,
showActions,
imagePlacement,
showSuffixOnHover,
suffix: !!suffix,
mobile: !!mobile,
}), "data-hook": dataHook, onFocus: this._onFocus, onBlur: this._onBlur },
React.createElement("div", { className: classes.container, onMouseEnter: this._onMouseEnter, onMouseLeave: this._onMouseLeave, onClick: primaryActionProps?.onClick, "data-hook": DATA_HOOKS.Container },
React.createElement(Card, { stretchVertically: true, showShadow: showShadow, dataHook: DATA_HOOKS.Card, className: st(classes.cardContainer, {
skin,
skinVisibility,
isInteractive,
}) },
imagePlacement === 'top' && (React.createElement(Proportion, { aspectRatio: aspectRatio },
React.createElement(MediaOverlay, { media: backgroundImageUrl || backgroundImageNode || '', className: classes.overlay, hoverSkin: showOverlayHover ? 'dark' : undefined, hovered: showOverlayHover &&
(this.state.isHovered || this.state.isFocused), dataHook: DATA_HOOKS.HoverComponent },
showActions && !mobile && (React.createElement(MediaOverlay.Content, { visible: "hover" }, this._renderActions())),
settingsMenu && showActions && !mobile && (React.createElement(MediaOverlay.Content, { visible: "hover", placement: "top-end" }, this._renderSettingsMenu()))),
badge && this._renderBadge(),
React.createElement("div", { className: classes.dragHandleFloatingWrapper }, withFloatingDragHandle && this._renderDragHandle()))),
withFooter && this._renderFooter(),
withCustomFooter && (React.createElement("div", { "data-hook": DATA_HOOKS.customFooter }, footer)),
showActions &&
imagePlacement === 'top' &&
this._renderBottomActions()))));
}
}
CardGalleryItem.displayName = 'CardGalleryItem';
CardGalleryItem.contextType = WixDesignSystemContext;
CardGalleryItem.defaultProps = {
aspectRatio: 1.6,
size: 'medium',
imagePlacement: 'top',
showSuffixOnHover: false,
skin: 'standard',
skinVisibility: 'always',
};
export default CardGalleryItem;
//# sourceMappingURL=CardGalleryItem.js.map