@wix/design-system/dist/esm/CardGalleryItem/CardGalleryItem.js

@wix/design-system

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 } from './CardGalleryItem.classes';
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: 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 &&
                    imagePlacement === 'side' &&
                    this._renderSettingsMenu(),
                settingsMenu && imagePlacement !== 'side' && (React.createElement("div", { className: classes.settingsMenu(), "data-hook": DATA_HOOKS.footerSettingsMenu },
                    React.createElement("div", { "data-hook": DATA_HOOKS.SettingsMenu }, settingsMenu))))));
    }
    _renderPrimaryAction(skin, dataHook, fullWidth, className) {
        const { primaryActionProps, draggable } = this.props;
        const { label, disabled, disabledMessage } = primaryActionProps;
        const primaryAction = (React.createElement(Button, { dataHook: dataHook, disabled: disabled, skin: skin, fullWidth: fullWidth, className: className, onPointerDown: draggable ? e => e.stopPropagation() : undefined }, label));
        return disabled && disabledMessage ? (React.createElement(Tooltip, { disabled: !disabled, content: disabledMessage }, primaryAction)) : (primaryAction);
    }
    _renderSecondaryAction(skin, dataHook, className) {
        const { secondaryActionProps, draggable } = this.props;
        if (!secondaryActionProps) {
            return null;
        }
        return (React.createElement(TextButton, { skin: skin, className: className, 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, undefined, classes.actionButton()),
            secondaryActionProps && (React.createElement("div", { className: classes.secondaryAction() }, this._renderSecondaryAction('light', DATA_HOOKS.SecondaryAction, classes.actionTextButton())))));
    }
    _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: 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 },
            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: classes.cardContainer({
                        skin,
                        skinVisibility,
                        isInteractive,
                        showShadow,
                    }) },
                    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()))),
                        badge && this._renderBadge(),
                        React.createElement("div", { className: classes.dragHandleFloatingWrapper() }, withFloatingDragHandle && this._renderDragHandle()))),
                    withFooter && this._renderFooter(),
                    settingsMenu &&
                        !withFooter &&
                        imagePlacement === 'top' &&
                        this._renderSettingsMenu(),
                    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 { CardGalleryItem };
//# sourceMappingURL=CardGalleryItem.js.map