@adaptabletools/adaptable-cjs 17.0.0-canary.1

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/AdaptableOptionsForm.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptableOptionsForm = 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 Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
+const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
+const MetamodelService_1 = require("../../../Utilities/Services/MetamodelService");
+const AdaptablePopover_1 = require("../../AdaptablePopover");
+const LABEL_WIDTH = 250;
+const SUPPORTED_PRIMITEVE_TYPES = ['s', 'n', 'b'];
+const OptionInput = (props) => {
+    const { name, defaultValue, value, description, uiLabel } = props.option;
+    const label = uiLabel !== null && uiLabel !== void 0 ? uiLabel : StringExtensions_1.default.Humanize(name);
+    let input = React.createElement(React.Fragment, null);
+    const info = (React.createElement(rebass_1.Box, { ml: 2 },
+        React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: null, bodyText: [description] })));
+    const handleInputChange = (event) => props.onChange(Object.assign(Object.assign({}, props.option), { value: event.currentTarget.value }));
+    const handleCheckboxChange = (checked) => props.onChange(Object.assign(Object.assign({}, props.option), { value: checked }));
+    // option is mutated to acomodate complex types overrides
+    const option = Object.assign({}, props.option);
+    const isOptionNonHomogenusUnion = (option) => {
+        const isUnion = option.kind.includes('|');
+        return isUnion && option.kind.split('|').some((unionEl) => !/['"]/.test(unionEl));
+    };
+    if (isOptionNonHomogenusUnion(option)) {
+        // pick the first type
+        const newKind = option.kind
+            .split('|')
+            .find((unionEl) => SUPPORTED_PRIMITEVE_TYPES.includes(unionEl.trim()))
+            .trim();
+        if (newKind)
+            option.kind = newKind;
+    }
+    const inputProps = {
+        value: value !== null && value !== void 0 ? value : defaultValue,
+        minWidth: 200,
+        fontSize: 3,
+        mr: 2,
+    };
+    if (option.kind.includes('|')) {
+        const options = option.kind
+            .split('|')
+            .map((str) => str.trim().replace(/['"]/g, ''))
+            .map((str) => ({
+            label: StringExtensions_1.default.Humanize(str),
+            onClick: () => props.onChange(Object.assign(Object.assign({}, option), { value: str })),
+        }));
+        input = (React.createElement(DropdownButton_1.default, Object.assign({}, inputProps, { columns: ['label'], items: options }), StringExtensions_1.default.Humanize(value)));
+    }
+    else {
+        switch (option.kind) {
+            case 'n':
+                input = React.createElement(Input_1.default, Object.assign({ type: "number", onChange: handleInputChange }, inputProps));
+                break;
+            case 's':
+                input = React.createElement(Input_1.default, Object.assign({ type: "text", onChange: handleInputChange }, inputProps));
+                break;
+            case 'b':
+                input = (React.createElement(CheckBox_1.CheckBox, { onChange: handleCheckboxChange, checked: Boolean(value), type: "date" }, label));
+                break;
+        }
+    }
+    let content = (React.createElement(React.Fragment, null,
+        React.createElement(rebass_1.Flex, { minWidth: LABEL_WIDTH, alignItems: "center" },
+            label,
+            " ",
+            info),
+        input));
+    if (option.kind === 'b') {
+        content = (React.createElement(rebass_1.Flex, { alignItems: "center" },
+            input,
+            " ",
+            info));
+    }
+    return (React.createElement(rebass_1.Flex, { mb: 2, pl: 1 }, content));
+};
+const OptionsSection = (props) => {
+    var _a;
+    if (!props.options.length) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(rebass_1.Box, { mb: 2 },
+        React.createElement(HelpBlock_1.default, { mb: 2 }, (_a = props.name) !== null && _a !== void 0 ? _a : props.id),
+        props.options.map((option, index) => (React.createElement(OptionInput, { key: index, option: option, onChange: props.onChange })))));
+};
+const AdaptableOptionsForm = (props) => {
+    const nocodeOptions = React.useMemo(() => {
+        const metamodelService = new MetamodelService_1.MetamodelService(() => props.adaptableOptions);
+        return [...metamodelService.getGridInfoNoCodeOptions()];
+    }, [props.adaptableOptions]);
+    const handleOptionChange = (sectionName) => (option) => {
+        const adaptableOptions = Object.assign({}, props.adaptableOptions);
+        if (sectionName === 'baseOptions') {
+            // @ts-ignore
+            adaptableOptions[option.name] = option.value;
+        }
+        else {
+            // @ts-ignore
+            adaptableOptions[sectionName] = Object.assign(Object.assign({}, adaptableOptions[sectionName]), { [option.name]: option.value });
+        }
+        props.onChangedAdaptableOptions(adaptableOptions);
+    };
+    return (React.createElement(rebass_1.Box, { p: 2 }, nocodeOptions.map(([sectionName, { containerLabel, items }]) => {
+        return (React.createElement(OptionsSection, { onChange: handleOptionChange(sectionName), key: sectionName, id: sectionName, name: containerLabel, options: items }));
+    })));
+};
+exports.AdaptableOptionsForm = AdaptableOptionsForm;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ColumnsList.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { ColDef } from '@ag-grid-community/core';
+export interface NocodeColumn extends Partial<ColDef> {
+    field?: string;
+    type?: string | string[];
+    caption?: string;
+}
+declare const _default: React.MemoExoticComponent<({ columns: cols, handle, onValidityChange, onChange, onSelectionChange, selectedColumns, theme, }: {
+    onValidityChange: (valid: boolean) => any;
+    handle: React.MutableRefObject<any>;
+    columns: NocodeColumn[];
+    theme?: string;
+    onChange?: (columns: NocodeColumn[]) => void;
+    onSelectionChange?: (column: any, flag: boolean) => void;
+    selectedColumns?: {
+        [key: string]: boolean;
+    };
+}) => JSX.Element>;
+export default _default;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ColumnsList.js

@@ -0,0 +1,347 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const useSelection_1 = tslib_1.__importDefault(require("./useSelection"));
+const CheckBox_1 = require("../../../components/CheckBox");
+const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
+const Dropdown_1 = tslib_1.__importDefault(require("../../../components/Dropdown"));
+const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
+const react_1 = require("react");
+const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
+const InfiniteTable_1 = require("../../../components/InfiniteTable");
+const rebass_1 = require("rebass");
+const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
+const dataTypes = [
+    {
+        value: 'abColDefString',
+        label: 'Text (string)',
+    },
+    { value: 'abColDefNumber', label: 'Number' },
+    {
+        value: 'abColDefDate',
+        label: 'Date',
+    },
+    {
+        value: 'abColDefBoolean',
+        label: 'Boolean',
+    },
+];
+const inputStyle = {
+    width: '100%',
+    minWidth: 80,
+    textAlign: 'start',
+};
+const useForceRender = () => {
+    const [, setNow] = (0, react_1.useState)(Date.now());
+    return () => {
+        setNow(Date.now());
+    };
+};
+const ThrottledInput = React.memo((props) => {
+    const [stateValue, setStateValue] = (0, react_1.useState)(props.value);
+    const throttleOnChange = React.useRef((0, throttle_1.default)(props.onChange, 600, { leading: false }));
+    const handleChange = React.useCallback((event) => {
+        const newValue = event.target.value;
+        setStateValue(newValue);
+        throttleOnChange.current(newValue);
+    }, []);
+    React.useEffect(() => {
+        setStateValue(props.value);
+    }, [props.value]);
+    return React.createElement(Input_1.default, { style: props.style, value: stateValue, onChange: handleChange });
+});
+const tableDOMProps = {
+    style: {
+        height: '100%',
+        minWidth: '10rem',
+        minHeight: 600,
+    },
+};
+const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSelectionChange, selectedColumns, theme, }) => {
+    const rerender = useForceRender();
+    const columnsRef = (0, react_1.useRef)(cols);
+    const silentSetColumns = (columns) => {
+        columnsRef.current = columns;
+        onChange === null || onChange === void 0 ? void 0 : onChange(columns);
+    };
+    const setColumns = (columns) => {
+        silentSetColumns(columns);
+        rerender();
+    };
+    const getColumns = () => columnsRef.current;
+    const columns = columnsRef.current;
+    const onColumnChange = (col, value, property) => {
+        col = Object.assign(Object.assign({}, col), { [property]: value });
+        const cols = getColumns().map((c) => {
+            if (c.field === col.field) {
+                return col;
+            }
+            return c;
+        });
+        setColumns(cols);
+    };
+    const onColumnBatchChange = (value, property) => {
+        const cols = getColumns().map((c) => (Object.assign(Object.assign({}, c), { [property]: value })));
+        setColumns(cols);
+    };
+    const setColumnCaption = (caption, field) => {
+        const cols = getColumns().map((c) => {
+            if (c.field === field) {
+                const newCol = Object.assign(Object.assign({}, c), { caption });
+                return newCol;
+            }
+            return c;
+        });
+        setColumns(cols);
+    };
+    const onColumnTypeChange = (col, type) => {
+        const cols = getColumns().map((c) => {
+            if (c.field === col.field) {
+                return Object.assign(Object.assign({}, c), { type });
+            }
+            return c;
+        });
+        setColumns(cols);
+    };
+    const [primaryKeyField, setPrimaryKeyField] = React.useState(columns[0].field);
+    const { selected: includedColumnsMap, isSelected: isIncludedColumn, isAllSelected: isAllIncludedColumns, isNoneSelected: isNoneIncludedColumns, selectColumn: includeColumn, deselectColumn: excludeColumn, selectAll: includeAllColumns, deselectAll: excludeAllColumns, } = (0, useSelection_1.default)(columns, selectedColumns !== null && selectedColumns !== void 0 ? selectedColumns : true, null, { onChange: onSelectionChange });
+    handle.current = {
+        getColumns: () => getColumns().filter((col) => isIncludedColumn(col.field)),
+        getPrimaryKey: () => primaryKeyField,
+    };
+    const { isSelected: isSortableColumn, isAllSelected: isAllSortableColumns, isNoneSelected: isNoneSortableColumns, selectColumn: setSortableColumn, deselectColumn: setUnsortableColumn, selectAll: setAllSortable, deselectAll: setAllUnsortable, } = (0, useSelection_1.default)(columns, true, 'sortable', {
+        onBatchChange: (flag) => {
+            onColumnBatchChange(flag, 'sortable');
+        },
+        onChange: (col, flag) => {
+            onColumnChange(col, flag, 'sortable');
+        },
+    });
+    const { isSelected: isGroupableColumn, isAllSelected: isAllGroupableColumns, isNoneSelected: isNoneGroupableColumns, selectColumn: setGroupableColumn, deselectColumn: setUngroupableColumn, selectAll: setAllGroupable, deselectAll: setAllUngroupable, } = (0, useSelection_1.default)(columns, true, 'enableRowGroup', {
+        onBatchChange: (flag) => {
+            onColumnBatchChange(flag, 'enableRowGroup');
+        },
+        onChange: (col, flag) => {
+            onColumnChange(col, flag, 'enableRowGroup');
+        },
+    });
+    const { isSelected: isResizableColumn, isAllSelected: isAllResizableColumns, isNoneSelected: isNoneResizableColumns, selectColumn: setResizableColumn, deselectColumn: setUnresizableColumn, selectAll: setAllResizable, deselectAll: setAllUnresizable, } = (0, useSelection_1.default)(columns, true, 'resizable', {
+        onBatchChange: (flag) => {
+            onColumnBatchChange(flag, 'resizable');
+        },
+        onChange: (col, flag) => {
+            onColumnChange(col, flag, 'resizable');
+        },
+    });
+    const { isSelected: isEditableColumn, isAllSelected: isAllEditableColumns, isNoneSelected: isNoneEditableColumns, selectColumn: setEditableColumn, deselectColumn: setUneditableColumn, selectAll: setAllEditable, deselectAll: setAllUneditable, } = (0, useSelection_1.default)(columns, true, 'editable', {
+        onBatchChange: (flag) => {
+            onColumnBatchChange(flag, 'editable');
+        },
+        onChange: (col, flag) => {
+            onColumnChange(col, flag, 'editable');
+        },
+    });
+    const { isSelected: isFilterableColumn, isAllSelected: isAllFilterableColumns, isNoneSelected: isNoneFilterableColumns, selectColumn: setFilterableColumn, deselectColumn: setUnFilterableColumn, selectAll: setAllFilterable, deselectAll: setAllUnfilterable, } = (0, useSelection_1.default)(columns, true, 'filter', {
+        onBatchChange: (flag) => {
+            onColumnBatchChange(flag, 'filter');
+        },
+        onChange: (col, flag) => {
+            onColumnChange(col, flag, 'filter');
+        },
+    });
+    const allIncluded = isAllIncludedColumns();
+    const allExcluded = isNoneIncludedColumns();
+    React.useEffect(() => {
+        onValidityChange(isIncludedColumn(primaryKeyField));
+    }, [includedColumnsMap, primaryKeyField]);
+    const rowHeight = 40;
+    const data = columns;
+    const CellWrapper = (props) => {
+        return (React.createElement(rebass_1.Flex, Object.assign({}, props, { style: Object.assign(Object.assign({}, props.style), { position: 'absolute', textAlign: 'center', top: 0, left: 0, height: '100%', width: '100%', whiteSpace: 'normal' }), justifyContent: "center", alignItems: "center" }), props.children));
+    };
+    const HeaderCellWrapper = (props) => (React.createElement(CellWrapper, Object.assign({}, props, { fontSize: 3, style: { fontWeight: 600 } })));
+    const HeaderWithCheckbox = (props) => {
+        const { label, onChange, checked } = props, flexProps = tslib_1.__rest(props, ["label", "onChange", "checked"]);
+        return (React.createElement(HeaderCellWrapper, Object.assign({}, flexProps, { flexDirection: "column" }),
+            React.createElement(rebass_1.Box, null, label),
+            React.createElement(rebass_1.Box, { style: { textAlign: 'center' } },
+                React.createElement(CheckBox_1.CheckBox, { checked: checked, onChange: onChange }))));
+    };
+    const columnsMap = {
+        pk: {
+            header: () => React.createElement(HeaderCellWrapper, null, "Primary Key"),
+            maxWidth: 80,
+            sortable: false,
+            renderMenuIcon: false,
+            render: (params) => {
+                const { data } = params;
+                const column = data;
+                const isPrimaryKey = (column === null || column === void 0 ? void 0 : column.field) === primaryKeyField;
+                return (React.createElement(Radio_1.default, { checked: isPrimaryKey, onChange: (checked) => {
+                        if (checked && isIncludedColumn(column.field)) {
+                            setPrimaryKeyField(column.field);
+                        }
+                    } }));
+            },
+        },
+        included: {
+            maxWidth: 80,
+            resizable: true,
+            renderMenuIcon: false,
+            header: () => (React.createElement(HeaderWithCheckbox, { label: "Included", checked: allIncluded ? true : allExcluded ? false : null, onChange: (allIncluded) => {
+                    if (allIncluded) {
+                        includeAllColumns();
+                    }
+                    else {
+                        excludeAllColumns();
+                    }
+                } })),
+            render: (params) => {
+                const column = params.data;
+                return (React.createElement(CellWrapper, null,
+                    React.createElement(CheckBox_1.CheckBox, { checked: isIncludedColumn(column.field), onChange: (included) => {
+                            if (included) {
+                                includeColumn(column.field);
+                            }
+                            else {
+                                excludeColumn(column.field);
+                            }
+                        } })));
+            },
+        },
+        field: {
+            header: React.createElement(HeaderCellWrapper, null, "Field"),
+            field: 'field',
+            minWidth: 150,
+            renderMenuIcon: false,
+            render: (params) => {
+                const column = params.data;
+                const humanized = StringExtensions_1.default.Humanize(column.field);
+                return (React.createElement(rebass_1.Box, { p: 2 },
+                    React.createElement(ThrottledInput, { key: column.field, style: inputStyle, value: column.caption != undefined ? column.caption : humanized, placeholder: humanized, onChange: (value) => {
+                            setColumnCaption(value, column.field);
+                        } })));
+            },
+        },
+        type: {
+            header: React.createElement(HeaderCellWrapper, null, "Type"),
+            maxWidth: 140,
+            renderMenuIcon: false,
+            render: (params) => {
+                var _a;
+                const column = params.data;
+                return (React.createElement(CellWrapper, { paddingLeft: 1, paddingRight: 1 },
+                    React.createElement(Dropdown_1.default, { style: inputStyle, showClearButton: false, options: dataTypes, value: (_a = column === null || column === void 0 ? void 0 : column.type) !== null && _a !== void 0 ? _a : '', onChange: onColumnTypeChange.bind(null, column) })));
+            },
+        },
+        sortable: {
+            renderMenuIcon: false,
+            header: (React.createElement(HeaderWithCheckbox, { label: "Sortable", checked: isAllSortableColumns() ? true : isNoneSortableColumns() ? false : null, onChange: (allSortable) => {
+                    if (allSortable) {
+                        setAllSortable();
+                    }
+                    else {
+                        setAllUnsortable();
+                    }
+                } })),
+            render: (params) => {
+                const column = params.data;
+                return (React.createElement(CheckBox_1.CheckBox, { checked: isSortableColumn(column.field), onChange: (sortable) => {
+                        sortable ? setSortableColumn(column.field) : setUnsortableColumn(column.field);
+                    } }));
+            },
+        },
+        editable: {
+            renderMenuIcon: false,
+            header: (React.createElement(HeaderWithCheckbox, { label: "Editable", checked: isAllEditableColumns() ? true : isNoneEditableColumns() ? false : null, onChange: (allEditable) => {
+                    if (allEditable) {
+                        setAllEditable();
+                    }
+                    else {
+                        setAllUneditable();
+                    }
+                } })),
+            render: (params) => {
+                const col = params.data;
+                return (React.createElement(CellWrapper, null,
+                    React.createElement(CheckBox_1.CheckBox, { checked: isEditableColumn(col.field), onChange: (editable) => {
+                            editable ? setEditableColumn(col.field) : setUneditableColumn(col.field);
+                        } })));
+            },
+        },
+        resizable: {
+            renderMenuIcon: false,
+            header: (React.createElement(HeaderWithCheckbox, { label: "Resizable", checked: isAllResizableColumns() ? true : isNoneResizableColumns() ? false : null, onChange: (allResizable) => {
+                    if (allResizable) {
+                        setAllResizable();
+                    }
+                    else {
+                        setAllUnresizable();
+                    }
+                } })),
+            render: (params) => {
+                const col = params.data;
+                return (React.createElement(CellWrapper, null,
+                    React.createElement(CheckBox_1.CheckBox, { checked: isResizableColumn(col.field), onChange: (resizable) => {
+                            resizable ? setResizableColumn(col.field) : setUnresizableColumn(col.field);
+                        } })));
+            },
+        },
+        groupable: {
+            renderMenuIcon: false,
+            header: (React.createElement(HeaderWithCheckbox, { label: "Groupable", checked: isAllGroupableColumns() ? true : isNoneGroupableColumns() ? false : null, onChange: (allGroupable) => {
+                    if (allGroupable) {
+                        setAllGroupable();
+                    }
+                    else {
+                        setAllUngroupable();
+                    }
+                } })),
+            render: (params) => {
+                const col = params.data;
+                return (React.createElement(CellWrapper, null,
+                    React.createElement(CheckBox_1.CheckBox, { checked: isGroupableColumn(col.field), onChange: (groupable) => {
+                            groupable ? setGroupableColumn(col.field) : setUngroupableColumn(col.field);
+                        } })));
+            },
+        },
+        filterable: {
+            renderMenuIcon: false,
+            header: (React.createElement(HeaderWithCheckbox, { label: "Filterable", checked: isAllFilterableColumns() ? true : isNoneFilterableColumns() ? false : null, onChange: (allFilterable) => {
+                    if (allFilterable) {
+                        setAllFilterable();
+                    }
+                    else {
+                        setAllUnfilterable();
+                    }
+                } })),
+            render: (params) => {
+                const col = params.data;
+                return (React.createElement(CellWrapper, null,
+                    React.createElement(CheckBox_1.CheckBox, { checked: isFilterableColumn(col.field), onChange: (filterable) => {
+                            filterable ? setFilterableColumn(col.field) : setUnFilterableColumn(col.field);
+                        } })));
+            },
+        },
+    };
+    return (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' }, className: theme },
+        React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: "colId" },
+            React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: {
+                    default: {
+                        defaultFlex: 1,
+                        align: 'center',
+                        sortable: false,
+                    },
+                }, headerOptions: {
+                    alwaysReserveSpaceForSortIcon: false,
+                }, rowHeight: rowHeight, columnHeaderHeight: 65, domProps: tableDOMProps, columns: columnsMap }))));
+};
+function areEqual() {
+    /**
+     * Make the ColumnList not render on subsequent prop changes
+     * in order to boost performance
+     */
+    return true;
+}
+exports.default = React.memo(ColumnsList, areEqual);

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/Components/FormBox.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { BoxProps } from 'rebass';
+export declare const NocodeWizardFormBox: React.FunctionComponent<React.PropsWithChildren<BoxProps>>;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/Components/FormBox.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NocodeWizardFormBox = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const join_1 = tslib_1.__importDefault(require("../../../../components/utils/join"));
+const NocodeWizardFormBox = (props) => (React.createElement(rebass_1.Box, Object.assign({}, props, { padding: 2, mb: 2, className: (0, join_1.default)('ab-NocodeWizardFormBox', props.className) })));
+exports.NocodeWizardFormBox = NocodeWizardFormBox;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ConfigurationWizard.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { OnePageWizardSection } from '../../Wizard/OnePageWizards';
+import { AdaptableFrameworkComponent } from '../../../../types';
+import { AdaptableConfig } from './AdaptableConfig';
+export interface CustomSection<T> {
+    title: OnePageWizardSection<T>['title'];
+    details?: AdaptableFrameworkComponent;
+    isValid?: OnePageWizardSection<T>['isValid'];
+    isVisible?: OnePageWizardSection<T>['isVisible'];
+    render: (
+    /**
+     * Internal state of adaptableOptions.
+     */
+    adaptableConfig: AdaptableConfig, 
+    /**
+     * With this callback adaptableOptions can be changed.
+     */
+    onChange: (newAdaptableConfig: AdaptableConfig) => void, 
+    /**
+     * Set the selected columns.
+     */
+    setSelectedColumns: (selectedColumn: Record<string, boolean>) => void) => React.ReactNode;
+}
+export interface ConfigurationWizardProps {
+    adaptableConfig: AdaptableConfig;
+    onFinish: (adaptableConfig: AdaptableConfig) => void;
+    onCancel: () => void;
+    startSections?: CustomSection<AdaptableConfig>[];
+}
+export declare const ConfigurationWizard: React.FunctionComponent<ConfigurationWizardProps>;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ConfigurationWizard.js

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfigurationWizard = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
+const OnePageWizards_1 = require("../../Wizard/OnePageWizards");
+const ConfigurationWizardColumnsStep_1 = require("./ConfigurationWizardColumnsStep");
+const GridOptionsForm_1 = tslib_1.__importDefault(require("./GridOptionsForm"));
+const EntitlementsForm_1 = tslib_1.__importDefault(require("./EntitlementsForm"));
+const UiOptionsForm_1 = require("./UIOptions/UiOptionsForm");
+const AdaptableOptionsForm_1 = require("./AdaptableOptionsForm");
+const AdaptableHelper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/AdaptableHelper"));
+const ConfigurationWizard = (props) => {
+    const [isPrimaryKeySelected, setIsValid] = React.useState(true);
+    const [adaptableConfig, setAdaptableConfig] = (0, react_1.useState)(() => {
+        const gridOptionDefaults = {
+            sideBar: {
+                toolPanels: ['columns', 'filters', 'adaptable'],
+            },
+        };
+        const gridOptions = Object.assign(Object.assign({}, gridOptionDefaults), props.adaptableConfig.gridOptions);
+        const adaptableOptions = AdaptableHelper_1.default.assignAdaptableOptions(props.adaptableConfig.adaptableOptions);
+        return { gridOptions, adaptableOptions };
+    });
+    const [selectedColumns, setSelectedColumns] = (0, react_1.useState)(() => {
+        var _a, _b;
+        return (_b = (_a = props.adaptableConfig.gridOptions) === null || _a === void 0 ? void 0 : _a.columnDefs) === null || _b === void 0 ? void 0 : _b.reduce((acc, col) => {
+            acc[col.field] = true;
+            return acc;
+        }, {});
+    });
+    const columnsHandle = React.useRef();
+    const handleFinish = () => {
+        const newAdaptableOptions = Object.assign({}, adaptableConfig.adaptableOptions);
+        const newGridOptions = Object.assign({}, adaptableConfig.gridOptions);
+        if (columnsHandle.current) {
+            adaptableConfig.gridOptions.columnDefs = columnsHandle.current.getColumns().map((column) => {
+                const newColumn = Object.assign(Object.assign({}, column), { headerName: column.caption || StringExtensions_1.default.Humanize(column.field) });
+                delete newColumn.caption;
+                return newColumn;
+            });
+            newAdaptableOptions.primaryKey = columnsHandle.current.getPrimaryKey();
+        }
+        const newAdaptableConfig = {
+            adaptableOptions: newAdaptableOptions,
+            gridOptions: newGridOptions,
+        };
+        setAdaptableConfig(newAdaptableConfig);
+        props.onFinish(newAdaptableConfig);
+    };
+    const handlePrimaryKeyColumnIsNotSelected = React.useCallback((newIsValid) => {
+        setIsValid(newIsValid);
+    }, []);
+    const handleColumnsChange = React.useCallback((columns) => {
+        setAdaptableConfig((adaptableConfig) => (Object.assign(Object.assign({}, adaptableConfig), { gridOptions: Object.assign(Object.assign({}, adaptableConfig.gridOptions), { columnDefs: columns }) })));
+    }, []);
+    const handleColumnSelectionChange = React.useCallback((col, flag) => {
+        setSelectedColumns((selectedColumns) => {
+            const newSelectedColumns = selectedColumns !== null && selectedColumns !== void 0 ? selectedColumns : {};
+            newSelectedColumns[col.field] = flag;
+            return newSelectedColumns;
+        });
+    }, []);
+    const handleAdaptableOptionsChange = React.useCallback((adaptableOptions) => {
+        setAdaptableConfig((adaptableConfig) => (Object.assign(Object.assign({}, adaptableConfig), { adaptableOptions: adaptableOptions })));
+    }, []);
+    const handleGridOptionsChange = React.useCallback((gridOptions) => {
+        setAdaptableConfig((adaptableConfig) => (Object.assign(Object.assign({}, adaptableConfig), { gridOptions: gridOptions })));
+    }, []);
+    let sections = [
+        {
+            title: 'Columns',
+            details: 'Configure Columns',
+            isValid: () => {
+                if (!isPrimaryKeySelected) {
+                    return 'Primary key column must be included';
+                }
+                return true;
+            },
+            render: () => (React.createElement(ConfigurationWizardColumnsStep_1.ConfigurationWizardColumnsStep, { adaptableConfig: adaptableConfig, setPrimaryKeyIsNotSelected: handlePrimaryKeyColumnIsNotSelected, onChange: setAdaptableConfig, selectedColumns: selectedColumns, onSelectionChange: handleColumnSelectionChange, onColumnChange: handleColumnsChange, columnsHandle: columnsHandle })),
+        },
+        {
+            title: 'AdapTable Options',
+            details: 'Configure Adaptable Options',
+            isValid: () => adaptableConfig.adaptableOptions.adaptableId ? true : 'Adaptable ID is required',
+            render: () => (React.createElement(AdaptableOptionsForm_1.AdaptableOptionsForm, { adaptableOptions: adaptableConfig.adaptableOptions, onChangedAdaptableOptions: handleAdaptableOptionsChange })),
+        },
+        {
+            title: 'AG Grid Options',
+            details: 'Configure AG Grid Options',
+            render: () => (React.createElement(GridOptionsForm_1.default, { gridOptions: adaptableConfig.gridOptions, onChangedGridOptions: handleGridOptionsChange })),
+        },
+        {
+            title: 'UI Elements',
+            details: 'Configure UI Elements',
+            render: () => (React.createElement(UiOptionsForm_1.UIElementsForm, { adaptableOptions: adaptableConfig.adaptableOptions, gridOptions: adaptableConfig.gridOptions, onChangedAdaptableOptions: handleAdaptableOptionsChange, onChangedGridOptions: handleGridOptionsChange })),
+        },
+        {
+            title: 'Entitlements',
+            details: 'Configure Entitlements',
+            render: () => (React.createElement(EntitlementsForm_1.default, { adaptableOptions: adaptableConfig.adaptableOptions, onChangedAptableOptions: handleAdaptableOptionsChange })),
+        },
+        /**
+        financePlugin && {
+          title: 'Finance',
+          details: 'Finance Options',
+          render: () => (
+            <FinanceForm
+              adaptableConfig={adaptableConfig}
+              onChangedAdaptableConfig={setAdaptableConfig}
+            />
+          ),
+        },  */
+    ].filter(Boolean);
+    if (props.startSections) {
+        sections = [
+            ...props.startSections.map((section) => {
+                return {
+                    title: section.title,
+                    isValid: section.isValid,
+                    isVisible: section.isVisible,
+                    render: () => {
+                        return section.render(adaptableConfig, setAdaptableConfig, setSelectedColumns);
+                    },
+                };
+            }),
+            ...sections,
+        ];
+    }
+    return (React.createElement(OnePageWizards_1.OnePageWizard, { data: adaptableConfig, name: "Configure", defaultCurrentSectionName: 'default section name', onHide: () => null, onFinish: handleFinish, sections: sections }));
+};
+exports.ConfigurationWizard = ConfigurationWizard;