@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
59 lines (58 loc) • 2.99 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { DEFAULT_INTEGER_DISPLAY_VALUE, DEFAULT_STRING_DISPLAY_VALUE, } from '../../../../../Utilities/Constants/GeneralConstants';
import { convertAdaptableStyleToCSS } from '../../../../../Utilities/Helpers/StyleHelper';
import { useAdaptable } from '../../../../AdaptableContext';
import { Badge } from '../../../../Components/Badge';
import { Box } from '../../../../../components/Flex';
import { Tag } from '../../../../../components/Tag';
const OVERFLOW_CLASS = {
Truncate: 'ab-Badge__wrapper--truncate',
Wrap: 'ab-Badge__wrapper--wrap',
Scroll: 'ab-Badge__wrapper--scroll',
};
const PREVIEW_CELL_CLASS = 'ab-BadgePreviewCell twa:bg-background twa:text-foreground 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 resolveBadgeRowJustify = (alignment) => {
switch (alignment) {
case 'Center':
return 'center';
case 'Right':
return 'flex-end';
case 'Left':
return 'flex-start';
default:
return null;
}
};
export const StyledColumnBadgePreview = ({ data }) => {
const adaptable = useAdaptable();
const badgeStyle = data.BadgeStyle;
if (!badgeStyle || !badgeStyle.Badges || badgeStyle.Badges.length === 0) {
return _jsx(Tag, { children: "No Badges Defined" });
}
const overflow = badgeStyle.OverflowMode ?? 'Truncate';
const wrapperClassName = `ab-Badge__wrapper ${OVERFLOW_CLASS[overflow]}`;
const spacing = typeof badgeStyle.Spacing === 'number' ? badgeStyle.Spacing : null;
const rowJustify = resolveBadgeRowJustify(badgeStyle.Font?.Alignment);
const cellStyle = badgeStyle.Cell ? convertAdaptableStyleToCSS(badgeStyle.Cell) : undefined;
const dataType = adaptable.api.columnApi.getColumnDataTypeForColumnId(data.ColumnId);
const wrapperStyle = {
...(spacing != null
? { ['--ab-cmp-badge__spacing']: `${spacing}px` }
: {}),
...(rowJustify
? {
justifyContent: rowJustify,
width: '100%',
}
: {}),
};
return (_jsx(Box, { className: PREVIEW_CELL_CLASS, style: cellStyle, children: _jsx("div", { className: wrapperClassName, style: wrapperStyle, children: badgeStyle.Badges.map((badge, index) => {
const iconProps = badge.IconProperties;
const badgeValue = iconProps?.IconOnly
? ''
: dataType === 'number'
? DEFAULT_INTEGER_DISPLAY_VALUE
: DEFAULT_STRING_DISPLAY_VALUE;
return (_jsx(Badge, { icon: iconProps?.Icon, pillStyle: badge.PillStyle, iconPosition: iconProps?.Position, shape: badge.Shape, density: badgeStyle.Density ?? 'Normal', iconGap: iconProps?.Gap, children: badgeValue }, index));
}) }) }));
};