@wix/design-system
Version:
@wix/design-system
170 lines • 9.63 kB
JavaScript
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
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';
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, { size: textSize, secondary: true, ellipsis: true, dataHook: DATA_HOOKS.Subtitle }, subtitle)),
suffix && (React.createElement("div", { className: classes.footerSuffix, "data-hook": DATA_HOOKS.suffix }, suffix)),
imagePlacement === 'side' &&
settingsMenu &&
this._renderSettingsMenu())));
}
_renderActions() {
const { primaryActionProps, secondaryActionProps, draggable } = this.props;
const { label, disabled, disabledMessage } = primaryActionProps;
const primaryAction = (React.createElement(Button, { dataHook: DATA_HOOKS.PrimaryAction, disabled: disabled, skin: "light", onPointerDown: draggable ? e => e.stopPropagation() : undefined }, label));
return (React.createElement("div", { className: classes.primaryAction, "data-hook": DATA_HOOKS.HoverContent },
disabled && disabledMessage ? (React.createElement(Tooltip, { disabled: !disabled, content: disabledMessage }, primaryAction)) : (primaryAction),
secondaryActionProps && (React.createElement("div", { className: classes.secondaryAction },
React.createElement(TextButton, { skin: "light", onClick: (event) => {
if (secondaryActionProps.onClick) {
secondaryActionProps.onClick(event);
}
event.stopPropagation();
}, dataHook: DATA_HOOKS.SecondaryAction, onPointerDown: draggable
? (e) => e.stopPropagation()
: undefined }, secondaryActionProps.label)))));
}
_renderSettingsMenu() {
return (React.createElement("div", { className: classes.settingsMenu, "data-hook": DATA_HOOKS.SettingsMenu }, 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 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 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,
}), "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: withHover ? 'dark' : undefined, hovered: this.state.isHovered || this.state.isFocused, dataHook: DATA_HOOKS.HoverComponent },
showActions && (React.createElement(MediaOverlay.Content, { visible: "hover" }, this._renderActions())),
settingsMenu && showActions && (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))))));
}
}
CardGalleryItem.displayName = 'CardGalleryItem';
CardGalleryItem.propTypes = {
badge: PropTypes.node,
size: PropTypes.oneOf(['small', 'medium']),
title: PropTypes.node,
subtitle: PropTypes.node,
suffix: PropTypes.node,
draggable: PropTypes.bool,
droppable: PropTypes.bool,
dragHandleProps: PropTypes.object,
dragging: PropTypes.bool,
dragDisabled: PropTypes.bool,
tabIndex: PropTypes.number,
backgroundImageUrl: PropTypes.string,
backgroundImageNode: PropTypes.node,
primaryActionProps: PropTypes.shape({
label: PropTypes.node,
onClick: PropTypes.func,
disabled: PropTypes.bool,
disabledMessage: PropTypes.string,
}),
secondaryActionProps: PropTypes.shape({
label: PropTypes.node,
onClick: PropTypes.func,
}),
settingsMenu: PropTypes.node,
dataHook: PropTypes.string,
aspectRatio: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
imagePlacement: PropTypes.oneOf(['top', 'side']),
showSuffixOnHover: PropTypes.bool,
skin: PropTypes.oneOf(['standard', 'outlined']),
skinVisibility: PropTypes.oneOf(['always', 'hover']),
footer: PropTypes.node,
};
CardGalleryItem.defaultProps = {
aspectRatio: 1.6,
size: 'medium',
imagePlacement: 'top',
showSuffixOnHover: false,
skin: 'standard',
skinVisibility: 'always',
};
export default CardGalleryItem;
//# sourceMappingURL=CardGalleryItem.js.map