@adaptabletools/adaptable 12.1.6 → 12.1.8-canary.1

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

@@ -1,367 +0,0 @@
-"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 ColumnLabels_1 = require("./ColumnLabels");
-const verticalPanelStyle = {
-    minHeight: 150,
-    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)));
-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.isAutoRowGroupColumn(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]);
-    const showGridInfoLink = props.api.internalApi
-        .getEntitlementService()
-        .isGridInfoSectionVisible('ColumnInfo');
-    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.columnApi.getFriendlyNameFromColumnId(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, { alignItems: "center" },
-                                    React.createElement(rebass_1.Box, { ml: 2, mr: 2 },
-                                        React.createElement(icons_1.Icon, { name: "drag", size: 30 })),
-                                    initialHeader,
-                                    ' ',
-                                    showGridInfoLink && (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_1.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")), 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);
-                    } })))));
-}, areEqual);

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

@@ -1,28 +0,0 @@
-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

@@ -1,46 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LayoutEditorActions = exports.reducer = exports.getInitialState = void 0;
-const droppableIds_1 = require("./droppableIds");
-const getInitialState = (layout) => {
-    return {
-        dropDisabledOnColumns: false,
-        dropDisabledOnSort: false,
-        dropDisabledOnRowGroups: false,
-        dropDisabledOnPivot: false,
-        dragSource: droppableIds_1.LayoutEditorDroppableIds.None,
-        layout,
-    };
-};
-exports.getInitialState = getInitialState;
-const 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;
-};
-exports.reducer = reducer;
-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

@@ -1,10 +0,0 @@
-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

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

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

@@ -1,30 +0,0 @@
-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[];
-    onLayoutChange?: (layout: Layout) => void;
-}
-export interface LayoutEditorWizardState {
-    layoutName: string;
-    layout: Layout;
-    errorMessage: string;
-}
-export declare class LayoutEditorWizard extends React.Component<any, any> 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: () => any;
-    canNext(): boolean;
-    canBack(): boolean;
-    next(): void;
-    back(): void;
-    getIndexStepIncrement(): number;
-    getIndexStepDecrement(): number;
-}

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

@@ -1,132 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LayoutEditorWizard = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const WizardPanel_1 = tslib_1.__importDefault(require("../../../components/WizardPanel"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
-const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-const LayoutEditor_1 = require("./LayoutEditor");
-const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
-const AdaptablePopover_1 = require("../../AdaptablePopover");
-const rebass_1 = require("rebass");
-const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
-const ColumnLabels_1 = require("./LayoutEditor/ColumnLabels");
-const CheckBox_1 = require("../../../components/CheckBox");
-class LayoutEditorWizard extends React.Component {
-    constructor(props) {
-        super(props);
-        this.onLayoutNameChange = (event) => {
-            const Name = event.target.value;
-            const ErrorMessage = this.getErrorMessage(Object.assign(Object.assign({}, this.state), { layoutName: Name }));
-            this.updateLayout({ Name });
-            this.setState({
-                layoutName: Name,
-                errorMessage: ErrorMessage || null,
-            }, () => {
-                this.props.updateGoBackState();
-            });
-        };
-        this.getErrorMessage = ({ layout, layoutName }) => {
-            const Exists = this.props.Layouts.find((l) => l.Name === layoutName && l.Uuid !== layout.Uuid);
-            let ErrorMessage = Exists
-                ? 'A Layout already exists with that name'
-                : !layoutName
-                    ? 'Layout name cannot be blank'
-                    : null;
-            // if (!ErrorMessage && !layout.Columns.length) {
-            //   ErrorMessage = 'A Layout must have at least one visible column';
-            // }
-            return ErrorMessage;
-        };
-        this.updateLayout = (layout) => {
-            var _a, _b;
-            const updatedLayout = Object.assign(Object.assign({}, this.state.layout), layout);
-            Object.assign(this.props.data, updatedLayout);
-            this.setState({
-                layout: updatedLayout,
-            });
-            (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onLayoutChange) === null || _b === void 0 ? void 0 : _b.call(_a, updatedLayout);
-        };
-        this.onLayoutChange = (layout) => {
-            layout = Object.assign(Object.assign({}, layout), { Name: this.state.layoutName });
-            this.updateLayout(layout);
-            this.setState({
-                layout,
-                errorMessage: this.getErrorMessage({
-                    layout,
-                    layoutName: this.state.layoutName,
-                }),
-            }, () => {
-                this.props.updateGoBackState();
-            });
-        };
-        this.getLayout = () => {
-            return Object.assign(Object.assign({}, this.state.layout), { Name: this.state.layoutName });
-        };
-        this.state = {
-            layout: props.data,
-            layoutName: props.data.Name,
-            errorMessage: null,
-        };
-    }
-    render() {
-        const behaviourHeader = 'Column ' + this.props.api.internalApi.getCorrectEnglishVariant('Behaviours');
-        return (React.createElement("div", { "data-name": 'layout-editor', style: { height: '100%' } },
-            React.createElement(WizardPanel_1.default, { bodyProps: { padding: 0 } },
-                React.createElement(rebass_1.Flex, null,
-                    React.createElement(rebass_1.Box, { width: 350 },
-                        React.createElement(FormLayout_1.default, { columns: ['label', 'children'], m: 2 },
-                            React.createElement(FormLayout_1.FormRow, { label: "Layout Name" },
-                                React.createElement(Input_1.default, { value: this.state.layoutName, "data-name": "layout-editor-name-input", width: "100%", autoFocus: true, placeholder: "Type a name", onChange: this.onLayoutNameChange }),
-                                ' '),
-                            this.state.errorMessage ? (React.createElement(FormLayout_1.FormRow, { label: "" },
-                                React.createElement(ErrorBox_1.default, null, this.state.errorMessage))) : null)),
-                    React.createElement(rebass_1.Flex, { flex: 1, alignItems: "center", justifyContent: "flex-end" },
-                        React.createElement(CheckBox_1.CheckBox, { mt: 0, mb: 0, checked: this.state.layout.EnablePivot, onChange: (checked) => {
-                                this.updateLayout({ EnablePivot: checked });
-                            } }, "Enable Pivot Layout")),
-                    React.createElement(rebass_1.Flex, { width: 120, pr: 2, alignItems: "center", justifyContent: "end" },
-                        React.createElement(rebass_1.Text, { mr: 2 }, "Legend"),
-                        React.createElement(AdaptablePopover_1.AdaptablePopover, { popoverMinWidth: 200, bodyText: [
-                                React.createElement(Panel_1.default, { variant: "modern", header: behaviourHeader, className: "ab-LayoutEditor__LegendPanel", style: {
-                                        gridRow: '1 /1',
-                                        gridColumn: '3/3',
-                                    }, bodyProps: {
-                                        padding: 2,
-                                        backgroundColor: 'defaultbackground',
-                                        color: 'text-on-defaultbackground',
-                                    } },
-                                    React.createElement(ColumnLabels_1.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 })),
-                            ] }))),
-                React.createElement(LayoutEditor_1.LayoutEditor, { api: this.props.api, layout: this.state.layout, onLayoutChange: this.onLayoutChange }))));
-    }
-    canNext() {
-        return !!this.state.layoutName && !this.state.errorMessage;
-    }
-    canBack() {
-        return true;
-    }
-    next() {
-        Object.keys(this.props.data).forEach((key) => {
-            delete this.props.data[key];
-        });
-        const layout = this.getLayout();
-        Object.assign(this.props.data, layout);
-    }
-    back() { }
-    getIndexStepIncrement() {
-        return 1;
-    }
-    getIndexStepDecrement() {
-        return 1;
-    }
-}
-exports.LayoutEditorWizard = LayoutEditorWizard;

package/src/components/ExpressionEditor/editorButtonsReactive.d.ts

@@ -1,2 +0,0 @@
-import { OperatorEditorButton } from './BaseEditorInput';
-export declare const editorButtonsReactive: OperatorEditorButton[];