@adaptabletools/adaptable 17.0.5 → 18.0.0-canary.0

package/src/View/SystemStatus/SystemStatusPopup.js

@@ -1,18 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SystemStatusPopup = 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 rebass_1 = require("rebass");
-const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
-const AdaptableObjectCollection_1 = require("../Components/AdaptableObjectCollection");
-const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/AdaptableHelper"));
-const SystemStatusEntityRow_1 = require("./SystemStatusEntityRow");
-const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
-const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
-const Enums_1 = require("../../PredefinedConfig/Common/Enums");
+import * as React from 'react';
+import { connect } from 'react-redux';
+import * as SystemRedux from '../../Redux/ActionsReducers/SystemRedux';
+import { Box } from 'rebass';
+import SimpleButton from '../../components/SimpleButton';
+import { AdaptableObjectCollection } from '../Components/AdaptableObjectCollection';
+import AdaptableHelper from '../../Utilities/Helpers/AdaptableHelper';
+import { SystemStatusEntityRow } from './SystemStatusEntityRow';
+import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
+import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
+import { SortOrder } from '../../PredefinedConfig/Common/Enums';
 const colItems = [
     { Content: 'Message', Size: 10 },
     { Content: 'Timestamp', Size: 3 },
@@ -26,13 +22,13 @@ class SystemStatusPopupComponent extends React.Component {
         this.props.onSystemStatusMessageInfoDeleteAll();
     }
     render() {
-        let clearAllButton = (React.createElement(SimpleButton_1.default, { onClick: () => this.onSystemStatusMessageInfoDeleteAll(), tooltip: "Clear All", tone: "neutral", variant: "raised", accessLevel: this.props.accessLevel, disabled: ArrayExtensions_1.default.IsNullOrEmpty(this.props.SystemStatusMessages) }, "Delete All Messages"));
-        const messages = ArrayExtensions_1.default.sortArrayWithProperty(Enums_1.SortOrder.Desc, this.props.SystemStatusMessages, 'Timestamp').map((smi, index) => {
-            const accessLevel = AdaptableHelper_1.default.getAppropriateAccessLevel(smi, this.props.accessLevel);
-            return (React.createElement(SystemStatusEntityRow_1.SystemStatusEntityRow, { adaptableObject: smi, key: 'smi' + index, onEdit: null, moduleInfo: this.props.moduleInfo, colItems: colItems, api: this.props.api, accessLevel: accessLevel, teamSharingActivated: this.props.teamSharingActivated, onDeleteConfirm: null, onShare: null }));
+        let clearAllButton = (React.createElement(SimpleButton, { onClick: () => this.onSystemStatusMessageInfoDeleteAll(), tooltip: "Clear All", tone: "neutral", variant: "raised", accessLevel: this.props.accessLevel, disabled: ArrayExtensions.IsNullOrEmpty(this.props.SystemStatusMessages) }, "Delete All Messages"));
+        const messages = ArrayExtensions.sortArrayWithProperty(SortOrder.Desc, this.props.SystemStatusMessages, 'Timestamp').map((smi, index) => {
+            const accessLevel = AdaptableHelper.getAppropriateAccessLevel(smi, this.props.accessLevel);
+            return (React.createElement(SystemStatusEntityRow, { adaptableObject: smi, key: 'smi' + index, onEdit: null, moduleInfo: this.props.moduleInfo, colItems: colItems, api: this.props.api, accessLevel: accessLevel, teamSharingActivated: this.props.teamSharingActivated, onDeleteConfirm: null, onShare: null }));
         });
-        return (React.createElement(PopupPanel_1.PopupPanel, { button: clearAllButton, headerText: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() }, ArrayExtensions_1.default.IsNotNullOrEmpty(this.props.SystemStatusMessages) && (React.createElement(rebass_1.Box, { className: "ab-SystemStatus-Popup-List", padding: 2 },
-            React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { colItems: colItems, items: messages })))));
+        return (React.createElement(PopupPanel, { button: clearAllButton, headerText: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() }, ArrayExtensions.IsNotNullOrEmpty(this.props.SystemStatusMessages) && (React.createElement(Box, { className: "ab-SystemStatus-Popup-List", padding: 2 },
+            React.createElement(AdaptableObjectCollection, { colItems: colItems, items: messages })))));
     }
 }
 function mapStateToProps(state, ownProps) {
@@ -46,4 +42,4 @@ function mapDispatchToProps(dispatch) {
         onSystemStatusMessageInfoDeleteAll: () => dispatch(SystemRedux.SystemStatusMessageInfoDeleteAll()),
     };
 }
-exports.SystemStatusPopup = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(SystemStatusPopupComponent);
+export let SystemStatusPopup = connect(mapStateToProps, mapDispatchToProps)(SystemStatusPopupComponent);

package/src/View/SystemStatus/SystemStatusStatusBarContent.js

@@ -1,16 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SystemStatusStatusBarContent = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const AdaptableContext_1 = require("../AdaptableContext");
-const getStatusItemStyle_1 = require("./Utilities/getStatusItemStyle");
-const SystemStatusStatusBarContent = () => {
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+import * as React from 'react';
+import { Box } from 'rebass';
+import { useAdaptable } from '../AdaptableContext';
+import { getStatusItemStyle } from './Utilities/getStatusItemStyle';
+export const SystemStatusStatusBarContent = () => {
+    const adaptable = useAdaptable();
     const currentSystemStatusMessageInfo = adaptable.api.systemStatusApi.getCurrentSystemStatusMessageInfo();
-    const { color, background } = (0, getStatusItemStyle_1.getStatusItemStyle)(currentSystemStatusMessageInfo);
+    const { color, background } = getStatusItemStyle(currentSystemStatusMessageInfo);
     const message = currentSystemStatusMessageInfo === null || currentSystemStatusMessageInfo === void 0 ? void 0 : currentSystemStatusMessageInfo.statusMessage;
-    return (React.createElement(rebass_1.Box, { style: { borderRadius: 'var(--ab__border-radius)' }, padding: 1, color: message && color, backgroundColor: message && background }, message || '0 Messages'));
+    return (React.createElement(Box, { style: { borderRadius: 'var(--ab__border-radius)' }, padding: 1, color: message && color, backgroundColor: message && background }, message || '0 Messages'));
 };
-exports.SystemStatusStatusBarContent = SystemStatusStatusBarContent;

package/src/View/SystemStatus/SystemStatusViewPanel.js

@@ -1,22 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SystemStatusViewPanel = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const react_redux_1 = require("react-redux");
-const getStatusItemStyle_1 = require("./Utilities/getStatusItemStyle");
+import * as React from 'react';
+import { Flex } from 'rebass';
+import { connect } from 'react-redux';
+import { getStatusItemStyle } from './Utilities/getStatusItemStyle';
 class SystemStatusViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
     }
     render() {
         const currentSystemStatusMessageInfo = this.props.api.systemStatusApi.getCurrentSystemStatusMessageInfo();
-        const { color, background } = (0, getStatusItemStyle_1.getStatusItemStyle)(currentSystemStatusMessageInfo);
+        const { color, background } = getStatusItemStyle(currentSystemStatusMessageInfo);
         const message = currentSystemStatusMessageInfo === null || currentSystemStatusMessageInfo === void 0 ? void 0 : currentSystemStatusMessageInfo.statusMessage;
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(rebass_1.Flex, { alignItems: "stretch", className: `ab-${elementType}__SystemStatus__wrap` },
-            React.createElement(rebass_1.Flex, { style: { borderRadius: 'var(--ab__border-radius)' }, className: `ab-${elementType}__SystemStatus__text`, marginRight: 2, padding: 2, color: color, backgroundColor: message ? background : '', fontSize: 'var( --ab-font-size-2)', alignItems: "center", "data-name": "system-status-message" }, message || '0 Messages')));
+        return (React.createElement(Flex, { alignItems: "stretch", className: `ab-${elementType}__SystemStatus__wrap` },
+            React.createElement(Flex, { style: { borderRadius: 'var(--ab__border-radius)' }, className: `ab-${elementType}__SystemStatus__text`, marginRight: 2, padding: 2, color: color, backgroundColor: message ? background : '', fontSize: 'var( --ab-font-size-2)', alignItems: "center", "data-name": "system-status-message" }, message || '0 Messages')));
     }
 }
 function mapStateToProps(state) {
@@ -27,4 +23,4 @@ function mapStateToProps(state) {
 function mapDispatchToProps(dispatch) {
     return {};
 }
-exports.SystemStatusViewPanel = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(SystemStatusViewPanelComponent);
+export let SystemStatusViewPanel = connect(mapStateToProps, mapDispatchToProps)(SystemStatusViewPanelComponent);

package/src/View/SystemStatus/Utilities/getStatusItemStyle.js

@@ -1,17 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getStatusItemStyle = void 0;
-const tslib_1 = require("tslib");
-const UIHelper_1 = tslib_1.__importDefault(require("../../UIHelper"));
-const getStatusItemStyle = (systemStatusMessageInfo) => {
+import UIHelper from '../../UIHelper';
+export const getStatusItemStyle = (systemStatusMessageInfo) => {
     var _a;
-    const background = UIHelper_1.default.getColorByMessageType((_a = systemStatusMessageInfo === null || systemStatusMessageInfo === void 0 ? void 0 : systemStatusMessageInfo.statusType) !== null && _a !== void 0 ? _a : 'Success');
+    const background = UIHelper.getColorByMessageType((_a = systemStatusMessageInfo === null || systemStatusMessageInfo === void 0 ? void 0 : systemStatusMessageInfo.statusType) !== null && _a !== void 0 ? _a : 'Success');
     const color = systemStatusMessageInfo
-        ? UIHelper_1.default.getButtonTextColourForMessageType(systemStatusMessageInfo.statusType)
+        ? UIHelper.getButtonTextColourForMessageType(systemStatusMessageInfo.statusType)
         : 'var(--ab-color-text-on-primary)';
     return {
         background,
         color,
     };
 };
-exports.getStatusItemStyle = getStatusItemStyle;

package/src/View/TeamSharing/SharedEntityDependencies.js

@@ -1,27 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SharedEntityDependencies = exports.Dependencies = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
-const AdaptableContext_1 = require("../AdaptableContext");
-const AdaptableObjectList_1 = require("../Components/AdaptableObjectList/AdaptableObjectList");
-const Dependencies = (props) => {
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+import * as React from 'react';
+import { Box } from 'rebass';
+import SimpleButton from '../../components/SimpleButton';
+import { useAdaptable } from '../AdaptableContext';
+import { AdaptableObjectListItem } from '../Components/AdaptableObjectList/AdaptableObjectList';
+export const Dependencies = (props) => {
+    const adaptable = useAdaptable();
     const dependencies = adaptable.api.teamSharingApi.internalApi.getSharedEntryDependencies(props.sharedEntity);
     return (React.createElement(React.Fragment, null, dependencies.map((sharedEntity) => {
         const module = adaptable.ModuleService.getModuleById('TeamSharing');
         const itemView = module.toView(sharedEntity);
-        return (React.createElement(rebass_1.Box, { as: "ul", padding: 0, key: sharedEntity.Uuid, className: "ab-Shared-Entity-Shared-Object", mb: 2 },
-            React.createElement(AdaptableObjectList_1.AdaptableObjectListItem, { deleteTooltip: 'Cannot delete dependencies.', deleteDisabled: true, module: module, data: itemView })));
+        return (React.createElement(Box, { as: "ul", padding: 0, key: sharedEntity.Uuid, className: "ab-Shared-Entity-Shared-Object", mb: 2 },
+            React.createElement(AdaptableObjectListItem, { deleteTooltip: 'Cannot delete dependencies.', deleteDisabled: true, module: module, data: itemView })));
     })));
 };
-exports.Dependencies = Dependencies;
-const SharedEntityDependencies = (props) => {
+export const SharedEntityDependencies = (props) => {
     const [isExpanded, setIsExpanded] = React.useState(false);
     return (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Box, { mb: 3, mt: 2 }, isExpanded ? (React.createElement(SimpleButton_1.default, { onClick: () => setIsExpanded(false), icon: "arrow-up" }, "Collapse")) : (React.createElement(SimpleButton_1.default, { onClick: () => setIsExpanded(true), icon: "arrow-down" }, "Expand"))),
-        isExpanded && React.createElement(exports.Dependencies, { sharedEntity: props.data })));
+        React.createElement(Box, { mb: 3, mt: 2 }, isExpanded ? (React.createElement(SimpleButton, { onClick: () => setIsExpanded(false), icon: "arrow-up" }, "Collapse")) : (React.createElement(SimpleButton, { onClick: () => setIsExpanded(true), icon: "arrow-down" }, "Expand"))),
+        isExpanded && React.createElement(Dependencies, { sharedEntity: props.data })));
 };
-exports.SharedEntityDependencies = SharedEntityDependencies;

package/src/View/TeamSharing/SharedEntityObjectView.js

@@ -1,32 +1,27 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSharedEntityStaleDepsItemView = exports.getSharedEntityActiveStatusObjectView = exports.SharedEntityTypeItemView = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
-const Tag_1 = require("../../components/Tag");
-const AdaptableContext_1 = require("../AdaptableContext");
-const AdaptableObjectList_1 = require("../Components/AdaptableObjectList/AdaptableObjectList");
-const SharedEntityTypeItemView = (props) => {
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
+import SimpleButton from '../../components/SimpleButton';
+import { Tag } from '../../components/Tag';
+import { useAdaptable } from '../AdaptableContext';
+import { AdaptableObjectListItem } from '../Components/AdaptableObjectList/AdaptableObjectList';
+export const SharedEntityTypeItemView = (props) => {
     const [isExpanded, setIsExpanded] = React.useState(false);
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const adaptable = useAdaptable();
     const moduleName = props.data.Module;
     const module = adaptable.ModuleService.getModuleById(moduleName);
     const sharedObject = props.data.Entity;
     const item = module === null || module === void 0 ? void 0 : module.toView(sharedObject);
     return (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Flex, { mb: 2, mt: 2 },
-            React.createElement(rebass_1.Flex, { mr: 2, alignItems: "center" },
-                React.createElement(Tag_1.Tag, { style: { margin: 0 } }, props.data.Module)),
-            item ? (isExpanded ? (React.createElement(SimpleButton_1.default, { "data-name": "shared-entity-collapse-button", onClick: () => setIsExpanded(false), icon: "arrow-up" }, "Collapse")) : (React.createElement(SimpleButton_1.default, { "data-name": "shared-entity-expand-button", onClick: () => setIsExpanded(true), icon: "arrow-down" }, "Expand"))) : null),
-        isExpanded && item && (React.createElement(rebass_1.Box, { as: "ul", padding: 0, className: "ab-Shared-Entity-Shared-Object" },
-            React.createElement(AdaptableObjectList_1.AdaptableObjectListItem, { hideControls: true, data: item, module: module })))));
+        React.createElement(Flex, { mb: 2, mt: 2 },
+            React.createElement(Flex, { mr: 2, alignItems: "center" },
+                React.createElement(Tag, { style: { margin: 0 } }, props.data.Module)),
+            item ? (isExpanded ? (React.createElement(SimpleButton, { "data-name": "shared-entity-collapse-button", onClick: () => setIsExpanded(false), icon: "arrow-up" }, "Collapse")) : (React.createElement(SimpleButton, { "data-name": "shared-entity-expand-button", onClick: () => setIsExpanded(true), icon: "arrow-down" }, "Expand"))) : null),
+        isExpanded && item && (React.createElement(Box, { as: "ul", padding: 0, className: "ab-Shared-Entity-Shared-Object" },
+            React.createElement(AdaptableObjectListItem, { hideControls: true, data: item, module: module })))));
 };
-exports.SharedEntityTypeItemView = SharedEntityTypeItemView;
-const getSharedEntityActiveStatusObjectView = (isDependency) => (props) => {
+export const getSharedEntityActiveStatusObjectView = (isDependency) => (props) => {
     var _a, _b;
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const adaptable = useAdaptable();
     const activeEntries = adaptable.api.internalApi.getState().TeamSharing.ActiveSharedEntityMap;
     const sharedEntity = props.data;
     const isAdaptableObjectPresentInLocalState = !!adaptable.api.internalApi
@@ -47,11 +42,11 @@ const getSharedEntityActiveStatusObjectView = (isDependency) => (props) => {
             const newRevision = sharedEntity.Revision;
             let statusInfo = null;
             if (isUpToDateAndActive) {
-                statusInfo = (React.createElement(rebass_1.Box, { ml: 1, style: { color: 'var(--ab-color-success)' } },
+                statusInfo = (React.createElement(Box, { ml: 1, style: { color: 'var(--ab-color-success)' } },
                     React.createElement("b", null, "up-to-date")));
             }
             if (isStaleAndActive) {
-                statusInfo = (React.createElement(rebass_1.Box, { ml: 1, style: { color: 'var(--ab-color-warn)' } }, ` (Rev. ${newRevision} available)`));
+                statusInfo = (React.createElement(Box, { ml: 1, style: { color: 'var(--ab-color-warn)' } }, ` (Rev. ${newRevision} available)`));
             }
             activeInfo = activeRevision && (React.createElement(React.Fragment, null,
                 activeRevision &&
@@ -66,11 +61,10 @@ const getSharedEntityActiveStatusObjectView = (isDependency) => (props) => {
     }
     const sharedValue = `by ${sharedEntity.UserName} at ${new Date(sharedEntity.Timestamp).toLocaleString()}`;
     return (React.createElement(React.Fragment, null,
-        !isDependency && React.createElement(Tag_1.Tag, null, sharedValue),
-        activeInfo && React.createElement(Tag_1.Tag, null, activeInfo)));
+        !isDependency && React.createElement(Tag, null, sharedValue),
+        activeInfo && React.createElement(Tag, null, activeInfo)));
 };
-exports.getSharedEntityActiveStatusObjectView = getSharedEntityActiveStatusObjectView;
-const getSharedEntityStaleDepsItemView = (staleDependencies) => () => {
+export const getSharedEntityStaleDepsItemView = (staleDependencies) => () => {
     let staleDepsString = 'Shared entity has';
     if ((staleDependencies === null || staleDependencies === void 0 ? void 0 : staleDependencies.length) === 1) {
         staleDepsString += ` one (${staleDependencies[0].Module}) stale dependency`;
@@ -78,7 +72,6 @@ const getSharedEntityStaleDepsItemView = (staleDependencies) => () => {
     else {
         staleDepsString += ` ${staleDependencies.length} stale dependencies`;
     }
-    return (React.createElement(Tag_1.Tag, null,
-        React.createElement(rebass_1.Box, { ml: 1, style: { color: 'var(--ab-color-warn)' } }, staleDepsString)));
+    return (React.createElement(Tag, null,
+        React.createElement(Box, { ml: 1, style: { color: 'var(--ab-color-warn)' } }, staleDepsString)));
 };
-exports.getSharedEntityStaleDepsItemView = getSharedEntityStaleDepsItemView;

package/src/View/TeamSharing/TeamSharingApplyButton.js

@@ -1,15 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TeamSharingApplyButton = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
-const AdaptableContext_1 = require("../AdaptableContext");
-const TeamSharingApplyButton = (props) => {
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+import * as React from 'react';
+import SimpleButton from '../../components/SimpleButton';
+import { useAdaptable } from '../AdaptableContext';
+export const TeamSharingApplyButton = (props) => {
+    const adaptable = useAdaptable();
     const handleImport = React.useCallback(() => {
         adaptable.api.teamSharingApi.importSharedEntry(props.data);
     }, []);
-    return (React.createElement(SimpleButton_1.default, { "data-name": "shared-entity-apply-button", onClick: handleImport, variant: "text", tooltip: "Import", icon: "import-export" }));
+    return (React.createElement(SimpleButton, { "data-name": "shared-entity-apply-button", onClick: handleImport, variant: "text", tooltip: "Import", icon: "import-export" }));
 };
-exports.TeamSharingApplyButton = TeamSharingApplyButton;

package/src/View/Theme/ThemeEditor.js

@@ -1,17 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeEditor = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
-const AdaptableContext_1 = require("../AdaptableContext");
-const AdaptableInput_1 = tslib_1.__importDefault(require("../Components/AdaptableInput"));
-const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
-const rebass_1 = require("rebass");
-const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
-const ThemeField_1 = require("./ThemeField");
-const VariantSelector_1 = require("./VariantSelector");
+import * as React from 'react';
+import FormLayout, { FormRow } from '../../components/FormLayout';
+import { useAdaptable } from '../AdaptableContext';
+import AdaptableInput from '../Components/AdaptableInput';
+import throttle from 'lodash/throttle';
+import SimpleButton from '../../components/SimpleButton';
+import { Box, Flex, Text } from 'rebass';
+import Panel from '../../components/Panel';
+import { Field } from './ThemeField';
+import { VariantSelector } from './VariantSelector';
 const fields = [
     {
         name: 'Primary Color',
@@ -74,9 +70,9 @@ const fields = [
         variable: '--ab-color-text-on-defaultbackground',
     },
 ];
-const ThemeEditor = (props) => {
+export const ThemeEditor = (props) => {
     var _a, _b;
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const adaptable = useAdaptable();
     const allThemes = adaptable.api.themeApi.getUserThemes();
     const disabled = props.accessLevel === 'ReadOnly';
     const [currentThemeObject, setCurrentThemeObject] = React.useState(() => {
@@ -107,7 +103,7 @@ const ThemeEditor = (props) => {
         };
     }, []);
     const handleNameDescriptionChangeThrottled = React.useMemo(() => {
-        return (0, throttle_1.default)((key, value) => {
+        return throttle((key, value) => {
             const theme = adaptable.api.themeApi.getCurrentThemeObject();
             const newTheme = Object.assign(Object.assign({}, theme), { [key]: value });
             adaptable.api.themeApi.editTheme(newTheme);
@@ -140,21 +136,21 @@ const ThemeEditor = (props) => {
     const nameHasChanged = currentThemeObject.Name !== props.theme;
     const nameIsNotUnique = allThemes.some((theme) => theme.Uuid !== currentThemeObject.Uuid && currentThemeObject.Name === theme.Name);
     const saveNameDisabled = !nameHasChanged || nameIsNotUnique || currentThemeObject.Name === '';
-    return (React.createElement(Panel_1.default, { header: React.createElement(rebass_1.Flex, { alignItems: "center", width: "100%" },
-            React.createElement(rebass_1.Box, { flex: 1 }, " Edit Custom Theme"),
-            React.createElement(SimpleButton_1.default, { "data-name": "delete", disabled: props.accessLevel !== 'Full', icon: "delete", onClick: handleDeleteTheme, variant: "text" })) },
-        React.createElement(FormLayout_1.default, null,
-            React.createElement(FormLayout_1.FormRow, { label: "Theme Name" },
-                React.createElement(AdaptableInput_1.default, { mr: 2, onChange: (event) => setCurrentThemeObject(Object.assign(Object.assign({}, currentThemeObject), { Name: event.target.value.replace(/ /g, '-') })), value: (_a = currentThemeObject.Name) !== null && _a !== void 0 ? _a : '' }),
-                React.createElement(SimpleButton_1.default, { onClick: handleSaveName, disabled: saveNameDisabled, icon: "save" }),
-                React.createElement(rebass_1.Text, { fontSize: 2, marginTop: 1 }, "The name cannot contain spaces."),
-                nameIsNotUnique && (React.createElement(rebass_1.Text, { fontSize: 2, color: "var(--ab-color-error)" }, "Name must be unique."))),
-            React.createElement(FormLayout_1.FormRow, { label: "Description" },
-                React.createElement(AdaptableInput_1.default, { onChange: (event) => handleDescriptionChange('Description', event.target.value), value: (_b = currentThemeObject === null || currentThemeObject === void 0 ? void 0 : currentThemeObject.Description) !== null && _b !== void 0 ? _b : '' })),
-            React.createElement(FormLayout_1.FormRow, { label: "Variant" },
-                React.createElement(VariantSelector_1.VariantSelector, { onChange: handleVariantChange, theme: currentThemeObject })),
+    return (React.createElement(Panel, { header: React.createElement(Flex, { alignItems: "center", width: "100%" },
+            React.createElement(Box, { flex: 1 }, " Edit Custom Theme"),
+            React.createElement(SimpleButton, { "data-name": "delete", disabled: props.accessLevel !== 'Full', icon: "delete", onClick: handleDeleteTheme, variant: "text" })) },
+        React.createElement(FormLayout, null,
+            React.createElement(FormRow, { label: "Theme Name" },
+                React.createElement(AdaptableInput, { mr: 2, onChange: (event) => setCurrentThemeObject(Object.assign(Object.assign({}, currentThemeObject), { Name: event.target.value.replace(/ /g, '-') })), value: (_a = currentThemeObject.Name) !== null && _a !== void 0 ? _a : '' }),
+                React.createElement(SimpleButton, { onClick: handleSaveName, disabled: saveNameDisabled, icon: "save" }),
+                React.createElement(Text, { fontSize: 2, marginTop: 1 }, "The name cannot contain spaces."),
+                nameIsNotUnique && (React.createElement(Text, { fontSize: 2, color: "var(--ab-color-error)" }, "Name must be unique."))),
+            React.createElement(FormRow, { label: "Description" },
+                React.createElement(AdaptableInput, { onChange: (event) => handleDescriptionChange('Description', event.target.value), value: (_b = currentThemeObject === null || currentThemeObject === void 0 ? void 0 : currentThemeObject.Description) !== null && _b !== void 0 ? _b : '' })),
+            React.createElement(FormRow, { label: "Variant" },
+                React.createElement(VariantSelector, { onChange: handleVariantChange, theme: currentThemeObject })),
             fields.map((field) => {
-                return (React.createElement(ThemeField_1.Field, { disabled: disabled, key: field.name, type: field.type, name: field.name, value: valuesFromTheme[field.variable], variable: field.variable, onChange: (val) => {
+                return (React.createElement(Field, { disabled: disabled, key: field.name, type: field.type, name: field.name, value: valuesFromTheme[field.variable], variable: field.variable, onChange: (val) => {
                         // needs a fresh copy
                         const currentThemeObject = adaptable.api.themeApi.getCurrentThemeObject();
                         let newTheme = null;
@@ -170,4 +166,3 @@ const ThemeEditor = (props) => {
                     } }));
             }))));
 };
-exports.ThemeEditor = ThemeEditor;

package/src/View/Theme/ThemeEditorWindow.js

@@ -1,15 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeEditorWindow = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const AdaptableContext_1 = require("../AdaptableContext");
-const ThemePopup_1 = require("./ThemePopup");
-const ThemeEditorWindow = () => {
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+import * as React from 'react';
+import { Box } from 'rebass';
+import { useAdaptable } from '../AdaptableContext';
+import { ThemePopup } from './ThemePopup';
+export const ThemeEditorWindow = () => {
+    const adaptable = useAdaptable();
     const moduleInfo = adaptable.ModuleService.getModuleInfoByModule('Theme');
-    return (React.createElement(rebass_1.Box, { p: 2 },
-        React.createElement(ThemePopup_1.ThemePopup, { hideShowInWindow: true, moduleInfo: moduleInfo, api: adaptable.api })));
+    return (React.createElement(Box, { p: 2 },
+        React.createElement(ThemePopup, { hideShowInWindow: true, moduleInfo: moduleInfo, api: adaptable.api })));
 };
-exports.ThemeEditorWindow = ThemeEditorWindow;

package/src/View/Theme/ThemeField.js

@@ -1,40 +1,35 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Field = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
-const AdaptableContext_1 = require("../AdaptableContext");
-const StyleHelper_1 = require("../../Utilities/Helpers/StyleHelper");
-const FormLayout_1 = require("../../components/FormLayout");
-const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
-const rebass_1 = require("rebass");
-const ColorPicker_1 = require("../../components/ColorPicker");
-const AdaptableInput_1 = tslib_1.__importDefault(require("../Components/AdaptableInput"));
-const Field = (props) => {
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+import * as React from 'react';
+import throttle from 'lodash/throttle';
+import { useAdaptable } from '../AdaptableContext';
+import { getVariableColor } from '../../Utilities/Helpers/StyleHelper';
+import { FormRow } from '../../components/FormLayout';
+import SimpleButton from '../../components/SimpleButton';
+import { Flex } from 'rebass';
+import { ColorPicker } from '../../components/ColorPicker';
+import AdaptableInput from '../Components/AdaptableInput';
+export const Field = (props) => {
+    const adaptable = useAdaptable();
     let input = null;
     let value = props.value;
     const throttledOnChange = React.useMemo(() => {
-        return (0, throttle_1.default)((value) => {
+        return throttle((value) => {
             props.onChange(value);
         }, 300);
     }, []);
     if (value === undefined) {
-        value = (0, StyleHelper_1.getVariableColor)(`var(${props.variable})`);
+        value = getVariableColor(`var(${props.variable})`);
     }
     switch (props.type) {
         case 'number':
-            input = (React.createElement(AdaptableInput_1.default, { disabled: props.disabled, type: "number", onChange: (event) => throttledOnChange(event.target.value), value: value }));
+            input = (React.createElement(AdaptableInput, { disabled: props.disabled, type: "number", onChange: (event) => throttledOnChange(event.target.value), value: value }));
             break;
         case 'color':
-            input = (React.createElement(ColorPicker_1.ColorPicker, { disabled: props.disabled, includeAlpha: false, api: adaptable.api, value: value, onChange: (color) => throttledOnChange(color) }));
+            input = (React.createElement(ColorPicker, { disabled: props.disabled, includeAlpha: false, api: adaptable.api, value: value, onChange: (color) => throttledOnChange(color) }));
             break;
     }
-    return (React.createElement(FormLayout_1.FormRow, { label: props.name },
-        React.createElement(rebass_1.Flex, null,
+    return (React.createElement(FormRow, { label: props.name },
+        React.createElement(Flex, null,
             input,
             ' ',
-            React.createElement(SimpleButton_1.default, { disabled: props.value === undefined, onClick: () => props.onChange(false) }, "Clear"))));
+            React.createElement(SimpleButton, { disabled: props.value === undefined, onClick: () => props.onChange(false) }, "Clear"))));
 };
-exports.Field = Field;

package/src/View/Theme/ThemePopup.js

@@ -1,19 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemePopup = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_redux_1 = require("react-redux");
-const ThemeRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ThemeRedux"));
-const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
-const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
-const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
-const ThemeEditor_1 = require("./ThemeEditor");
-const rebass_1 = require("rebass");
-const ObjectFactory_1 = tslib_1.__importDefault(require("../../Utilities/ObjectFactory"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
-const icons_1 = require("../../components/icons");
-const ThemeSelector_1 = require("./ThemeSelector");
+import * as React from 'react';
+import { connect } from 'react-redux';
+import * as ThemeRedux from '../../Redux/ActionsReducers/ThemeRedux';
+import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
+import FormLayout, { FormRow } from '../../components/FormLayout';
+import DropdownButton from '../../components/DropdownButton';
+import { ThemeEditor } from './ThemeEditor';
+import { Box } from 'rebass';
+import ObjectFactory from '../../Utilities/ObjectFactory';
+import SimpleButton from '../../components/SimpleButton';
+import { Icon } from '../../components/icons';
+import { ThemeSelector } from './ThemeSelector';
 class ThemePopupComponent extends React.Component {
     constructor() {
         super(...arguments);
@@ -25,7 +21,7 @@ class ThemePopupComponent extends React.Component {
                 nthItem++;
                 name = 'Custom-Theme-' + nthItem;
             }
-            const newTheme = ObjectFactory_1.default.CreateEmptyTheme(name);
+            const newTheme = ObjectFactory.CreateEmptyTheme(name);
             newTheme.Variant = variant;
             this.props.api.themeApi.addUserTheme(newTheme);
             this.props.api.themeApi.loadTheme(newTheme.Name);
@@ -36,7 +32,7 @@ class ThemePopupComponent extends React.Component {
             .getUserThemes()
             .some((theme) => theme.Name === this.props.CurrentTheme);
         const disabled = this.props.accessLevel === 'ReadOnly';
-        const newButton = (React.createElement(DropdownButton_1.default, { ml: 2, disabled: disabled, tone: "accent", variant: "raised", columns: ['label'], items: [
+        const newButton = (React.createElement(DropdownButton, { ml: 2, disabled: disabled, tone: "accent", variant: "raised", columns: ['label'], items: [
                 {
                     label: 'Dark',
                     onClick: () => this.handleCreateNewTheme('dark'),
@@ -46,19 +42,19 @@ class ThemePopupComponent extends React.Component {
                     onClick: () => this.handleCreateNewTheme('light'),
                 },
             ] },
-            React.createElement(icons_1.Icon, { name: "plus" }),
+            React.createElement(Icon, { name: "plus" }),
             " New"));
-        return (React.createElement(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), button: React.createElement(React.Fragment, null,
-                !this.props.hideShowInWindow && (React.createElement(SimpleButton_1.default, { icon: "open-in-new", onClick: () => {
+        return (React.createElement(PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), button: React.createElement(React.Fragment, null,
+                !this.props.hideShowInWindow && (React.createElement(SimpleButton, { icon: "open-in-new", onClick: () => {
                         this.props.api.themeApi.internalApi.openInWindow();
                     } })),
                 newButton) },
-            React.createElement(FormLayout_1.default, null,
-                React.createElement(FormLayout_1.FormRow, { label: "Current Theme:" },
-                    React.createElement(rebass_1.Box, { maxWidth: 150 },
-                        React.createElement(ThemeSelector_1.ThemeSelector, null)))),
-            isCustomTheme && (React.createElement(rebass_1.Box, { mt: 3 },
-                React.createElement(ThemeEditor_1.ThemeEditor, { accessLevel: this.props.accessLevel, theme: this.props.CurrentTheme })))));
+            React.createElement(FormLayout, null,
+                React.createElement(FormRow, { label: "Current Theme:" },
+                    React.createElement(Box, { maxWidth: 150 },
+                        React.createElement(ThemeSelector, null)))),
+            isCustomTheme && (React.createElement(Box, { mt: 3 },
+                React.createElement(ThemeEditor, { accessLevel: this.props.accessLevel, theme: this.props.CurrentTheme })))));
     }
     onChangeTheme(value) {
         this.props.SelectTheme(value);
@@ -75,4 +71,4 @@ function mapDispatchToProps(dispatch) {
         SelectTheme: (newTheme) => dispatch(ThemeRedux.ThemeSelect(newTheme)),
     };
 }
-exports.ThemePopup = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(ThemePopupComponent);
+export let ThemePopup = connect(mapStateToProps, mapDispatchToProps)(ThemePopupComponent);