@mailstep/design-system 0.4.21 → 0.5.0-beta.10

package/ui/Blocks/CommonGrid/hooks/useColumnSizes.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { CommonGridProps, GridActionsType, GridSelectorsType } from '../types';
+type ReturnProps = {
+    displayColumnsWidth: {
+        [anyColumn: string]: number;
+    };
+    totalColumnsWidth: number;
+    gridBoxRef: React.MutableRefObject<HTMLElement>;
+    handleResizeDrag: (column: string, width: number) => void;
+};
+declare const useColumnSizes: (displayColumnsDefinitions: CommonGridProps['columnsDefinitions'], storeColumnsWidth: Required<GridSelectorsType>['columnsWidth'], storeColumnsWidthVariant: GridSelectorsType['columnsWidthVariant'], setColumnWidth: Required<GridActionsType>['setColumnWidth'], columnLayout: Required<CommonGridProps>['columnLayout'], minColumnWidth?: number) => ReturnProps;
+export default useColumnSizes;

package/ui/Blocks/CommonGrid/hooks/useColumnSizes.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import sum from 'lodash/sum';
+var useColumnSizes = function (displayColumnsDefinitions, storeColumnsWidth, storeColumnsWidthVariant, setColumnWidth, columnLayout, minColumnWidth) {
+    /**
+     * decorate grid resize with layout and reset grid widths if layout changes
+     */
+    if (minColumnWidth === void 0) { minColumnWidth = 50; }
+    var handleSetColumnWidth = React.useCallback(function (columnWidth) { return setColumnWidth(columnWidth, columnLayout); }, [columnLayout, setColumnWidth]);
+    React.useEffect(function () {
+        if (storeColumnsWidthVariant != columnLayout)
+            handleSetColumnWidth(null);
+    }, [columnLayout, storeColumnsWidthVariant, handleSetColumnWidth]);
+    /**
+     * base width of each displayed column and of all displayed columns put together
+     */
+    var displayColumnsWidth = React.useMemo(function () {
+        var displayColumnsWidth = {};
+        displayColumnsDefinitions.forEach(function (column) { return (displayColumnsWidth[column.name] = (storeColumnsWidth === null || storeColumnsWidth === void 0 ? void 0 : storeColumnsWidth[column.name]) || column.flexBasis); });
+        return displayColumnsWidth;
+    }, [displayColumnsDefinitions, storeColumnsWidth]);
+    var totalColumnsWidth = React.useMemo(function () {
+        return sum(Object.values(displayColumnsWidth));
+    }, [displayColumnsWidth]);
+    /**
+     * handling of remaining space
+     */
+    // TODO optimize better
+    var gridBoxRef = React.useRef(null);
+    var testAdjustLastColumn = React.useCallback(function () {
+        var _a;
+        var _b;
+        var gridWidth = ((_b = gridBoxRef === null || gridBoxRef === void 0 ? void 0 : gridBoxRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) || null;
+        if ((columnLayout == 'normal' || columnLayout == 'sticky') && gridWidth && totalColumnsWidth < gridWidth) {
+            var lastColumn = displayColumnsDefinitions[displayColumnsDefinitions.length - 1];
+            if (lastColumn) {
+                var change = (_a = {}, _a[lastColumn.name] = displayColumnsWidth[lastColumn.name] + gridWidth - totalColumnsWidth, _a);
+                handleSetColumnWidth(change);
+            }
+        }
+    }, [columnLayout, displayColumnsDefinitions, displayColumnsWidth, gridBoxRef, handleSetColumnWidth, totalColumnsWidth]);
+    React.useEffect(function () {
+        testAdjustLastColumn();
+    }, [testAdjustLastColumn]);
+    React.useLayoutEffect(function () {
+        window.addEventListener('resize', testAdjustLastColumn);
+        return function () { return window.removeEventListener('resize', testAdjustLastColumn); };
+    }, [testAdjustLastColumn]);
+    /**
+     * resizing of columns
+     */
+    var handleResizeDrag = React.useCallback(function (columnName, width) {
+        var _a, _b;
+        var _c;
+        var i = displayColumnsDefinitions.findIndex(function (_a) {
+            var name = _a.name;
+            return name == columnName;
+        });
+        var nextColumn = displayColumnsDefinitions[i + 1];
+        if (columnLayout == 'normal' || columnLayout == 'sticky') {
+            var gridWidth = ((_c = gridBoxRef === null || gridBoxRef === void 0 ? void 0 : gridBoxRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth) || null;
+            var lastColumnWidth = displayColumnsWidth[displayColumnsDefinitions[displayColumnsDefinitions.length - 1].name];
+            var lastColumnMinWidth = (gridWidth && gridWidth - (totalColumnsWidth - lastColumnWidth)) || 0;
+            var minWidth = !nextColumn ? Math.max(lastColumnMinWidth, minColumnWidth) : minColumnWidth;
+            var origin_1 = displayColumnsWidth[columnName];
+            var newWidth = origin_1 + width < minWidth ? minWidth : origin_1 + width;
+            handleSetColumnWidth((_a = {}, _a[columnName] = newWidth, _a));
+        }
+        else if (columnLayout == 'no-scroll') {
+            var nextColumnWidth = displayColumnsWidth[nextColumn.name];
+            var origin_2 = displayColumnsWidth[columnName];
+            var addedColumnWidth = origin_2 + width < minColumnWidth ? minColumnWidth - origin_2 : width;
+            var addedNextColumnWidth = nextColumnWidth - addedColumnWidth < minColumnWidth ? nextColumnWidth - minColumnWidth : addedColumnWidth;
+            var addedWidth = Math.min(addedColumnWidth, addedNextColumnWidth);
+            var columnsWidth = (_b = {}, _b[columnName] = origin_2 + addedWidth, _b);
+            if (nextColumn) {
+                columnsWidth[nextColumn.name] = nextColumnWidth - addedWidth;
+            }
+            handleSetColumnWidth(columnsWidth);
+        }
+    }, [displayColumnsDefinitions, columnLayout, displayColumnsWidth, totalColumnsWidth, minColumnWidth, handleSetColumnWidth]);
+    return { totalColumnsWidth: totalColumnsWidth, gridBoxRef: gridBoxRef, displayColumnsWidth: displayColumnsWidth, handleResizeDrag: handleResizeDrag };
+};
+export default useColumnSizes;

package/ui/Blocks/CommonGrid/hooks/useEditReadAsColumn.d.ts

@@ -0,0 +1,15 @@
+import { CommonGridProps } from '../types';
+type ExcludedProps = 'components' | 'filters' | 'onBatchAction' | 'extraControlButtons';
+type Props = Omit<CommonGridProps, ExcludedProps>;
+type UseEditReadAsColumnHook = {
+    columnsDefinitions: CommonGridProps['columnsDefinitions'];
+    actionColumnDefinition: CommonGridProps['actionColumnDefinition'];
+    onRowAction: CommonGridProps['onRowAction'];
+};
+/**
+ * Because in new design we are displaying lot of the controlls differently, including read and edit buttons in grid,
+ * easiest way to make all the definition changes is to just overwrite the here once, instead of modifying every single grid (33 instances atm).
+ * This will also allow to easily swap back to grid provided logic, if it becomes usable for redesigned grid or if design changes again
+ * */
+declare const useEditReadAsColumn: (props: Props) => UseEditReadAsColumnHook;
+export default useEditReadAsColumn;

package/ui/Blocks/CommonGrid/hooks/useEditReadAsColumn.js

@@ -0,0 +1,70 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { useCallback, useMemo } from 'react';
+import getReadEditButtonCell from '../components/ReadEditButtonCell';
+/**
+ * Because in new design we are displaying lot of the controlls differently, including read and edit buttons in grid,
+ * easiest way to make all the definition changes is to just overwrite the here once, instead of modifying every single grid (33 instances atm).
+ * This will also allow to easily swap back to grid provided logic, if it becomes usable for redesigned grid or if design changes again
+ * */
+var useEditReadAsColumn = function (props) {
+    var onRowAction = props.onRowAction, actionColumnDefinition = props.actionColumnDefinition, columnsDefinitions = props.columnsDefinitions, onRowEditClick = props.onRowEditClick, onRowReadClick = props.onRowReadClick;
+    var modifiedActionColumnDefinition = useMemo(function () {
+        var _a;
+        if ((actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.forceCheckboxes) || ((_a = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions) === null || _a === void 0 ? void 0 : _a.length)) {
+            // note: this also removes actions, because we render action trigger outside the grid anyway
+            return { flexBasis: 40, forceCheckboxes: true, addRowNumbers: true, checkAllPosition: 'top' };
+        }
+        else if (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.addRowNumbers) {
+            return { flexBasis: 40, addRowNumbers: true };
+        }
+        else {
+            return undefined;
+        }
+    }, [actionColumnDefinition]);
+    var modifiedOnRowAction = useCallback(function (id, field, value) {
+        if (field === 'row_edit' || field === 'row_read') {
+            if (field === 'row_edit' && onRowEditClick)
+                onRowEditClick(id, value);
+            if (field === 'row_read' && onRowReadClick)
+                onRowReadClick(id, value);
+        }
+        else if (onRowAction) {
+            return onRowAction(id, field, value);
+        }
+    }, [onRowAction, onRowEditClick, onRowReadClick]);
+    // TODO Entire logic of row edit / row read need to be completely refactored.
+    var CellComponent = useMemo(function () { return getReadEditButtonCell(actionColumnDefinition); }, [actionColumnDefinition]);
+    var modifiedColumnsDefinitions = useMemo(function () {
+        if ((actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowEdit) !== undefined || (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowRead) !== undefined) {
+            return __spreadArray(__spreadArray([], columnsDefinitions, true), [
+                {
+                    name: 'sticky',
+                    flexBasis: 88,
+                    filtering: false,
+                    sorting: false,
+                    sticky: true,
+                    stickTo: 'right',
+                    alwaysOn: true,
+                    cellComponent: CellComponent,
+                },
+            ], false);
+        }
+        else {
+            return columnsDefinitions;
+        }
+    }, [CellComponent, actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowEdit, actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowRead, columnsDefinitions]);
+    return {
+        columnsDefinitions: modifiedColumnsDefinitions,
+        actionColumnDefinition: modifiedActionColumnDefinition,
+        onRowAction: modifiedOnRowAction,
+    };
+};
+export default useEditReadAsColumn;

package/ui/Blocks/CommonGrid/hooks/useGetGridHeight.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const useGetGridHeight: () => {
+    gridHeight: number | undefined;
+    gridRef: import("react").MutableRefObject<HTMLElement | null>;
+    paginationRef: import("react").MutableRefObject<HTMLElement | null>;
+};
+export default useGetGridHeight;

package/ui/Blocks/CommonGrid/hooks/useGetGridHeight.js

@@ -0,0 +1,33 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+var useGetGridHeight = function () {
+    var _a = useState(window.innerHeight), windowHeight = _a[0], setWindowHeight = _a[1];
+    var _b = useState(0), topDistance = _b[0], setTopDistance = _b[1];
+    var _c = useState(0), bottomDistance = _c[0], setBottomDistance = _c[1];
+    var gridRef = useRef(null);
+    var paginationRef = useRef(null);
+    useEffect(function () {
+        var handleResize = function () {
+            var _a, _b;
+            setTopDistance(((_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop) || 0);
+            setBottomDistance(((_b = paginationRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0);
+            setWindowHeight(window.innerHeight);
+        };
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return function () {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    var gridHeight = useMemo(function () {
+        var calculatedHeight = windowHeight - topDistance - bottomDistance;
+        if (calculatedHeight !== windowHeight && calculatedHeight > 360) {
+            return calculatedHeight - 1;
+        }
+        else {
+            // grids inside modals
+            return undefined;
+        }
+    }, [bottomDistance, topDistance, windowHeight]);
+    return { gridHeight: gridHeight, gridRef: gridRef, paginationRef: paginationRef };
+};
+export default useGetGridHeight;

package/ui/Blocks/CommonGrid/hooks/useManageColumn.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { CommonGridProps, GridActionsType, GridSelectorsType } from '../types';
+type Props = {
+    columns: CommonGridProps['columnsDefinitions'];
+    gridActions: GridActionsType;
+    gridSelectors: GridSelectorsType;
+    onClose?: () => void;
+};
+declare const useManageColumn: ({ columns, gridSelectors, gridActions, onClose }: Props) => {
+    columnsConfigValues: string[];
+    setColumnsConfigOptions: import("react").Dispatch<import("react").SetStateAction<{
+        [x: string]: {
+            isHidden?: boolean | undefined;
+        };
+    }>>;
+    onConfirmForm: () => void;
+    resetColumnConfig: () => void;
+};
+export default useManageColumn;

package/ui/Blocks/CommonGrid/hooks/useManageColumn.js

@@ -0,0 +1,34 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { useCallback, useMemo, useState } from 'react';
+var useManageColumn = function (_a) {
+    var columns = _a.columns, gridSelectors = _a.gridSelectors, gridActions = _a.gridActions, onClose = _a.onClose;
+    var resetGrid = gridActions.resetGrid, setColumnConfig = gridActions.setColumnConfig;
+    var columnConfig = gridSelectors.columnConfig;
+    var _b = useState(__assign({}, columnConfig)), columnsConfigOptions = _b[0], setColumnsConfigOptions = _b[1];
+    var columnsConfigValues = useMemo(function () {
+        return columns === null || columns === void 0 ? void 0 : columns.filter(function (column) {
+            var _a;
+            var isHidden = (_a = columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig[column.name]) === null || _a === void 0 ? void 0 : _a.isHidden;
+            return (column === null || column === void 0 ? void 0 : column.alwaysOn) || typeof isHidden === 'boolean' ? !isHidden : !(column === null || column === void 0 ? void 0 : column.defaultHidden);
+        }).map(function (column) { return column.name; });
+    }, [columnConfig, columns]);
+    var onConfirmForm = useCallback(function () {
+        (setColumnConfig === null || setColumnConfig === void 0 ? void 0 : setColumnConfig(columnsConfigOptions)) && (onClose === null || onClose === void 0 ? void 0 : onClose());
+    }, [columnsConfigOptions, onClose, setColumnConfig]);
+    var resetColumnConfig = useCallback(function () {
+        (resetGrid === null || resetGrid === void 0 ? void 0 : resetGrid()) && (onClose === null || onClose === void 0 ? void 0 : onClose());
+        setColumnsConfigOptions(columnConfig || {});
+    }, [onClose, resetGrid]);
+    return { columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, onConfirmForm: onConfirmForm, resetColumnConfig: resetColumnConfig };
+};
+export default useManageColumn;

package/ui/Blocks/CommonGrid/hooks/useRowsKeyControls.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RowProps, UxState } from '../types';
+declare const useRowsKeyControls: (rowsData: RowProps[], uxState: UxState, onUxChange?: ((uxKey: keyof UxState, uxValue: any) => void) | undefined) => (e: React.KeyboardEvent<HTMLDivElement>) => void;
+export default useRowsKeyControls;

package/ui/Blocks/CommonGrid/hooks/useRowsKeyControls.js

@@ -0,0 +1,21 @@
+import React from 'react';
+var useRowsKeyControls = function (rowsData, uxState, onUxChange) {
+    return React.useCallback(function (e) {
+        var _a, _b;
+        var selectedRowId = uxState.selectedRow;
+        if (!selectedRowId)
+            return;
+        var selectedRowIdx = rowsData.findIndex(function (row) { return row.id === selectedRowId; });
+        var previousRowId = (_a = rowsData[selectedRowIdx - 1]) === null || _a === void 0 ? void 0 : _a.id;
+        var nextRowId = (_b = rowsData[selectedRowIdx + 1]) === null || _b === void 0 ? void 0 : _b.id;
+        var isFirst = selectedRowIdx === 0;
+        var isLast = selectedRowIdx === rowsData.length - 1;
+        if (e.key === 'ArrowUp' && !isFirst)
+            onUxChange === null || onUxChange === void 0 ? void 0 : onUxChange('selectedRow', previousRowId);
+        if (e.key === 'ArrowDown' && !isLast)
+            onUxChange === null || onUxChange === void 0 ? void 0 : onUxChange('selectedRow', nextRowId);
+        if (e.key === 'Escape')
+            onUxChange === null || onUxChange === void 0 ? void 0 : onUxChange('selectedRow', null);
+    }, [uxState, rowsData, onUxChange]);
+};
+export default useRowsKeyControls;

package/ui/Blocks/CommonGrid/hooks/useUxReset.d.ts

@@ -0,0 +1,3 @@
+import { RowProps, GridActionsType, UxState } from '../types';
+declare const useUxReset: (rowsData: RowProps[], uxState: UxState, clearUxState: GridActionsType['clearUxState']) => any;
+export default useUxReset;

package/ui/Blocks/CommonGrid/hooks/useUxReset.js

@@ -0,0 +1,15 @@
+import React from 'react';
+var useUxReset = function (rowsData, uxState, clearUxState) {
+    var _a = React.useState('|'), previous = _a[0], setPrevious = _a[1];
+    React.useEffect(function () {
+        var ids = (rowsData || []).map(function (row) { return row.id; }).join('|');
+        // clear uxState if listed rows change and uxState is not clear already
+        if (ids !== previous) {
+            if (clearUxState && ((uxState.checkedRows && Object.keys(uxState.checkedRows).length) || uxState.selectedRow)) {
+                clearUxState();
+            }
+        }
+        setPrevious(ids);
+    }, [rowsData]); // eslint-disable-line react-hooks/exhaustive-deps
+};
+export default useUxReset;

package/ui/Blocks/CommonGrid/index.d.ts

@@ -0,0 +1,7 @@
+import CommonGrid from './CommonGridContainer';
+import withReduxActions from './HoC/withReduxActions';
+import reducer, { actionPrefix, createActions, createSelectors, createFullSelector, actionTypes } from './store';
+import * as Types from './types';
+import * as utils from './utils/public';
+export default CommonGrid;
+export { withReduxActions, reducer, actionPrefix, actionTypes, createActions, createSelectors, createFullSelector, Types, utils };

package/ui/Blocks/CommonGrid/index.js

@@ -0,0 +1,7 @@
+import CommonGrid from './CommonGridContainer';
+import withReduxActions from './HoC/withReduxActions';
+import reducer, { actionPrefix, createActions, createSelectors, createFullSelector, actionTypes } from './store';
+import * as Types from './types';
+import * as utils from './utils/public';
+export default CommonGrid;
+export { withReduxActions, reducer, actionPrefix, actionTypes, createActions, createSelectors, createFullSelector, Types, utils };

package/ui/Blocks/CommonGrid/store/index.d.ts

@@ -0,0 +1,58 @@
+import { FilterProps, SortingValueType, InitProps, GridState, GridSelectorsType, ColumnConfig } from '../types';
+type DefaultRootState = {};
+export type MultiState = {
+    [key: string]: GridState;
+};
+export declare const initialState: GridState;
+export declare const actionPrefix = "@store/CommonGrid";
+export declare const actionTypes: {
+    init: string;
+    clearUxState: string;
+    handleUxChange: string;
+    openConfigForm: string;
+    closeConfigForm: string;
+    setColumnConfig: string;
+    setPage: string;
+    setRowsPerPage: string;
+    resetFilters: string;
+    addFilter: string;
+    addSorting: string;
+    clearSettings: string;
+    resetGrid: string;
+    setColumnWidth: string;
+    setColumnsOrder: string;
+};
+declare const _default: (state: MultiState | undefined, action: Action) => MultiState;
+export default _default;
+export declare const createActions: (gridName: string) => {
+    init: (initProps: InitProps) => Action;
+    clearUxState: () => Action;
+    handleUxChange: (uxKey: keyof GridState['uxState'], uxValue: any) => Action;
+    openConfigForm: () => Action;
+    closeConfigForm: () => Action;
+    setColumnConfig: (columnConfig: ColumnConfig) => Action;
+    setPage: (page: number) => Action;
+    setColumnWidth: (columnsWidth: {
+        [anyKey: string]: number;
+    } | null, columnLayout: 'normal' | 'no-scroll' | 'sticky') => Action;
+    resetGrid: () => Action;
+    setColumnsOrder: (columnsOrder: string[]) => Action;
+    setRowsPerPage: (rowsPerPage: number) => Action;
+    resetFilters: () => Action;
+    addFilter: (column: string, value: any, filterProps: FilterProps) => Action;
+    addSorting: (column: string, direction: SortingValueType) => Action;
+    clearSettings: () => Action;
+};
+export declare const createSelectors: (gridName: string) => {
+    getUxState: (state: DefaultRootState) => GridState['uxState'];
+    isConfigFormOpen: (state: DefaultRootState) => GridState['isConfigFormOpen'];
+    getColumnConfig: (state: DefaultRootState) => GridState['columnConfig'];
+    getPage: (state: DefaultRootState) => GridState['page'];
+    getRowsPerPage: (state: DefaultRootState) => GridState['rowsPerPage'];
+    getFilter: (state: DefaultRootState) => GridState['filter'];
+    getSorting: (state: DefaultRootState) => GridState['sorting'];
+    getColumnsWidth: (state: DefaultRootState) => GridState['columnsWidth'];
+    getColumnsWidthVariant: (state: DefaultRootState) => GridState['columnsWidthVariant'];
+    getColumnsOrder: (state: DefaultRootState) => GridState['columnsOrder'];
+};
+export declare const createFullSelector: (gridName: string) => (state: DefaultRootState) => GridSelectorsType;

package/ui/Blocks/CommonGrid/store/index.js

@@ -0,0 +1,230 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import produce from 'immer';
+import getOr from 'lodash/fp/getOr';
+import migrateState from './migrateState';
+import { createSelector } from 'reselect';
+export var initialState = {
+    page: 1,
+    rowsPerPage: 10,
+    sorting: [],
+    isConfigFormOpen: false,
+    uxState: {
+        selectedRow: null,
+        checkedRows: {},
+    },
+    columnConfig: {},
+    filter: {},
+    columnsWidth: {},
+    columnsOrder: [],
+    defaultSorting: [],
+};
+export var actionPrefix = '@store/CommonGrid';
+export var actionTypes = {
+    init: "".concat(actionPrefix, "/init"),
+    clearUxState: "".concat(actionPrefix, "/clearUxState"),
+    handleUxChange: "".concat(actionPrefix, "/handleUxChange"),
+    openConfigForm: "".concat(actionPrefix, "/openConfigForm"),
+    closeConfigForm: "".concat(actionPrefix, "/closeConfigForm"),
+    setColumnConfig: "".concat(actionPrefix, "/setColumnConfig"),
+    setPage: "".concat(actionPrefix, "/setPage"),
+    setRowsPerPage: "".concat(actionPrefix, "/setRowsPerPage"),
+    resetFilters: "".concat(actionPrefix, "/resetFilters"),
+    addFilter: "".concat(actionPrefix, "/addFilter"),
+    addSorting: "".concat(actionPrefix, "/addSorting"),
+    clearSettings: "".concat(actionPrefix, "/clearSettings"),
+    resetGrid: "".concat(actionPrefix, "/resetGrid"),
+    setColumnWidth: "".concat(actionPrefix, "/setColumnWidth"),
+    setColumnsOrder: "".concat(actionPrefix, "/setColumnsOrder"),
+};
+var migrationChecked = false;
+export default (function (state, action) {
+    if (state === void 0) { state = {}; }
+    return produce(state, function (draft) {
+        var _a, _b;
+        var _c, _d, _e, _f, _g;
+        // version migrations
+        if (!migrationChecked && state && Object.keys(state).length > 0) {
+            draft = migrateState(draft);
+            migrationChecked = true;
+        }
+        var gridName = action.gridName;
+        if (!gridName)
+            return draft; // action does not contains gridName, skip immediatelly
+        if (!draft[gridName]) {
+            // if this grid is not yet in store, initialize
+            draft[gridName] = __assign({}, initialState);
+        }
+        if (action.type === actionTypes.init) {
+            var defaultSorting = action.initProps.defaultSorting;
+            draft[gridName].page = 1;
+            if (defaultSorting) {
+                draft[gridName].defaultSorting = defaultSorting;
+                draft[gridName].sorting = ((_c = draft[gridName].sorting) === null || _c === void 0 ? void 0 : _c.length) ? draft[gridName].sorting : defaultSorting;
+            }
+        }
+        else if (action.type === actionTypes.clearUxState) {
+            draft[gridName].uxState = initialState.uxState;
+        }
+        else if (action.type === actionTypes.handleUxChange) {
+            // for a specific row id (action.id) append uxState from action
+            draft[gridName].uxState = __assign(__assign({}, draft[gridName].uxState), (_a = {}, _a[action.uxKey] = action.uxValue, _a));
+        }
+        else if (action.type === actionTypes.openConfigForm) {
+            draft[gridName].isConfigFormOpen = true;
+        }
+        else if (action.type === actionTypes.closeConfigForm) {
+            draft[gridName].isConfigFormOpen = false;
+        }
+        else if (action.type === actionTypes.setColumnConfig) {
+            draft[gridName].columnConfig = action.columnConfig;
+            draft[gridName].isConfigFormOpen = false;
+        }
+        else if (action.type === actionTypes.resetFilters) {
+            draft[gridName].filter = {};
+        }
+        else if (action.type === actionTypes.addFilter) {
+            // append desired filter for specific column to existing filters
+            var column = action.column, value = action.value, filterProps = action.filterProps;
+            var currentFilterState = (_b = {}, _b[column] = { value: value, filterProps: filterProps }, _b);
+            draft[gridName].filter = __assign(__assign({}, draft[gridName].filter), currentFilterState);
+            draft[gridName].page = 1;
+        }
+        else if (action.type === actionTypes.addSorting) {
+            // append desired sorting for specific column to existing sortings
+            var direction = action.direction;
+            var column = action.column;
+            if (((_f = (_e = (_d = draft[gridName]) === null || _d === void 0 ? void 0 : _d.defaultSorting) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.column) === column && direction === null) {
+                // default column cannot unset itself. it would be stuck on 'desc'
+                direction = 'asc';
+            }
+            var sorting = [{ column: column, direction: direction }];
+            if (direction === null) {
+                sorting = ((_g = draft[gridName]) === null || _g === void 0 ? void 0 : _g.defaultSorting) || [];
+            }
+            draft[gridName].sorting = sorting;
+        }
+        else if (action.type === actionTypes.clearSettings) {
+            // clear grid for reuse
+            draft[gridName].page = initialState.page;
+            draft[gridName].filter = initialState.filter;
+            draft[gridName].uxState = initialState.uxState;
+        }
+        else if (action.type === actionTypes.setPage) {
+            draft[gridName].page = action.page;
+        }
+        else if (action.type === actionTypes.setRowsPerPage) {
+            draft[gridName].rowsPerPage = action.rowsPerPage;
+        }
+        else if (action.type === actionTypes.resetGrid) {
+            draft[gridName] = __assign(__assign({}, initialState), { rowsPerPage: draft[gridName].rowsPerPage });
+        }
+        else if (action.type === actionTypes.setColumnWidth) {
+            if (action.columnsWidth === null) {
+                draft[gridName].columnsWidth = initialState.columnsWidth;
+            }
+            else {
+                draft[gridName].columnsWidth = __assign(__assign({}, draft[gridName].columnsWidth), action.columnsWidth);
+            }
+            draft[gridName].columnsWidthVariant = action.columnLayout;
+        }
+        else if (action.type === actionTypes.setColumnsOrder) {
+            draft[gridName].columnsOrder = action.columnsOrder;
+        }
+        return draft;
+    });
+});
+export var createActions = function (gridName) { return ({
+    init: function (initProps) { return ({ gridName: gridName, type: actionTypes.init, initProps: initProps }); },
+    clearUxState: function () { return ({ gridName: gridName, type: actionTypes.clearUxState }); },
+    handleUxChange: function (uxKey, uxValue) { return ({
+        gridName: gridName,
+        type: actionTypes.handleUxChange,
+        uxKey: uxKey,
+        uxValue: uxValue,
+    }); },
+    openConfigForm: function () { return ({ gridName: gridName, type: actionTypes.openConfigForm }); },
+    closeConfigForm: function () { return ({ gridName: gridName, type: actionTypes.closeConfigForm }); },
+    setColumnConfig: function (columnConfig) { return ({ gridName: gridName, type: actionTypes.setColumnConfig, columnConfig: columnConfig }); },
+    setPage: function (page) { return ({ gridName: gridName, type: actionTypes.setPage, page: page }); },
+    setColumnWidth: function (columnsWidth, columnLayout) { return ({
+        gridName: gridName,
+        type: actionTypes.setColumnWidth,
+        columnsWidth: columnsWidth,
+        columnLayout: columnLayout,
+    }); },
+    resetGrid: function () { return ({ gridName: gridName, type: actionTypes.resetGrid }); },
+    setColumnsOrder: function (columnsOrder) { return ({
+        gridName: gridName,
+        type: actionTypes.setColumnsOrder,
+        columnsOrder: columnsOrder,
+    }); },
+    setRowsPerPage: function (rowsPerPage) { return ({ gridName: gridName, type: actionTypes.setRowsPerPage, rowsPerPage: rowsPerPage }); },
+    resetFilters: function () { return ({ gridName: gridName, type: actionTypes.resetFilters }); },
+    addFilter: function (column, value, filterProps) { return ({
+        gridName: gridName,
+        type: actionTypes.addFilter,
+        column: column,
+        value: value,
+        filterProps: filterProps,
+    }); },
+    addSorting: function (column, direction) { return ({
+        gridName: gridName,
+        type: actionTypes.addSorting,
+        column: column,
+        direction: direction,
+    }); },
+    clearSettings: function () { return ({ gridName: gridName, type: actionTypes.clearSettings }); },
+}); };
+export var createSelectors = function (gridName) { return ({
+    getUxState: function (state) {
+        return getOr(initialState.uxState, "commonGrid.".concat(gridName, ".uxState"), state);
+    },
+    isConfigFormOpen: function (state) {
+        return getOr(initialState.isConfigFormOpen, "commonGrid.".concat(gridName, ".isConfigFormOpen"), state);
+    },
+    getColumnConfig: function (state) {
+        return getOr(initialState.columnConfig, "commonGrid.".concat(gridName, ".columnConfig"), state);
+    },
+    getPage: function (state) { return getOr(initialState.page, "commonGrid.".concat(gridName, ".page"), state); },
+    getRowsPerPage: function (state) {
+        return getOr(initialState.rowsPerPage, "commonGrid.".concat(gridName, ".rowsPerPage"), state);
+    },
+    getFilter: function (state) { return getOr(initialState.filter, "commonGrid.".concat(gridName, ".filter"), state); },
+    getSorting: function (state) {
+        return getOr(initialState.sorting, "commonGrid.".concat(gridName, ".sorting"), state);
+    },
+    getColumnsWidth: function (state) {
+        return getOr(null, "commonGrid.".concat(gridName, ".columnsWidth"), state);
+    },
+    getColumnsWidthVariant: function (state) {
+        return getOr(undefined, "commonGrid.".concat(gridName, ".columnsWidthVariant"), state);
+    },
+    getColumnsOrder: function (state) {
+        return getOr([], "commonGrid.".concat(gridName, ".columnsOrder"), state);
+    },
+}); };
+export var createFullSelector = function (gridName) {
+    var selectors = createSelectors(gridName);
+    return createSelector(function (state) { return selectors.getUxState(state); }, function (state) { return selectors.isConfigFormOpen(state); }, function (state) { return selectors.getColumnConfig(state); }, function (state) { return selectors.getPage(state); }, function (state) { return selectors.getRowsPerPage(state); }, function (state) { return selectors.getFilter(state); }, function (state) { return selectors.getSorting(state); }, function (state) { return selectors.getColumnsWidth(state); }, function (state) { return selectors.getColumnsWidthVariant(state); }, function (state) { return selectors.getColumnsOrder(state); }, function (uxState, isConfigFormOpen, columnConfig, page, rowsPerPage, filter, sorting, columnsWidth, columnsWidthVariant, columnsOrder) { return ({
+        uxState: uxState,
+        isConfigFormOpen: isConfigFormOpen,
+        columnConfig: columnConfig,
+        page: page,
+        rowsPerPage: rowsPerPage,
+        filter: filter,
+        sorting: sorting,
+        columnsWidth: columnsWidth,
+        columnsWidthVariant: columnsWidthVariant,
+        columnsOrder: columnsOrder,
+    }); });
+};

package/ui/Blocks/CommonGrid/store/migrateState.d.ts

@@ -0,0 +1,3 @@
+import { MultiState } from './index';
+declare const _default: (draft: MultiState) => MultiState;
+export default _default;