@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
159 lines (158 loc) • 8.35 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledColumnWizard = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("react");
const rebass_1 = require("rebass");
const react_redux_1 = require("react-redux");
const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
const StyledColumnRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/StyledColumnRedux"));
const StyledColumnWizardTypeSection_1 = require("./StyledColumnWizardTypeSection");
const StyledColumnWizardColumnSection_1 = require("./StyledColumnWizardColumnSection");
const StyledColumnWizardStyleSection_1 = require("./StyledColumnWizardStyleSection");
const Helper_1 = require("../../../Utilities/Helpers/Helper");
const StyledColumnWizardSettingsSection_1 = require("./StyledColumnWizardSettingsSection");
const StyledColumnSparklineSettingsSection_1 = require("./StyledColumnSparklineSettingsSection");
const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
const StyledColumnBadgeSection_1 = require("./StyledColumnBadgeSection");
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] = (0, react_1.useState)(() => {
if (data) {
return (0, Helper_1.cloneObject)(data);
}
const newData = ObjectFactory_1.default.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_1.default.CreateDefaultStyledColumnBadge()],
};
delete newData.GradientStyle;
}
else if (props.popupParams.column.dataType.includes('Array')) {
newData.SparklineStyle = {};
delete newData.GradientStyle;
}
}
return newData;
});
const dispatch = (0, react_redux_1.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: StyledColumnWizardSettingsSection_1.renderStyledColumnWizardSettingsSummary,
render: () => {
return (React.createElement(rebass_1.Box, { padding: 2 },
React.createElement(StyledColumnWizardSettingsSection_1.StyledColumnWizardSettingsSection, { onChange: setStyledColumn })));
},
title: 'Settings',
};
const specificSteps = [];
if (styledColumn.SparklineStyle) {
specificSteps.push({
title: 'Settings',
render: () => (React.createElement(rebass_1.Box, { p: 2 },
React.createElement(StyledColumnSparklineSettingsSection_1.StyledColumnSparklineSettingsSection, { onChange: setStyledColumn }))),
});
}
else if (styledColumn.GradientStyle || styledColumn.PercentBarStyle) {
specificSteps.push({
details: 'Create the Style to apply',
renderSummary: StyledColumnWizardStyleSection_1.renderStyledColumnStyleSummary,
render: () => {
return (React.createElement(rebass_1.Box, { padding: 2 },
React.createElement(StyledColumnWizardStyleSection_1.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: () => (0, StyledColumnBadgeSection_1.renderBadgeSummary)(styledColumn),
render: () => (React.createElement(rebass_1.Box, { p: 2 },
React.createElement(StyledColumnBadgeSection_1.StyledColumnBadgeSection, { onChange: setStyledColumn }))),
});
specificSteps.push(AdditionalSettingSection);
}
return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: styledColumn, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
{
details: 'Select a Styled Column type',
renderSummary: StyledColumnWizardTypeSection_1.renderStyledColumnTypeSummary,
render: () => {
return React.createElement(StyledColumnWizardTypeSection_1.StyledColumnWizardTypeSection, { onChange: setStyledColumn });
},
title: 'Type',
},
{
isValid: StyledColumnWizardColumnSection_1.isValidStyledColumnColumn,
renderSummary: StyledColumnWizardColumnSection_1.renderStyledColumnColumnSummary,
details: 'Select the Column where the Style will be applied',
render: () => {
return (React.createElement(rebass_1.Box, { padding: 2, style: { height: '100%' } },
React.createElement(StyledColumnWizardColumnSection_1.StyledColumnWizardColumnSection, { isNew: props.isNew, onChange: setStyledColumn })));
},
title: 'Column',
},
...specificSteps,
{
details: 'Select Format Column Tags',
title: 'Tags',
isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
render: () => (React.createElement(rebass_1.Box, { padding: 2 },
React.createElement(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setStyledColumn }))),
renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
},
'-',
{
title: 'Summary',
details: 'Review your Styled Column',
render: () => {
return (React.createElement(rebass_1.Box, { padding: 2 },
React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null)));
},
},
] }));
};
exports.StyledColumnWizard = StyledColumnWizard;