@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
51 lines (50 loc) • 5.28 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box } from '../../../components/Flex';
import { Badge } from '../../Components/Badge';
import { RatingPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview';
import { WIZARD_TYPE_SELECTION_PREVIEW_FRAME_CLASS } from '../../Wizard/WizardTypeSelection';
const THUMBNAIL_FRAME_CLASS = WIZARD_TYPE_SELECTION_PREVIEW_FRAME_CLASS;
const THUMBNAIL_SVG_CLASS = 'twa:block twa:h-[22px] twa:w-full';
const DEFAULT_BAR = 'var(--ab-color-accent, #07c)';
const DEFAULT_TRACK = 'color-mix(in srgb, var(--ab-color-foreground) 30%, transparent)';
const DEFAULT_MARKER = 'var(--ab-color-foreground, #333)';
const flagEmoji = (countryCodeAlpha2) => {
const cc = countryCodeAlpha2.toUpperCase();
if (cc.length !== 2) {
return cc;
}
const regionalIndicatorBase = 0x1f1a5;
return String.fromCodePoint(regionalIndicatorBase + cc.charCodeAt(0), regionalIndicatorBase + cc.charCodeAt(1));
};
const BadgeThumbnail = () => (_jsx(Box, { className: `${THUMBNAIL_FRAME_CLASS} twa:justify-start`, children: _jsxs("div", { className: "ab-Badge__wrapper ab-Badge__wrapper--truncate", style: { gap: 4 }, children: [_jsx(Badge, { pillStyle: { BackColor: '#e8f5e9', ForeColor: '#2e7d32' }, shape: "Pill", density: "Compact", children: "Buy" }), _jsx(Badge, { pillStyle: { BackColor: '#ffebee', ForeColor: '#c62828' }, shape: "Pill", density: "Compact", children: "Sell" })] }) }));
const IconThumbnail = () => (_jsx(Box, { className: THUMBNAIL_FRAME_CLASS, style: { gap: 10 }, children: ['US', 'GB', 'FR'].map((code) => (_jsx("span", { className: "ab-IconStyle__glyph", style: {
fontSize: 18,
lineHeight: 1,
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
}, children: flagEmoji(code) }, code))) }));
const RatingThumbnail = () => (_jsx(Box, { className: THUMBNAIL_FRAME_CLASS, children: _jsx(RatingPreview, { rating: { Max: 5, AllowHalf: true }, value: 3.5 }) }));
const GradientThumbnail = () => (_jsx(Box, { className: `${THUMBNAIL_FRAME_CLASS} twa:gap-1 twa:px-1`, children: [
{ label: '42', background: '#63be7b' },
{ label: '68', background: '#ffeb84' },
{ label: '91', background: '#f8696b' },
].map((cell) => (_jsx(Box, { className: "twa:flex-1 twa:rounded-sm twa:px-1 twa:py-0.5 twa:text-center twa:text-2 twa:leading-tight", style: { background: cell.background, color: '#1a1a1a' }, children: cell.label }, cell.label))) }));
const PercentBarThumbnail = () => (_jsx(Box, { className: THUMBNAIL_FRAME_CLASS, children: _jsx(Box, { className: "twa:relative twa:h-[6px] twa:w-full twa:rounded-sm", style: { background: DEFAULT_TRACK }, children: _jsx(Box, { className: "twa:absolute twa:top-0 twa:h-full twa:rounded-sm", style: { left: '8%', width: '62%', background: DEFAULT_BAR } }) }) }));
const BulletThumbnail = () => (_jsx(Box, { className: THUMBNAIL_FRAME_CLASS, children: _jsxs("svg", { className: THUMBNAIL_SVG_CLASS, viewBox: "0 0 100 22", preserveAspectRatio: "none", "aria-hidden": true, children: [_jsx("rect", { x: "0", y: "2", width: "33", height: "18", fill: "#f8696b", opacity: "0.45" }), _jsx("rect", { x: "33", y: "2", width: "34", height: "18", fill: "#ffeb84", opacity: "0.45" }), _jsx("rect", { x: "67", y: "2", width: "33", height: "18", fill: "#63be7b", opacity: "0.45" }), _jsx("rect", { x: "4", y: "7", width: "52", height: "8", rx: "1", fill: DEFAULT_BAR }), _jsx("line", { x1: "78", y1: "3", x2: "78", y2: "19", stroke: DEFAULT_MARKER, strokeWidth: "2.5", vectorEffect: "non-scaling-stroke" })] }) }));
const RangeBarThumbnail = () => (_jsx(Box, { className: THUMBNAIL_FRAME_CLASS, children: _jsxs("svg", { className: THUMBNAIL_SVG_CLASS, viewBox: "0 0 100 22", preserveAspectRatio: "none", "aria-hidden": true, children: [_jsx("rect", { x: "0", y: "0", width: "100", height: "22", fill: "transparent" }), _jsx("rect", { x: "2", y: "8", width: "96", height: "6", rx: "1", fill: DEFAULT_TRACK }), _jsx("line", { x1: "38", y1: "4", x2: "38", y2: "18", stroke: DEFAULT_MARKER, strokeWidth: "2", vectorEffect: "non-scaling-stroke" }), _jsx("polygon", { points: "72,4 82,11 72,18", fill: DEFAULT_BAR })] }) }));
const SparklineThumbnail = () => (_jsx(Box, { className: THUMBNAIL_FRAME_CLASS, children: _jsxs("svg", { className: THUMBNAIL_SVG_CLASS, viewBox: "0 0 100 22", preserveAspectRatio: "none", "aria-hidden": true, children: [_jsx("polyline", { points: "0,16 12,12 24,14 36,8 48,10 60,4 72,7 84,3 100,6", fill: "none", stroke: DEFAULT_BAR, strokeWidth: "1.75", vectorEffect: "non-scaling-stroke" }), _jsx("polygon", { points: "0,22 0,16 12,12 24,14 36,8 48,10 60,4 72,7 84,3 100,6 100,22", fill: DEFAULT_BAR, opacity: "0.15" })] }) }));
const THUMBNAIL_BY_TYPE = {
badge: BadgeThumbnail,
icon: IconThumbnail,
rating: RatingThumbnail,
gradient: GradientThumbnail,
percent: PercentBarThumbnail,
bullet: BulletThumbnail,
rangeBar: RangeBarThumbnail,
sparkline: SparklineThumbnail,
};
export const StyledColumnTypeThumbnail = ({ type }) => {
const Thumbnail = THUMBNAIL_BY_TYPE[type];
return (_jsx(Box, { "aria-hidden": true, className: "twa:w-full", children: _jsx(Thumbnail, {}) }));
};