@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
90 lines (89 loc) • 4.26 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { isAdaptableCustomIcon, isAdaptableElementIcon, isAdaptableSystemIcon, } from '../../../../../components/Icon';
import { resolveEffectiveIconStyleMappings } from '../../../../../agGrid/cellRenderers/IconRenderer';
import { AdaptableIconComponent } from '../../../../Components/AdaptableIconComponent';
import { Box } from '../../../../../components/Flex';
import { Tag } from '../../../../../components/Tag';
import { convertAdaptableStyleToCSS, hasCellBoxStyle, } from '../../../../../Utilities/Helpers/StyleHelper';
export const DEFAULT_ICON_STYLE_SIZE = 18;
export const DEFAULT_ICON_STYLE_GAP = 4;
const PREVIEW_CELL_CLASS = 'ab-IconPreviewCell twa:inline-flex twa:items-center twa:min-w-[140px] twa:min-h-[32px] twa:px-2 twa:py-1 twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]';
const isInlineGlyph = (spec) => typeof spec === 'string';
const isAdaptableIconSpec = (spec) => !!spec &&
(isAdaptableSystemIcon(spec) ||
isAdaptableCustomIcon(spec) ||
isAdaptableElementIcon(spec));
function getIconCellChromeCss(cell) {
if (!cell || !hasCellBoxStyle(cell)) {
return {};
}
return convertAdaptableStyleToCSS(cell);
}
const renderIconSpecForPreview = (spec, size) => {
if (isInlineGlyph(spec)) {
return (_jsx("span", { className: "ab-IconStyle__glyph", style: {
fontSize: size,
lineHeight: 1,
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
}, children: spec }));
}
if (isAdaptableIconSpec(spec)) {
return _jsx(AdaptableIconComponent, { icon: spec });
}
return null;
};
const buildPreviewText = (mapping, iconStyle) => {
const cellTextTokens = iconStyle.CellTextProperties?.CellText ?? [];
const formatted = String(mapping.Key);
const textParts = [];
if (cellTextTokens.includes('CellValue') && formatted) {
textParts.push(formatted);
}
if (cellTextTokens.includes('IconDescription') && mapping.Description) {
textParts.push(mapping.Description);
}
return textParts.length > 0 ? textParts.join(' · ') : undefined;
};
const IconCellPreviewTree = ({ iconStyle, mapping }) => {
const size = iconStyle.Size ?? DEFAULT_ICON_STYLE_SIZE;
const gap = iconStyle.Gap ?? DEFAULT_ICON_STYLE_GAP;
const textPosition = iconStyle.CellTextProperties?.CellTextPosition ?? 'After';
const text = buildPreviewText(mapping, iconStyle);
const fontStyle = iconStyle.Font ? convertAdaptableStyleToCSS(iconStyle.Font) : undefined;
const iconNode = renderIconSpecForPreview(mapping.Icon, size);
const textNode = text ? (_jsx("span", { className: "ab-IconStyle__text", style: { lineHeight: 1.2, ...fontStyle }, children: text })) : null;
if (!iconNode && !textNode) {
return null;
}
if (!textNode) {
return _jsx(_Fragment, { children: iconNode });
}
if (!iconNode) {
return _jsx(_Fragment, { children: textNode });
}
const isStacked = textPosition === 'Above' || textPosition === 'Below';
const children = textPosition === 'Before' || textPosition === 'Above'
? [textNode, iconNode]
: [iconNode, textNode];
return (_jsx("span", { className: "ab-IconStyle__wrapper", style: {
display: 'inline-flex',
flexDirection: isStacked ? 'column' : 'row',
alignItems: 'center',
gap,
lineHeight: 1,
}, children: children }));
};
export const StyledColumnIconPreview = ({ data }) => {
const iconStyle = data.IconStyle;
if (!iconStyle) {
return _jsx(Tag, { children: "No Icon Style" });
}
const effectiveMappings = resolveEffectiveIconStyleMappings(iconStyle);
if (effectiveMappings.length === 0) {
return _jsx(Tag, { children: "Define mappings to preview" });
}
const previewCellChrome = getIconCellChromeCss(iconStyle.Cell);
return (_jsx(Box, { className: PREVIEW_CELL_CLASS, style: previewCellChrome, children: _jsx(IconCellPreviewTree, { iconStyle: iconStyle, mapping: effectiveMappings[0] }) }));
};