@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
154 lines (153 loc) • 7.66 kB
JavaScript
import * as React from 'react';
import { useState } from 'react';
import { Box } from 'rebass';
import { useDispatch } from 'react-redux';
import { OnePageAdaptableWizard, OnePageWizardSummary, } from '../../Wizard/OnePageAdaptableWizard';
import ObjectFactory from '../../../Utilities/ObjectFactory';
import * as StyledColumnRedux from '../../../Redux/ActionsReducers/StyledColumnRedux';
import { renderStyledColumnTypeSummary, StyledColumnWizardTypeSection, } from './StyledColumnWizardTypeSection';
import { isValidStyledColumnColumn, renderStyledColumnColumnSummary, StyledColumnWizardColumnSection, } from './StyledColumnWizardColumnSection';
import { renderStyledColumnStyleSummary, StyledColumnWizardStyleSection, } from './StyledColumnWizardStyleSection';
import { cloneObject } from '../../../Utilities/Helpers/Helper';
import { renderStyledColumnWizardSettingsSummary, StyledColumnWizardSettingsSection, } from './StyledColumnWizardSettingsSection';
import { StyledColumnSparklineSettingsSection } from './StyledColumnSparklineSettingsSection';
import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
import { renderBadgeSummary, StyledColumnBadgeSection } from './StyledColumnBadgeSection';
export const StyledColumnWizard = (props) => {
const data = props.data ?? props.popupParams?.value;
const popupDefaultCurrentSectionName = props?.popupParams?.config?.defaultCurrentSectionName ?? undefined;
const defaultCurrentSectionName = props.defaultCurrentSectionName ?? popupDefaultCurrentSectionName;
const [styledColumn, setStyledColumn] = useState(() => {
if (data) {
return cloneObject(data);
}
const newData = ObjectFactory.CreateEmptyStyledColumn();
newData.GradientStyle = {};
if (props.popupParams?.column && props.popupParams?.action === 'New') {
newData.ColumnId = props.popupParams.column.columnId;
if (props.popupParams.column.dataType === 'text') {
newData.BadgeStyle = {
Badges: [ObjectFactory.CreateDefaultStyledColumnBadge()],
};
delete newData.GradientStyle;
}
else if (props.popupParams.column.dataType.includes('Array')) {
newData.SparklineStyle = {};
delete newData.GradientStyle;
}
}
return newData;
});
const dispatch = useDispatch();
const handleFinish = () => {
if (props?.popupParams?.action === 'New' || !data) {
dispatch(StyledColumnRedux.StyledColumnAdd(styledColumn));
}
else {
dispatch(StyledColumnRedux.StyledColumnEdit(styledColumn));
}
props.onFinishWizard(styledColumn);
};
const AdditionalSettingSection = {
details: 'Apply Additional Settings',
renderSummary: renderStyledColumnWizardSettingsSummary,
render: () => {
return (React.createElement(Box, { padding: 2 },
React.createElement(StyledColumnWizardSettingsSection, { onChange: setStyledColumn })));
},
title: 'Settings',
};
const specificSteps = [];
if (styledColumn.SparklineStyle) {
specificSteps.push({
title: 'Settings',
render: () => (React.createElement(Box, { p: 2 },
React.createElement(StyledColumnSparklineSettingsSection, { onChange: setStyledColumn }))),
});
}
else if (styledColumn.GradientStyle || styledColumn.PercentBarStyle) {
specificSteps.push({
details: 'Create the Style to apply',
renderSummary: renderStyledColumnStyleSummary,
render: () => {
return (React.createElement(Box, { padding: 2 },
React.createElement(StyledColumnWizardStyleSection, { onChange: setStyledColumn })));
},
title: 'Style',
isValid: () => {
const columnComparison = styledColumn.GradientStyle?.ColumnComparison ??
styledColumn.PercentBarStyle?.ColumnComparison;
return columnComparison
? columnComparison.MaxValue == undefined && columnComparison.MinValue == undefined
? 'Define Min and Max Values for the Column Comparison'
: columnComparison.MaxValue == undefined
? 'Define a Max Value for the Column Comparison'
: columnComparison.MinValue == undefined
? 'Define a Min Value for the Column Comparison'
: true
: true;
},
}
// Only available for Badge
// AdditionalSettingSection
);
}
else if (styledColumn.BadgeStyle) {
specificSteps.push({
title: 'Badges',
details: 'Create Badge Styles',
isValid: () => {
if (styledColumn.BadgeStyle.Badges?.length === 0) {
return 'Define at least one Badge';
}
const badgesWithNoRules = styledColumn.BadgeStyle.Badges.filter((b) => b.Expression == undefined || b.Predicate == undefined);
if (badgesWithNoRules.length > 1) {
return 'Only one Badge can have no Rule';
}
return true;
},
renderSummary: () => renderBadgeSummary(styledColumn),
render: () => (React.createElement(Box, { p: 2 },
React.createElement(StyledColumnBadgeSection, { onChange: setStyledColumn }))),
});
specificSteps.push(AdditionalSettingSection);
}
return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: styledColumn, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
{
details: 'Select a Styled Column type',
renderSummary: renderStyledColumnTypeSummary,
render: () => {
return React.createElement(StyledColumnWizardTypeSection, { onChange: setStyledColumn });
},
title: 'Type',
},
{
isValid: isValidStyledColumnColumn,
renderSummary: renderStyledColumnColumnSummary,
details: 'Select the Column where the Style will be applied',
render: () => {
return (React.createElement(Box, { padding: 2, style: { height: '100%' } },
React.createElement(StyledColumnWizardColumnSection, { isNew: props.isNew, onChange: setStyledColumn })));
},
title: 'Column',
},
...specificSteps,
{
details: 'Select Format Column Tags',
title: 'Tags',
isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
render: () => (React.createElement(Box, { padding: 2 },
React.createElement(ObjectTagsWizardSection, { onChange: setStyledColumn }))),
renderSummary: renderObjectTagsSummary,
},
'-',
{
title: 'Summary',
details: 'Review your Styled Column',
render: () => {
return (React.createElement(Box, { padding: 2 },
React.createElement(OnePageWizardSummary, null)));
},
},
] }));
};