@adaptabletools/adaptable 12.0.0-canary.1 → 12.0.0-canary.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "12.0.0-canary.1",
+  "version": "12.0.0-canary.2",
   "description": "Powerful data-agnostic HTML5 datagrid add-on that sits on top of an underlying grid component and provides all the rich functionality that advanced users expect from their DataGrids and Data Tables",
   "keywords": [
     "web-components",

package/publishTimestamp.d.ts

@@ -1,2 +1,2 @@
-declare const _default: 1654683345204;
+declare const _default: 1654688737709;
 export default _default;

package/publishTimestamp.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = 1654683345204;
+exports.default = 1654688737709;

package/src/AdaptableInterfaces/AdaptableNoCodeWizard.d.ts

@@ -16,6 +16,7 @@ export interface AdaptableNoCodeWizardOptions {
     helpText?: React.ReactNode;
     fileContentsToJSON?: (str: string) => Promise<any> | any;
     readFile?: (file: File) => Promise<any>;
+    skipToWizard?: boolean;
     loadingMessage?: React.ReactNode;
     prepareData?: (data: any, file?: File) => {
         columns: string[];

package/src/Api/Implementation/FormatColumnApiImpl.js

@@ -275,13 +275,13 @@ class FormatColumnApiImpl extends ApiBase_1.ApiBase {
         this.adaptable.api.eventApi.emit('CheckboxColumnClicked', checkboxColumnClickedInfo);
     }
     applyCustomFormatters(value, options) {
-        var _a, _b;
+        var _a, _b, _c;
         const columnCustomFormatters = (_a = options === null || options === void 0 ? void 0 : options.CustomDisplayFormats) !== null && _a !== void 0 ? _a : [];
         if (!(columnCustomFormatters === null || columnCustomFormatters === void 0 ? void 0 : columnCustomFormatters.length)) {
             return value;
         }
         const adaptableOptions = this.adaptable.adaptableOptions;
-        const customFormattersFromOptions = (_b = adaptableOptions === null || adaptableOptions === void 0 ? void 0 : adaptableOptions.userInterfaceOptions) === null || _b === void 0 ? void 0 : _b.customDisplayFormatters;
+        const customFormattersFromOptions = (_c = (_b = adaptableOptions === null || adaptableOptions === void 0 ? void 0 : adaptableOptions.userInterfaceOptions) === null || _b === void 0 ? void 0 : _b.customDisplayFormatters) !== null && _c !== void 0 ? _c : [];
         // formatters are applied in the order they are defined in the options
         const customFormatters = customFormattersFromOptions.filter((customFormatterOption) => columnCustomFormatters.includes(customFormatterOption.id));
         return customFormatters.reduce((acc, formatter) => {

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

@@ -1,13 +1,18 @@
 import * as React from 'react';
 import { ColDef } from '@ag-grid-community/all-modules';
-interface Column extends Partial<ColDef> {
+export interface NocodeColumn extends Partial<ColDef> {
     field?: string;
     type?: string | string[];
     caption?: string;
 }
-declare const _default: React.MemoExoticComponent<({ columns: cols, handle, onValidityChange, }: {
+declare const _default: React.MemoExoticComponent<({ columns: cols, handle, onValidityChange, onChange, onSelectionChange, selectedColumns, }: {
     onValidityChange: (valid: boolean) => any;
     handle: React.MutableRefObject<any>;
-    columns: Column[];
+    columns: NocodeColumn[];
+    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

@@ -37,11 +37,12 @@ const useForceRender = () => {
         setNow(Date.now());
     };
 };
-const ColumnsList = ({ columns: cols, handle, onValidityChange, }) => {
+const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSelectionChange, selectedColumns, }) => {
     const rerender = useForceRender();
     const columnsRef = react_1.useRef(cols);
     const silentSetColumns = (columns) => {
         columnsRef.current = columns;
+        onChange === null || onChange === void 0 ? void 0 : onChange(columns);
     };
     const setColumns = (columns) => {
         silentSetColumns(columns);
@@ -83,7 +84,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, }) => {
         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, } = useSelection_1.default(columns, true, null);
+    const { selected: includedColumnsMap, isSelected: isIncludedColumn, isAllSelected: isAllIncludedColumns, isNoneSelected: isNoneIncludedColumns, selectColumn: includeColumn, deselectColumn: excludeColumn, selectAll: includeAllColumns, deselectAll: excludeAllColumns, } = 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,

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

@@ -9,7 +9,7 @@ const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const rebass_1 = require("rebass");
 const DefaultAdaptableOptions_1 = require("../../../Utilities/Defaults/DefaultAdaptableOptions");
 const ConfigurationForm = (props) => {
-    var _a;
+    var _a, _b, _c;
     let abOptions = props.adaptableOptions;
     const layoutOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.layoutOptions), abOptions.layoutOptions);
     const generalOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.generalOptions), abOptions.generalOptions);
@@ -20,6 +20,13 @@ const ConfigurationForm = (props) => {
     // we are 'hard-coding' this to use AG Grid but so does helper so ok for now and we can refactor when Adaptable Grid is ready
     const gridOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions.gridOptions), abOptions.gridOptions);
     return (React.createElement(React.Fragment, null,
+        React.createElement(HelpBlock_1.default, null, "Base Options"),
+        React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'label', style: { textAlign: 'start' } }, { name: 'children' }] },
+            React.createElement(FormLayout_1.FormRow, { label: "Adaptable ID" },
+                React.createElement(Input_1.default, { value: (_b = (_a = props === null || props === void 0 ? void 0 : props.adaptableOptions) === null || _a === void 0 ? void 0 : _a.adaptableId) !== null && _b !== void 0 ? _b : null, onChange: (event) => {
+                        var _a;
+                        props.onChangeadaptableOptions(Object.assign(Object.assign({}, abOptions), { adaptableId: (_a = event.target.value) !== null && _a !== void 0 ? _a : '' }));
+                    }, style: { minWidth: '20rem' } }))),
         React.createElement(HelpBlock_1.default, null, "General Options"),
         React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
             React.createElement(FormLayout_1.FormRow, { label: "Show Missing Primary Key Warning" },
@@ -39,7 +46,7 @@ const ConfigurationForm = (props) => {
                         props.onChangeadaptableOptions(abOptions);
                     } })),
             React.createElement(FormLayout_1.FormRow, { label: "Show Quick Filter" },
-                React.createElement(CheckBox_1.CheckBox, { checked: (_a = gridOptions.defaultColDef) === null || _a === void 0 ? void 0 : _a.floatingFilter, onChange: (floatingFilter) => {
+                React.createElement(CheckBox_1.CheckBox, { checked: (_c = gridOptions.defaultColDef) === null || _c === void 0 ? void 0 : _c.floatingFilter, onChange: (floatingFilter) => {
                         abOptions = Object.assign({}, abOptions);
                         abOptions.gridOptions = Object.assign({}, abOptions.gridOptions);
                         abOptions.gridOptions.defaultColDef = {

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { AdaptableOptions } from '../../../types';
+import { OnePageWizardSection } from '../../Wizard/OnePageWizards';
+import { AdaptableFrameworkComponent } from '../../../../types';
+export interface CustomSection<T> {
+    title: OnePageWizardSection<T>['title'];
+    details?: AdaptableFrameworkComponent;
+    isValid?: OnePageWizardSection<T>['isValid'];
+    isVisible?: OnePageWizardSection<T>['isVisible'];
+    render: (adaptableOptions: AdaptableOptions, onChange: (newAdaptableOptions: AdaptableOptions) => void) => React.ReactNode;
+}
+export interface ConfigurationWizardProps {
+    adaptableOptions: AdaptableOptions;
+    onFinish: (adaptableOptions: AdaptableOptions) => void;
+    onCancel: () => void;
+    startSections?: CustomSection<AdaptableOptions>[];
+}
+export declare const ConfigurationWizard: React.FunctionComponent<ConfigurationWizardProps>;

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

@@ -0,0 +1,87 @@
+"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 ConfigurationForm_1 = tslib_1.__importDefault(require("./ConfigurationForm"));
+exports.ConfigurationWizard = (props) => {
+    const [isPrimaryKeySelected, setIsValid] = React.useState(true);
+    const [adaptableOptions, setAdaptableOptions] = react_1.useState(props.adaptableOptions);
+    const [selectedColumns, setSelectedColumns] = react_1.useState(() => {
+        return props.adaptableOptions.gridOptions.columnDefs.reduce((acc, col) => {
+            acc[col.field] = true;
+            return acc;
+        }, {});
+    });
+    const columnsHandle = React.useRef();
+    const handleFinish = () => {
+        const newAdaptableOptions = Object.assign({}, adaptableOptions);
+        newAdaptableOptions.gridOptions = Object.assign({}, adaptableOptions.gridOptions);
+        newAdaptableOptions.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();
+        setAdaptableOptions(newAdaptableOptions);
+        props.onFinish(newAdaptableOptions);
+    };
+    const handlePrimaryKeyColumnIsNotSelected = React.useCallback((newIsValid) => {
+        setIsValid(newIsValid);
+    }, []);
+    const handleColumnsChange = React.useCallback((columns) => {
+        setAdaptableOptions((adaptableOptions) => (Object.assign(Object.assign({}, adaptableOptions), { gridOptions: Object.assign(Object.assign({}, adaptableOptions.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;
+        });
+    }, []);
+    let sections = [
+        {
+            title: 'Columns',
+            details: 'Configure Adaptable',
+            isValid: () => {
+                if (!isPrimaryKeySelected) {
+                    return 'Primary key column must be included';
+                }
+                return true;
+            },
+            render: () => (React.createElement(ConfigurationWizardColumnsStep_1.ConfigurationWizardColumnsStep, { adaptableOptions: adaptableOptions, setPrimaryKeyIsNotSelected: handlePrimaryKeyColumnIsNotSelected, onChange: (newAdaptableOptions) => {
+                    setAdaptableOptions(newAdaptableOptions);
+                }, selectedColumns: selectedColumns, onSelectionChange: handleColumnSelectionChange, onColumnChange: handleColumnsChange, columnsHandle: columnsHandle })),
+        },
+        {
+            title: 'Adaptable Options',
+            details: 'Configure Adaptable Options',
+            isValid: () => (adaptableOptions.adaptableId ? true : 'Adaptable ID is required'),
+            render: () => (React.createElement(ConfigurationForm_1.default, { adaptableOptions: adaptableOptions, onChangeadaptableOptions: (abOptions) => {
+                    setAdaptableOptions(abOptions);
+                } })),
+        },
+    ];
+    if (props.startSections) {
+        sections = [
+            ...props.startSections.map((section) => {
+                return {
+                    title: section.title,
+                    isValid: section.isValid,
+                    isVisible: section.isVisible,
+                    render: () => {
+                        return section.render(adaptableOptions, setAdaptableOptions);
+                    },
+                };
+            }),
+            ...sections,
+        ];
+    }
+    return (React.createElement(OnePageWizards_1.OnePageWizard, { data: adaptableOptions, name: "Configure", defaultCurrentSectionName: 'default section name', onHide: () => null, onFinish: handleFinish, sections: sections }));
+};

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { NocodeColumn } from './ColumnsList';
+import { AdaptableOptions } from '../../../types';
+export interface ConfigurationWizardColumnsStepProps {
+    adaptableOptions: AdaptableOptions;
+    onChange: (newOptions: AdaptableOptions) => void;
+    columnsHandle: React.MutableRefObject<{
+        getColumns: () => any[];
+        getPrimaryKey: () => string;
+    }>;
+    setPrimaryKeyIsNotSelected: (enabled: boolean) => void;
+    onColumnChange: (columns: NocodeColumn[]) => void;
+    onSelectionChange: (column: any, flag: boolean) => void;
+    selectedColumns: {
+        [key: string]: boolean;
+    };
+}
+export declare const ConfigurationWizardColumnsStep: React.FunctionComponent<ConfigurationWizardColumnsStepProps>;

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfigurationWizardColumnsStep = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
+const ColumnsList_1 = tslib_1.__importDefault(require("./ColumnsList"));
+exports.ConfigurationWizardColumnsStep = (props) => {
+    var _a, _b;
+    return (React.createElement(Panel_1.default, { header: '', border: "none", bodyScroll: false, bodyProps: {
+            style: { overflow: 'auto', display: 'flex', flexFlow: 'column' },
+        }, borderRadius: "none", style: { fontSize: 16, flex: 1 } },
+        React.createElement(ColumnsList_1.default, { handle: props.columnsHandle, onValidityChange: (valid) => {
+                props.setPrimaryKeyIsNotSelected(valid);
+            }, selectedColumns: props.selectedColumns, onChange: props.onColumnChange, onSelectionChange: props.onSelectionChange, columns: (_b = (_a = props.adaptableOptions) === null || _a === void 0 ? void 0 : _a.gridOptions) === null || _b === void 0 ? void 0 : _b.columnDefs })));
+};

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

@@ -1,9 +1,2 @@
-import * as React from 'react';
-import { AdaptableOptions } from '../../../types';
-interface ConfigurationDialogProps extends React.HTMLProps<HTMLElement> {
-    adaptableOptions: AdaptableOptions;
-    onFinish: (adaptableOptions: AdaptableOptions) => void;
-    onCancel: () => void;
-}
-declare const ConfigurationDialog: (props: ConfigurationDialogProps) => JSX.Element;
-export default ConfigurationDialog;
+import { ConfigurationWizard } from './ConfigurationWizard';
+export default ConfigurationWizard;

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

@@ -1,77 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const react_1 = require("react");
-const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
-const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const ColumnsList_1 = tslib_1.__importDefault(require("./ColumnsList"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
-const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-const ConfigurationForm_1 = tslib_1.__importDefault(require("./ConfigurationForm"));
-const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
-const ConfigurationDialog = (props) => {
-    const [abOptions, setABOptions] = react_1.useState(props.adaptableOptions);
-    const [finishEnabled, setFinishEnabled] = react_1.useState(true);
-    const [currentStep, setCurrentStep] = react_1.useState(0);
-    let canFinish = finishEnabled;
-    if (!abOptions.adaptableId) {
-        canFinish = false;
-    }
-    let canNext = canFinish && currentStep === 0;
-    const columnsHandle = React.useRef();
-    const onadaptableIdChange = (event) => {
-        const newABOptions = Object.assign({}, abOptions);
-        newABOptions.adaptableId = event.target.value;
-        setABOptions(newABOptions);
-    };
-    const onFinish = () => {
-        const newABOptions = Object.assign({}, abOptions);
-        newABOptions.gridOptions = Object.assign({}, abOptions.gridOptions);
-        newABOptions.gridOptions.columnDefs = columnsHandle.current.getColumns().map((c) => {
-            const col = Object.assign(Object.assign({}, c), { headerName: c.caption || StringExtensions_1.default.Humanize(c.field) });
-            delete col.caption;
-            return col;
-        });
-        newABOptions.primaryKey = columnsHandle.current.getPrimaryKey();
-        setABOptions(newABOptions);
-        props.onFinish(newABOptions);
-    };
-    const onNext = () => {
-        setCurrentStep(1);
-    };
-    const stepOne = (React.createElement(React.Fragment, null,
-        React.createElement(Panel_1.default, { header: 'Configure AdapTable', border: "none", bodyScroll: false, bodyProps: {
-                padding: 0,
-                style: { overflow: 'auto', display: 'flex', flexFlow: 'column' },
-            }, borderRadius: "none", style: { fontSize: 16, flex: 1 } },
-            React.createElement(Panel_1.default, { style: { minHeight: 50 }, border: "none" },
-                React.createElement(FormLayout_1.default, null,
-                    React.createElement(FormLayout_1.FormRow, { label: "AdaptableId" },
-                        React.createElement(Input_1.default, { value: abOptions.adaptableId, onChange: onadaptableIdChange, style: { minWidth: '20rem' } })))),
-            React.createElement(ColumnsList_1.default, { handle: columnsHandle, onValidityChange: (valid) => {
-                    setFinishEnabled(valid);
-                }, columns: abOptions.gridOptions.columnDefs }))));
-    const stepTwo = (React.createElement(React.Fragment, null,
-        React.createElement(Panel_1.default, { header: 'Configure AdapTable', border: "none", style: { flex: 1, overflow: 'auto' } },
-            React.createElement(ConfigurationForm_1.default, { adaptableOptions: abOptions, onChangeadaptableOptions: (abOptions) => {
-                    setABOptions(abOptions);
-                } }))));
-    return (React.createElement(Dialog_1.default, { modal: true, isOpen: true, showCloseButton: false },
-        React.createElement(rebass_1.Flex, { flexDirection: "column", style: {
-                height: '100%',
-                width: '90vw',
-                maxWidth: 1000,
-                maxHeight: '90vh',
-            } },
-            currentStep === 0 ? stepOne : stepTwo,
-            React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2, backgroundColor: "primary", alignItems: "center" },
-                React.createElement(SimpleButton_1.default, { tone: "neutral", variant: "text", tooltip: "Cancel configuration ", onClick: props.onCancel }, "Cancel"),
-                React.createElement("div", { style: { flex: 1 } }),
-                React.createElement(SimpleButton_1.default, { variant: "outlined", onClick: () => setCurrentStep(0), disabled: currentStep === 0, marginRight: 2, tone: "neutral" }, "Back"),
-                React.createElement(SimpleButton_1.default, { variant: "outlined", onClick: onNext, disabled: !canNext, marginRight: 2, tone: "neutral" }, "Next"),
-                React.createElement(SimpleButton_1.default, { tone: "accent", variant: "raised", icon: 'check', onClick: onFinish, disabled: !canFinish }, "Finish")))));
-};
-exports.default = ConfigurationDialog;
+const ConfigurationWizard_1 = require("./ConfigurationWizard");
+exports.default = ConfigurationWizard_1.ConfigurationWizard;

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

@@ -1,6 +1,8 @@
 declare const useSelection: (columns: {
     [key: string]: any;
-}[], defaultValue: boolean, fieldName: string | null, changeListeners?: {
+}[], defaultValue: boolean | {
+    [key: string]: boolean;
+}, fieldName: string | null, changeListeners?: {
     onChange?: (column: any, flag: boolean) => void;
     onBatchChange?: (flag: boolean) => void;
 }) => {

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

@@ -5,10 +5,15 @@ const useSelection = (columns, defaultValue, fieldName, changeListeners) => {
     changeListeners = changeListeners || {};
     const onChange = changeListeners.onChange || ((column, flag) => { });
     const onBatchChange = changeListeners.onBatchChange || ((flag) => { });
-    const [selected, setSelected] = react_1.useState(columns.reduce((acc, col) => {
-        acc[col.field] = fieldName ? col[fieldName] : defaultValue;
-        return acc;
-    }, {}));
+    const [selected, setSelected] = react_1.useState(typeof defaultValue === 'object'
+        ? defaultValue
+        : columns.reduce((acc, col) => {
+            const flag = fieldName ? col[fieldName] : defaultValue;
+            if (flag) {
+                acc[col.field] = flag;
+            }
+            return acc;
+        }, {}));
     const getColumn = (field) => columns.filter((c) => c.field === field)[0];
     const result = {
         selected,

package/src/View/AdaptableWizardView/Utils.d.ts

@@ -0,0 +1 @@
+export declare const validDataSource: (dataSourceInfo: any) => boolean;

package/src/View/AdaptableWizardView/Utils.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validDataSource = void 0;
+exports.validDataSource = (dataSourceInfo) => {
+    if (!dataSourceInfo || !Array.isArray(dataSourceInfo.columns)) {
+        throw `We can't find any columns in your configuration`;
+    }
+    if (!dataSourceInfo.columns.length) {
+        throw 'You should have at least one column';
+    }
+    const allStringColumns = dataSourceInfo.columns.reduce((acc, col) => {
+        if (!col || typeof col !== 'string') {
+            return false;
+        }
+        return acc;
+    }, true);
+    if (!allStringColumns) {
+        throw `Some of your columns are not strings`;
+    }
+    if (!Array.isArray(dataSourceInfo.data)) {
+        throw `We can't find the data array in your configuration`;
+    }
+    return true;
+};

package/src/View/AdaptableWizardView/Wizard.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { Reducer, ReactNode } from 'react';
+import { AdaptableOptions } from '../../types';
+import { ConfigurationWizardProps } from './AdaptableConfigurationDialog/ConfigurationWizard';
+export interface AdaptableWizardViewProps {
+    adaptableOptions?: Omit<AdaptableOptions, 'primaryKey'> & {
+        primaryKey?: string;
+    };
+    /**
+     * Default true.
+     */
+    ddEnabled?: boolean;
+    /**
+     * When true the the configuration wizard will be shown.
+     * It will use the available information in adaptableOptions & gridOptions.
+     * This mode skips over interpreting data to figure-out columns.
+     */
+    skipToWizard?: boolean;
+    onInit: (adaptableOptions: AdaptableOptions) => any;
+    fileContentsToJSON?: (str: string) => Promise<any> | any;
+    readFile?: (file: File) => Promise<any>;
+    fileAccept?: string;
+    helpText?: React.ReactNode;
+    loadingMessage?: ReactNode;
+    defaultActionMessage?: ReactNode;
+    dragOverActionMessage?: ReactNode;
+    fetchData?: () => Promise<Record<string, any>[]>;
+    showFetchDataWizard?: boolean;
+    startSections?: ConfigurationWizardProps['startSections'];
+    prepareData?: (data: any, file?: File) => {
+        columns: string[];
+        data: any[];
+        primaryKey?: string;
+    };
+}
+export declare const initialState: Partial<WizardState>;
+export declare const reducer: Reducer<WizardState, any>;
+interface WizardState {
+    dropped: boolean;
+    error: any;
+    adaptableOptions: AdaptableOptions;
+}
+/**
+ * The wizard in a few modes:
+ *
+ * 1. Based on data:
+ * 1.1 Drag and drop a file
+ * 1.2 Fetch data from a url
+ *
+ * 2. Based on configuration:
+ * Provide a schema, on how the data looks like.
+ */
+export declare const Wizard: (props: AdaptableWizardViewProps) => JSX.Element;
+export {};

package/src/View/AdaptableWizardView/Wizard.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wizard = exports.reducer = exports.initialState = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const helper_1 = require("./helper");
+const rebass_1 = require("rebass");
+const AdaptableConfigurationDialog_1 = tslib_1.__importDefault(require("./AdaptableConfigurationDialog"));
+const FileDroppable_1 = tslib_1.__importDefault(require("../../components/FileDroppable"));
+const Utils_1 = require("./Utils");
+exports.initialState = {
+    dropped: false,
+};
+exports.reducer = (state, action) => {
+    if (action.type === 'DROPPED') {
+        return Object.assign(Object.assign({}, state), { adaptableOptions: action.payload, dropped: true, error: null });
+    }
+    if (action.type === 'ERROR') {
+        return Object.assign(Object.assign({}, state), { dropped: false, error: action.payload });
+    }
+    if (action.type === 'CANCEL') {
+        return Object.assign(Object.assign({}, state), { error: null, dropped: false });
+    }
+    return state;
+};
+/**
+ * The wizard in a few modes:
+ *
+ * 1. Based on data:
+ * 1.1 Drag and drop a file
+ * 1.2 Fetch data from a url
+ *
+ * 2. Based on configuration:
+ * Provide a schema, on how the data looks like.
+ */
+exports.Wizard = (props) => {
+    var _a;
+    const [state, dispatch] = react_1.useReducer(exports.reducer, Object.assign(Object.assign({}, exports.initialState), { adaptableOptions: props.adaptableOptions }));
+    const [droppableKey, setDroppableKey] = react_1.useState(Date.now());
+    const [isDataLoading, setIsDataLoading] = react_1.useState(false);
+    const handleDataSource = (array, file) => {
+        const dataSourceInfo = (props.prepareData || helper_1.prepareDataSource)(array, file);
+        try {
+            Utils_1.validDataSource(dataSourceInfo);
+        }
+        catch (err) {
+            return dispatch({
+                type: 'ERROR',
+                payload: `Invalid adaptable configuration - ${err}`,
+            });
+        }
+        const gridOptions = helper_1.prepareGridOptions(dataSourceInfo);
+        const adaptableOptions = Object.assign({}, props.adaptableOptions);
+        adaptableOptions.adaptableId = adaptableOptions.adaptableId || (file ? file.name : '');
+        adaptableOptions.gridOptions = gridOptions;
+        if (dataSourceInfo.primaryKey) {
+            adaptableOptions.primaryKey = dataSourceInfo.primaryKey;
+        }
+        const shouldShowWizard = props.fetchData ? Boolean(props.showFetchDataWizard) : true;
+        if (shouldShowWizard) {
+            dispatch({
+                type: 'DROPPED',
+                payload: adaptableOptions,
+            });
+        }
+        else {
+            props.onInit(adaptableOptions);
+        }
+    };
+    let wizard;
+    if (props.skipToWizard || state.dropped) {
+        wizard = (React.createElement(AdaptableConfigurationDialog_1.default, { startSections: props.startSections, adaptableOptions: state.adaptableOptions, onCancel: () => {
+                // change the file droppable component key
+                // so it's remounted and it's in the initial state
+                setDroppableKey(Date.now());
+                dispatch({
+                    type: 'CANCEL',
+                });
+            }, onFinish: (adaptableOptions) => {
+                props.onInit(adaptableOptions);
+            } }));
+    }
+    react_1.useEffect(() => {
+        if (props.fetchData) {
+            setIsDataLoading(true);
+            props.fetchData().then((data) => {
+                handleDataSource(data);
+                setIsDataLoading(false);
+            });
+        }
+    }, []);
+    const ddEnabled = (_a = props.ddEnabled) !== null && _a !== void 0 ? _a : !props.fetchData;
+    return (React.createElement(React.Fragment, null,
+        ddEnabled && (React.createElement(FileDroppable_1.default, { key: droppableKey, className: 'ab-nocode-wizard', toJSON: props.fileContentsToJSON, readFile: props.readFile, fileAccept: props.fileAccept, helpText: props.helpText, message: state.error, defaultText: props.defaultActionMessage, dragOverText: props.dragOverActionMessage, loadingText: props.loadingMessage, onDropSuccess: handleDataSource })),
+        isDataLoading && (React.createElement(rebass_1.Flex, { className: 'ab-nocode-wizard', alignItems: "center", justifyContent: "center", flexDirection: "column" }, props.loadingMessage || 'Loading ...')),
+        wizard));
+};

package/src/View/AdaptableWizardView/index.d.ts

@@ -1,25 +1,4 @@
 import * as React from 'react';
-import { ReactNode } from 'react';
-import { AdaptableOptions } from '../../AdaptableOptions/AdaptableOptions';
-interface AdaptableWizardViewProps {
-    adaptableOptions?: Omit<AdaptableOptions, 'primaryKey'> & {
-        primaryKey?: string;
-    };
-    onInit: (adaptableOptions: AdaptableOptions) => any;
-    fileContentsToJSON?: (str: string) => Promise<any> | any;
-    readFile?: (file: File) => Promise<any>;
-    fileAccept?: string;
-    helpText?: React.ReactNode;
-    loadingMessage?: ReactNode;
-    defaultActionMessage?: ReactNode;
-    dragOverActionMessage?: ReactNode;
-    fetchData?: () => Promise<Record<string, any>[]>;
-    showFetchDataWizard?: boolean;
-    prepareData?: (data: any, file?: File) => {
-        columns: string[];
-        data: any[];
-        primaryKey?: string;
-    };
-}
+import { AdaptableWizardViewProps } from './Wizard';
 declare const AdaptableWizardView: React.FunctionComponent<AdaptableWizardViewProps>;
 export default AdaptableWizardView;