@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
126 lines (125 loc) • 7.69 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { OptionalColorPicker } from '../../../components/ColorPicker';
import FormLayout, { FormRow } from '../../../components/FormLayout';
import { Box, Flex } from '../../../components/Flex';
import { NumberInput } from '../../../components/Input/NumberInput';
import { SingleSelect } from '../../../components/NewSelect';
import { renderSummaryLabelValueTags } from '../../Wizard/SummaryColorTag';
import { Toggle, ToggleGroup } from '../../../components/Toggle';
const FORM_SIZES = ['200px', '1fr'];
const FONT_SIZE_ITEMS = [
{ value: '', label: 'Default' },
{ value: 'XSmall', label: 'XSmall' },
{ value: 'Small', label: 'Small' },
{ value: 'Medium', label: 'Medium' },
{ value: 'Large', label: 'Large' },
{ value: 'XLarge', label: 'XLarge' },
];
const disabledClassName = (disabled) => disabled ? 'twa:opacity-50 twa:pointer-events-none' : '';
export const StyledColumnFontStyleEditor = (props) => {
const font = props.value ?? {};
const { disabled, hideAlignment } = props;
const disabledClass = disabledClassName(disabled);
const update = (patch) => {
const next = { ...font, ...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 onForeColorChange = (color) => {
update({ ForeColor: color });
};
const onAlignmentChange = (alignment) => {
update({ Alignment: alignment });
};
return (_jsx(Box, { children: _jsxs(FormLayout, { className: "twa:ml-2", sizes: [...FORM_SIZES], children: [_jsx(FormRow, { label: "Text Colour:", children: _jsx(OptionalColorPicker, { className: "twa:ml-2", disabled: disabled, api: props.api, value: font.ForeColor, defaultColor: "#000000", onChange: onForeColorChange }) }), _jsx(FormRow, { label: "Font:", children: _jsx(Box, { className: disabledClass, children: _jsxs(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2 twa:flex-wrap", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Toggle, { standalone: true, pressed: font.FontStyle === 'Italic', onPressedChange: (pressed) => update({ FontStyle: pressed ? 'Italic' : undefined }), icon: "italic" }), _jsx(Toggle, { standalone: true, pressed: font.FontWeight === 'Bold', onPressedChange: (pressed) => update({ FontWeight: pressed ? 'Bold' : undefined }), icon: "bold" })] }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: font.TextDecoration === 'Underline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Underline' : undefined }), icon: "underline" }), _jsx(Toggle, { pressed: font.TextDecoration === 'LineThrough', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'LineThrough' : undefined }), icon: "strikethrough" }), _jsx(Toggle, { pressed: font.TextDecoration === 'Overline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Overline' : undefined }), icon: "overline" })] }), _jsx(Box, { className: "twa:w-32", children: _jsx(SingleSelect, { placeholder: "Default size", items: FONT_SIZE_ITEMS, value: font.FontSize ?? '', onValueChange: (value) => update({
FontSize: (value || undefined),
}) }) })] }) }) }), !hideAlignment && (_jsx(FormRow, { label: "Alignment:", children: _jsx(Box, { className: disabledClass, children: _jsx(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "align-left", pressed: font.Alignment === 'Left', onPressedChange: (pressed) => onAlignmentChange(pressed ? 'Left' : undefined) }), _jsx(Toggle, { icon: "align-center", pressed: font.Alignment === 'Center', onPressedChange: (pressed) => onAlignmentChange(pressed ? 'Center' : undefined) }), _jsx(Toggle, { icon: "align-right", pressed: font.Alignment === 'Right', onPressedChange: (pressed) => onAlignmentChange(pressed ? 'Right' : undefined) })] }) }) }) }))] }) }));
};
export const StyledColumnCellStyleEditor = (props) => {
const cell = props.value ?? {};
const cellRef = React.useRef(cell);
cellRef.current = cell;
const { disabled } = props;
const update = (patch) => {
const next = { ...cellRef.current, ...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);
}
};
return (_jsx(Box, { children: _jsxs(FormLayout, { className: "twa:ml-2", sizes: [...FORM_SIZES], children: [_jsx(FormRow, { label: "Background:", children: _jsx(OptionalColorPicker, { className: "twa:ml-2", disabled: disabled, api: props.api, value: cell.BackColor, defaultColor: "#ffffff", onChange: (c) => update({ BackColor: c }) }) }), _jsx(FormRow, { label: "Border colour:", children: _jsx(OptionalColorPicker, { className: "twa:ml-2", disabled: disabled, api: props.api, value: cell.BorderColor, defaultColor: "#000000", onChange: (c) => update({ BorderColor: c }) }) }), _jsx(FormRow, { label: "Border radius:", children: _jsxs(Flex, { alignItems: "center", className: "twa:ml-2 twa:gap-2", children: [_jsx(NumberInput, { disabled: disabled, className: "twa:w-20", value: cell.BorderRadius, min: 0, max: 64, step: 1, onChange: (v) => update({ BorderRadius: v === undefined || isNaN(Number(v)) ? undefined : v }) }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "px" })] }) })] }) }));
};
export const getCellFontStyleSummaryItems = (font) => {
if (!font) {
return [];
}
const items = [];
if (font.ForeColor) {
items.push({ label: 'Fore Colour', value: font.ForeColor });
}
if (font.FontWeight === 'Bold') {
items.push({ label: 'Font Weight', value: 'Bold' });
}
if (font.FontStyle === 'Italic') {
items.push({ label: 'Font Style', value: 'Italic' });
}
if (font.TextDecoration && font.TextDecoration !== 'None') {
items.push({ label: 'Text Decoration', value: font.TextDecoration });
}
if (font.FontSize) {
items.push({ label: 'Font Size', value: font.FontSize });
}
if (font.Alignment && font.Alignment !== 'Default') {
items.push({ label: 'Alignment', value: font.Alignment });
}
return items;
};
export const renderFontStyleSummaryTags = (font) => {
const items = getCellFontStyleSummaryItems(font);
if (!items.length) {
return null;
}
return renderSummaryLabelValueTags(items);
};
export const getCellBoxStyleSummaryItems = (cell) => {
if (!cell) {
return [];
}
const items = [];
if (cell.BackColor) {
items.push({ label: 'Back Colour', value: cell.BackColor });
}
if (cell.BorderColor) {
items.push({ label: 'Border Colour', value: cell.BorderColor });
}
if (cell.BorderRadius != null) {
items.push({ label: 'Border Radius', value: `${cell.BorderRadius}px` });
}
return items;
};
export const renderCellStyleSummaryTags = (cell) => {
const items = getCellBoxStyleSummaryItems(cell);
if (!items.length) {
return null;
}
return renderSummaryLabelValueTags(items);
};