@adaptabletools/adaptable 10.0.0-canary.0

package/src/View/Layout/Wizard/LayoutEditor/index.js

@@ -0,0 +1,428 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutEditor = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_beautiful_dnd_1 = require("react-beautiful-dnd");
+const rebass_1 = require("rebass");
+const Panel_1 = tslib_1.__importDefault(require("../../../../components/Panel"));
+const ColumnList_1 = require("./ColumnList");
+const CheckBox_1 = require("../../../../components/CheckBox");
+const icons_1 = require("../../../../components/icons");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
+const ColumnSortList_1 = require("./ColumnSortList");
+const RowGroupsList_1 = require("./RowGroupsList");
+const droppableIds_1 = require("./droppableIds");
+const react_1 = require("react");
+const getItemStyle_1 = require("./getItemStyle");
+const reducer_1 = require("./reducer");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const PivotList_1 = require("./PivotList");
+const ButtonInfo_1 = require("../../../Components/Buttons/ButtonInfo");
+const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
+const StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
+const verticalPanelStyle = { minHeight: 150, flex: '1 0 auto', overflow: 'auto' };
+const ListPanel = (props) => (React.createElement(Panel_1.default, Object.assign({ variant: "modern", bodyProps: { padding: 0 }, style: Object.assign(Object.assign({}, verticalPanelStyle), props.style) }, props)));
+const ColumnLabels = (props) => {
+    const { children, showBoth, showTitle, flexDirection = 'row', labels: labelsProp } = props, columnProperties = tslib_1.__rest(props, ["children", "showBoth", "showTitle", "flexDirection", "labels"]);
+    const labelNames = [
+        'Aggregatable',
+        'Filterable',
+        'Groupable',
+        'Moveable',
+        'Pivotable',
+        'Sortable',
+    ];
+    const labels = labelNames.map((name) => (columnProperties[name] ? name.charAt(0) : ''));
+    const flexProps = {
+        [flexDirection === 'row' ? 'alignItems' : 'justifyContent']: 'center',
+    };
+    return (React.createElement(rebass_1.Flex, Object.assign({ flexDirection: flexDirection }, flexProps, { width: "100%" }),
+        showTitle ? React.createElement(rebass_1.Text, { mr: 2 }, "Behaviours:") : null,
+        labels.map((l, index) => {
+            const enabled = !!l;
+            const labelName = labelNames[index];
+            const letter = labelName.charAt(0);
+            const renderBox = (enabled, key) => {
+                return (React.createElement(rebass_1.Flex, { className: "ab-LayoutEditor__LegendLetter", width: '20px', height: '20px', alignItems: "center", justifyContent: "center", fontSize: 2, ml: 2, backgroundColor: "defaultbackground", title: enabled ? labelName : `Not ${labelName}`, style: {
+                        overflow: 'hidden',
+                        cursor: 'auto',
+                        position: 'relative',
+                        fontWeight: 600,
+                        lineHeight: 0,
+                        border: `1px solid var(--ab-color-${enabled ? 'accent' : 'inputborder'})`,
+                        borderRadius: 'var(--ab__border-radius)',
+                        opacity: enabled ? 1 : 0.5,
+                    }, key: `${letter}${key ? key : ''}` },
+                    !enabled ? (React.createElement("div", { style: {
+                            background: 'currentColor',
+                            position: 'absolute',
+                            bottom: '-100%',
+                            right: 0,
+                            width: 2,
+                            height: '200%',
+                            transform: 'skewX(45deg)',
+                        } })) : null,
+                    letter));
+            };
+            return (React.createElement(rebass_1.Flex, { key: letter, mt: flexDirection === 'row' ? 0 : 2, flexDirection: "row", alignItems: "center" },
+                renderBox(enabled),
+                showBoth ? renderBox(!enabled, 'label') : null,
+                labelsProp ? (React.createElement(rebass_1.Flex, { key: "labelProps", flex: 1, ml: 2, className: "ab-LayoutEditor__LegendLetterDescription" }, labelsProp[labelName])) : null));
+        }),
+        children));
+};
+function areEqual(_prevProps, _nextProps) {
+    /*
+     * For now we don't need updates from the parent - the initial layout we receive on mount is enough
+     * so for performance reasons, skip updating this component on subsequent renders
+     *
+     */
+    return true;
+}
+exports.LayoutEditor = React.memo((props) => {
+    const { api } = props;
+    const allColumns = React.useMemo(() => api.columnApi.getColumns(), []);
+    const initialState = React.useMemo(() => reducer_1.getInitialState(props.layout), []);
+    const [state, dispatch] = React.useReducer(reducer_1.reducer, initialState);
+    const { layout } = state;
+    const allColumnsMap = React.useMemo(() => {
+        return allColumns.reduce((acc, col) => {
+            acc[col.ColumnId] = col;
+            return acc;
+        }, {});
+    }, [allColumns]);
+    const tmpMap = {};
+    const [columnList, setColumnList] = React.useState(layout.Columns.map((colId) => {
+        const col = allColumnsMap[colId];
+        tmpMap[colId] = col;
+        return col;
+    })
+        .concat(allColumns.filter((col) => {
+        return !tmpMap[col.ColumnId];
+    }))
+        .filter((c) => c));
+    const setLayout = (layout) => {
+        dispatch({
+            type: reducer_1.LayoutEditorActions.SET_LAYOUT,
+            payload: layout,
+        });
+        if (props.onLayoutChange) {
+            props.onLayoutChange(layout);
+        }
+    };
+    React.useEffect(() => {
+        if (props.layout !== state.layout) {
+            setLayout(props.layout);
+        }
+    }, [props.layout]);
+    const visibleColumnsMap = React.useMemo(() => {
+        return allColumns.reduce((acc, col) => {
+            acc[col.ColumnId] = layout.Columns.indexOf(col.ColumnId) != -1 ? col : null;
+            return acc;
+        }, {});
+    }, [layout, allColumns]);
+    const aggregationColumnsMap = React.useMemo(() => {
+        return Object.keys(layout.AggregationColumns || {}).reduce((acc, colId) => {
+            let fn = layout.AggregationColumns[colId];
+            if (typeof fn === 'boolean') {
+                fn = allColumnsMap[colId].AggregationFunction;
+            }
+            acc[colId] = fn;
+            return acc;
+        }, {});
+    }, [allColumnsMap, layout]);
+    const headerColumnsMap = React.useMemo(() => {
+        var _a;
+        return Object.keys((_a = layout.ColumnHeadersMap) !== null && _a !== void 0 ? _a : {}).reduce((acc, colId) => {
+            let customHeader = layout.ColumnHeadersMap[colId];
+            if (typeof customHeader === 'string') {
+                acc[colId] = customHeader;
+            }
+            return acc;
+        }, {});
+    }, [allColumnsMap, layout]);
+    const setColumnVisibility = (c, visible) => {
+        const newLayout = visible
+            ? Object.assign(Object.assign({}, layout), { Columns: columnList
+                    .filter((col) => visibleColumnsMap[col.ColumnId] || col.ColumnId === c.ColumnId)
+                    .map((c) => c.ColumnId) }) : Object.assign(Object.assign({}, layout), { Columns: layout.Columns.filter((colId) => colId !== c.ColumnId) });
+        const previousGroupCols = getAgGridGroupAutoColumn(layout);
+        const currentGroupCols = getAgGridGroupAutoColumn(newLayout);
+        if (previousGroupCols.length !== currentGroupCols.length) {
+            const missingGroupCols = previousGroupCols.filter((col) => !currentGroupCols.includes(col));
+            // the AG Grid group auto-columns got lost (because it's not part of the persistent column definition)
+            // Adaptable can handle this because it will be auto-generated at the next grid init (OK), but it will mess up the teamsharing revisions (NOK)
+            // therefore we insert them back
+            newLayout.Columns = [...missingGroupCols, ...newLayout.Columns];
+        }
+        setLayout(newLayout);
+    };
+    const getAgGridGroupAutoColumn = react_1.useCallback((layout) => layout.Columns.filter((columnId) => api.columnApi.isRowGroupColumn(columnId)), []);
+    const onDragEndRef = react_1.useRef({
+        columnList: () => { },
+        columnSortList: () => { },
+        rowGroupsList: () => { },
+        pivotList: () => { },
+    });
+    const onDragEnd = react_1.useCallback((result) => {
+        const { source, destination } = result;
+        if (!source || !destination) {
+            return;
+        }
+        if (source.droppableId === droppableIds_1.LayoutEditorDroppableIds.ColumnList) {
+            source.column = columnList[source.index];
+            source.columnId = source.column.ColumnId;
+        }
+        if (destination.droppableId === droppableIds_1.LayoutEditorDroppableIds.ColumnList) {
+            onDragEndRef.current.columnList(result);
+        }
+        if (destination.droppableId === droppableIds_1.LayoutEditorDroppableIds.ColumnSortList) {
+            onDragEndRef.current.columnSortList(result);
+        }
+        if (destination.droppableId === droppableIds_1.LayoutEditorDroppableIds.RowGroupsList) {
+            onDragEndRef.current.rowGroupsList(result);
+        }
+        if (destination.droppableId === droppableIds_1.LayoutEditorDroppableIds.PivotList) {
+            onDragEndRef.current.pivotList(result);
+        }
+    }, [columnList]);
+    const onDragStart = react_1.useCallback((snapshot) => {
+        const { source, draggableId } = snapshot;
+        const dragSource = source.droppableId;
+        const column = dragSource === droppableIds_1.LayoutEditorDroppableIds.ColumnList ? allColumnsMap[draggableId] : null;
+        const invalidSourceForColumns = source.droppableId !== droppableIds_1.LayoutEditorDroppableIds.ColumnList;
+        const dropDisabledOnColumns = !column || !column.Moveable || invalidSourceForColumns;
+        dispatch({
+            type: reducer_1.LayoutEditorActions.SET_DROP_DISABLED_ON_COLUMNS,
+            payload: dropDisabledOnColumns,
+        });
+        dispatch({
+            type: reducer_1.LayoutEditorActions.SET_DRAG_SOURCE,
+            payload: dragSource,
+        });
+        const columnAlreadySorted = column &&
+            layout.ColumnSorts &&
+            !!layout.ColumnSorts.filter((c) => c.ColumnId === column.ColumnId)[0];
+        const invalidSourceForSort = dragSource !== droppableIds_1.LayoutEditorDroppableIds.ColumnList &&
+            dragSource !== droppableIds_1.LayoutEditorDroppableIds.ColumnSortList;
+        const disableDropOnSort = invalidSourceForSort || columnAlreadySorted || (column && !column.Sortable);
+        dispatch({
+            type: reducer_1.LayoutEditorActions.SET_DROP_DISABLED_ON_SORT,
+            payload: !!disableDropOnSort,
+        });
+        const columnAlreadyRowGrouped = column && layout.RowGroupedColumns
+            ? !!layout.RowGroupedColumns.filter((colId) => colId === column.ColumnId)[0]
+            : false;
+        const invalidSourceForRowGroups = dragSource !== droppableIds_1.LayoutEditorDroppableIds.ColumnList &&
+            dragSource !== droppableIds_1.LayoutEditorDroppableIds.RowGroupsList;
+        const disableDropOnRowGroups = invalidSourceForRowGroups || columnAlreadyRowGrouped || (column && !column.Groupable);
+        dispatch({
+            type: reducer_1.LayoutEditorActions.SET_DROP_DISABLED_ON_ROW_GROUPS,
+            payload: !!disableDropOnRowGroups,
+        });
+        const columnAlreadyPivoted = column && layout.PivotColumns
+            ? !!layout.PivotColumns.filter((colId) => colId === column.ColumnId)[0]
+            : false;
+        const invalidSourceForPivot = dragSource !== droppableIds_1.LayoutEditorDroppableIds.ColumnList &&
+            dragSource !== droppableIds_1.LayoutEditorDroppableIds.PivotList;
+        const disableDropOnPivot = invalidSourceForPivot || columnAlreadyPivoted || (column && !column.Pivotable);
+        dispatch({
+            type: reducer_1.LayoutEditorActions.SET_DROP_DISABLED_ON_PIVOT,
+            payload: !!disableDropOnPivot,
+        });
+    }, [state, layout]);
+    const onColumnOrderChange = react_1.useCallback((columns) => {
+        setLayout(Object.assign(Object.assign({}, layout), { Columns: columns.filter((c) => visibleColumnsMap[c.ColumnId]).map((c) => c.ColumnId) }));
+        setColumnList(columns);
+    }, [visibleColumnsMap, layout]);
+    const onColumnSortsChange = react_1.useCallback((ColumnSorts) => {
+        setLayout(Object.assign(Object.assign({}, layout), { ColumnSorts }));
+    }, [layout]);
+    const onRowGroupsChange = react_1.useCallback((RowGroupedColumns) => {
+        setLayout(Object.assign(Object.assign({}, layout), { RowGroupedColumns }));
+    }, [layout]);
+    const onPivotColumnsChange = react_1.useCallback((PivotColumns) => {
+        setLayout(Object.assign(Object.assign({}, layout), { PivotColumns }));
+    }, [layout]);
+    return (React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: onDragEnd, onDragStart: onDragStart },
+        React.createElement(rebass_1.Box, { className: "ab-LayoutEditor" },
+            React.createElement(ListPanel, { header: React.createElement(rebass_1.Flex, { width: "100%", flexDirection: "row", justifyContent: "space-between", alignItems: "center" },
+                    React.createElement(rebass_1.Text, null, "Columns"),
+                    React.createElement(CheckBox_1.CheckBox, { mt: 0, mb: 0, checked: !layout.SuppressAggFuncInHeader, onChange: (checked) => {
+                            setLayout(Object.assign(Object.assign({}, layout), { SuppressAggFuncInHeader: !checked }));
+                        } }, "Show aggregation function in headers")), style: { flex: 'none' }, className: "ab-LayoutEditor__ColumnListPanel", bodyProps: { style: { display: 'flex', overflow: 'hidden' }, px: 0 } },
+                React.createElement(ColumnList_1.ColumnList, { onReady: (onDragEnd) => {
+                        onDragEndRef.current.columnList = onDragEnd;
+                    }, getItemStyle: (c, snapshot, draggableStyle) => {
+                        return getItemStyle_1.getItemStyle(c, layout, state.dragSource, snapshot, draggableStyle);
+                    }, columns: columnList, isDropDisabled: state.dropDisabledOnColumns, onColumnOrderChange: onColumnOrderChange, renderItem: (c) => {
+                        const visible = !!visibleColumnsMap[c.ColumnId];
+                        const aggregate = !!aggregationColumnsMap[c.ColumnId];
+                        // enable aggregation if there are row groups or pivoting is enabled
+                        //  const aggregateEnabled =
+                        //    (layout.RowGroupedColumns && layout.RowGroupedColumns.length) || layout.EnablePivot;
+                        // JW: Not sure we do - why not just make it always visible as we ignore if if not required.
+                        const aggregateEnabled = true;
+                        const customHeader = headerColumnsMap[c.ColumnId];
+                        const initialHeader = api.internalApi.getUserDefinedHeaderName(c.ColumnId);
+                        return (React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "stretch", "data-name": "drag-item", "data-col-id": c.ColumnId },
+                            React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", backgroundColor: "secondary", color: "text-on-secondary" },
+                                React.createElement(rebass_1.Flex, { flex: 1, alignItems: "center" },
+                                    React.createElement(rebass_1.Box, { ml: 2, mr: 2 },
+                                        React.createElement(icons_1.Icon, { name: "drag", size: 30 })),
+                                    initialHeader,
+                                    ' ',
+                                    React.createElement(ButtonInfo_1.ButtonInfo, { marginLeft: 1, style: { color: 'var(--ab-color-text-on-secondary)' }, onClick: () => {
+                                            props.api.internalApi.showPopupScreen('GridInfo', 'GridInfoPopup', {
+                                                column: c,
+                                                source: 'ContextMenu',
+                                            });
+                                        } }),
+                                    c.ColumnGroup && c.ColumnGroup.GroupCount > 1 ? (React.createElement(rebass_1.Box, { ml: 2, padding: 1, style: {
+                                            borderRadius: 'var(--ab__border-radius)',
+                                            background: 'var(--ab-color-defaultbackground)',
+                                            color: 'var(--ab-color-text-on-defaultbackground)',
+                                        } },
+                                        "Group: ",
+                                        c.ColumnGroup.FriendlyName)) : null),
+                                React.createElement(CheckBox_1.CheckBox, { title: "Visible", readOnly: !c.Hideable && visible, checked: visible, mx: 2, style: {
+                                        whiteSpace: 'nowrap',
+                                    }, onChange: setColumnVisibility.bind(null, c) }, "Visible")),
+                            React.createElement(rebass_1.Flex, { padding: 2, flexDirection: "column" },
+                                React.createElement(ColumnLabels, { showTitle: true, Sortable: c.Sortable, Filterable: c.Filterable, Moveable: c.Moveable, Pivotable: c.Pivotable, Groupable: c.Groupable, Aggregatable: c.Aggregatable }, ' '),
+                                React.createElement(rebass_1.Flex, { flexDirection: "row", mt: 2 },
+                                    React.createElement(rebass_1.Flex, { flex: 3, alignItems: "baseline" },
+                                        React.createElement(rebass_1.Text, { fontSize: 3, mr: 2 }, "Header:"),
+                                        React.createElement(Input_1.default, { width: '100%', value: customHeader || '', placeholder: "Custom Name (optional)", onChange: (event) => {
+                                                const newTextValue = event.target.value;
+                                                const columnHeaders = Object.assign({}, layout.ColumnHeadersMap) || {};
+                                                if (StringExtensions_1.default.IsNullOrEmptyOrWhiteSpace(newTextValue)) {
+                                                    delete columnHeaders[c.ColumnId];
+                                                }
+                                                else {
+                                                    columnHeaders[c.ColumnId] = newTextValue;
+                                                }
+                                                setLayout(Object.assign(Object.assign({}, layout), { ColumnHeadersMap: columnHeaders }));
+                                            } })),
+                                    React.createElement(rebass_1.Flex, { flex: 2 }, c.Aggregatable &&
+                                        c.AvailableAggregationFunctions &&
+                                        c.AvailableAggregationFunctions.length ? (React.createElement(CheckBox_1.CheckBox, { key: "checkbox", ml: 3, my: 0, disabled: !aggregateEnabled, onChange: (checked) => {
+                                            let aggCols = layout.AggregationColumns || {};
+                                            // const aggCols = new Set(layout.AggregationColumns);
+                                            if (checked) {
+                                                let aggFunc = c.AggregationFunction;
+                                                if (!aggFunc && c.AvailableAggregationFunctions) {
+                                                    aggFunc = c.AvailableAggregationFunctions[0];
+                                                }
+                                                aggCols[c.ColumnId] = aggFunc;
+                                            }
+                                            else {
+                                                delete aggCols[c.ColumnId];
+                                                if (!Object.keys(aggCols).length) {
+                                                    aggCols = null;
+                                                }
+                                            }
+                                            setLayout(Object.assign(Object.assign({}, layout), { AggregationColumns: aggCols }));
+                                        }, checked: aggregate },
+                                        "Aggregate",
+                                        React.createElement(DropdownButton_1.default, { style: {
+                                                visibility: aggregate ? 'visible' : 'hidden',
+                                            }, ml: 2, padding: 0, columns: ['label'], variant: "text", items: c.AvailableAggregationFunctions.map((fnName) => {
+                                                return {
+                                                    label: fnName,
+                                                    onClick: () => {
+                                                        const aggCols = layout.AggregationColumns;
+                                                        if (!aggCols) {
+                                                            return;
+                                                        }
+                                                        aggCols[c.ColumnId] = fnName;
+                                                        setLayout(Object.assign(Object.assign({}, layout), { AggregationColumns: aggCols }));
+                                                    },
+                                                };
+                                            }) }, aggregationColumnsMap[c.ColumnId]))) : null)))));
+                    } })),
+            React.createElement(ListPanel, { header: "Sorting", className: "ab-LayoutEditor__ColumnSortListPanel" },
+                React.createElement(ColumnSortList_1.ColumnSortList, { columnSorts: layout.ColumnSorts, onColumnSortsChange: onColumnSortsChange, isDropDisabled: state.dropDisabledOnSort, onReady: (dragEnd) => {
+                        onDragEndRef.current.columnSortList = dragEnd;
+                    }, getItemStyle: (columnId, snapshot, draggableStyle) => {
+                        return getItemStyle_1.getItemStyle(allColumnsMap[columnId], layout, state.dragSource, snapshot, draggableStyle);
+                    }, renderItem: (c, clear, toggleSort) => {
+                        const column = allColumnsMap[c.ColumnId];
+                        if (!column) {
+                            return null; //TODO fix this
+                        }
+                        return (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", "data-name": "drag-item" },
+                            React.createElement(rebass_1.Box, { ml: 2, mr: 3 },
+                                React.createElement(icons_1.Icon, { name: "drag", size: 30 })),
+                            React.createElement(rebass_1.Flex, { flex: "1", flexDirection: "row", alignItems: "center" },
+                                column.FriendlyName,
+                                " [",
+                                c.SortOrder,
+                                "]"),
+                            React.createElement(SimpleButton_1.default, { variant: "raised", style: { cursor: 'pointer' }, mr: 3, onClick: (e) => {
+                                    e.stopPropagation();
+                                    toggleSort();
+                                } },
+                                React.createElement(icons_1.Icon, { name: c.SortOrder === 'Asc' ? 'sort-asc' : 'sort-desc' })),
+                            React.createElement(SimpleButton_1.default, { variant: "text", onClick: (e) => {
+                                    e.stopPropagation();
+                                    clear();
+                                } },
+                                React.createElement(icons_1.Icon, { name: "clear" }))));
+                    } })),
+            React.createElement(ListPanel, { header: "Row Groups", className: "ab-LayoutEditor__RowGroupsListPanel" },
+                React.createElement(RowGroupsList_1.RowGroupsList, { rowGroups: layout.RowGroupedColumns, onRowGroupsChange: onRowGroupsChange, isDropDisabled: state.dropDisabledOnRowGroups, onReady: (dragEnd) => {
+                        onDragEndRef.current.rowGroupsList = dragEnd;
+                    }, getItemStyle: (columnId, snapshot, draggableStyle) => {
+                        return getItemStyle_1.getItemStyle(allColumnsMap[columnId], layout, state.dragSource, snapshot, draggableStyle);
+                    }, renderItem: (colId, clear) => {
+                        const column = allColumnsMap[colId];
+                        return (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", "data-name": "drag-item" },
+                            React.createElement(rebass_1.Box, { ml: 2, mr: 3 },
+                                React.createElement(icons_1.Icon, { name: "drag", size: 30 })),
+                            React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", flex: 1 }, column.FriendlyName),
+                            React.createElement(SimpleButton_1.default, { variant: "text", onClick: (e) => {
+                                    e.stopPropagation();
+                                    clear();
+                                } },
+                                React.createElement(icons_1.Icon, { name: "clear" }))));
+                    } })),
+            React.createElement(ListPanel, { className: "ab-LayoutEditor__PivotListPanel", header: React.createElement(rebass_1.Flex, { width: "100%", flexDirection: "row", justifyContent: "space-between", alignItems: "center" },
+                    React.createElement(rebass_1.Text, null, "Pivoted Columns"),
+                    React.createElement(CheckBox_1.CheckBox, { mt: 0, mb: 0, checked: layout.EnablePivot, onChange: (checked) => {
+                            setLayout(Object.assign(Object.assign({}, layout), { EnablePivot: checked }));
+                        } }, "Enable")), bodyProps: { padding: 0 } },
+                React.createElement(PivotList_1.PivotList, { pivotColumns: layout.PivotColumns, onPivotColumnsChange: onPivotColumnsChange, isDropDisabled: state.dropDisabledOnPivot, onReady: (dragEnd) => {
+                        onDragEndRef.current.pivotList = dragEnd;
+                    }, renderItem: (colId, clear) => {
+                        const column = allColumnsMap[colId];
+                        return (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", "data-name": "drag-item" },
+                            React.createElement(rebass_1.Box, { ml: 2, mr: 3 },
+                                React.createElement(icons_1.Icon, { name: "drag", size: 30 })),
+                            React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", flex: 1 }, column.FriendlyName),
+                            React.createElement(SimpleButton_1.default, { variant: "text", onClick: (e) => {
+                                    e.stopPropagation();
+                                    clear();
+                                } },
+                                React.createElement(icons_1.Icon, { name: "clear" }))));
+                    }, getItemStyle: (columnId, snapshot, draggableStyle) => {
+                        return getItemStyle_1.getItemStyle(allColumnsMap[columnId], layout, state.dragSource, snapshot, draggableStyle);
+                    } })),
+            React.createElement(ListPanel, { header: "Legend: Column Behaviour", className: "ab-LayoutEditor__LegendPanel", style: {
+                    gridRow: '1 /1',
+                    gridColumn: '3/3',
+                }, bodyProps: {
+                    padding: 2,
+                    backgroundColor: 'defaultbackground',
+                    color: 'text-on-defaultbackground',
+                } },
+                React.createElement(ColumnLabels, { flexDirection: "column", showBoth: true, labels: {
+                        Sortable: 'Able to be sorted',
+                        Filterable: 'Can be filtered',
+                        Aggregatable: 'Shows aggregations (in grouped rows)',
+                        Groupable: 'Can form a row group',
+                        Moveable: 'Is draggable and movable',
+                        Pivotable: 'Eligible for pivoting',
+                    }, Sortable: true, Filterable: true, Moveable: true, Pivotable: true, Groupable: true, Aggregatable: true })))));
+}, areEqual);

package/src/View/Layout/Wizard/LayoutEditor/reducer.d.ts

@@ -0,0 +1,28 @@
+import { Layout } from '../../../../PredefinedConfig/LayoutState';
+import { LayoutEditorDroppableIds } from './droppableIds';
+export declare type LayoutEditorState = {
+    dropDisabledOnColumns: boolean;
+    dropDisabledOnSort: boolean;
+    dropDisabledOnRowGroups: boolean;
+    dropDisabledOnPivot: boolean;
+    dragSource: LayoutEditorDroppableIds;
+    layout: Layout;
+};
+export declare const getInitialState: (layout: Layout) => {
+    dropDisabledOnColumns: boolean;
+    dropDisabledOnSort: boolean;
+    dropDisabledOnRowGroups: boolean;
+    dropDisabledOnPivot: boolean;
+    dragSource: LayoutEditorDroppableIds;
+    layout: Layout;
+};
+export declare type LayoutEditorAction = any;
+export declare const reducer: (state: LayoutEditorState, action: LayoutEditorAction) => LayoutEditorState;
+export declare enum LayoutEditorActions {
+    SET_LAYOUT = "SET_LAYOUT",
+    SET_DRAG_SOURCE = "SET_DRAG_SOURCE",
+    SET_DROP_DISABLED_ON_COLUMNS = "SET_DROP_DISABLED_ON_COLUMNS",
+    SET_DROP_DISABLED_ON_SORT = "SET_DROP_DISABLED_ON_SORT",
+    SET_DROP_DISABLED_ON_ROW_GROUPS = "SET_DROP_DISABLED_ON_ROW_GROUPS",
+    SET_DROP_DISABLED_ON_PIVOT = "SET_DROP_DISABLED_ON_PIVOT"
+}

package/src/View/Layout/Wizard/LayoutEditor/reducer.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutEditorActions = exports.reducer = exports.getInitialState = void 0;
+const droppableIds_1 = require("./droppableIds");
+exports.getInitialState = (layout) => {
+    return {
+        dropDisabledOnColumns: false,
+        dropDisabledOnSort: false,
+        dropDisabledOnRowGroups: false,
+        dropDisabledOnPivot: false,
+        dragSource: droppableIds_1.LayoutEditorDroppableIds.None,
+        layout,
+    };
+};
+exports.reducer = (state, action) => {
+    if (action.type === LayoutEditorActions.SET_DRAG_SOURCE) {
+        return Object.assign(Object.assign({}, state), { dragSource: action.payload });
+    }
+    if (action.type === LayoutEditorActions.SET_DROP_DISABLED_ON_COLUMNS) {
+        return Object.assign(Object.assign({}, state), { dropDisabledOnColumns: action.payload });
+    }
+    if (action.type === LayoutEditorActions.SET_DROP_DISABLED_ON_SORT) {
+        return Object.assign(Object.assign({}, state), { dropDisabledOnSort: action.payload });
+    }
+    if (action.type === LayoutEditorActions.SET_DROP_DISABLED_ON_ROW_GROUPS) {
+        return Object.assign(Object.assign({}, state), { dropDisabledOnRowGroups: action.payload });
+    }
+    if (action.type === LayoutEditorActions.SET_DROP_DISABLED_ON_PIVOT) {
+        return Object.assign(Object.assign({}, state), { dropDisabledOnPivot: action.payload });
+    }
+    if (action.type === LayoutEditorActions.SET_LAYOUT) {
+        return Object.assign(Object.assign({}, state), { layout: action.payload });
+    }
+    return state;
+};
+var LayoutEditorActions;
+(function (LayoutEditorActions) {
+    LayoutEditorActions["SET_LAYOUT"] = "SET_LAYOUT";
+    LayoutEditorActions["SET_DRAG_SOURCE"] = "SET_DRAG_SOURCE";
+    LayoutEditorActions["SET_DROP_DISABLED_ON_COLUMNS"] = "SET_DROP_DISABLED_ON_COLUMNS";
+    LayoutEditorActions["SET_DROP_DISABLED_ON_SORT"] = "SET_DROP_DISABLED_ON_SORT";
+    LayoutEditorActions["SET_DROP_DISABLED_ON_ROW_GROUPS"] = "SET_DROP_DISABLED_ON_ROW_GROUPS";
+    LayoutEditorActions["SET_DROP_DISABLED_ON_PIVOT"] = "SET_DROP_DISABLED_ON_PIVOT";
+})(LayoutEditorActions = exports.LayoutEditorActions || (exports.LayoutEditorActions = {}));

package/src/View/Layout/Wizard/LayoutEditor/utils.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+export declare type DraggableSnapshot = {
+    isDragging: boolean;
+    draggingOver?: string;
+};
+export declare type DroppableSnapshot = {
+    isDraggingOver: boolean;
+    draggingOverWith?: string;
+};
+export declare const getListStyle: (droppableSnapshot: DroppableSnapshot) => CSSProperties;

package/src/View/Layout/Wizard/LayoutEditor/utils.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getListStyle = void 0;
+exports.getListStyle = (droppableSnapshot) => {
+    const style = {
+        width: '100%',
+        height: '100%',
+    };
+    if (droppableSnapshot.isDraggingOver) {
+        style.background = 'var(--ab-color-primary)';
+    }
+    return style;
+};

package/src/View/Layout/Wizard/LayoutEditorWizard.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { AdaptableWizardStep, AdaptableWizardStepProps } from '../../Wizard/Interface/IAdaptableWizard';
+import { Layout } from '../../../PredefinedConfig/LayoutState';
+export interface LayoutEditorWizardProps extends AdaptableWizardStepProps<Layout> {
+    Layouts: Layout[];
+}
+export interface LayoutEditorWizardState {
+    layoutName: string;
+    layout: Layout;
+    errorMessage: string;
+}
+export declare class LayoutEditorWizard extends React.Component<LayoutEditorWizardProps, LayoutEditorWizardState> implements AdaptableWizardStep {
+    constructor(props: LayoutEditorWizardProps);
+    render(): any;
+    onLayoutNameChange: (event: React.FormEvent<any>) => void;
+    getErrorMessage: ({ layout, layoutName }: {
+        layout: Layout;
+        layoutName: string;
+    }) => string;
+    updateLayout: (layout: Partial<Layout>) => void;
+    onLayoutChange: (layout: Layout) => void;
+    getLayout: () => {
+        Name: string;
+        Columns: string[];
+        ColumnWidthMap?: {
+            [columnId: string]: number;
+        };
+        ColumnSorts?: import("../../../types").ColumnSort[];
+        RowGroupedColumns?: string[];
+        ExpandedRowGroupValues?: any[];
+        AggregationColumns?: Record<string, string | true>;
+        EnablePivot?: boolean;
+        PivotColumns?: string[];
+        PinnedColumnsMap?: {
+            [columnId: string]: "left" | "right";
+        };
+        AutoSave?: boolean;
+        ColumnHeadersMap?: {
+            [columnId: string]: string;
+        };
+        SuppressAggFuncInHeader?: boolean;
+        Uuid?: string;
+        Source?: "Config" | "User";
+        IsReadOnly?: boolean;
+    };
+    canNext(): boolean;
+    canBack(): boolean;
+    next(): void;
+    back(): void;
+    getIndexStepIncrement(): number;
+    getIndexStepDecrement(): number;
+}