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

@wix/design-system

import React, { forwardRef, useCallback, useImperativeHandle, useRef, } from 'react';
import { classes } from './Thumbnail.classes';
import { CheckboxChecked } from '@wix/wix-ui-icons-common/system';
import { Text } from '../Text';
import { withFocusable } from '../common/Focusable';
import { dataHooks } from './constants';
import { Box } from '../Box';
import { useIcons } from '../WixDesignSystemIconThemeProvider';
import { useDefaultProps } from '../WixDesignSystemDefaultPropsProvider';
const isString = (a) => typeof a === 'string';
/**
 * Component for showing thumbnails.
 *
 * It takes full space of parent component, works well together with `<Proportion />`
 * */
const Thumbnail = forwardRef((componentProps, ref) => {
    const props = useDefaultProps('Thumbnail', componentProps);
    const { dataHook, className, ariaLabel, border = true, children, title, description, image, size = 'medium', selected = false, disabled = false, hideSelectedIcon, backgroundImage, onClick, onMouseOver, width, height, contentAlignment = 'center', ellipsis = false, maxLines, textPosition = 'inside', noPadding = false, tooltipProps = {}, skin = 'primary', focusableOnFocus, focusableOnBlur, } = props;
    const icons = useIcons('Thumbnail', {
        CheckboxChecked,
    });
    const thumbnailRef = useRef(null);
    const hasChildren = !!children;
    const hasBackground = !!backgroundImage;
    const showBottomTitle = (hasChildren || hasBackground) && title;
    useImperativeHandle(ref, () => ({
        focus: () => {
            thumbnailRef.current?.focus();
        },
    }));
    const renderBackgroundLayout = () => {
        return (React.createElement("div", { className: classes.backgroundContainer() }, isString(backgroundImage) ? (React.createElement("div", { className: classes.backgroundImage(), "data-hook": dataHooks.thumbnailBackgroundImage, style: { backgroundImage: `url(${backgroundImage})` } })) : (backgroundImage)));
    };
    const renderBottomTitle = () => {
        return (React.createElement(Box, { align: "center" },
            React.createElement(Text, { className: classes.bottomTitle(), dataHook: dataHooks.thumbnailBottomTitle, size: size, tagName: "div", weight: "thin", ellipsis: true, children: title, tooltipProps: tooltipProps })));
    };
    const renderThumbnailImage = () => {
        return (React.createElement("div", { className: classes.imageContainer(), "data-hook": dataHooks.thumbnailImage }, isString(image) ? (React.createElement("img", { src: image, className: classes.image(), alt: "" })) : (image)));
    };
    const renderTitleAndDescription = () => {
        return (React.createElement("div", { className: classes.textContent() },
            title && (React.createElement(Text, { className: classes.title(), dataHook: dataHooks.thumbnailTitle, size: size, weight: "normal", children: title, skin: disabled ? 'disabled' : undefined, ellipsis: ellipsis, maxLines: maxLines, tooltipProps: tooltipProps })),
            description && (React.createElement(Text, { className: classes.description(), dataHook: dataHooks.thumbnailDescription, size: size, weight: "thin", secondary: true, children: description, skin: disabled ? 'disabled' : undefined, ellipsis: ellipsis, maxLines: maxLines, tooltipProps: tooltipProps }))));
    };
    const renderSelectedIcon = useCallback(() => (React.createElement("div", { className: classes.selectedIcon(), "data-hook": dataHooks.thumbnailSelectedIcon },
        React.createElement(icons.CheckboxChecked, { height: "7.8", width: "10" }))), [icons]);
    const getThumbnailContent = () => {
        /**
         * Ignores the rest of the properties and just renders children
         */
        if (hasChildren) {
            return React.createElement("div", { className: classes.customChild() }, children);
        }
        /**
         * @deprecated flow
         */
        if (hasBackground) {
            return renderBackgroundLayout();
        }
        return (React.createElement("div", { className: classes.contentContainer() },
            image && renderThumbnailImage(),
            textPosition === 'inside' && renderTitleAndDescription()));
    };
    const renderThumbnail = () => {
        return (React.createElement("div", { ref: thumbnailRef, style: { height }, className: classes.wrapper(), "data-selected": selected, "data-disabled": disabled, tabIndex: disabled ? undefined : 0, "data-hook": dataHooks.thumbnailWrapper, onFocus: focusableOnFocus, onBlur: focusableOnBlur },
            !hideSelectedIcon && selected && renderSelectedIcon(),
            getThumbnailContent()));
    };
    const onKeyDown = (event) => {
        if (onClick && ['Enter', ' '].includes(event.key)) {
            onClick(event);
        }
    };
    return (React.createElement("div", { style: { width }, className: classes.root({
            size,
            skin,
            textPosition,
            contentAlignment,
            selected,
            disabled,
            border,
            hasBackground,
            hasChildren,
            noPadding,
        }, className), "aria-label": ariaLabel, onClick: disabled ? undefined : onClick, onMouseOver: disabled ? undefined : onMouseOver, onKeyDown: disabled ? undefined : onKeyDown, "data-hook": dataHook },
        renderThumbnail(),
        textPosition === 'outside' && renderTitleAndDescription(),
        showBottomTitle ? renderBottomTitle() : null));
});
Thumbnail.displayName = 'Thumbnail';
const WrappedThumbnail = withFocusable(Thumbnail);
export { WrappedThumbnail as Thumbnail };
//# sourceMappingURL=Thumbnail.js.map