@mailstep/design-system 0.6.2-beta.3 → 0.6.2-beta.5

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

@@ -1,37 +1,32 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var sum_1 = __importDefault(require("lodash/sum"));
+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_1.default.useCallback(function (columnWidth) { return setColumnWidth(columnWidth, columnLayout); }, [columnLayout, setColumnWidth]);
-    react_1.default.useEffect(function () {
+    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_1.default.useMemo(function () {
+    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_1.default.useMemo(function () {
-        return (0, sum_1.default)(Object.values(displayColumnsWidth));
+    var totalColumnsWidth = React.useMemo(function () {
+        return sum(Object.values(displayColumnsWidth));
     }, [displayColumnsWidth]);
     /**
      * handling of remaining space
      */
     // TODO optimize better
-    var gridBoxRef = react_1.default.useRef(null);
-    var testAdjustLastColumn = react_1.default.useCallback(function () {
+    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;
@@ -43,17 +38,17 @@ var useColumnSizes = function (displayColumnsDefinitions, storeColumnsWidth, sto
             }
         }
     }, [columnLayout, displayColumnsDefinitions, displayColumnsWidth, gridBoxRef, handleSetColumnWidth, totalColumnsWidth]);
-    react_1.default.useEffect(function () {
+    React.useEffect(function () {
         testAdjustLastColumn();
     }, [testAdjustLastColumn]);
-    react_1.default.useLayoutEffect(function () {
+    React.useLayoutEffect(function () {
         window.addEventListener('resize', testAdjustLastColumn);
         return function () { return window.removeEventListener('resize', testAdjustLastColumn); };
     }, [testAdjustLastColumn]);
     /**
      * resizing of columns
      */
-    var handleResizeDrag = react_1.default.useCallback(function (columnName, width) {
+    var handleResizeDrag = React.useCallback(function (columnName, width) {
         var _a, _b;
         var _c;
         var i = displayColumnsDefinitions.findIndex(function (_a) {
@@ -85,4 +80,4 @@ var useColumnSizes = function (displayColumnsDefinitions, storeColumnsWidth, sto
     }, [displayColumnsDefinitions, columnLayout, displayColumnsWidth, totalColumnsWidth, minColumnWidth, handleSetColumnWidth]);
     return { totalColumnsWidth: totalColumnsWidth, gridBoxRef: gridBoxRef, displayColumnsWidth: displayColumnsWidth, handleResizeDrag: handleResizeDrag };
 };
-exports.default = useColumnSizes;
+export default useColumnSizes;

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

@@ -1,4 +1,3 @@
-"use strict";
 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)) {
@@ -8,12 +7,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("react");
-var ReadEditButtonCell_1 = __importDefault(require("../components/ReadEditButtonCell"));
+import { useCallback, useMemo } from 'react';
+import getReadEditButtonCell from '../components/ReadEditButtonCell/index.js';
 /**
  * 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).
@@ -21,7 +16,7 @@ var ReadEditButtonCell_1 = __importDefault(require("../components/ReadEditButton
  * */
 var useEditReadAsColumn = function (props) {
     var onRowAction = props.onRowAction, actionColumnDefinition = props.actionColumnDefinition, columnsDefinitions = props.columnsDefinitions, onRowEditClick = props.onRowEditClick, onRowReadClick = props.onRowReadClick;
-    var modifiedActionColumnDefinition = (0, react_1.useMemo)(function () {
+    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
@@ -34,7 +29,7 @@ var useEditReadAsColumn = function (props) {
             return undefined;
         }
     }, [actionColumnDefinition]);
-    var modifiedOnRowAction = (0, react_1.useCallback)(function (id, field, value) {
+    var modifiedOnRowAction = useCallback(function (id, field, value) {
         if (field === 'row_edit' || field === 'row_read') {
             if (field === 'row_edit' && onRowEditClick)
                 onRowEditClick(id, value);
@@ -46,8 +41,8 @@ var useEditReadAsColumn = function (props) {
         }
     }, [onRowAction, onRowEditClick, onRowReadClick]);
     // TODO Entire logic of row edit / row read need to be completely refactored.
-    var CellComponent = (0, react_1.useMemo)(function () { return (0, ReadEditButtonCell_1.default)(actionColumnDefinition); }, [actionColumnDefinition]);
-    var modifiedColumnsDefinitions = (0, react_1.useMemo)(function () {
+    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), [
                 {
@@ -72,4 +67,4 @@ var useEditReadAsColumn = function (props) {
         onRowAction: modifiedOnRowAction,
     };
 };
-exports.default = useEditReadAsColumn;
+export default useEditReadAsColumn;

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

@@ -1,8 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("react");
+import { useMemo } from 'react';
 var useFloatingButton = function (hasPermission, onClick, options, onSelect) {
-    return (0, react_1.useMemo)(function () {
+    return useMemo(function () {
         if (!hasPermission)
             return;
         return {
@@ -12,4 +10,4 @@ var useFloatingButton = function (hasPermission, onClick, options, onSelect) {
         };
     }, [hasPermission, onClick, options, onSelect]);
 };
-exports.default = useFloatingButton;
+export default useFloatingButton;

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

@@ -1,13 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("react");
+import { useEffect, useMemo, useRef, useState } from 'react';
 var useGetGridHeight = function () {
-    var _a = (0, react_1.useState)(window.innerHeight), windowHeight = _a[0], setWindowHeight = _a[1];
-    var _b = (0, react_1.useState)(0), topDistance = _b[0], setTopDistance = _b[1];
-    var _c = (0, react_1.useState)(0), bottomDistance = _c[0], setBottomDistance = _c[1];
-    var gridRef = (0, react_1.useRef)(null);
-    var paginationRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(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);
@@ -20,7 +18,7 @@ var useGetGridHeight = function () {
             window.removeEventListener('resize', handleResize);
         };
     }, []);
-    var gridHeight = (0, react_1.useMemo)(function () {
+    var gridHeight = useMemo(function () {
         var calculatedHeight = windowHeight - topDistance - bottomDistance;
         if (calculatedHeight !== windowHeight && calculatedHeight > 360) {
             return calculatedHeight - 25;
@@ -32,4 +30,4 @@ var useGetGridHeight = function () {
     }, [bottomDistance, topDistance, windowHeight]);
     return { gridHeight: gridHeight, gridRef: gridRef, paginationRef: paginationRef };
 };
-exports.default = useGetGridHeight;
+export default useGetGridHeight;

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

@@ -1,32 +1,25 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGridActionTrigger = void 0;
-var react_1 = require("react");
-var find_1 = __importDefault(require("lodash/find"));
-var useGridActionTrigger = function (rowsData, uxState, actionOptions, onBatchAction) {
+import { useMemo, useCallback } from 'react';
+import find from 'lodash/find';
+export var useGridActionTrigger = function (rowsData, uxState, actionOptions, onBatchAction) {
     if (actionOptions === void 0) { actionOptions = []; }
-    var actionRows = (0, react_1.useMemo)(function () {
+    var actionRows = useMemo(function () {
         return (rowsData || []).filter(function (row) { var _a; return (_a = uxState.checkedRows) === null || _a === void 0 ? void 0 : _a[row.id]; });
     }, [uxState, rowsData]);
-    var enabledActions = (0, react_1.useMemo)(function () {
+    var enabledActions = useMemo(function () {
         var actionsOptions = actionOptions || [];
         return actionsOptions.filter(function (action) {
             if (action.isEnabled) {
                 return action.isEnabled(actionRows);
             }
             else {
-                return uxState.checkedRows && (0, find_1.default)(uxState.checkedRows, Boolean);
+                return uxState.checkedRows && find(uxState.checkedRows, Boolean);
             }
         });
     }, [uxState, actionRows, actionOptions]);
-    var handleBatchAction = (0, react_1.useCallback)(function (value) {
+    var handleBatchAction = useCallback(function (value) {
         var actionsOptions = actionOptions || [];
         var action = actionsOptions.find(function (option) { return option.value == value; });
         action && onBatchAction && onBatchAction(action, actionRows);
     }, [actionOptions, onBatchAction, actionRows]);
     return [enabledActions, handleBatchAction];
 };
-exports.useGridActionTrigger = useGridActionTrigger;

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

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,27 +9,26 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("react");
+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 = (0, react_1.useState)(__assign({}, columnConfig)), columnsConfigOptions = _b[0], setColumnsConfigOptions = _b[1];
-    var columnsConfigValues = (0, react_1.useMemo)(function () {
+    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 = (0, react_1.useCallback)(function () {
+    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 = (0, react_1.useCallback)(function () {
+    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 };
 };
-exports.default = useManageColumn;
+export default useManageColumn;

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

@@ -1,11 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+import React from 'react';
 var useRowsKeyControls = function (rowsData, uxState, onUxChange) {
-    return react_1.default.useCallback(function (e) {
+    return React.useCallback(function (e) {
         var _a, _b;
         var selectedRowId = uxState.selectedRow;
         if (!selectedRowId)
@@ -23,4 +18,4 @@ var useRowsKeyControls = function (rowsData, uxState, onUxChange) {
             onUxChange === null || onUxChange === void 0 ? void 0 : onUxChange('selectedRow', null);
     }, [uxState, rowsData, onUxChange]);
 };
-exports.default = useRowsKeyControls;
+export default useRowsKeyControls;

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

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useToggleAllCheckbox = void 0;
-var react_1 = require("react");
-var useToggleAllCheckbox = function (rowsData, uxState, handleUxChange) {
-    var allChecked = (0, react_1.useMemo)(function () { return (rowsData || []).length >= 1 && rowsData.every(function (row) { var _a; return (_a = uxState.checkedRows) === null || _a === void 0 ? void 0 : _a[row.id]; }); }, [rowsData, uxState.checkedRows]);
-    var toggleAllHandler = (0, react_1.useCallback)(function () {
+import { useMemo, useCallback } from 'react';
+export var useToggleAllCheckbox = function (rowsData, uxState, handleUxChange) {
+    var allChecked = useMemo(function () { return (rowsData || []).length >= 1 && rowsData.every(function (row) { var _a; return (_a = uxState.checkedRows) === null || _a === void 0 ? void 0 : _a[row.id]; }); }, [rowsData, uxState.checkedRows]);
+    var toggleAllHandler = useCallback(function () {
         var checkedRows = {};
         // if check all is not check, we check all
         if (!allChecked && rowsData) {
@@ -16,4 +13,3 @@ var useToggleAllCheckbox = function (rowsData, uxState, handleUxChange) {
     }, [handleUxChange, rowsData, allChecked]);
     return [allChecked, toggleAllHandler];
 };
-exports.useToggleAllCheckbox = useToggleAllCheckbox;

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

@@ -1,12 +1,7 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+import React from 'react';
 var useUxReset = function (rowsData, uxState, clearUxState) {
-    var _a = react_1.default.useState('|'), previous = _a[0], setPrevious = _a[1];
-    react_1.default.useEffect(function () {
+    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) {
@@ -17,4 +12,4 @@ var useUxReset = function (rowsData, uxState, clearUxState) {
         setPrevious(ids);
     }, [rowsData]); // eslint-disable-line react-hooks/exhaustive-deps
 };
-exports.default = useUxReset;
+export default useUxReset;

package/ui/Blocks/CommonGrid/index.js

@@ -1,51 +1,10 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAddFilter = exports.useFloatingButton = exports.Types = exports.createFullSelector = exports.createSelectors = exports.createActions = exports.actionTypes = exports.actionPrefix = exports.reducer = exports.withReduxActions = void 0;
-var CommonGridContainer_1 = __importDefault(require("./CommonGridContainer"));
-var withReduxActions_1 = __importDefault(require("./HoC/withReduxActions"));
-exports.withReduxActions = withReduxActions_1.default;
-var store_1 = __importStar(require("./store"));
-exports.reducer = store_1.default;
-Object.defineProperty(exports, "actionPrefix", { enumerable: true, get: function () { return store_1.actionPrefix; } });
-Object.defineProperty(exports, "createActions", { enumerable: true, get: function () { return store_1.createActions; } });
-Object.defineProperty(exports, "createSelectors", { enumerable: true, get: function () { return store_1.createSelectors; } });
-Object.defineProperty(exports, "createFullSelector", { enumerable: true, get: function () { return store_1.createFullSelector; } });
-Object.defineProperty(exports, "actionTypes", { enumerable: true, get: function () { return store_1.actionTypes; } });
-var useFloatingButton_1 = __importDefault(require("./hooks/useFloatingButton"));
-exports.useFloatingButton = useFloatingButton_1.default;
-var Types = __importStar(require("./types"));
-exports.Types = Types;
-__exportStar(require("./StandardButtons"), exports);
-__exportStar(require("./components/gridCells"), exports);
-var useAddFilter_1 = require("./hooks/useAddFilter");
-Object.defineProperty(exports, "useAddFilter", { enumerable: true, get: function () { return useAddFilter_1.useAddFilter; } });
-exports.default = CommonGridContainer_1.default;
+import CommonGrid from './CommonGridContainer.js';
+import withReduxActions from './HoC/withReduxActions.js';
+import reducer, { actionPrefix, createActions, createSelectors, createFullSelector, actionTypes } from './store/index.js';
+import useFloatingButton from './hooks/useFloatingButton.js';
+import * as Types from './types.js';
+export * from './StandardButtons.js';
+export * from './components/gridCells/index.js';
+import { useAddFilter } from './hooks/useAddFilter.js';
+export default CommonGrid;
+export { withReduxActions, reducer, actionPrefix, actionTypes, createActions, createSelectors, createFullSelector, Types, useFloatingButton, useAddFilter, };