@brizy/media-gallery
Version:
75 lines (74 loc) • 2.5 kB
JavaScript
import React, { useCallback, useMemo } from "react";
import { Card } from "@brizy/ui/lib/Card";
import { ClickOutside } from "@brizy/ui/lib/ClickOutside";
import { ImageWithCaption } from "@brizy/ui/lib/ImageWithCaption";
import { Wrapper } from "./Wrapper";
import { getSrcByType } from "./utils";
import { TypographyParagraph } from "@brizy/ui/lib/Typography/Paragraph";
import { Align } from "@brizy/ui/lib/Align";
var exceptions = [
".brz-ui-multiupload__virtualized-list-item",
".brz-ui-masonry-item",
".brz-ui-layout-sider",
".brz-ui-button",
".brz-ui-select",
".brz-ui-navlist"
];
var cardCaptionSize = {
custom: [
0,
12
]
};
export var Item = function(param) {
var id = param.id, name = param.name, url = param.url, type = param.type, isSelected = param.isSelected, isMultipleSelected = param.isMultipleSelected, isBulkSelected = param.isBulkSelected, onSelectItem = param.onSelectItem;
var handleSelectItem = useCallback(function() {
onSelectItem(id);
}, [
onSelectItem,
id
]);
var handleUnSelectItem = useCallback(function() {
isSelected && onSelectItem(id);
}, [
onSelectItem,
id,
isSelected
]);
var caption = useMemo(function() {
return !isMultipleSelected && isSelected ? {
alignY: "bottom",
width: "100%",
content: /*#__PURE__*/ React.createElement(Card, {
size: cardCaptionSize,
borderStyle: "none",
color: "blue",
width: "100%",
height: "38px"
}, /*#__PURE__*/ React.createElement(Align, {
alignY: "center",
align: "center"
}, /*#__PURE__*/ React.createElement(TypographyParagraph, {
align: "center",
strong: true,
color: "black",
ellipsis: true
}, name)))
} : undefined;
}, [
isMultipleSelected,
isSelected,
name
]);
return /*#__PURE__*/ React.createElement(ClickOutside, {
exceptions: exceptions,
onClickOutside: handleUnSelectItem
}, /*#__PURE__*/ React.createElement(Wrapper, {
onSelectItem: handleSelectItem,
isBulkSelected: isBulkSelected,
isSelected: isSelected
}, /*#__PURE__*/ React.createElement(ImageWithCaption, {
src: getSrcByType(type, url),
caption: caption
})));
};