@mailstep/design-system 0.7.8-beta.0 → 0.7.8-beta.4

package/package.json

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

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -64,6 +64,6 @@ var CommonGridContainer = function (props) {
         onClose: onClose
     }), columnsConfigValues = _h.columnsConfigValues, setColumnsConfigOptions = _h.setColumnsConfigOptions, onConfirmForm = _h.onConfirmForm, resetColumnConfig = _h.resetColumnConfig, handleDragEnd = _h.handleDragEnd, onCloseForm = _h.onCloseForm, displayColumnsDefinitions = _h.displayColumnsDefinitions, manageColumnsFormDefinitions = _h.manageColumnsFormDefinitions;
     var _j = usePresetState(), isPresetsModalOpen = _j.isPresetsModalOpen, onClosePresetsModal = _j.onClosePresetsModal, onOpenPresetsModal = _j.onOpenPresetsModal, setSelectedPresetName = _j.setSelectedPresetName, selectedPresetName = _j.selectedPresetName;
-    return (_jsxs(_Fragment, { children: [_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsx(StyledButtonStrip, { className: "buttonsStrip", children: _jsx(ControlButtons, { hideControlButtons: hideControlButtons, extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, quickFilter: quickFilter, displayColumnsDefinitions: displayColumnsDefinitions, filters: filters, setDisplayManageColumnButton: setDisplayManageColumnButton, displayManageColumnButton: displayManageColumnButton, openManageColumnForm: openManageColumnForm, onOpenPresetsModal: onOpenPresetsModal, selectedPresetName: selectedPresetName, withPresets: withPresets, gridName: gridName }) }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, height: gridHeight, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasColouredRows: true }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isFixed: !!gridHeight, children: [(processCheckedValues || !!((_a = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions) === null || _a === void 0 ? void 0 : _a.length)) && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? '60px' : '32px', children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage, customPaginationHandler: customPaginationHandler, radius: window.innerWidth < 768 ? 3 : 5, rate: window.innerWidth < 768 ? 1 : 4 }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler })] })] }) })] }), _jsx(GridModals, { manageColumnFormVisible: manageColumnFormVisible, onCloseForm: onCloseForm, resetColumnConfig: resetColumnConfig, onConfirmForm: onConfirmForm, manageColumnsFormDefinitions: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd(true), gridName: gridName, gridActions: gridActions, gridSelectors: gridSelectors, onClosePresetsModal: onClosePresetsModal, isPresetsModalOpen: isPresetsModalOpen, selectedPresetName: selectedPresetName, setSelectedPresetName: setSelectedPresetName })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsx(StyledButtonStrip, { className: "buttonsStrip", children: _jsx(ControlButtons, { hideControlButtons: hideControlButtons, extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, quickFilter: quickFilter, displayColumnsDefinitions: displayColumnsDefinitions, filters: filters, setDisplayManageColumnButton: setDisplayManageColumnButton, displayManageColumnButton: displayManageColumnButton, openManageColumnForm: openManageColumnForm, onOpenPresetsModal: onOpenPresetsModal, selectedPresetName: selectedPresetName, withPresets: withPresets, gridName: gridName }) }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, height: gridHeight, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasColouredRows: true }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isFixed: !!gridHeight, children: [(processCheckedValues || !!((_a = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions) === null || _a === void 0 ? void 0 : _a.length)) && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? '60px' : '32px', children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage, customPaginationHandler: customPaginationHandler, radius: window.innerWidth < 768 ? 3 : 5, rate: window.innerWidth < 768 ? 1 : 4 }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler, getRowsPerPage: getRowsPerPage, gridHeight: gridHeight })] })] }) })] }), _jsx(GridModals, { manageColumnFormVisible: manageColumnFormVisible, onCloseForm: onCloseForm, resetColumnConfig: resetColumnConfig, onConfirmForm: onConfirmForm, manageColumnsFormDefinitions: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd(true), gridName: gridName, gridActions: gridActions, gridSelectors: gridSelectors, onClosePresetsModal: onClosePresetsModal, isPresetsModalOpen: isPresetsModalOpen, selectedPresetName: selectedPresetName, setSelectedPresetName: setSelectedPresetName })] }));
 };
 export default CommonGridContainer;

package/ui/Blocks/CommonGrid/components/TablePagination/TablePagination.d.ts

@@ -3,6 +3,8 @@ type Props = {
     gridActions: GridActionsType;
     gridSelectors: GridSelectorsType;
     customPaginationHandler?: (page: number, rows: number) => void;
+    getRowsPerPage?: (height?: number) => number;
+    gridHeight?: number;
 };
-declare const TablePagination: ({ gridActions, gridSelectors, customPaginationHandler }: Props) => JSX.Element;
+declare const TablePagination: ({ gridActions, gridSelectors, getRowsPerPage, gridHeight, customPaginationHandler }: Props) => JSX.Element;
 export default TablePagination;

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

@@ -19,21 +19,31 @@ 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 rowsPerPageOptionValues = [10, 20, 50, 100];
+var autoOption = { value: 'auto', label: 'auto' };
+var rowsPerPageOptions = [
+    { value: 10, label: 10 },
+    { value: 20, label: 20 },
+    { value: 50, label: 50 },
+    { value: 100, label: 100 },
+];
 var TablePagination = function (_a) {
-    var gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, customPaginationHandler = _a.customPaginationHandler;
+    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 onSetRowsPerPage = useCallback(function (option) {
         if (option && 'value' in option) {
-            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_1 = Number(option.value);
+            if (option.value === 'auto') {
+                value_1 = (getRowsPerPage === null || getRowsPerPage === void 0 ? void 0 : getRowsPerPage(gridHeight)) || 10; // @TODO use 10 from constants
+            }
+            setRowsPerPage === null || setRowsPerPage === void 0 ? void 0 : setRowsPerPage(value_1);
+            customPaginationHandler === null || customPaginationHandler === void 0 ? void 0 : customPaginationHandler(page !== null && page !== void 0 ? page : 1, value_1);
         }
     }, [setRowsPerPage, page, customPaginationHandler]);
-    var rowsPerPageOptions = useMemo(function () {
-        return __spreadArray(__spreadArray([], rowsPerPageOptionValues.map(function (value) { return ({ value: value, label: value }); }), true), [{ value: '', label: 'auto' }], false);
-    }, []);
-    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 getRowsPerPage ? __spreadArray(__spreadArray([], rowsPerPageOptions, true), [autoOption], false) : rowsPerPageOptions; }, [getRowsPerPage]);
+    var value = useMemo(function () { return (rowsPerPageOptions.find(function (option) { return option.value === rowsPerPage; }) ? rowsPerPage : 'auto'); }, [rowsPerPage]);
+    return (_jsxs(Wrapper, { children: [_jsx(StyledSelect, { minWidth: "80px", children: _jsx(Select, { name: "rowsPerPage", menuPlacement: "top", style: "gridFilter", placeholder: "".concat(rowsPerPage), options: options, value: value, 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/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'
 };