@adaptabletools/adaptable 16.2.3 → 17.0.0-canary.0

package/src/View/Alert/AlertViewPanel.js

@@ -1,15 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AlertViewPanelControl = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_redux_1 = require("react-redux");
-const SystemRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/SystemRedux"));
-const AdaptablePopover_1 = require("../AdaptablePopover");
-const rebass_1 = require("rebass");
-const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
-const getAlertButtonStyle_1 = require("./Utilities/getAlertButtonStyle");
-const ActiveAlertsPanel_1 = require("./ActiveAlertsPanel");
+import * as React from 'react';
+import { connect } from 'react-redux';
+import * as SystemRedux from '../../Redux/ActionsReducers/SystemRedux';
+import { AdaptablePopover } from '../AdaptablePopover';
+import { Flex } from 'rebass';
+import UIHelper from '../UIHelper';
+import { getAlertButtonStyle } from './Utilities/getAlertButtonStyle';
+import { ActiveAlertsPanel } from './ActiveAlertsPanel';
 class AlertViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -24,21 +20,21 @@ class AlertViewPanelComponent extends React.Component {
         }
     }
     render() {
-        const messageType = UIHelper_1.default.getMessageTypeFromAdaptableAlerts(this.props.AdaptableAlerts);
-        const { color: buttonTextColor, background: buttonBackground } = (0, getAlertButtonStyle_1.getAlertButtonStyle)(this.props.AdaptableAlerts);
+        const messageType = UIHelper.getMessageTypeFromAdaptableAlerts(this.props.AdaptableAlerts);
+        const { color: buttonTextColor, background: buttonBackground } = getAlertButtonStyle(this.props.AdaptableAlerts);
         const collapsedText = this.props.AdaptableAlerts.length == 0
             ? '0 Alerts'
             : this.props.AdaptableAlerts.length == 1
                 ? '1 Alert'
                 : this.props.AdaptableAlerts.length + ' Alerts';
-        const alertsPanel = React.createElement(ActiveAlertsPanel_1.ActiveAlertsPanel, null);
+        const alertsPanel = React.createElement(ActiveAlertsPanel, null);
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(rebass_1.Flex, { alignItems: "stretch", className: `ab-${elementType}__Alert__wrap` },
-            React.createElement(rebass_1.Flex, { style: { borderRadius: 'var(--ab__border-radius)' }, className: `ab-${elementType}__Alert__text`, marginRight: 2, padding: 2, color: buttonTextColor, backgroundColor: buttonBackground, fontSize: 'var( --ab-font-size-2)', alignItems: "center" }, collapsedText),
-            this.props.AdaptableAlerts.length > 0 && (React.createElement(rebass_1.Flex, { alignItems: "center" },
-                React.createElement(AdaptablePopover_1.AdaptablePopover, { className: `ab-${elementType}__Alert__info`, headerText: "", 
+        return (React.createElement(Flex, { alignItems: "stretch", className: `ab-${elementType}__Alert__wrap` },
+            React.createElement(Flex, { style: { borderRadius: 'var(--ab__border-radius)' }, className: `ab-${elementType}__Alert__text`, marginRight: 2, padding: 2, color: buttonTextColor, backgroundColor: buttonBackground, fontSize: 'var( --ab-font-size-2)', alignItems: "center" }, collapsedText),
+            this.props.AdaptableAlerts.length > 0 && (React.createElement(Flex, { alignItems: "center" },
+                React.createElement(AdaptablePopover, { className: `ab-${elementType}__Alert__info`, headerText: "", 
                     // tooltipText="Alerts"
-                    bodyText: [alertsPanel], MessageType: messageType, useButton: true, showEvent: 'focus', hideEvent: "blur" })))));
+                    bodyText: [alertsPanel], MessageType: messageType, useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })))));
     }
 }
 function mapStateToProps(state, ownProps) {
@@ -53,4 +49,4 @@ function mapDispatchToProps(dispatch) {
         onDeleteAllAlert: (alerts) => dispatch(SystemRedux.SystemAlertDeleteAll(alerts)),
     };
 }
-exports.AlertViewPanelControl = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(AlertViewPanelComponent);
+export const AlertViewPanelControl = connect(mapStateToProps, mapDispatchToProps)(AlertViewPanelComponent);

package/src/View/Alert/AlertsPanel.js

@@ -1,44 +1,39 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AlertsPanel = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const UIHelper_1 = require("../UIHelper");
-const ButtonPreviewDelete_1 = tslib_1.__importDefault(require("../Components/Buttons/ButtonPreviewDelete"));
-const PanelWithButton_1 = require("../Components/Panels/PanelWithButton");
-const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
-const rebass_1 = require("rebass");
-const icons_1 = require("../../components/icons");
-const ListGroupItem_1 = tslib_1.__importDefault(require("../../components/List/ListGroupItem"));
-const ListGroup_1 = tslib_1.__importDefault(require("../../components/List/ListGroup"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
-class AlertsPanel extends React.Component {
+import * as React from 'react';
+import { UIHelper } from '../UIHelper';
+import ButtonPreviewDelete from '../Components/Buttons/ButtonPreviewDelete';
+import { PanelWithButton } from '../Components/Panels/PanelWithButton';
+import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
+import { Flex, Text } from 'rebass';
+import { allIcons } from '../../components/icons';
+import ListGroupItem from '../../components/List/ListGroupItem';
+import ListGroup from '../../components/List/ListGroup';
+import SimpleButton from '../../components/SimpleButton';
+export class AlertsPanel extends React.Component {
     componentWillUnmount() {
         var _a, _b;
         (_b = (_a = this.props).onRender) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
     render() {
         let alerts = this.props.Alerts.map((alert, index) => {
-            let alertHasheader = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(alert.header);
-            const textColor = UIHelper_1.UIHelper.getColorByMessageType(alert.alertDefinition.MessageType);
+            let alertHasHeader = StringExtensions.IsNotNullOrEmpty(alert.header);
+            const textColor = UIHelper.getColorByMessageType(alert.alertDefinition.MessageType);
             const textStyle = {
                 color: textColor,
                 fill: textColor,
             };
-            const iconName = UIHelper_1.UIHelper.getGlyphByMessageType(alert.alertDefinition.MessageType);
-            const IconCmp = icons_1.allIcons[iconName];
+            const iconName = UIHelper.getGlyphByMessageType(alert.alertDefinition.MessageType);
+            const IconCmp = allIcons[iconName];
             const icon = IconCmp ? React.createElement(IconCmp, null) : null;
             let alertText = (React.createElement("div", { key: alert.Uuid, style: { maxWidth: '600px', width: '100%' } },
-                React.createElement(rebass_1.Flex, { alignItems: "center", width: "100%" },
-                    React.createElement(rebass_1.Text, { style: textStyle }, icon),
-                    alertHasheader ? (React.createElement("b", { style: { flex: 1 } }, alert.header)) : (React.createElement("div", { style: { fontSize: 10, flex: 1, display: 'inline-block' } }, alert.message)),
-                    React.createElement(ButtonPreviewDelete_1.default, { onClick: () => this.props.onClearAlert(alert), tooltip: "Clear Alert", disabled: false, style: { float: 'left' }, accessLevel: 'Full' })),
-                React.createElement("div", null, alertHasheader && React.createElement("span", { style: { fontSize: 10 } }, alert.message))));
-            return (React.createElement(ListGroupItem_1.default, { factory: "div", key: alert.Uuid || index }, alertText));
+                React.createElement(Flex, { alignItems: "center", width: "100%" },
+                    React.createElement(Text, { style: textStyle }, icon),
+                    alertHasHeader ? (React.createElement("b", { style: { flex: 1 } }, alert.header)) : (React.createElement("div", { style: { fontSize: 10, flex: 1, display: 'inline-block' } }, alert.message)),
+                    React.createElement(ButtonPreviewDelete, { onClick: () => this.props.onClearAlert(alert), tooltip: "Clear Alert", disabled: false, style: { float: 'left' }, accessLevel: 'Full' })),
+                React.createElement("div", null, alertHasHeader && React.createElement("span", { style: { fontSize: 10 } }, alert.message))));
+            return (React.createElement(ListGroupItem, { factory: "div", key: alert.Uuid || index }, alertText));
         });
-        let clearAllButton = (React.createElement(SimpleButton_1.default, { onClick: () => this.props.onClearAllAlerts(this.props.Alerts), variant: "raised", tone: "neutral", accessLevel: 'Full' }, "Clear All"));
-        return (React.createElement(PanelWithButton_1.PanelWithButton, { variant: "default", bodyProps: { padding: 0 }, headerText: 'Alerts', button: clearAllButton },
-            React.createElement(ListGroup_1.default, null, alerts)));
+        let clearAllButton = (React.createElement(SimpleButton, { onClick: () => this.props.onClearAllAlerts(this.props.Alerts), variant: "raised", tone: "neutral", accessLevel: 'Full' }, "Clear All"));
+        return (React.createElement(PanelWithButton, { variant: "default", bodyProps: { padding: 0 }, headerText: 'Alerts', button: clearAllButton },
+            React.createElement(ListGroup, null, alerts)));
     }
 }
-exports.AlertsPanel = AlertsPanel;

package/src/View/Alert/Utilities/getAlertButtonStyle.js

@@ -1,16 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAlertButtonStyle = void 0;
-const tslib_1 = require("tslib");
-const UIHelper_1 = tslib_1.__importDefault(require("../../UIHelper"));
-const getAlertButtonStyle = (alerts) => {
-    const messageType = UIHelper_1.default.getMessageTypeFromAdaptableAlerts(alerts);
-    const messageTypeColor = UIHelper_1.default.getColorByMessageType(messageType);
-    const buttonBackground = UIHelper_1.default.getButtonColourForAdaptableAlerts(alerts, messageTypeColor);
-    const buttonTextColor = UIHelper_1.default.getButtonTextColourForArrayandMessageType(alerts, messageType);
+import UIHelper from '../../UIHelper';
+export const getAlertButtonStyle = (alerts) => {
+    const messageType = UIHelper.getMessageTypeFromAdaptableAlerts(alerts);
+    const messageTypeColor = UIHelper.getColorByMessageType(messageType);
+    const buttonBackground = UIHelper.getButtonColourForAdaptableAlerts(alerts, messageTypeColor);
+    const buttonTextColor = UIHelper.getButtonTextColourForArrayandMessageType(alerts, messageType);
     return {
         color: buttonTextColor,
         background: buttonBackground,
     };
 };
-exports.getAlertButtonStyle = getAlertButtonStyle;

package/src/View/Alert/Utilities/getAlertType.js

@@ -1,20 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAlertTypeText = exports.getAlertType = exports.AlertType = void 0;
-var AlertType;
+export var AlertType;
 (function (AlertType) {
     AlertType["DataChange"] = "DataChange";
     AlertType["RowChange"] = "RowChange";
     AlertType["Aggregation"] = "Aggregation";
     AlertType["Observable"] = "Observable";
-})(AlertType = exports.AlertType || (exports.AlertType = {}));
+})(AlertType || (AlertType = {}));
 /**
  * Based on alert shape the type is derived.
  * In the future the alert will get a type property.
  *
  * @param alert
  */
-const getAlertType = (alert) => {
+export const getAlertType = (alert) => {
     if (alert.Rule.ObservableExpression) {
         return AlertType.Observable;
     }
@@ -36,8 +33,7 @@ const getAlertType = (alert) => {
     // the object is not a valid alert
     return null;
 };
-exports.getAlertType = getAlertType;
-const getAlertTypeText = (alertType) => {
+export const getAlertTypeText = (alertType) => {
     let text = '';
     switch (alertType) {
         case AlertType.DataChange:
@@ -55,4 +51,3 @@ const getAlertTypeText = (alertType) => {
     }
     return text;
 };
-exports.getAlertTypeText = getAlertTypeText;

package/src/View/Alert/Utilities/getAvailablePredicates.d.ts

@@ -1,3 +1,3 @@
 import { AdaptableApi, AdaptablePredicateDef, AdaptableScope } from '../../../types';
 import { AlertType } from './getAlertType';
-export declare const getAvailablePredicateDefinitions: (api: AdaptableApi, scope: AdaptableScope, alertType: AlertType) => AdaptablePredicateDef[];
+export declare const getAvailablePredicateDefinitions: (api: AdaptableApi, scope: AdaptableScope, alertType: AlertType) => AdaptablePredicateDef<string>[];

package/src/View/Alert/Utilities/getAvailablePredicates.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAvailablePredicateDefinitions = void 0;
-const getAvailablePredicateDefinitions = (api, scope, alertType) => {
+export const getAvailablePredicateDefinitions = (api, scope, alertType) => {
     let predicateDefs = [];
     if (alertType === 'DataChange') {
         predicateDefs = api.alertApi.internalApi
@@ -16,4 +13,3 @@ const getAvailablePredicateDefinitions = (api, scope, alertType) => {
     }
     return predicateDefs;
 };
-exports.getAvailablePredicateDefinitions = getAvailablePredicateDefinitions;

package/src/View/Alert/Utilities/getDefaultAlertDefinition.js

@@ -1,24 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDefaultAlertDefinition = void 0;
-const tslib_1 = require("tslib");
-const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
-const getAlertType_1 = require("./getAlertType");
+import ObjectFactory from '../../../Utilities/ObjectFactory';
+import { AlertType } from './getAlertType';
 /**
  * This logic should be moved into Object factory once we have types on alert definitions
  * @param type AlertType
  */
-const getDefaultAlertDefinition = (alertDefinition, type) => {
-    const newAlert = Object.assign(Object.assign({}, ObjectFactory_1.default.CreateEmptyAlertDefinition()), { Uuid: alertDefinition.Uuid });
+export const getDefaultAlertDefinition = (alertDefinition, type) => {
+    const newAlert = Object.assign(Object.assign({}, ObjectFactory.CreateEmptyAlertDefinition()), { Uuid: alertDefinition.Uuid });
     // can only be all
-    if (type === getAlertType_1.AlertType.Observable ||
-        type === getAlertType_1.AlertType.Aggregation ||
-        type === getAlertType_1.AlertType.RowChange) {
+    if (type === AlertType.Observable ||
+        type === AlertType.Aggregation ||
+        type === AlertType.RowChange) {
         newAlert.Scope = {
             All: true,
         };
     }
-    if (type === getAlertType_1.AlertType.RowChange) {
+    if (type === AlertType.RowChange) {
         newAlert.Rule = {
             Predicates: [
                 {
@@ -29,4 +25,3 @@ const getDefaultAlertDefinition = (alertDefinition, type) => {
     }
     return newAlert;
 };
-exports.getDefaultAlertDefinition = getDefaultAlertDefinition;

package/src/View/Alert/Utilities/mapAlertDefinition.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.mapAlertDefinition = void 0;
-const mapAlertDefinition = (api, alertDefinition) => {
+export const mapAlertDefinition = (api, alertDefinition) => {
     var _a;
     const isRemovedRowChangeAlert = api.alertApi.internalApi.isAlertDefinitionForRemovedRowChangeEvent(alertDefinition);
     const mapValidButtonActions = (alertAction) => {
@@ -35,4 +32,3 @@ const mapAlertDefinition = (api, alertDefinition) => {
     }
     return alertDefinition;
 };
-exports.mapAlertDefinition = mapAlertDefinition;

package/src/View/Alert/Wizard/AlertBehaviourWizardSection.js

@@ -1,22 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AlertBehaviourWizardSection = exports.renderAlertBehaviourSummary = exports.renderAlertBehaviourWizardSummary = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const Tabs_1 = require("../../../components/Tabs");
-const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const CheckBox_1 = require("../../../components/CheckBox");
-const CodeBlock_1 = require("../../../components/CodeBlock");
-const rebass_1 = require("rebass");
-const ValueSelector_1 = require("../../Components/ValueSelector");
-const StyleComponent_1 = require("../../Components/StyleComponent");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
-const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
-const AdaptableContext_1 = require("../../AdaptableContext");
-const StylePreview_1 = require("../../../components/StylePreview");
-const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
+import * as React from 'react';
+import { Tabs } from '../../../components/Tabs';
+import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import { CheckBox } from '../../../components/CheckBox';
+import { CodeBlock } from '../../../components/CodeBlock';
+import { Box, Flex, Text } from 'rebass';
+import { ValueOptionsTags } from '../../Components/ValueSelector';
+import { StyleComponent } from '../../Components/StyleComponent';
+import DropdownButton from '../../../components/DropdownButton';
+import ObjectFactory from '../../../Utilities/ObjectFactory';
+import { useAdaptable } from '../../AdaptableContext';
+import { StylePreview } from '../../../components/StylePreview';
+import Panel from '../../../components/Panel';
 const HighlightStyle = (props) => {
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const adaptable = useAdaptable();
     const options = [
         {
             label: 'Use Message Type',
@@ -27,31 +23,30 @@ const HighlightStyle = (props) => {
         {
             label: 'Custom Style',
             onClick: () => {
-                const initialStyle = ObjectFactory_1.default.CreateEmptyStyle();
+                const initialStyle = ObjectFactory.CreateEmptyStyle();
                 props.onChange(initialStyle);
             },
         },
     ];
-    return (React.createElement(rebass_1.Box, { "data-name": props.dataName },
-        React.createElement(rebass_1.Flex, null,
-            React.createElement(CheckBox_1.CheckBox, { mr: 2, style: { alignItems: 'flex-start' }, checked: Boolean(props.highlight), onChange: (checked) => {
+    return (React.createElement(Box, { "data-name": props.dataName },
+        React.createElement(Flex, null,
+            React.createElement(CheckBox, { mr: 2, style: { alignItems: 'flex-start' }, checked: Boolean(props.highlight), onChange: (checked) => {
                     props.onChange(checked);
                 } }, props.label),
-            Boolean(props.highlight) && (React.createElement(DropdownButton_1.default, { items: options, columns: ['label'] }, typeof props.highlight === 'boolean' ? (React.createElement(rebass_1.Text, { fontSize: 2, mt: 1 },
+            Boolean(props.highlight) && (React.createElement(DropdownButton, { items: options, columns: ['label'] }, typeof props.highlight === 'boolean' ? (React.createElement(Text, { fontSize: 2, mt: 1 },
                 "Use Message Type's ",
-                adaptable.api.internalApi.getCorrectEnglishVariant('Colour'))) : (React.createElement(rebass_1.Text, { fontSize: 2, mt: 1 }, "Create a Custom Style"))))),
-        typeof props.highlight === 'object' && (React.createElement(Panel_1.default, { margin: 2 },
-            React.createElement(rebass_1.Box, { paddingLeft: 3 },
-                React.createElement(StyleComponent_1.StyleComponent, { headless: true, api: adaptable.api, Style: props.highlight, UpdateStyle: (style) => {
+                adaptable.api.internalApi.getCorrectEnglishVariant('Colour'))) : (React.createElement(Text, { fontSize: 2, mt: 1 }, "Create a Custom Style"))))),
+        typeof props.highlight === 'object' && (React.createElement(Panel, { margin: 2 },
+            React.createElement(Box, { paddingLeft: 3 },
+                React.createElement(StyleComponent, { headless: true, api: adaptable.api, Style: props.highlight, UpdateStyle: (style) => {
                         props.onChange(style);
                     } }))))));
 };
-const renderAlertBehaviourWizardSummary = (alertDefinition) => {
-    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (0, exports.renderAlertBehaviourSummary)(alertDefinition, api);
+export const renderAlertBehaviourWizardSummary = (alertDefinition) => {
+    const { api } = useOnePageAdaptableWizardContext();
+    return renderAlertBehaviourSummary(alertDefinition, api);
 };
-exports.renderAlertBehaviourWizardSummary = renderAlertBehaviourWizardSummary;
-const renderAlertBehaviourSummary = (alert, api, allowWrap = false) => {
+export const renderAlertBehaviourSummary = (alert, api, allowWrap = false) => {
     const { AlertProperties = {} } = alert;
     const values = [
         AlertProperties.PreventEdit ? { label: 'Prevent Cell Edit', id: 'preventCellEdit' } : null,
@@ -63,7 +58,7 @@ const renderAlertBehaviourSummary = (alert, api, allowWrap = false) => {
             ? {
                 label: (React.createElement(React.Fragment, null,
                     "Show in ",
-                    React.createElement(CodeBlock_1.CodeBlock, { ml: 1, p: 0 }, `<div />`))),
+                    React.createElement(CodeBlock, { ml: 1, p: 0 }, `<div />`))),
                 id: 'showInDiv',
             }
             : null,
@@ -75,19 +70,18 @@ const renderAlertBehaviourSummary = (alert, api, allowWrap = false) => {
             id: 'none',
         });
     }
-    return (React.createElement(ValueSelector_1.ValueOptionsTags, { allowWrap: allowWrap, options: values, value: values.map((v) => v.id), readOnly: true, toIdentifier: (x) => x.id, toLabel: (x) => {
+    return (React.createElement(ValueOptionsTags, { allowWrap: allowWrap, options: values, value: values.map((v) => v.id), readOnly: true, toIdentifier: (x) => x.id, toLabel: (x) => {
             if (x.id === 'highlightCell' && typeof AlertProperties.HighlightCell === 'object') {
-                return (React.createElement(StylePreview_1.StylePreview, { padding: 0, mt: 0, styleObject: AlertProperties.HighlightCell }, "Highlight Cell"));
+                return (React.createElement(StylePreview, { padding: 0, mt: 0, styleObject: AlertProperties.HighlightCell }, "Highlight Cell"));
             }
             if (x.id === 'highlightRow' && typeof AlertProperties.HighlightRow === 'object') {
-                return (React.createElement(StylePreview_1.StylePreview, { padding: 0, mt: 0, styleObject: AlertProperties.HighlightRow }, "Highlight Row"));
+                return (React.createElement(StylePreview, { padding: 0, mt: 0, styleObject: AlertProperties.HighlightRow }, "Highlight Row"));
             }
             return React.createElement(React.Fragment, null, x.label);
         } }));
 };
-exports.renderAlertBehaviourSummary = renderAlertBehaviourSummary;
-const AlertBehaviourWizardSection = (props) => {
-    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+export const AlertBehaviourWizardSection = (props) => {
+    const { data, api } = useOnePageAdaptableWizardContext();
     const { AlertProperties = {} } = data;
     const rowRemovedAlert = api.alertApi.internalApi.isAlertDefinitionForRemovedRowChangeEvent(data);
     // data change only
@@ -107,36 +101,35 @@ const AlertBehaviourWizardSection = (props) => {
     const onChange = (AlertProperties) => {
         props.onChange(Object.assign(Object.assign({}, data), { AlertProperties: Object.assign(Object.assign({}, data.AlertProperties), AlertProperties) }));
     };
-    return (React.createElement(Tabs_1.Tabs, null,
-        React.createElement(Tabs_1.Tabs.Tab, null, api.internalApi.getCorrectEnglishVariant('Behaviour')),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            hasPreventCellEdit && (React.createElement(CheckBox_1.CheckBox, { "data-name": "prevent-cell-edit", style: { alignItems: 'flex-start' }, checked: AlertProperties.PreventEdit, onChange: (PreventEdit) => {
+    return (React.createElement(Tabs, null,
+        React.createElement(Tabs.Tab, null, api.internalApi.getCorrectEnglishVariant('Behaviour')),
+        React.createElement(Tabs.Content, null,
+            hasPreventCellEdit && (React.createElement(CheckBox, { "data-name": "prevent-cell-edit", style: { alignItems: 'flex-start' }, checked: AlertProperties.PreventEdit, onChange: (PreventEdit) => {
                     onChange({
                         PreventEdit,
                     });
                 } },
                 "Prevent Cell Edit",
-                React.createElement(rebass_1.Text, { fontSize: 2, mt: 1 }, "(automatically undo data change which triggered Alert)"))),
+                React.createElement(Text, { fontSize: 2, mt: 1 }, "(automatically undo data change which triggered Alert)"))),
             hasHighlightCell && (React.createElement(HighlightStyle, { dataName: "highlight-cell", highlight: AlertProperties.HighlightCell, label: "Highlight Cell", onChange: (HighlightCell) => {
                     onChange({ HighlightCell });
                 } })),
             hasHighlightRow && (React.createElement(HighlightStyle, { dataName: "highlight-row", highlight: AlertProperties.HighlightRow, label: "Highlight Row", onChange: (HighlightRow) => {
                     onChange({ HighlightRow });
                 } })),
-            hasJumpToCell && (React.createElement(CheckBox_1.CheckBox, { "data-name": "jump-to-cell", checked: AlertProperties.JumpToCell, onChange: (JumpToCell) => {
+            hasJumpToCell && (React.createElement(CheckBox, { "data-name": "jump-to-cell", checked: AlertProperties.JumpToCell, onChange: (JumpToCell) => {
                     onChange({ JumpToCell });
                 } }, "Jump To Cell")),
-            hasJumpToRow && (React.createElement(CheckBox_1.CheckBox, { "data-name": "jump-to-row", checked: AlertProperties.JumpToRow, onChange: (JumpToRow) => {
+            hasJumpToRow && (React.createElement(CheckBox, { "data-name": "jump-to-row", checked: AlertProperties.JumpToRow, onChange: (JumpToRow) => {
                     onChange({ JumpToRow });
                 } }, "Jump To Row")),
-            showInSeparateDiv && (React.createElement(CheckBox_1.CheckBox, { "data-name": "show-in-div", checked: AlertProperties.ShowInDiv, onChange: (ShowInDiv) => {
+            showInSeparateDiv && (React.createElement(CheckBox, { "data-name": "show-in-div", checked: AlertProperties.ShowInDiv, onChange: (ShowInDiv) => {
                     onChange({ ShowInDiv });
                 } },
                 "Show in separate ",
-                React.createElement(CodeBlock_1.CodeBlock, null, `<div />`),
+                React.createElement(CodeBlock, null, `<div />`),
                 " element")),
-            logToConsole && (React.createElement(CheckBox_1.CheckBox, { "data-name": "log-to-console", checked: AlertProperties.LogToConsole, onChange: (LogToConsole) => {
+            logToConsole && (React.createElement(CheckBox, { "data-name": "log-to-console", checked: AlertProperties.LogToConsole, onChange: (LogToConsole) => {
                     onChange({ LogToConsole });
                 } }, "Log To Console")))));
 };
-exports.AlertBehaviourWizardSection = AlertBehaviourWizardSection;

package/src/View/Alert/Wizard/AlertButtonsEditor.js

@@ -1,19 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AlertButtonsEditor = void 0;
-const tslib_1 = require("tslib");
-const rebass_1 = require("rebass");
-const React = tslib_1.__importStar(require("react"));
-const sentence_case_1 = require("sentence-case");
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
-const CheckBox_1 = require("../../../components/CheckBox");
-const Helper_1 = require("../../../Utilities/Helpers/Helper");
-const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
-const AdaptableIconSelector_1 = require("../../Components/AdaptableIconSelector");
-const AlertButtonsEditor = (props) => {
+import { Flex, Box, Text } from 'rebass';
+import * as React from 'react';
+import { sentenceCase } from 'sentence-case';
+import SimpleButton from '../../../components/SimpleButton';
+import Input from '../../../components/Input';
+import DropdownButton from '../../../components/DropdownButton';
+import FormLayout, { FormRow } from '../../../components/FormLayout';
+import { CheckBox } from '../../../components/CheckBox';
+import { cloneObject } from '../../../Utilities/Helpers/Helper';
+import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
+import { AdaptableIconSelector } from '../../Components/AdaptableIconSelector';
+export const AlertButtonsEditor = (props) => {
     const { api, adaptableAlert } = props;
     const onChange = (newButtons) => {
         props.onChange(newButtons);
@@ -33,7 +29,7 @@ const AlertButtonsEditor = (props) => {
     const hasSuspend = true;
     // only data change
     const hasUndo = props.alertType === 'DataChange';
-    const AlertButtons = (0, Helper_1.cloneObject)(props.AlertButtons || []) || [];
+    const AlertButtons = cloneObject(props.AlertButtons || []) || [];
     const buttonActions = [];
     if (hasHighlightRow) {
         buttonActions.push('highlight-row');
@@ -54,9 +50,9 @@ const AlertButtonsEditor = (props) => {
         buttonActions.push('suspend');
     }
     return (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
-            React.createElement(rebass_1.Text, { fontSize: 2, mt: 3, mb: 2 }, "Add buttons to Alert, and Actions to perform when button is clicked"),
-            React.createElement(SimpleButton_1.default, { icon: "plus", onClick: () => {
+        React.createElement(Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
+            React.createElement(Text, { fontSize: 2, mt: 3, mb: 2 }, "Add buttons to Alert, and Actions to perform when button is clicked"),
+            React.createElement(SimpleButton, { icon: "plus", onClick: () => {
                     onChange([
                         ...(AlertButtons || []),
                         {
@@ -123,7 +119,7 @@ const AlertButtonsEditor = (props) => {
             };
             let iconSelector = null;
             if (!button.icon || (button.icon && 'name' in button.icon)) {
-                iconSelector = (React.createElement(AdaptableIconSelector_1.AdaptableIconSelector, { value: button.icon && 'name' in button.icon ? (_a = button === null || button === void 0 ? void 0 : button.icon) === null || _a === void 0 ? void 0 : _a.name : '', onChange: (iconName) => {
+                iconSelector = (React.createElement(AdaptableIconSelector, { value: button.icon && 'name' in button.icon ? (_a = button === null || button === void 0 ? void 0 : button.icon) === null || _a === void 0 ? void 0 : _a.name : '', onChange: (iconName) => {
                         onChange(AlertButtons.map((btn) => {
                             if (btn === button) {
                                 return Object.assign(Object.assign({}, btn), { icon: {
@@ -134,13 +130,13 @@ const AlertButtonsEditor = (props) => {
                         }));
                     } }));
             }
-            return (React.createElement(rebass_1.Box, { key: index, marginLeft: 3, style: {
+            return (React.createElement(Box, { key: index, marginLeft: 3, style: {
                     borderTop: index ? '1px dashed var(--ab-color-inputborder)' : '',
                 } },
-                React.createElement(FormLayout_1.default, { marginBottom: 2, paddingTop: 2 },
-                    React.createElement(FormLayout_1.FormRow, { label: React.createElement(rebass_1.Text, { fontSize: 2, style: { whiteSpace: 'nowrap' } }, "Button Text") },
-                        React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                            React.createElement(Input_1.default, { value: buttonLabel, style: { width: 80 }, onChange: (e) => {
+                React.createElement(FormLayout, { marginBottom: 2, paddingTop: 2 },
+                    React.createElement(FormRow, { label: React.createElement(Text, { fontSize: 2, style: { whiteSpace: 'nowrap' } }, "Button Text") },
+                        React.createElement(Flex, { flexDirection: "row" },
+                            React.createElement(Input, { value: buttonLabel, style: { width: 80 }, onChange: (e) => {
                                     onChange(AlertButtons.map((btn, i) => {
                                         if (i === index) {
                                             return Object.assign(Object.assign({}, btn), { Label: e.target.value });
@@ -148,18 +144,18 @@ const AlertButtonsEditor = (props) => {
                                         return btn;
                                     }));
                                 } }),
-                            React.createElement(DropdownButton_1.default, { marginLeft: 2, columns: ['label'], style: { minWidth: 110 }, items: ['text', 'outlined', 'raised'].map((variant) => {
+                            React.createElement(DropdownButton, { marginLeft: 2, columns: ['label'], style: { minWidth: 110 }, items: ['text', 'outlined', 'raised'].map((variant) => {
                                     return {
-                                        label: StringExtensions_1.default.CapitaliseFirstLetter(variant),
+                                        label: StringExtensions.CapitaliseFirstLetter(variant),
                                         value: variant,
                                         onClick: () => setVariant(variant),
                                     };
                                 }) },
-                                React.createElement(rebass_1.Text, { fontSize: 2 },
+                                React.createElement(Text, { fontSize: 2 },
                                     "Variant:",
                                     ' ',
-                                    StringExtensions_1.default.CapitaliseFirstLetter((_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _b !== void 0 ? _b : 'raised'))),
-                            React.createElement(DropdownButton_1.default, { columns: ['label'], marginLeft: 2, style: { minWidth: 120 }, items: [
+                                    StringExtensions.CapitaliseFirstLetter((_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _b !== void 0 ? _b : 'raised'))),
+                            React.createElement(DropdownButton, { columns: ['label'], marginLeft: 2, style: { minWidth: 120 }, items: [
                                     {
                                         label: 'Use Alert Tone',
                                         value: 'text',
@@ -167,34 +163,33 @@ const AlertButtonsEditor = (props) => {
                                     },
                                     ...['success', 'info', 'error', 'warning', 'accent', 'neutral'].map((tone) => {
                                         return {
-                                            label: StringExtensions_1.default.CapitaliseFirstLetter(tone),
+                                            label: StringExtensions.CapitaliseFirstLetter(tone),
                                             value: tone,
                                             onClick: () => setTone(tone),
                                         };
                                     }),
                                 ] },
-                                React.createElement(rebass_1.Text, { fontSize: 2 },
+                                React.createElement(Text, { fontSize: 2 },
                                     "Tone:",
                                     ' ',
-                                    StringExtensions_1.default.CapitaliseFirstLetter((_c = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _c !== void 0 ? _c : 'Use alert tone'))),
-                            React.createElement(SimpleButton_1.default, { icon: "close", tone: "error", disabled: AlertButtons.length <= 1, marginLeft: 1, variant: "text", tooltip: AlertButtons.length <= 1 ? 'Cannot remove last button' : 'Remove button', onClick: () => {
+                                    StringExtensions.CapitaliseFirstLetter((_c = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _c !== void 0 ? _c : 'Use alert tone'))),
+                            React.createElement(SimpleButton, { icon: "close", tone: "error", disabled: AlertButtons.length <= 1, marginLeft: 1, variant: "text", tooltip: AlertButtons.length <= 1 ? 'Cannot remove last button' : 'Remove button', onClick: () => {
                                     onChange(AlertButtons.filter((btn) => btn !== button));
                                 } }))),
-                    React.createElement(FormLayout_1.FormRow, { label: React.createElement(rebass_1.Text, { fontSize: 2 }, "Actions") },
+                    React.createElement(FormRow, { label: React.createElement(Text, { fontSize: 2 }, "Actions") },
                         buttonActions.map((actionName) => {
-                            return (React.createElement(CheckBox_1.CheckBox, { key: actionName, marginRight: 3, onChange: (checked) => handleActionChange(checked, actionName), checked: button.Action === actionName ||
+                            return (React.createElement(CheckBox, { key: actionName, marginRight: 3, onChange: (checked) => handleActionChange(checked, actionName), checked: button.Action === actionName ||
                                     (Array.isArray(button.Action) && button.Action.includes(actionName)) },
-                                React.createElement(rebass_1.Text, { fontSize: 2 }, (0, sentence_case_1.sentenceCase)(actionName))));
+                                React.createElement(Text, { fontSize: 2 }, sentenceCase(actionName))));
                         }),
-                        btnUserFunctions.length ? (React.createElement(CheckBox_1.CheckBox, { checked: true, disabled: true },
-                            React.createElement(rebass_1.Text, { fontSize: 2 },
+                        btnUserFunctions.length ? (React.createElement(CheckBox, { checked: true, disabled: true },
+                            React.createElement(Text, { fontSize: 2 },
                                 "User function",
                                 btnUserFunctions.length > 1 ? 's' : '',
                                 ":",
                                 ' ',
                                 btnUserFunctions.join(', ')))) : null),
-                    iconSelector && (React.createElement(FormLayout_1.FormRow, { label: React.createElement(rebass_1.Text, { fontSize: 2 }, "Icon") },
-                        React.createElement(rebass_1.Box, null, iconSelector))))));
+                    iconSelector && (React.createElement(FormRow, { label: React.createElement(Text, { fontSize: 2 }, "Icon") },
+                        React.createElement(Box, null, iconSelector))))));
         })));
 };
-exports.AlertButtonsEditor = AlertButtonsEditor;