@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
111 lines (110 loc) • 8.61 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { CheckBox } from '../../../components/CheckBox';
import ErrorBox from '../../../components/ErrorBox';
import FormLayout, { FormRow } from '../../../components/FormLayout';
import { Tag } from '../../../components/Tag';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import { Box, Flex } from '../../../components/Flex';
import { NumberInput } from '../../../components/Input/NumberInput';
import { DEFAULT_GRADIENT_MAX_ALPHA, DEFAULT_GRADIENT_MIN_ALPHA, } from '../../../Utilities/Helpers/StyledColumns/GradientStyleHelper';
import { getCellFontStyleSummaryItems, StyledColumnFontStyleEditor, } from './StyledColumnSliceStyleEditors';
import { Card } from '../../../components/Card';
import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
const STYLE_FORM_SIZES = ['200px', '1fr'];
function formatGradientToolTipSummary(opts) {
return opts
.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value'))
.join(' + ');
}
const buildStyledColumnGradientStyleSummaryStrings = (gs, options) => {
const minA = gs.MinAlpha ?? DEFAULT_GRADIENT_MIN_ALPHA;
const maxA = gs.MaxAlpha ?? DEFAULT_GRADIENT_MAX_ALPHA;
const items = [`Alpha: ${minA} → ${maxA}`];
if (gs.AutoContrastText) {
items.push('Auto Contrast: On');
}
if (gs.ToolTipText?.length) {
items.push(`Tooltip: ${formatGradientToolTipSummary(gs.ToolTipText)}`);
}
else if (options.includeEmptyTooltip) {
items.push('Tooltip: No Tooltip');
}
getCellFontStyleSummaryItems(gs.Font).forEach(({ label, value }) => {
items.push(`${label}: ${value}`);
});
return items;
};
export const getStyledColumnGradientStyleViewValues = (data) => {
const gs = data.GradientStyle;
if (!gs) {
return [];
}
return buildStyledColumnGradientStyleSummaryStrings(gs, { includeEmptyTooltip: false });
};
export const renderStyledColumnGradientStyleSummary = (data) => {
const gs = data.GradientStyle;
if (!gs) {
return _jsx(Tag, { children: "No Styling Defined" });
}
const items = buildStyledColumnGradientStyleSummaryStrings(gs, { includeEmptyTooltip: true });
return renderSummaryStringTags(items);
};
export const StyledColumnWizardGradientSection = (props) => {
const { data, api } = useOnePageAdaptableWizardContext();
const gs = data.GradientStyle ?? {};
const disabled = !data.ColumnId;
const onFontChange = (next) => {
if (next) {
props.onChange({ ...data, GradientStyle: { ...gs, Font: next } });
}
else {
const { Font: _f, ...rest } = gs;
props.onChange({ ...data, GradientStyle: rest });
}
};
const patchGradient = React.useCallback((patch) => {
const next = { ...gs, ...patch };
props.onChange({ ...data, GradientStyle: next });
}, [data, gs, props]);
const onToolTipTextChanged = (option, checked) => {
const current = gs.ToolTipText ?? [];
const next = checked
? Array.from(new Set([...current, option]))
: current.filter((o) => o !== option);
if (next.length === 0) {
const { ToolTipText: _t, ...rest } = gs;
props.onChange({ ...data, GradientStyle: rest });
}
else {
patchGradient({ ToolTipText: next });
}
};
const minAlphaDisplay = gs.MinAlpha ?? DEFAULT_GRADIENT_MIN_ALPHA;
const maxAlphaDisplay = gs.MaxAlpha ?? DEFAULT_GRADIENT_MAX_ALPHA;
return (_jsxs(Box, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Transparency" }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[480px]", children: ["Used at low and high ends of range; defaults are ", DEFAULT_GRADIENT_MIN_ALPHA, " &", ' ', DEFAULT_GRADIENT_MAX_ALPHA, " (Min 0 fades out lowest values)"] })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsx(FormRow, { label: "Alpha range:", children: _jsxs(Flex, { alignItems: "center", className: "twa:ml-2 twa:flex-wrap twa:gap-3", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-1", children: [_jsx(Box, { className: "twa:text-sm", children: "Min" }), _jsx(NumberInput, { disabled: disabled, className: "twa:w-20", value: minAlphaDisplay, min: 0, max: 1, step: 0.05, onChange: (v) => {
if (v === DEFAULT_GRADIENT_MIN_ALPHA) {
const { MinAlpha: _m, ...rest } = gs;
props.onChange({ ...data, GradientStyle: rest });
}
else {
patchGradient({ MinAlpha: v });
}
} })] }), _jsxs(Flex, { alignItems: "center", className: "twa:gap-1", children: [_jsx(Box, { className: "twa:text-sm", children: "Max" }), _jsx(NumberInput, { disabled: disabled, className: "twa:w-20", value: maxAlphaDisplay, min: 0, max: 1, step: 0.05, onChange: (v) => {
if (v === DEFAULT_GRADIENT_MAX_ALPHA) {
const { MaxAlpha: _m, ...rest } = gs;
props.onChange({ ...data, GradientStyle: rest });
}
else {
patchGradient({ MaxAlpha: v });
}
} })] })] }) }) }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Auto Contrast" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[600px]", children: "Dynamically set cell fore colour so values stay readable (overrides Format Column properties)" })] }), _jsx(Card.Body, { children: _jsx(CheckBox, { disabled: disabled, checked: !!gs.AutoContrastText, onChange: (checked) => {
if (!checked) {
const { AutoContrastText: _a, ...rest } = gs;
props.onChange({ ...data, GradientStyle: rest });
}
else {
patchGradient({ AutoContrastText: true });
}
}, children: "Make text readable on tinted backgrounds" }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[600px]", children: "Set Tooltip properties" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsx(FormRow, { label: "Tooltip:", children: _jsxs(Box, { className: "twa:ml-2", children: [_jsx(CheckBox, { disabled: disabled, checked: gs.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: gs.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent along scale" })] }) }) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Font" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[480px]", children: "Optional font properties (takes precedence over Format Column)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: disabled, value: gs.Font, onChange: onFontChange }) })] }), !data.ColumnId && (_jsx(ErrorBox, { className: "twa:mt-2", children: "Select a column before changing Gradient style." }))] }));
};