@citygross/components 0.7.36 → 0.7.37

package/build/@types/index.d.ts

@@ -46,6 +46,7 @@ export * from './components/Table/';
 export * from './components/Timeline/Timeline';
 export * from './components/ToolTip/ToolTip';
 export * from './components/QuantitySelector/QuantitySelector';
+export * from './components/Pagination/Pagination';
 export * from './containers/PageContainer/PageContainer';
 export * from './containers/TwoColumnsContainer/TwoColumnsPageContainer';
 export * from './components/UnorderedList';

package/build/cjs/components/src/components/Pagination/Pagination.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var PaginationButton = require('../Button/PaginationButton.js');
+var Box = require('../Box/Box.js');
+var Pagination_styles = require('./Pagination.styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function createPagination(totalItems, itemsPerPage) {
+    var amountOfPages = Math.ceil((totalItems || 0) / (itemsPerPage !== null && itemsPerPage !== void 0 ? itemsPerPage : 6));
+    if (amountOfPages === 0 || itemsPerPage === 0) {
+        return [];
+    }
+    var pagination = [];
+    var block = [];
+    var counter = 0;
+    new Array(amountOfPages).fill(0).map(function (_, index) {
+        if (counter < 3) {
+            counter++;
+            block.push(index);
+            if (index === amountOfPages - 1) {
+                pagination.push(block);
+            }
+        }
+        else {
+            counter = 0;
+            block.push(index);
+            pagination.push(block);
+            block = [];
+        }
+        return null;
+    });
+    return pagination;
+}
+function Pagination(_a) {
+    var totalItems = _a.totalItems, currentPage = _a.currentPage, fetchItems = _a.fetchItems, itemsPerPage = _a.itemsPerPage;
+    var _b = React.useState(Math.floor((currentPage - 1) / 4)), currentIndex = _b[0], setIndex = _b[1];
+    var pagination = createPagination(totalItems, itemsPerPage);
+    return (React__default['default'].createElement(Box.Box, null, pagination && pagination.length > 0 && (React__default['default'].createElement(Pagination_styles.Flex, null,
+        currentIndex > 0 && (React__default['default'].createElement(Pagination_styles.PaginationButtonWrapper, null,
+            React__default['default'].createElement(PaginationButton.PaginationButton, { color: 'white', onClick: function () { return setIndex(currentIndex - 1); }, width: 36, height: 36 }, '...'))),
+        pagination[currentIndex].map(function (page) { return (React__default['default'].createElement(Pagination_styles.PaginationButtonWrapper, { key: page },
+            React__default['default'].createElement(PaginationButton.PaginationButton, { color: currentPage === page + 1 ? 'primary' : 'white', width: 36, height: 36, onClick: function () { return fetchItems(page + 1); } }, page + 1))); }),
+        pagination.length > 1 && currentIndex < pagination.length - 1 && (React__default['default'].createElement(Pagination_styles.PaginationButtonWrapper, null,
+            React__default['default'].createElement(PaginationButton.PaginationButton, { color: 'white', onClick: function () { return setIndex(currentIndex + 1); }, width: 36, height: 36 }, '...')))))));
+}
+
+exports.Pagination = Pagination;
+//# sourceMappingURL=Pagination.js.map

package/build/cjs/components/src/components/Pagination/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/Pagination/Pagination.styles.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var PaginationButtonWrapper = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  padding: 0 ", "px;\n"], ["\n  padding: 0 ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
+var Flex = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n"], ["\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n"])));
+var templateObject_1, templateObject_2;
+
+exports.Flex = Flex;
+exports.PaginationButtonWrapper = PaginationButtonWrapper;
+//# sourceMappingURL=Pagination.styles.js.map

package/build/cjs/components/src/components/Pagination/Pagination.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/index.js

@@ -51,6 +51,7 @@ var Table_styles = require('./components/Table/Table.styles.js');
 var Timeline = require('./components/Timeline/Timeline.js');
 var ToolTip = require('./components/ToolTip/ToolTip.js');
 var QuantitySelector = require('./components/QuantitySelector/QuantitySelector.js');
+var Pagination = require('./components/Pagination/Pagination.js');
 var PageContainer = require('./containers/PageContainer/PageContainer.js');
 var TwoColumnsPageContainer = require('./containers/TwoColumnsContainer/TwoColumnsPageContainer.js');
 var UnorderedList_styles = require('./components/UnorderedList/UnorderedList.styles.js');
@@ -140,6 +141,7 @@ exports.Tr = Table_styles.Tr;
 exports.Timeline = Timeline.Timeline;
 exports.ToolTip = ToolTip.ToolTip;
 exports.QuantitySelector = QuantitySelector.QuantitySelector;
+exports.Pagination = Pagination.Pagination;
 exports.PageContainer = PageContainer.PageContainer;
 exports.TwoColumnsPageContainer = TwoColumnsPageContainer.TwoColumnsPageContainer;
 exports.UnorderedList = UnorderedList_styles.UnorderedList;

package/build/cjs/components/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/Pagination/Pagination.js

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { PaginationButton } from '../Button/PaginationButton.js';
+import { Box } from '../Box/Box.js';
+import { Flex, PaginationButtonWrapper } from './Pagination.styles.js';
+
+function createPagination(totalItems, itemsPerPage) {
+    var amountOfPages = Math.ceil((totalItems || 0) / (itemsPerPage !== null && itemsPerPage !== void 0 ? itemsPerPage : 6));
+    if (amountOfPages === 0 || itemsPerPage === 0) {
+        return [];
+    }
+    var pagination = [];
+    var block = [];
+    var counter = 0;
+    new Array(amountOfPages).fill(0).map(function (_, index) {
+        if (counter < 3) {
+            counter++;
+            block.push(index);
+            if (index === amountOfPages - 1) {
+                pagination.push(block);
+            }
+        }
+        else {
+            counter = 0;
+            block.push(index);
+            pagination.push(block);
+            block = [];
+        }
+        return null;
+    });
+    return pagination;
+}
+function Pagination(_a) {
+    var totalItems = _a.totalItems, currentPage = _a.currentPage, fetchItems = _a.fetchItems, itemsPerPage = _a.itemsPerPage;
+    var _b = useState(Math.floor((currentPage - 1) / 4)), currentIndex = _b[0], setIndex = _b[1];
+    var pagination = createPagination(totalItems, itemsPerPage);
+    return (React.createElement(Box, null, pagination && pagination.length > 0 && (React.createElement(Flex, null,
+        currentIndex > 0 && (React.createElement(PaginationButtonWrapper, null,
+            React.createElement(PaginationButton, { color: 'white', onClick: function () { return setIndex(currentIndex - 1); }, width: 36, height: 36 }, '...'))),
+        pagination[currentIndex].map(function (page) { return (React.createElement(PaginationButtonWrapper, { key: page },
+            React.createElement(PaginationButton, { color: currentPage === page + 1 ? 'primary' : 'white', width: 36, height: 36, onClick: function () { return fetchItems(page + 1); } }, page + 1))); }),
+        pagination.length > 1 && currentIndex < pagination.length - 1 && (React.createElement(PaginationButtonWrapper, null,
+            React.createElement(PaginationButton, { color: 'white', onClick: function () { return setIndex(currentIndex + 1); }, width: 36, height: 36 }, '...')))))));
+}
+
+export { Pagination };
+//# sourceMappingURL=Pagination.js.map

package/build/es/components/src/components/Pagination/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/Pagination/Pagination.styles.js

@@ -0,0 +1,9 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+var PaginationButtonWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0 ", "px;\n"], ["\n  padding: 0 ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
+var Flex = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n"], ["\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n"])));
+var templateObject_1, templateObject_2;
+
+export { Flex, PaginationButtonWrapper };
+//# sourceMappingURL=Pagination.styles.js.map

package/build/es/components/src/components/Pagination/Pagination.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/build/es/components/src/index.js

@@ -47,6 +47,7 @@ export { Table, Td, Th, Thead, Tr } from './components/Table/Table.styles.js';
 export { Timeline } from './components/Timeline/Timeline.js';
 export { ToolTip } from './components/ToolTip/ToolTip.js';
 export { QuantitySelector } from './components/QuantitySelector/QuantitySelector.js';
+export { Pagination } from './components/Pagination/Pagination.js';
 export { PageContainer } from './containers/PageContainer/PageContainer.js';
 export { TwoColumnsPageContainer } from './containers/TwoColumnsContainer/TwoColumnsPageContainer.js';
 export { UnorderedList, UnorderedListItem } from './components/UnorderedList/UnorderedList.styles.js';

package/build/es/components/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.7.36",
+  "version": "0.7.37",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -71,5 +71,5 @@
     "moment": "^2.29.1",
     "react-loading-skeleton": "^2.2.0"
   },
-  "gitHead": "85cf5e03a360883c2119b3cd474a93890eef898b"
+  "gitHead": "78b244982105ec4218731adcd38003b606505caf"
 }