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

package/src/View/Layout/Wizard/sections/AggregationsSection.js

@@ -1,17 +1,21 @@
-import * as React from 'react';
-import { Box, Flex, Text } from 'rebass';
-import { CheckBox } from '../../../../components/CheckBox';
-import DropdownButton from '../../../../components/DropdownButton';
-import FormLayout, { FormRow } from '../../../../components/FormLayout';
-import { Tabs } from '../../../../components/Tabs';
-import { Tag } from '../../../../components/Tag';
-import { sortWithOrderArray } from '../../../../Utilities/sortWithOrder';
-import { useAdaptable } from '../../../AdaptableContext';
-import { ValueSelector } from '../../../Components/ValueSelector';
-import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
-import { columnFilter } from './Utilities';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AggregationsSection = exports.AggregationsSectionSummary = exports.isAggregationsSectionValid = 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 FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const Tabs_1 = require("../../../../components/Tabs");
+const Tag_1 = require("../../../../components/Tag");
+const sortWithOrder_1 = require("../../../../Utilities/sortWithOrder");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const ValueSelector_1 = require("../../../Components/ValueSelector");
+const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const Utilities_1 = require("./Utilities");
 const WEIGHTED_AVERAGE_AGG_FN_NAME = 'weightedAvg';
-export const isAggregationsSectionValid = (data) => {
+const isAggregationsSectionValid = (data) => {
     const weightedAvg = data.AggregationColumns
         ? Object.values(data.AggregationColumns).find((agg) => typeof agg === 'object' && agg.type === 'weightedAverage')
         : null;
@@ -20,24 +24,26 @@ export const isAggregationsSectionValid = (data) => {
     }
     return true;
 };
-export const AggregationsSectionSummary = () => {
-    const adaptable = useAdaptable();
-    const { data: layout } = useOnePageAdaptableWizardContext();
+exports.isAggregationsSectionValid = isAggregationsSectionValid;
+const AggregationsSectionSummary = () => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const aggregations = layout.AggregationColumns;
     const entires = Object.entries(aggregations !== null && aggregations !== void 0 ? aggregations : {});
     let content = null;
     if (entires.length) {
-        content = (React.createElement(FormLayout, null, entires.map(([columnId, aggregation]) => (React.createElement(FormRow, { key: columnId, label: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) },
-            React.createElement(Tag, null, typeof aggregation === 'object' ? aggregation.type : aggregation))))));
+        content = (React.createElement(FormLayout_1.default, null, entires.map(([columnId, aggregation]) => (React.createElement(FormLayout_1.FormRow, { key: columnId, label: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) },
+            React.createElement(Tag_1.Tag, null, typeof aggregation === 'object' ? aggregation.type : aggregation))))));
     }
     else {
-        content = React.createElement(Tag, null, "No Aggregations");
+        content = React.createElement(Tag_1.Tag, null, "No Aggregations");
     }
-    return React.createElement(Box, null, content);
+    return React.createElement(rebass_1.Box, null, content);
 };
+exports.AggregationsSectionSummary = AggregationsSectionSummary;
 const ColumnRow = (props) => {
     var _a, _b;
-    const adaptable = useAdaptable();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const aggValue = (_b = (_a = props.layout) === null || _a === void 0 ? void 0 : _a.AggregationColumns) === null || _b === void 0 ? void 0 : _b[props.column.columnId];
     const adaptableAggFunctions = [];
     if (props.column.dataType === 'Number') {
@@ -89,24 +95,24 @@ const ColumnRow = (props) => {
             ? adaptable.api.columnApi.getFriendlyNameForColumnId(aggValue.weightedColumnId)
             : 'Select Weight';
     }
-    return (React.createElement(Flex, { alignItems: "center" },
+    return (React.createElement(rebass_1.Flex, { alignItems: "center" },
         props.column.friendlyName,
-        aggValue && (React.createElement(DropdownButton, { columns: ['label'], items: aggOptions, ml: 2 }, currentAggFnName)),
-        currentAggFnName === WEIGHTED_AVERAGE_AGG_FN_NAME && (React.createElement(Flex, { backgroundColor: "primary", ml: 3, alignItems: "center" },
-            React.createElement(Text, null, "Weight"),
+        aggValue && (React.createElement(DropdownButton_1.default, { columns: ['label'], items: aggOptions, ml: 2 }, currentAggFnName)),
+        currentAggFnName === WEIGHTED_AVERAGE_AGG_FN_NAME && (React.createElement(rebass_1.Flex, { backgroundColor: "primary", ml: 3, alignItems: "center" },
+            React.createElement(rebass_1.Text, null, "Weight"),
             ' ',
-            React.createElement(DropdownButton, { columns: ['label'], items: numericColumnsOptions, ml: 2 }, weightName)))));
+            React.createElement(DropdownButton_1.default, { columns: ['label'], items: numericColumnsOptions, ml: 2 }, weightName)))));
 };
-export const AggregationsSection = (props) => {
+const AggregationsSection = (props) => {
     var _a, _b;
-    const adaptable = useAdaptable();
-    const { data: layout } = useOnePageAdaptableWizardContext();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const allAggregableColumns = adaptable.api.columnApi.getAggregatableColumns();
     const allColumns = adaptable.api.columnApi.getColumns();
     const numberColumns = adaptable.api.columnApi.getNumericColumns();
     const sortedAggregableColumns = React.useMemo(() => {
         var _a, _b;
-        return sortWithOrderArray(allAggregableColumns.map((col) => col.columnId), (_b = Object.keys((_a = layout.AggregationColumns) !== null && _a !== void 0 ? _a : {})) !== null && _b !== void 0 ? _b : [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
+        return (0, sortWithOrder_1.sortWithOrderArray)(allAggregableColumns.map((col) => col.columnId), (_b = Object.keys((_a = layout.AggregationColumns) !== null && _a !== void 0 ? _a : {})) !== null && _b !== void 0 ? _b : [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [layout, allAggregableColumns]);
     const handleColumnsSelectionChange = React.useCallback((columnIds) => {
         props.onChange(Object.assign(Object.assign({}, layout), { AggregationColumns: columnIds.reduce((acc, colId) => {
@@ -144,13 +150,14 @@ export const AggregationsSection = (props) => {
     const handleSuppressAggFuncInHeader = (checked) => {
         props.onChange(Object.assign(Object.assign({}, layout), { SuppressAggFuncInHeader: checked }));
     };
-    return (React.createElement(Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs.Tab, null, "Column Aggregations"),
-        React.createElement(Tabs.Content, null,
-            React.createElement(Flex, null,
-                React.createElement(FormLayout, null,
-                    React.createElement(CheckBox, { checked: layout.SuppressAggFuncInHeader, onChange: handleSuppressAggFuncInHeader }, "Suppress Aggregation Function in Header"))),
-            React.createElement(ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, toListLabel: (column) => (React.createElement(ColumnRow, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap, numberColumns: numberColumns })), options: sortedAggregableColumns, value: (_b = Object.keys((_a = layout.AggregationColumns) !== null && _a !== void 0 ? _a : {})) !== null && _b !== void 0 ? _b : [], allowReorder: () => false, xSelectedLabel: () => {
+    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs_1.Tabs.Tab, null, "Column Aggregations"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(rebass_1.Flex, null,
+                React.createElement(FormLayout_1.default, null,
+                    React.createElement(CheckBox_1.CheckBox, { checked: layout.SuppressAggFuncInHeader, onChange: handleSuppressAggFuncInHeader }, "Suppress Aggregation Function in Header"))),
+            React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, toListLabel: (column) => (React.createElement(ColumnRow, { onChangeAggFunction: handleAggregationChange, layout: layout, column: column, aggregationColumnsMap: aggregationColumnsMap, numberColumns: numberColumns })), options: sortedAggregableColumns, value: (_b = Object.keys((_a = layout.AggregationColumns) !== null && _a !== void 0 ? _a : {})) !== null && _b !== void 0 ? _b : [], allowReorder: () => false, xSelectedLabel: () => {
                     return `Active aggregations:`;
                 }, onChange: handleColumnsSelectionChange }))));
 };
+exports.AggregationsSection = AggregationsSection;

package/src/View/Layout/Wizard/sections/ColumnsSection.js

@@ -1,29 +1,33 @@
-import { DataSource, InfiniteTable, } from '../../../../components/InfiniteTable';
-import * as React from 'react';
-import { Box, Flex, Text } from 'rebass';
-import DropdownButton from '../../../../components/DropdownButton';
-import FormLayout, { FormRow } from '../../../../components/FormLayout';
-import Input from '../../../../components/Input';
-import SimpleButton from '../../../../components/SimpleButton';
-import { Tabs } from '../../../../components/Tabs';
-import { Tag } from '../../../../components/Tag';
-import { isValidOrderForColumnGroups, } from '../../../../PredefinedConfig/Common/AdaptableColumn';
-import { sortWithOrderArray } from '../../../../Utilities/sortWithOrder';
-import { useAdaptable } from '../../../AdaptableContext';
-import { ValueSelector } from '../../../Components/ValueSelector';
-import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
-import { columnFilter } from './Utilities';
-import { Icon } from '../../../../components/icons';
-import { CheckBox } from '../../../../components/CheckBox';
-import { clamp } from '../../../../Utilities/Helpers/Helper';
-import { ColumnLabels } from '../Components/ColumnLabels';
-const PropertyOrderText = (props) => (React.createElement(Text, { fontWeight: 600, fontSize: 2 }, props.children));
-export const ColumnsSectionSummary = () => {
-    const adaptable = useAdaptable();
-    const { data: layout } = useOnePageAdaptableWizardContext();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnsSection = exports.ColumnsSectionSummary = void 0;
+const tslib_1 = require("tslib");
+const InfiniteTable_1 = require("../../../../components/InfiniteTable");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
+const Tabs_1 = require("../../../../components/Tabs");
+const Tag_1 = require("../../../../components/Tag");
+const AdaptableColumn_1 = require("../../../../PredefinedConfig/Common/AdaptableColumn");
+const sortWithOrder_1 = require("../../../../Utilities/sortWithOrder");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const ValueSelector_1 = require("../../../Components/ValueSelector");
+const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const Utilities_1 = require("./Utilities");
+const icons_1 = require("../../../../components/icons");
+const CheckBox_1 = require("../../../../components/CheckBox");
+const Helper_1 = require("../../../../Utilities/Helpers/Helper");
+const ColumnLabels_1 = require("../Components/ColumnLabels");
+const PropertyOrderText = (props) => (React.createElement(rebass_1.Text, { fontWeight: 600, fontSize: 2 }, props.children));
+const ColumnsSectionSummary = () => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const rowHeight = 40;
     const headerHeight = 40;
-    const tableHeight = headerHeight + clamp(rowHeight * layout.Columns.length, 100, 360);
+    const tableHeight = headerHeight + (0, Helper_1.clamp)(rowHeight * layout.Columns.length, 100, 360);
     const data = React.useMemo(() => {
         return layout.Columns.map((columnId) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
@@ -78,8 +82,8 @@ export const ColumnsSectionSummary = () => {
                     if (!((_b = (_a = params.data) === null || _a === void 0 ? void 0 : _a.sortOrder) === null || _b === void 0 ? void 0 : _b.sort)) {
                         return React.createElement(React.Fragment, null);
                     }
-                    return (React.createElement(Flex, null,
-                        React.createElement(Icon, { name: ((_d = (_c = params.data) === null || _c === void 0 ? void 0 : _c.sortOrder) === null || _d === void 0 ? void 0 : _d.sort) === 'Asc' ? 'arrow-up-long' : 'arrow-down-long' }),
+                    return (React.createElement(rebass_1.Flex, null,
+                        React.createElement(icons_1.Icon, { name: ((_d = (_c = params.data) === null || _c === void 0 ? void 0 : _c.sortOrder) === null || _d === void 0 ? void 0 : _d.sort) === 'Asc' ? 'arrow-up-long' : 'arrow-down-long' }),
                         ' ',
                         React.createElement(PropertyOrderText, null, (_g = (_f = (_e = params.data) === null || _e === void 0 ? void 0 : _e.sortOrder) === null || _f === void 0 ? void 0 : _f.index) !== null && _g !== void 0 ? _g : '')));
                 },
@@ -94,7 +98,7 @@ export const ColumnsSectionSummary = () => {
                     if (!((_a = params.data) === null || _a === void 0 ? void 0 : _a.filter)) {
                         return React.createElement(React.Fragment, null);
                     }
-                    return React.createElement(CheckBox, { checked: true });
+                    return React.createElement(CheckBox_1.CheckBox, { checked: true });
                 },
             },
             group: {
@@ -107,8 +111,8 @@ export const ColumnsSectionSummary = () => {
                     if (!params.data.grouping) {
                         return React.createElement(React.Fragment, null);
                     }
-                    return (React.createElement(Flex, null,
-                        React.createElement(CheckBox, { margin: 0, mr: 1, checked: true }),
+                    return (React.createElement(rebass_1.Flex, null,
+                        React.createElement(CheckBox_1.CheckBox, { margin: 0, mr: 1, checked: true }),
                         React.createElement(PropertyOrderText, null, (_a = params.data) === null || _a === void 0 ? void 0 : _a.grouping)));
                 },
             },
@@ -121,17 +125,18 @@ export const ColumnsSectionSummary = () => {
             minHeight: tableHeight,
         },
     };
-    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,
                 },
             }, rowHeight: rowHeight, domProps: tableDOMProps, columns: columns })));
 };
+exports.ColumnsSectionSummary = ColumnsSectionSummary;
 const ColumnRow = (props) => {
     var _a, _b, _c, _d;
     const [isExpanded, setIsExpanded] = React.useState(false);
-    const adaptable = useAdaptable();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     // headers
     const initialHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(props.column.columnId);
     const customHeader = (_b = (_a = props.layout.ColumnHeadersMap) === null || _a === void 0 ? void 0 : _a[props.column.columnId]) !== null && _b !== void 0 ? _b : initialHeader;
@@ -154,40 +159,40 @@ const ColumnRow = (props) => {
     const behaviourHeader = 'Column ' + adaptable.api.internalApi.getCorrectEnglishVariant('Behaviours');
     // width
     const columnWidth = (_d = props.layout.ColumnWidthMap) === null || _d === void 0 ? void 0 : _d[props.column.columnId];
-    return (React.createElement(Box, { "data-name": props.column.columnId, className: "ab-Layout-Wizard__ColumnRow" },
-        React.createElement(Flex, { className: "ab-Layout-Wizard__ColumnRow__Header", mt: 1, mb: 1, onClick: () => setIsExpanded(!isExpanded) },
-            React.createElement(Flex, { mr: 2, alignItems: "center" }, initialHeader),
-            props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (React.createElement(Box, { className: "ab-Layout-Wizard__ColumnRow__Title", ml: 2, mr: 2, padding: 1 },
+    return (React.createElement(rebass_1.Box, { "data-name": props.column.columnId, className: "ab-Layout-Wizard__ColumnRow" },
+        React.createElement(rebass_1.Flex, { className: "ab-Layout-Wizard__ColumnRow__Header", mt: 1, mb: 1, onClick: () => setIsExpanded(!isExpanded) },
+            React.createElement(rebass_1.Flex, { mr: 2, alignItems: "center" }, initialHeader),
+            props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (React.createElement(rebass_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Title", ml: 2, mr: 2, padding: 1 },
                 "Column Group: ",
                 props.column.columnGroup.friendlyName)) : null,
-            React.createElement(Flex, { mr: 2 },
-                React.createElement(ColumnLabels, { showTitle: false, sortable: props.column.sortable, filterable: props.column.filterable, pivotable: props.column.pivotable, moveable: props.column.moveable, groupable: props.column.groupable, aggregatable: props.column.aggregatable })),
-            React.createElement(Box, { flex: 1 }),
-            React.createElement(SimpleButton, { "data-name": "expand-collapse", "data-value": isExpanded ? 'expanded' : 'collapsed', ml: 10, padding: 0, iconSize: 24, variant: "text", onClick: () => setIsExpanded(!isExpanded), icon: isExpanded ? 'triangle-up' : 'triangle-down' })),
-        isExpanded && (React.createElement(Box, { className: "ab-Layout-Wizard__ColumnRow__Expanded-Container", mb: 2, padding: 2, mt: 2 },
-            React.createElement(Flex, { mb: 2 },
-                React.createElement(FormLayout, { width: "100%", mr: 3 },
-                    React.createElement(FormRow, { label: "ColumnId" },
-                        React.createElement(Tag, null, props.column.columnId)),
-                    React.createElement(FormRow, { label: "Header" },
-                        React.createElement(Input, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnRow__Input", placehoder: "Custom name (optional)", onChange: () => {
+            React.createElement(rebass_1.Flex, { mr: 2 },
+                React.createElement(ColumnLabels_1.ColumnLabels, { showTitle: false, sortable: props.column.sortable, filterable: props.column.filterable, pivotable: props.column.pivotable, moveable: props.column.moveable, groupable: props.column.groupable, aggregatable: props.column.aggregatable })),
+            React.createElement(rebass_1.Box, { flex: 1 }),
+            React.createElement(SimpleButton_1.default, { "data-name": "expand-collapse", "data-value": isExpanded ? 'expanded' : 'collapsed', ml: 10, padding: 0, iconSize: 24, variant: "text", onClick: () => setIsExpanded(!isExpanded), icon: isExpanded ? 'triangle-up' : 'triangle-down' })),
+        isExpanded && (React.createElement(rebass_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Expanded-Container", mb: 2, padding: 2, mt: 2 },
+            React.createElement(rebass_1.Flex, { mb: 2 },
+                React.createElement(FormLayout_1.default, { width: "100%", mr: 3 },
+                    React.createElement(FormLayout_1.FormRow, { label: "ColumnId" },
+                        React.createElement(Tag_1.Tag, null, props.column.columnId)),
+                    React.createElement(FormLayout_1.FormRow, { label: "Header" },
+                        React.createElement(Input_1.default, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnRow__Input", placehoder: "Custom name (optional)", onChange: () => {
                                 props.onColumnNameChange(props.column.columnId, event.target.value);
                             }, value: customHeader })),
-                    React.createElement(FormRow, { label: "Width" },
-                        React.createElement(Input, { "data-name": "column-width", className: "ab-Layout-Wizard__ColumnRow__Input", type: "number", placeholder: "Column width", onChange: (event) => {
+                    React.createElement(FormLayout_1.FormRow, { label: "Width" },
+                        React.createElement(Input_1.default, { "data-name": "column-width", className: "ab-Layout-Wizard__ColumnRow__Input", type: "number", placeholder: "Column width", onChange: (event) => {
                                 let value = parseFloat(event.target.value);
                                 value = typeof value === 'number' && !isNaN(value) ? value : void 0;
                                 props.onColumnWidthChange(props.column.columnId, value);
                             }, value: columnWidth })),
-                    React.createElement(FormRow, { label: "Pinning" },
-                        React.createElement(DropdownButton, { "data-name": "column-pinning", columns: ['label'], items: pinningOptions }, pinningOptions.find((option) => option.value === columnPinning).label))))))));
+                    React.createElement(FormLayout_1.FormRow, { label: "Pinning" },
+                        React.createElement(DropdownButton_1.default, { "data-name": "column-pinning", columns: ['label'], items: pinningOptions }, pinningOptions.find((option) => option.value === columnPinning).label))))))));
 };
-export const ColumnsSection = (props) => {
-    const adaptable = useAdaptable();
-    const { data: layout } = useOnePageAdaptableWizardContext();
+const ColumnsSection = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const allColumns = adaptable.api.columnApi.getColumns();
     const sortedColumns = React.useMemo(() => {
-        return sortWithOrderArray(allColumns.map((col) => col.columnId), layout.Columns, { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
+        return (0, sortWithOrder_1.sortWithOrderArray)(allColumns.map((col) => col.columnId), layout.Columns, { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [layout, allColumns]);
     const handlePinChange = (columnId, pinning) => {
         props.onChange(Object.assign(Object.assign({}, layout), { PinnedColumnsMap: Object.assign(Object.assign({}, layout.PinnedColumnsMap), { [columnId]: pinning }) }));
@@ -199,7 +204,7 @@ export const ColumnsSection = (props) => {
         var _a, _b;
         const oldColumns = (_a = layout.Columns.map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId))) !== null && _a !== void 0 ? _a : [];
         const newColumns = (_b = columnIds.map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId))) !== null && _b !== void 0 ? _b : [];
-        if (!isValidOrderForColumnGroups({ oldColumns, newColumns })) {
+        if (!(0, AdaptableColumn_1.isValidOrderForColumnGroups)({ oldColumns, newColumns })) {
             return;
         }
         props.onChange(Object.assign(Object.assign({}, layout), { Columns: columnIds }));
@@ -207,11 +212,11 @@ export const ColumnsSection = (props) => {
     const handleColumnWidthChange = (columnId, width) => {
         props.onChange(Object.assign(Object.assign({}, layout), { ColumnWidthMap: Object.assign(Object.assign({}, layout.ColumnWidthMap), { [columnId]: width }) }));
     };
-    return (React.createElement(Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs.Tab, null, "Columns"),
-        React.createElement(Tabs.Content, null,
-            React.createElement(Flex, { mt: 2, mb: 3 },
-                React.createElement(ColumnLabels, { flexDirection: "row", showBoth: false, labels: {
+    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs_1.Tabs.Tab, null, "Columns"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(rebass_1.Flex, { mt: 2, mb: 3 },
+                React.createElement(ColumnLabels_1.ColumnLabels, { flexDirection: "row", showBoth: false, labels: {
                         Sortable: 'Sortable',
                         Filterable: 'Filterable',
                         Aggregatable: 'Aggregatable',
@@ -219,7 +224,8 @@ export const ColumnsSection = (props) => {
                         Moveable: 'Moveable',
                         Pivotable: 'Pivotable',
                     }, sortable: true, filterable: true, moveable: true, pivotable: true, groupable: true, aggregatable: true })),
-            React.createElement(ValueSelector, { showSelectedOnlyPosition: "top", showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, toListLabel: (option) => (React.createElement(ColumnRow, { onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onPinChange: handlePinChange, layout: layout, column: option })), options: sortedColumns, value: layout.Columns, allowReorder: true, xSelectedLabel: () => {
+            React.createElement(ValueSelector_1.ValueSelector, { showSelectedOnlyPosition: "top", showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, toListLabel: (option) => (React.createElement(ColumnRow, { onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onPinChange: handlePinChange, layout: layout, column: option })), options: sortedColumns, value: layout.Columns, allowReorder: true, xSelectedLabel: () => {
                     return `Selected Columns:`;
                 }, onChange: handleColumnsChange }))));
 };
+exports.ColumnsSection = ColumnsSection;

package/src/View/Layout/Wizard/sections/FilterSection.js

@@ -1,16 +1,20 @@
-import * as React from 'react';
-import { Box } from 'rebass';
-import * as ModuleConstants from '../../../../Utilities/Constants/ModuleConstants';
-import { Tabs } from '../../../../components/Tabs';
-import { useAdaptable } from '../../../AdaptableContext';
-import { AdaptableObjectListItemView } from '../../../Components/AdaptableObjectList/AdaptableObjectList';
-import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
-import { getLayoutFilterViewItems } from '../../../../Strategy/Utilities/Layout/getLayoutFilterViewItems';
-import { Tag } from '../../../../components/Tag';
-import { PredicateEditor } from '../../../Components/PredicateEditor/PredicateEditor';
-import FormLayout, { FormRow } from '../../../../components/FormLayout';
-import { ColumnSelector } from '../../../Components/Selectors/ColumnSelector';
-export const isColumnFiltersValid = (layout) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterSection = exports.FilterSectionSummary = exports.isColumnFiltersValid = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const ModuleConstants = tslib_1.__importStar(require("../../../../Utilities/Constants/ModuleConstants"));
+const Tabs_1 = require("../../../../components/Tabs");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const AdaptableObjectList_1 = require("../../../Components/AdaptableObjectList/AdaptableObjectList");
+const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const getLayoutFilterViewItems_1 = require("../../../../Strategy/Utilities/Layout/getLayoutFilterViewItems");
+const Tag_1 = require("../../../../components/Tag");
+const PredicateEditor_1 = require("../../../Components/PredicateEditor/PredicateEditor");
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const ColumnSelector_1 = require("../../../Components/Selectors/ColumnSelector");
+const isColumnFiltersValid = (layout) => {
     var _a, _b;
     const invalidColumnFilters = (_b = ((_a = layout.ColumnFilters) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.filter((columnFilter) => { var _a; return !((_a = columnFilter === null || columnFilter === void 0 ? void 0 : columnFilter.Predicate) === null || _a === void 0 ? void 0 : _a.PredicateId); });
     if (invalidColumnFilters.length > 0) {
@@ -18,17 +22,19 @@ export const isColumnFiltersValid = (layout) => {
     }
     return true;
 };
-export const FilterSectionSummary = () => {
-    const { data: layout } = useOnePageAdaptableWizardContext();
-    const adaptable = useAdaptable();
-    const fitlerViewItems = getLayoutFilterViewItems(layout, adaptable.api);
-    return (React.createElement(Box, null, fitlerViewItems.values.length ? (fitlerViewItems.values.map((value) => (React.createElement(Tag, { key: value, mb: 1, mr: 1 }, value)))) : (React.createElement(Tag, null, "No Column Filters"))));
+exports.isColumnFiltersValid = isColumnFiltersValid;
+const FilterSectionSummary = () => {
+    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const fitlerViewItems = (0, getLayoutFilterViewItems_1.getLayoutFilterViewItems)(layout, adaptable.api);
+    return (React.createElement(rebass_1.Box, null, fitlerViewItems.values.length ? (fitlerViewItems.values.map((value) => (React.createElement(Tag_1.Tag, { key: value, mb: 1, mr: 1 }, value)))) : (React.createElement(Tag_1.Tag, null, "No Column Filters"))));
 };
-export const FilterSection = (props) => {
+exports.FilterSectionSummary = FilterSectionSummary;
+const FilterSection = (props) => {
     var _a;
-    const adaptable = useAdaptable();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const filterModule = adaptable.ModuleService.getModuleById(ModuleConstants.ColumnFilterModuleId);
-    const { data: layout } = useOnePageAdaptableWizardContext();
+    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const layoutFilters = (_a = layout.ColumnFilters) !== null && _a !== void 0 ? _a : [];
     const handleDelete = React.useCallback((columnFilter) => {
         props.onChange(Object.assign(Object.assign({}, layout), { ColumnFilters: layoutFilters.filter((layoutFilter) => layoutFilter.ColumnId !== columnFilter.ColumnId) }));
@@ -47,12 +53,12 @@ export const FilterSection = (props) => {
         label: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId),
         value: columnId,
     })), [layout, layoutFilters]);
-    return (React.createElement(Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs.Tab, null, "Column Filters"),
-        React.createElement(Tabs.Content, null,
-            React.createElement(FormLayout, { mb: 2 },
-                React.createElement(FormRow, { label: "Add Column Filter" },
-                    React.createElement(ColumnSelector, { filterColumn: (column) => column.filterable && !layoutFilters.some((f) => f.ColumnId === column.columnId), value: "none", onChange: (option) => {
+    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs_1.Tabs.Tab, null, "Column Filters"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(FormLayout_1.default, { mb: 2 },
+                React.createElement(FormLayout_1.FormRow, { label: "Add Column Filter" },
+                    React.createElement(ColumnSelector_1.ColumnSelector, { filterColumn: (column) => column.filterable && !layoutFilters.some((f) => f.ColumnId === column.columnId), value: "none", onChange: (option) => {
                             props.onChange(Object.assign(Object.assign({}, layout), { ColumnFilters: [
                                     ...layoutFilters,
                                     {
@@ -61,15 +67,16 @@ export const FilterSection = (props) => {
                                     },
                                 ] }));
                         } }))),
-            (layoutFilters === null || layoutFilters === void 0 ? void 0 : layoutFilters.length) > 0 && (React.createElement(Box, { p: 0, as: "ul" }, layoutFilters.map((columnFilter) => {
+            (layoutFilters === null || layoutFilters === void 0 ? void 0 : layoutFilters.length) > 0 && (React.createElement(rebass_1.Box, { p: 0, as: "ul" }, layoutFilters.map((columnFilter) => {
                 const predicateDefs = adaptable.api.columnFilterApi.getFilterPredicateDefsForColumnId(columnFilter.ColumnId);
                 const items = [
                     ...filterModule.toView(columnFilter).items,
                     {
                         name: 'Column Filter',
-                        view: (React.createElement(PredicateEditor, { columnId: columnFilter.ColumnId, predicate: columnFilter.Predicate, predicateDefs: predicateDefs, onChange: (predicate) => handlePredicateEdit(predicate, columnFilter), onClear: () => handlePredicateEdit(null, columnFilter) })),
+                        view: (React.createElement(PredicateEditor_1.PredicateEditor, { columnId: columnFilter.ColumnId, predicate: columnFilter.Predicate, predicateDefs: predicateDefs, onChange: (predicate) => handlePredicateEdit(predicate, columnFilter), onClear: () => handlePredicateEdit(null, columnFilter) })),
                     },
                 ];
-                return (React.createElement(AdaptableObjectListItemView, { module: filterModule, abObject: columnFilter, entityType: "Column Filter", showActions: true, showEditButton: false, items: items, onDelete: () => handleDelete(columnFilter), key: columnFilter.ColumnId }));
+                return (React.createElement(AdaptableObjectList_1.AdaptableObjectListItemView, { module: filterModule, abObject: columnFilter, entityType: "Column Filter", showActions: true, showEditButton: false, items: items, onDelete: () => handleDelete(columnFilter), key: columnFilter.ColumnId }));
             }))))));
 };
+exports.FilterSection = FilterSection;

package/src/View/Layout/Wizard/sections/GridFilterSection.js

@@ -1,37 +1,44 @@
-import * as React from 'react';
-import { Box } from 'rebass';
-import { Tabs } from '../../../../components/Tabs';
-import { useAdaptable } from '../../../AdaptableContext';
-import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
-import { Tag } from '../../../../components/Tag';
-import { ExpressionEditor } from '../../../../components/ExpressionEditor';
-import { GridFilterModuleId } from '../../../../Utilities/Constants/ModuleConstants';
-import StringExtensions from '../../../../Utilities/Extensions/StringExtensions';
-import { useGridFilterOptionsForExpressionEditorProps } from '../../../GridFilter/useGridFilterOptionsForExpressionEditor';
-export const isGridFiltersValid = (layout, api) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridFilterSection = exports.GridFilterSectionSummary = exports.isGridFiltersValid = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const Tabs_1 = require("../../../../components/Tabs");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const Tag_1 = require("../../../../components/Tag");
+const ExpressionEditor_1 = require("../../../../components/ExpressionEditor");
+const ModuleConstants_1 = require("../../../../Utilities/Constants/ModuleConstants");
+const StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
+const useGridFilterOptionsForExpressionEditor_1 = require("../../../GridFilter/useGridFilterOptionsForExpressionEditor");
+const isGridFiltersValid = (layout, api) => {
     var _a;
     const expression = (_a = layout === null || layout === void 0 ? void 0 : layout.GridFilter) === null || _a === void 0 ? void 0 : _a.Expression;
-    if (StringExtensions.IsNullOrEmpty(expression)) {
+    if (StringExtensions_1.default.IsNullOrEmpty(expression)) {
         return true;
     }
-    return (api.internalApi.getQueryLanguageService().validateBoolean(expression, GridFilterModuleId)
+    return (api.internalApi.getQueryLanguageService().validateBoolean(expression, ModuleConstants_1.GridFilterModuleId)
         .isValid || 'Invalid Expression');
 };
-export const GridFilterSectionSummary = () => {
+exports.isGridFiltersValid = isGridFiltersValid;
+const GridFilterSectionSummary = () => {
     var _a, _b;
-    const { data: layout } = useOnePageAdaptableWizardContext();
-    return (React.createElement(Box, null, React.createElement(Tag, { mb: 1, mr: 1 }, (_b = (_a = layout === null || layout === void 0 ? void 0 : layout.GridFilter) === null || _a === void 0 ? void 0 : _a.Expression) !== null && _b !== void 0 ? _b : 'No Grid Filter')));
+    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    return (React.createElement(rebass_1.Box, null, React.createElement(Tag_1.Tag, { mb: 1, mr: 1 }, (_b = (_a = layout === null || layout === void 0 ? void 0 : layout.GridFilter) === null || _a === void 0 ? void 0 : _a.Expression) !== null && _b !== void 0 ? _b : 'No Grid Filter')));
 };
-export const GridFilterSection = (props) => {
+exports.GridFilterSectionSummary = GridFilterSectionSummary;
+const GridFilterSection = (props) => {
     var _a, _b;
-    const { api } = useAdaptable();
-    const { data: layout } = useOnePageAdaptableWizardContext();
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const initialData = React.useMemo(() => api.internalApi.getQueryPreviewData(), []);
-    const expressionEditorProps = useGridFilterOptionsForExpressionEditorProps();
-    return (React.createElement(Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs.Tab, null, "Grid Filters"),
-        React.createElement(Tabs.Content, null,
-            React.createElement(ExpressionEditor, Object.assign({}, expressionEditorProps, { allowSaveNamedQuery: false, type: 'boolean', module: GridFilterModuleId, value: (_b = (_a = layout === null || layout === void 0 ? void 0 : layout.GridFilter) === null || _a === void 0 ? void 0 : _a.Expression) !== null && _b !== void 0 ? _b : '', onChange: (expression) => {
+    const expressionEditorProps = (0, useGridFilterOptionsForExpressionEditor_1.useGridFilterOptionsForExpressionEditorProps)();
+    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs_1.Tabs.Tab, null, "Grid Filters"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(ExpressionEditor_1.ExpressionEditor, Object.assign({}, expressionEditorProps, { allowSaveNamedQuery: false, type: 'boolean', module: ModuleConstants_1.GridFilterModuleId, value: (_b = (_a = layout === null || layout === void 0 ? void 0 : layout.GridFilter) === null || _a === void 0 ? void 0 : _a.Expression) !== null && _b !== void 0 ? _b : '', onChange: (expression) => {
                     props.onChange(Object.assign(Object.assign({}, layout), { GridFilter: Object.assign(Object.assign({}, layout.GridFilter), { Expression: expression }) }));
                 }, initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api })))));
 };
+exports.GridFilterSection = GridFilterSection;

package/src/View/Layout/Wizard/sections/PivotColumnsSection.js

@@ -1,34 +1,40 @@
-import * as React from 'react';
-import { Box } from 'rebass';
-import { Tabs } from '../../../../components/Tabs';
-import { Tag } from '../../../../components/Tag';
-import { sortWithOrderArray } from '../../../../Utilities/sortWithOrder';
-import { useAdaptable } from '../../../AdaptableContext';
-import { ValueSelector } from '../../../Components/ValueSelector';
-import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
-import { columnFilter } from './Utilities';
-export const PivotColumnsSectionSummary = () => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PivotColumnsSection = exports.PivotColumnsSectionSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const Tabs_1 = require("../../../../components/Tabs");
+const Tag_1 = require("../../../../components/Tag");
+const sortWithOrder_1 = require("../../../../Utilities/sortWithOrder");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const ValueSelector_1 = require("../../../Components/ValueSelector");
+const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const Utilities_1 = require("./Utilities");
+const PivotColumnsSectionSummary = () => {
     var _a;
-    const adaptable = useAdaptable();
-    const { data: layout } = useOnePageAdaptableWizardContext();
-    return (React.createElement(Box, { p: 2, style: { borderRadius: 'var(--ab__border-radius)' }, backgroundColor: "var(--ab-color-defaultbackground)" }, ((_a = layout.PivotColumns) === null || _a === void 0 ? void 0 : _a.length) ? (layout.PivotColumns.map((columnId) => (React.createElement(Tag, { mr: 1, key: columnId }, adaptable.api.columnApi.getFriendlyNameForColumnId(columnId))))) : (React.createElement(Tag, null, "No Column Pivoting"))));
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    return (React.createElement(rebass_1.Box, { p: 2, style: { borderRadius: 'var(--ab__border-radius)' }, backgroundColor: "var(--ab-color-defaultbackground)" }, ((_a = layout.PivotColumns) === null || _a === void 0 ? void 0 : _a.length) ? (layout.PivotColumns.map((columnId) => (React.createElement(Tag_1.Tag, { mr: 1, key: columnId }, adaptable.api.columnApi.getFriendlyNameForColumnId(columnId))))) : (React.createElement(Tag_1.Tag, null, "No Column Pivoting"))));
 };
-export const PivotColumnsSection = (props) => {
+exports.PivotColumnsSectionSummary = PivotColumnsSectionSummary;
+const PivotColumnsSection = (props) => {
     var _a;
-    const adaptable = useAdaptable();
-    const { data: layout } = useOnePageAdaptableWizardContext();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const allPivotColumns = adaptable.api.columnApi.getPivotableColumns();
     const sortedPivotColumns = React.useMemo(() => {
         var _a;
-        return sortWithOrderArray(allPivotColumns.map((col) => col.columnId), (_a = layout.PivotColumns) !== null && _a !== void 0 ? _a : [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
+        return (0, sortWithOrder_1.sortWithOrderArray)(allPivotColumns.map((col) => col.columnId), (_a = layout.PivotColumns) !== null && _a !== void 0 ? _a : [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [layout, allPivotColumns]);
     const handleColumnsChange = (columnIds) => {
         props.onChange(Object.assign(Object.assign({}, layout), { PivotColumns: columnIds }));
     };
-    return (React.createElement(Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs.Tab, null, "Pivot Columns"),
-        React.createElement(Tabs.Content, null,
-            React.createElement(ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, options: sortedPivotColumns, value: (_a = layout.PivotColumns) !== null && _a !== void 0 ? _a : [], allowReorder: true, xSelectedLabel: () => {
+    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs_1.Tabs.Tab, null, "Pivot Columns"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, options: sortedPivotColumns, value: (_a = layout.PivotColumns) !== null && _a !== void 0 ? _a : [], allowReorder: true, xSelectedLabel: () => {
                     return `Selected Columns:`;
                 }, onChange: handleColumnsChange }))));
 };
+exports.PivotColumnsSection = PivotColumnsSection;