@adaptabletools/adaptable 17.0.0-canary.4 → 17.0.0-canary.5

package/src/View/Components/Popups/AdaptablePopupPrompt.js

@@ -1,13 +1,17 @@
-import * as React from 'react';
-import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
-import Dialog from '../../../components/Dialog';
-import { Flex, Box } from 'rebass';
-import SimpleButton from '../../../components/SimpleButton';
-import Input from '../../../components/Input';
-import { useDispatch } from 'react-redux';
-export const AdaptablePopupPrompt = (props) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptablePopupPrompt = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
+const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
+const rebass_1 = require("rebass");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
+const react_redux_1 = require("react-redux");
+const AdaptablePopupPrompt = (props) => {
     var _a;
-    const dispatch = useDispatch();
+    const dispatch = (0, react_redux_1.useDispatch)();
     const [promptText, setPromptText] = React.useState((_a = props.defaultValue) !== null && _a !== void 0 ? _a : '');
     const onCloseForm = () => {
         setPromptText('');
@@ -25,20 +29,21 @@ export const AdaptablePopupPrompt = (props) => {
     const changeContent = (e) => {
         setPromptText(e.target.value);
     };
-    return (React.createElement(Dialog, { modal: true, "data-name": `prompt-popup`, isOpen: true, onDismiss: props.onClose, showCloseButton: false, style: { minHeight: 'auto', maxWidth: '50%' } },
-        React.createElement(Flex, { flexDirection: "column" },
-            React.createElement(Box, { marginTop: 3, mx: 2 }, props.header),
-            StringExtensions.IsNotNullOrEmpty(props.message) && (React.createElement(Box, { marginTop: 3, mx: 2 },
+    return (React.createElement(Dialog_1.default, { modal: true, "data-name": `prompt-popup`, isOpen: true, onDismiss: props.onClose, showCloseButton: false, style: { minHeight: 'auto', maxWidth: '50%' } },
+        React.createElement(rebass_1.Flex, { flexDirection: "column" },
+            React.createElement(rebass_1.Box, { marginTop: 3, mx: 2 }, props.header),
+            StringExtensions_1.StringExtensions.IsNotNullOrEmpty(props.message) && (React.createElement(rebass_1.Box, { marginTop: 3, mx: 2 },
                 ' ',
                 React.createElement("div", { style: { display: 'flex', alignItems: 'center' } }, props.message.split('\n').map(function (item, index) {
                     return (React.createElement("span", { key: index },
                         item,
                         React.createElement("br", null)));
                 })))),
-            React.createElement(Input, { autoFocus: true, marginTop: 3, mx: 3, value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }),
-            React.createElement(Box, { marginTop: 3 },
-                React.createElement(Flex, { padding: 2 },
-                    React.createElement(SimpleButton, { tone: "accent", "data-name": "ok", variant: "raised", disabled: StringExtensions.IsNullOrEmpty(promptText), onClick: () => onConfirmForm() }, "OK"),
+            React.createElement(Input_1.default, { autoFocus: true, marginTop: 3, mx: 3, value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }),
+            React.createElement(rebass_1.Box, { marginTop: 3 },
+                React.createElement(rebass_1.Flex, { padding: 2 },
+                    React.createElement(SimpleButton_1.default, { tone: "accent", "data-name": "ok", variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(promptText), onClick: () => onConfirmForm() }, "OK"),
                     React.createElement("div", { style: { flex: 1 } }),
-                    React.createElement(SimpleButton, { tone: "neutral", variant: "raised", onClick: () => onCloseForm(), "data-name": "cancel" }, "Cancel"))))));
+                    React.createElement(SimpleButton_1.default, { tone: "neutral", variant: "raised", onClick: () => onCloseForm(), "data-name": "cancel" }, "Cancel"))))));
 };
+exports.AdaptablePopupPrompt = AdaptablePopupPrompt;

package/src/View/Components/Popups/AdaptablePopupTeamSharing.js

@@ -1,23 +1,27 @@
-import Dialog from '../../../components/Dialog';
-import { Box, Flex } from 'rebass';
-import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
-import Input from '../../../components/Input';
-import { useState } from 'react';
-import SimpleButton from '../../../components/SimpleButton';
-import * as React from 'react';
-import FormLayout, { FormRow } from '../../../components/FormLayout';
-import HelpBlock from '../../../components/HelpBlock';
-import Radio from '../../../components/Radio';
-export const AdaptablePopupTeamSharing = (props) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptablePopupTeamSharing = void 0;
+const tslib_1 = require("tslib");
+const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
+const rebass_1 = require("rebass");
+const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
+const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
+const react_1 = require("react");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const React = tslib_1.__importStar(require("react"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
+const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
+const AdaptablePopupTeamSharing = (props) => {
     const { showPopup, onClose, onConfirm, header } = props;
-    const [config, setConfig] = useState({
+    const [config, setConfig] = (0, react_1.useState)({
         description: '',
         type: 'Snapshot',
     });
     return (React.createElement(React.Fragment, null,
-        React.createElement(Dialog, { modal: true, "data-name": "teamsharing-popup", isOpen: showPopup, onDismiss: onClose, autoFocus: false, showCloseButton: false, style: { minHeight: 'auto', maxWidth: '50%' } },
-            React.createElement(Flex, { flexDirection: "column" },
-                React.createElement(HelpBlock, { "data-name": "teamsharing-popup-description", margin: 2, mb: 2, p: 2, style: { fontSize: 'var(--ab-font-size-3)' } },
+        React.createElement(Dialog_1.default, { modal: true, "data-name": "teamsharing-popup", isOpen: showPopup, onDismiss: onClose, autoFocus: false, showCloseButton: false, style: { minHeight: 'auto', maxWidth: '50%' } },
+            React.createElement(rebass_1.Flex, { flexDirection: "column" },
+                React.createElement(HelpBlock_1.default, { "data-name": "teamsharing-popup-description", margin: 2, mb: 2, p: 2, style: { fontSize: 'var(--ab-font-size-3)' } },
                     "Create a ",
                     header,
                     " which may be either:",
@@ -28,18 +32,19 @@ export const AdaptablePopupTeamSharing = (props) => {
                         React.createElement("li", null,
                             React.createElement("strong", null, "Active"),
                             ": a \"live\" share that is automatically updated with every local change"))),
-                React.createElement(FormLayout, { padding: 2 },
-                    React.createElement(FormRow, { label: "Name: " },
-                        React.createElement(Input, { "data-name": "teamsharing-entity-name", autoFocus: true, value: config.description, type: "string", width: 300, placeholder: "Enter text", onChange: (e) => setConfig(Object.assign(Object.assign({}, config), { description: e.target.value })) })),
-                    React.createElement(FormRow, { label: "Share: " },
-                        React.createElement(Flex, { flexDirection: "row" },
-                            React.createElement(Radio, { "data-name": "teamsharing-entity-type-snapshot", checked: config.type === 'Snapshot', onChange: () => setConfig(Object.assign(Object.assign({}, config), { type: 'Snapshot' })) }, "Snapshot"),
+                React.createElement(FormLayout_1.default, { padding: 2 },
+                    React.createElement(FormLayout_1.FormRow, { label: "Name: " },
+                        React.createElement(Input_1.default, { "data-name": "teamsharing-entity-name", autoFocus: true, value: config.description, type: "string", width: 300, placeholder: "Enter text", onChange: (e) => setConfig(Object.assign(Object.assign({}, config), { description: e.target.value })) })),
+                    React.createElement(FormLayout_1.FormRow, { label: "Share: " },
+                        React.createElement(rebass_1.Flex, { flexDirection: "row" },
+                            React.createElement(Radio_1.default, { "data-name": "teamsharing-entity-type-snapshot", checked: config.type === 'Snapshot', onChange: () => setConfig(Object.assign(Object.assign({}, config), { type: 'Snapshot' })) }, "Snapshot"),
                             ' ',
-                            React.createElement(Radio, { "data-name": "teamsharing-entity-type-active", marginLeft: 3, checked: config.type === 'Active', onChange: () => setConfig(Object.assign(Object.assign({}, config), { type: 'Active' })) }, "Active"),
+                            React.createElement(Radio_1.default, { "data-name": "teamsharing-entity-type-active", marginLeft: 3, checked: config.type === 'Active', onChange: () => setConfig(Object.assign(Object.assign({}, config), { type: 'Active' })) }, "Active"),
                             ' '))),
-                React.createElement(Box, { marginTop: 3 },
-                    React.createElement(Flex, { padding: 2 },
-                        React.createElement(SimpleButton, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onClose() }, "Cancel"),
+                React.createElement(rebass_1.Box, { marginTop: 3 },
+                    React.createElement(rebass_1.Flex, { padding: 2 },
+                        React.createElement(SimpleButton_1.default, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onClose() }, "Cancel"),
                         React.createElement("div", { style: { flex: 1 } }),
-                        React.createElement(SimpleButton, { "data-name": "ok", tone: "accent", variant: "raised", disabled: StringExtensions.IsNullOrEmpty(config.description), onClick: () => onConfirm(config) }, "OK")))))));
+                        React.createElement(SimpleButton_1.default, { "data-name": "ok", tone: "accent", variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(config.description), onClick: () => onConfirm(config) }, "OK")))))));
 };
+exports.AdaptablePopupTeamSharing = AdaptablePopupTeamSharing;

package/src/View/Components/Popups/AdaptableToaster.js

@@ -1,17 +1,21 @@
-import * as React from 'react';
-import ObjectFactory from '../../../Utilities/ObjectFactory';
-import { AdaptablePopupAlert } from './AdaptablePopupAlert';
-import { toast } from '../../../components/Toastify';
-export const showToast = (props) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.showToast = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
+const AdaptablePopupAlert_1 = require("./AdaptablePopupAlert");
+const Toastify_1 = require("../../../components/Toastify");
+const showToast = (props) => {
     // we're doing this hack and not simply using props.api in order not to have a memory
     // leak where the api is still kept around in memory by the toaster
     let api = props.api;
     const off = api.eventApi.on('AdaptableDestroy', () => {
-        toast.dismiss();
+        Toastify_1.toast.dismiss();
         api = null;
     });
     const adaptableOptions = props.api.optionsApi.getAdaptableOptions();
-    const toastProps = ObjectFactory.CreateToastOptions(adaptableOptions.notificationsOptions, {
+    const toastProps = ObjectFactory_1.default.CreateToastOptions(adaptableOptions.notificationsOptions, {
         containerId: adaptableOptions.adaptableId,
         onClose: () => {
             off();
@@ -19,22 +23,23 @@ export const showToast = (props) => {
     }, {
         duration: props.adaptableAlert.alertDefinition.AlertProperties.NotificationDuration,
     });
-    const content = (React.createElement(AdaptablePopupAlert, { headless: true, adaptableAlert: props.adaptableAlert, onClose: () => {
-            toast.dismiss(toastId);
+    const content = (React.createElement(AdaptablePopupAlert_1.AdaptablePopupAlert, { headless: true, adaptableAlert: props.adaptableAlert, onClose: () => {
+            Toastify_1.toast.dismiss(toastId);
         } }));
     let toastId;
     switch (props.adaptableAlert.alertDefinition.MessageType) {
         case 'Info':
-            toastId = toast.info(content, toastProps);
+            toastId = Toastify_1.toast.info(content, toastProps);
             break;
         case 'Error':
-            toastId = toast.error(content, toastProps);
+            toastId = Toastify_1.toast.error(content, toastProps);
             break;
         case 'Success':
-            toastId = toast.success(content, toastProps);
+            toastId = Toastify_1.toast.success(content, toastProps);
             break;
         case 'Warning':
-            toastId = toast.warn(content, toastProps);
+            toastId = Toastify_1.toast.warn(content, toastProps);
             break;
     }
 };
+exports.showToast = showToast;

package/src/View/Components/Popups/FormPopups/FormPopups.js

@@ -1,33 +1,39 @@
-import * as React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { Flex } from 'rebass';
-import { AdaptableFormComponent } from '../../../../components/AdaptableFormComponent';
-import Dialog from '../../../../components/Dialog';
-import { getDefaultAdaptableFormData } from '../../../../PredefinedConfig/Common/AdaptableForm';
-import { PopupHideForm } from '../../../../Redux/ActionsReducers/PopupRedux';
-import { useAdaptable } from '../../../AdaptableContext';
-export const FormDialog = ({ id, formProps, form, prepareContext, }) => {
-    const dispatch = useDispatch();
-    const adaptable = useAdaptable();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormPopups = exports.FormDialog = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const rebass_1 = require("rebass");
+const AdaptableFormComponent_1 = require("../../../../components/AdaptableFormComponent");
+const Dialog_1 = tslib_1.__importDefault(require("../../../../components/Dialog"));
+const AdaptableForm_1 = require("../../../../PredefinedConfig/Common/AdaptableForm");
+const PopupRedux_1 = require("../../../../Redux/ActionsReducers/PopupRedux");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const FormDialog = ({ id, formProps, form, prepareContext, }) => {
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const [data, setData] = React.useState(() => {
-        return getDefaultAdaptableFormData(form);
+        return (0, AdaptableForm_1.getDefaultAdaptableFormData)(form);
     });
     const handleDismiss = () => {
-        dispatch(PopupHideForm(id));
+        dispatch((0, PopupRedux_1.PopupHideForm)(id));
     };
     const context = Object.assign({ adaptableApi: adaptable.api, formData: data }, formProps);
-    return (React.createElement(Dialog, { isOpen: true, showCloseButton: false, style: { minHeight: 'auto', minWidth: 400, maxHeight: '80vh' }, onDismiss: handleDismiss },
-        React.createElement(Flex, { flexDirection: 'column', "data-name": "form-dialog", padding: 4, height: '100%' },
-            React.createElement(AdaptableFormComponent, { formDef: form, data: data, context: context, onChange: setData, api: adaptable.api, displayTitle: true, onButtonClick: async (button) => {
+    return (React.createElement(Dialog_1.default, { isOpen: true, showCloseButton: false, style: { minHeight: 'auto', minWidth: 400, maxHeight: '80vh' }, onDismiss: handleDismiss },
+        React.createElement(rebass_1.Flex, { flexDirection: 'column', "data-name": "form-dialog", padding: 4, height: '100%' },
+            React.createElement(AdaptableFormComponent_1.AdaptableFormComponent, { formDef: form, data: data, context: context, onChange: setData, api: adaptable.api, displayTitle: true, onButtonClick: async (button) => {
                     var _a;
                     handleDismiss();
                     const preparedContext = typeof prepareContext === 'function' ? await prepareContext(context) : context;
                     (_a = button.onClick) === null || _a === void 0 ? void 0 : _a.call(button, button, preparedContext);
                 } }))));
 };
-export const FormPopups = () => {
-    const forms = useSelector((state) => state.Popup.FormPopup.FormList);
+exports.FormDialog = FormDialog;
+const FormPopups = () => {
+    const forms = (0, react_redux_1.useSelector)((state) => state.Popup.FormPopup.FormList);
     return (React.createElement(React.Fragment, null, forms.map((form) => {
-        return (React.createElement(FormDialog, { key: form.Id, prepareContext: form.prepareContext, id: form.Id, formProps: form.FormProps, form: form.Form }));
+        return (React.createElement(exports.FormDialog, { key: form.Id, prepareContext: form.prepareContext, id: form.Id, formProps: form.FormProps, form: form.Form }));
     })));
 };
+exports.FormPopups = FormPopups;

package/src/View/Components/Popups/Utilities.js

@@ -1,5 +1,8 @@
-import { clamp } from '../../../Utilities/Helpers/Helper';
-export const getMiddlePosition = (size) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getWindowPopupSize = exports.getSettingsPanelSize = exports.getActionPanelSize = exports.getMiddlePosition = void 0;
+const Helper_1 = require("../../../Utilities/Helpers/Helper");
+const getMiddlePosition = (size) => {
     const height = window.innerHeight;
     const width = window.innerWidth;
     return {
@@ -7,22 +10,26 @@ export const getMiddlePosition = (size) => {
         y: height / 2 - size.height / 2,
     };
 };
-export const getActionPanelSize = () => {
+exports.getMiddlePosition = getMiddlePosition;
+const getActionPanelSize = () => {
     const height = window.innerHeight;
     const width = window.innerWidth;
     return {
-        height: clamp(600, 0, height * 0.9),
-        width: clamp(800, 0, width * 0.9),
+        height: (0, Helper_1.clamp)(600, 0, height * 0.9),
+        width: (0, Helper_1.clamp)(800, 0, width * 0.9),
     };
 };
-export const getSettingsPanelSize = () => {
+exports.getActionPanelSize = getActionPanelSize;
+const getSettingsPanelSize = () => {
     const height = window.innerHeight;
     const width = window.innerWidth;
     return {
-        height: clamp(height * 0.9, 0, 800),
-        width: clamp(width * 0.9, 0, 800),
+        height: (0, Helper_1.clamp)(height * 0.9, 0, 800),
+        width: (0, Helper_1.clamp)(width * 0.9, 0, 800),
     };
 };
-export const getWindowPopupSize = () => {
-    return getSettingsPanelSize();
+exports.getSettingsPanelSize = getSettingsPanelSize;
+const getWindowPopupSize = () => {
+    return (0, exports.getSettingsPanelSize)();
 };
+exports.getWindowPopupSize = getWindowPopupSize;

package/src/View/Components/Popups/WindowPopups/WindowPopups.js

@@ -1,35 +1,38 @@
-import { __rest } from "tslib";
-import * as React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import Dialog from '../../../../components/Dialog';
-import { PopupHideWindow } from '../../../../Redux/ActionsReducers/PopupRedux';
-import { useAdaptable } from '../../../AdaptableContext';
-import { ExternalRenderer } from '../../ExternalRenderer';
-import { PanelWithImage } from '../../Panels/PanelWithImage';
-import { getMiddlePosition, getWindowPopupSize } from '../Utilities';
-import { windowFactory } from './windowFactory';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WindowPopups = exports.CUSTOM_WINDOW_FACTORY_ID = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const Dialog_1 = tslib_1.__importDefault(require("../../../../components/Dialog"));
+const PopupRedux_1 = require("../../../../Redux/ActionsReducers/PopupRedux");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const ExternalRenderer_1 = require("../../ExternalRenderer");
+const PanelWithImage_1 = require("../../Panels/PanelWithImage");
+const Utilities_1 = require("../Utilities");
+const windowFactory_1 = require("./windowFactory");
 const NoopComponent = () => {
     return React.createElement(React.Fragment, null);
 };
-export const CUSTOM_WINDOW_FACTORY_ID = 'CUSTOM_WINDOW_FACTORY_ID';
-export const WindowPopups = () => {
+exports.CUSTOM_WINDOW_FACTORY_ID = 'CUSTOM_WINDOW_FACTORY_ID';
+const WindowPopups = () => {
     const [windowModalSettings, setWindowModalSettings] = React.useState({});
-    const adaptable = useAdaptable();
-    const dispatch = useDispatch();
-    const windowItems = useSelector((state) => state.Popup.WindowPopup.PopupList);
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const windowItems = (0, react_redux_1.useSelector)((state) => state.Popup.WindowPopup.PopupList);
     return (React.createElement(React.Fragment, null, windowItems === null || windowItems === void 0 ? void 0 : windowItems.map((windowItem) => {
         var _a, _b, _c, _d, _e, _f;
-        let Component = (_a = windowFactory[windowItem.FactoryId]) !== null && _a !== void 0 ? _a : null;
-        const _g = (_b = windowItem === null || windowItem === void 0 ? void 0 : windowItem.PopupProps) !== null && _b !== void 0 ? _b : {}, { windowModalProps } = _g, restPopupProps = __rest(_g, ["windowModalProps"]);
+        let Component = (_a = windowFactory_1.windowFactory[windowItem.FactoryId]) !== null && _a !== void 0 ? _a : null;
+        const _g = (_b = windowItem === null || windowItem === void 0 ? void 0 : windowItem.PopupProps) !== null && _b !== void 0 ? _b : {}, { windowModalProps } = _g, restPopupProps = tslib_1.__rest(_g, ["windowModalProps"]);
         const handleDismiss = () => {
-            dispatch(PopupHideWindow(windowItem.Id));
+            dispatch((0, PopupRedux_1.PopupHideWindow)(windowItem.Id));
         };
-        const size = (_d = (_c = windowModalSettings === null || windowModalSettings === void 0 ? void 0 : windowModalSettings[windowItem.Id]) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : getWindowPopupSize();
-        const position = (_f = (_e = windowModalSettings === null || windowModalSettings === void 0 ? void 0 : windowModalSettings[windowItem.Id]) === null || _e === void 0 ? void 0 : _e.position) !== null && _f !== void 0 ? _f : getMiddlePosition(size);
+        const size = (_d = (_c = windowModalSettings === null || windowModalSettings === void 0 ? void 0 : windowModalSettings[windowItem.Id]) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : (0, Utilities_1.getWindowPopupSize)();
+        const position = (_f = (_e = windowModalSettings === null || windowModalSettings === void 0 ? void 0 : windowModalSettings[windowItem.Id]) === null || _e === void 0 ? void 0 : _e.position) !== null && _f !== void 0 ? _f : (0, Utilities_1.getMiddlePosition)(size);
         let componentNode = null;
         if (!Component &&
             (windowItem.PopupProps.render || windowItem.PopupProps.frameworkComponent)) {
-            componentNode = (React.createElement(ExternalRenderer
+            componentNode = (React.createElement(ExternalRenderer_1.ExternalRenderer
             // TODO AFL: add configurable width&height for custom popups
             , { 
                 // TODO AFL: add configurable width&height for custom popups
@@ -39,9 +42,10 @@ export const WindowPopups = () => {
             Component = Component !== null && Component !== void 0 ? Component : NoopComponent;
             componentNode = (React.createElement(Component, { api: adaptable.api, onDismiss: handleDismiss, popupProps: restPopupProps }));
         }
-        return (React.createElement(Dialog, { "data-name": windowItem.Id, style: { height: '100%' }, className: "ab-Window-Modal", key: windowItem.Id, windowModal: true, windowModalProps: Object.assign(Object.assign({}, windowModalProps), { onChange: (settings) => {
+        return (React.createElement(Dialog_1.default, { "data-name": windowItem.Id, style: { height: '100%' }, className: "ab-Window-Modal", key: windowItem.Id, windowModal: true, windowModalProps: Object.assign(Object.assign({}, windowModalProps), { onChange: (settings) => {
                     setWindowModalSettings((settingsMap) => (Object.assign(Object.assign({}, settingsMap), { [windowItem.Id]: settings })));
                 }, handleSelector: '.ab-Window-Modal .ab-Panel__header', size: size, position: position }), fixed: false, padding: 0, onDismiss: handleDismiss, isOpen: true, showCloseButton: true },
-            React.createElement(PanelWithImage, { style: { height: '100%' }, bodyProps: { padding: 0, height: '100%' }, header: windowItem.Title, glyphicon: windowItem.Icon, variant: "primary" }, componentNode)));
+            React.createElement(PanelWithImage_1.PanelWithImage, { style: { height: '100%' }, bodyProps: { padding: 0, height: '100%' }, header: windowItem.Title, glyphicon: windowItem.Icon, variant: "primary" }, componentNode)));
     })));
 };
+exports.WindowPopups = WindowPopups;

package/src/View/Components/Popups/WindowPopups/windowFactory.js

@@ -1,14 +1,17 @@
-import { GridFilterWindowPopup } from '../../../GridFilter/GridFilterWindowPopup';
-import { PivotDetailsPopoup } from '../../../Layout/PivotDetailsPopoup';
-import { ExportTablePopup } from '../../../Export/ExportTablePopup';
-import { ThemeEditorWindow } from '../../../Theme/ThemeEditorWindow';
-export const WINDOW_GRID_FILTER_EDITOR = 'WINDOW_GRID_FILTER_EDITOR';
-export const SHOW_PIVOT_COLUMN_DETAILS = 'SHOW_PIVOT_COLUMN_DETAILS';
-export const SHOW_EXPORT_TABLE = 'SHOW_EXPORT_TABLE';
-export const SHOW_THEME_EDITOR = 'SHOW_THEME_EDITOR';
-export const windowFactory = {
-    [WINDOW_GRID_FILTER_EDITOR]: GridFilterWindowPopup,
-    [SHOW_PIVOT_COLUMN_DETAILS]: PivotDetailsPopoup,
-    [SHOW_EXPORT_TABLE]: ExportTablePopup,
-    [SHOW_THEME_EDITOR]: ThemeEditorWindow,
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.windowFactory = exports.SHOW_THEME_EDITOR = exports.SHOW_EXPORT_TABLE = exports.SHOW_PIVOT_COLUMN_DETAILS = exports.WINDOW_GRID_FILTER_EDITOR = void 0;
+const GridFilterWindowPopup_1 = require("../../../GridFilter/GridFilterWindowPopup");
+const PivotDetailsPopoup_1 = require("../../../Layout/PivotDetailsPopoup");
+const ExportTablePopup_1 = require("../../../Export/ExportTablePopup");
+const ThemeEditorWindow_1 = require("../../../Theme/ThemeEditorWindow");
+exports.WINDOW_GRID_FILTER_EDITOR = 'WINDOW_GRID_FILTER_EDITOR';
+exports.SHOW_PIVOT_COLUMN_DETAILS = 'SHOW_PIVOT_COLUMN_DETAILS';
+exports.SHOW_EXPORT_TABLE = 'SHOW_EXPORT_TABLE';
+exports.SHOW_THEME_EDITOR = 'SHOW_THEME_EDITOR';
+exports.windowFactory = {
+    [exports.WINDOW_GRID_FILTER_EDITOR]: GridFilterWindowPopup_1.GridFilterWindowPopup,
+    [exports.SHOW_PIVOT_COLUMN_DETAILS]: PivotDetailsPopoup_1.PivotDetailsPopoup,
+    [exports.SHOW_EXPORT_TABLE]: ExportTablePopup_1.ExportTablePopup,
+    [exports.SHOW_THEME_EDITOR]: ThemeEditorWindow_1.ThemeEditorWindow,
 };

package/src/View/Components/PredicateEditor/PredicateEditor.js

@@ -1,14 +1,18 @@
-import * as React from 'react';
-import { Box, Flex } from 'rebass';
-import { isAdaptableSystemIcon } from '../../../components/Icon';
-import HelpBlock from '../../../components/HelpBlock';
-import { Tag } from '../../../components/Tag';
-import AdaptableInput from '../AdaptableInput';
-import { PermitedValuesSelector } from '../PermittedValuesSelector';
-import { AdaptableIconComponent } from '../AdaptableIconComponent';
-import { Select } from '../../../components/Select';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PredicateEditor = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const Icon_1 = require("../../../components/Icon");
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
+const Tag_1 = require("../../../components/Tag");
+const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
+const PermittedValuesSelector_1 = require("../PermittedValuesSelector");
+const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
+const Select_1 = require("../../../components/Select");
 const isValuesPredicateDef = (colDef) => colDef && ['Values', 'ExcludeValues'].includes(colDef.id);
-export const PredicateEditor = (props) => {
+const PredicateEditor = (props) => {
     var _a, _b;
     const baseClassName = 'ab-PredicateEditor';
     const predicateDefsOptions = React.useMemo(() => {
@@ -32,27 +36,28 @@ export const PredicateEditor = (props) => {
     const currentPredicateDef = (_a = props === null || props === void 0 ? void 0 : props.predicateDefs) === null || _a === void 0 ? void 0 : _a.find((item) => { var _a; return item.id === ((_a = props.predicate) === null || _a === void 0 ? void 0 : _a.PredicateId); });
     let icon = null;
     if (currentPredicateDef) {
-        if (isAdaptableSystemIcon(currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.icon)) {
-            icon = React.createElement(AdaptableIconComponent, { icon: currentPredicateDef.icon });
+        if ((0, Icon_1.isAdaptableSystemIcon)(currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.icon)) {
+            icon = React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: currentPredicateDef.icon });
         }
         else if ((currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.icon) && 'text' in (currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.icon)) {
             icon = React.createElement("span", null, currentPredicateDef.icon.text);
         }
     }
-    return (React.createElement(Box, { className: baseClassName },
-        React.createElement(Flex, { justifyContent: "stretch", alignItems: "center" },
-            icon && React.createElement(Tag, { mr: 2 }, icon),
-            React.createElement(Select, { isClearable: true, options: predicateDefsOptions, "data-name": "select-predicate", placeholder: "Select Rule", value: currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.id, onChange: (value) => {
+    return (React.createElement(rebass_1.Box, { className: baseClassName },
+        React.createElement(rebass_1.Flex, { justifyContent: "stretch", alignItems: "center" },
+            icon && React.createElement(Tag_1.Tag, { mr: 2 }, icon),
+            React.createElement(Select_1.Select, { isClearable: true, options: predicateDefsOptions, "data-name": "select-predicate", placeholder: "Select Rule", value: currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.id, onChange: (value) => {
                     var _a;
                     const option = predicateDefsOptions.find((x) => x.value === value);
                     props.onChange(Object.assign(Object.assign({}, props.predicate), { PredicateId: option === null || option === void 0 ? void 0 : option.value, Inputs: ((_a = option === null || option === void 0 ? void 0 : option.inputs) !== null && _a !== void 0 ? _a : []).map((input) => { var _a; return (_a = input.defaultValue) !== null && _a !== void 0 ? _a : ''; }) }));
                 } })),
-        React.createElement(Flex, null, (_b = currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.inputs) === null || _b === void 0 ? void 0 : _b.map((predicateDefInput, index) => {
+        React.createElement(rebass_1.Flex, null, (_b = currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.inputs) === null || _b === void 0 ? void 0 : _b.map((predicateDefInput, index) => {
             var _a, _b;
             return (React.createElement(React.Fragment, null,
-                index > 0 && React.createElement(HelpBlock, { margin: 2 }, "AND"),
-                React.createElement(Flex, { key: index, flex: 1, flexDirection: "column" },
-                    React.createElement(AdaptableInput, { "data-name": `predicate-input-${index}`, marginTop: 2, type: predicateDefInput.type, autoFocus: index === 0, value: (_b = (_a = props.predicate.Inputs) === null || _a === void 0 ? void 0 : _a[index]) !== null && _b !== void 0 ? _b : '', onChange: (e) => handlePredicateInputChange(e, index) }))));
+                index > 0 && React.createElement(HelpBlock_1.default, { margin: 2 }, "AND"),
+                React.createElement(rebass_1.Flex, { key: index, flex: 1, flexDirection: "column" },
+                    React.createElement(AdaptableInput_1.default, { "data-name": `predicate-input-${index}`, marginTop: 2, type: predicateDefInput.type, autoFocus: index === 0, value: (_b = (_a = props.predicate.Inputs) === null || _a === void 0 ? void 0 : _a[index]) !== null && _b !== void 0 ? _b : '', onChange: (e) => handlePredicateInputChange(e, index) }))));
         })),
-        isValuesPredicateDef(currentPredicateDef) && (React.createElement(PermitedValuesSelector, { onPredicateValuesChange: handlePredicateValuesChange, predicate: props.predicate, columnId: props.columnId }))));
+        isValuesPredicateDef(currentPredicateDef) && (React.createElement(PermittedValuesSelector_1.PermitedValuesSelector, { onPredicateValuesChange: handlePredicateValuesChange, predicate: props.predicate, columnId: props.columnId }))));
 };
+exports.PredicateEditor = PredicateEditor;

package/src/View/Components/PreviewResultsPanel.js

@@ -1,9 +1,13 @@
-import * as React from 'react';
-import { AdaptablePopover } from '../AdaptablePopover';
-import { DataSource, InfiniteTable } from '../../components/InfiniteTable';
-import CheckIcon from '../../components/icons/check';
-import UIHelper from '../UIHelper';
-import Panel from '../../components/Panel';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreviewResultsPanel = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const AdaptablePopover_1 = require("../AdaptablePopover");
+const InfiniteTable_1 = require("../../components/InfiniteTable");
+const check_1 = tslib_1.__importDefault(require("../../components/icons/check"));
+const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
+const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
 const columnsMap = new Map([
     [
         'InitialValue',
@@ -39,24 +43,24 @@ const columnsMap = new Map([
 const tableDOMProps = {
     style: { flex: 1 },
 };
-export class PreviewResultsPanel extends React.Component {
+class PreviewResultsPanel extends React.Component {
     render() {
         let previewHeader = this.props.showHeader && this.props.previewInfo != null
             ? 'Preview Results: ' +
                 (this.props.selectedColumn ? this.props.selectedColumn.friendlyName : '')
             : '';
-        let successColor = UIHelper.getColorByMessageType('Success');
+        let successColor = UIHelper_1.default.getColorByMessageType('Success');
         const dataSource = this.props.previewInfo.previewResults.map((previewResult, index) => {
             return {
                 Id: index,
                 InitialValue: previewResult.initialValue,
                 ComputedValue: previewResult.computedValue,
-                ValidInfo: previewResult.validationRules.length > 0 ? (React.createElement(React.Fragment, null, this.props.previewInfo.previewValidationSummary.validationResult != 'None' && (React.createElement(AdaptablePopover, { showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: [this.getValidationErrorMessage(previewResult.validationRules)], MessageType: 'Error' })))) : (React.createElement(React.Fragment, null,
+                ValidInfo: previewResult.validationRules.length > 0 ? (React.createElement(React.Fragment, null, this.props.previewInfo.previewValidationSummary.validationResult != 'None' && (React.createElement(AdaptablePopover_1.AdaptablePopover, { showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: [this.getValidationErrorMessage(previewResult.validationRules)], MessageType: 'Error' })))) : (React.createElement(React.Fragment, null,
                     ' ',
-                    React.createElement(CheckIcon, { style: { color: successColor, fill: 'currentColor' } }))),
+                    React.createElement(check_1.default, { style: { color: successColor, fill: 'currentColor' } }))),
             };
         });
-        return this.props.showPanel ? (React.createElement(Panel, { header: previewHeader, style: { flex: 1 }, bodyProps: {
+        return this.props.showPanel ? (React.createElement(Panel_1.default, { header: previewHeader, style: { flex: 1 }, bodyProps: {
                 style: {
                     border: 0,
                     padding: 0,
@@ -66,8 +70,8 @@ export class PreviewResultsPanel extends React.Component {
                     minHeight: '20rem',
                 },
             } },
-            React.createElement(DataSource, { data: dataSource, primaryKey: "Id" },
-                React.createElement(InfiniteTable, { sortable: false, domProps: tableDOMProps, columns: columnsMap })))) : null;
+            React.createElement(InfiniteTable_1.DataSource, { data: dataSource, primaryKey: "Id" },
+                React.createElement(InfiniteTable_1.InfiniteTable, { sortable: false, domProps: tableDOMProps, columns: columnsMap })))) : null;
     }
     getValidationErrorMessage(alertDefinitions) {
         let validationService = this.props.api.internalApi.getValidationService();
@@ -81,3 +85,4 @@ export class PreviewResultsPanel extends React.Component {
         return returnString.join('\n');
     }
 }
+exports.PreviewResultsPanel = PreviewResultsPanel;