@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
58 lines (57 loc) • 3.58 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { Box } from '../../../../../components/Flex';
import { Tag } from '../../../../../components/Tag';
import { convertAdaptableStyleToCSS, hasCellBoxStyle, } from '../../../../../Utilities/Helpers/StyleHelper';
export const DEFAULT_RATING_MAX = 5;
export const DEFAULT_RATING_SIZE = 14;
export const DEFAULT_RATING_GAP = 2;
export const DEFAULT_RATING_ICON = 'Star';
const DEFAULT_FILLED_COLOR = 'var(--ab-color-warn, #f5a623)';
const DEFAULT_EMPTY_COLOR = 'color-mix(in srgb, currentColor 22%, transparent)';
const PREVIEW_CELL_CLASS = 'ab-RatingPreviewCell 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 ICON_PATHS = {
Star: 'M12 2 L14.9 8.6 L22 9.3 L16.7 14.1 L18.2 21 L12 17.4 L5.8 21 L7.3 14.1 L2 9.3 L9.1 8.6 Z',
Heart: 'M12 21 C 12 21 3 14.5 3 8.5 C 3 5.5 5.5 3 8.5 3 C 10.3 3 11.7 4 12 5.2 C 12.3 4 13.7 3 15.5 3 C 18.5 3 21 5.5 21 8.5 C 21 14.5 12 21 12 21 Z',
Circle: 'M12 4 a8 8 0 1 0 0.0001 0 Z',
Thumb: 'M2 11 h4 v10 h-4 z M7 11 l4 -8 c.5 -1 2 -1 2 0 l-1 5 h6 c1 0 2 1 1.7 2 l-2 8 c-.3 1 -1 1.6 -2 1.6 H7 z',
};
const clamp = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
export function getRatingCellChromeCss(cell) {
if (!cell || !hasCellBoxStyle(cell)) {
return {};
}
return convertAdaptableStyleToCSS(cell);
}
export const RatingPreview = ({ rating, value, }) => {
const instanceId = React.useId();
const max = rating.Max ?? DEFAULT_RATING_MAX;
const size = rating.Size ?? DEFAULT_RATING_SIZE;
const gap = rating.Gap ?? DEFAULT_RATING_GAP;
const icon = rating.Icon ?? DEFAULT_RATING_ICON;
const filledColor = rating.FilledColor ?? DEFAULT_FILLED_COLOR;
const emptyColor = rating.EmptyColor ?? DEFAULT_EMPTY_COLOR;
const allowHalf = rating.AllowHalf ?? true;
const previewValue = value ?? Math.max(1, Math.min(max, max * 0.7));
const effective = allowHalf ? previewValue : Math.round(previewValue);
const displayValue = Math.round(previewValue * 10) / 10;
const d = ICON_PATHS[icon];
return (_jsxs("span", { style: {
display: 'inline-flex',
alignItems: 'center',
gap: `${gap}px`,
lineHeight: 1,
}, "aria-hidden": "true", children: [Array.from({ length: max }).map((_, i) => {
const fill = clamp(effective - i, 0, 1);
const clipId = `ab-rating-preview-clip-${instanceId}-${i}`;
return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", children: [_jsx("path", { d: d, fill: emptyColor }), fill > 0 && (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx("rect", { x: 0, y: 0, width: 24 * fill, height: 24 }) }) }), _jsx("path", { d: d, fill: filledColor, clipPath: `url(#${clipId})` })] }))] }, i));
}), rating.ShowValue && (_jsx("span", { style: { marginLeft: 6, fontVariantNumeric: 'tabular-nums' }, children: displayValue }))] }));
};
export const StyledColumnRatingPreview = ({ data }) => {
const rating = data.RatingStyle;
if (!rating) {
return _jsx(Tag, { children: "No Rating Style" });
}
const previewCellChrome = getRatingCellChromeCss(rating.Cell);
return (_jsx(Box, { className: PREVIEW_CELL_CLASS, style: previewCellChrome, children: _jsx(RatingPreview, { rating: rating }) }));
};