@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
159 lines (158 loc) • 12 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { useState } from 'react';
import { OptionalColorPicker } from '../../components/ColorPicker';
import HelpBlock from '../../components/HelpBlock';
import Panel from '../../components/Panel';
import { Tabs } from '../../components/Tabs';
import { StylePreview } from '../../components/StylePreview';
import { Toggle, ToggleGroup } from '../../components/Toggle';
import { FontSize, FontStyle, FontWeight } from '../../AdaptableState/Common/Enums';
import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
import { EnumExtensions } from '../../Utilities/Extensions/EnumExtensions';
import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
import AdaptableInput from './AdaptableInput';
import { Box, Flex } from '../../components/Flex';
import { Card } from '../../components/Card';
import { SingleSelect } from '../../components/NewSelect';
import { cn } from '../../lib/utils';
export const StyleComponent = (props) => {
const [showClassName, setShowClassName] = useState(StringExtensions.IsNotNullOrEmpty(props.Style.ClassName));
const componentStyle = props.Style;
const setComponentStyle = (style) => {
props.UpdateStyle(style);
};
const onShowClassNameChanged = (checked) => {
const newStyle = { ...componentStyle };
delete newStyle.BackColor;
delete newStyle.ForeColor;
delete newStyle.BorderColor;
delete newStyle.FontSize;
delete newStyle.FontStyle;
delete newStyle.FontWeight;
newStyle.ClassName = '';
setComponentStyle(newStyle);
setShowClassName(checked);
};
const onStyleClassNameChanged = (value) => {
const newStyle = { ...componentStyle };
newStyle.ClassName = value == 'select' ? '' : value;
setComponentStyle(newStyle);
};
const onBackColorChange = (color) => {
const newStyle = { ...componentStyle };
if (color) {
newStyle.BackColor = color;
}
else {
delete newStyle.BackColor;
}
setComponentStyle(newStyle);
};
const onForeColorChange = (color) => {
const newStyle = { ...componentStyle };
if (color) {
newStyle.ForeColor = color;
}
else {
delete newStyle.ForeColor;
}
setComponentStyle(newStyle);
};
const onBorderColorChange = (color) => {
const newStyle = { ...componentStyle };
if (color) {
newStyle.BorderColor = color;
}
else {
delete newStyle.BorderColor;
}
setComponentStyle(newStyle);
};
const onFontWeightChange = (checked) => {
const newStyle = { ...componentStyle };
if (checked) {
newStyle.FontWeight = FontWeight.Bold;
}
else {
delete newStyle.FontWeight;
}
setComponentStyle(newStyle);
};
const onFontStyleChange = (checked) => {
const newStyle = { ...componentStyle };
if (checked) {
newStyle.FontStyle = FontStyle.Italic;
}
else {
delete newStyle.FontStyle;
}
setComponentStyle(newStyle);
};
const onTextDecorationChange = (textDecoration) => {
const newStyle = { ...componentStyle };
newStyle.TextDecoration = textDecoration;
if (textDecoration === 'None' || !textDecoration) {
delete newStyle.TextDecoration;
}
setComponentStyle(newStyle);
};
const onBorderRadiusChange = (value) => {
const newStyle = { ...componentStyle };
newStyle.BorderRadius = value;
if (value === 0) {
delete newStyle.BorderRadius;
}
setComponentStyle(newStyle);
};
const onFontSizeChange = (value) => {
const newStyle = { ...componentStyle };
newStyle.FontSize = value;
if (value === '' || value == 'Default') {
delete newStyle.FontSize;
}
setComponentStyle(newStyle);
};
const onAlignmentChange = (alignment) => {
const newStyle = { ...componentStyle };
newStyle.Alignment = alignment;
if (alignment == 'Default') {
delete newStyle.Alignment;
}
setComponentStyle(newStyle);
};
const Cmp = props.headless ? Box : Panel;
const headerText = props.headerText ?? 'Style';
const cmpProps = props.headless
? {}
: {
header: headerText,
'data-name': 'style-component',
};
const styleClassNames = props.api.userInterfaceApi.getStyleClassNames();
const colourSpellingVariant = props.api.internalApi.getCorrectEnglishVariant('Colour');
const coloursSpellingVariant = props.api.internalApi.getCorrectEnglishVariant('colours');
const styleEditorGrid = (_jsxs(Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1", children: [_jsxs(Card.Title, { className: "twa:col-span-2 twa:self-stretch", children: [_jsxs(Box, { className: "twa:font-medium", children: [colourSpellingVariant, " & Border Properties"] }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["Select ", coloursSpellingVariant, " and radius"] })] }), _jsxs("span", { children: ["Back ", colourSpellingVariant] }), _jsx(OptionalColorPicker, { api: props.api, value: componentStyle.BackColor, defaultColor: "#ffffff", onChange: onBackColorChange }), _jsxs("span", { className: "twa:row-start-3", children: ["Fore ", colourSpellingVariant] }), _jsx(OptionalColorPicker, { className: "twa:row-start-3", api: props.api, value: componentStyle.ForeColor, defaultColor: "#000000", onChange: onForeColorChange }), _jsxs("span", { className: "twa:row-start-4", children: ["Border ", colourSpellingVariant] }), _jsx(OptionalColorPicker, { className: "twa:row-start-4", api: props.api, value: componentStyle.BorderColor, defaultColor: "#000000", onChange: onBorderColorChange }), _jsx("span", { className: "twa:row-start-5", children: "Border Radius" }), _jsx(AdaptableInput, { className: "twa:w-[100px] twa:row-start-5", type: "number", min: "0", value: componentStyle.BorderRadius, onChange: (event) => {
const number = Number(event.target.value);
if (isNaN(number)) {
onBorderRadiusChange(0);
}
else {
onBorderRadiusChange(number);
}
} }), _jsxs(Card.Title, { className: "twa:col-span-2 twa:col-start-3 twa:row-start-1 twa:self-stretch", children: [_jsx(Box, { className: "twa:font-medium", children: "Font Properties" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set font properties for the Style" })] }), _jsx("span", { className: "twa:col-start-3 twa:row-start-2", children: "Font Style" }), _jsx(Box, { className: "twa:col-start-4 twa:row-start-2", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Toggle, { standalone: true, pressed: componentStyle.FontStyle == FontStyle.Italic, onPressedChange: (checked) => onFontStyleChange(checked), icon: "italic" }), _jsx(Toggle, { standalone: true, pressed: componentStyle.FontWeight == FontWeight.Bold, onPressedChange: (checked) => onFontWeightChange(checked), icon: "bold" })] }) }), _jsx("span", { className: "twa:col-start-3 twa:row-start-3", children: "Text Decoration" }), _jsx(Box, { className: "twa:col-start-4 twa:row-start-3", children: _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "underline", pressed: componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Underline' : 'None') }), _jsx(Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }), _jsx(Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })] }) }), _jsx("span", { className: "twa:col-start-3 twa:row-start-4", children: "Font Size" }), _jsx(Flex, { flexDirection: "row", alignItems: "center", className: "twa:col-start-4 twa:row-start-4", children: _jsx(SingleSelect, { placeholder: "Default", items: [
{
label: 'Default',
value: '',
},
...EnumExtensions.getNames(FontSize).map((enumName) => ({
label: enumName,
value: enumName,
})),
], value: componentStyle.FontSize?.toString() ?? '', onValueChange: (value) => onFontSizeChange(value) }) }), _jsx("span", { className: "twa:col-start-3 twa:row-start-5", children: "Alignment" }), _jsx(Box, { className: "twa:col-start-4 twa:row-start-5", children: _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }), _jsx(Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }), _jsx(Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })] }) })] }));
return (_jsxs(Cmp, { ...cmpProps, className: cn('ab-StyleComponent twa:text-3', props.className), children: [ArrayExtensions.IsNotNullOrEmpty(styleClassNames) ? (_jsxs(Tabs, { value: showClassName ? 'classname' : 'createstyle', onValueChange: (value) => onShowClassNameChanged(value === 'classname'), children: [_jsx(Tabs.Tab, { "data-name": "show-class-name", value: "classname", children: "Use Style Class Name" }), _jsx(Tabs.Tab, { "data-name": "create-style", value: "createstyle", children: "Create Style" }), _jsx(Tabs.Content, { value: "classname", children: _jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: "CSS Class Name" }), _jsxs(Card.Body, { gap: 2, className: "twa:p-1", children: [_jsx(HelpBlock, { children: "Select a CSS Class Name" }), _jsx(Box, { className: "twa:max-w-[15rem]", children: _jsx(SingleSelect, { items: ArrayExtensions.IsNullOrEmpty(styleClassNames)
? []
: styleClassNames.map((item) => ({
label: item,
value: item,
})), value: componentStyle.ClassName, onValueChange: (value) => onStyleClassNameChanged(value) }) }), _jsx(Box, { className: "twa:m-2 twa:flex-2 twa:text-warn", children: 'Please ensure that the styles listed are in the current stylesheet' })] })] }) }), _jsx(Tabs.Content, { value: "createstyle", children: _jsx(Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row", children: _jsx(Card, { shadow: false, className: "twa:flex-1", children: styleEditorGrid }) }) })] })) : (_jsx(Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row", children: _jsx(Card, { shadow: false, className: "twa:flex-1", children: styleEditorGrid }) })), !props.hidePreview && (_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: "Preview" }), _jsx(Card.Body, { className: "twa:grid twa:place-items-center", children: _jsx(Box, { className: "twa:p-2 twa:inline-block", children: _jsx(StylePreview, { className: "twa:mt-0", styleObject: componentStyle, children: props.previewText }) }) })] }))] }));
};