@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
150 lines (149 loc) • 9.41 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CheckBox } from '../../../../components/CheckBox';
import ErrorBox from '../../../../components/ErrorBox';
import FormLayout, { FormRow } from '../../../../components/FormLayout';
import { Tag } from '../../../../components/Tag';
import { formatBarStyleCellTextLayoutSummary, getActiveBarStyleCellTextTokens, hasBarStyleCellTextConfigured, patchBarStyleCellTextPlacement, resolveBarStyleCellTextLayout, toggleBarStyleCellTextToken, } from '../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
import { BarStyleCellTextLayoutEditor } from './Components/BarStyleCellTextLayoutEditor';
import { OptionalColorPicker } from '../../../../components/ColorPicker';
import { getGraySwatchColor } from '../../../UIHelper';
import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
import { Box, Flex } from '../../../../components/Flex';
import Radio, { RadioGroup } from '../../../../components/Radio';
import { getCellFontStyleSummaryItems, StyledColumnFontStyleEditor, } from '../StyledColumnSliceStyleEditors';
import { Card } from '../../../../components/Card';
import { renderSummaryStringTags } from '../../../Wizard/SummaryColorTag';
export { renderStyledColumnRangesSummary, StyledColumnWizardRangesSection, } from './StyledColumnWizardRangesSection';
const formatOriginLabel = (origin) => {
if (origin == undefined) {
return 'Auto';
}
if (typeof origin === 'number') {
return `Custom (${origin})`;
}
return origin;
};
const formatPercentBarCellTextSummary = (cellText) => cellText?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ') ?? '';
const formatPercentBarToolTipSummary = (toolTipText) => toolTipText?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ') ?? '';
const buildStyledColumnPercentBarStyleSummaryStrings = (pb, options) => {
const items = [`Origin: ${formatOriginLabel(pb.Origin)}`];
if (hasBarStyleCellTextConfigured(pb.CellTextProperties)) {
const tokens = getActiveBarStyleCellTextTokens(pb.CellTextProperties);
items.push(`Cell Text: ${formatPercentBarCellTextSummary(tokens)}`);
const layoutSummary = formatBarStyleCellTextLayoutSummary(resolveBarStyleCellTextLayout(pb.CellTextProperties));
if (layoutSummary) {
items.push(`Placement: ${layoutSummary}`);
}
}
else if (options.includeEmptyCellText) {
items.push('Cell Text: None');
}
if (pb.ToolTipText?.length) {
items.push(`Tooltip: ${formatPercentBarToolTipSummary(pb.ToolTipText)}`);
}
else if (options.includeEmptyTooltip) {
items.push('Tooltip: No Tooltip');
}
if (pb.BackColor) {
items.push(`Back Colour: ${pb.BackColor}`);
}
getCellFontStyleSummaryItems(pb.Font).forEach(({ label, value }) => {
items.push(`${label}: ${value}`);
});
return items;
};
export const getStyledColumnPercentBarStyleViewValues = (data) => {
const pb = data.PercentBarStyle;
if (!pb) {
return [];
}
return buildStyledColumnPercentBarStyleSummaryStrings(pb, {
includeEmptyCellText: false,
includeEmptyTooltip: false,
});
};
export const renderStyledColumnStyleSummary = (data, _api) => {
const pb = data.PercentBarStyle;
if (!pb) {
return _jsx(Tag, { children: "No Styling Defined" });
}
const items = buildStyledColumnPercentBarStyleSummaryStrings(pb, {
includeEmptyCellText: true,
includeEmptyTooltip: true,
});
return renderSummaryStringTags(items);
};
export const renderFormatColumnStyleWizardSummary = (data) => {
return renderStyledColumnStyleSummary(data);
};
const STYLE_FORM_SIZES = ['200px', '1fr'];
const ORIGIN_CHOICES = [
{
value: 'Auto',
label: 'Auto',
hint: 'Anchors to left, but centres at 0 when using negatives',
},
{
value: 'Zero',
label: 'Zero',
hint: 'Centres at 0; positives extend right, negatives extend left',
},
{
value: 'Min',
label: 'Min',
hint: "Always anchored at the column's minimum (left edge)",
},
];
export const StyledColumnWizardStyleSection = (props) => {
const { data, api } = useOnePageAdaptableWizardContext();
const disabled = !data.ColumnId;
if (!data.PercentBarStyle) {
return (_jsx(Box, { children: !data.ColumnId && (_jsx(ErrorBox, { className: "twa:mt-2", children: "You need to select a column before styling." })) }));
}
const pb = data.PercentBarStyle;
const cellTextProperties = pb.CellTextProperties;
const update = (patch) => {
props.onChange({
...data,
PercentBarStyle: { ...pb, ...patch },
});
};
const onCellTextLayoutToggle = (token, show) => {
update(toggleBarStyleCellTextToken(cellTextProperties, token, show));
};
const onCellTextPlacementChange = (token, patch) => {
update({
CellTextProperties: patchBarStyleCellTextPlacement(cellTextProperties, token, patch),
});
};
const onToolTipTextChanged = (token, checked) => {
const current = pb.ToolTipText ?? [];
const next = checked
? Array.from(new Set([...current, token]))
: current.filter((t) => t !== token);
update({ ToolTipText: next });
};
const handleOriginChange = (origin) => update({ Origin: origin });
const onBackColorChange = (color) => {
if (color) {
update({ BackColor: color });
return;
}
const { BackColor: _removed, ...rest } = pb;
props.onChange({ ...data, PercentBarStyle: rest });
};
const cellTextDisabled = !hasBarStyleCellTextConfigured(cellTextProperties) || disabled;
const currentOrigin = typeof pb.Origin === 'number'
? 'Min'
: pb.Origin ?? 'Auto';
return (_jsxs(Box, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Bar Position" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set the position of the cell text relative to the bar" })] }), _jsx(Card.Body, { children: _jsx(RadioGroup, { orientation: "vertical", name: "ab-percentbar-origin", value: currentOrigin, onRadioChange: handleOriginChange, children: ORIGIN_CHOICES.map((choice) => (_jsx(Radio, { value: choice.value, disabled: disabled, children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:min-w-[60px]", children: choice.label }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: choice.hint })] }) }, choice.value))) }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Text" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[540px]", children: "Pick which values to display and where each one sits around the bar (font properties take precedence over Format Column)" })] }), _jsxs(Card.Body, { children: [_jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsx(BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: cellTextProperties, onToggle: onCellTextLayoutToggle, onPlacementChange: onCellTextPlacementChange }) }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: cellTextDisabled, value: pb.Font, onChange: (next) => {
if (next) {
update({ Font: next });
}
else {
const cleaned = { ...pb };
delete cleaned.Font;
props.onChange({ ...data, PercentBarStyle: cleaned });
}
} }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Style" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure Tooltip and Background Colour" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: pb.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent Value" })] }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: pb.BackColor ?? undefined, defaultColor: getGraySwatchColor(), onChange: onBackColorChange }) })] }) })] })] }));
};