@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
84 lines (83 loc) • 3.86 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { StyleComponent } from '../../Components/StyleComponent';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import UIHelper from '../../UIHelper';
import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
import { Box } from '../../../components/Flex';
import { Tag } from '../../../components/Tag';
import { isSummaryInTagLabel, renderSummaryLabelValueTagContent, summaryStringsToTagContents, } from '../../Wizard/SummaryColorTag';
import { getFormatColumnStylePreviewText } from './FormatColumnPreview';
export const isFormatColumnStyleValid = (data, api) => {
if (data.Style &&
UIHelper.IsEmptyStyle(data.Style) &&
data.DisplayFormat === undefined &&
!api.columnScopeApi.isSingleBooleanColumnScope(data.Scope)) {
return 'No format applied';
}
return true;
};
const getFormatColumnStyleSummaryItems = (formatColumn) => {
const style = formatColumn.Style;
if (!style) {
return [];
}
if (StringExtensions.IsNotNullOrEmpty(style.ClassName)) {
return [{ label: 'Class Name', value: style.ClassName }];
}
const items = [];
if (style.BackColor) {
items.push({ label: 'Back Colour', value: style.BackColor });
}
if (style.ForeColor) {
items.push({ label: 'Fore Colour', value: style.ForeColor });
}
if (style.BorderColor) {
items.push({ label: 'Border Colour', value: style.BorderColor });
}
if (style.BorderRadius != null) {
items.push({ label: 'Border Radius', value: String(style.BorderRadius) });
}
if (style.FontWeight === 'Bold') {
items.push({ label: 'Font Weight', value: 'Bold' });
}
if (style.FontStyle === 'Italic') {
items.push({ label: 'Font Style', value: 'Italic' });
}
if (style.TextDecoration && style.TextDecoration !== 'None') {
items.push({ label: 'Text Decoration', value: style.TextDecoration });
}
if (style.FontSize) {
items.push({ label: 'Font Size', value: style.FontSize });
}
if (style.Alignment && style.Alignment !== 'Default') {
items.push({ label: 'Alignment', value: style.Alignment });
}
return items;
};
export const hasFormatColumnStyle = (formatColumn) => {
if (formatColumn.Style == null || UIHelper.IsEmptyStyle(formatColumn.Style)) {
return false;
}
return getFormatColumnStyleSummaryItems(formatColumn).length > 0;
};
export const getFormatColumnStyleViewValues = (formatColumn) => {
return summaryStringsToTagContents(getFormatColumnStyleSummaryItems(formatColumn).map(({ label, value }) => `${label}: ${value}`));
};
export const renderFormatColumnStyleSummary = (data) => {
const hasStyle = data.Style != null && UIHelper.IsNotEmptyStyle(data.Style);
if (!hasStyle) {
return _jsx(Tag, { children: "No Style" });
}
const items = getFormatColumnStyleSummaryItems(data);
if (!items.length) {
return _jsx(Tag, { children: "No Style" });
}
return (_jsx(Box, { className: "twa:grid twa:grid-cols-2 twa:gap-2", children: items.map(({ label, value }) => (_jsx(Box, { children: isSummaryInTagLabel(label) ? (_jsx(Tag, { children: renderSummaryLabelValueTagContent(label, value) })) : (_jsxs(_Fragment, { children: [label, " ", _jsx(Tag, { children: value })] })) }, label))) }));
};
export function FormatColumnStyleWizardSection(props) {
const { data, api } = useOnePageAdaptableWizardContext();
const previewText = getFormatColumnStylePreviewText(data, api);
return (_jsx(StyleComponent, { headless: true, api: api, previewText: previewText, Style: data.Style ?? {}, UpdateStyle: (Style) => {
props.onChange({ ...data, Style });
} }));
}