@mailstep/design-system 0.7.8-beta.1 → 0.7.8-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.8-beta.1",
+  "version": "0.7.8-beta.5",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Pagination } from '../../Elements/Pagination';
 import HidePrint from '../HidePrint/HidePrint';
 import { useModal } from '../Modal/hooks/useModal';
@@ -36,23 +36,14 @@ import { usePresetState } from './hooks/usePresetsState';
 import { x } from '@xstyled/styled-components';
 import { CommonGridWithStyles, BottomWrapper, CommonGridWrap, ContentContainer, StyledButtonStrip } from './styles';
 import { getFilters } from './utils';
+import { useGridAutoHeight } from './hooks/useGridAutoHeight';
 var CommonGridContainer = function (props) {
     var _a;
     var _b = props.optimizeFilters, optimizeFilters = _b === void 0 ? false : _b, extraControlButtons = props.extraControlButtons, onBatchAction = props.onBatchAction, processCheckedValues = props.processCheckedValues, processCheckedValuesTitle = props.processCheckedValuesTitle, hideControlButtons = props.hideControlButtons, quickFilter = props.quickFilter, floatingButtonProps = props.floatingButtonProps, queryRowsParam = props.queryRowsParam, customPaginationHandler = props.customPaginationHandler, _c = props.autoHeight, autoHeight = _c === void 0 ? true : _c, gridName = props.gridName, _d = props.withPresets, withPresets = _d === void 0 ? true : _d, getRowsPerPage = props.getRowsPerPage, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "quickFilter", "floatingButtonProps", "queryRowsParam", "customPaginationHandler", "autoHeight", "gridName", "withPresets", "getRowsPerPage"]);
     var gridActions = passDownProps.gridActions, gridSelectors = passDownProps.gridSelectors, rowsData = passDownProps.rowsData, actionColumnDefinition = passDownProps.actionColumnDefinition;
     var _e = useState(false), displayManageColumnButton = _e[0], setDisplayManageColumnButton = _e[1];
     var _f = useGetGridHeight(), gridHeight = _f.gridHeight, gridRef = _f.gridRef, paginationRef = _f.paginationRef;
-    useEffect(function () {
-        var _a;
-        if (!queryRowsParam && gridHeight && gridHeight > 0) {
-            // @TODO this move to mailship
-            // const numberOfRows = Math.max(Math.floor(gridHeight / rowHeight - 2), GRID_MIN_ROWS)
-            var numberOfRows = getRowsPerPage === null || getRowsPerPage === void 0 ? void 0 : getRowsPerPage(gridHeight);
-            if (autoHeight && numberOfRows) {
-                (_a = gridActions.setRowsPerPage) === null || _a === void 0 ? void 0 : _a.call(gridActions, numberOfRows);
-            }
-        }
-    }, [gridHeight, gridActions, queryRowsParam]);
+    useGridAutoHeight({ gridHeight: gridHeight, autoHeight: autoHeight, gridActions: gridActions, queryRowsParam: queryRowsParam, rowsPerPage: gridSelectors.rowsPerPage, getRowsPerPage: getRowsPerPage });
     var modifiedPassDownProps = useEditReadAsColumn(passDownProps);
     var filters = useMemo(function () { return getFilters(optimizeFilters); }, [optimizeFilters]);
     var columns = modifiedPassDownProps.columnsDefinitions;

package/ui/Blocks/CommonGrid/components/TablePagination/TablePagination.js

@@ -2,33 +2,42 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import Select from '../../../../Elements/Select/Select';
 import { Paragraph4 } from '../../../../Elements/Typography/Typography';
+import { rowsPerPageOptions } from '../../utils/constants';
 import { Trans } from '@lingui/react';
 import styled, { x } from '@xstyled/styled-components';
 var Wrapper = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  & > :nth-child(2) {\n    display: none;\n    @media (min-width: 1024px) {\n      display: block;\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  & > :nth-child(2) {\n    display: none;\n    @media (min-width: 1024px) {\n      display: block;\n    }\n  }\n"])));
 var StyledSelect = styled(x.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-right: 15px;\n  @media (min-width: 1024px) {\n    margin-right: 8px;\n  }\n"], ["\n  margin-right: 15px;\n  @media (min-width: 1024px) {\n    margin-right: 8px;\n  }\n"])));
-var rowsPerPageOptions = [
-    { value: 10, label: 10 },
-    { value: 20, label: 20 },
-    { value: 50, label: 50 },
-    { value: 100, label: 100 },
-    { value: 'auto', label: 'auto' },
-];
 var TablePagination = function (_a) {
     var gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, getRowsPerPage = _a.getRowsPerPage, gridHeight = _a.gridHeight, customPaginationHandler = _a.customPaginationHandler;
     var setRowsPerPage = gridActions.setRowsPerPage;
     var page = gridSelectors.page;
+    var rowsPerPage = gridSelectors.rowsPerPage;
+    var rowsPerPageAuto = useMemo(function () { return getRowsPerPage && getRowsPerPage(gridHeight); }, [getRowsPerPage, gridHeight]);
     var onSetRowsPerPage = useCallback(function (option) {
         if (option && 'value' in option) {
-            var value = option.value !== 'auto' ? Number(option.value) : ((getRowsPerPage === null || getRowsPerPage === void 0 ? void 0 : getRowsPerPage(gridHeight)) || 10); // @TODO use 10 from constants
-            setRowsPerPage === null || setRowsPerPage === void 0 ? void 0 : setRowsPerPage(Number(option.value));
-            customPaginationHandler === null || customPaginationHandler === void 0 ? void 0 : customPaginationHandler(page !== null && page !== void 0 ? page : 1, Number(option.value));
+            var value = Number(option.value);
+            if (option.value === 'auto') {
+                value = (getRowsPerPage === null || getRowsPerPage === void 0 ? void 0 : getRowsPerPage(gridHeight)) || 10; // @TODO use 10 from constants
+            }
+            setRowsPerPage === null || setRowsPerPage === void 0 ? void 0 : setRowsPerPage(value);
+            customPaginationHandler === null || customPaginationHandler === void 0 ? void 0 : customPaginationHandler(page !== null && page !== void 0 ? page : 1, value);
         }
     }, [setRowsPerPage, page, customPaginationHandler]);
-    return (_jsxs(Wrapper, { children: [_jsx(StyledSelect, { minWidth: "80px", children: _jsx(Select, { name: "rowsPerPage", menuPlacement: "top", style: "gridFilter", placeholder: "".concat(gridSelectors.rowsPerPage), options: rowsPerPageOptions, value: gridSelectors.rowsPerPage, isDarkPlaceholderText: true, onChange: onSetRowsPerPage }) }), _jsx(Paragraph4, { variant: "normal", mr: "20px", children: _jsx(Trans, { id: "dataGrid.resultsPerPage", message: "Results per page" }) })] }));
+    var options = useMemo(function () { return (rowsPerPageAuto ? __spreadArray(__spreadArray([], rowsPerPageOptions, true), [{ value: rowsPerPageAuto, label: rowsPerPageAuto }], false) : rowsPerPageOptions); }, [rowsPerPageAuto, rowsPerPageAuto]);
+    return (_jsxs(Wrapper, { children: [_jsx(StyledSelect, { minWidth: "80px", children: _jsx(Select, { name: "rowsPerPage", menuPlacement: "top", style: "gridFilter", placeholder: "".concat(rowsPerPage), options: options, value: rowsPerPage, isDarkPlaceholderText: true, onChange: onSetRowsPerPage }) }), _jsx(Paragraph4, { variant: "normal", mr: "20px", children: _jsx(Trans, { id: "dataGrid.resultsPerPage", message: "Results per page" }) })] }));
 };
 export default TablePagination;
 var templateObject_1, templateObject_2;

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

@@ -0,0 +1,12 @@
+import { GridActionsType } from '../types';
+type Props = {
+    gridHeight?: number;
+    gridActions: GridActionsType;
+    queryRowsParam?: number | string;
+    getRowsPerPage?: (height?: number) => number;
+    autoHeight: boolean;
+    rowsPerPage?: number;
+};
+type HookType = (props: Props) => void;
+export declare const useGridAutoHeight: HookType;
+export {};

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

@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+// import { GRID_MIN_ROWS, rowHeight } from './utils'
+import { rowsPerPageOptions } from '../utils/constants';
+export var useGridAutoHeight = function (_a) {
+    var gridHeight = _a.gridHeight, gridActions = _a.gridActions, queryRowsParam = _a.queryRowsParam, rowsPerPage = _a.rowsPerPage, getRowsPerPage = _a.getRowsPerPage, autoHeight = _a.autoHeight;
+    useEffect(function () {
+        var _a;
+        if (!autoHeight || queryRowsParam || !gridHeight || gridHeight <= 0) {
+            return;
+        }
+        var selectedOption = rowsPerPageOptions.find(function (option) { return option.value === rowsPerPage; });
+        if (!selectedOption) {
+            // @TODO this move to mailship
+            // const numberOfRows = Math.max(Math.floor(gridHeight / rowHeight - 2), GRID_MIN_ROWS)
+            var numberOfRows = getRowsPerPage === null || getRowsPerPage === void 0 ? void 0 : getRowsPerPage(gridHeight);
+            if (numberOfRows) {
+                (_a = gridActions.setRowsPerPage) === null || _a === void 0 ? void 0 : _a.call(gridActions, numberOfRows);
+            }
+        }
+    }, [gridHeight, gridActions, queryRowsParam]);
+};

package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js

@@ -22,6 +22,7 @@ var FilterSetter = function (_a) {
     }, []);
     return null;
 };
+var getRowsPerPage = function (height) { return 13; };
 var ConnectedFilterSetter = withReduxActions('testGrid')(FilterSetter);
 var extraControlButtons = [
     {
@@ -45,7 +46,7 @@ export default {
     title: 'Blocks/CommonGrid',
     decorators: [withRedux]
 };
-export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnButtons, rowsData: createRandomData(10), onRowAction: onRowAction, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, quickFilter: "productSku", extraControlButtons: extraControlButtons, comparators: comparators, gridName: "gridName" })] })); };
+export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnButtons, rowsData: createRandomData(10), onRowAction: onRowAction, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, getRowsPerPage: getRowsPerPage, quickFilter: "productSku", extraControlButtons: extraControlButtons, comparators: comparators, gridName: "gridName" })] })); };
 ComplexWithPaginationAndRedux.story = {
     name: 'Complex, with pagination and redux'
 };

package/ui/Blocks/CommonGrid/utils/constants.d.ts

@@ -1 +1,5 @@
 export declare const presetsLocalStorageKey = "commonGridPresets";
+export declare const rowsPerPageOptions: {
+    value: number;
+    label: number;
+}[];

package/ui/Blocks/CommonGrid/utils/constants.js

@@ -1 +1,7 @@
 export var presetsLocalStorageKey = 'commonGridPresets';
+export var rowsPerPageOptions = [
+    { value: 10, label: 10 },
+    { value: 20, label: 20 },
+    { value: 50, label: 50 },
+    { value: 100, label: 100 }
+];