@adaptabletools/adaptable 17.0.0-canary.0 → 17.0.0-canary.10

package/src/View/Filter/FilterViewPanel.js

@@ -1,15 +1,19 @@
-import * as SystemRedux from '../../Redux/ActionsReducers/SystemRedux';
-import * as React from 'react';
-import { ActiveFiltersPanel } from './ActiveFiltersPanel';
-import { Flex } from 'rebass';
-import { ArrayExtensions } from '../../Utilities/Extensions/ArrayExtensions';
-import { AdaptablePopover } from '../AdaptablePopover';
-import { ButtonClear } from '../Components/Buttons/ButtonClear';
-import { CheckBox } from '../../components/CheckBox';
-import { connect } from 'react-redux';
-import { getColumnFilterSelector } from '../../Redux/ActionsReducers/LayoutRedux';
-import SimpleButton from '../../components/SimpleButton';
-import join from '../../components/utils/join';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterViewPanelControl = void 0;
+const tslib_1 = require("tslib");
+const SystemRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/SystemRedux"));
+const React = tslib_1.__importStar(require("react"));
+const ActiveFiltersPanel_1 = require("./ActiveFiltersPanel");
+const rebass_1 = require("rebass");
+const ArrayExtensions_1 = require("../../Utilities/Extensions/ArrayExtensions");
+const AdaptablePopover_1 = require("../AdaptablePopover");
+const ButtonClear_1 = require("../Components/Buttons/ButtonClear");
+const CheckBox_1 = require("../../components/CheckBox");
+const react_redux_1 = require("react-redux");
+const LayoutRedux_1 = require("../../Redux/ActionsReducers/LayoutRedux");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
 class FilterViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -29,15 +33,15 @@ class FilterViewPanelComponent extends React.Component {
                 this.props.api.columnFilterApi.unSuspendAllColumnFilters();
             }
         };
-        return (React.createElement(Flex, { flexDirection: "row", className: `ab-${elementType}__Filter__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-            React.createElement(Flex, null,
-                ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && (React.createElement(AdaptablePopover, { popupPadding: 0, className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [React.createElement(ActiveFiltersPanel, null)], useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })),
-                showClearButton && (React.createElement(ButtonClear, { className: `ab-${elementType}__Filter__clear`, marginLeft: 1, marginBottom: 0, marginRight: 1, onClick: () => this.onClearFilters(), tooltip: "Clear Filters", disabled: this.props.ColumnFilters.length == 0, showText: this.props.viewType === 'ToolPanel' }, this.props.viewType === 'ToolPanel' && 'Clear')),
-                showSuspendFilterButton && (React.createElement(SimpleButton, { className: join(`ab-${elementType}__Filter__suspend-button`, isAtLeastOneFilterActive && `ab-${elementType}__Filter__suspend-all`, !isAtLeastOneFilterActive && `ab-${elementType}__Filter__un-suspend-all`), disabled: !isAtLeastOneFilter, onClick: handleSuspendUnsuspendAll, tone: isAtLeastOneFilterActive ? 'neutral' : 'success', variant: "text", icon: isAtLeastOneFilterActive ? 'pause' : 'play', accessLevel: this.props.accessLevel }))),
-            React.createElement(Flex, { alignItems: "center" }, this.props.api.columnFilterApi.isQuickFilterAvailable() && (React.createElement(CheckBox, { className: `ab-${elementType}__Filter__active-check`, disabled: this.props.accessLevel === 'ReadOnly' ||
+        return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Filter__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+            React.createElement(rebass_1.Flex, null,
+                ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && (React.createElement(AdaptablePopover_1.AdaptablePopover, { popupPadding: 0, className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [React.createElement(ActiveFiltersPanel_1.ActiveFiltersPanel, null)], useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })),
+                showClearButton && (React.createElement(ButtonClear_1.ButtonClear, { className: `ab-${elementType}__Filter__clear`, marginLeft: 1, marginBottom: 0, marginRight: 1, onClick: () => this.onClearFilters(), tooltip: "Clear Filters", disabled: this.props.ColumnFilters.length == 0, showText: this.props.viewType === 'ToolPanel' }, this.props.viewType === 'ToolPanel' && 'Clear')),
+                showSuspendFilterButton && (React.createElement(SimpleButton_1.default, { className: (0, join_1.default)(`ab-${elementType}__Filter__suspend-button`, isAtLeastOneFilterActive && `ab-${elementType}__Filter__suspend-all`, !isAtLeastOneFilterActive && `ab-${elementType}__Filter__un-suspend-all`), disabled: !isAtLeastOneFilter, onClick: handleSuspendUnsuspendAll, tone: isAtLeastOneFilterActive ? 'neutral' : 'success', variant: "text", icon: isAtLeastOneFilterActive ? 'pause' : 'play', accessLevel: this.props.accessLevel }))),
+            React.createElement(rebass_1.Flex, { alignItems: "center" }, this.props.api.columnFilterApi.isQuickFilterAvailable() && (React.createElement(CheckBox_1.CheckBox, { className: `ab-${elementType}__Filter__active-check`, disabled: this.props.accessLevel === 'ReadOnly' ||
                     this.props.api.internalApi.isGridInPivotMode(), marginTop: 0, marginBottom: 0, fontSize: 2, padding: 1, checked: this.props.IsQuickFilterVisible, onChange: (checked) => {
                     checked ? this.props.onShowQuickFilterBar() : this.props.onHideQuickFilterBar();
-                } }, "Quick Filter")))));
+                } }, "Filter Bar")))));
     }
     onClearFilters() {
         this.props.api.columnFilterApi.clearColumnFilters();
@@ -48,7 +52,7 @@ class FilterViewPanelComponent extends React.Component {
 }
 function mapStateToProps(state) {
     return {
-        ColumnFilters: getColumnFilterSelector(state),
+        ColumnFilters: (0, LayoutRedux_1.getColumnFilterSelector)(state),
         IsQuickFilterVisible: state.System.IsQuickFilterVisible,
     };
 }
@@ -58,4 +62,4 @@ function mapDispatchToProps(dispatch) {
         onShowQuickFilterBar: () => dispatch(SystemRedux.SystemQuickFilterBarShow()),
     };
 }
-export const FilterViewPanelControl = connect(mapStateToProps, mapDispatchToProps)(FilterViewPanelComponent);
+exports.FilterViewPanelControl = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(FilterViewPanelComponent);

package/src/View/FlashingCell/FlashingCellStyle.js

@@ -1,17 +1,21 @@
-import { __rest } from "tslib";
-import React from 'react';
-import { Flex } from 'rebass';
-import { StylePreview } from '../../components/StylePreview';
-export const FlashingCellStyle = (props) => {
-    const { data } = props, boxProps = __rest(props, ["data"]);
-    return (React.createElement(Flex, Object.assign({ flexDirection: "row" }, boxProps),
-        React.createElement(StylePreview, { "data-value": "up-style", mr: 1, flex: 1, styleObject: props.data.UpChangeStyle },
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlashingCellStyle = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const rebass_1 = require("rebass");
+const StylePreview_1 = require("../../components/StylePreview");
+const FlashingCellStyle = (props) => {
+    const { data } = props, boxProps = tslib_1.__rest(props, ["data"]);
+    return (react_1.default.createElement(rebass_1.Flex, Object.assign({ flexDirection: "row" }, boxProps),
+        react_1.default.createElement(StylePreview_1.StylePreview, { "data-value": "up-style", mr: 1, flex: 1, styleObject: props.data.UpChangeStyle },
             "Up ",
             !props.data.UpChangeStyle ? ' - no style' : ''),
-        React.createElement(StylePreview, { "data-value": "down-style", mr: 1, flex: 1, styleObject: props.data.DownChangeStyle },
+        react_1.default.createElement(StylePreview_1.StylePreview, { "data-value": "down-style", mr: 1, flex: 1, styleObject: props.data.DownChangeStyle },
             "Down",
             !props.data.DownChangeStyle ? ' - no style' : ''),
-        React.createElement(StylePreview, { "data-value": "neutral-style", flex: 1, styleObject: props.data.NeutralChangeStyle },
+        react_1.default.createElement(StylePreview_1.StylePreview, { "data-value": "neutral-style", flex: 1, styleObject: props.data.NeutralChangeStyle },
             "Neutral ",
             !props.data.NeutralChangeStyle ? ' - no style' : '')));
 };
+exports.FlashingCellStyle = FlashingCellStyle;

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

@@ -1,32 +1,37 @@
-import * as React from 'react';
-import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { CodeBlock } from '../../../components/CodeBlock';
-import { EntityRulesEditor, EntityRulesSummary } from '../../Components/EntityRulesEditor';
-export const renderFlashingAlertRulesSummary = (flashingAlert) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlashingAlertRulesWizardSection = exports.renderFlashingAlertRulesSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const CodeBlock_1 = require("../../../components/CodeBlock");
+const EntityRulesEditor_1 = require("../../Components/EntityRulesEditor");
+const renderFlashingAlertRulesSummary = (flashingAlert) => {
     var _a;
-    const { api: { flashingCellApi }, } = useOnePageAdaptableWizardContext();
+    const { api: { flashingCellApi }, } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const FlashTarget = (_a = flashingAlert.FlashTarget) !== null && _a !== void 0 ? _a : flashingCellApi.getFlashingCellFlashTarget(flashingAlert);
-    return (React.createElement(EntityRulesSummary, { data: flashingAlert, renderPredicate: (content) => {
+    return (React.createElement(EntityRulesEditor_1.EntityRulesSummary, { data: flashingAlert, renderPredicate: (content) => {
             return (React.createElement(React.Fragment, null,
                 "Flash ",
-                React.createElement(CodeBlock, null, FlashTarget),
+                React.createElement(CodeBlock_1.CodeBlock, null, FlashTarget),
                 " - value condition",
                 ' ',
-                React.createElement(CodeBlock, null, content)));
+                React.createElement(CodeBlock_1.CodeBlock, null, content)));
         }, renderQueryExpression: (content) => {
             return (React.createElement(React.Fragment, null,
                 "Flash ",
-                React.createElement(CodeBlock, null, FlashTarget),
+                React.createElement(CodeBlock_1.CodeBlock, null, FlashTarget),
                 " when",
                 ' ',
                 React.createElement("b", null,
-                    React.createElement(CodeBlock, null, content))));
+                    React.createElement(CodeBlock_1.CodeBlock, null, content))));
         } }));
 };
-export const FlashingAlertRulesWizardSection = (props) => {
-    const { data, api, moduleInfo } = useOnePageAdaptableWizardContext();
+exports.renderFlashingAlertRulesSummary = renderFlashingAlertRulesSummary;
+const FlashingAlertRulesWizardSection = (props) => {
+    const { data, api, moduleInfo } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const predicateDefs = api.flashingCellApi.getFlashingCellPredicateDefsForScope(data.Scope);
-    return (React.createElement(EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: "Any", data: data, predicateDefs: predicateDefs, getPredicateDefsForColId: (colId) => api.flashingCellApi.getFlashingCellPredicateDefsForScope({ ColumnIds: [colId] }), onChange: props.onChange, showAggregation: false, showObservable: false, showBoolean: true, showPredicate: true, descriptions: {
+    return (React.createElement(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: "AnyChange", data: data, predicateDefs: predicateDefs, getPredicateDefsForColId: (colId) => api.flashingCellApi.getFlashingCellPredicateDefsForScope({ ColumnIds: [colId] }), onChange: props.onChange, showAggregation: false, showObservable: false, showBoolean: true, showPredicate: true, descriptions: {
             selectPredicate: 'Select an Flashing Cell Rule - to be applied when data changes',
             useBooleanQuery: (React.createElement(React.Fragment, null,
                 "Use an BooleanQuery if ",
@@ -42,3 +47,4 @@ export const FlashingAlertRulesWizardSection = (props) => {
                 " is 'All Columns' - so any data change may be evaluated in a complex AggregatedBooleanExpression")),
         } }));
 };
+exports.FlashingAlertRulesWizardSection = FlashingAlertRulesWizardSection;

package/src/View/FlashingCell/Wizard/FlashingCellScopeWizardSection.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type FlashingAlertScopeWizardSectionProps = {
+type FlashingAlertScopeWizardSectionProps = {
     onChange: (data: any) => void;
 };
 export declare const FlashingAlertScopeWizardSection: (props: FlashingAlertScopeWizardSectionProps) => JSX.Element;

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

@@ -1,22 +1,27 @@
-import * as React from 'react';
-import { Flex } from 'rebass';
-import { NewScopeComponent } from '../../Components/NewScopeComponent';
-import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-export const FlashingAlertScopeWizardSection = (props) => {
-    const { data, api } = useOnePageAdaptableWizardContext();
-    return (React.createElement(Flex, { flexDirection: "column", style: { height: '100%' }, padding: 2 },
-        React.createElement(NewScopeComponent, { descriptions: {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlashingAlertScopeWizardSection = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const FlashingAlertScopeWizardSection = (props) => {
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    return (React.createElement(rebass_1.Flex, { flexDirection: "column", style: { height: '100%' }, padding: 2 },
+        React.createElement(NewScopeComponent_1.NewScopeComponent, { descriptions: {
                 rowScope: 'Changes anywhere in the row will trigger an Flashing Cell',
                 columnScope: 'Changes in selected columns will trigger an Flashing Cell',
             }, scope: data.Scope, updateScope: (Scope) => {
                 const newData = Object.assign(Object.assign({}, data), { Scope });
                 if (newData.Rule.Predicates) {
-                    // when scope is changed, reset the rule to predicate of any
+                    // when scope is changed, reset the rule to predicate of AnyChange
                     // if it was set to a predicate before
                     newData.Rule = {
-                        Predicates: [{ PredicateId: 'Any' }],
+                        Predicates: [{ PredicateId: 'AnyChange' }],
                     };
                 }
                 props.onChange(newData);
             } })));
 };
+exports.FlashingAlertScopeWizardSection = FlashingAlertScopeWizardSection;

package/src/View/FlashingCell/Wizard/FlashingCellSettingsWizardSection.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { FlashingCellDefinition } from '../../../types';
-declare type FlashingAlertDurationWizardSectionProps = {
+type FlashingAlertDurationWizardSectionProps = {
     readOnly?: boolean;
     flashingCell?: FlashingCellDefinition;
     onChange: (data: FlashingCellDefinition) => void;

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

@@ -1,33 +1,38 @@
-import * as React from 'react';
-import { useRef } from 'react';
-import { Flex, Text } from 'rebass';
-import Input from '../../../components/Input';
-import usePrevious from '../../../components/utils/usePrevious';
-import Radio from '../../../components/Radio';
-import { Tabs } from '../../../components/Tabs';
-import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { CodeBlock } from '../../../components/CodeBlock';
-import FormLayout, { FormRow } from '../../../components/FormLayout';
-import { CheckBox } from '../../../components/CheckBox';
-export const renderFlashingAlertSettingsSummary = (flashingAlert) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlashingAlertSettingsWizardSection = exports.renderFlashingAlertSettingsSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const rebass_1 = require("rebass");
+const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
+const usePrevious_1 = tslib_1.__importDefault(require("../../../components/utils/usePrevious"));
+const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
+const Tabs_1 = require("../../../components/Tabs");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const CodeBlock_1 = require("../../../components/CodeBlock");
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const CheckBox_1 = require("../../../components/CheckBox");
+const renderFlashingAlertSettingsSummary = (flashingAlert) => {
     return (React.createElement(React.Fragment, null,
-        React.createElement(Text, { fontSize: 2 }, flashingAlert.FlashDuration === 'always' ? (React.createElement(React.Fragment, null, "Flashing is never removed")) : (React.createElement(React.Fragment, null,
+        React.createElement(rebass_1.Text, { fontSize: 2 }, flashingAlert.FlashDuration === 'always' ? (React.createElement(React.Fragment, null, "Flashing is never removed")) : (React.createElement(React.Fragment, null,
             "Flashing is removed after ",
-            React.createElement(CodeBlock, null, flashingAlert.FlashDuration),
+            React.createElement(CodeBlock_1.CodeBlock, null, flashingAlert.FlashDuration),
             ' ',
             "milliseconds")))));
 };
-export const FlashingAlertSettingsWizardSection = (props) => {
+exports.renderFlashingAlertSettingsSummary = renderFlashingAlertSettingsSummary;
+const FlashingAlertSettingsWizardSection = (props) => {
     var _a, _b, _c, _d, _e, _f, _g;
-    let { data: flashingCell } = useOnePageAdaptableWizardContext();
+    let { data: flashingCell } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     flashingCell = flashingCell !== null && flashingCell !== void 0 ? flashingCell : props.flashingCell;
     const setDuration = (FlashDuration) => {
         props.onChange(Object.assign(Object.assign({}, flashingCell), { FlashDuration: FlashDuration }));
     };
     const duration = (_a = flashingCell.FlashDuration) !== null && _a !== void 0 ? _a : 500;
     const numberDuration = React.useRef(typeof duration === 'number' ? duration : 500);
-    const inputRef = useRef(null);
-    const oldDuration = usePrevious(duration, duration);
+    const inputRef = (0, react_1.useRef)(null);
+    const oldDuration = (0, usePrevious_1.default)(duration, duration);
     React.useEffect(() => {
         var _a;
         if (oldDuration === 'always' && duration != oldDuration) {
@@ -53,28 +58,29 @@ export const FlashingAlertSettingsWizardSection = (props) => {
         }
         props.onChange(Object.assign(Object.assign({}, flashingCell), { FlashTarget }));
     };
-    return (React.createElement(Flex, { height: "100%", flexDirection: "column", "data-name": "plus-minus-column-settings" },
-        React.createElement(Tabs, { autoFocus: false, padding: 2 },
-            React.createElement(Tabs.Tab, null, "Flashing Cell Settings"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(FormLayout, null,
-                    React.createElement(FormRow, { label: "Duration Type" },
-                        React.createElement(Radio, { "data-name": "duration-type-always", mr: 3, checked: duration == 'always', tabIndex: -1, onChange: () => handleTypeChange('always') }, "Always"),
-                        React.createElement(Radio, { "data-name": "duration-type-number", checked: duration !== 'always', tabIndex: -1, onChange: () => handleTypeChange('number') }, "Limited (ms)")),
-                    React.createElement(FormRow, { label: "" },
-                        duration !== 'always' && (React.createElement(Flex, { flexDirection: "row", alignItems: "baseline" },
-                            React.createElement(Text, { fontSize: 2, mr: 2 }, "After"),
-                            React.createElement(Input, { "data-name": "duration-input", readOnly: props.readOnly, type: "text", name: "value", ref: inputRef, mt: 2, mr: 1, value: duration, onChange: (event) => {
+    return (React.createElement(rebass_1.Flex, { height: "100%", flexDirection: "column", "data-name": "plus-minus-column-settings" },
+        React.createElement(Tabs_1.Tabs, { autoFocus: false, padding: 2 },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Flashing Cell Settings"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(FormLayout_1.default, null,
+                    React.createElement(FormLayout_1.FormRow, { label: "Duration Type" },
+                        React.createElement(Radio_1.default, { "data-name": "duration-type-always", mr: 3, checked: duration == 'always', tabIndex: -1, onChange: () => handleTypeChange('always') }, "Always"),
+                        React.createElement(Radio_1.default, { "data-name": "duration-type-number", checked: duration !== 'always', tabIndex: -1, onChange: () => handleTypeChange('number') }, "Limited (ms)")),
+                    React.createElement(FormLayout_1.FormRow, { label: "" },
+                        duration !== 'always' && (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "baseline" },
+                            React.createElement(rebass_1.Text, { fontSize: 2, mr: 2 }, "After"),
+                            React.createElement(Input_1.default, { "data-name": "duration-input", readOnly: props.readOnly, type: "text", name: "value", ref: inputRef, mt: 2, mr: 1, value: duration, onChange: (event) => {
                                     const value = event.target.value;
                                     setDuration(isNaN(Number(value)) ? 500 : Number(value));
                                 } }),
-                            React.createElement(Text, { fontSize: 2 }, "milliseconds"))),
-                        duration === 'always' && (React.createElement(Text, { height: 43, fontSize: 3 }, "Persists the flashing style indeterminately - can be removed manually"))),
-                    React.createElement(FormRow, { label: "Flash Target" },
-                        React.createElement(CheckBox, { "data-name": "flashing-target", onChange: (checked) => handleTargetChange('cell', checked), mr: 3, checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === 'cell' ||
+                            React.createElement(rebass_1.Text, { fontSize: 2 }, "milliseconds"))),
+                        duration === 'always' && (React.createElement(rebass_1.Text, { height: 43, fontSize: 3 }, "Persists the flashing style indeterminately - can be removed manually"))),
+                    React.createElement(FormLayout_1.FormRow, { label: "Flash Target" },
+                        React.createElement(CheckBox_1.CheckBox, { "data-name": "flashing-target", onChange: (checked) => handleTargetChange('cell', checked), mr: 3, checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === 'cell' ||
                                 ((_c = (_b = flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === null || _b === void 0 ? void 0 : _b.includes) === null || _c === void 0 ? void 0 : _c.call(_b, 'cell')), tabIndex: -1 }, "Cell"),
-                        React.createElement(CheckBox, { "data-name": "flashing-target-row", mr: 3, onChange: (checked) => handleTargetChange('row', checked), checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === 'row' ||
+                        React.createElement(CheckBox_1.CheckBox, { "data-name": "flashing-target-row", mr: 3, onChange: (checked) => handleTargetChange('row', checked), checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === 'row' ||
                                 ((_e = (_d = flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === null || _d === void 0 ? void 0 : _d.includes) === null || _e === void 0 ? void 0 : _e.call(_d, 'row')), tabIndex: -1 }, "Row"),
-                        React.createElement(CheckBox, { "data-name": "flashing-target-aggFuncCell", onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === 'aggFuncCell' ||
+                        React.createElement(CheckBox_1.CheckBox, { "data-name": "flashing-target-aggFuncCell", onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: (flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === 'aggFuncCell' ||
                                 ((_g = (_f = flashingCell === null || flashingCell === void 0 ? void 0 : flashingCell.FlashTarget) === null || _f === void 0 ? void 0 : _f.includes) === null || _g === void 0 ? void 0 : _g.call(_f, 'aggFuncCell')), tabIndex: -1 }, "Aggregated Function Cell")))))));
 };
+exports.FlashingAlertSettingsWizardSection = FlashingAlertSettingsWizardSection;

package/src/View/FlashingCell/Wizard/FlashingCellStyleWizardSection.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { BoxProps } from 'rebass';
 import { AdaptableStyle } from '../../../types';
 import { FlashingCellDefinition } from '../../../../types';
-declare type FlashingAlertStyleWizardSectionProps = {
+type FlashingAlertStyleWizardSectionProps = {
     flashingAlert?: FlashingCellDefinition;
     onStyleChange: (styleName: 'UpChangeStyle' | 'DownChangeStyle' | 'NeutralChangeStyle', style: AdaptableStyle) => void;
 };

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

@@ -1,46 +1,52 @@
-import { __rest } from "tslib";
-import * as React from 'react';
-import { Box, Text } from 'rebass';
-import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { Tabs } from '../../../components/Tabs';
-import { StyleComponent } from '../../Components/StyleComponent';
-import { StylePreview } from '../../../components/StylePreview';
-const changeStyle = (React.createElement(Text, { fontSize: 2, style: { display: 'inline-block' } }, "Change style"));
-export const FlashingAlertStyleWizardSection = (props) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderFlashingAlertStyleSummary = exports.FlashingCellStyle = exports.FlashingAlertStyleWizardSection = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const Tabs_1 = require("../../../components/Tabs");
+const StyleComponent_1 = require("../../Components/StyleComponent");
+const StylePreview_1 = require("../../../components/StylePreview");
+const changeStyle = (React.createElement(rebass_1.Text, { fontSize: 2, style: { display: 'inline-block' } }, "Change style"));
+const FlashingAlertStyleWizardSection = (props) => {
     var _a, _b, _c;
-    let { data: flashingAlert, api } = useOnePageAdaptableWizardContext();
+    let { data: flashingAlert, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     flashingAlert = flashingAlert !== null && flashingAlert !== void 0 ? flashingAlert : props.flashingAlert;
     return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs, { defaultValue: "up" },
-            React.createElement(Tabs.Tab, { value: "up" },
+        React.createElement(Tabs_1.Tabs, { defaultValue: "up" },
+            React.createElement(Tabs_1.Tabs.Tab, { value: "up" },
                 "Up ",
                 changeStyle),
-            React.createElement(Tabs.Content, { value: "up" },
-                React.createElement(StyleComponent, { headless: true, api: api, Style: (_a = flashingAlert.UpChangeStyle) !== null && _a !== void 0 ? _a : {}, UpdateStyle: (style) => props.onStyleChange('UpChangeStyle', style) })),
-            React.createElement(Tabs.Tab, { value: "down" },
+            React.createElement(Tabs_1.Tabs.Content, { value: "up" },
+                React.createElement(StyleComponent_1.StyleComponent, { headless: true, api: api, Style: (_a = flashingAlert.UpChangeStyle) !== null && _a !== void 0 ? _a : {}, UpdateStyle: (style) => props.onStyleChange('UpChangeStyle', style) })),
+            React.createElement(Tabs_1.Tabs.Tab, { value: "down" },
                 "Down ",
                 changeStyle),
-            React.createElement(Tabs.Content, { value: "down" },
-                React.createElement(StyleComponent, { headless: true, api: api, Style: (_b = flashingAlert.DownChangeStyle) !== null && _b !== void 0 ? _b : {}, UpdateStyle: (style) => props.onStyleChange('DownChangeStyle', style) })),
-            React.createElement(Tabs.Tab, { value: "neutral" },
+            React.createElement(Tabs_1.Tabs.Content, { value: "down" },
+                React.createElement(StyleComponent_1.StyleComponent, { headless: true, api: api, Style: (_b = flashingAlert.DownChangeStyle) !== null && _b !== void 0 ? _b : {}, UpdateStyle: (style) => props.onStyleChange('DownChangeStyle', style) })),
+            React.createElement(Tabs_1.Tabs.Tab, { value: "neutral" },
                 "Neutral ",
                 changeStyle),
-            React.createElement(Tabs.Content, { value: "neutral" },
-                React.createElement(StyleComponent, { headless: true, api: api, Style: (_c = flashingAlert.NeutralChangeStyle) !== null && _c !== void 0 ? _c : {}, UpdateStyle: (style) => props.onStyleChange('NeutralChangeStyle', style) })))));
+            React.createElement(Tabs_1.Tabs.Content, { value: "neutral" },
+                React.createElement(StyleComponent_1.StyleComponent, { headless: true, api: api, Style: (_c = flashingAlert.NeutralChangeStyle) !== null && _c !== void 0 ? _c : {}, UpdateStyle: (style) => props.onStyleChange('NeutralChangeStyle', style) })))));
 };
-export const FlashingCellStyle = (props) => {
-    const { data } = props, boxProps = __rest(props, ["data"]);
-    return (React.createElement(Box, Object.assign({}, boxProps),
-        React.createElement(StylePreview, { styleObject: props.data.UpChangeStyle },
+exports.FlashingAlertStyleWizardSection = FlashingAlertStyleWizardSection;
+const FlashingCellStyle = (props) => {
+    const { data } = props, boxProps = tslib_1.__rest(props, ["data"]);
+    return (React.createElement(rebass_1.Box, Object.assign({}, boxProps),
+        React.createElement(StylePreview_1.StylePreview, { styleObject: props.data.UpChangeStyle },
             "Up change style ",
             !props.data.UpChangeStyle ? ' - no style' : ''),
-        React.createElement(StylePreview, { mt: 2, styleObject: props.data.DownChangeStyle },
+        React.createElement(StylePreview_1.StylePreview, { mt: 2, styleObject: props.data.DownChangeStyle },
             "Down change style ",
             !props.data.DownChangeStyle ? ' - no style' : ''),
-        React.createElement(StylePreview, { mt: 2, styleObject: props.data.NeutralChangeStyle },
+        React.createElement(StylePreview_1.StylePreview, { mt: 2, styleObject: props.data.NeutralChangeStyle },
             "Neutral change style ",
             !props.data.NeutralChangeStyle ? ' - no style' : '')));
 };
-export const renderFlashingAlertStyleSummary = (flashingAlert) => {
-    return React.createElement(FlashingCellStyle, { data: flashingAlert });
+exports.FlashingCellStyle = FlashingCellStyle;
+const renderFlashingAlertStyleSummary = (flashingAlert) => {
+    return React.createElement(exports.FlashingCellStyle, { data: flashingAlert });
 };
+exports.renderFlashingAlertStyleSummary = renderFlashingAlertStyleSummary;

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

@@ -1,27 +1,31 @@
-import * as React from 'react';
-import { useState, useCallback } from 'react';
-import { Box } from 'rebass';
-import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
-import { FlashingAlertSettingsWizardSection, renderFlashingAlertSettingsSummary, } from './FlashingCellSettingsWizardSection';
-import { cloneObject } from '../../../Utilities/Helpers/Helper';
-import { FlashingAlertRulesWizardSection, renderFlashingAlertRulesSummary, } from './FlashingCellRulesWizardSection';
-import { FlashingAlertStyleWizardSection, renderFlashingAlertStyleSummary, } from './FlashingCellStyleWizardSection';
-import { FlashingAlertScopeWizardSection } from './FlashingCellScopeWizardSection';
-import { renderScopeSummary } from '../../Alert/Wizard/BaseAlertScopeWizardSection';
-import { useAdaptable } from '../../AdaptableContext';
-import { isScopeValid } from '../../Components/NewScopeComponent';
-import ObjectFactory from '../../../Utilities/ObjectFactory';
-import { useDispatch } from 'react-redux';
-import { isValidFlashingCellRules } from './isValidFlashingCellRules';
-import * as FlashingCellRedux from '../../../Redux/ActionsReducers/FlashingCellRedux';
-import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
-export const FlashingCellWizard = (props) => {
-    const { api } = useAdaptable();
-    const [flashingCell, setFlashingCell] = useState(() => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlashingCellWizard = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const rebass_1 = require("rebass");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const FlashingCellSettingsWizardSection_1 = require("./FlashingCellSettingsWizardSection");
+const Helper_1 = require("../../../Utilities/Helpers/Helper");
+const FlashingCellRulesWizardSection_1 = require("./FlashingCellRulesWizardSection");
+const FlashingCellStyleWizardSection_1 = require("./FlashingCellStyleWizardSection");
+const FlashingCellScopeWizardSection_1 = require("./FlashingCellScopeWizardSection");
+const BaseAlertScopeWizardSection_1 = require("../../Alert/Wizard/BaseAlertScopeWizardSection");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
+const react_redux_1 = require("react-redux");
+const isValidFlashingCellRules_1 = require("./isValidFlashingCellRules");
+const FlashingCellRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/FlashingCellRedux"));
+const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
+const FlashingCellWizard = (props) => {
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const [flashingCell, setFlashingCell] = (0, react_1.useState)(() => {
         var _a, _b, _c, _d;
         let flashingCell = props.data
-            ? cloneObject(props.data)
-            : ObjectFactory.CreateEmptyFlashingCellDefinition();
+            ? (0, Helper_1.cloneObject)(props.data)
+            : ObjectFactory_1.default.CreateEmptyFlashingCellDefinition();
         flashingCell =
             api.flashingCellApi.internalApi.mergeFlashingCellDefinitionWithDefaults(flashingCell);
         if (!flashingCell.Rule.BooleanExpression && !((_b = (_a = flashingCell.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b.length)) {
@@ -43,11 +47,11 @@ export const FlashingCellWizard = (props) => {
         };
     };
     const updateStyles = {
-        DownChangeStyle: useCallback(updateProperty('DownChangeStyle'), []),
-        UpChangeStyle: useCallback(updateProperty('UpChangeStyle'), []),
-        NeutralChangeStyle: useCallback(updateProperty('NeutralChangeStyle'), []),
+        DownChangeStyle: (0, react_1.useCallback)(updateProperty('DownChangeStyle'), []),
+        UpChangeStyle: (0, react_1.useCallback)(updateProperty('UpChangeStyle'), []),
+        NeutralChangeStyle: (0, react_1.useCallback)(updateProperty('NeutralChangeStyle'), []),
     };
-    const dispatch = useDispatch();
+    const dispatch = (0, react_redux_1.useDispatch)();
     const handleFinish = () => {
         if (props.data) {
             dispatch(FlashingCellRedux.FlashingCellDefinitionEdit(flashingCell));
@@ -57,53 +61,54 @@ export const FlashingCellWizard = (props) => {
         }
         props.onFinishWizard(flashingCell);
     };
-    return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: flashingCell, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: flashingCell, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 details: 'Specify which data changes should trigger Cell Flashing',
-                isValid: isScopeValid,
-                render: () => React.createElement(FlashingAlertScopeWizardSection, { onChange: setFlashingCell }),
-                renderSummary: renderScopeSummary,
+                isValid: NewScopeComponent_1.isScopeValid,
+                render: () => React.createElement(FlashingCellScopeWizardSection_1.FlashingAlertScopeWizardSection, { onChange: setFlashingCell }),
+                renderSummary: BaseAlertScopeWizardSection_1.renderScopeSummary,
                 title: 'Scope',
             },
             {
                 details: 'Build the Rules for when Cells should Flash',
-                isValid: isValidFlashingCellRules,
-                render: () => React.createElement(FlashingAlertRulesWizardSection, { onChange: setFlashingCell }),
-                renderSummary: renderFlashingAlertRulesSummary,
+                isValid: isValidFlashingCellRules_1.isValidFlashingCellRules,
+                render: () => React.createElement(FlashingCellRulesWizardSection_1.FlashingAlertRulesWizardSection, { onChange: setFlashingCell }),
+                renderSummary: FlashingCellRulesWizardSection_1.renderFlashingAlertRulesSummary,
                 title: 'Rule',
             },
             {
-                details: 'Select the Duration of the Flash',
-                render: () => (React.createElement(Box, { padding: 2 },
-                    React.createElement(FlashingAlertSettingsWizardSection, { onChange: setFlashingCell }))),
-                renderSummary: renderFlashingAlertSettingsSummary,
-                title: 'Settings',
-            },
-            {
-                details: 'Choose the Flashing Styles',
-                render: () => (React.createElement(Box, { padding: 2 },
-                    React.createElement(FlashingAlertStyleWizardSection, { onStyleChange: (styleName, style) => {
+                details: 'Choose Flash Styles for Up, Down and Neutral Changes',
+                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                    React.createElement(FlashingCellStyleWizardSection_1.FlashingAlertStyleWizardSection, { onStyleChange: (styleName, style) => {
                             updateStyles[styleName](style);
                         } }))),
-                renderSummary: renderFlashingAlertStyleSummary,
+                renderSummary: FlashingCellStyleWizardSection_1.renderFlashingAlertStyleSummary,
                 title: 'Flash Styles',
             },
+            {
+                details: 'Set Duration and Target Properties',
+                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                    React.createElement(FlashingCellSettingsWizardSection_1.FlashingAlertSettingsWizardSection, { onChange: setFlashingCell }))),
+                renderSummary: FlashingCellSettingsWizardSection_1.renderFlashingAlertSettingsSummary,
+                title: 'Settings',
+            },
             {
                 details: 'Select Flashing Cell Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(Box, { padding: 2 },
-                    React.createElement(ObjectTagsWizardSection, { onChange: setFlashingCell }))),
-                renderSummary: renderObjectTagsSummary,
+                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                    React.createElement(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setFlashingCell }))),
+                renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
             },
             '-',
             {
                 details: 'Review the Flashing Cell Rule',
                 render: () => {
-                    return (React.createElement(Box, { padding: 2 },
-                        React.createElement(OnePageWizardSummary, null)));
+                    return (React.createElement(rebass_1.Box, { padding: 2 },
+                        React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null)));
                 },
                 title: 'Summary',
             },
         ] }));
 };
+exports.FlashingCellWizard = FlashingCellWizard;