@brizy/media-gallery
Version:
56 lines (55 loc) • 1.88 kB
JavaScript
import React, { useCallback, useMemo, useRef } from "react";
import { TypographyParagraph } from "@brizy/ui/lib/Typography/Paragraph";
import { Icon } from "@brizy/ui/lib/Icon";
import { LayoutSection } from "@brizy/ui/lib/Layout/Section";
import { Layout } from "@brizy/ui/lib/Layout/Layout";
var typographyParagraphEllipsis = {
rows: 1
};
var gutter = [
5,
0
];
export var DetailItem = function(param) {
var title = param.title, isBlue = param.isBlue, icon = param.icon, children = param.children, onIconClick = param.onIconClick;
var ref = useRef(null);
var color = useMemo(function() {
return isBlue ? "blue" : "white";
}, [
isBlue
]);
var _children = useMemo(function() {
return /*#__PURE__*/ React.createElement(TypographyParagraph, {
size: "small",
strong: true,
color: color,
ellipsis: typographyParagraphEllipsis
}, children);
}, [
children,
color
]);
var handleClick = useCallback(function() {
ref.current && (onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick(ref.current));
}, [
onIconClick
]);
return /*#__PURE__*/ React.createElement(LayoutSection, null, /*#__PURE__*/ React.createElement(TypographyParagraph, {
size: "small",
strong: true
}, title), icon ? /*#__PURE__*/ React.createElement(Layout, {
gutter: gutter,
alignY: "top"
}, /*#__PURE__*/ React.createElement(LayoutSection, {
span: 22
}, _children), /*#__PURE__*/ React.createElement(LayoutSection, {
span: 2
}, /*#__PURE__*/ React.createElement("div", {
ref: ref
}, /*#__PURE__*/ React.createElement(Icon, {
source: icon,
color: "gray-mid",
onClick: handleClick,
hoverColor: "blue"
})))) : _children);
};