@wix/design-system
Version:
@wix/design-system
91 lines • 5.6 kB
JavaScript
import React, { forwardRef, useCallback, useImperativeHandle, useRef, } from 'react';
import { st, classes } from './Thumbnail.st.css.js';
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';
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((props, ref) => {
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 isString(backgroundImage) ? (React.createElement("div", { className: st(classes.backgroundImage, { disabled }), "data-hook": dataHooks.thumbnailBackgroundImage, style: { backgroundImage: `url(${backgroundImage})` } })) : (backgroundImage);
};
const renderBottomTitle = () => {
return (React.createElement(Box, { align: "center" },
React.createElement(Text, { className: st(classes.bottomTitle, { selected, disabled }), dataHook: dataHooks.thumbnailBottomTitle, size: size, tagName: "div", weight: "thin", ellipsis: true, children: title, tooltipProps: tooltipProps })));
};
const renderThumbnailImage = () => {
return (React.createElement("div", { className: st(classes.imageContainer, { textPosition }), "data-hook": dataHooks.thumbnailImage }, isString(image) ? (React.createElement("img", { src: image, className: st(classes.image, { textPosition }), alt: "" })) : (image)));
};
const renderTitleAndDescription = () => {
return (React.createElement("div", { className: st(classes.thumbnailTextContent, { textPosition, size }) },
title && (React.createElement(Text, { className: st(classes.title, { size, textPosition }), 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: st(classes.customChild, { disabled }) }, children));
}
/**
* @deprecated flow
*/
if (hasBackground) {
return renderBackgroundLayout();
}
return (React.createElement("div", { className: st(classes.contentContainer, { textPosition }) },
image && renderThumbnailImage(),
textPosition === 'inside' && renderTitleAndDescription()));
};
const renderThumbnail = () => {
return (React.createElement("div", { ref: thumbnailRef, style: { height }, className: st(classes.thumbnail, {
selected,
disabled,
size,
hasBackground,
hasChildren,
textPosition,
contentAlignment,
noPadding,
border,
skin,
}), "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: st(classes.root, { disabled, border, selected, textPosition, skin }, 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';
export default withFocusable(Thumbnail);
//# sourceMappingURL=Thumbnail.js.map