@adaptabletools/adaptable 13.0.0-canary.12 → 13.0.0-canary.14

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection.js

@@ -0,0 +1,238 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnWizardStyleSection = exports.renderStyledColumnStyleSummary = exports.renderFormatColumnStyleWizardSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const CheckBox_1 = require("../../../components/CheckBox");
+const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const Tabs_1 = require("../../../components/Tabs");
+const Tag_1 = require("../../../components/Tag");
+const ColorPicker_1 = require("../../ColorPicker");
+const RangesComponent_1 = require("../../Components/RangesComponent");
+const StyleVisualItem_1 = require("../../Components/StyleVisualItem");
+const UIHelper_1 = require("../../UIHelper");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const renderFormatColumnStyleWizardSummary = (data) => {
+    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    return (0, exports.renderStyledColumnStyleSummary)(data, api);
+};
+exports.renderFormatColumnStyleWizardSummary = renderFormatColumnStyleWizardSummary;
+const getRanges = (ranges) => {
+    return ranges.map((r, i) => (React.createElement(rebass_1.Flex, { key: i, alignItems: "center", mr: 3 },
+        React.createElement(rebass_1.Box, { mr: 1 },
+            r.Min,
+            " to ",
+            r.Max,
+            ' '),
+        React.createElement(StyleVisualItem_1.StyleVisualItem, { Style: {
+                BackColor: r.Color,
+                ForeColor: r.Color,
+            } }))));
+};
+const getColumnComparison = (columnComparison, api) => {
+    return (React.createElement(rebass_1.Flex, { key: 'cc', alignItems: "center", mr: 3 },
+        React.createElement(rebass_1.Box, { mr: 1 },
+            "Min Value:",
+            ' ',
+            isNaN(Number(columnComparison.MinValue))
+                ? '[' + api.columnApi.getFriendlyNameFromColumnId(String(columnComparison.MinValue)) + ']'
+                : columnComparison.MinValue,
+            ' ',
+            ", Max Value:",
+            ' ',
+            isNaN(Number(columnComparison.MaxValue))
+                ? '[' + api.columnApi.getFriendlyNameFromColumnId(String(columnComparison.MaxValue)) + ']'
+                : columnComparison.MaxValue,
+            ' '),
+        React.createElement(StyleVisualItem_1.StyleVisualItem, { Style: {
+                BackColor: columnComparison.Color,
+                ForeColor: columnComparison.Color,
+            } })));
+};
+const renderStyledColumnStyleSummary = (data, api) => {
+    if (data.CheckBoxStyle) {
+        return React.createElement(Tag_1.Tag, null, "Checkbox Style");
+    }
+    if (data.GradientStyle) {
+        if (data.GradientStyle.CellRanges) {
+            return getRanges(data.GradientStyle.CellRanges);
+        }
+        if (data.GradientStyle.ColumnComparison) {
+            return getColumnComparison(data.GradientStyle.ColumnComparison, api);
+        }
+    }
+    if (data.PercentBarStyle) {
+        if (data.PercentBarStyle.CellRanges) {
+            return getRanges(data.PercentBarStyle.CellRanges);
+        }
+        if (data.PercentBarStyle.ColumnComparison) {
+            return getColumnComparison(data.PercentBarStyle.ColumnComparison, api);
+        }
+    }
+    return React.createElement(Tag_1.Tag, null, "No Styling Defined");
+};
+exports.renderStyledColumnStyleSummary = renderStyledColumnStyleSummary;
+const StyledColumnWizardStyleSection = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const minMaxRangeValues = React.useMemo(() => {
+        const columnId = data.ColumnId;
+        if (!columnId) {
+            return null;
+        }
+        const column = api.columnApi.getColumnFromId(columnId);
+        return {
+            min: api.columnApi.getMinValueForNumericColumn(column),
+            max: api.columnApi.getMaxValueForNumericColumn(column),
+        };
+    }, [data]);
+    const scope = { ColumnIds: [data.ColumnId] }; // TODO: remove scope when format column columnStyle is removed
+    // gradient
+    const onUpdateGradientStyleRanges = (ranges) => {
+        const GradientStyle = {
+            CellRanges: ranges,
+        };
+        props.onChange(Object.assign(Object.assign({}, data), { GradientStyle }));
+    };
+    const onUpdateGradientStyleColumnComparison = (columnComparison) => {
+        const GradientStyle = {
+            ColumnComparison: columnComparison,
+        };
+        props.onChange(Object.assign(Object.assign({}, data), { GradientStyle }));
+    };
+    // percentbar
+    const onUpdatePercentBarStyleColumnComparison = (columnComparison) => {
+        const PercentBarStyle = {
+            ColumnComparison: columnComparison,
+        };
+        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle }));
+    };
+    const onUpdatePercentBarStyleRanges = (ranges) => {
+        const PercentBarStyle = {
+            CellRanges: ranges,
+        };
+        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle }));
+    };
+    const onPercentBarCellTextCellValueChanged = (checked) => {
+        let percentBarStyle = data === null || data === void 0 ? void 0 : data.PercentBarStyle;
+        if (checked) {
+            if (!percentBarStyle.CellText) {
+                percentBarStyle.CellText = ['CellValue'];
+            }
+            else {
+                percentBarStyle.CellText.push('CellValue');
+            }
+        }
+        else {
+            if (percentBarStyle.CellText && percentBarStyle.CellText.includes('PercentageValue')) {
+                percentBarStyle.CellText = ['PercentageValue'];
+            }
+            else {
+                percentBarStyle.CellText = [];
+            }
+        }
+        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
+    };
+    const onPercentBarCellTextPercentValueChanged = (checked) => {
+        let percentBarStyle = data === null || data === void 0 ? void 0 : data.PercentBarStyle;
+        if (checked) {
+            if (!percentBarStyle.CellText) {
+                percentBarStyle.CellText = ['PercentageValue'];
+            }
+            else {
+                percentBarStyle.CellText.push('PercentageValue');
+            }
+        }
+        else {
+            if (percentBarStyle.CellText && percentBarStyle.CellText.includes('CellValue')) {
+                percentBarStyle.CellText = ['CellValue'];
+            }
+            else {
+                percentBarStyle.CellText = [];
+            }
+        }
+        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
+    };
+    const onPercentBarToolTipTextCellValueChanged = (checked) => {
+        let percentBarStyle = data === null || data === void 0 ? void 0 : data.PercentBarStyle;
+        if (checked) {
+            if (!percentBarStyle.ToolTipText) {
+                percentBarStyle.ToolTipText = ['CellValue'];
+            }
+            else {
+                percentBarStyle.ToolTipText.push('CellValue');
+            }
+        }
+        else {
+            if (percentBarStyle.ToolTipText && percentBarStyle.ToolTipText.includes('PercentageValue')) {
+                percentBarStyle.ToolTipText = ['PercentageValue'];
+            }
+            else {
+                percentBarStyle.ToolTipText = [];
+            }
+        }
+        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
+    };
+    const onPercentBarToolTipTextPercentValueChanged = (checked) => {
+        let percentBarStyle = data.PercentBarStyle;
+        if (checked) {
+            if (!percentBarStyle.ToolTipText) {
+                percentBarStyle.ToolTipText = ['PercentageValue'];
+            }
+            else {
+                percentBarStyle.ToolTipText.push('PercentageValue');
+            }
+        }
+        else {
+            if (percentBarStyle.ToolTipText && percentBarStyle.ToolTipText.includes('CellValue')) {
+                percentBarStyle.ToolTipText = ['CellValue'];
+            }
+            else {
+                percentBarStyle.ToolTipText = [];
+            }
+        }
+        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
+    };
+    const onUsePercentStyleColorCheckChanged = (checked) => {
+        let percentBarStyle = data === null || data === void 0 ? void 0 : data.PercentBarStyle;
+        percentBarStyle.BackColor = checked ? (0, UIHelper_1.getHexForName)(UIHelper_1.GRAY) : null;
+        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
+    };
+    const onForeColorSelectChange = (color) => {
+        let percentBarStyle = data.PercentBarStyle;
+        percentBarStyle.BackColor = color;
+        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
+    };
+    const disabled = !data.ColumnId;
+    return (React.createElement(rebass_1.Box, null,
+        data.CheckBoxStyle && (React.createElement(Tabs_1.Tabs, null,
+            React.createElement(Tabs_1.Tabs.Tab, null, "Check Box Column"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(CheckBox_1.CheckBox, { marginLeft: 2, readOnly: true, checked: true }, "Display Column As CheckBox")))),
+        (data === null || data === void 0 ? void 0 : data.GradientStyle) && (React.createElement(RangesComponent_1.RangesComponent, { disabled: !data.ColumnId, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showRangeDirection: true, ranges: (_a = data.GradientStyle) === null || _a === void 0 ? void 0 : _a.CellRanges, columnComparison: (_b = data === null || data === void 0 ? void 0 : data.GradientStyle) === null || _b === void 0 ? void 0 : _b.ColumnComparison, updateRanges: (ranges) => onUpdateGradientStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdateGradientStyleColumnComparison(columnComparison) })),
+        data.PercentBarStyle && (React.createElement(React.Fragment, null,
+            React.createElement(RangesComponent_1.RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showRangeDirection: false, ranges: (_c = data.PercentBarStyle) === null || _c === void 0 ? void 0 : _c.CellRanges, columnComparison: (_d = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _d === void 0 ? void 0 : _d.ColumnComparison, updateRanges: (ranges) => onUpdatePercentBarStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdatePercentBarStyleColumnComparison(columnComparison) }),
+            React.createElement(FormLayout_1.default, { marginLeft: 2, marginTop: 2 },
+                React.createElement(FormLayout_1.FormRow, { label: "Cell Display:" },
+                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 2, checked: (_f = (_e = data.PercentBarStyle) === null || _e === void 0 ? void 0 : _e.CellText) === null || _f === void 0 ? void 0 : _f.includes('CellValue'), onChange: (checked) => onPercentBarCellTextCellValueChanged(checked) }, "Cell Value"),
+                    ' ',
+                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 3, checked: (_h = (_g = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _g === void 0 ? void 0 : _g.CellText) === null || _h === void 0 ? void 0 : _h.includes('PercentageValue'), onChange: (checked) => onPercentBarCellTextPercentValueChanged(checked) },
+                        "Percent Value",
+                        ' '),
+                    ' '),
+                React.createElement(FormLayout_1.FormRow, { label: "ToolTip Display:" },
+                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 2, checked: (_k = (_j = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _j === void 0 ? void 0 : _j.ToolTipText) === null || _k === void 0 ? void 0 : _k.includes('CellValue'), onChange: (checked) => onPercentBarToolTipTextCellValueChanged(checked) }, "Cell Value"),
+                    ' ',
+                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 3, checked: (_m = (_l = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _l === void 0 ? void 0 : _l.ToolTipText) === null || _m === void 0 ? void 0 : _m.includes('PercentageValue'), onChange: (checked) => onPercentBarToolTipTextPercentValueChanged(checked) },
+                        "Percent Value",
+                        ' '),
+                    ' '),
+                React.createElement(FormLayout_1.FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}` },
+                    React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
+                        React.createElement(CheckBox_1.CheckBox, { disabled: disabled, checked: !!((_o = data.PercentBarStyle) === null || _o === void 0 ? void 0 : _o.BackColor), onChange: (checked) => onUsePercentStyleColorCheckChanged(checked), mr: 2 }),
+                        ((_p = data.PercentBarStyle) === null || _p === void 0 ? void 0 : _p.BackColor) !== undefined && (React.createElement(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: (_q = data.PercentBarStyle) === null || _q === void 0 ? void 0 : _q.BackColor, onChange: (x) => onForeColorSelectChange(x) }))))))),
+        !data.ColumnId && React.createElement(ErrorBox_1.default, { mt: 2 }, "You need to select a column before styling.")));
+};
+exports.StyledColumnWizardStyleSection = StyledColumnWizardStyleSection;

package/src/View/StyledColumn/Wizard/StyledColumnWizardTypeSection.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { StyledColumn } from '../../../PredefinedConfig/StyledColumnState';
+export declare const renderStyledColumnTypeSummary: (data: StyledColumn) => JSX.Element;
+export interface StyledColumnWizardTypeSectionProps {
+    onChange: (styledColumn: StyledColumn) => void;
+}
+export declare const StyledColumnWizardTypeSection: React.FunctionComponent<StyledColumnWizardTypeSectionProps>;

package/src/View/StyledColumn/Wizard/StyledColumnWizardTypeSection.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnWizardTypeSection = exports.renderStyledColumnTypeSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
+const Tabs_1 = require("../../../components/Tabs");
+const Tag_1 = require("../../../components/Tag");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const renderStyledColumnTypeSummary = (data) => {
+    let type = null;
+    if (data.GradientStyle) {
+        type = 'Gradient Column';
+    }
+    else if (data.PercentBarStyle) {
+        type = 'Percent Bar';
+    }
+    else if (data.CheckBoxStyle) {
+        type = 'Check Box';
+    }
+    return (React.createElement(rebass_1.Text, { pr: 2, py: 2 },
+        "Type ",
+        React.createElement(Tag_1.Tag, null, type)));
+};
+exports.renderStyledColumnTypeSummary = renderStyledColumnTypeSummary;
+const StyledColumnWizardTypeSection = (props) => {
+    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const handleTypeChange = (type) => {
+        const newStyledColumn = Object.assign({}, data);
+        switch (type) {
+            case 'gradient':
+                newStyledColumn.GradientStyle = {};
+                delete newStyledColumn.PercentBarStyle;
+                delete newStyledColumn.CheckBoxStyle;
+                break;
+            case 'percent':
+                newStyledColumn.PercentBarStyle = {};
+                delete newStyledColumn.GradientStyle;
+                delete newStyledColumn.CheckBoxStyle;
+                break;
+            case 'checkbox':
+                newStyledColumn.CheckBoxStyle = true;
+                delete newStyledColumn.GradientStyle;
+                delete newStyledColumn.PercentBarStyle;
+                break;
+        }
+        newStyledColumn.ColumnId = null;
+        props.onChange(newStyledColumn);
+    };
+    return (React.createElement(rebass_1.Flex, { height: "100%", flexDirection: "column", "data-name": "styled-column-type" },
+        React.createElement(Tabs_1.Tabs, { autoFocus: false, padding: 2 },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Type"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(Radio_1.default, { checked: Boolean(data.GradientStyle), onChange: () => handleTypeChange('gradient') }, "Gradient Column"),
+                React.createElement(Radio_1.default, { onChange: () => handleTypeChange('percent'), checked: Boolean(data.PercentBarStyle) }, "Percent Bar"),
+                React.createElement(Radio_1.default, { onChange: () => handleTypeChange('checkbox'), checked: Boolean(data.CheckBoxStyle) }, "Check Box")))));
+};
+exports.StyledColumnWizardTypeSection = StyledColumnWizardTypeSection;

package/src/View/SystemStatus/SystemStatusViewPanel.d.ts

@@ -8,5 +8,5 @@ declare class SystemStatusViewPanelComponent extends React.Component<SystemStatu
     constructor(props: SystemStatusViewPanelComponentProps);
     render(): JSX.Element;
 }
-export declare let SystemStatusViewPanel: import("react-redux").ConnectedComponent<typeof SystemStatusViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<SystemStatusViewPanelComponent> & SystemStatusViewPanelComponentProps, "api" | "moduleInfo" | "accessLevel" | "SystemStatusMessageInfos" | "viewType">>;
+export declare let SystemStatusViewPanel: import("react-redux").ConnectedComponent<typeof SystemStatusViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<SystemStatusViewPanelComponent> & SystemStatusViewPanelComponentProps, "api" | "accessLevel" | "moduleInfo" | "SystemStatusMessageInfos" | "viewType">>;
 export {};

package/src/View/Wizard/OnePageAdaptableWizard.d.ts

@@ -22,7 +22,7 @@ export interface OnePageAdaptableWizardSection<ENTITY> {
     isValid?: (data: ENTITY, api: AdaptableApi, context: OnePageAdaptableWizardContextType<ENTITY>) => true | string;
     isVisible?: (data: ENTITY, api: AdaptableApi, context: OnePageAdaptableWizardContextType<ENTITY>) => boolean;
     render: (data: ENTITY, index: number) => React.ReactNode;
-    renderSummary?: (data: ENTITY) => React.ReactNode;
+    renderSummary?: (data: ENTITY, api: AdaptableApi) => React.ReactNode;
 }
 export interface OnePageAdaptableWizardProps<ENTITY> {
     moduleInfo: ModuleInfo;

package/src/agGrid/Adaptable.d.ts

@@ -157,6 +157,8 @@ export declare class Adaptable implements IAdaptable {
     updateColumnsIntoStore(): void;
     private createAdaptableColumn;
     private safeSetColDefs;
+    private getStyledColumnStyle;
+    private getSpecialColumnStyle;
     private getFormatColumnSpecialColumnStyle;
     private getFormatColumnColumnStyle;
     private getFormatColumnCellStyle;
@@ -365,7 +367,6 @@ export declare class Adaptable implements IAdaptable {
     private setupColumnHeaderAggregations;
     private getConditionalStyleRowClass;
     private getConditionalStyleRowStyle;
-    private getFormatColumnRowStyle;
     private getGridOptionsApi;
     canGenerateCharts(): boolean;
     canHaveSparklines(): boolean;

package/src/agGrid/Adaptable.js

@@ -349,9 +349,9 @@ class Adaptable {
                 this.renderReactRoot = (el, container) => {
                     const unmount = runtimeConfig.renderReactRoot(el, container);
                     return () => {
-                        // we're doing this because of FloatingFilters - in our FloatingFilterWrapper component,
-                        // in the .destroy, we're unmounting, but this is done while aggrid is rendering
-                        // and can't be fixed by us as it's done during an AggridReact rendering operation
+                        // we used to capture here because of FloatingFilters/Filters - see FloatingFilterWrapper and FilterWrapper
+                        // as we didn't have a native React implementation for our React wrapper
+                        // but we might need to do this again in the future for some other components that are not native React
                         // captureReactWarnings();
                         if (typeof unmount === 'function') {
                             unmount();
@@ -911,13 +911,15 @@ class Adaptable {
         this.gridOptions.api.setColumnDefs(colDefs);
         this.updateColumnsIntoStore(); // todo remove this from here!!!
     }
-    getFormatColumnSpecialColumnStyle(formatColumn, abColumn, params) {
-        const columnStyle = formatColumn.ColumnStyle;
+    getStyledColumnStyle(styledColumn, abColumn, params) {
+        return this.getSpecialColumnStyle(styledColumn, abColumn, params);
+    }
+    getSpecialColumnStyle(columnStyle, abColumn, params) {
         let style = {};
         const gradientStyle = columnStyle === null || columnStyle === void 0 ? void 0 : columnStyle.GradientStyle;
         if (gradientStyle) {
-            const min = this.api.formatColumnApi.getNumericStyleMinValue(columnStyle, abColumn, params.node, params.value);
-            const max = this.api.formatColumnApi.getNumericStyleMaxValue(columnStyle, abColumn, params.node, params.value);
+            const min = this.api.styledColumnApi.getNumericStyleMinValue(columnStyle, abColumn, params.node, params.value);
+            const max = this.api.styledColumnApi.getNumericStyleMaxValue(columnStyle, abColumn, params.node, params.value);
             const clampedValue = (0, clamp_1.default)(params.value, min, max);
             let cellBackColor;
             let reverseGradient = false;
@@ -947,10 +949,26 @@ class Adaptable {
         }
         return style;
     }
+    getFormatColumnSpecialColumnStyle(formatColumn, abColumn, params) {
+        return this.getSpecialColumnStyle(formatColumn.ColumnStyle, abColumn, params);
+    }
     getFormatColumnColumnStyle(formatColumns) {
         // first has more precedence, then they need to be applied in reverse order
         return formatColumns.reduceRight((style, formatColumn) => {
             const formatColumnStyle = this.convertAdaptableStyleToCSS(formatColumn.Style);
+            if (formatColumn.CellAlignment) {
+                switch (formatColumn.CellAlignment) {
+                    case 'Left':
+                        style.textAlign = 'left';
+                        break;
+                    case 'Right':
+                        style.textAlign = 'right';
+                        break;
+                    case 'Center':
+                        style.textAlign = 'center';
+                        break;
+                }
+            }
             return Object.assign(Object.assign({}, style), formatColumnStyle);
         }, {});
     }
@@ -974,19 +992,6 @@ class Adaptable {
             }
             style = Object.assign(Object.assign({}, style), this.getFormatColumnColumnStyle(activeFormatColumnsWithStyle));
         }
-        if (formatColumn.CellAlignment) {
-            switch (formatColumn.CellAlignment) {
-                case 'Left':
-                    style.textAlign = 'left';
-                    break;
-                case 'Right':
-                    style.textAlign = 'right';
-                    break;
-                case 'Center':
-                    style.textAlign = 'center';
-                    break;
-            }
-        }
         return style;
     }
     getFormatColumnCellClass(formatColumns, abColumn, params) {
@@ -3205,16 +3210,20 @@ class Adaptable {
             };
             const formatColumn = this.api.formatColumnApi.getActiveFormatColumnForColumn(abColumn);
             const formatColumnsWithStyle = this.api.formatColumnApi.getColumnFormatColumnsWithStyle(abColumn);
+            let styledColumn = this.api.styledColumnApi.getStyledColumnByColumnId(colId);
+            if (styledColumn === null || styledColumn === void 0 ? void 0 : styledColumn.IsSuspended) {
+                styledColumn = null;
+            }
             const conditionalStyles = this.api.conditionalStyleApi.getConditionalStylesForColumn(abColumn);
             const quickSearchStyle = this.getQuickSearchCellStyle();
             const hasQuickSearchStyle = quickSearchStyle != undefined;
             const cellStyle = (params) => {
-                const formatColumnCellStyle = formatColumn
+                const formatColumnCellStyle = formatColumn && !styledColumn // TODO: remove after refactor columnStyle
                     ? this.getFormatColumnCellStyle(abColumn, formatColumn, formatColumnsWithStyle, params)
                     : undefined;
                 const isQuickSearchActive = hasQuickSearchStyle && this.isQuickSearchActive(abColumn, params);
                 const conditionalStyleObj = this.getConditionalStyleCellStyle(conditionalStyles, abColumn, params);
-                const result = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultCellStyle), this.getReadOnlyCellStyle(abColumn, params)), this.getEditableCellStyle(abColumn, params)), (typeof userCellStyle === 'function' ? userCellStyle(params) : userCellStyle)), formatColumnCellStyle), conditionalStyleObj), (isQuickSearchActive ? quickSearchStyle : undefined)), this.getAlertCellStyle(abColumn, params)), this.getFlashingCellStyle(abColumn, params)), this.getCellHighlightStyle(abColumn, params));
+                const result = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultCellStyle), this.getReadOnlyCellStyle(abColumn, params)), this.getEditableCellStyle(abColumn, params)), (typeof userCellStyle === 'function' ? userCellStyle(params) : userCellStyle)), formatColumnCellStyle), (styledColumn ? this.getStyledColumnStyle(styledColumn, abColumn, params) : {})), conditionalStyleObj), (isQuickSearchActive ? quickSearchStyle : undefined)), this.getAlertCellStyle(abColumn, params)), this.getFlashingCellStyle(abColumn, params)), this.getCellHighlightStyle(abColumn, params));
                 return result;
             };
             return cellStyle;
@@ -3236,10 +3245,12 @@ class Adaptable {
                 const readonlyClassName = this.getReadonlyCellClass(abColumn, params);
                 const highlightAlertClassName = this.getAlertCellClass(abColumn, params);
                 const flashingClassName = this.getFlashingCellClass(abColumn, params);
+                const styledColumn = this.api.styledColumnApi.getStyledColumnByColumnId(colId);
+                const hasStyledColumn = !!styledColumn && !styledColumn.IsSuspended;
                 const returnValue = [
                     this.getExcelClassNameForCell(colId, primaryKeyValue),
                     typeof userCellClass === 'function' ? userCellClass(params) : userCellClass,
-                    formatColumns.length
+                    !hasStyledColumn && formatColumns.length
                         ? this.getFormatColumnCellClass(formatColumns, abColumn, params)
                         : null,
                     hasConditionalStylesWithClassNames
@@ -3254,7 +3265,9 @@ class Adaptable {
                     // we flatten the array because some rules ('userCellClass',conditionalStyles etc)  might return a string[]
                     .flat()
                     .filter((x) => !!x);
-                return returnValue.length ? returnValue : undefined;
+                const result = returnValue.length ? returnValue : undefined;
+                // console.log(result);
+                return result;
             };
             return cellClass;
         });
@@ -3300,10 +3313,19 @@ class Adaptable {
     }
     setupColumnCellRenderer({ col, colId, abColumn }) {
         this.setColDefProperty(col, 'cellRenderer', () => {
+            const styledColumn = this.api.styledColumnApi.getStyledColumnByColumnId(abColumn.columnId);
+            if (styledColumn && !styledColumn.IsSuspended) {
+                if (styledColumn.PercentBarStyle) {
+                    return this.agGridHelper.createPercentBarRendererComp(styledColumn, abColumn);
+                }
+                if (styledColumn.CheckBoxStyle) {
+                    return this.agGridHelper.createCheckboxRendererComp(abColumn.columnId, abColumn.readOnly);
+                }
+            }
             const formatColumn = this.api.formatColumnApi.getActiveFormatColumnForColumn(abColumn);
             if (formatColumn && !(formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.IsSuspended) && formatColumn.ColumnStyle) {
                 if (formatColumn.ColumnStyle.PercentBarStyle) {
-                    return this.agGridHelper.createPercentBarRendererComp(formatColumn, abColumn);
+                    return this.agGridHelper.createPercentBarRendererComp(formatColumn.ColumnStyle, abColumn);
                 }
                 if (formatColumn.ColumnStyle.CheckBoxStyle) {
                     return this.agGridHelper.createCheckboxRendererComp(abColumn.columnId, abColumn.readOnly);
@@ -3322,8 +3344,8 @@ class Adaptable {
                 formatColumn.ColumnStyle.PercentBarStyle.ToolTipText) {
                 if ((_a = formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.ColumnStyle) === null || _a === void 0 ? void 0 : _a.PercentBarStyle) {
                     return (params) => {
-                        const min = this.api.formatColumnApi.getNumericStyleMinValue(formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.ColumnStyle, abColumn, params.node, params.value);
-                        const max = this.api.formatColumnApi.getNumericStyleMaxValue(formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.ColumnStyle, abColumn, params.node, params.value);
+                        const min = this.api.styledColumnApi.getNumericStyleMinValue(formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.ColumnStyle, abColumn, params.node, params.value);
+                        const max = this.api.styledColumnApi.getNumericStyleMaxValue(formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.ColumnStyle, abColumn, params.node, params.value);
                         const textOptions = formatColumn.ColumnStyle.PercentBarStyle.ToolTipText;
                         let returnValue = '';
                         if (textOptions.includes('CellValue')) {
@@ -4443,14 +4465,6 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
             }
         }
     }
-    getFormatColumnRowStyle(formatColumns, params) {
-        if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(formatColumns)) {
-            const formatColumnWithRowStyle = formatColumns.find((formatColumn) => this.api.formatColumnApi.isFormatColumnActiveForRow(formatColumn, params));
-            if (formatColumnWithRowStyle) {
-                return this.convertAdaptableStyleToCSS(formatColumnWithRowStyle.Style);
-            }
-        }
-    }
     getGridOptionsApi() {
         if (!this.gridOptions.api) {
             (0, LoggingHelper_1.ConsoleLogError)('There is a problem with your instance of AG Grid - it has no gridApi object.  Please contact Support.');

package/src/agGrid/FilterWrapper.js

@@ -1,30 +1,72 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterWrapperFactory = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
 const FilterForm_1 = require("../View/Components/FilterForm/FilterForm");
 let FilterWrapperFactory = (adaptable) => {
+    function isFilterActive(colId) {
+        // we need this here
+        if (adaptable.isDestroyed) {
+            return false;
+        }
+        //make the small filter icon to appear when there is a filter
+        return adaptable.api.filterApi.getColumnFilters().findIndex((x) => x.ColumnId == colId) > -1;
+    }
+    function getFilterContext(colId, hidePopup) {
+        let column = adaptable.api.columnApi.getColumnFromId(colId);
+        let filterContext = {
+            Column: column,
+            Adaptable: adaptable,
+            ShowCloseButton: hidePopup,
+        };
+        return filterContext;
+    }
+    function getContainerId(colId) {
+        return 'filter_' + colId + '_' + adaptable.adaptableOptions.adaptableId;
+    }
+    if (adaptable.variant === 'react') {
+        return (0, react_1.forwardRef)(function ReactFilterWrapper(props, ref) {
+            const [filterContext, setFilterContext] = (0, react_1.useState)(null);
+            const colId = props.column.getId();
+            const column = adaptable.api.columnApi.getColumnFromId(colId);
+            (0, react_1.useImperativeHandle)(ref, () => {
+                return {
+                    isFilterActive: () => isFilterActive(colId),
+                    afterGuiAttached: (params) => {
+                        var _a;
+                        const hidePopup = (_a = params === null || params === void 0 ? void 0 : params.hidePopup) !== null && _a !== void 0 ? _a : null;
+                        const filterContext = getFilterContext(colId, !!hidePopup);
+                        adaptable.hideFilterFormPopup = hidePopup;
+                        setFilterContext(filterContext);
+                    },
+                    getModel: () => { },
+                    setModel: () => { },
+                    //we do not filter here.... we filter using the doesExternalFilterPass. Not sure there is a difference....
+                    doesFilterPass: () => true,
+                };
+            });
+            if (!column || !filterContext) {
+                return null;
+            }
+            return React.createElement("div", { id: getContainerId(colId) }, (0, FilterForm_1.FilterFormReact)(filterContext));
+        });
+    }
     return class FilterWrapper {
         init(params) {
             this.params = params;
             this.column = params.column;
             this.filterContainer = document.createElement('div');
-            this.filterContainer.id =
-                'filter_' + this.params.column.getColId() + '_' + adaptable.adaptableOptions.adaptableId;
-        }
-        isFilterActive() {
-            // we need this here
-            if (adaptable.isDestroyed) {
-                return false;
-            }
-            //make the small filter icon to appear when there is a filter
-            return (adaptable.api.filterApi
-                .getColumnFilters()
-                .findIndex((x) => x.ColumnId == this.params.column.getColId()) > -1);
+            this.filterContainer.id = getContainerId(this.params.column.getColId());
         }
         doesFilterPass(params) {
             //we do not filter here.... we filter using the doesExternalFilterPass. Not sure there is a difference....
             return true;
         }
+        isFilterActive() {
+            return isFilterActive(this.params.column.getColId());
+        }
         getModel() {
             //
         }
@@ -35,17 +77,14 @@ let FilterWrapperFactory = (adaptable) => {
             return this.filterContainer;
         }
         afterGuiAttached(params) {
-            var _a;
+            var _a, _b;
             //we always unmount first so the autofocus from the form works... in other grids we unmount when hidden
             (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
             let column = adaptable.api.columnApi.getColumnFromId(this.column.getColId());
             if (column) {
-                let filterContext = {
-                    Column: column,
-                    Adaptable: adaptable,
-                    ShowCloseButton: params != null && params.hidePopup != null,
-                };
-                adaptable.hideFilterFormPopup = params ? params.hidePopup : null;
+                const hidePopup = (_b = params === null || params === void 0 ? void 0 : params.hidePopup) !== null && _b !== void 0 ? _b : null;
+                const filterContext = getFilterContext(this.column.getColId(), !!hidePopup);
+                adaptable.hideFilterFormPopup = hidePopup;
                 this.unmountReactRoot = adaptable.renderReactRoot((0, FilterForm_1.FilterFormReact)(filterContext), this.filterContainer);
             }
         }