@propellerads/pagination 1.2.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/pagination.cjs.development.js +1 -1
- package/dist/pagination.cjs.development.js.map +1 -1
- package/dist/pagination.cjs.production.min.js +1 -1
- package/dist/pagination.cjs.production.min.js.map +1 -1
- package/dist/pagination.esm.js +1 -1
- package/dist/pagination.esm.js.map +1 -1
- package/package.json +5 -6
- package/src/index.tsx +2 -9
- package/src/styles.ts +1 -1
- package/src/types.ts +21 -21
- package/CHANGELOG.md +0 -7
|
@@ -23,7 +23,7 @@ function _taggedTemplateLiteralLoose(strings, raw) {
|
|
|
23
23
|
|
|
24
24
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
25
25
|
var StyledPagination = /*#__PURE__*/styled.div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
26
|
-
var StyledPaginationPerPage = /*#__PURE__*/styled.div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: ", "px;\n
|
|
26
|
+
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);
|
|
27
27
|
var StyledPaginationSelect = /*#__PURE__*/styled.div(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 70px;\n"])));
|
|
28
28
|
var StyledPaginationAmount = /*#__PURE__*/styled.div(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: ", "px;\n"])), stylevariables.spacing * 8);
|
|
29
29
|
var StyledPaginationActions = /*#__PURE__*/styled.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 && <Label label={labelPerPage} for={selectElementId} />}\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>{paginationAmountText}</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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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"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
|
|
1
|
+
"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)}}))))};
|
|
2
2
|
//# sourceMappingURL=pagination.cjs.production.min.js.map
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 && <Label label={labelPerPage} for={selectElementId} />}\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>{paginationAmountText}</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,wKAGX,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,GAAgBkB,gBAACC,GAAMb,MAAON,EAAcoB,IAAKnB,IAClDiB,gBAACnC,OACCmC,gBAACG,GACChB,GAAIJ,EACJqB,SAAU,YACR9B,IADUe,QAGZgB,QAASrB,EACTK,MAAOL,EAAasB,MAAK,YAAA,SAAEjB,QAAqBnB,SAItD8B,gBAAClC,OAAwBiC,GACzBC,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
CHANGED
|
@@ -16,7 +16,7 @@ function _taggedTemplateLiteralLoose(strings, raw) {
|
|
|
16
16
|
|
|
17
17
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
18
18
|
var StyledPagination = /*#__PURE__*/styled.div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
|
|
19
|
-
var StyledPaginationPerPage = /*#__PURE__*/styled.div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: ", "px;\n
|
|
19
|
+
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);
|
|
20
20
|
var StyledPaginationSelect = /*#__PURE__*/styled.div(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 70px;\n"])));
|
|
21
21
|
var StyledPaginationAmount = /*#__PURE__*/styled.div(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: ", "px;\n"])), spacing * 8);
|
|
22
22
|
var StyledPaginationActions = /*#__PURE__*/styled.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 && <Label label={labelPerPage} for={selectElementId} />}\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>{paginationAmountText}</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,iPAGXE,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,IAAIU,mBAAA,CAACC,KAAD;IAAOL,KAAK,EAAEN;IAAc,OAAKC;GAAjC,CADnB,EAEES,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,CAFF,CADF,EAcEgC,mBAAA,CAACpC,sBAAD,MAAA,EAAyBmC,oBAAzB,CAdF,EAeEC,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,CAfF,CADF;AAoDD,CA/ED;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@propellerads/pagination",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"repository": "https://github.com/propellerads/ui-components",
|
|
5
5
|
"author": "n.milantyeva@propellerads.net",
|
|
6
6
|
"license": "MIT",
|
|
@@ -26,10 +26,10 @@
|
|
|
26
26
|
"typescript": "^4.0.2"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@propellerads/arrow-button": "^1.2.0",
|
|
30
|
-
"@propellerads/label": "^2.1.0",
|
|
31
|
-
"@propellerads/select": "^2.1.2",
|
|
32
29
|
"@propellerads/stylevariables": "^1.3.0",
|
|
30
|
+
"@propellerads/arrow-button": "^1.4.0",
|
|
31
|
+
"@propellerads/label": "^2.3.0",
|
|
32
|
+
"@propellerads/select": "^2.8.0",
|
|
33
33
|
"styled-components": "5.1.1"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
@@ -38,6 +38,5 @@
|
|
|
38
38
|
"@types/styled-components": "5.1.1",
|
|
39
39
|
"react": "^17.0.2",
|
|
40
40
|
"react-dom": "^17.0.2"
|
|
41
|
-
}
|
|
42
|
-
"gitHead": "82824622b4ac991d78567c473a46b5044cd72035"
|
|
41
|
+
}
|
|
43
42
|
}
|
package/src/index.tsx
CHANGED
|
@@ -58,12 +58,7 @@ const Pagination: FunctionComponent<PaginationProps> = ({
|
|
|
58
58
|
return (
|
|
59
59
|
<StyledPagination>
|
|
60
60
|
<StyledPaginationPerPage>
|
|
61
|
-
{labelPerPage &&
|
|
62
|
-
<Label
|
|
63
|
-
label={labelPerPage}
|
|
64
|
-
for={selectElementId}
|
|
65
|
-
/>
|
|
66
|
-
)}
|
|
61
|
+
{labelPerPage && <Label label={labelPerPage} for={selectElementId} />}
|
|
67
62
|
<StyledPaginationSelect>
|
|
68
63
|
<Select
|
|
69
64
|
id={selectElementId}
|
|
@@ -75,9 +70,7 @@ const Pagination: FunctionComponent<PaginationProps> = ({
|
|
|
75
70
|
/>
|
|
76
71
|
</StyledPaginationSelect>
|
|
77
72
|
</StyledPaginationPerPage>
|
|
78
|
-
<StyledPaginationAmount>
|
|
79
|
-
{paginationAmountText}
|
|
80
|
-
</StyledPaginationAmount>
|
|
73
|
+
<StyledPaginationAmount>{paginationAmountText}</StyledPaginationAmount>
|
|
81
74
|
<StyledPaginationActions>
|
|
82
75
|
<StyledPaginationAction>
|
|
83
76
|
<ArrowButton
|
package/src/styles.ts
CHANGED
package/src/types.ts
CHANGED
|
@@ -1,30 +1,30 @@
|
|
|
1
1
|
import {ReactElement, ReactNode} from 'react';
|
|
2
2
|
|
|
3
3
|
type PaginationProps = {
|
|
4
|
-
paginationAmount?: string | ReactNode | ReactElement
|
|
5
|
-
parentElementId: string
|
|
6
|
-
labelPerPage?: string
|
|
7
|
-
pageSizes?: Array<string | number
|
|
8
|
-
pageIndex: number
|
|
9
|
-
perPage: number
|
|
10
|
-
totalPages: number
|
|
11
|
-
totalItems: number
|
|
12
|
-
canNextPage: boolean
|
|
13
|
-
canPreviousPage: boolean
|
|
14
|
-
nextPageHandler: () => void
|
|
15
|
-
previousPageHandler: () => void
|
|
16
|
-
setPageSize: (size: number) => void
|
|
17
|
-
gotoPage: (page: number) => void
|
|
18
|
-
}
|
|
4
|
+
paginationAmount?: string | ReactNode | ReactElement;
|
|
5
|
+
parentElementId: string;
|
|
6
|
+
labelPerPage?: string;
|
|
7
|
+
pageSizes?: Array<string | number>;
|
|
8
|
+
pageIndex: number;
|
|
9
|
+
perPage: number;
|
|
10
|
+
totalPages: number;
|
|
11
|
+
totalItems: number;
|
|
12
|
+
canNextPage: boolean;
|
|
13
|
+
canPreviousPage: boolean;
|
|
14
|
+
nextPageHandler: () => void;
|
|
15
|
+
previousPageHandler: () => void;
|
|
16
|
+
setPageSize: (size: number) => void;
|
|
17
|
+
gotoPage: (page: number) => void;
|
|
18
|
+
};
|
|
19
19
|
|
|
20
20
|
type PaginationAmountText = {
|
|
21
|
-
from: number
|
|
22
|
-
to: number
|
|
23
|
-
total: number
|
|
24
|
-
}
|
|
21
|
+
from: number;
|
|
22
|
+
to: number;
|
|
23
|
+
total: number;
|
|
24
|
+
};
|
|
25
25
|
|
|
26
26
|
type SelectValue = {
|
|
27
|
-
value: number
|
|
28
|
-
}
|
|
27
|
+
value: number;
|
|
28
|
+
};
|
|
29
29
|
|
|
30
30
|
export {PaginationProps, PaginationAmountText, SelectValue};
|