@propellerads/pagination 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,3 @@
+#### 1.1.0
+
+* fix goToPage functionality

package/dist/allowJavaScriptModules.d.ts

@@ -0,0 +1 @@
+declare module '*';

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import { FunctionComponent } from 'react';
+import { PaginationProps } from 'types';
+declare const Pagination: FunctionComponent<PaginationProps>;
+export default Pagination;

package/dist/index.js

@@ -0,0 +1,8 @@
+
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./pagination.cjs.production.min.js')
+} else {
+  module.exports = require('./pagination.cjs.development.js')
+}

package/dist/pagination.cjs.development.js

@@ -0,0 +1,118 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = _interopDefault(require('react'));
+var ArrowButton = require('@propellerads/arrow-button');
+var ArrowButton__default = _interopDefault(ArrowButton);
+var Label = _interopDefault(require('@propellerads/label'));
+var Select = _interopDefault(require('@propellerads/select'));
+var styled = _interopDefault(require('styled-components'));
+var stylevariables = require('@propellerads/stylevariables');
+
+function _taggedTemplateLiteralLoose(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(0);
+  }
+
+  strings.raw = raw;
+  return strings;
+}
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var StyledPagination = /*#__PURE__*/styled.div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
+var StyledPaginationPerPage = /*#__PURE__*/styled.div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-right: ", "px;\n  \n  label {\n    margin: 0 ", "px 0 0;\n  }\n\n  select {\n    width: 66px;\n  }\n"])), stylevariables.spacing * 9, stylevariables.spacing * 3);
+var StyledPaginationSelect = /*#__PURE__*/styled.div(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 70px;\n"])));
+var StyledPaginationAmount = /*#__PURE__*/styled.div(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: ", "px;\n"])), stylevariables.spacing * 8);
+var StyledPaginationActions = /*#__PURE__*/styled.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var StyledPaginationAction = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &:not(:last-child) {\n    margin-right: ", "px;\n  }\n"])), stylevariables.spacing * 2);
+
+function getPaginationAmountData(perPage, page, total) {
+  var count = perPage * (page - 1);
+  return {
+    from: count + 1,
+    to: Math.min(count + perPage, total),
+    total: total
+  };
+}
+
+function getPaginationAmountText(_ref) {
+  var from = _ref.from,
+      to = _ref.to,
+      total = _ref.total;
+  return from + "-" + to + " of " + total;
+}
+
+var Pagination = function Pagination(_ref2) {
+  var pageIndex = _ref2.pageIndex,
+      perPage = _ref2.perPage,
+      _ref2$pageSizes = _ref2.pageSizes,
+      pageSizes = _ref2$pageSizes === void 0 ? [10, 20, 50] : _ref2$pageSizes,
+      totalPages = _ref2.totalPages,
+      totalItems = _ref2.totalItems,
+      setPageSize = _ref2.setPageSize,
+      canNextPage = _ref2.canNextPage,
+      gotoPage = _ref2.gotoPage,
+      canPreviousPage = _ref2.canPreviousPage,
+      previousPageHandler = _ref2.previousPageHandler,
+      nextPageHandler = _ref2.nextPageHandler,
+      parentElementId = _ref2.parentElementId,
+      _ref2$paginationAmoun = _ref2.paginationAmount,
+      paginationAmount = _ref2$paginationAmoun === void 0 ? '' : _ref2$paginationAmoun,
+      _ref2$labelPerPage = _ref2.labelPerPage,
+      labelPerPage = _ref2$labelPerPage === void 0 ? '' : _ref2$labelPerPage;
+  var selectElementId = parentElementId + "-pagination-select-per-page";
+  var selectValues = pageSizes.map(function (size) {
+    return {
+      id: size,
+      label: size,
+      value: size
+    };
+  });
+  var paginationAmountData = getPaginationAmountData(perPage, pageIndex + 1, totalItems);
+  var paginationAmountText = paginationAmount || getPaginationAmountText(paginationAmountData);
+  return React.createElement(StyledPagination, null, React.createElement(StyledPaginationPerPage, null, labelPerPage && React.createElement(Label, {
+    label: labelPerPage,
+    "for": selectElementId
+  }), React.createElement(StyledPaginationSelect, null, React.createElement(Select, {
+    id: selectElementId,
+    onChange: function onChange(_ref3) {
+      var value = _ref3.value;
+      setPageSize(value);
+    },
+    options: selectValues,
+    value: selectValues.find(function (_ref4) {
+      var value = _ref4.value;
+      return value === perPage;
+    })
+  }))), React.createElement(StyledPaginationAmount, null, paginationAmountText), React.createElement(StyledPaginationActions, null, React.createElement(StyledPaginationAction, null, React.createElement(ArrowButton__default, {
+    type: ArrowButton.ARROW_TYPE.FIRST,
+    isDisabled: !canPreviousPage,
+    elementId: parentElementId + "-pagination-first-page-button",
+    onClick: function onClick() {
+      return gotoPage(0);
+    }
+  })), React.createElement(StyledPaginationAction, null, React.createElement(ArrowButton__default, {
+    type: ArrowButton.ARROW_TYPE.PREVIOUS,
+    isDisabled: !canPreviousPage,
+    elementId: parentElementId + "-pagination-previous-page-button",
+    onClick: previousPageHandler
+  })), React.createElement(StyledPaginationAction, null, React.createElement(ArrowButton__default, {
+    type: ArrowButton.ARROW_TYPE.NEXT,
+    isDisabled: !canNextPage,
+    elementId: parentElementId + "-pagination-next-page-button",
+    onClick: nextPageHandler
+  })), React.createElement(StyledPaginationAction, null, React.createElement(ArrowButton__default, {
+    type: ArrowButton.ARROW_TYPE.LAST,
+    isDisabled: !canNextPage,
+    elementId: parentElementId + "-pagination-last-page-button",
+    onClick: function onClick() {
+      return gotoPage(totalPages - 1);
+    }
+  }))));
+};
+
+exports.default = Pagination;
+//# sourceMappingURL=pagination.cjs.development.js.map

package/dist/pagination.cjs.development.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.cjs.development.js","sources":["../src/styles.ts","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {spacing} from '@propellerads/stylevariables';\n\nconst StyledPagination = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst StyledPaginationPerPage = styled.div`\n  display: flex;\n  align-items: center;\n  margin-right: ${spacing * 9}px;\n  \n  label {\n    margin: 0 ${spacing * 3}px 0 0;\n  }\n\n  select {\n    width: 66px;\n  }\n`;\n\nconst StyledPaginationSelect = styled.div`\n  width: 70px;\n`;\n\nconst StyledPaginationAmount = styled.div`\n  margin-right: ${spacing * 8}px;\n`;\n\nconst StyledPaginationActions = styled.div`\n  display: flex;\n`;\n\nconst StyledPaginationAction = styled.div`\n  &:not(:last-child) {\n    margin-right: ${spacing * 2}px;\n  }\n`;\n\nexport {\n  StyledPagination,\n  StyledPaginationPerPage,\n  StyledPaginationSelect,\n  StyledPaginationAmount,\n  StyledPaginationActions,\n  StyledPaginationAction,\n};\n","import React, {FunctionComponent} from 'react';\n\nimport ArrowButton, {ARROW_TYPE} from '@propellerads/arrow-button';\nimport Label from '@propellerads/label';\nimport Select from '@propellerads/select';\n\nimport {PaginationAmountText, PaginationProps, SelectValue} from 'types';\nimport {\n  StyledPagination,\n  StyledPaginationPerPage,\n  StyledPaginationSelect,\n  StyledPaginationAmount,\n  StyledPaginationActions,\n  StyledPaginationAction,\n} from './styles';\n\nfunction getPaginationAmountData(perPage: number, page: number, total: number): PaginationAmountText {\n  const count = perPage * (page - 1);\n\n  return {\n    from: count + 1,\n    to: Math.min(count + perPage, total),\n    total,\n  };\n}\n\nfunction getPaginationAmountText({from, to, total}: PaginationAmountText): string {\n  return `${from}-${to} of ${total}`;\n}\n\nconst Pagination: FunctionComponent<PaginationProps> = ({\n  pageIndex,\n  perPage,\n  pageSizes = [10, 20, 50],\n  totalPages,\n  totalItems,\n  setPageSize,\n  canNextPage,\n  gotoPage,\n  canPreviousPage,\n  previousPageHandler,\n  nextPageHandler,\n  parentElementId,\n  paginationAmount = '',\n  labelPerPage = '',\n}: PaginationProps) => {\n  const selectElementId = `${parentElementId}-pagination-select-per-page`;\n\n  const selectValues = pageSizes.map((size) => ({\n    id: size,\n    label: size,\n    value: size,\n  }));\n\n  const paginationAmountData = getPaginationAmountData(perPage, pageIndex + 1, totalItems);\n  const paginationAmountText = paginationAmount || getPaginationAmountText(paginationAmountData);\n\n  return (\n    <StyledPagination>\n      <StyledPaginationPerPage>\n        {labelPerPage && (\n          <Label\n            label={labelPerPage}\n            for={selectElementId}\n          />\n        )}\n        <StyledPaginationSelect>\n          <Select\n            id={selectElementId}\n            onChange={({value}: SelectValue) => {\n              setPageSize(value);\n            }}\n            options={selectValues}\n            value={selectValues.find(({value}) => value === perPage)}\n          />\n        </StyledPaginationSelect>\n      </StyledPaginationPerPage>\n      <StyledPaginationAmount>\n        {paginationAmountText}\n      </StyledPaginationAmount>\n      <StyledPaginationActions>\n        <StyledPaginationAction>\n          <ArrowButton\n            type={ARROW_TYPE.FIRST}\n            isDisabled={!canPreviousPage}\n            elementId={`${parentElementId}-pagination-first-page-button`}\n            onClick={() => gotoPage(0)}\n          />\n        </StyledPaginationAction>\n        <StyledPaginationAction>\n          <ArrowButton\n            type={ARROW_TYPE.PREVIOUS}\n            isDisabled={!canPreviousPage}\n            elementId={`${parentElementId}-pagination-previous-page-button`}\n            onClick={previousPageHandler}\n          />\n        </StyledPaginationAction>\n        <StyledPaginationAction>\n          <ArrowButton\n            type={ARROW_TYPE.NEXT}\n            isDisabled={!canNextPage}\n            elementId={`${parentElementId}-pagination-next-page-button`}\n            onClick={nextPageHandler}\n          />\n        </StyledPaginationAction>\n        <StyledPaginationAction>\n          <ArrowButton\n            type={ARROW_TYPE.LAST}\n            isDisabled={!canNextPage}\n            elementId={`${parentElementId}-pagination-last-page-button`}\n            onClick={() => gotoPage(totalPages - 1)}\n          />\n        </StyledPaginationAction>\n      </StyledPaginationActions>\n    </StyledPagination>\n  );\n};\n\nexport default Pagination;\n"],"names":["StyledPagination","styled","div","StyledPaginationPerPage","spacing","StyledPaginationSelect","StyledPaginationAmount","StyledPaginationActions","StyledPaginationAction","getPaginationAmountData","perPage","page","total","count","from","to","Math","min","getPaginationAmountText","Pagination","pageIndex","pageSizes","totalPages","totalItems","setPageSize","canNextPage","gotoPage","canPreviousPage","previousPageHandler","nextPageHandler","parentElementId","paginationAmount","labelPerPage","selectElementId","selectValues","map","size","id","label","value","paginationAmountData","paginationAmountText","React","Label","Select","onChange","options","find","ArrowButton","type","ARROW_TYPE","FIRST","isDisabled","elementId","onClick","PREVIOUS","NEXT","LAST"],"mappings":"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"}

package/dist/pagination.cjs.production.min.js

@@ -0,0 +1,2 @@
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n,t,a,l,r,i,o=e(require("react")),u=require("@propellerads/arrow-button"),p=e(u),c=e(require("@propellerads/label")),s=e(require("@propellerads/select")),d=e(require("styled-components")),g=require("@propellerads/stylevariables");function m(e,n){return n||(n=e.slice(0)),e.raw=n,e}var f=d.div(n||(n=m(["\n  display: flex;\n  align-items: center;\n"]))),v=d.div(t||(t=m(["\n  display: flex;\n  align-items: center;\n  margin-right: ","px;\n  \n  label {\n    margin: 0 ","px 0 0;\n  }\n\n  select {\n    width: 66px;\n  }\n"])),9*g.spacing,3*g.spacing),E=d.div(a||(a=m(["\n  width: 70px;\n"]))),b=d.div(l||(l=m(["\n  margin-right: ","px;\n"])),8*g.spacing),P=d.div(r||(r=m(["\n  display: flex;\n"]))),x=d.div(i||(i=m(["\n  &:not(:last-child) {\n    margin-right: ","px;\n  }\n"])),2*g.spacing);exports.default=function(e){var n,t=e.pageIndex,a=e.perPage,l=e.pageSizes,r=e.totalPages,i=e.totalItems,d=e.setPageSize,g=e.canNextPage,m=e.gotoPage,y=e.canPreviousPage,R=e.previousPageHandler,I=e.nextPageHandler,h=e.parentElementId,T=e.paginationAmount,q=void 0===T?"":T,A=e.labelPerPage,O=void 0===A?"":A,_=h+"-pagination-select-per-page",C=(void 0===l?[10,20,50]:l).map((function(e){return{id:e,label:e,value:e}})),S=function(e,n,t){var a=e*(n-1);return{from:a+1,to:Math.min(a+e,t),total:t}}(a,t+1,i),k=q||(n=S).from+"-"+n.to+" of "+n.total;return o.createElement(f,null,o.createElement(v,null,O&&o.createElement(c,{label:O,for:_}),o.createElement(E,null,o.createElement(s,{id:_,onChange:function(e){d(e.value)},options:C,value:C.find((function(e){return e.value===a}))}))),o.createElement(b,null,k),o.createElement(P,null,o.createElement(x,null,o.createElement(p,{type:u.ARROW_TYPE.FIRST,isDisabled:!y,elementId:h+"-pagination-first-page-button",onClick:function(){return m(0)}})),o.createElement(x,null,o.createElement(p,{type:u.ARROW_TYPE.PREVIOUS,isDisabled:!y,elementId:h+"-pagination-previous-page-button",onClick:R})),o.createElement(x,null,o.createElement(p,{type:u.ARROW_TYPE.NEXT,isDisabled:!g,elementId:h+"-pagination-next-page-button",onClick:I})),o.createElement(x,null,o.createElement(p,{type:u.ARROW_TYPE.LAST,isDisabled:!g,elementId:h+"-pagination-last-page-button",onClick:function(){return m(r-1)}}))))};
+//# sourceMappingURL=pagination.cjs.production.min.js.map

package/dist/pagination.cjs.production.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.cjs.production.min.js","sources":["../src/styles.ts","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {spacing} from '@propellerads/stylevariables';\n\nconst StyledPagination = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst StyledPaginationPerPage = styled.div`\n  display: flex;\n  align-items: center;\n  margin-right: ${spacing * 9}px;\n  \n  label {\n    margin: 0 ${spacing * 3}px 0 0;\n  }\n\n  select {\n    width: 66px;\n  }\n`;\n\nconst StyledPaginationSelect = styled.div`\n  width: 70px;\n`;\n\nconst StyledPaginationAmount = styled.div`\n  margin-right: ${spacing * 8}px;\n`;\n\nconst StyledPaginationActions = styled.div`\n  display: flex;\n`;\n\nconst StyledPaginationAction = styled.div`\n  &:not(:last-child) {\n    margin-right: ${spacing * 2}px;\n  }\n`;\n\nexport {\n  StyledPagination,\n  StyledPaginationPerPage,\n  StyledPaginationSelect,\n  StyledPaginationAmount,\n  StyledPaginationActions,\n  StyledPaginationAction,\n};\n","import React, {FunctionComponent} from 'react';\n\nimport ArrowButton, {ARROW_TYPE} from '@propellerads/arrow-button';\nimport Label from '@propellerads/label';\nimport Select from '@propellerads/select';\n\nimport {PaginationAmountText, PaginationProps, SelectValue} from 'types';\nimport {\n  StyledPagination,\n  StyledPaginationPerPage,\n  StyledPaginationSelect,\n  StyledPaginationAmount,\n  StyledPaginationActions,\n  StyledPaginationAction,\n} from './styles';\n\nfunction getPaginationAmountData(perPage: number, page: number, total: number): PaginationAmountText {\n  const count = perPage * (page - 1);\n\n  return {\n    from: count + 1,\n    to: Math.min(count + perPage, total),\n    total,\n  };\n}\n\nfunction getPaginationAmountText({from, to, total}: PaginationAmountText): string {\n  return `${from}-${to} of ${total}`;\n}\n\nconst Pagination: FunctionComponent<PaginationProps> = ({\n  pageIndex,\n  perPage,\n  pageSizes = [10, 20, 50],\n  totalPages,\n  totalItems,\n  setPageSize,\n  canNextPage,\n  gotoPage,\n  canPreviousPage,\n  previousPageHandler,\n  nextPageHandler,\n  parentElementId,\n  paginationAmount = '',\n  labelPerPage = '',\n}: PaginationProps) => {\n  const selectElementId = `${parentElementId}-pagination-select-per-page`;\n\n  const selectValues = pageSizes.map((size) => ({\n    id: size,\n    label: size,\n    value: size,\n  }));\n\n  const paginationAmountData = getPaginationAmountData(perPage, pageIndex + 1, totalItems);\n  const paginationAmountText = paginationAmount || getPaginationAmountText(paginationAmountData);\n\n  return (\n    <StyledPagination>\n      <StyledPaginationPerPage>\n        {labelPerPage && (\n          <Label\n            label={labelPerPage}\n            for={selectElementId}\n          />\n        )}\n        <StyledPaginationSelect>\n          <Select\n            id={selectElementId}\n            onChange={({value}: SelectValue) => {\n              setPageSize(value);\n            }}\n            options={selectValues}\n            value={selectValues.find(({value}) => value === perPage)}\n          />\n        </StyledPaginationSelect>\n      </StyledPaginationPerPage>\n      <StyledPaginationAmount>\n        {paginationAmountText}\n      </StyledPaginationAmount>\n      <StyledPaginationActions>\n        <StyledPaginationAction>\n          <ArrowButton\n            type={ARROW_TYPE.FIRST}\n            isDisabled={!canPreviousPage}\n            elementId={`${parentElementId}-pagination-first-page-button`}\n            onClick={() => gotoPage(0)}\n          />\n        </StyledPaginationAction>\n        <StyledPaginationAction>\n          <ArrowButton\n            type={ARROW_TYPE.PREVIOUS}\n            isDisabled={!canPreviousPage}\n            elementId={`${parentElementId}-pagination-previous-page-button`}\n            onClick={previousPageHandler}\n          />\n        </StyledPaginationAction>\n        <StyledPaginationAction>\n          <ArrowButton\n            type={ARROW_TYPE.NEXT}\n            isDisabled={!canNextPage}\n            elementId={`${parentElementId}-pagination-next-page-button`}\n            onClick={nextPageHandler}\n          />\n        </StyledPaginationAction>\n        <StyledPaginationAction>\n          <ArrowButton\n            type={ARROW_TYPE.LAST}\n            isDisabled={!canNextPage}\n            elementId={`${parentElementId}-pagination-last-page-button`}\n            onClick={() => gotoPage(totalPages - 1)}\n          />\n        </StyledPaginationAction>\n      </StyledPaginationActions>\n    </StyledPagination>\n  );\n};\n\nexport default Pagination;\n"],"names":["StyledPagination","styled","div","StyledPaginationPerPage","spacing","StyledPaginationSelect","StyledPaginationAmount","StyledPaginationActions","StyledPaginationAction","pageIndex","perPage","pageSizes","totalPages","totalItems","setPageSize","canNextPage","gotoPage","canPreviousPage","previousPageHandler","nextPageHandler","parentElementId","paginationAmount","labelPerPage","selectElementId","selectValues","map","size","id","label","value","paginationAmountData","page","total","count","from","to","Math","min","getPaginationAmountData","paginationAmountText","React","Label","for","Select","onChange","options","find","ArrowButton","type","ARROW_TYPE","FIRST","isDisabled","elementId","onClick","PREVIOUS","NEXT","LAST"],"mappings":"uaAGA,IAAMA,EAAmBC,EAAOC,gEAK1BC,EAA0BF,EAAOC,0KAGX,EAAVE,UAGQ,EAAVA,WAQVC,EAAyBJ,EAAOC,sCAIhCI,EAAyBL,EAAOC,6CACV,EAAVE,WAGZG,EAA0BN,EAAOC,wCAIjCM,EAAyBP,EAAOC,4EAER,EAAVE,2BCNmC,kBACrDK,IAAAA,UACAC,IAAAA,YACAC,UACAC,IAAAA,WACAC,IAAAA,WACAC,IAAAA,YACAC,IAAAA,YACAC,IAAAA,SACAC,IAAAA,gBACAC,IAAAA,oBACAC,IAAAA,gBACAC,IAAAA,oBACAC,iBAAAA,aAAmB,SACnBC,aAAAA,aAAe,KAETC,EAAqBH,gCAErBI,cAfM,CAAC,GAAI,GAAI,OAeUC,KAAI,SAACC,GAAD,MAAW,CAC5CC,GAAID,EACJE,MAAOF,EACPG,MAAOH,MAGHI,EAtCR,SAAiCpB,EAAiBqB,EAAcC,GAC9D,IAAMC,EAAQvB,GAAWqB,EAAO,GAEhC,MAAO,CACLG,KAAMD,EAAQ,EACdE,GAAIC,KAAKC,IAAIJ,EAAQvB,EAASsB,GAC9BA,MAAAA,GAgC2BM,CAAwB5B,EAASD,EAAY,EAAGI,GACvE0B,EAAuBlB,MAA4CS,GA7BzCI,WAAMC,YAAIH,MA+B1C,OACEQ,gBAACxC,OACCwC,gBAACrC,OACEmB,GACCkB,gBAACC,GACCb,MAAON,EACPoB,IAAKnB,IAGTiB,gBAACnC,OACCmC,gBAACG,GACChB,GAAIJ,EACJqB,SAAU,YACR9B,IADUe,QAGZgB,QAASrB,EACTK,MAAOL,EAAasB,MAAK,YAAA,SAAEjB,QAAqBnB,SAItD8B,gBAAClC,OACEiC,GAEHC,gBAACjC,OACCiC,gBAAChC,OACCgC,gBAACO,GACCC,KAAMC,aAAWC,MACjBC,YAAalC,EACbmC,UAAchC,kCACdiC,QAAS,WAAA,OAAMrC,EAAS,OAG5BwB,gBAAChC,OACCgC,gBAACO,GACCC,KAAMC,aAAWK,SACjBH,YAAalC,EACbmC,UAAchC,qCACdiC,QAASnC,KAGbsB,gBAAChC,OACCgC,gBAACO,GACCC,KAAMC,aAAWM,KACjBJ,YAAapC,EACbqC,UAAchC,iCACdiC,QAASlC,KAGbqB,gBAAChC,OACCgC,gBAACO,GACCC,KAAMC,aAAWO,KACjBL,YAAapC,EACbqC,UAAchC,iCACdiC,QAAS,WAAA,OAAMrC,EAASJ,EAAa"}

package/dist/pagination.esm.js

@@ -0,0 +1,111 @@
+import React from 'react';
+import ArrowButton, { ARROW_TYPE } from '@propellerads/arrow-button';
+import Label from '@propellerads/label';
+import Select from '@propellerads/select';
+import styled from 'styled-components';
+import { spacing } from '@propellerads/stylevariables';
+
+function _taggedTemplateLiteralLoose(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(0);
+  }
+
+  strings.raw = raw;
+  return strings;
+}
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var StyledPagination = /*#__PURE__*/styled.div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
+var StyledPaginationPerPage = /*#__PURE__*/styled.div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-right: ", "px;\n  \n  label {\n    margin: 0 ", "px 0 0;\n  }\n\n  select {\n    width: 66px;\n  }\n"])), spacing * 9, spacing * 3);
+var StyledPaginationSelect = /*#__PURE__*/styled.div(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 70px;\n"])));
+var StyledPaginationAmount = /*#__PURE__*/styled.div(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: ", "px;\n"])), spacing * 8);
+var StyledPaginationActions = /*#__PURE__*/styled.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var StyledPaginationAction = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &:not(:last-child) {\n    margin-right: ", "px;\n  }\n"])), spacing * 2);
+
+function getPaginationAmountData(perPage, page, total) {
+  var count = perPage * (page - 1);
+  return {
+    from: count + 1,
+    to: Math.min(count + perPage, total),
+    total: total
+  };
+}
+
+function getPaginationAmountText(_ref) {
+  var from = _ref.from,
+      to = _ref.to,
+      total = _ref.total;
+  return from + "-" + to + " of " + total;
+}
+
+var Pagination = function Pagination(_ref2) {
+  var pageIndex = _ref2.pageIndex,
+      perPage = _ref2.perPage,
+      _ref2$pageSizes = _ref2.pageSizes,
+      pageSizes = _ref2$pageSizes === void 0 ? [10, 20, 50] : _ref2$pageSizes,
+      totalPages = _ref2.totalPages,
+      totalItems = _ref2.totalItems,
+      setPageSize = _ref2.setPageSize,
+      canNextPage = _ref2.canNextPage,
+      gotoPage = _ref2.gotoPage,
+      canPreviousPage = _ref2.canPreviousPage,
+      previousPageHandler = _ref2.previousPageHandler,
+      nextPageHandler = _ref2.nextPageHandler,
+      parentElementId = _ref2.parentElementId,
+      _ref2$paginationAmoun = _ref2.paginationAmount,
+      paginationAmount = _ref2$paginationAmoun === void 0 ? '' : _ref2$paginationAmoun,
+      _ref2$labelPerPage = _ref2.labelPerPage,
+      labelPerPage = _ref2$labelPerPage === void 0 ? '' : _ref2$labelPerPage;
+  var selectElementId = parentElementId + "-pagination-select-per-page";
+  var selectValues = pageSizes.map(function (size) {
+    return {
+      id: size,
+      label: size,
+      value: size
+    };
+  });
+  var paginationAmountData = getPaginationAmountData(perPage, pageIndex + 1, totalItems);
+  var paginationAmountText = paginationAmount || getPaginationAmountText(paginationAmountData);
+  return React.createElement(StyledPagination, null, React.createElement(StyledPaginationPerPage, null, labelPerPage && React.createElement(Label, {
+    label: labelPerPage,
+    "for": selectElementId
+  }), React.createElement(StyledPaginationSelect, null, React.createElement(Select, {
+    id: selectElementId,
+    onChange: function onChange(_ref3) {
+      var value = _ref3.value;
+      setPageSize(value);
+    },
+    options: selectValues,
+    value: selectValues.find(function (_ref4) {
+      var value = _ref4.value;
+      return value === perPage;
+    })
+  }))), React.createElement(StyledPaginationAmount, null, paginationAmountText), React.createElement(StyledPaginationActions, null, React.createElement(StyledPaginationAction, null, React.createElement(ArrowButton, {
+    type: ARROW_TYPE.FIRST,
+    isDisabled: !canPreviousPage,
+    elementId: parentElementId + "-pagination-first-page-button",
+    onClick: function onClick() {
+      return gotoPage(0);
+    }
+  })), React.createElement(StyledPaginationAction, null, React.createElement(ArrowButton, {
+    type: ARROW_TYPE.PREVIOUS,
+    isDisabled: !canPreviousPage,
+    elementId: parentElementId + "-pagination-previous-page-button",
+    onClick: previousPageHandler
+  })), React.createElement(StyledPaginationAction, null, React.createElement(ArrowButton, {
+    type: ARROW_TYPE.NEXT,
+    isDisabled: !canNextPage,
+    elementId: parentElementId + "-pagination-next-page-button",
+    onClick: nextPageHandler
+  })), React.createElement(StyledPaginationAction, null, React.createElement(ArrowButton, {
+    type: ARROW_TYPE.LAST,
+    isDisabled: !canNextPage,
+    elementId: parentElementId + "-pagination-last-page-button",
+    onClick: function onClick() {
+      return gotoPage(totalPages - 1);
+    }
+  }))));
+};
+
+export default Pagination;
+//# sourceMappingURL=pagination.esm.js.map

package/dist/pagination.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.esm.js","sources":["../src/styles.ts","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {spacing} from '@propellerads/stylevariables';\n\nconst StyledPagination = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst StyledPaginationPerPage = styled.div`\n  display: flex;\n  align-items: center;\n  margin-right: ${spacing * 9}px;\n  \n  label {\n    margin: 0 ${spacing * 3}px 0 0;\n  }\n\n  select {\n    width: 66px;\n  }\n`;\n\nconst StyledPaginationSelect = styled.div`\n  width: 70px;\n`;\n\nconst StyledPaginationAmount = styled.div`\n  margin-right: ${spacing * 8}px;\n`;\n\nconst StyledPaginationActions = styled.div`\n  display: flex;\n`;\n\nconst StyledPaginationAction = styled.div`\n  &:not(:last-child) {\n    margin-right: ${spacing * 2}px;\n  }\n`;\n\nexport {\n  StyledPagination,\n  StyledPaginationPerPage,\n  StyledPaginationSelect,\n  StyledPaginationAmount,\n  StyledPaginationActions,\n  StyledPaginationAction,\n};\n","import React, {FunctionComponent} from 'react';\n\nimport ArrowButton, {ARROW_TYPE} from '@propellerads/arrow-button';\nimport Label from '@propellerads/label';\nimport Select from '@propellerads/select';\n\nimport {PaginationAmountText, PaginationProps, SelectValue} from 'types';\nimport {\n  StyledPagination,\n  StyledPaginationPerPage,\n  StyledPaginationSelect,\n  StyledPaginationAmount,\n  StyledPaginationActions,\n  StyledPaginationAction,\n} from './styles';\n\nfunction getPaginationAmountData(perPage: number, page: number, total: number): PaginationAmountText {\n  const count = perPage * (page - 1);\n\n  return {\n    from: count + 1,\n    to: Math.min(count + perPage, total),\n    total,\n  };\n}\n\nfunction getPaginationAmountText({from, to, total}: PaginationAmountText): string {\n  return `${from}-${to} of ${total}`;\n}\n\nconst Pagination: FunctionComponent<PaginationProps> = ({\n  pageIndex,\n  perPage,\n  pageSizes = [10, 20, 50],\n  totalPages,\n  totalItems,\n  setPageSize,\n  canNextPage,\n  gotoPage,\n  canPreviousPage,\n  previousPageHandler,\n  nextPageHandler,\n  parentElementId,\n  paginationAmount = '',\n  labelPerPage = '',\n}: PaginationProps) => {\n  const selectElementId = `${parentElementId}-pagination-select-per-page`;\n\n  const selectValues = pageSizes.map((size) => ({\n    id: size,\n    label: size,\n    value: size,\n  }));\n\n  const paginationAmountData = getPaginationAmountData(perPage, pageIndex + 1, totalItems);\n  const paginationAmountText = paginationAmount || getPaginationAmountText(paginationAmountData);\n\n  return (\n    <StyledPagination>\n      <StyledPaginationPerPage>\n        {labelPerPage && (\n          <Label\n            label={labelPerPage}\n            for={selectElementId}\n          />\n        )}\n        <StyledPaginationSelect>\n          <Select\n            id={selectElementId}\n            onChange={({value}: SelectValue) => {\n              setPageSize(value);\n            }}\n            options={selectValues}\n            value={selectValues.find(({value}) => value === perPage)}\n          />\n        </StyledPaginationSelect>\n      </StyledPaginationPerPage>\n      <StyledPaginationAmount>\n        {paginationAmountText}\n      </StyledPaginationAmount>\n      <StyledPaginationActions>\n        <StyledPaginationAction>\n          <ArrowButton\n            type={ARROW_TYPE.FIRST}\n            isDisabled={!canPreviousPage}\n            elementId={`${parentElementId}-pagination-first-page-button`}\n            onClick={() => gotoPage(0)}\n          />\n        </StyledPaginationAction>\n        <StyledPaginationAction>\n          <ArrowButton\n            type={ARROW_TYPE.PREVIOUS}\n            isDisabled={!canPreviousPage}\n            elementId={`${parentElementId}-pagination-previous-page-button`}\n            onClick={previousPageHandler}\n          />\n        </StyledPaginationAction>\n        <StyledPaginationAction>\n          <ArrowButton\n            type={ARROW_TYPE.NEXT}\n            isDisabled={!canNextPage}\n            elementId={`${parentElementId}-pagination-next-page-button`}\n            onClick={nextPageHandler}\n          />\n        </StyledPaginationAction>\n        <StyledPaginationAction>\n          <ArrowButton\n            type={ARROW_TYPE.LAST}\n            isDisabled={!canNextPage}\n            elementId={`${parentElementId}-pagination-last-page-button`}\n            onClick={() => gotoPage(totalPages - 1)}\n          />\n        </StyledPaginationAction>\n      </StyledPaginationActions>\n    </StyledPagination>\n  );\n};\n\nexport default Pagination;\n"],"names":["StyledPagination","styled","div","StyledPaginationPerPage","spacing","StyledPaginationSelect","StyledPaginationAmount","StyledPaginationActions","StyledPaginationAction","getPaginationAmountData","perPage","page","total","count","from","to","Math","min","getPaginationAmountText","Pagination","pageIndex","pageSizes","totalPages","totalItems","setPageSize","canNextPage","gotoPage","canPreviousPage","previousPageHandler","nextPageHandler","parentElementId","paginationAmount","labelPerPage","selectElementId","selectValues","map","size","id","label","value","paginationAmountData","paginationAmountText","React","Label","Select","onChange","options","find","ArrowButton","type","ARROW_TYPE","FIRST","isDisabled","elementId","onClick","PREVIOUS","NEXT","LAST"],"mappings":";;;;;;;;;;;;;;;;;AAGA,IAAMA,gBAAgB,gBAAGC,MAAM,CAACC,GAAV,mIAAtB;AAKA,IAAMC,uBAAuB,gBAAGF,MAAM,CAACC,GAAV,mPAGXE,OAAO,GAAG,CAHC,EAMbA,OAAO,GAAG,CANG,CAA7B;AAcA,IAAMC,sBAAsB,gBAAGJ,MAAM,CAACC,GAAV,2GAA5B;AAIA,IAAMI,sBAAsB,gBAAGL,MAAM,CAACC,GAAV,qHACVE,OAAO,GAAG,CADA,CAA5B;AAIA,IAAMG,uBAAuB,gBAAGN,MAAM,CAACC,GAAV,6GAA7B;AAIA,IAAMM,sBAAsB,gBAAGP,MAAM,CAACC,GAAV,oJAERE,OAAO,GAAG,CAFF,CAA5B;;AClBA,SAASK,uBAAT,CAAiCC,OAAjC,EAAkDC,IAAlD,EAAgEC,KAAhE;EACE,IAAMC,KAAK,GAAGH,OAAO,IAAIC,IAAI,GAAG,CAAX,CAArB;EAEA,OAAO;IACLG,IAAI,EAAED,KAAK,GAAG,CADT;IAELE,EAAE,EAAEC,IAAI,CAACC,GAAL,CAASJ,KAAK,GAAGH,OAAjB,EAA0BE,KAA1B,CAFC;IAGLA,KAAK,EAALA;GAHF;AAKD;;AAED,SAASM,uBAAT;MAAkCJ,YAAAA;MAAMC,UAAAA;MAAIH,aAAAA;EAC1C,OAAUE,IAAV,SAAkBC,EAAlB,YAA2BH,KAA3B;AACD;;AAED,IAAMO,UAAU,GAAuC,SAAjDA,UAAiD;MACrDC,kBAAAA;MACAV,gBAAAA;8BACAW;MAAAA,yCAAY,CAAC,EAAD,EAAK,EAAL,EAAS,EAAT;MACZC,mBAAAA;MACAC,mBAAAA;MACAC,oBAAAA;MACAC,oBAAAA;MACAC,iBAAAA;MACAC,wBAAAA;MACAC,4BAAAA;MACAC,wBAAAA;MACAC,wBAAAA;oCACAC;MAAAA,sDAAmB;iCACnBC;MAAAA,+CAAe;EAEf,IAAMC,eAAe,GAAMH,eAAN,gCAArB;EAEA,IAAMI,YAAY,GAAGb,SAAS,CAACc,GAAV,CAAc,UAACC,IAAD;IAAA,OAAW;MAC5CC,EAAE,EAAED,IADwC;MAE5CE,KAAK,EAAEF,IAFqC;MAG5CG,KAAK,EAAEH;KAH0B;GAAd,CAArB;EAMA,IAAMI,oBAAoB,GAAG/B,uBAAuB,CAACC,OAAD,EAAUU,SAAS,GAAG,CAAtB,EAAyBG,UAAzB,CAApD;EACA,IAAMkB,oBAAoB,GAAGV,gBAAgB,IAAIb,uBAAuB,CAACsB,oBAAD,CAAxE;EAEA,OACEE,mBAAA,CAAC1C,gBAAD,MAAA,EACE0C,mBAAA,CAACvC,uBAAD,MAAA,EACG6B,YAAY,IACXU,mBAAA,CAACC,KAAD;IACEL,KAAK,EAAEN;IACP,OAAKC;GAFP,CAFJ,EAOES,mBAAA,CAACrC,sBAAD,MAAA,EACEqC,mBAAA,CAACE,MAAD;IACEP,EAAE,EAAEJ;IACJY,QAAQ,EAAE;UAAEN,cAAAA;MACVf,WAAW,CAACe,KAAD,CAAX;;IAEFO,OAAO,EAAEZ;IACTK,KAAK,EAAEL,YAAY,CAACa,IAAb,CAAkB;MAAA,IAAER,KAAF,SAAEA,KAAF;MAAA,OAAaA,KAAK,KAAK7B,OAAvB;KAAlB;GANT,CADF,CAPF,CADF,EAmBEgC,mBAAA,CAACpC,sBAAD,MAAA,EACGmC,oBADH,CAnBF,EAsBEC,mBAAA,CAACnC,uBAAD,MAAA,EACEmC,mBAAA,CAAClC,sBAAD,MAAA,EACEkC,mBAAA,CAACM,WAAD;IACEC,IAAI,EAAEC,UAAU,CAACC;IACjBC,UAAU,EAAE,CAACzB;IACb0B,SAAS,EAAKvB,eAAL;IACTwB,OAAO,EAAE;MAAA,OAAM5B,QAAQ,CAAC,CAAD,CAAd;;GAJX,CADF,CADF,EASEgB,mBAAA,CAAClC,sBAAD,MAAA,EACEkC,mBAAA,CAACM,WAAD;IACEC,IAAI,EAAEC,UAAU,CAACK;IACjBH,UAAU,EAAE,CAACzB;IACb0B,SAAS,EAAKvB,eAAL;IACTwB,OAAO,EAAE1B;GAJX,CADF,CATF,EAiBEc,mBAAA,CAAClC,sBAAD,MAAA,EACEkC,mBAAA,CAACM,WAAD;IACEC,IAAI,EAAEC,UAAU,CAACM;IACjBJ,UAAU,EAAE,CAAC3B;IACb4B,SAAS,EAAKvB,eAAL;IACTwB,OAAO,EAAEzB;GAJX,CADF,CAjBF,EAyBEa,mBAAA,CAAClC,sBAAD,MAAA,EACEkC,mBAAA,CAACM,WAAD;IACEC,IAAI,EAAEC,UAAU,CAACO;IACjBL,UAAU,EAAE,CAAC3B;IACb4B,SAAS,EAAKvB,eAAL;IACTwB,OAAO,EAAE;MAAA,OAAM5B,QAAQ,CAACJ,UAAU,GAAG,CAAd,CAAd;;GAJX,CADF,CAzBF,CAtBF,CADF;AA2DD,CAtFD;;;;"}

package/dist/styles.d.ts

@@ -0,0 +1,7 @@
+declare const StyledPagination: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledPaginationPerPage: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledPaginationSelect: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledPaginationAmount: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledPaginationActions: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledPaginationAction: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { StyledPagination, StyledPaginationPerPage, StyledPaginationSelect, StyledPaginationAmount, StyledPaginationActions, StyledPaginationAction, };

package/dist/types.d.ts

@@ -0,0 +1,26 @@
+import { ReactElement, ReactNode } from 'react';
+declare type PaginationProps = {
+    paginationAmount?: string | ReactNode | ReactElement;
+    parentElementId: string;
+    labelPerPage?: string;
+    pageSizes?: Array<string | number>;
+    pageIndex: number;
+    perPage: number;
+    totalPages: number;
+    totalItems: number;
+    canNextPage: boolean;
+    canPreviousPage: boolean;
+    nextPageHandler: () => void;
+    previousPageHandler: () => void;
+    setPageSize: (size: number) => void;
+    gotoPage: (page: number) => void;
+};
+declare type PaginationAmountText = {
+    from: number;
+    to: number;
+    total: number;
+};
+declare type SelectValue = {
+    value: number;
+};
+export { PaginationProps, PaginationAmountText, SelectValue };

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@propellerads/pagination",
+  "version": "1.1.0",
+  "repository": "https://github.com/propellerads/ui-components",
+  "author": "n.milantyeva@propellerads.net",
+  "license": "MIT",
+  "private": false,
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "prepublishOnly": "tsdx build",
+    "start": "tsdx watch",
+    "build": "tsdx build"
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "module": "dist/pagination.esm.js",
+  "devDependencies": {
+    "@types/react": "^16.9.49",
+    "@types/react-dom": "^16.9.8",
+    "@types/styled-components": "^5.1.3",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "tsdx": "^0.13.3",
+    "tslib": "^2.0.1",
+    "typescript": "^4.0.2"
+  },
+  "dependencies": {
+    "@propellerads/stylevariables": "^1.3.0",
+    "@propellerads/arrow-button": "^1.2.0",
+    "@propellerads/label": "^2.1.0",
+    "@propellerads/select": "^2.1.2",
+    "styled-components": "^5.2.0"
+  }
+}

package/src/allowJavaScriptModules.ts

@@ -0,0 +1 @@
+declare module '*';

package/src/index.tsx

@@ -0,0 +1,119 @@
+import React, {FunctionComponent} from 'react';
+
+import ArrowButton, {ARROW_TYPE} from '@propellerads/arrow-button';
+import Label from '@propellerads/label';
+import Select from '@propellerads/select';
+
+import {PaginationAmountText, PaginationProps, SelectValue} from 'types';
+import {
+  StyledPagination,
+  StyledPaginationPerPage,
+  StyledPaginationSelect,
+  StyledPaginationAmount,
+  StyledPaginationActions,
+  StyledPaginationAction,
+} from './styles';
+
+function getPaginationAmountData(perPage: number, page: number, total: number): PaginationAmountText {
+  const count = perPage * (page - 1);
+
+  return {
+    from: count + 1,
+    to: Math.min(count + perPage, total),
+    total,
+  };
+}
+
+function getPaginationAmountText({from, to, total}: PaginationAmountText): string {
+  return `${from}-${to} of ${total}`;
+}
+
+const Pagination: FunctionComponent<PaginationProps> = ({
+  pageIndex,
+  perPage,
+  pageSizes = [10, 20, 50],
+  totalPages,
+  totalItems,
+  setPageSize,
+  canNextPage,
+  gotoPage,
+  canPreviousPage,
+  previousPageHandler,
+  nextPageHandler,
+  parentElementId,
+  paginationAmount = '',
+  labelPerPage = '',
+}: PaginationProps) => {
+  const selectElementId = `${parentElementId}-pagination-select-per-page`;
+
+  const selectValues = pageSizes.map((size) => ({
+    id: size,
+    label: size,
+    value: size,
+  }));
+
+  const paginationAmountData = getPaginationAmountData(perPage, pageIndex + 1, totalItems);
+  const paginationAmountText = paginationAmount || getPaginationAmountText(paginationAmountData);
+
+  return (
+    <StyledPagination>
+      <StyledPaginationPerPage>
+        {labelPerPage && (
+          <Label
+            label={labelPerPage}
+            for={selectElementId}
+          />
+        )}
+        <StyledPaginationSelect>
+          <Select
+            id={selectElementId}
+            onChange={({value}: SelectValue) => {
+              setPageSize(value);
+            }}
+            options={selectValues}
+            value={selectValues.find(({value}) => value === perPage)}
+          />
+        </StyledPaginationSelect>
+      </StyledPaginationPerPage>
+      <StyledPaginationAmount>
+        {paginationAmountText}
+      </StyledPaginationAmount>
+      <StyledPaginationActions>
+        <StyledPaginationAction>
+          <ArrowButton
+            type={ARROW_TYPE.FIRST}
+            isDisabled={!canPreviousPage}
+            elementId={`${parentElementId}-pagination-first-page-button`}
+            onClick={() => gotoPage(0)}
+          />
+        </StyledPaginationAction>
+        <StyledPaginationAction>
+          <ArrowButton
+            type={ARROW_TYPE.PREVIOUS}
+            isDisabled={!canPreviousPage}
+            elementId={`${parentElementId}-pagination-previous-page-button`}
+            onClick={previousPageHandler}
+          />
+        </StyledPaginationAction>
+        <StyledPaginationAction>
+          <ArrowButton
+            type={ARROW_TYPE.NEXT}
+            isDisabled={!canNextPage}
+            elementId={`${parentElementId}-pagination-next-page-button`}
+            onClick={nextPageHandler}
+          />
+        </StyledPaginationAction>
+        <StyledPaginationAction>
+          <ArrowButton
+            type={ARROW_TYPE.LAST}
+            isDisabled={!canNextPage}
+            elementId={`${parentElementId}-pagination-last-page-button`}
+            onClick={() => gotoPage(totalPages - 1)}
+          />
+        </StyledPaginationAction>
+      </StyledPaginationActions>
+    </StyledPagination>
+  );
+};
+
+export default Pagination;

package/src/styles.ts

@@ -0,0 +1,48 @@
+import styled from 'styled-components';
+import {spacing} from '@propellerads/stylevariables';
+
+const StyledPagination = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const StyledPaginationPerPage = styled.div`
+  display: flex;
+  align-items: center;
+  margin-right: ${spacing * 9}px;
+  
+  label {
+    margin: 0 ${spacing * 3}px 0 0;
+  }
+
+  select {
+    width: 66px;
+  }
+`;
+
+const StyledPaginationSelect = styled.div`
+  width: 70px;
+`;
+
+const StyledPaginationAmount = styled.div`
+  margin-right: ${spacing * 8}px;
+`;
+
+const StyledPaginationActions = styled.div`
+  display: flex;
+`;
+
+const StyledPaginationAction = styled.div`
+  &:not(:last-child) {
+    margin-right: ${spacing * 2}px;
+  }
+`;
+
+export {
+  StyledPagination,
+  StyledPaginationPerPage,
+  StyledPaginationSelect,
+  StyledPaginationAmount,
+  StyledPaginationActions,
+  StyledPaginationAction,
+};

package/src/types.ts

@@ -0,0 +1,30 @@
+import {ReactElement, ReactNode} from 'react';
+
+type PaginationProps = {
+  paginationAmount?: string | ReactNode | ReactElement,
+  parentElementId: string,
+  labelPerPage?: string,
+  pageSizes?: Array<string | number>,
+  pageIndex: number,
+  perPage: number,
+  totalPages: number,
+  totalItems: number,
+  canNextPage: boolean,
+  canPreviousPage: boolean,
+  nextPageHandler: () => void,
+  previousPageHandler: () => void,
+  setPageSize: (size: number) => void,
+  gotoPage: (page: number) => void,
+}
+
+type PaginationAmountText = {
+  from: number,
+  to: number,
+  total: number
+}
+
+type SelectValue = {
+  value: number
+}
+
+export {PaginationProps, PaginationAmountText, SelectValue};