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

package/src/View/DataChangeHistory/DataChangeHistoryViewPanel.js

@@ -1,27 +1,31 @@
-import * as React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { SystemDataChangeHistoryDisable, SystemDataChangeHistoryEnable, SystemDataChangeHistoryResume, SystemDataChangeHistorySuspend, } from '../../Redux/ActionsReducers/SystemRedux';
-import { Box, Flex, Text } from 'rebass';
-import { ButtonPlay } from '../Components/Buttons/ButtonPlay';
-import { ButtonPause } from '../Components/Buttons/ButtonPause';
-import { ButtonStop } from '../Components/Buttons/ButtonStop';
-import { DateFormatter } from '../../Utilities/Helpers/FormatHelper';
-import Tooltip from '../../components/Tooltip';
-import { useAdaptable } from '../AdaptableContext';
-import SimpleButton from '../../components/SimpleButton';
-import { Icon } from '../../components/icons';
-export const DataChangeHistoryViewPanelControl = (props) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataChangeHistoryViewPanelControl = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const SystemRedux_1 = require("../../Redux/ActionsReducers/SystemRedux");
+const rebass_1 = require("rebass");
+const ButtonPlay_1 = require("../Components/Buttons/ButtonPlay");
+const ButtonPause_1 = require("../Components/Buttons/ButtonPause");
+const ButtonStop_1 = require("../Components/Buttons/ButtonStop");
+const FormatHelper_1 = require("../../Utilities/Helpers/FormatHelper");
+const Tooltip_1 = tslib_1.__importDefault(require("../../components/Tooltip"));
+const AdaptableContext_1 = require("../AdaptableContext");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const icons_1 = require("../../components/icons");
+const DataChangeHistoryViewPanelControl = (props) => {
     var _a, _b;
-    const adaptable = useAdaptable();
-    const dispatch = useDispatch();
-    const onChangeHistoryEnable = React.useCallback(() => dispatch(SystemDataChangeHistoryEnable()), []);
-    const onChangeHistoryDisable = React.useCallback(() => dispatch(SystemDataChangeHistoryDisable()), []);
-    const onChangeHistorySuspend = React.useCallback(() => dispatch(SystemDataChangeHistorySuspend()), []);
-    const onChangeHistoryResume = React.useCallback(() => dispatch(SystemDataChangeHistoryResume()), []);
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const onChangeHistoryEnable = React.useCallback(() => dispatch((0, SystemRedux_1.SystemDataChangeHistoryEnable)()), []);
+    const onChangeHistoryDisable = React.useCallback(() => dispatch((0, SystemRedux_1.SystemDataChangeHistoryDisable)()), []);
+    const onChangeHistorySuspend = React.useCallback(() => dispatch((0, SystemRedux_1.SystemDataChangeHistorySuspend)()), []);
+    const onChangeHistoryResume = React.useCallback(() => dispatch((0, SystemRedux_1.SystemDataChangeHistoryResume)()), []);
     const handleOpenPopup = React.useCallback(() => {
         adaptable.api.settingsPanelApi.openSettingsPanel('DataChangeHistory');
     }, []);
-    const { changeHistoryMode, activationTime, suspensionTime } = useSelector((state) => ({
+    const { changeHistoryMode, activationTime, suspensionTime } = (0, react_redux_1.useSelector)((state) => ({
         changeHistoryMode: state.System.DataChangeHistory.currentMode,
         activationTime: state.System.DataChangeHistory.enableTime,
         suspensionTime: state.System.DataChangeHistory.suspendTime,
@@ -31,23 +35,24 @@ export const DataChangeHistoryViewPanelControl = (props) => {
     const suspended = changeHistoryMode === 'SUSPENDED';
     const gap = (_a = props.gap) !== null && _a !== void 0 ? _a : 'var(--ab-space-1)';
     const buttonsPaddingY = (_b = props.buttonsPaddingY) !== null && _b !== void 0 ? _b : 2;
-    const buttonPanel = (React.createElement(Flex, { className: "ab-DataChangeHistoryPanel--button-panel", paddingY: buttonsPaddingY, style: { gap: gap } },
-        disabled && (React.createElement(ButtonPlay, { className: "ab-DataChangeHistoryPanel--button-activate", "data-name": 'data-change-history--button-activate', tooltip: '', onClick: () => onChangeHistoryEnable() })),
-        suspended && (React.createElement(ButtonPlay, { className: "ab-DataChangeHistoryPanel--button-resume", "data-name": 'data-change-history--button-resume', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume() })),
-        enabled && (React.createElement(ButtonPause, { className: "ab-DataChangeHistoryPanel--button-suspend", "data-name": 'data-change-history--button-suspend', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend() })),
-        (enabled || suspended) && (React.createElement(ButtonStop, { className: "ab-DataChangeHistoryPanel--button-deactivate", "data-name": 'data-change-history--button-deactivate', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable() }))));
+    const buttonPanel = (React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPanel--button-panel", paddingY: buttonsPaddingY, style: { gap: gap } },
+        disabled && (React.createElement(ButtonPlay_1.ButtonPlay, { className: "ab-DataChangeHistoryPanel--button-activate", "data-name": 'data-change-history--button-activate', tooltip: '', onClick: () => onChangeHistoryEnable() })),
+        suspended && (React.createElement(ButtonPlay_1.ButtonPlay, { className: "ab-DataChangeHistoryPanel--button-resume", "data-name": 'data-change-history--button-resume', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume() })),
+        enabled && (React.createElement(ButtonPause_1.ButtonPause, { className: "ab-DataChangeHistoryPanel--button-suspend", "data-name": 'data-change-history--button-suspend', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend() })),
+        (enabled || suspended) && (React.createElement(ButtonStop_1.ButtonStop, { className: "ab-DataChangeHistoryPanel--button-deactivate", "data-name": 'data-change-history--button-deactivate', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable() }))));
     const dateFormat = `${adaptable.api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat} HH:mm:ss`;
-    const statusPanel = (React.createElement(Flex, { className: "ab-DataChangeHistoryPanel--status-panel", alignItems: 'center', style: { gap: gap } },
-        enabled && (React.createElement(Tooltip, { label: !!activationTime && `since ${DateFormatter(activationTime, { Pattern: dateFormat })}` },
-            React.createElement(Text, { className: "ab-DataChangeHistoryPanel--status-active", fontSize: 2, style: { color: 'var(--ab-color-success)' } }, "Active"))),
-        suspended && (React.createElement(Tooltip, { label: !!suspensionTime && `since ${DateFormatter(suspensionTime, { Pattern: dateFormat })}` },
-            React.createElement(Text, { className: "ab-DataChangeHistoryPanel--status-suspended", fontSize: 2, style: { color: 'var(--ab-color-warn)' } }, "Suspended"))),
-        disabled && (React.createElement(Text, { className: "ab-DataChangeHistoryPanel--status-disabled", fontSize: 2 }, "Activate Data Tracking"))));
-    return (React.createElement(Flex, { flexDirection: 'row' },
+    const statusPanel = (React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPanel--status-panel", alignItems: 'center', style: { gap: gap } },
+        enabled && (React.createElement(Tooltip_1.default, { label: !!activationTime && `since ${(0, FormatHelper_1.DateFormatter)(activationTime, { Pattern: dateFormat })}` },
+            React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPanel--status-active", fontSize: 2, style: { color: 'var(--ab-color-success)' } }, "Active"))),
+        suspended && (React.createElement(Tooltip_1.default, { label: !!suspensionTime && `since ${(0, FormatHelper_1.DateFormatter)(suspensionTime, { Pattern: dateFormat })}` },
+            React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPanel--status-suspended", fontSize: 2, style: { color: 'var(--ab-color-warn)' } }, "Suspended"))),
+        disabled && (React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPanel--status-disabled", fontSize: 2 }, "Activate Data Tracking"))));
+    return (React.createElement(rebass_1.Flex, { flexDirection: 'row' },
         buttonPanel,
         statusPanel,
-        React.createElement(Flex, { ml: 2, alignItems: "center" },
-            React.createElement(SimpleButton, { onClick: handleOpenPopup, variant: "text" },
-                React.createElement(Icon, { name: "open-in-new" }),
-                React.createElement(Box, { ml: 1 }, "Show")))));
+        React.createElement(rebass_1.Flex, { ml: 2, alignItems: "center" },
+            React.createElement(SimpleButton_1.default, { onClick: handleOpenPopup, variant: "text" },
+                React.createElement(icons_1.Icon, { name: "open-in-new" }),
+                React.createElement(rebass_1.Box, { ml: 1 }, "Show")))));
 };
+exports.DataChangeHistoryViewPanelControl = DataChangeHistoryViewPanelControl;

package/src/View/DataChangeHistory/buildActionColumnButton.js

@@ -1,4 +1,7 @@
-export const buildActionColumnButton = (options, parentAdapTableApi, undoRowNode, clearRow) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildActionColumnButton = void 0;
+const buildActionColumnButton = (options, parentAdapTableApi, undoRowNode, clearRow) => {
     let changeHistoryButtons = options.changeHistoryButton;
     if (!changeHistoryButtons ||
         (Array.isArray(changeHistoryButtons) && changeHistoryButtons.length === 0)) {
@@ -76,3 +79,4 @@ export const buildActionColumnButton = (options, parentAdapTableApi, undoRowNode
         icon: actionColumnOption.icon,
     }));
 };
+exports.buildActionColumnButton = buildActionColumnButton;

package/src/View/DataImport/DataImportPopup.js

@@ -1,10 +1,14 @@
-import * as React from 'react';
-import { Box } from 'rebass';
-import HelpBlock from '../../components/HelpBlock';
-import SimpleButton from '../../components/SimpleButton';
-import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
-import { DataImportWizard } from './DataImportWizard';
-export const DataImportPopup = (props) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataImportPopup = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
+const DataImportWizard_1 = require("./DataImportWizard");
+const DataImportPopup = (props) => {
     const [isWizardOpen, setIsWizardOpen] = React.useState(false);
     React.useEffect(() => {
         var _a, _b;
@@ -13,11 +17,11 @@ export const DataImportPopup = (props) => {
         }
     }, []);
     return (React.createElement(React.Fragment, null,
-        React.createElement(PopupPanel, { headerText: 'Data Import', glyphicon: 'import', infoLink: props.moduleInfo.HelpPage },
-            React.createElement(Box, null,
-                React.createElement(HelpBlock, { mb: 2, fontSize: 3 }, "Click the 'Import Data' button to Insert or Update data into AdapTable"),
-                React.createElement(SimpleButton, { icon: "import", variant: "raised", onClick: () => setIsWizardOpen(true) }, "Import Data"))),
-        isWizardOpen && (React.createElement(DataImportWizard, { onClose: () => {
+        React.createElement(PopupPanel_1.PopupPanel, { headerText: 'Data Import', glyphicon: 'import', infoLink: props.moduleInfo.HelpPage },
+            React.createElement(rebass_1.Box, null,
+                React.createElement(HelpBlock_1.default, { mb: 2, fontSize: 3 }, "Click the 'Import Data' button to Insert or Update data into AdapTable"),
+                React.createElement(SimpleButton_1.default, { icon: "import", variant: "raised", onClick: () => setIsWizardOpen(true) }, "Import Data"))),
+        isWizardOpen && (React.createElement(DataImportWizard_1.DataImportWizard, { onClose: () => {
                 var _a;
                 setIsWizardOpen(false);
                 if (['Toolbar', 'ContextMenu', 'ColumnMenu', 'ModuleButton'].includes((_a = props === null || props === void 0 ? void 0 : props.popupParams) === null || _a === void 0 ? void 0 : _a.source)) {
@@ -25,3 +29,4 @@ export const DataImportPopup = (props) => {
                 }
             } }))));
 };
+exports.DataImportPopup = DataImportPopup;

package/src/View/DataImport/DataImportWizard/DataImportWizard.js

@@ -1,16 +1,20 @@
-import * as React from 'react';
-import HelpBlock from '../../../components/HelpBlock';
-import { Tag } from '../../../components/Tag';
-import { createBaseContext } from '../../../Utilities/ObjectFactory';
-import { useAdaptable } from '../../AdaptableContext';
-import { OnePageAdaptableWizard } from '../../Wizard/OnePageAdaptableWizard';
-import { parseCSV, systemFileHandlers } from '../systemFileHandlers';
-import { ColumnsSection } from './sections/ColumnsSection';
-import { UploadSection } from './sections/UploadSection';
-import { ValidationSection } from './sections/ValidationSection';
-export const DataImportWizard = (props) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataImportWizard = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
+const Tag_1 = require("../../../components/Tag");
+const ObjectFactory_1 = require("../../../Utilities/ObjectFactory");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const systemFileHandlers_1 = require("../systemFileHandlers");
+const ColumnsSection_1 = require("./sections/ColumnsSection");
+const UploadSection_1 = require("./sections/UploadSection");
+const ValidationSection_1 = require("./sections/ValidationSection");
+const DataImportWizard = (props) => {
     var _a;
-    const adaptable = useAdaptable();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const dataImportOptions = adaptable.api.optionsApi.getDataImportOptions();
     const module = adaptable.ModuleService.getModuleById('DataImport');
     const [rowData, setRowData] = React.useState(null);
@@ -24,13 +28,13 @@ export const DataImportWizard = (props) => {
     const hasDynamicallyAddedPrimaryKey = typeof dataImportOptions._getPrimaryKeyValue === 'function';
     const getPrimaryKeyValue = (rowData) => {
         if (hasDynamicallyAddedPrimaryKey) {
-            return dataImportOptions._getPrimaryKeyValue(Object.assign(Object.assign({}, createBaseContext(adaptable.api)), { rowData }));
+            return dataImportOptions._getPrimaryKeyValue(Object.assign(Object.assign({}, (0, ObjectFactory_1.createBaseContext)(adaptable.api)), { rowData }));
         }
         return rowData[primaryKey];
     };
     const preprocessRowData = (rowData) => {
         if (typeof (dataImportOptions === null || dataImportOptions === void 0 ? void 0 : dataImportOptions._preprocessRowData) === 'function') {
-            return dataImportOptions._preprocessRowData(Object.assign(Object.assign({}, createBaseContext(adaptable.api)), { rowData }));
+            return dataImportOptions._preprocessRowData(Object.assign(Object.assign({}, (0, ObjectFactory_1.createBaseContext)(adaptable.api)), { rowData }));
         }
         // by default just trim the keys
         let processedRowData = {};
@@ -129,7 +133,7 @@ export const DataImportWizard = (props) => {
     const fileHandlers = React.useMemo(() => {
         var _a, _b;
         const userDefinedHandlers = (_b = (_a = adaptable.api.optionsApi.getDataImportOptions()) === null || _a === void 0 ? void 0 : _a.fileHandlers) !== null && _b !== void 0 ? _b : [];
-        return [...userDefinedHandlers, ...systemFileHandlers];
+        return [...userDefinedHandlers, ...systemFileHandlers_1.systemFileHandlers];
     }, []);
     const supportedFileFormats = React.useMemo(() => {
         return fileHandlers.map((h) => h.fileExtension).join(', ');
@@ -138,7 +142,7 @@ export const DataImportWizard = (props) => {
         var _a, _b;
         const userDefinedFileHandlers = (_b = (_a = adaptable.api.optionsApi.getDataImportOptions()) === null || _a === void 0 ? void 0 : _a.fileHandlers) !== null && _b !== void 0 ? _b : [];
         const fileExtension = `.${file.name.split('.').pop()}`;
-        const handler = [...userDefinedFileHandlers, ...systemFileHandlers].find((fh) => fh.fileExtension === fileExtension);
+        const handler = [...userDefinedFileHandlers, ...systemFileHandlers_1.systemFileHandlers].find((fh) => fh.fileExtension === fileExtension);
         if (!handler) {
             adaptable.api.logError(`No file handler found for file extension ${fileExtension}. Please provide a file handler in Data Import Options.`);
             return;
@@ -153,10 +157,10 @@ export const DataImportWizard = (props) => {
             adaptable.api.logError(`Error reading file ${file.name}. Please check the file is valid.`);
         }
     }, [adaptable]);
-    const fileMessage = file ? (React.createElement(HelpBlock, { mb: 2 },
+    const fileMessage = file ? (React.createElement(HelpBlock_1.default, { mb: 2 },
         "File ",
-        React.createElement(Tag, null, file.name),
-        " is ready to be imported.")) : (React.createElement(HelpBlock, { mb: 2 },
+        React.createElement(Tag_1.Tag, null, file.name),
+        " is ready to be imported.")) : (React.createElement(HelpBlock_1.default, { mb: 2 },
         "Supported file types: ",
         supportedFileFormats));
     // ---- TEXT IMPORT ----
@@ -172,7 +176,7 @@ export const DataImportWizard = (props) => {
                 textHandler = JSON.parse;
             }
             else {
-                textHandler = parseCSV;
+                textHandler = systemFileHandlers_1.parseCSV;
             }
         }
         setText(text);
@@ -208,7 +212,7 @@ export const DataImportWizard = (props) => {
             return null;
         }
         return (_a = rowData === null || rowData === void 0 ? void 0 : rowData.reduce) === null || _a === void 0 ? void 0 : _a.call(rowData, (acc, rowData) => {
-            const error = dataImportOptions.validate(Object.assign({ rowData }, createBaseContext(adaptable.api)));
+            const error = dataImportOptions.validate(Object.assign({ rowData }, (0, ObjectFactory_1.createBaseContext)(adaptable.api)));
             const primaryKeyValue = getPrimaryKeyValue(rowData);
             if (error && primaryKeyValue && error.length) {
                 acc[primaryKeyValue] = error;
@@ -224,7 +228,7 @@ export const DataImportWizard = (props) => {
         });
         adaptable.api.dataImportApi.internalApi.importData(validData);
     };
-    return (React.createElement(OnePageAdaptableWizard, { data: null, moduleInfo: module.moduleInfo, finishText: "Import", onFinish: () => {
+    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { data: null, moduleInfo: module.moduleInfo, finishText: "Import", onFinish: () => {
             handleFinish();
             props.onClose();
         }, onHide: () => {
@@ -237,7 +241,7 @@ export const DataImportWizard = (props) => {
                 },
                 details: 'Upload the data',
                 render: () => {
-                    return (React.createElement(UploadSection, { importType: importType, onImportTypeChange: handleChangeImportType, 
+                    return (React.createElement(UploadSection_1.UploadSection, { importType: importType, onImportTypeChange: handleChangeImportType, 
                         // FILE
                         readFile: readFile, supportedFileFormats: supportedFileFormats, fileMessage: fileMessage, 
                         // TEXT
@@ -257,7 +261,7 @@ export const DataImportWizard = (props) => {
                     return true;
                 },
                 render: () => {
-                    return (React.createElement(ColumnsSection, { columnsMap: columnsMap, onColumnsChange: (columnsMap) => {
+                    return (React.createElement(ColumnsSection_1.ColumnsSection, { columnsMap: columnsMap, onColumnsChange: (columnsMap) => {
                             setColumnsMap(columnsMap);
                         } }));
                 },
@@ -273,8 +277,9 @@ export const DataImportWizard = (props) => {
                     return true;
                 },
                 render: () => {
-                    return (React.createElement(ValidationSection, { errors: errors, data: rowData, columnsMap: columnsMap, onDataChange: handleRowDataChange, skipInvalidRows: skipInvalidRows, onSkipInvalidRowsChange: setSkipInvalidRows }));
+                    return (React.createElement(ValidationSection_1.ValidationSection, { errors: errors, data: rowData, columnsMap: columnsMap, onDataChange: handleRowDataChange, skipInvalidRows: skipInvalidRows, onSkipInvalidRowsChange: setSkipInvalidRows }));
                 },
             },
         ] }));
 };
+exports.DataImportWizard = DataImportWizard;

package/src/View/DataImport/DataImportWizard/index.js

@@ -1 +1,4 @@
-export * from './DataImportWizard';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./DataImportWizard"), exports);

package/src/View/DataImport/DataImportWizard/sections/ColumnsSection.js

@@ -1,15 +1,19 @@
-import * as React from 'react';
-import { Box, Flex } from 'rebass';
-import { CheckBox } from '../../../../components/CheckBox';
-import DropdownButton from '../../../../components/DropdownButton';
-import HelpBlock from '../../../../components/HelpBlock';
-import { Icon } from '../../../../components/icons';
-import { DataSource, InfiniteTable, } from '../../../../components/InfiniteTable';
-import { Tabs } from '../../../../components/Tabs';
-import { Tag } from '../../../../components/Tag';
-import { useAdaptable } from '../../../AdaptableContext';
-import { AdaptablePopover } from '../../../AdaptablePopover';
-import UIHelper from '../../../UIHelper';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnsSection = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const CheckBox_1 = require("../../../../components/CheckBox");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
+const icons_1 = require("../../../../components/icons");
+const InfiniteTable_1 = require("../../../../components/InfiniteTable");
+const Tabs_1 = require("../../../../components/Tabs");
+const Tag_1 = require("../../../../components/Tag");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const AdaptablePopover_1 = require("../../../AdaptablePopover");
+const UIHelper_1 = tslib_1.__importDefault(require("../../../UIHelper"));
 const tableDOMProps = {
     style: {
         height: '100%',
@@ -18,8 +22,8 @@ const tableDOMProps = {
         flex: 1,
     },
 };
-export const ColumnsSection = (props) => {
-    const { api } = useAdaptable();
+const ColumnsSection = (props) => {
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
     const primaryKey = api.optionsApi.getPrimaryKey();
     const allColumns = React.useMemo(() => {
         return api.columnApi
@@ -48,7 +52,7 @@ export const ColumnsSection = (props) => {
                 align: 'center',
                 render: (params) => {
                     var _a, _b;
-                    return (React.createElement(CheckBox, { disabled: ((_b = (_a = params.data) === null || _a === void 0 ? void 0 : _a.abColumn) === null || _b === void 0 ? void 0 : _b.field) === primaryKey, onChange: (checked) => {
+                    return (React.createElement(CheckBox_1.CheckBox, { disabled: ((_b = (_a = params.data) === null || _a === void 0 ? void 0 : _a.abColumn) === null || _b === void 0 ? void 0 : _b.field) === primaryKey, onChange: (checked) => {
                             handleColumnMapChange(Object.assign(Object.assign({}, params.data), { include: checked }));
                         }, checked: Boolean(params.data.include) }));
                 },
@@ -69,7 +73,7 @@ export const ColumnsSection = (props) => {
                                 handleColumnMapChange(Object.assign(Object.assign({}, params.data), { abColumn: col.value, include: true }));
                             } });
                     });
-                    return (React.createElement(DropdownButton, { showClearButton: true, onClear: () => {
+                    return (React.createElement(DropdownButton_1.default, { showClearButton: true, onClear: () => {
                             handleColumnMapChange(Object.assign(Object.assign({}, params.data), { abColumn: null, include: false }));
                         }, width: "100%", columns: ['label'], items: availableColumns }, (_f = (_c = (_b = (_a = params.data) === null || _a === void 0 ? void 0 : _a.abColumn) === null || _b === void 0 ? void 0 : _b.friendlyName) !== null && _c !== void 0 ? _c : (_e = (_d = params.data) === null || _d === void 0 ? void 0 : _d.abColumn) === null || _e === void 0 ? void 0 : _e.columnId) !== null && _f !== void 0 ? _f : 'Select Column'));
                 },
@@ -81,27 +85,27 @@ export const ColumnsSection = (props) => {
                 align: 'center',
                 render: (row) => {
                     if (!row.data.abColumn) {
-                        return (React.createElement(AdaptablePopover, { popoverMinWidth: 200, showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: ['Select Column'], MessageType: 'Error' }));
+                        return (React.createElement(AdaptablePopover_1.AdaptablePopover, { popoverMinWidth: 200, showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: ['Select Column'], MessageType: 'Error' }));
                     }
-                    const successColor = UIHelper.getColorByMessageType('Success');
-                    return React.createElement(Icon, { name: "check", style: { color: successColor, fill: 'currentColor' } });
+                    const successColor = UIHelper_1.default.getColorByMessageType('Success');
+                    return React.createElement(icons_1.Icon, { name: "check", style: { color: successColor, fill: 'currentColor' } });
                 },
             },
         };
     }, [props.columnsMap]);
     if (!props.columnsMap) {
-        return (React.createElement(Box, { p: 2 },
-            React.createElement(HelpBlock, { color: 'var(--ab-color-error)' },
+        return (React.createElement(rebass_1.Box, { p: 2 },
+            React.createElement(HelpBlock_1.default, { color: 'var(--ab-color-error)' },
                 "No Data has been Imported. Go to ",
-                React.createElement(Tag, null, "Upload"),
+                React.createElement(Tag_1.Tag, null, "Upload"),
                 " step and provide Data")));
     }
-    return (React.createElement(Flex, { flexDirection: "column", p: 2, height: "100%" },
-        React.createElement(Tabs, { mb: 2, height: "100%" },
-            React.createElement(Tabs.Tab, null, "Columns"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(DataSource, { data: props.columnsMap, primaryKey: 'field' },
-                    React.createElement(InfiniteTable, { columnPinning: {
+    return (React.createElement(rebass_1.Flex, { flexDirection: "column", p: 2, height: "100%" },
+        React.createElement(Tabs_1.Tabs, { mb: 2, height: "100%" },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Columns"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(InfiniteTable_1.DataSource, { data: props.columnsMap, primaryKey: 'field' },
+                    React.createElement(InfiniteTable_1.InfiniteTable, { columnPinning: {
                             valid: 'end',
                             type: 'end',
                         }, columnTypes: {
@@ -111,4 +115,5 @@ export const ColumnsSection = (props) => {
                             },
                         }, domProps: tableDOMProps, columns: columns }))))));
 };
-ColumnsSection.displayName = 'ColumnsSection';
+exports.ColumnsSection = ColumnsSection;
+exports.ColumnsSection.displayName = 'ColumnsSection';

package/src/View/DataImport/DataImportWizard/sections/DataPreview.js

@@ -1,13 +1,17 @@
-import { flatten } from 'lodash';
-import * as React from 'react';
-import HelpBlock from '../../../../components/HelpBlock';
-import { Icon } from '../../../../components/icons';
-import { DataSource, InfiniteTable, } from '../../../../components/InfiniteTable';
-import { Tag } from '../../../../components/Tag';
-import { useAdaptable } from '../../../AdaptableContext';
-import { AdaptablePopover } from '../../../AdaptablePopover';
-import UIHelper from '../../../UIHelper';
-import { createBaseContext } from '../../../../Utilities/ObjectFactory';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataPreview = void 0;
+const tslib_1 = require("tslib");
+const lodash_1 = require("lodash");
+const React = tslib_1.__importStar(require("react"));
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
+const icons_1 = require("../../../../components/icons");
+const InfiniteTable_1 = require("../../../../components/InfiniteTable");
+const Tag_1 = require("../../../../components/Tag");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const AdaptablePopover_1 = require("../../../AdaptablePopover");
+const UIHelper_1 = tslib_1.__importDefault(require("../../../UIHelper"));
+const ObjectFactory_1 = require("../../../../Utilities/ObjectFactory");
 const tableDOMProps = {
     style: {
         height: '100%',
@@ -29,13 +33,13 @@ const getCellError = (errors, primaryKeyValue, columnId) => {
     var _a, _b;
     return (_b = (_a = getRowErrors(errors, primaryKeyValue)) === null || _a === void 0 ? void 0 : _a.find((e) => e.columnId === columnId)) !== null && _b !== void 0 ? _b : null;
 };
-export const DataPreview = (props) => {
-    const adaptable = useAdaptable();
+const DataPreview = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const dataImportOptions = adaptable.api.optionsApi.getDataImportOptions();
     if (!props.data) {
-        return (React.createElement(HelpBlock, { color: 'var(--ab-color-error)' },
+        return (React.createElement(HelpBlock_1.default, { color: 'var(--ab-color-error)' },
             "No Data has been Imported. Go to ",
-            React.createElement(Tag, null, "Upload"),
+            React.createElement(Tag_1.Tag, null, "Upload"),
             " step and provide Data"));
     }
     const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
@@ -55,7 +59,7 @@ export const DataPreview = (props) => {
         };
         const getPrimaryKeyValue = (rowData) => {
             if (typeof dataImportOptions._getPrimaryKeyValue === 'function') {
-                return dataImportOptions._getPrimaryKeyValue(Object.assign(Object.assign({}, createBaseContext(adaptable.api)), { rowData }));
+                return dataImportOptions._getPrimaryKeyValue(Object.assign(Object.assign({}, (0, ObjectFactory_1.createBaseContext)(adaptable.api)), { rowData }));
             }
             return rowData[primaryKey];
         };
@@ -90,12 +94,12 @@ export const DataPreview = (props) => {
             align: 'center',
             renderValue: (params) => {
                 const cellErrors = getRowErrors(props.errors, getPrimaryKeyValue(params.data));
-                const successColor = UIHelper.getColorByMessageType('Success');
+                const successColor = UIHelper_1.default.getColorByMessageType('Success');
                 if (!cellErrors || cellErrors.length === 0) {
-                    return React.createElement(Icon, { name: "check", style: { color: successColor, fill: 'currentColor' } });
+                    return React.createElement(icons_1.Icon, { name: "check", style: { color: successColor, fill: 'currentColor' } });
                 }
                 const errorsStr = cellErrors.map((e) => e.error).join(', ');
-                return (React.createElement(AdaptablePopover, { popoverMinWidth: 200, showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: [errorsStr], MessageType: 'Error' }));
+                return (React.createElement(AdaptablePopover_1.AdaptablePopover, { popoverMinWidth: 200, showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: [errorsStr], MessageType: 'Error' }));
             },
         };
         infiniteColumns['type'] = {
@@ -124,9 +128,9 @@ export const DataPreview = (props) => {
             border: 'var(--ab-Dataimport-validation-error__border)',
         };
     };
-    return (React.createElement(DataSource, { data: props.data, primaryKey: primaryKey, onDataMutations: (params) => {
+    return (React.createElement(InfiniteTable_1.DataSource, { data: props.data, primaryKey: primaryKey, onDataMutations: (params) => {
             const newRowData = [...props.data];
-            const mutationsList = flatten(Array.from(params.mutations.values()));
+            const mutationsList = (0, lodash_1.flatten)(Array.from(params.mutations.values()));
             if (!mutationsList.length) {
                 return;
             }
@@ -138,7 +142,7 @@ export const DataPreview = (props) => {
             });
             props.onDataChange(newRowData);
         } },
-        React.createElement(InfiniteTable, { columnPinning: {
+        React.createElement(InfiniteTable_1.InfiniteTable, { columnPinning: {
                 valid: 'end',
                 type: 'end',
             }, columnTypes: {
@@ -151,3 +155,4 @@ export const DataPreview = (props) => {
                 },
             }, domProps: tableDOMProps, columns: columns })));
 };
+exports.DataPreview = DataPreview;

package/src/View/DataImport/DataImportWizard/sections/ImportSection.js

@@ -1,19 +1,24 @@
-import * as React from 'react';
-import { Flex } from 'rebass';
-import FormLayout, { FormRow } from '../../../../components/FormLayout';
-import CheckBox from '../../../../components/icons/check-box';
-import { Tabs } from '../../../../components/Tabs';
-import { DataPreview } from './DataPreview';
-export const ImportSection = (props) => {
-    return (React.createElement(Flex, { flexDirection: "column", p: 2, height: "100%" },
-        React.createElement(Tabs, { mb: 2 },
-            React.createElement(Tabs.Tab, null, "Import Options"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(FormLayout, null,
-                    React.createElement(FormRow, { label: "Exclude Invalid Rows" },
-                        React.createElement(CheckBox, null))))),
-        React.createElement(Tabs, { flex: 1 },
-            React.createElement(Tabs.Tab, null, "Preview"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(DataPreview, { onDataChange: props.onDataChange, data: props.data, errors: props.errors, editable: false })))));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImportSection = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const check_box_1 = tslib_1.__importDefault(require("../../../../components/icons/check-box"));
+const Tabs_1 = require("../../../../components/Tabs");
+const DataPreview_1 = require("./DataPreview");
+const ImportSection = (props) => {
+    return (React.createElement(rebass_1.Flex, { flexDirection: "column", p: 2, height: "100%" },
+        React.createElement(Tabs_1.Tabs, { mb: 2 },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Import Options"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(FormLayout_1.default, null,
+                    React.createElement(FormLayout_1.FormRow, { label: "Exclude Invalid Rows" },
+                        React.createElement(check_box_1.default, null))))),
+        React.createElement(Tabs_1.Tabs, { flex: 1 },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Preview"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(DataPreview_1.DataPreview, { onDataChange: props.onDataChange, data: props.data, errors: props.errors, editable: false })))));
 };
+exports.ImportSection = ImportSection;

package/src/View/DataImport/DataImportWizard/sections/UploadSection/UploadFileSection.js

@@ -1,6 +1,11 @@
-import * as React from 'react';
-import FileDroppable from '../../../../../components/FileDroppable/index';
-import HelpBlock from '../../../../../components/HelpBlock/index';
-export const ImportFileSection = (props) => {
-    return (React.createElement(FileDroppable, { loadingText: React.createElement(HelpBlock, { mb: 2 }, "File loaded , file ready to be imported."), message: props.message, helpText: "Data Import", defaultText: "Click here to select a file to load, or drag it here", dragOverText: "Drop file here to start Data Import", height: "100%", fileAccept: props.supportedFileFormats, readFile: props.readFile }));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImportFileSection = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const index_1 = tslib_1.__importDefault(require("../../../../../components/FileDroppable/index"));
+const index_2 = tslib_1.__importDefault(require("../../../../../components/HelpBlock/index"));
+const ImportFileSection = (props) => {
+    return (React.createElement(index_1.default, { loadingText: React.createElement(index_2.default, { mb: 2 }, "File loaded , file ready to be imported."), message: props.message, helpText: "Data Import", defaultText: "Click here to select a file to load, or drag it here", dragOverText: "Drop file here to start Data Import", height: "100%", fileAccept: props.supportedFileFormats, readFile: props.readFile }));
 };
+exports.ImportFileSection = ImportFileSection;