@adaptabletools/adaptable 14.0.0-canary.0 → 14.0.0-canary.1

package/src/View/FormatColumn/Wizard/FormatColumnStyleWizardSection.js

@@ -4,333 +4,38 @@ exports.FormatColumnStyleWizardSection = exports.renderFormatColumnStyleSummary
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
-const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
-const CheckBox_1 = require("../../../components/CheckBox");
 const StyleHelper_1 = require("../../../Utilities/Helpers/StyleHelper");
 const StyleComponent_1 = require("../../Components/StyleComponent");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const Tabs_1 = require("../../../components/Tabs");
-const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
-const RangesComponent_1 = require("../../Components/RangesComponent");
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
-const ColorPicker_1 = require("../../ColorPicker");
-const UIHelper_1 = tslib_1.__importStar(require("../../UIHelper"));
-const StyleVisualItem_1 = require("../../Components/StyleVisualItem");
+const UIHelper_1 = tslib_1.__importDefault(require("../../UIHelper"));
 const isFormatColumnStyleValid = (data, api) => {
-    var _a, _b, _c, _d, _e;
-    if (!data.ColumnStyle &&
-        data.Style &&
+    if (data.Style &&
         UIHelper_1.default.IsEmptyStyle(data.Style) &&
         data.DisplayFormat === undefined &&
-        data.HeaderName === undefined &&
         data.CellAlignment === undefined &&
         !api.scopeApi.isSingleBooleanColumnScope(data.Scope)) {
         return 'No format applied';
     }
-    if ((_c = (_b = (_a = data.ColumnStyle) === null || _a === void 0 ? void 0 : _a.PercentBarStyle) === null || _b === void 0 ? void 0 : _b.CellRanges) === null || _c === void 0 ? void 0 : _c.length) {
-        if (data.ColumnStyle.PercentBarStyle.CellRanges.some((cellRange) => cellRange.Min == undefined || cellRange.Max == undefined)) {
-            return 'Invalid Cell Range';
-        }
-    }
-    if ((_e = (_d = data.ColumnStyle) === null || _d === void 0 ? void 0 : _d.PercentBarStyle) === null || _e === void 0 ? void 0 : _e.ColumnComparison) {
-        if (data.ColumnStyle.PercentBarStyle.ColumnComparison.MinValue == undefined ||
-            data.ColumnStyle.PercentBarStyle.ColumnComparison.MaxValue == undefined) {
-            return 'Invalid Column Comparison Range';
-        }
-    }
     return true;
 };
 exports.isFormatColumnStyleValid = isFormatColumnStyleValid;
 const toStyle = (style) => {
     return Object.assign(Object.assign({}, (0, StyleHelper_1.convertAdaptableStyleToCSS)(style !== null && style !== void 0 ? style : {})), { borderWidth: (style === null || style === void 0 ? void 0 : style.BorderColor) ? 2 : 0, borderStyle: 'solid' });
 };
-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 renderFormatColumnStyleWizardSummary = (data) => {
     const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     return (0, exports.renderFormatColumnStyleSummary)(data, api);
 };
 exports.renderFormatColumnStyleWizardSummary = renderFormatColumnStyleWizardSummary;
 const renderFormatColumnStyleSummary = (data, api) => {
-    if (data.ColumnStyle) {
-        if (data.ColumnStyle.CheckBoxStyle) {
-            return 'Checkbox Style';
-        }
-        if (data.ColumnStyle.GradientStyle) {
-            if (data.ColumnStyle.GradientStyle.CellRanges) {
-                return getRanges(data.ColumnStyle.GradientStyle.CellRanges);
-            }
-            if (data.ColumnStyle.GradientStyle.ColumnComparison) {
-                return getColumnComparison(data.ColumnStyle.GradientStyle.ColumnComparison, api);
-            }
-        }
-        if (data.ColumnStyle.PercentBarStyle) {
-            if (data.ColumnStyle.PercentBarStyle.CellRanges) {
-                return getRanges(data.ColumnStyle.PercentBarStyle.CellRanges);
-            }
-            if (data.ColumnStyle.PercentBarStyle.ColumnComparison) {
-                return getColumnComparison(data.ColumnStyle.PercentBarStyle.ColumnComparison, api);
-            }
-        }
-        if (data.Style == null || UIHelper_1.default.IsEmptyStyle(data.Style)) {
-            return '[None]';
-        }
-        return React.createElement(StyleVisualItem_1.StyleVisualItem, { Style: data.Style });
-    }
-    return (React.createElement(rebass_1.Text, { padding: 2, style: toStyle(data.Style) }, "Preview result"));
+    return (React.createElement(rebass_1.Text, { className: "ab-FormatPreview", padding: 2, style: toStyle(data.Style) }, "Preview result"));
 };
 exports.renderFormatColumnStyleSummary = renderFormatColumnStyleSummary;
 function FormatColumnStyleWizardSection(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
+    var _a;
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const singleNumericColumn = api.scopeApi.isSingleNumericColumnScope(data.Scope);
-    const onlyBooleanColumnsInScope = api.scopeApi.areAllBooleanColumnsInScope(data.Scope) ||
-        api.scopeApi.scopeHasOnlyBooleanDataType(data.Scope);
-    const onPercentBarCellTextCellValueChanged = (checked) => {
-        var _a;
-        let percentBarStyle = (_a = data.ColumnStyle) === null || _a === void 0 ? void 0 : _a.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), { ColumnStyle: {
-                PercentBarStyle: percentBarStyle,
-            } }));
-    };
-    const onPercentBarCellTextPercentValueChanged = (checked) => {
-        var _a;
-        let percentBarStyle = (_a = data.ColumnStyle) === null || _a === void 0 ? void 0 : _a.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), { ColumnStyle: {
-                PercentBarStyle: percentBarStyle,
-            } }));
-    };
-    const onPercentBarToolTipTextCellValueChanged = (checked) => {
-        var _a;
-        let percentBarStyle = (_a = data.ColumnStyle) === null || _a === void 0 ? void 0 : _a.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), { ColumnStyle: {
-                PercentBarStyle: percentBarStyle,
-            } }));
-    };
-    const onPercentBarToolTipTextPercentValueChanged = (checked) => {
-        var _a;
-        let percentBarStyle = (_a = data.ColumnStyle) === null || _a === void 0 ? void 0 : _a.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), { ColumnStyle: {
-                PercentBarStyle: percentBarStyle,
-            } }));
-    };
-    const onUpdatePercentBarStyleColumnComparison = (columnComparison) => {
-        let ColumnStyle = {
-            PercentBarStyle: {
-                ColumnComparison: columnComparison,
-            },
-        };
-        props.onChange(Object.assign(Object.assign({}, data), { ColumnStyle }));
-    };
-    const onUsePercentStyleColorCheckChanged = (checked) => {
-        var _a;
-        let percentBarStyle = (_a = data.ColumnStyle) === null || _a === void 0 ? void 0 : _a.PercentBarStyle;
-        percentBarStyle.BackColor = checked ? (0, UIHelper_1.getHexForName)(UIHelper_1.GRAY) : null;
-        props.onChange(Object.assign(Object.assign({}, data), { ColumnStyle: {
-                PercentBarStyle: percentBarStyle,
-            } }));
-    };
-    const onForeColorSelectChange = (color) => {
-        var _a;
-        let percentBarStyle = (_a = data.ColumnStyle) === null || _a === void 0 ? void 0 : _a.PercentBarStyle;
-        percentBarStyle.BackColor = color;
-        props.onChange(Object.assign(Object.assign({}, data), { ColumnStyle: {
-                PercentBarStyle: percentBarStyle,
-            } }));
-    };
-    const onUpdatePercentBarStyleRanges = (ranges) => {
-        let ColumnStyle = {
-            PercentBarStyle: {
-                CellRanges: ranges,
-            },
-        };
-        props.onChange(Object.assign(Object.assign({}, data), { ColumnStyle }));
-    };
-    const onUpdateGradientStyleRanges = (ranges) => {
-        let ColumnStyle = {
-            GradientStyle: {
-                CellRanges: ranges,
-            },
-        };
-        props.onChange(Object.assign(Object.assign({}, data), { ColumnStyle }));
-    };
-    const onUpdateGradientStyleColumnComparison = (columnComparison) => {
-        let ColumnStyle = {
-            GradientStyle: {
-                ColumnComparison: columnComparison,
-            },
-        };
-        props.onChange(Object.assign(Object.assign({}, data), { ColumnStyle }));
-    };
-    const onStyleTypeChanged = (event) => {
-        let e = event.target;
-        if (e.value == 'Gradient') {
-            props.onChange(Object.assign(Object.assign({}, data), { ColumnStyle: {
-                    GradientStyle: {
-                        CellRanges: api.scopeApi.createCellColorRangesForScope(data.Scope),
-                    },
-                } }));
-        }
-        else if (e.value == 'PercentBar') {
-            props.onChange(Object.assign(Object.assign({}, data), { ColumnStyle: {
-                    PercentBarStyle: {
-                        CellRanges: api.scopeApi.createCellColorRangesForScope(data.Scope),
-                    },
-                } }));
-        }
-        else if (e.value == 'None') {
-            const newData = Object.assign({}, data);
-            delete newData.ColumnStyle;
-            props.onChange(newData);
-        }
-    };
-    return (React.createElement(React.Fragment, null,
-        onlyBooleanColumnsInScope && (React.createElement(Tabs_1.Tabs, null,
-            React.createElement(Tabs_1.Tabs.Tab, null, "CheckBox Column"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(HelpBlock_1.default, { fontSize: 2 }, "Shows each cell in the Column as a Checkbox"),
-                ' ',
-                React.createElement(CheckBox_1.CheckBox, { marginLeft: 2, checked: !!((_a = data.ColumnStyle) === null || _a === void 0 ? void 0 : _a.CheckBoxStyle), onChange: (CheckBoxStyle) => {
-                        const formatColumn = Object.assign(Object.assign({}, data), { ColumnStyle: {
-                                CheckBoxStyle,
-                            } });
-                        if (!CheckBoxStyle) {
-                            delete formatColumn.ColumnStyle;
-                        }
-                        props.onChange(formatColumn);
-                    } }, "Display Column As CheckBox")))),
-        singleNumericColumn ? (React.createElement(React.Fragment, null,
-            React.createElement(Tabs_1.Tabs, null,
-                React.createElement(Tabs_1.Tabs.Tab, null, "Create a Format Column Style"),
-                React.createElement(Tabs_1.Tabs.Content, null,
-                    React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                        React.createElement(Radio_1.default, { marginLeft: 2, value: "None", checked: !data.ColumnStyle, onChange: (checked, e) => onStyleTypeChanged(e) }, "Standard"),
-                        ' ',
-                        React.createElement(Radio_1.default, { marginLeft: 3, value: "Gradient", checked: !!((_b = data.ColumnStyle) === null || _b === void 0 ? void 0 : _b.GradientStyle), onChange: (checked, e) => onStyleTypeChanged(e) }, "Gradient"),
-                        ' ',
-                        React.createElement(Radio_1.default, { marginLeft: 3, value: "PercentBar", checked: !!((_c = data.ColumnStyle) === null || _c === void 0 ? void 0 : _c.PercentBarStyle), onChange: (checked, e) => onStyleTypeChanged(e) },
-                            "Percent Bar",
-                            ' '),
-                        ' '))),
-            ((_d = data.ColumnStyle) === null || _d === void 0 ? void 0 : _d.GradientStyle) && (React.createElement(RangesComponent_1.RangesComponent, { api: api, scope: data === null || data === void 0 ? void 0 : data.Scope, showRangeDirection: true, ranges: (_f = (_e = data.ColumnStyle) === null || _e === void 0 ? void 0 : _e.GradientStyle) === null || _f === void 0 ? void 0 : _f.CellRanges, columnComparison: (_h = (_g = data === null || data === void 0 ? void 0 : data.ColumnStyle) === null || _g === void 0 ? void 0 : _g.GradientStyle) === null || _h === void 0 ? void 0 : _h.ColumnComparison, updateRanges: (ranges) => onUpdateGradientStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdateGradientStyleColumnComparison(columnComparison) })),
-            ((_j = data.ColumnStyle) === null || _j === void 0 ? void 0 : _j.PercentBarStyle) && (React.createElement(React.Fragment, null,
-                React.createElement(RangesComponent_1.RangesComponent, { api: api, scope: data === null || data === void 0 ? void 0 : data.Scope, showRangeDirection: false, ranges: (_l = (_k = data.ColumnStyle) === null || _k === void 0 ? void 0 : _k.PercentBarStyle) === null || _l === void 0 ? void 0 : _l.CellRanges, columnComparison: (_o = (_m = data === null || data === void 0 ? void 0 : data.ColumnStyle) === null || _m === void 0 ? void 0 : _m.PercentBarStyle) === null || _o === void 0 ? void 0 : _o.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, { marginLeft: 2, checked: (_r = (_q = (_p = data.ColumnStyle) === null || _p === void 0 ? void 0 : _p.PercentBarStyle) === null || _q === void 0 ? void 0 : _q.CellText) === null || _r === void 0 ? void 0 : _r.includes('CellValue'), onChange: (checked) => onPercentBarCellTextCellValueChanged(checked) }, "Cell Value"),
-                        ' ',
-                        React.createElement(CheckBox_1.CheckBox, { marginLeft: 3, checked: (_u = (_t = (_s = data.ColumnStyle) === null || _s === void 0 ? void 0 : _s.PercentBarStyle) === null || _t === void 0 ? void 0 : _t.CellText) === null || _u === void 0 ? void 0 : _u.includes('PercentageValue'), onChange: (checked) => onPercentBarCellTextPercentValueChanged(checked) },
-                            "Percent Value",
-                            ' '),
-                        ' '),
-                    React.createElement(FormLayout_1.FormRow, { label: "ToolTip Display:" },
-                        React.createElement(CheckBox_1.CheckBox, { marginLeft: 2, checked: (_x = (_w = (_v = data.ColumnStyle) === null || _v === void 0 ? void 0 : _v.PercentBarStyle) === null || _w === void 0 ? void 0 : _w.ToolTipText) === null || _x === void 0 ? void 0 : _x.includes('CellValue'), onChange: (checked) => onPercentBarToolTipTextCellValueChanged(checked) }, "Cell Value"),
-                        ' ',
-                        React.createElement(CheckBox_1.CheckBox, { marginLeft: 3, checked: (_0 = (_z = (_y = data.ColumnStyle) === null || _y === void 0 ? void 0 : _y.PercentBarStyle) === null || _z === void 0 ? void 0 : _z.ToolTipText) === null || _0 === void 0 ? void 0 : _0.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, { checked: !!((_2 = (_1 = data.ColumnStyle) === null || _1 === void 0 ? void 0 : _1.PercentBarStyle) === null || _2 === void 0 ? void 0 : _2.BackColor), onChange: (checked) => onUsePercentStyleColorCheckChanged(checked), mr: 2 }),
-                            ((_4 = (_3 = data.ColumnStyle) === null || _3 === void 0 ? void 0 : _3.PercentBarStyle) === null || _4 === void 0 ? void 0 : _4.BackColor) !== undefined && (React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_6 = (_5 = data.ColumnStyle) === null || _5 === void 0 ? void 0 : _5.PercentBarStyle) === null || _6 === void 0 ? void 0 : _6.BackColor, onChange: (x) => onForeColorSelectChange(x) }))))),
-                React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2 }))))) : null,
-        !data.ColumnStyle ? (React.createElement(StyleComponent_1.StyleComponent, { headless: true, api: api, Style: (_7 = data.Style) !== null && _7 !== void 0 ? _7 : {}, UpdateStyle: (Style) => {
-                props.onChange(Object.assign(Object.assign({}, data), { Style }));
-            } })) : null));
+    return (React.createElement(StyleComponent_1.StyleComponent, { headless: true, api: api, Style: (_a = data.Style) !== null && _a !== void 0 ? _a : {}, UpdateStyle: (Style) => {
+            props.onChange(Object.assign(Object.assign({}, data), { Style }));
+        } }));
 }
 exports.FormatColumnStyleWizardSection = FormatColumnStyleWizardSection;

package/src/View/FormatColumn/Wizard/FormatColumnWizard.js

@@ -17,6 +17,9 @@ const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/Obje
 const react_redux_1 = require("react-redux");
 const FormatColumnRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/FormatColumnRedux"));
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
+const Utilities_1 = require("../../Components/EntityRulesEditor/Utilities");
+const FormatColumnRuleWizardSection_1 = require("./FormatColumnRuleWizardSection");
+const constants_1 = require("./constants");
 const adjustDisplayFormat = (formatColumn, api) => {
     formatColumn = Object.assign({}, formatColumn);
     const formatDataType = (0, FormatColumnFormatWizardSection_1.getFormatDisplayTypeForScope)(formatColumn.Scope, api);
@@ -27,48 +30,27 @@ const adjustDisplayFormat = (formatColumn, api) => {
         formatDataType === 'Number') {
         formatColumn.DisplayFormat = {
             Formatter: 'NumberFormatter',
-            Options: {
-                FractionDigits: undefined,
-                FractionSeparator: '.',
-                IntegerDigits: undefined,
-                IntegerSeparator: ',',
-                Prefix: '',
-                Suffix: '',
-                Multiplier: 1,
-                Parentheses: false,
-            },
+            Options: {},
         };
     }
     if ((!formatColumn.DisplayFormat || formatColumn.DisplayFormat.Formatter !== 'DateFormatter') &&
         formatDataType === 'Date') {
         formatColumn.DisplayFormat = {
             Formatter: 'DateFormatter',
-            Options: {
-                Pattern: 'MM/dd/yyyy',
-            },
+            Options: {},
         };
     }
     if ((!formatColumn.DisplayFormat || formatColumn.DisplayFormat.Formatter !== 'StringFormatter') &&
         formatDataType === 'String') {
         formatColumn.DisplayFormat = {
             Formatter: 'StringFormatter',
-            Options: {
-                Case: undefined,
-                Trim: false,
-            },
+            Options: {},
         };
     }
     return formatColumn;
 };
 const adjustFormatColumn = (formatColumn, api) => {
     formatColumn = adjustDisplayFormat(formatColumn, api);
-    if (!api.scopeApi.isSingleNumericColumnScope(formatColumn.Scope) &&
-        !(api.scopeApi.areAllBooleanColumnsInScope(formatColumn.Scope) ||
-            api.scopeApi.scopeHasOnlyBooleanDataType(formatColumn.Scope))) {
-        // when people change the scope and select more than one (numeric) column
-        // we have to discard any column style we might have
-        delete formatColumn.ColumnStyle;
-    }
     return formatColumn;
 };
 function FormatColumnWizard(props) {
@@ -105,7 +87,7 @@ function FormatColumnWizard(props) {
     return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: formatColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Scope',
-                details: 'Apply formatting to: one or more Columns or Data Types or the whole row',
+                details: 'Select which Columns will be formatted',
                 isValid: NewScopeComponent_1.isScopeValid,
                 renderSummary: FormatColumnScopeWizardSection_1.renderFormatColumnScopeSummary,
                 render: () => {
@@ -113,9 +95,19 @@ function FormatColumnWizard(props) {
                         React.createElement(FormatColumnScopeWizardSection_1.FormatColumnScopeWizardSection, { onChange: setFormatColumn })));
                 },
             },
+            {
+                isValid: (abObject, api, context) => {
+                    return abObject.Rule ? (0, Utilities_1.isRuleValid)(abObject, api, context) : true;
+                },
+                title: 'Condition',
+                details: 'Build a Rule when the Format Column should be applied',
+                render: () => {
+                    return (React.createElement(FormatColumnRuleWizardSection_1.FormatColumnRuleWizardSection, { onChange: setFormatColumn, defaultPredicateId: constants_1.DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN }));
+                },
+            },
             {
                 title: 'Style',
-                details: 'Format Column Style',
+                details: 'Create a Style for the Format Column',
                 isValid: FormatColumnStyleWizardSection_1.isFormatColumnStyleValid,
                 renderSummary: FormatColumnStyleWizardSection_1.renderFormatColumnStyleWizardSummary,
                 render: () => {

package/src/View/FormatColumn/Wizard/constants.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN = "NonBlanks";

package/src/View/FormatColumn/Wizard/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN = void 0;
+exports.DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN = 'NonBlanks';

package/src/View/FreeTextColumn/Wizard/FreeTextColumnSettingsWizardSection.js

@@ -106,15 +106,15 @@ const FreeTextColumnSettingsWizardSection = (props) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(FormLayout_1.default, null,
             React.createElement(FormLayout_1.FormRow, { label: "ColumnId" },
-                React.createElement(Input_1.default, { autoFocus: !inEdit, value: data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, disabled: inEdit, type: "text", placeholder: "Enter an id", onChange: (e) => handleColumnIdChange(e) })),
+                React.createElement(Input_1.default, { "data-name": "column-id", autoFocus: !inEdit, value: data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, disabled: inEdit, type: "text", placeholder: "Enter an id", onChange: (e) => handleColumnIdChange(e) })),
             React.createElement(FormLayout_1.FormRow, { label: "Column Name" },
-                React.createElement(Input_1.default, { autoFocus: inEdit, onFocus: () => {
+                React.createElement(Input_1.default, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
                         setColumnNameFocused(true);
                     }, onBlur: () => {
                         setColumnNameFocused(false);
                     }, value: ColumnNameFocused ? data.FriendlyName || '' : data.FriendlyName || data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, type: "text", placeholder: "Enter a name", onChange: (e) => handleColumnNameChange(e) })),
             React.createElement(FormLayout_1.FormRow, { label: "Type" },
-                React.createElement(DropdownButton_1.default, { style: {
+                React.createElement(DropdownButton_1.default, { "data-name": "column-type-dropdown", style: {
                         width: '300px',
                         whiteSpace: 'normal',
                         overflow: 'hidden',
@@ -124,9 +124,9 @@ const FreeTextColumnSettingsWizardSection = (props) => {
                         label: item.label,
                         onClick: () => handleDataTypeChange(item.value),
                     })) }, data.DataType ? data.DataType : 'Select Data Type')),
-            React.createElement(FormLayout_1.FormRow, { label: "Default Value" }, data.DataType === 'Boolean' ? (React.createElement(CheckBox_1.CheckBox, { checked: !!data.DefaultValue, onChange: (DefaultValue) => {
+            React.createElement(FormLayout_1.FormRow, { label: "Default Value" }, data.DataType === 'Boolean' ? (React.createElement(CheckBox_1.CheckBox, { "data-name": "column-default-value-checkbox", checked: !!data.DefaultValue, onChange: (DefaultValue) => {
                     props.onChange(Object.assign(Object.assign({}, data), { DefaultValue }));
-                } })) : (React.createElement(AdaptableInput_1.default, { value: data.DataType === 'Date' && data.DefaultValue
+                } })) : (React.createElement(AdaptableInput_1.default, { "data-name": "column-default-value", value: data.DataType === 'Date' && data.DefaultValue
                     ? (0, DateHelper_1.parseToISO)(data.DefaultValue, Pattern) || ''
                     : data.DefaultValue || '', style: { width: '100%', maxWidth: 500 }, type: data.DataType === 'Number' ? 'number' : data.DataType === 'Date' ? 'date' : 'text', placeholder: "Default Column Value (not required)", onChange: (e) => handleDefaultValueChange(e) }))),
             React.createElement(FormLayout_1.FormRow, { label: "Header Tooltip" },
@@ -135,8 +135,8 @@ const FreeTextColumnSettingsWizardSection = (props) => {
                     }) })),
             ' ',
             data.DataType == 'String' && (React.createElement(FormLayout_1.FormRow, { label: "Editor Type" },
-                React.createElement(Radio_1.default, { value: "Inline", checked: data.TextEditor == 'Inline', onChange: (_, e) => onDynamicSelectChanged(e), marginRight: 2 }, "Inline Editor"),
-                React.createElement(Radio_1.default, { value: "Large", checked: data.TextEditor == 'Large', onChange: (_, e) => onDynamicSelectChanged(e) }, "Large Editor")))),
+                React.createElement(Radio_1.default, { "data-name": "inline-editor", value: "Inline", checked: data.TextEditor == 'Inline', onChange: (_, e) => onDynamicSelectChanged(e), marginRight: 2 }, "Inline Editor"),
+                React.createElement(Radio_1.default, { "data-name": "large-editor", value: "Large", checked: data.TextEditor == 'Large', onChange: (_, e) => onDynamicSelectChanged(e) }, "Large Editor")))),
         ErrorMessage ? (React.createElement(ErrorBox_1.default, { mt: 2, mb: 2 }, ErrorMessage)) : null,
         React.createElement(rebass_1.Box, { mt: 2 },
             React.createElement(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: true, settings: data.FreeTextColumnSettings, onChange: handleSpecialColumnSettingsChange }))));

package/src/View/GridInfo/ColumnInfoComponent.js

@@ -6,7 +6,6 @@ const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
 const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
 const CustomSortSummary_1 = require("../CustomSort/CustomSortSummary");
-const ConditionalStyleSummary_1 = require("../ConditionalStyle/ConditionalStyleSummary");
 const FilterSummary_1 = require("../Filter/FilterSummary");
 const PlusMinusSummary_1 = require("../PlusMinus/PlusMinusSummary");
 const FormatColumnSummary_1 = require("../FormatColumn/FormatColumnSummary");
@@ -18,7 +17,7 @@ const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants
 const ArrayExtensions_1 = require("../../Utilities/Extensions/ArrayExtensions");
 const FreeTextColumnSummary_1 = require("../FreeTextColumn/FreeTextColumnSummary");
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
-const WizardSummaryPage_1 = require("../Components/WizardSummaryPage");
+const InfiniteTable_1 = require("../../components/InfiniteTable");
 class ColumnInfoComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -33,7 +32,7 @@ class ColumnInfoComponent extends React.Component {
         let selectedColumnId = this.state.SelectedColumn
             ? this.state.SelectedColumn.columnId
             : null;
-        let keyValuePairs = [
+        const keyValuePairs = [
             {
                 Key: 'Column Id',
                 Value: this.state.SelectedColumn ? this.state.SelectedColumn.columnId : null,
@@ -90,7 +89,18 @@ class ColumnInfoComponent extends React.Component {
                 Key: 'Grouped',
                 Value: this.state.SelectedColumn ? this.state.SelectedColumn.isGrouped : null,
             },
-        ];
+        ]
+            .map((keyValuePair) => {
+            return {
+                Key: keyValuePair.Key,
+                Value: keyValuePair.Value === true ? 'Yes' : keyValuePair.Value,
+            };
+        })
+            .filter((x) => x.Value);
+        const columnsMap = {
+            Key: { field: 'Key', header: 'Property', defaultFlex: 1 },
+            Value: { field: 'Value', header: 'Value', defaultFlex: 3 },
+        };
         let moduleService = this.props.api.internalApi.getModuleService();
         let summaries = [];
         if (this.state.SelectedColumn) {
@@ -100,12 +110,6 @@ class ColumnInfoComponent extends React.Component {
                         : '' },
                     React.createElement(CustomSortSummary_1.CustomSortSummary, { key: ModuleConstants.CustomSortModuleId, summarisedColumn: this.state.SelectedColumn, teamSharingActivated: this.props.teamSharingActivated, accessLevel: this.getAccessLevel(ModuleConstants.CustomSortModuleId), api: this.props.api, moduleInfo: moduleService.getModuleInfoByModule(ModuleConstants.CustomSortModuleId) })));
             }
-            if (this.isModuleAvailable(ModuleConstants.ConditionalStyleModuleId)) {
-                summaries.push(React.createElement("div", { key: ModuleConstants.ConditionalStyleModuleId, className: this.isModuleReadOnly(ModuleConstants.ConditionalStyleModuleId)
-                        ? GeneralConstants.READ_ONLY_STYLE
-                        : '' },
-                    React.createElement(ConditionalStyleSummary_1.ConditionalStyleSummary, { key: ModuleConstants.ConditionalStyleModuleId, summarisedColumn: this.state.SelectedColumn, teamSharingActivated: this.props.teamSharingActivated, accessLevel: this.getAccessLevel(ModuleConstants.ConditionalStyleModuleId), api: this.props.api, moduleInfo: moduleService.getModuleInfoByModule(ModuleConstants.ConditionalStyleModuleId) })));
-            }
             if (this.isModuleAvailable(ModuleConstants.FilterModuleId)) {
                 summaries.push(React.createElement("div", { key: ModuleConstants.FilterModuleId, className: this.isModuleReadOnly(ModuleConstants.FilterModuleId)
                         ? GeneralConstants.READ_ONLY_STYLE
@@ -132,7 +136,7 @@ class ColumnInfoComponent extends React.Component {
                     React.createElement(PlusMinusSummary_1.PlusMinusSummary, { key: ModuleConstants.PlusMinusModuleId, summarisedColumn: this.state.SelectedColumn, teamSharingActivated: this.props.teamSharingActivated, accessLevel: this.getAccessLevel(ModuleConstants.PlusMinusModuleId), api: this.props.api, moduleInfo: moduleService.getModuleInfoByModule(ModuleConstants.PlusMinusModuleId) })));
             }
             if (this.isModuleAvailable(ModuleConstants.CalculatedColumnModuleId) &&
-                ArrayExtensions_1.ArrayExtensions.ContainsItem(this.props.api.calculatedColumnApi.getAllCalculatedColumn().map((cc) => cc.ColumnId), this.state.SelectedColumn.columnId)) {
+                ArrayExtensions_1.ArrayExtensions.ContainsItem(this.props.api.calculatedColumnApi.getCalculatedColumns().map((cc) => cc.ColumnId), this.state.SelectedColumn.columnId)) {
                 summaries.push(React.createElement("div", { key: ModuleConstants.CalculatedColumnModuleId, className: this.isModuleReadOnly(ModuleConstants.CalculatedColumnModuleId)
                         ? GeneralConstants.READ_ONLY_STYLE
                         : '' },
@@ -141,14 +145,18 @@ class ColumnInfoComponent extends React.Component {
                         summarisedColumn: this.state.SelectedColumn, accessLevel: this.getAccessLevel(ModuleConstants.CalculatedColumnModuleId), api: this.props.api, moduleInfo: moduleService.getModuleInfoByModule(ModuleConstants.CalculatedColumnModuleId) })));
             }
         }
-        return (React.createElement(Panel_1.default, { header: "Column Info", margin: 2, "data-name": "column-component" },
-            React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", marginBottom: 2 },
-                React.createElement(rebass_1.Box, { flex: 1, marginLeft: 2 },
-                    React.createElement(ColumnSelector_1.ColumnSelector, { SelectedColumnIds: [selectedColumnId], ColumnList: this.props.api.columnApi.getColumns(), onColumnChange: (columns) => this.onColumnSelectedChanged(columns), SelectionMode: Enums_1.SelectionMode.Single }))),
-            React.createElement(rebass_1.Flex, { flex: 1, style: { overflow: 'auto', width: '100%' } }, this.state.SelectedColumn && false && (
-            // not working but we should have the ability to create a grid without doing summary page
-            React.createElement(WizardSummaryPage_1.WizardSummaryPage, { KeyValuePairs: keyValuePairs, header: 'Column Properties' }))),
-            React.createElement(rebass_1.Flex, { flex: 1, style: { overflow: 'auto', width: '100%' } }, this.state.SelectedColumn && (React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { style: { width: '100%' }, colItems: colItems, items: summaries })))));
+        return (React.createElement(Panel_1.default, { flex: 1, header: "Column Info", margin: 2, "data-name": "column-component" },
+            React.createElement(rebass_1.Flex, { height: "100%", flexDirection: "column" },
+                React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", marginBottom: 2 },
+                    React.createElement(rebass_1.Box, { flex: 1, marginLeft: 2 },
+                        React.createElement(ColumnSelector_1.ColumnSelector, { SelectedColumnIds: [selectedColumnId], ColumnList: this.props.api.columnApi.getColumns(), onColumnChange: (columns) => this.onColumnSelectedChanged(columns), SelectionMode: Enums_1.SelectionMode.Single }))),
+                React.createElement(rebass_1.Flex, { flex: 1, style: { overflow: 'auto', width: '100%' } }, this.state.SelectedColumn && (React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { style: { width: '100%' }, colItems: colItems, items: summaries }))),
+                React.createElement(rebass_1.Box, { flex: 1, mt: 2 }, this.state.SelectedColumn && (React.createElement(InfiniteTable_1.DataSource, { data: keyValuePairs, primaryKey: "Key" },
+                    React.createElement(InfiniteTable_1.InfiniteTable, { domProps: {
+                            style: {
+                                height: '100%',
+                            },
+                        }, columns: columnsMap })))))));
     }
     onColumnSelectedChanged(columns) {
         this.setState({ SelectedColumn: columns.length > 0 ? columns[0] : null });