@adaptabletools/adaptable 13.0.0-canary.1 → 13.0.0-canary.11

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupModuleView.js

@@ -111,6 +111,7 @@ const AdaptablePopupModuleView = (props) => {
                 "s not available in current Layout")));
     };
     return (React.createElement(PopupPanel_1.PopupPanel, { glyphicon: moduleInfo.Glyph, infoLink: moduleInfo.HelpPage, headerText: moduleInfo.FriendlyName, button: newButton, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed() },
+        moduleViewProperties.HeaderComponent && React.createElement(moduleViewProperties.HeaderComponent, null),
         toggleButtonShowLayoutAssociatedObjects(),
         (items === null || items === void 0 ? void 0 : items.length) ? (React.createElement(AdaptableObjectList_1.AdaptableObjectList, { module: props.module, items: items })) : (React.createElement(EmptyContent_1.default, null, emptyContent !== null && emptyContent !== void 0 ? emptyContent : `Click 'New' to create a new ${moduleInfo.FriendlyName}`)),
         isWizardOpen && EditWizard && (React.createElement(EditWizard, { abObjectType: abObjectType, moduleInfo: moduleInfo, data: null, popupParams: props.popupParams, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))));

package/src/View/Components/Popups/AdaptablePopup/Navigation.d.ts

@@ -7,5 +7,5 @@ interface NavigationProps {
     activeItem: string;
     customSettingsPanels?: CustomSettingsPanel[];
 }
-export declare const Navigation: React.FunctionComponent<NavigationProps>;
+export declare const Navigation: React.FunctionComponent<React.PropsWithChildren<NavigationProps>>;
 export {};

package/src/View/Components/Popups/AdaptablePopup/PopupPanel.d.ts

@@ -8,4 +8,4 @@ export interface PanelWithButtonProps {
     infoLink?: string;
     infoLinkDisabled?: boolean;
 }
-export declare const PopupPanel: React.FunctionComponent<PanelWithButtonProps>;
+export declare const PopupPanel: React.FunctionComponent<React.PropsWithChildren<PanelWithButtonProps>>;

package/src/View/Components/Popups/AdaptablePopup/TopBar.d.ts

@@ -3,5 +3,5 @@ import { SettingsPanelOptions } from '../../../../AdaptableOptions/SettingsPanel
 interface TopBarProps {
     icon: SettingsPanelOptions['icon'];
 }
-export declare const TopBar: React.FunctionComponent<TopBarProps>;
+export declare const TopBar: React.FunctionComponent<React.PropsWithChildren<TopBarProps>>;
 export default TopBar;

package/src/View/Components/Popups/AdaptablePopupPrompt.d.ts

@@ -8,4 +8,4 @@ export interface AdaptablePopupPromptProps {
     onConfirmActionCreator?: (inputText: string) => Action;
     defaultValue?: string;
 }
-export declare const AdaptablePopupPrompt: React.FunctionComponent<AdaptablePopupPromptProps>;
+export declare const AdaptablePopupPrompt: React.FunctionComponent<React.PropsWithChildren<AdaptablePopupPromptProps>>;

package/src/View/Components/RangesComponent.d.ts

@@ -10,6 +10,10 @@ export interface RangesComponentProps extends React.ClassAttributes<RangesCompon
     showRangeDirection: boolean;
     updateRanges: (ranges: CellColorRange[]) => void;
     updateColumnComparison: (columnComparison?: ColumnComparison) => void;
+    minMaxRangeValues: {
+        min: number;
+        max: number;
+    };
 }
 export interface RangesComponentState {
     ranges: CellColorRange[];
@@ -25,6 +29,8 @@ export declare class RangesComponent extends React.Component<RangesComponentProp
     changeRangeColor(index: number, value: string): void;
     changeRangeDirectionUp(index: number, checked: boolean): void;
     removeRange(index: number): void;
+    setRangeColMin(range: CellColorRange): void;
+    setRangeColMax(range: CellColorRange): void;
     addRange(): void;
     changeColumnComparisonMinValue(event: React.FormEvent<any>): void;
     private onMinColumnSelectedChanged;

package/src/View/Components/RangesComponent.js

@@ -54,20 +54,25 @@ class RangesComponent extends React.Component {
             this.state.rangesType == 'Standard' && (React.createElement(Tabs_1.Tabs, { autoFocus: false, marginTop: 2 },
                 React.createElement(Tabs_1.Tabs.Tab, null, "Ranges"),
                 React.createElement(Tabs_1.Tabs.Content, null, (_a = this.state.ranges) === null || _a === void 0 ? void 0 :
-                    _a.map((range, index) => (React.createElement(rebass_1.Flex, { key: index, mb: 2, "data-name": "percent-bar-range" },
-                        React.createElement(Input_1.default, { type: "number", value: range.Min, onChange: (event) => {
-                                const { value } = event.target;
-                                this.changeRangeMin(index, value);
-                            }, mr: 2 }),
-                        React.createElement(Input_1.default, { type: "number", value: range.Max, onChange: (event) => {
-                                const { value } = event.target;
-                                this.changeRangeMax(index, value);
-                            }, mr: 2 }),
-                        React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: range.Color, onChange: (color) => {
-                                this.changeRangeColor(index, color);
-                            }, mr: 2, height: "100%" }),
-                        this.props.showRangeDirection && (React.createElement(CheckBox_1.CheckBox, { marginLeft: 2, marginRight: 2, checked: range.ReverseGradient && range.ReverseGradient == true, onChange: (checked) => this.changeRangeDirectionUp(index, checked) }, "Reverse Gradient")),
-                        React.createElement(SimpleButton_1.default, { icon: "delete", disabled: this.state.ranges && this.state.ranges.length == 1, onClick: () => this.removeRange(index) })))),
+                    _a.map((range, index, list) => (React.createElement(React.Fragment, null,
+                        React.createElement(rebass_1.Flex, { mb: 1 },
+                            index === 0 && (React.createElement(CheckBox_1.CheckBox, { onClick: () => this.setRangeColMin(range), margin: 0, checked: range.Min === 'Col-Min', mr: 3 }, "Col Min")),
+                            React.createElement(rebass_1.Box, null),
+                            index === list.length - 1 && (React.createElement(CheckBox_1.CheckBox, { onClick: () => this.setRangeColMax(range), margin: 0, checked: range.Max === 'Col-Max' }, "Col Max"))),
+                        React.createElement(rebass_1.Flex, { key: index, mb: 2, "data-name": "percent-bar-range" },
+                            React.createElement(Input_1.default, { type: typeof range.Min == 'number' ? 'number' : 'text', disabled: range.Min === 'Col-Min', value: range.Min, onChange: (event) => {
+                                    const { value } = event.target;
+                                    this.changeRangeMin(index, value);
+                                }, mr: 2 }),
+                            React.createElement(Input_1.default, { value: range.Max, type: typeof range.Max == 'number' ? 'number' : 'text', disabled: range.Max === 'Col-Max', onChange: (event) => {
+                                    const { value } = event.target;
+                                    this.changeRangeMax(index, value);
+                                }, mr: 2 }),
+                            React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: range.Color, onChange: (color) => {
+                                    this.changeRangeColor(index, color);
+                                }, mr: 2, height: "100%" }),
+                            this.props.showRangeDirection && (React.createElement(CheckBox_1.CheckBox, { checked: range.ReverseGradient && range.ReverseGradient == true, onChange: (checked) => this.changeRangeDirectionUp(index, checked) }, "Reverse Gradient")),
+                            React.createElement(SimpleButton_1.default, { ml: 2, icon: "delete", disabled: this.state.ranges && this.state.ranges.length == 1, onClick: () => this.removeRange(index) }))))),
                     React.createElement("div", null,
                         React.createElement(SimpleButton_1.default, { variant: "raised", "data-name": "add", onClick: () => this.addRange() }, "Add New Range"))))),
             this.state.rangesType == 'ColumnComparison' && (React.createElement(Tabs_1.Tabs, { autoFocus: false, marginTop: 2 },
@@ -144,14 +149,45 @@ class RangesComponent extends React.Component {
         ranges.splice(index, 1);
         this.props.updateRanges(ranges);
     }
+    setRangeColMin(range) {
+        const newRanges = this.state.ranges.map((rangeItem) => {
+            if (rangeItem === range) {
+                let newMin = rangeItem.Min === 'Col-Min' ? this.props.minMaxRangeValues.min : 'Col-Min';
+                return Object.assign(Object.assign({}, rangeItem), { Min: newMin });
+            }
+            return rangeItem;
+        });
+        this.setState({ ranges: newRanges }, () => this.props.updateRanges(this.state.ranges));
+    }
+    setRangeColMax(range) {
+        const newRanges = this.state.ranges.map((rangeItem) => {
+            if (rangeItem === range) {
+                let newMax = rangeItem.Max === 'Col-Max' ? this.props.minMaxRangeValues.max : 'Col-Max';
+                return Object.assign(Object.assign({}, rangeItem), { Max: newMax });
+            }
+            return rangeItem;
+        });
+        this.setState({ ranges: newRanges }, () => this.props.updateRanges(this.state.ranges));
+    }
     addRange() {
         const lastRange = this.state.ranges[this.state.ranges.length - 1];
-        this.state.ranges.push({
-            Min: lastRange.Max == 'Col-Max' ? 0 : lastRange.Max,
+        let previousRange = lastRange;
+        let Min = null;
+        if (lastRange.Max === 'Col-Max') {
+            Min = this.props.minMaxRangeValues.max;
+            previousRange = Object.assign(Object.assign({}, previousRange), { Max: this.props.minMaxRangeValues.max });
+        }
+        else {
+            Min = lastRange.Max;
+        }
+        const newRange = {
+            Min,
             Max: lastRange.Max,
             Color: (0, UIHelper_1.getHexForName)(UIHelper_1.GRAY),
-        }),
-            this.props.updateRanges(this.state.ranges);
+        };
+        const newRanges = [...this.state.ranges.slice(0, -1), previousRange, newRange];
+        // this.state.ranges.push(newRange);
+        this.setState({ ranges: newRanges }, () => this.props.updateRanges(this.state.ranges));
     }
     changeColumnComparisonMinValue(event) {
         let e = event.target;

package/src/View/Components/ScopeComponent.js

@@ -32,9 +32,9 @@ class ScopeComponent extends React.Component {
                     React.createElement(HelpBlock_1.default, { marginBottom: 1 }, displayMessage),
                     ' ',
                     React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", padding: 2 },
-                        React.createElement(Radio_1.default, { value: "Row", checked: this.state.ScopeChoice == 'All', onChange: (checked, e) => this.onScopeSelectChanged(e) }, "Whole Row"),
+                        React.createElement(Radio_1.default, { value: "Row", checked: this.state.ScopeChoice == 'All', onChange: (checked, e) => this.onScopeSelectChanged(e) }, "All Columns"),
                         ' ',
-                        React.createElement(Radio_1.default, { marginLeft: 3, value: "Column", checked: this.state.ScopeChoice == 'Column', onChange: (checked, e) => this.onScopeSelectChanged(e) }, "Column(s)"),
+                        React.createElement(Radio_1.default, { marginLeft: 3, value: "Column", checked: this.state.ScopeChoice == 'Column', onChange: (checked, e) => this.onScopeSelectChanged(e) }, "Selected Column(s)"),
                         ' ',
                         React.createElement(Radio_1.default, { marginLeft: 3, value: "DataType", checked: this.state.ScopeChoice == 'DataType', onChange: (checked, e) => this.onScopeSelectChanged(e) }, "DataType(s)")),
                     this.state.ScopeChoice == 'Column' && (React.createElement(rebass_1.Box, { marginBottom: 2, "data-name": "column-scope" },

package/src/View/Components/ToolPanel/AdaptableToolPanel.d.ts

@@ -27,17 +27,21 @@ export declare const ConnectedAdaptableToolPanel: import("react-redux").Connecte
 export declare const getAdaptableToolPanelAgGridComponent: (adaptable?: IAdaptable) => {
     new (): {
         gui: HTMLElement;
+        unmountReactRoot?: VoidFunction;
         init(params?: IToolPanelParams): void;
         getGui(): HTMLElement;
         refresh(): void;
+        destroy(): void;
     };
 };
 export declare const AdaptableToolPanelAgGridComponent: {
     new (): {
         gui: HTMLElement;
+        unmountReactRoot?: VoidFunction;
         init(params?: IToolPanelParams): void;
         getGui(): HTMLElement;
         refresh(): void;
+        destroy(): void;
     };
 };
 export {};

package/src/View/Components/ToolPanel/AdaptableToolPanel.js

@@ -7,7 +7,6 @@ const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
 const ToolPanelRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ToolPanelRedux"));
 const SystemRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/SystemRedux"));
 const react_redux_1 = require("react-redux");
-const react_dom_1 = require("react-dom");
 const rebass_1 = require("rebass");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
 const icons_1 = require("../../../components/icons");
@@ -238,7 +237,7 @@ const getAdaptableToolPanelAgGridComponent = (adaptable) => {
             this.gui.className = 'ag-adaptable-panel';
             this.gui.style.width = '100%';
             this.gui.style.overflow = 'auto';
-            (0, react_dom_1.render)((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(exports.ConnectedAdaptableToolPanel, { api: api, teamSharingActivated: false }), Adaptable), this.gui);
+            this.unmountReactRoot = Adaptable.renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(exports.ConnectedAdaptableToolPanel, { api: api, teamSharingActivated: false }), Adaptable), this.gui);
         }
         getGui() {
             if (!this.gui) {
@@ -249,6 +248,10 @@ const getAdaptableToolPanelAgGridComponent = (adaptable) => {
         refresh() {
             // no refresh logic needed
         }
+        destroy() {
+            var _a;
+            (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
+        }
     };
 };
 exports.getAdaptableToolPanelAgGridComponent = getAdaptableToolPanelAgGridComponent;

package/src/View/ConditionalStyle/ConditionalStylePopupHeader.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const ConditionalStylePopupHeader: React.FunctionComponent;

package/src/View/ConditionalStyle/ConditionalStylePopupHeader.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConditionalStylePopupHeader = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const AdaptableContext_1 = require("../AdaptableContext");
+const ConditionalStylePopupHeader = () => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    return (React.createElement(HelpBlock_1.default, null,
+        "Conditional Styles are deprecated, use",
+        ' ',
+        React.createElement(SimpleButton_1.default, { onClick: () => adaptable.api.settingsPanelApi.showSettingsPanel('FormatColumn'), variant: "outlined" }, "Format Columns"),
+        ' ',
+        "instead."));
+};
+exports.ConditionalStylePopupHeader = ConditionalStylePopupHeader;

package/src/View/ConditionalStyle/Wizard/ConditionalStyleRuleWizardSection.js

@@ -28,15 +28,15 @@ function ConditionalStyleRuleWizardSection(props) {
                 useBooleanQuery: (React.createElement(React.Fragment, null,
                     "Use an BooleanQuery if ",
                     React.createElement("i", null, "Scope"),
-                    " is 'Whole Row' - so any data change may be evaluated in a complex BooleanExpression")),
+                    " is 'All Columns' - so any data change may be evaluated in a complex BooleanExpression")),
                 useObservableQuery: (React.createElement(React.Fragment, null,
                     "Use an ObservableQuery if ",
                     React.createElement("i", null, "Scope"),
-                    " is 'Whole Row' - so any data change may be evaluated in a complex ObservableExpression")),
+                    " is 'All Columns' - so any data change may be evaluated in a complex ObservableExpression")),
                 useAggregationQuery: (React.createElement(React.Fragment, null,
                     "Use an AggregatedBooleanQuery if ",
                     React.createElement("i", null, "Scope"),
-                    " is 'Whole Row' - so any data change may be evaluated in a complex AggregatedBooleanExpression")),
+                    " is 'All Columns' - so any data change may be evaluated in a complex AggregatedBooleanExpression")),
             } })));
 }
 exports.ConditionalStyleRuleWizardSection = ConditionalStyleRuleWizardSection;

package/src/View/FlashingCell/Wizard/FlashingCellRulesWizardSection.js

@@ -36,15 +36,15 @@ const FlashingAlertRulesWizardSection = (props) => {
             useBooleanQuery: (React.createElement(React.Fragment, null,
                 "Use an BooleanQuery if ",
                 React.createElement("i", null, "Scope"),
-                " is 'Whole Row' - so any data change may be evaluated in a complex BooleanExpression")),
+                " is 'All Columns' - so any data change may be evaluated in a complex BooleanExpression")),
             useObservableQuery: (React.createElement(React.Fragment, null,
                 "Use an ObservableQuery if ",
                 React.createElement("i", null, "Scope"),
-                " is 'Whole Row' - so any data change may be evaluated in a complex ObservableExpression")),
+                " is 'All Columns' - so any data change may be evaluated in a complex ObservableExpression")),
             useAggregationQuery: (React.createElement(React.Fragment, null,
                 "Use an AggregatedBooleanQuery if ",
                 React.createElement("i", null, "Scope"),
-                " is 'Whole Row' - so any data change may be evaluated in a complex AggregatedBooleanExpression")),
+                " is 'All Columns' - so any data change may be evaluated in a complex AggregatedBooleanExpression")),
         } }));
 };
 exports.FlashingAlertRulesWizardSection = FlashingAlertRulesWizardSection;

package/src/View/FormatColumn/MoveFormatColumn.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { AccessLevel, FormatColumn } from '../../types';
+export declare const MoveFormatColumn: React.FunctionComponent<{
+    data: FormatColumn;
+    id?: string;
+    accessLevel: AccessLevel;
+}>;

package/src/View/FormatColumn/MoveFormatColumn.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MoveFormatColumn = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const FormatColumnRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/FormatColumnRedux"));
+const react_redux_1 = require("react-redux");
+const AdaptableContext_1 = require("../AdaptableContext");
+const MoveFormatColumn = (props) => {
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const formatColumn = adaptable.api.formatColumnApi.getAllFormatColumn();
+    const handleMoveUp = React.useCallback(() => {
+        dispatch(FormatColumnRedux.FormatColumnMoveUp(props.data));
+    }, []);
+    const handleMoveDown = React.useCallback(() => {
+        dispatch(FormatColumnRedux.FormatColumnMoveDown(props.data));
+    }, []);
+    if ((formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.length) <= 1) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(SimpleButton_1.default, { "data-id": "move-up", title: "move up", onClick: handleMoveUp, variant: "text", icon: "arrow-up" }),
+        React.createElement(SimpleButton_1.default, { "data-name": "move-down", title: "move down", onClick: handleMoveDown, variant: "text", icon: "arrow-down" })));
+};
+exports.MoveFormatColumn = MoveFormatColumn;

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

@@ -125,7 +125,7 @@ const getFormatDisplayTypeForScope = (scope, api) => {
     }
     // need to see if all columns are numeric or date
     if ('ColumnIds' in scope) {
-        const columns = scope.ColumnIds.map((c) => api.columnApi.getColumnFromId(c));
+        const columns = scope.ColumnIds.map((c) => api.columnApi.getColumnFromId(c)).filter(Boolean);
         const columnDataTypes = (0, uniq_1.default)(columns.map((c) => c.dataType));
         if (columnDataTypes.length == 1 && columnDataTypes[0] == 'Number') {
             return 'Number';
@@ -389,7 +389,7 @@ const FormatColumnFormatWizardSection = (props) => {
         return renderStringFormat(data, update, setFormatOption, customScopedFormatters, formatColumnApi);
     }
     return (React.createElement(HelpBlock_1.default, { margin: 3 },
-        "Setting a Display Format is only available if ",
+        "Setting a Display Format is only possible if ",
         React.createElement("b", null, "all"),
         " the columns in Scope are Numeric, String or Date."));
 };

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { FormatColumn } from '../../../../types';
+declare type FormatColumnRuleWizardSectionProps = {
+    onChange: (data: FormatColumn) => void;
+    defaultPredicateId: string;
+};
+export declare function FormatColumnRuleWizardSection(props: FormatColumnRuleWizardSectionProps): JSX.Element;
+export {};

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormatColumnRuleWizardSection = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
+function FormatColumnRuleWizardSection(props) {
+    const { data, api, moduleInfo } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const hasIncompatibleStyle = Boolean(data.ColumnStyle);
+    return (React.createElement(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: props.defaultPredicateId, 
+        // TODO see what is this
+        predicateDefs: api.formatColumnApi.getFormatColumnDefsForScope(data.Scope), showNoRule: true, showBoolean: !hasIncompatibleStyle, showAggregation: false, showObservable: false, showPredicate: !hasIncompatibleStyle && !api.scopeApi.scopeIsAll(data.Scope), data: data, onChange: (formatColumn) => props.onChange(formatColumn), descriptions: {
+            selectPredicate: 'Select a Format Column Rule - to be applied when data changes',
+            useBooleanQuery: (React.createElement(React.Fragment, null,
+                "Use an BooleanQuery if ",
+                React.createElement("i", null, "Scope"),
+                " is 'All Columns' - so any data change may be evaluated in a complex BooleanExpression")),
+            useObservableQuery: (React.createElement(React.Fragment, null,
+                "Use an ObservableQuery if ",
+                React.createElement("i", null, "Scope"),
+                " is 'All Columns' - so any data change may be evaluated in a complex ObservableExpression")),
+            useAggregationQuery: (React.createElement(React.Fragment, null,
+                "Use an AggregatedBooleanQuery if ",
+                React.createElement("i", null, "Scope"),
+                " is 'All Columns' - so any data change may be evaluated in a complex AggregatedBooleanExpression")),
+        } }));
+}
+exports.FormatColumnRuleWizardSection = FormatColumnRuleWizardSection;

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

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const constants_1 = require("./constants");
 const renderFormatColumnScopeSummary = (data) => {
     return (0, NewScopeComponent_1.renderScopeSummary)(data.Scope, {
         scopeWholeRow: 'Matching rows will be formatted',
@@ -14,12 +15,29 @@ const renderFormatColumnScopeSummary = (data) => {
 };
 exports.renderFormatColumnScopeSummary = renderFormatColumnScopeSummary;
 const FormatColumnScopeWizardSection = (props) => {
-    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     return (React.createElement(NewScopeComponent_1.NewScopeComponent, { descriptions: {
-            rowScope: 'Apply a style to an entire row',
+            rowScope: 'Format all columns in the row',
             columnScope: 'Select columns to format',
         }, scope: data.Scope, updateScope: (Scope) => {
-            props.onChange(Object.assign(Object.assign({}, data), { Scope }));
+            var _a;
+            const newData = Object.assign(Object.assign({}, data), { Scope });
+            const wholeRow = api.scopeApi.scopeIsAll(Scope);
+            if ((_a = newData.Rule) === null || _a === void 0 ? void 0 : _a.Predicate) {
+                if (wholeRow) {
+                    // if scope is whole row, a predicate cannot be present, so we set the rule
+                    // to be a boolean expression
+                    delete newData.Rule.Predicate;
+                    newData.Rule.BooleanExpression = '';
+                }
+                else {
+                    // if scope is not whole row, if you have a predicate, reset it
+                    newData.Rule.Predicate = {
+                        PredicateId: constants_1.DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN,
+                    };
+                }
+            }
+            props.onChange(newData);
         } }));
 };
 exports.FormatColumnScopeWizardSection = FormatColumnScopeWizardSection;

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

@@ -6,13 +6,9 @@ const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
-const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const CheckBox_1 = require("../../../components/CheckBox");
 const Tabs_1 = require("../../../components/Tabs");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
-const react_1 = require("react");
-const LoggingHelper_1 = require("../../../Utilities/Helpers/LoggingHelper");
 const Tag_1 = require("../../../components/Tag");
 let alignmentOptions = [
     { value: 'Left', label: 'Left' },
@@ -25,9 +21,6 @@ const renderFormatColumnSettingsSummary = (data) => {
         React.createElement(rebass_1.Text, null,
             "Cell alignment ",
             React.createElement(Tag_1.Tag, null, (_a = data.CellAlignment) !== null && _a !== void 0 ? _a : 'default')),
-        data.HeaderName ? (React.createElement(rebass_1.Text, { mt: 3 },
-            "Header name ",
-            React.createElement(Tag_1.Tag, null, data.HeaderName))) : null,
         React.createElement(rebass_1.Text, { mt: 3 },
             "Include grouped rows ",
             React.createElement(Tag_1.Tag, null, data.IncludeGroupedRows ? 'yes' : 'no'))));
@@ -41,18 +34,6 @@ const FormatColumnSettingsWizardSection = (props) => {
     const onIncludeGroupedRowsChanged = (IncludeGroupedRows) => {
         props.onChange(Object.assign(Object.assign({}, data), { IncludeGroupedRows }));
     };
-    const onHeaderNameChanged = (event) => {
-        let e = event.target;
-        props.onChange(Object.assign(Object.assign({}, data), { HeaderName: e.value }));
-    };
-    const [hasHeaderName, setHasHeaderName] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        const hasCustomHeaderName = StringExtensions_1.default.IsNotNullOrEmpty(data.HeaderName);
-        setHasHeaderName(hasCustomHeaderName);
-        if (hasCustomHeaderName) {
-            (0, LoggingHelper_1.ConsoleLogWarning)(`DEPRECATED: The 'FormatColumn.HeaderName' property is deprecated; use a Layout custom Column Header instead!`);
-        }
-    }, []);
     return (React.createElement(Tabs_1.Tabs, null,
         React.createElement(Tabs_1.Tabs.Tab, null, "Format"),
         React.createElement(Tabs_1.Tabs.Content, null,
@@ -70,9 +51,6 @@ const FormatColumnSettingsWizardSection = (props) => {
                                 label: item.label,
                                 onClick: () => onCellAlignmentSelectChanged(item.value),
                             })), columns: ['label'] }, data.CellAlignment ? data.CellAlignment : 'Select Option')),
-                    hasHeaderName && api.scopeApi.isSingleColumnScope(data.Scope) && (React.createElement(FormLayout_1.FormRow, { label: "Header Name" },
-                        React.createElement(Input_1.default, { value: data.HeaderName, onChange: (e) => onHeaderNameChanged(e), style: { minWidth: '15rem' } }),
-                        ' ')),
                     React.createElement(FormLayout_1.FormRow, { label: "Include Grouped Rows:" },
                         React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
                             React.createElement(CheckBox_1.CheckBox, { checked: data.IncludeGroupedRows, onChange: onIncludeGroupedRowsChanged, mr: 2 }))))))));

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

@@ -22,7 +22,6 @@ const isFormatColumnStyleValid = (data, api) => {
         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';
@@ -114,6 +113,20 @@ 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;
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const singleNumericColumn = api.scopeApi.isSingleNumericColumnScope(data.Scope);
+    const minMaxRangeValues = React.useMemo(() => {
+        if (!singleNumericColumn) {
+            return null;
+        }
+        if (!('ColumnIds' in data.Scope)) {
+            return null;
+        }
+        const [columnId] = data.Scope.ColumnIds;
+        const column = api.columnApi.getColumnFromId(columnId);
+        return {
+            min: api.columnApi.getMinValueForNumericColumn(column),
+            max: api.columnApi.getMaxValueForNumericColumn(column),
+        };
+    }, [singleNumericColumn]);
     const onlyBooleanColumnsInScope = api.scopeApi.areAllBooleanColumnsInScope(data.Scope) ||
         api.scopeApi.scopeHasOnlyBooleanDataType(data.Scope);
     const onPercentBarCellTextCellValueChanged = (checked) => {
@@ -278,6 +291,7 @@ function FormatColumnStyleWizardSection(props) {
             props.onChange(newData);
         }
     };
+    const onlyStandardStyleAvailable = Boolean(data.Rule);
     return (React.createElement(React.Fragment, null,
         onlyBooleanColumnsInScope && (React.createElement(Tabs_1.Tabs, null,
             React.createElement(Tabs_1.Tabs.Tab, null, "CheckBox Column"),
@@ -293,7 +307,7 @@ function FormatColumnStyleWizardSection(props) {
                         }
                         props.onChange(formatColumn);
                     } }, "Display Column As CheckBox")))),
-        singleNumericColumn ? (React.createElement(React.Fragment, null,
+        singleNumericColumn && !onlyStandardStyleAvailable ? (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,
@@ -306,9 +320,9 @@ function FormatColumnStyleWizardSection(props) {
                             "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) })),
+            ((_d = data.ColumnStyle) === null || _d === void 0 ? void 0 : _d.GradientStyle) && (React.createElement(RangesComponent_1.RangesComponent, { minMaxRangeValues: minMaxRangeValues, 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(RangesComponent_1.RangesComponent, { minMaxRangeValues: minMaxRangeValues, 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"),

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 EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
+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);
@@ -105,7 +108,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 +116,19 @@ function FormatColumnWizard(props) {
                         React.createElement(FormatColumnScopeWizardSection_1.FormatColumnScopeWizardSection, { onChange: setFormatColumn })));
                 },
             },
+            {
+                isValid: (abObject, api, context) => {
+                    return abObject.Rule ? (0, EntityRulesEditor_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/Layout/Wizard/sections/AggregationsSection.js

@@ -33,7 +33,7 @@ const AggregationsSectionSummary = () => {
     let content = null;
     if (entires.length) {
         content = (React.createElement(FormLayout_1.default, null, entires.map(([columnId, aggregation]) => (React.createElement(FormLayout_1.FormRow, { key: columnId, label: adaptable.api.columnApi.getFriendlyNameFromColumnId(columnId) },
-            React.createElement(Tag_1.Tag, null, aggregation))))));
+            React.createElement(Tag_1.Tag, null, aggregation /* TODO fix for Bogdan */))))));
     }
     else {
         content = React.createElement(Tag_1.Tag, null, "No Aggregations");

package/src/View/Layout/Wizard/sections/SettingsSection.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Layout } from '../../../../../types';
-export declare const SettingsSectionSummary: React.FunctionComponent;
+export declare const SettingsSectionSummary: React.FunctionComponent<React.PropsWithChildren<unknown>>;
 interface SettingsSectionProps {
     onChange: (data: Layout) => void;
 }
-export declare const SettingsSection: React.FunctionComponent<SettingsSectionProps>;
+export declare const SettingsSection: React.FunctionComponent<React.PropsWithChildren<SettingsSectionProps>>;
 export {};

package/src/View/License/LicenseWatermark.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare const LicenseWatermark: React.FunctionComponent;
+export declare const LicenseWatermark: React.FunctionComponent<React.PropsWithChildren<unknown>>;