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

package/src/View/Layout/EditCurrentLayoutButton.js

@@ -1,10 +1,15 @@
-import * as React from 'react';
-import SimpleButton from '../../components/SimpleButton';
-import { useAdaptable } from '../AdaptableContext';
-export const EditCurrentLayoutButton = () => {
-    const adaptable = useAdaptable();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditCurrentLayoutButton = 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 EditCurrentLayoutButton = () => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const handleClick = React.useCallback(() => {
         adaptable.api.layoutApi.showLayoutEditor();
     }, []);
-    return React.createElement(SimpleButton, { ml: 1, variant: "text", iconSize: 15, icon: "edit", onClick: handleClick });
+    return React.createElement(SimpleButton_1.default, { ml: 1, variant: "text", iconSize: 15, icon: "edit", onClick: handleClick });
 };
+exports.EditCurrentLayoutButton = EditCurrentLayoutButton;

package/src/View/Layout/LayoutCloneButton.js

@@ -1,11 +1,16 @@
-import * as React from 'react';
-import SimpleButton from '../../components/SimpleButton';
-import { useAdaptable } from '../AdaptableContext';
-export const LayoutCloneButton = ({ data, accessLevel }) => {
-    const adaptable = useAdaptable();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutCloneButton = 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 LayoutCloneButton = ({ data, accessLevel }) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const isDisabled = accessLevel === 'ReadOnly';
     const handleClick = React.useCallback(() => {
         adaptable.api.layoutApi.showLayoutEditor(data.Name, 'Clone');
     }, []);
-    return React.createElement(SimpleButton, { onClick: handleClick, disabled: isDisabled, variant: "text", icon: "clone" });
+    return React.createElement(SimpleButton_1.default, { onClick: handleClick, disabled: isDisabled, variant: "text", icon: "clone" });
 };
+exports.LayoutCloneButton = LayoutCloneButton;

package/src/View/Layout/LayoutRadioSelector.js

@@ -1,8 +1,12 @@
-import * as React from 'react';
-import Radio from '../../components/Radio';
-import { useAdaptable } from '../AdaptableContext';
-export const LayoutRadioSelector = ({ data }) => {
-    const adaptable = useAdaptable();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutRadioSelector = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
+const AdaptableContext_1 = require("../AdaptableContext");
+const LayoutRadioSelector = ({ data }) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const currentLayout = adaptable.api.layoutApi.getCurrentLayout();
     const layouts = adaptable.api.layoutApi.getLayouts();
     const isDisabled = (layouts === null || layouts === void 0 ? void 0 : layouts.length) === 1;
@@ -10,5 +14,6 @@ export const LayoutRadioSelector = ({ data }) => {
     const handleToggle = React.useCallback(() => {
         adaptable.api.layoutApi.setLayout(data.Name);
     }, [isSelected]);
-    return (React.createElement(Radio, { "data-name": "layout-select-button", "data-value": data.Name, disabled: isDisabled, checked: isSelected, onClick: handleToggle }));
+    return (React.createElement(Radio_1.default, { "data-name": "layout-select-button", "data-value": data.Name, disabled: isDisabled, checked: isSelected, onClick: handleToggle }));
 };
+exports.LayoutRadioSelector = LayoutRadioSelector;

package/src/View/Layout/LayoutStatusBarSubPanelPopover.js

@@ -1,17 +1,22 @@
-import * as React from 'react';
-import { useSelector } from 'react-redux';
-import { Box } from 'rebass';
-import { Select } from '../../components/Select';
-import { useAdaptable } from '../AdaptableContext';
-export const LayoutStatusbar = () => {
-    const adaptable = useAdaptable();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutStatusbar = 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 Select_1 = require("../../components/Select");
+const AdaptableContext_1 = require("../AdaptableContext");
+const LayoutStatusbar = () => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const layouts = adaptable.api.layoutApi.getLayouts();
     const options = layouts.map((layout) => ({ label: layout.Name, value: layout.Name }));
-    const currentLayout = useSelector((state) => state.Layout.CurrentLayout);
-    return (React.createElement(Box, { onClick: (event) => {
+    const currentLayout = (0, react_redux_1.useSelector)((state) => state.Layout.CurrentLayout);
+    return (React.createElement(rebass_1.Box, { onClick: (event) => {
             event.stopPropagation();
         } },
-        React.createElement(Select, { size: "small", options: options, value: currentLayout, onChange: (value) => {
+        React.createElement(Select_1.Select, { size: "small", options: options, value: currentLayout, onChange: (value) => {
                 adaptable.api.layoutApi.setLayout(value);
             } })));
 };
+exports.LayoutStatusbar = LayoutStatusbar;

package/src/View/Layout/LayoutViewPanel.js

@@ -1,39 +1,43 @@
-import * as React from 'react';
-import { connect } from 'react-redux';
-import { Flex } from 'rebass';
-import { Select } from '../../components/Select';
-import join from '../../components/utils/join';
-import * as GridRedux from '../../Redux/ActionsReducers/GridRedux';
-import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';
-import * as GeneralConstants from '../../Utilities/Constants/GeneralConstants';
-import AdaptableHelper from '../../Utilities/Helpers/AdaptableHelper';
-import { ButtonClone } from '../Components/Buttons/ButtonClone';
-import { ButtonDelete } from '../Components/Buttons/ButtonDelete';
-import { ButtonEdit } from '../Components/Buttons/ButtonEdit';
-import { ButtonNew } from '../Components/Buttons/ButtonNew';
-import { ButtonSave } from '../Components/Buttons/ButtonSave';
-export const COMPONENT_LAYOUT_POPUP_NAME = 'LayoutEditorStandalonePopup';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutViewPanelControl = exports.COMPONENT_LAYOUT_POPUP_NAME = 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 Select_1 = require("../../components/Select");
+const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
+const GridRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/GridRedux"));
+const LayoutRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/LayoutRedux"));
+const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants/GeneralConstants"));
+const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/AdaptableHelper"));
+const ButtonClone_1 = require("../Components/Buttons/ButtonClone");
+const ButtonDelete_1 = require("../Components/Buttons/ButtonDelete");
+const ButtonEdit_1 = require("../Components/Buttons/ButtonEdit");
+const ButtonNew_1 = require("../Components/Buttons/ButtonNew");
+const ButtonSave_1 = require("../Components/Buttons/ButtonSave");
+exports.COMPONENT_LAYOUT_POPUP_NAME = 'LayoutEditorStandalonePopup';
 class LayoutViewPanelComponent extends React.Component {
     render() {
         let layoutEntity = this.props.Layouts.find((x) => x.Name == this.props.CurrentLayoutName || x.Uuid == this.props.CurrentLayoutName);
         // the global access level (Layout Entitlement)
         const cloneAccessLevel = this.props.accessLevel;
         const newAccessLevel = this.props.accessLevel;
-        const accessLevel = AdaptableHelper.getAppropriateAccessLevel(layoutEntity, this.props.accessLevel);
+        const accessLevel = AdaptableHelper_1.default.getAppropriateAccessLevel(layoutEntity, this.props.accessLevel);
         const isManualSaveLayout = !this.props.api.layoutApi.shouldAutoSaveLayouts();
         const availableLayoutOptions = this.props.Layouts.map((layout, index) => {
             return Object.assign(Object.assign({}, layout), { label: layout.Name, value: layout.Name, onClick: () => this.props.onSelectLayout(layout.Name) });
         });
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-            React.createElement(Flex, { flex: 1 },
-                React.createElement(Select, { style: { width: '100%' }, options: availableLayoutOptions, className: `ab-${elementType}__Layout__select`, value: layoutEntity ? layoutEntity.Name : null, onChange: (layout) => this.props.onSelectLayout(layout) })),
-            React.createElement(Flex, { flexDirection: "row", className: join(this.props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Layout__wrap`) },
-                isManualSaveLayout && (React.createElement(ButtonSave, { className: `ab-${elementType}__Layout__save`, onClick: () => this.onSaveLayout(), tooltip: "Save Changes to Current Layout", disabled: !this.props.CanSave, accessLevel: accessLevel })),
-                React.createElement(ButtonEdit, { onClick: () => this.props.api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: "Edit Layout", className: `ab-${elementType}__Layout__edit`, accessLevel: accessLevel }),
-                React.createElement(ButtonClone, { onClick: () => this.props.api.layoutApi.showLayoutEditor(layoutEntity.Name, 'Clone'), tooltip: "Clone Layout", className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }),
-                React.createElement(ButtonNew, { children: null, tone: "neutral", variant: "text", className: `ab-${elementType}__Layout__new`, onClick: () => this.props.api.layoutApi.showLayoutEditor(null, 'New'), tooltip: "Create a new Layout", accessLevel: newAccessLevel }),
-                React.createElement(ButtonDelete, { tooltip: "Delete Layout", disabled: this.props.Layouts.length <= 1, className: `ab-${elementType}__Layout__delete`, ConfirmAction: LayoutRedux.LayoutDelete(layoutEntity), ConfirmationMsg: "Are you sure you want to delete '" + this.props.CurrentLayoutName + "'?", ConfirmationTitle: 'Delete Layout', accessLevel: accessLevel }))));
+        return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+            React.createElement(rebass_1.Flex, { flex: 1 },
+                React.createElement(Select_1.Select, { style: { width: '100%' }, options: availableLayoutOptions, className: `ab-${elementType}__Layout__select`, value: layoutEntity ? layoutEntity.Name : null, onChange: (layout) => this.props.onSelectLayout(layout) })),
+            React.createElement(rebass_1.Flex, { flexDirection: "row", className: (0, join_1.default)(this.props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Layout__wrap`) },
+                isManualSaveLayout && (React.createElement(ButtonSave_1.ButtonSave, { className: `ab-${elementType}__Layout__save`, onClick: () => this.onSaveLayout(), tooltip: "Save Changes to Current Layout", disabled: !this.props.CanSave, accessLevel: accessLevel })),
+                React.createElement(ButtonEdit_1.ButtonEdit, { onClick: () => this.props.api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: "Edit Layout", className: `ab-${elementType}__Layout__edit`, accessLevel: accessLevel }),
+                React.createElement(ButtonClone_1.ButtonClone, { onClick: () => this.props.api.layoutApi.showLayoutEditor(layoutEntity.Name, 'Clone'), tooltip: "Clone Layout", className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }),
+                React.createElement(ButtonNew_1.ButtonNew, { children: null, tone: "neutral", variant: "text", className: `ab-${elementType}__Layout__new`, onClick: () => this.props.api.layoutApi.showLayoutEditor(null, 'New'), tooltip: "Create a new Layout", accessLevel: newAccessLevel }),
+                React.createElement(ButtonDelete_1.ButtonDelete, { tooltip: "Delete Layout", disabled: this.props.Layouts.length <= 1, className: `ab-${elementType}__Layout__delete`, ConfirmAction: LayoutRedux.LayoutDelete(layoutEntity), ConfirmationMsg: "Are you sure you want to delete '" + this.props.CurrentLayoutName + "'?", ConfirmationTitle: 'Delete Layout', accessLevel: accessLevel }))));
     }
     onSaveLayout() {
         const currentLayoutObject = this.props.CurrentDraftLayout;
@@ -64,4 +68,4 @@ function mapDispatchToProps(dispatch) {
         },
     };
 }
-export let LayoutViewPanelControl = connect(mapStateToProps, mapDispatchToProps)(LayoutViewPanelComponent);
+exports.LayoutViewPanelControl = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(LayoutViewPanelComponent);

package/src/View/Layout/PivotDetailsPopoup.js

@@ -1,6 +1,10 @@
-import * as React from 'react';
-import { DataSource, InfiniteTable } from '../../components/InfiniteTable';
-import { useAdaptable } from '../AdaptableContext';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PivotDetailsPopoup = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const InfiniteTable_1 = require("../../components/InfiniteTable");
+const AdaptableContext_1 = require("../AdaptableContext");
 const tableDOMProps = {
     style: {
         height: '100%',
@@ -8,8 +12,8 @@ const tableDOMProps = {
         minHeight: 300,
     },
 };
-export const PivotDetailsPopoup = (props) => {
-    const adaptable = useAdaptable();
+const PivotDetailsPopoup = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const adaptableApi = adaptable.api;
     const primaryKey = adaptableApi.optionsApi.getPrimaryKey();
     const { hasPivotValue, rows, rowGroups, columnId, layout, aggColumn, pivotValue, pivotColumnId, } = props.popupProps;
@@ -53,10 +57,11 @@ export const PivotDetailsPopoup = (props) => {
         }
         return Object.assign(Object.assign({}, columns), extraColumns.reduce((acc, colId) => (Object.assign(Object.assign({}, acc), { [colId]: { field: colId, header: getFriendlyName(colId) } })), {}));
     }, [props.popupProps]);
-    return (React.createElement(DataSource, { data: data, primaryKey: columnId },
-        React.createElement(InfiniteTable, { columnTypes: {
+    return (React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: columnId },
+        React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: {
                 default: {
                     defaultFlex: 1,
                 },
             }, domProps: tableDOMProps, columns: columns })));
 };
+exports.PivotDetailsPopoup = PivotDetailsPopoup;

package/src/View/Layout/SaveLayoutButton.js

@@ -1,17 +1,21 @@
-import * as React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { useAdaptable } from '../AdaptableContext';
-import { ButtonSave } from '../Components/Buttons/ButtonSave';
-import * as GridRedux from '../../Redux/ActionsReducers/GridRedux';
-import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';
-import * as ModuleConstants from '../../Utilities/Constants/ModuleConstants';
-export const SaveLayoutButton = () => {
-    const adaptable = useAdaptable();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SaveLayoutButton = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const AdaptableContext_1 = require("../AdaptableContext");
+const ButtonSave_1 = require("../Components/Buttons/ButtonSave");
+const GridRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/GridRedux"));
+const LayoutRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/LayoutRedux"));
+const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
+const SaveLayoutButton = () => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const accessLevel = adaptable.api.internalApi
         .getEntitlementService()
         .getEntitlementAccessLevelForModule(ModuleConstants.LayoutModuleId);
-    const dispatch = useDispatch();
-    const currentDraftLayout = useSelector((state) => state.Grid.CurrentLayout);
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const currentDraftLayout = (0, react_redux_1.useSelector)((state) => state.Grid.CurrentLayout);
     const isManualSaveLayout = !adaptable.api.layoutApi.shouldAutoSaveLayouts();
     const handleSave = React.useCallback((layout) => {
         dispatch(LayoutRedux.LayoutSave(layout));
@@ -22,5 +26,6 @@ export const SaveLayoutButton = () => {
     if (!isManualSaveLayout) {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement(ButtonSave, { ml: 1, variant: "text", iconSize: 15, onClick: () => handleSave(currentDraftLayout), tooltip: "Save Changes to Current Layout", disabled: !isSaveEnabled, accessLevel: accessLevel }));
+    return (React.createElement(ButtonSave_1.ButtonSave, { ml: 1, variant: "text", iconSize: 15, onClick: () => handleSave(currentDraftLayout), tooltip: "Save Changes to Current Layout", disabled: !isSaveEnabled, accessLevel: accessLevel }));
 };
+exports.SaveLayoutButton = SaveLayoutButton;

package/src/View/Layout/Wizard/Components/ColumnLabels.js

@@ -1,9 +1,12 @@
-import { __rest } from "tslib";
-import * as React from 'react';
-import { Flex, Text } from 'rebass';
-import { useAdaptable } from '../../../AdaptableContext';
-export const ColumnLabels = (props) => {
-    const { children, showBoth, showTitle, flexDirection = 'row', labels: labelsProp } = props, columnProperties = __rest(props, ["children", "showBoth", "showTitle", "flexDirection", "labels"]);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnLabels = 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 ColumnLabels = (props) => {
+    const { children, showBoth, showTitle, flexDirection = 'row', labels: labelsProp } = props, columnProperties = tslib_1.__rest(props, ["children", "showBoth", "showTitle", "flexDirection", "labels"]);
     const labelNames = [
         'Aggregatable',
         'Filterable',
@@ -16,14 +19,14 @@ export const ColumnLabels = (props) => {
     const flexProps = {
         [flexDirection === 'row' ? 'alignItems' : 'justifyContent']: 'center',
     };
-    return (React.createElement(Flex, Object.assign({ className: "ab-LayoutEditor__Legend", flexDirection: flexDirection }, flexProps, { width: "100%" }),
-        showTitle ? (React.createElement(Text, { mr: 2 }, useAdaptable().api.internalApi.getCorrectEnglishVariant('Behaviours:'))) : null,
+    return (React.createElement(rebass_1.Flex, Object.assign({ className: "ab-LayoutEditor__Legend", flexDirection: flexDirection }, flexProps, { width: "100%" }),
+        showTitle ? (React.createElement(rebass_1.Text, { mr: 2 }, (0, AdaptableContext_1.useAdaptable)().api.internalApi.getCorrectEnglishVariant('Behaviours:'))) : null,
         labels.map((l, index) => {
             const enabled = !!l;
             const labelName = labelNames[index];
             const letter = labelName.charAt(0);
             const renderBox = (enabled, key) => {
-                return (React.createElement(Flex, { className: "ab-LayoutEditor__LegendLetter", width: '20px', height: '20px', alignItems: "center", justifyContent: "center", fontSize: 2, ml: 2, backgroundColor: "defaultbackground", title: enabled ? labelName : `Not ${labelName}`, style: {
+                return (React.createElement(rebass_1.Flex, { className: "ab-LayoutEditor__LegendLetter", width: '20px', height: '20px', alignItems: "center", justifyContent: "center", fontSize: 2, ml: 2, backgroundColor: "defaultbackground", title: enabled ? labelName : `Not ${labelName}`, style: {
                         overflow: 'hidden',
                         cursor: 'auto',
                         position: 'relative',
@@ -44,10 +47,11 @@ export const ColumnLabels = (props) => {
                         } })) : null,
                     letter));
             };
-            return (React.createElement(Flex, { key: letter, mt: flexDirection === 'row' ? 0 : 2, flexDirection: "row", alignItems: "center" },
+            return (React.createElement(rebass_1.Flex, { key: letter, mt: flexDirection === 'row' ? 0 : 2, flexDirection: "row", alignItems: "center" },
                 renderBox(enabled),
                 showBoth ? renderBox(!enabled, 'label') : null,
-                labelsProp ? (React.createElement(Flex, { key: "labelProps", flex: 1, ml: 2, className: "ab-LayoutEditor__LegendLetterDescription" }, labelsProp[labelName])) : null));
+                labelsProp ? (React.createElement(rebass_1.Flex, { key: "labelProps", flex: 1, ml: 2, className: "ab-LayoutEditor__LegendLetterDescription" }, labelsProp[labelName])) : null));
         }),
         children));
 };
+exports.ColumnLabels = ColumnLabels;

package/src/View/Layout/Wizard/LayoutWizard.js

@@ -1,36 +1,40 @@
-import * as React from 'react';
-import * as LayoutRedux from '../../../Redux/ActionsReducers/LayoutRedux';
-import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
-import ObjectFactory from '../../../Utilities/ObjectFactory';
-import { cloneObject } from '../../../Utilities/Helpers/Helper';
-import { SettingsSection, SettingsSectionSummary } from './sections/SettingsSection';
-import { Box } from 'rebass';
-import { useAdaptable } from '../../AdaptableContext';
-import { useDispatch } from 'react-redux';
-import { ColumnsSection, ColumnsSectionSummary } from './sections/ColumnsSection';
-import { PivotColumnsSection, PivotColumnsSectionSummary } from './sections/PivotColumnsSection';
-import { RowGroupingSection, RowGroupingSectionSummary } from './sections/RowGroupingSection';
-import { AggregationsSection, AggregationsSectionSummary, isAggregationsSectionValid, } from './sections/AggregationsSection';
-import { SortSection, SortSectionSummary } from './sections/SortSection';
-import { FilterSection, FilterSectionSummary, isColumnFiltersValid, } from './sections/FilterSection';
-import { GridFilterSection, GridFilterSectionSummary, isGridFiltersValid, } from './sections/GridFilterSection';
-export const LayoutWizard = (props) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutWizard = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const LayoutRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/LayoutRedux"));
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
+const Helper_1 = require("../../../Utilities/Helpers/Helper");
+const SettingsSection_1 = require("./sections/SettingsSection");
+const rebass_1 = require("rebass");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const react_redux_1 = require("react-redux");
+const ColumnsSection_1 = require("./sections/ColumnsSection");
+const PivotColumnsSection_1 = require("./sections/PivotColumnsSection");
+const RowGroupingSection_1 = require("./sections/RowGroupingSection");
+const AggregationsSection_1 = require("./sections/AggregationsSection");
+const SortSection_1 = require("./sections/SortSection");
+const FilterSection_1 = require("./sections/FilterSection");
+const GridFilterSection_1 = require("./sections/GridFilterSection");
+const LayoutWizard = (props) => {
     var _a, _b;
-    const dispatch = useDispatch();
-    const adaptable = useAdaptable();
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const allLayouts = adaptable.api.layoutApi.getLayouts();
     const initialLayout = (_a = props.data) !== null && _a !== void 0 ? _a : (_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.value;
     const [layout, setLayout] = React.useState(() => {
         var _a;
         let preparedLayout = null;
         if (initialLayout) {
-            preparedLayout = cloneObject(initialLayout);
+            preparedLayout = (0, Helper_1.cloneObject)(initialLayout);
             if (((_a = props === null || props === void 0 ? void 0 : props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Clone') {
                 preparedLayout.Name = '';
             }
         }
         else {
-            preparedLayout = ObjectFactory.CreateEmptyLayout({ Name: '' });
+            preparedLayout = ObjectFactory_1.default.CreateEmptyLayout({ Name: '' });
         }
         if (preparedLayout.SuppressAggFuncInHeader === undefined) {
             preparedLayout.SuppressAggFuncInHeader =
@@ -65,7 +69,7 @@ export const LayoutWizard = (props) => {
         props.onFinishWizard(layout);
     };
     const layoutSupportedFeatures = adaptable.api.layoutApi.internalApi.getLayoutSupportedFeatures();
-    return (React.createElement(OnePageAdaptableWizard, { titleContainerStyle: { width: 180 }, defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { titleContainerStyle: { width: 180 }, defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
                 details: 'Configure Layout',
@@ -78,75 +82,76 @@ export const LayoutWizard = (props) => {
                     }
                     return true;
                 },
-                renderSummary: () => React.createElement(SettingsSectionSummary, null),
-                render: () => (React.createElement(Box, { padding: 2 },
-                    React.createElement(SettingsSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                renderSummary: () => React.createElement(SettingsSection_1.SettingsSectionSummary, null),
+                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                    React.createElement(SettingsSection_1.SettingsSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
             {
                 title: 'Columns',
                 details: 'Select Columns',
                 isVisible: () => !(layout === null || layout === void 0 ? void 0 : layout.EnablePivot),
-                renderSummary: () => React.createElement(ColumnsSectionSummary, null),
-                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
-                    React.createElement(ColumnsSection, { onChange: setLayout }))),
+                renderSummary: () => React.createElement(ColumnsSection_1.ColumnsSectionSummary, null),
+                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(ColumnsSection_1.ColumnsSection, { onChange: setLayout }))),
             },
             {
                 title: 'Pivot Columns',
                 details: 'Select Pivot Columns',
                 isVisible: () => (layout === null || layout === void 0 ? void 0 : layout.EnablePivot) && layoutSupportedFeatures.PivotColumns,
-                renderSummary: () => React.createElement(PivotColumnsSectionSummary, null),
-                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
-                    React.createElement(PivotColumnsSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                renderSummary: () => React.createElement(PivotColumnsSection_1.PivotColumnsSectionSummary, null),
+                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(PivotColumnsSection_1.PivotColumnsSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
             {
                 title: 'Row Groups',
                 isVisible: () => layoutSupportedFeatures.RowGroupedColumns,
                 details: 'Configure Row Grouping',
-                renderSummary: () => React.createElement(RowGroupingSectionSummary, null),
-                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
-                    React.createElement(RowGroupingSection, { onChange: setLayout }))),
+                renderSummary: () => React.createElement(RowGroupingSection_1.RowGroupingSectionSummary, null),
+                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(RowGroupingSection_1.RowGroupingSection, { onChange: setLayout }))),
             },
             {
                 title: 'Aggregations',
                 isVisible: () => layoutSupportedFeatures.AggregationColumns,
                 details: 'Select Column Aggregations',
-                renderSummary: () => React.createElement(AggregationsSectionSummary, null),
-                isValid: (data) => isAggregationsSectionValid(data),
-                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
-                    React.createElement(AggregationsSection, { onChange: setLayout }))),
+                renderSummary: () => React.createElement(AggregationsSection_1.AggregationsSectionSummary, null),
+                isValid: (data) => (0, AggregationsSection_1.isAggregationsSectionValid)(data),
+                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(AggregationsSection_1.AggregationsSection, { onChange: setLayout }))),
             },
             {
                 title: 'Sort',
                 isVisible: () => layoutSupportedFeatures.ColumnSorts,
-                renderSummary: () => React.createElement(SortSectionSummary, null),
+                renderSummary: () => React.createElement(SortSection_1.SortSectionSummary, null),
                 details: 'Configure Column Sorts',
-                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
-                    React.createElement(SortSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(SortSection_1.SortSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
             {
                 title: 'Column Filters',
                 isVisible: () => layoutSupportedFeatures.ColumnFilters,
-                isValid: (layout) => isColumnFiltersValid(layout),
+                isValid: (layout) => (0, FilterSection_1.isColumnFiltersValid)(layout),
                 details: 'View Column Filters',
-                renderSummary: () => React.createElement(FilterSectionSummary, null),
-                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
-                    React.createElement(FilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                renderSummary: () => React.createElement(FilterSection_1.FilterSectionSummary, null),
+                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(FilterSection_1.FilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
             {
                 title: 'Grid Filter',
                 isVisible: () => layoutSupportedFeatures.GridFilter,
-                isValid: (layout) => isGridFiltersValid(layout, adaptable.api),
+                isValid: (layout) => (0, GridFilterSection_1.isGridFiltersValid)(layout, adaptable.api),
                 details: 'View Grid Filter',
-                renderSummary: () => React.createElement(GridFilterSectionSummary, null),
-                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
-                    React.createElement(GridFilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+                renderSummary: () => React.createElement(GridFilterSection_1.GridFilterSectionSummary, null),
+                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(GridFilterSection_1.GridFilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
             '-',
             {
                 details: 'Review your Layout',
-                render: () => (React.createElement(Box, { padding: 2 },
-                    React.createElement(OnePageWizardSummary, null))),
+                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                    React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null))),
                 title: 'Summary',
             },
         ] }));
 };
+exports.LayoutWizard = LayoutWizard;