@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
301 lines (300 loc) • 22.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyleComponent = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("react");
const clsx_1 = tslib_1.__importDefault(require("clsx"));
const CheckBox_1 = require("../../components/CheckBox");
const ColorPicker_1 = require("../../components/ColorPicker");
const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
const Tabs_1 = require("../../components/Tabs");
const Select_1 = require("../../components/Select");
const StylePreview_1 = require("../../components/StylePreview");
const Toggle_1 = require("../../components/Toggle");
const Enums_1 = require("../../AdaptableState/Common/Enums");
const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
const EnumExtensions_1 = require("../../Utilities/Extensions/EnumExtensions");
const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
const AdaptableInput_1 = tslib_1.__importDefault(require("./AdaptableInput"));
const Flex_1 = require("../../components/Flex");
const twMerge_1 = require("../../twMerge");
const Card_1 = require("../../components/Card");
const StyleComponent = (props) => {
const [showClassName, setShowClassName] = (0, react_1.useState)(StringExtensions_1.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 onUseBackColorCheckChange = (checked) => {
const newStyle = { ...componentStyle };
if (checked) {
newStyle.BackColor = '#ffffff';
}
else {
delete newStyle.BackColor;
}
setComponentStyle(newStyle);
};
const onUseForeColorCheckChange = (checked) => {
const newStyle = { ...componentStyle };
if (checked) {
newStyle.ForeColor = '#000000';
}
else {
delete newStyle.ForeColor;
}
setComponentStyle(newStyle);
};
const onUseBorderColorCheckChange = (checked) => {
const newStyle = { ...componentStyle };
if (checked) {
newStyle.BorderColor = '#000000';
}
else {
delete newStyle.BorderColor;
}
setComponentStyle(newStyle);
};
const onBackColorSelectChange = (color) => {
const newStyle = { ...componentStyle };
newStyle.BackColor = color;
setComponentStyle(newStyle);
};
const onForeColorSelectChange = (color) => {
const newStyle = { ...componentStyle };
newStyle.ForeColor = color;
setComponentStyle(newStyle);
};
const onBorderColorSelectChange = (color) => {
const newStyle = { ...componentStyle };
newStyle.BorderColor = color;
setComponentStyle(newStyle);
};
const onFontWeightChange = (checked) => {
const newStyle = { ...componentStyle };
if (checked) {
newStyle.FontWeight = Enums_1.FontWeight.Bold;
}
else {
delete newStyle.FontWeight;
}
setComponentStyle(newStyle);
};
const onFontStyleChange = (checked) => {
const newStyle = { ...componentStyle };
if (checked) {
newStyle.FontStyle = Enums_1.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 ? Flex_1.Box : Panel_1.default;
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');
return (React.createElement(Cmp, { ...cmpProps, className: (0, twMerge_1.twMerge)((0, clsx_1.default)('ab-StyleComponent twa:text-3', props.className)) },
ArrayExtensions_1.default.IsNotNullOrEmpty(styleClassNames) ? (React.createElement(Tabs_1.Tabs, { value: showClassName ? 'classname' : 'createstyle', onValueChange: (value) => onShowClassNameChanged(value === 'classname') },
React.createElement(Tabs_1.Tabs.Tab, { "data-name": "show-class-name", value: "classname" }, "Use Style Class Name"),
React.createElement(Tabs_1.Tabs.Tab, { "data-name": "create-style", value: "createstyle" }, "Create Style"),
React.createElement(Tabs_1.Tabs.Content, { value: "classname" },
React.createElement(Card_1.Card, { shadow: false },
React.createElement(Card_1.Card.Title, null, "CSS Class Name"),
React.createElement(Card_1.Card.Body, { gap: 2, className: "twa:p-1" },
React.createElement(HelpBlock_1.default, null, "Select a CSS Class Name"),
React.createElement(Flex_1.Box, { className: "twa:max-w-[15rem]" },
React.createElement(Select_1.Select, { options: ArrayExtensions_1.default.IsNullOrEmpty(styleClassNames)
? []
: styleClassNames.map((item) => ({
label: item,
value: item,
})), value: componentStyle.ClassName, onChange: (value) => onStyleClassNameChanged(value) })),
React.createElement(Flex_1.Box, { className: "twa:m-2 twa:flex-2 twa:text-warn" }, 'Please ensure that the styles listed are in the current stylesheet')))),
React.createElement(Tabs_1.Tabs.Content, { value: "createstyle" },
React.createElement(Flex_1.Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row" },
React.createElement(Card_1.Card, { shadow: false, className: "twa:flex-1" },
React.createElement(Card_1.Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1" },
React.createElement(Card_1.Card.Title, { className: "twa:col-span-2" },
colourSpellingVariant,
" & Border Properties"),
React.createElement(HelpBlock_1.default, { className: "twa:col-span-2" },
"Set ",
coloursSpellingVariant,
" by ticking a checkbox and selecting from the dropdown; leave unchecked to use cell's existing ",
coloursSpellingVariant),
React.createElement(CheckBox_1.CheckBox, { "data-name": "set-background-color", value: "existing", checked: !!componentStyle.BackColor, onChange: (checked) => onUseBackColorCheckChange(checked) },
"Back ",
colourSpellingVariant),
React.createElement(ColorPicker_1.ColorPicker, { disabled: componentStyle.BackColor == null, api: props.api, value: componentStyle.BackColor || '#ffffff', onChange: (x) => onBackColorSelectChange(x) }),
React.createElement(CheckBox_1.CheckBox, { "data-name": "set-foreground-color", value: "existing", className: "twa:row-start-4", checked: componentStyle.ForeColor ? true : false, onChange: (checked) => onUseForeColorCheckChange(checked) },
"Fore ",
colourSpellingVariant),
React.createElement(ColorPicker_1.ColorPicker, { className: "twa:row-start-4 twa:col-start-2", disabled: componentStyle.ForeColor == null, api: props.api, value: componentStyle.ForeColor || '#ffffff', onChange: (x) => onForeColorSelectChange(x) }),
React.createElement(CheckBox_1.CheckBox, { "data-name": "set-border-color", value: "existing", className: "twa:row-start-5 twa:col-start-1", checked: componentStyle.BorderColor ? true : false, onChange: (checked) => onUseBorderColorCheckChange(checked) },
"Border ",
colourSpellingVariant),
React.createElement(ColorPicker_1.ColorPicker, { disabled: componentStyle.BorderColor == null, api: props.api, className: "twa:row-start-5 twa:col-start-2", value: componentStyle.BorderColor || '#ffffff', onChange: (x) => onBorderColorSelectChange(x) }),
React.createElement("span", { className: "twa:row-start-6" }, "Border Radius"),
React.createElement(AdaptableInput_1.default, { className: "twa:w-[100px] twa:row-start-6", type: "number", min: "0", value: componentStyle.BorderRadius, onChange: (event) => {
const number = Number(event.target.value);
if (isNaN(number)) {
onBorderRadiusChange(0);
}
else {
onBorderRadiusChange(number);
}
} }),
React.createElement(Card_1.Card.Title, { className: "twa:col-span-2 twa:col-start-3 twa:row-start-1" }, "Font Properties"),
React.createElement(HelpBlock_1.default, { className: "twa:self-stretch twa:col-span-2 twa:col-start-3 twa:row-start-2" }, "Set the font properties of the Style"),
React.createElement("span", null, "Font Style"),
React.createElement(Toggle_1.ToggleGroup, null,
React.createElement(Toggle_1.Toggle, { pressed: componentStyle.FontStyle == Enums_1.FontStyle.Italic, onPressedChange: (checked) => onFontStyleChange(checked), icon: "italic" }),
React.createElement(Toggle_1.Toggle, { pressed: componentStyle.FontWeight == Enums_1.FontWeight.Bold, onPressedChange: (checked) => onFontWeightChange(checked), icon: "bold" })),
React.createElement("span", null, "Text Decoration"),
React.createElement(Toggle_1.ToggleGroup, null,
React.createElement(Toggle_1.Toggle, { icon: "underline", pressed: componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Underline' : 'None') }),
React.createElement(Toggle_1.Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }),
React.createElement(Toggle_1.Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })),
React.createElement("span", null, "Font Size"),
React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center" },
React.createElement(Select_1.Select, { placeholder: "Default", options: [
{
label: 'Default',
value: '',
},
...EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize).map((enumName) => ({
label: enumName,
value: enumName,
})),
], value: componentStyle.FontSize?.toString() ?? '', onChange: (value) => onFontSizeChange(value) })),
React.createElement("span", null, "Alignment"),
React.createElement(Toggle_1.ToggleGroup, null,
React.createElement(Toggle_1.Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }),
React.createElement(Toggle_1.Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }),
React.createElement(Toggle_1.Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })))))))) : (React.createElement(Flex_1.Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row" },
React.createElement(Card_1.Card, { shadow: false, className: "twa:flex-1" },
React.createElement(Card_1.Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1" },
React.createElement(Card_1.Card.Title, { className: "twa:col-span-2" },
colourSpellingVariant,
" & Border Properties"),
React.createElement(HelpBlock_1.default, { className: "twa:col-span-2" },
"Set ",
coloursSpellingVariant,
" by ticking a checkbox and selecting from the dropdown; leave unchecked to use cell's existing ",
coloursSpellingVariant),
React.createElement(CheckBox_1.CheckBox, { "data-name": "set-background-color", value: "existing", checked: !!componentStyle.BackColor, onChange: (checked) => onUseBackColorCheckChange(checked) },
"Back ",
colourSpellingVariant),
React.createElement(ColorPicker_1.ColorPicker, { disabled: componentStyle.BackColor == null, api: props.api, value: componentStyle.BackColor || '#ffffff', onChange: (x) => onBackColorSelectChange(x) }),
React.createElement(CheckBox_1.CheckBox, { "data-name": "set-foreground-color", value: "existing", className: "twa:row-start-4", checked: componentStyle.ForeColor ? true : false, onChange: (checked) => onUseForeColorCheckChange(checked) },
"Fore ",
colourSpellingVariant),
React.createElement(ColorPicker_1.ColorPicker, { className: "twa:row-start-4 twa:col-start-2", disabled: componentStyle.ForeColor == null, api: props.api, value: componentStyle.ForeColor || '#ffffff', onChange: (x) => onForeColorSelectChange(x) }),
React.createElement(CheckBox_1.CheckBox, { "data-name": "set-border-color", value: "existing", className: "twa:row-start-5 twa:col-start-1", checked: componentStyle.BorderColor ? true : false, onChange: (checked) => onUseBorderColorCheckChange(checked) },
"Border ",
colourSpellingVariant),
React.createElement(ColorPicker_1.ColorPicker, { disabled: componentStyle.BorderColor == null, api: props.api, className: "twa:row-start-5 twa:col-start-2", value: componentStyle.BorderColor || '#ffffff', onChange: (x) => onBorderColorSelectChange(x) }),
React.createElement("span", { className: "twa:row-start-6" }, "Border Radius"),
React.createElement(AdaptableInput_1.default, { className: "twa:w-[100px] twa:row-start-6", type: "number", min: "0", value: componentStyle.BorderRadius, onChange: (event) => {
const number = Number(event.target.value);
if (isNaN(number)) {
onBorderRadiusChange(0);
}
else {
onBorderRadiusChange(number);
}
} }),
React.createElement(Card_1.Card.Title, { className: "twa:col-span-2 twa:col-start-3 twa:row-start-1" }, "Font Properties"),
React.createElement(HelpBlock_1.default, { className: "twa:self-stretch twa:col-span-2 twa:col-start-3 twa:row-start-2" }, "Set the font properties of the Style"),
React.createElement("span", null, "Font Style"),
React.createElement(Toggle_1.ToggleGroup, null,
React.createElement(Toggle_1.Toggle, { pressed: componentStyle.FontStyle == Enums_1.FontStyle.Italic, onPressedChange: (checked) => onFontStyleChange(checked), icon: "italic" }),
React.createElement(Toggle_1.Toggle, { pressed: componentStyle.FontWeight == Enums_1.FontWeight.Bold, onPressedChange: (checked) => onFontWeightChange(checked), icon: "bold" })),
React.createElement("span", null, "Text Decoration"),
React.createElement(Toggle_1.ToggleGroup, null,
React.createElement(Toggle_1.Toggle, { icon: "underline", pressed: componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Underline' : 'None') }),
React.createElement(Toggle_1.Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }),
React.createElement(Toggle_1.Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })),
React.createElement("span", null, "Font Size"),
React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center" },
React.createElement(Select_1.Select, { placeholder: "Default", options: [
{
label: 'Default',
value: '',
},
...EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize).map((enumName) => ({
label: enumName,
value: enumName,
})),
], value: componentStyle.FontSize?.toString() ?? '', onChange: (value) => onFontSizeChange(value) })),
React.createElement("span", null, "Alignment"),
React.createElement(Toggle_1.ToggleGroup, null,
React.createElement(Toggle_1.Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }),
React.createElement(Toggle_1.Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }),
React.createElement(Toggle_1.Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })))))),
!props.hidePreview && (React.createElement(Card_1.Card, { shadow: false },
React.createElement(Card_1.Card.Title, null, "Preview"),
React.createElement(Card_1.Card.Body, { className: "twa:grid twa:place-items-center" },
React.createElement(Flex_1.Box, { className: "twa:p-2 twa:inline-block" },
React.createElement(StylePreview_1.StylePreview, { className: "twa:mt-0", styleObject: componentStyle })))))));
};
exports.StyleComponent = StyleComponent;