@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
66 lines (65 loc) • 4.37 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { OptionalColorPicker } from '../../../components/ColorPicker';
import FormLayout, { FormRow } from '../../../components/FormLayout';
import { Box, Flex } from '../../../components/Flex';
import { Toggle, ToggleGroup } from '../../../components/Toggle';
import { renderSummaryLabelValueTags } from '../../Wizard/SummaryColorTag';
const LABEL_COLUMN = { name: 'label', style: { textAlign: 'start' } };
const CHILD_COLUMN = { name: 'children' };
export const BadgePillStyleEditor = (props) => {
const pill = props.value ?? {};
const { disabled } = props;
const update = (patch) => {
const next = { ...pill, ...patch };
Object.keys(next).forEach((k) => {
const v = next[k];
if (v === undefined || v === null || v === '') {
delete next[k];
}
});
if (Object.keys(next).length === 0) {
props.onChange(undefined);
}
else {
props.onChange(next);
}
};
const disabledClass = disabled ? 'twa:opacity-50 twa:pointer-events-none' : '';
const form = (_jsxs(FormLayout, { columns: [LABEL_COLUMN, CHILD_COLUMN], sizes: ['7.5rem', '1fr'], gridColumnGap: "0.75rem", children: [_jsx(FormRow, { label: "Background", children: _jsx(OptionalColorPicker, { disabled: disabled, api: props.api, value: pill.BackColor, defaultColor: "#cccccc", onChange: (c) => update({ BackColor: c }) }) }), _jsx(FormRow, { label: "Text", children: _jsx(OptionalColorPicker, { disabled: disabled, api: props.api, value: pill.ForeColor, defaultColor: "#000000", onChange: (c) => update({ ForeColor: c }) }) }), _jsx(FormRow, { label: "Border", children: _jsx(OptionalColorPicker, { disabled: disabled, api: props.api, value: pill.BorderColor, defaultColor: "#000000", onChange: (c) => update({ BorderColor: c }) }) }), _jsx(FormRow, { label: "Font", children: _jsx(Box, { className: disabledClass, children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Toggle, { standalone: true, pressed: pill.FontStyle === 'Italic', onPressedChange: (pressed) => update({ FontStyle: pressed ? 'Italic' : undefined }), icon: "italic" }), _jsx(Toggle, { standalone: true, pressed: pill.FontWeight === 'Bold', onPressedChange: (pressed) => update({ FontWeight: pressed ? 'Bold' : undefined }), icon: "bold" })] }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: pill.TextDecoration === 'Underline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Underline' : undefined }), icon: "underline" }), _jsx(Toggle, { pressed: pill.TextDecoration === 'LineThrough', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'LineThrough' : undefined }), icon: "strikethrough" }), _jsx(Toggle, { pressed: pill.TextDecoration === 'Overline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Overline' : undefined }), icon: "overline" })] })] }) }) })] }));
if (props.embedded) {
return form;
}
return (_jsx(Box, { className: "twa:mt-2 twa:rounded-standard twa:border twa:border-border twa:overflow-hidden twa:shadow-sm", children: _jsx(Box, { className: "twa:p-3", children: form }) }));
};
export const getBadgePillStyleSummaryItems = (pill) => {
if (!pill) {
return [];
}
const items = [];
if (pill.BackColor) {
items.push({ label: 'Back Colour', value: pill.BackColor });
}
if (pill.ForeColor) {
items.push({ label: 'Fore Colour', value: pill.ForeColor });
}
if (pill.BorderColor) {
items.push({ label: 'Border Colour', value: pill.BorderColor });
}
if (pill.FontWeight === 'Bold') {
items.push({ label: 'Font Weight', value: 'Bold' });
}
if (pill.FontStyle === 'Italic') {
items.push({ label: 'Font Style', value: 'Italic' });
}
if (pill.TextDecoration && pill.TextDecoration !== 'None') {
items.push({ label: 'Text Decoration', value: pill.TextDecoration });
}
return items;
};
export const renderBadgePillStyleSummaryTags = (pill) => {
const items = getBadgePillStyleSummaryItems(pill);
if (!items.length) {
return null;
}
return renderSummaryLabelValueTags(items);
};