@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
204 lines (203 loc) • 11.4 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { ColumnTag, Tag } from '../../../components/Tag';
import { NewColumnSelector } from '../../Components/ColumnSelector';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import { Box, Flex } from '../../../components/Flex';
import { CheckBox } from '../../../components/CheckBox';
import { cn } from '../../../lib/utils';
import { getStyledColumnRowKindDisabledReason, isStyledColumnRowKindSupported, sanitizeStyledColumnRowScope, STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY, STYLED_COLUMN_ROW_KINDS, } from '../../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
import { isUnsupportedColumnDataTypeForIconStyle } from '../../../Utilities/Helpers/StyledColumns/IconStyleHelper';
import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactColumnTags, useWizardCardAccordion, } from '../../Wizard/CollapsibleWizardCard';
const ROW_KIND_LABELS = {
Data: 'Data (leaf) Rows',
Group: 'Group Rows',
Summary: 'Summary Rows',
Total: 'Total Rows',
};
const defaultRowKindIncluded = (styledColumn, kind) => {
if (styledColumn.BadgeStyle) {
return true;
}
if (!isStyledColumnRowKindSupported(styledColumn, kind)) {
return false;
}
return kind !== 'Group';
};
const isRowKindIncluded = (styledColumn, kind) => {
if (!isStyledColumnRowKindSupported(styledColumn, kind)) {
return false;
}
const scope = styledColumn.RowScope;
if (scope) {
return !scope[STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY[kind]];
}
return defaultRowKindIncluded(styledColumn, kind);
};
const collectIncludedRowKinds = (styledColumn) => {
return STYLED_COLUMN_ROW_KINDS.filter((k) => isRowKindIncluded(styledColumn, k));
};
export const renderStyledColumnScopeSummary = (data, api) => {
const includedKinds = collectIncludedRowKinds(data);
const allKinds = includedKinds.length === 4;
return (_jsxs(Box, { className: "twa:pr-2 twa:py-2", children: [_jsxs(Box, { className: "twa:mt-1", children: ["Column:", ' ', _jsx(Tag, { children: data.ColumnId
? api.columnApi.getFriendlyNameForColumnId(data.ColumnId)
: 'No Column Selected' })] }), _jsxs(Box, { className: "twa:mt-2", children: ["Rows:", ' ', allKinds ? (_jsx(Tag, { children: "All" })) : includedKinds.length === 0 ? (_jsx(Tag, { children: "None" })) : (includedKinds.map((k) => (_jsx(Tag, { className: "twa:mr-1", children: k }, k))))] })] }));
};
export const collectIncludedRowKindLabels = (styledColumn) => collectIncludedRowKinds(styledColumn);
const StyledColumnColumnScopeSummary = ({ data, }) => {
const { api } = useOnePageAdaptableWizardContext();
return (_jsx(CollapsibleWizardValueSummary, { value: data.ColumnId ? (_jsx(ColumnTag, { children: api.columnApi.getFriendlyNameForColumnId(data.ColumnId) })) : (_jsx(Tag, { children: "No column selected" })) }));
};
const StyledColumnRowsScopeSummary = ({ data, }) => {
const includedKinds = collectIncludedRowKinds(data);
const allKinds = includedKinds.length === 4;
return (_jsx(CollapsibleWizardValueSummary, { value: allKinds ? (_jsx(Tag, { children: "All" })) : includedKinds.length === 0 ? (_jsx(Tag, { children: "None" })) : (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: includedKinds.map((kind) => (_jsx(Tag, { children: ROW_KIND_LABELS[kind] }, kind))) })) }));
};
export const isValidStyledColumnScope = (data, api) => {
if (!data.ColumnId) {
return 'Please select a column for the Styled Column.';
}
if (data.IconStyle &&
isUnsupportedColumnDataTypeForIconStyle(api.columnApi.getColumnDataTypeForColumnId(data.ColumnId))) {
return 'Icon Style applies to scalar cell values only. Choose a numeric or plain text column, or use Badge Style for array columns.';
}
if (collectIncludedRowKinds(data).length === 0) {
return 'Pick at least one row kind to render the style on.';
}
return true;
};
const StyledColumnRowScopePanel = ({ data, onRowKindChange, }) => (_jsx(Flex, { flexDirection: "column", className: "twa:items-start twa:px-1 twa:py-1", style: { rowGap: 'calc(var(--ab-base-space) * 2)' }, children: STYLED_COLUMN_ROW_KINDS.map((kind) => {
const supported = isStyledColumnRowKindSupported(data, kind);
const disabledReason = getStyledColumnRowKindDisabledReason(data, kind);
return (_jsx(CheckBox, { "data-name": `include-${kind.toLowerCase()}-rows-checkbox`, disabled: !supported, title: disabledReason, checked: isRowKindIncluded(data, kind), onChange: (checked) => onRowKindChange(kind, checked), children: ROW_KIND_LABELS[kind] }, kind));
}) }));
export const StyledColumnWizardScopeSection = (props) => {
const { data, api } = useOnePageAdaptableWizardContext();
React.useEffect(() => {
const next = sanitizeStyledColumnRowScope(data);
if (!next) {
return;
}
props.onChange({
...data,
RowScope: next,
});
}, [
data.Uuid,
data.SparklineStyle,
data.GradientStyle,
data.PercentBarStyle,
data.BulletChartStyle,
data.RangeBarStyle,
data.RatingStyle,
data.BadgeStyle,
data.IconStyle,
data.RowScope?.ExcludeDataRows,
data.RowScope?.ExcludeGroupRows,
data.RowScope?.ExcludeSummaryRows,
data.RowScope?.ExcludeTotalRows,
]);
React.useEffect(() => {
if (!data.IconStyle || !data.ColumnId) {
return;
}
const dt = api.columnApi.getColumnDataTypeForColumnId(data.ColumnId);
if (isUnsupportedColumnDataTypeForIconStyle(dt)) {
props.onChange({
...data,
ColumnId: undefined,
});
}
}, [data.Uuid, data.IconStyle, data.ColumnId]);
const sortableCols = React.useMemo(() => {
let sortableColumns = [];
if (data.SparklineStyle) {
sortableColumns = api.columnApi.getNumericArrayColumns();
}
else if (data.IconStyle) {
sortableColumns = [
...api.columnApi.getNumericColumns(),
...api.columnApi.getTextColumns(),
];
}
else if (data.BadgeStyle) {
sortableColumns = [
...api.columnApi.getNumericColumns(),
...api.columnApi.getTextColumns(),
...api.columnApi.getTextArrayColumns(),
...api.columnApi.getNumberArrayColumns(),
];
}
else {
sortableColumns = api.columnApi.getNumericColumns();
}
const styledColumns = api.styledColumnApi.getStyledColumns();
const usedColumnIds = styledColumns
.map((styledColumn) => {
if (styledColumn.Uuid === data.Uuid) {
return null;
}
return styledColumn.ColumnId;
})
.filter(Boolean);
return sortableColumns.filter((column) => usedColumnIds.every((usedColumnId) => column.columnId !== usedColumnId));
}, [data, api]);
const handleColumnsChange = (columnIds) => {
const columnId = columnIds[0];
const emptyRanges = api.columnScopeApi.createCellColorRangesForScope({
ColumnIds: [columnId],
});
const newStyledColumn = {
...data,
ColumnId: columnId,
};
if (newStyledColumn.PercentBarStyle) {
newStyledColumn.PercentBarStyle = {
...newStyledColumn.PercentBarStyle,
CellRanges: emptyRanges,
};
}
if (newStyledColumn.GradientStyle) {
newStyledColumn.GradientStyle = {
...newStyledColumn.GradientStyle,
CellRanges: emptyRanges,
};
}
if (newStyledColumn.BulletChartStyle) {
newStyledColumn.BulletChartStyle = {
...newStyledColumn.BulletChartStyle,
CellRanges: emptyRanges,
};
}
props.onChange(newStyledColumn);
};
const handleRowKindChange = (kind, include) => {
if (!isStyledColumnRowKindSupported(data, kind)) {
return;
}
const baseScope = data.RowScope ?? {
ExcludeDataRows: !defaultRowKindIncluded(data, 'Data'),
ExcludeGroupRows: !defaultRowKindIncluded(data, 'Group'),
ExcludeSummaryRows: !defaultRowKindIncluded(data, 'Summary'),
ExcludeTotalRows: !defaultRowKindIncluded(data, 'Total'),
};
const nextScope = {
...baseScope,
[STYLED_COLUMN_ROW_KIND_EXCLUDE_KEY[kind]]: !include,
};
props.onChange({
...data,
RowScope: nextScope,
});
};
const includedRowKinds = collectIncludedRowKinds(data);
const allRowKindsIncluded = includedRowKinds.length === 4;
const initialExpandedCardId = data.ColumnId ? null : 'column';
const { bindCard, hasExpandedCard, expandedFillsSpace } = useWizardCardAccordion(initialExpandedCardId, { fillExpandedCard: true });
const columnCompactSummary = data.ColumnId
? renderCompactColumnTags([data.ColumnId], (columnId) => api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No column' })
: _jsx(Tag, { children: "No column" });
const rowsCompactSummary = allRowKindsIncluded ? (_jsx(Tag, { children: "All" })) : includedRowKinds.length === 0 ? (_jsx(Tag, { children: "None" })) : (_jsx(Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: includedRowKinds.map((kind) => (_jsx(Tag, { className: "twa:shrink-0", children: kind }, kind))) }));
return (_jsxs(Box, { className: cn(getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), 'twa:p-2'), children: [_jsx(CollapsibleWizardCard, { ...bindCard('column', { fillAvailable: true }), surface: "panel", "data-name": "styled-column-scope-column", title: "Column", help: "Select Column the Style is applied to", collapsedHelp: "Column the Style is applied to", compactSummary: columnCompactSummary, summary: _jsx(StyledColumnColumnScopeSummary, { data: data }), className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:max-h-[420px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0 twa:!pb-0 twa:px-1", children: _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:h-full twa:px-1 twa:pb-1 twa:flex twa:flex-col", children: _jsx(NewColumnSelector, { compactColumnList: true, availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: handleColumnsChange, allowReorder: false }) }) }), _jsx(CollapsibleWizardCard, { ...bindCard('rows'), surface: "panel", "data-name": "styled-column-scope-rows", title: "Rows", help: "Select which kinds of Rows the Styled Column will render on", collapsedHelp: "Row kinds the Styled Column renders on", compactSummary: rowsCompactSummary, summary: _jsx(StyledColumnRowsScopeSummary, { data: data }), children: _jsx(StyledColumnRowScopePanel, { data: data, onRowKindChange: handleRowKindChange }) })] }));
};