@propellerads/pagination 2.0.1 → 2.0.3
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 +4 -4
- 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 +5 -5
- package/dist/pagination.esm.js.map +1 -1
- package/package.json +4 -4
- package/src/index.tsx +5 -5
|
@@ -81,24 +81,24 @@ var Pagination = function Pagination(_ref2) {
|
|
|
81
81
|
return value === perPage;
|
|
82
82
|
})
|
|
83
83
|
}))), React.createElement(StyledPaginationAmount, null, paginationAmountText), React.createElement(StyledPaginationActions, null, React.createElement(StyledPaginationAction, null, React.createElement(ArrowButton__default, {
|
|
84
|
-
type: ArrowButton.
|
|
84
|
+
type: ArrowButton.ArrowType.First,
|
|
85
85
|
isDisabled: !canPreviousPage,
|
|
86
86
|
elementId: parentElementId + "-pagination-first-page-button",
|
|
87
87
|
onClick: function onClick() {
|
|
88
88
|
return gotoPage(0);
|
|
89
89
|
}
|
|
90
90
|
})), React.createElement(StyledPaginationAction, null, React.createElement(ArrowButton__default, {
|
|
91
|
-
type: ArrowButton.
|
|
91
|
+
type: ArrowButton.ArrowType.Previous,
|
|
92
92
|
isDisabled: !canPreviousPage,
|
|
93
93
|
elementId: parentElementId + "-pagination-previous-page-button",
|
|
94
94
|
onClick: previousPageHandler
|
|
95
95
|
})), React.createElement(StyledPaginationAction, null, React.createElement(ArrowButton__default, {
|
|
96
|
-
type: ArrowButton.
|
|
96
|
+
type: ArrowButton.ArrowType.Next,
|
|
97
97
|
isDisabled: !canNextPage,
|
|
98
98
|
elementId: parentElementId + "-pagination-next-page-button",
|
|
99
99
|
onClick: nextPageHandler
|
|
100
100
|
})), React.createElement(StyledPaginationAction, null, React.createElement(ArrowButton__default, {
|
|
101
|
-
type: ArrowButton.
|
|
101
|
+
type: ArrowButton.ArrowType.Last,
|
|
102
102
|
isDisabled: !canNextPage,
|
|
103
103
|
elementId: parentElementId + "-pagination-last-page-button",
|
|
104
104
|
onClick: function onClick() {
|
|
@@ -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\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, {
|
|
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, {ArrowType} 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={ArrowType.First}\n isDisabled={!canPreviousPage}\n elementId={`${parentElementId}-pagination-first-page-button`}\n onClick={() => gotoPage(0)}\n />\n </StyledPaginationAction>\n <StyledPaginationAction>\n <ArrowButton\n type={ArrowType.Previous}\n isDisabled={!canPreviousPage}\n elementId={`${parentElementId}-pagination-previous-page-button`}\n onClick={previousPageHandler}\n />\n </StyledPaginationAction>\n <StyledPaginationAction>\n <ArrowButton\n type={ArrowType.Next}\n isDisabled={!canNextPage}\n elementId={`${parentElementId}-pagination-next-page-button`}\n onClick={nextPageHandler}\n />\n </StyledPaginationAction>\n <StyledPaginationAction>\n <ArrowButton\n type={ArrowType.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","_templateObject","_taggedTemplateLiteralLoose","StyledPaginationPerPage","_templateObject2","spacing","StyledPaginationSelect","_templateObject3","StyledPaginationAmount","_templateObject4","StyledPaginationActions","_templateObject5","StyledPaginationAction","_templateObject6","getPaginationAmountData","perPage","page","total","count","from","to","Math","min","getPaginationAmountText","_ref","Pagination","_ref2","pageIndex","_ref2$pageSizes","pageSizes","totalPages","totalItems","setPageSize","canNextPage","gotoPage","canPreviousPage","previousPageHandler","nextPageHandler","parentElementId","_ref2$paginationAmoun","paginationAmount","_ref2$labelPerPage","labelPerPage","selectElementId","selectValues","map","size","id","label","value","paginationAmountData","paginationAmountText","React","Label","Select","onChange","_ref3","options","find","_ref4","ArrowButton","type","ArrowType","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")),
|
|
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")),p=require("@propellerads/arrow-button"),u=e(p),s=e(require("@propellerads/label")),c=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),b=d.div(a||(a=m(["\n width: 70px;\n"]))),x=d.div(l||(l=m(["\n margin-right: ","px;\n"])),8*g.spacing),E=d.div(r||(r=m(["\n display: flex;\n"]))),y=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,P=e.canPreviousPage,h=e.previousPageHandler,w=e.nextPageHandler,I=e.parentElementId,q=e.paginationAmount,A=void 0===q?"":q,C=e.labelPerPage,k=void 0===C?"":C,D=I+"-pagination-select-per-page",T=(void 0===l?[10,20,50]:l).map((function(e){return{id:e,label:e,value:e}})),j=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),z=A||(n=j).from+"-"+n.to+" of "+n.total;return o.createElement(f,null,o.createElement(v,null,k&&o.createElement(s,{label:k,for:D}),o.createElement(b,null,o.createElement(c,{id:D,onChange:function(e){d(e.value)},options:T,value:T.find((function(e){return e.value===a}))}))),o.createElement(x,null,z),o.createElement(E,null,o.createElement(y,null,o.createElement(u,{type:p.ArrowType.First,isDisabled:!P,elementId:I+"-pagination-first-page-button",onClick:function(){return m(0)}})),o.createElement(y,null,o.createElement(u,{type:p.ArrowType.Previous,isDisabled:!P,elementId:I+"-pagination-previous-page-button",onClick:h})),o.createElement(y,null,o.createElement(u,{type:p.ArrowType.Next,isDisabled:!g,elementId:I+"-pagination-next-page-button",onClick:w})),o.createElement(y,null,o.createElement(u,{type:p.ArrowType.Last,isDisabled:!g,elementId:I+"-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\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, {
|
|
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, {ArrowType} 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={ArrowType.First}\n isDisabled={!canPreviousPage}\n elementId={`${parentElementId}-pagination-first-page-button`}\n onClick={() => gotoPage(0)}\n />\n </StyledPaginationAction>\n <StyledPaginationAction>\n <ArrowButton\n type={ArrowType.Previous}\n isDisabled={!canPreviousPage}\n elementId={`${parentElementId}-pagination-previous-page-button`}\n onClick={previousPageHandler}\n />\n </StyledPaginationAction>\n <StyledPaginationAction>\n <ArrowButton\n type={ArrowType.Next}\n isDisabled={!canNextPage}\n elementId={`${parentElementId}-pagination-next-page-button`}\n onClick={nextPageHandler}\n />\n </StyledPaginationAction>\n <StyledPaginationAction>\n <ArrowButton\n type={ArrowType.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","_templateObject","_taggedTemplateLiteralLoose","StyledPaginationPerPage","_templateObject2","spacing","StyledPaginationSelect","_templateObject3","StyledPaginationAmount","_templateObject4","StyledPaginationActions","_templateObject5","StyledPaginationAction","_templateObject6","_ref2","_ref","pageIndex","perPage","_ref2$pageSizes","pageSizes","totalPages","totalItems","setPageSize","canNextPage","gotoPage","canPreviousPage","previousPageHandler","nextPageHandler","parentElementId","_ref2$paginationAmoun","paginationAmount","_ref2$labelPerPage","labelPerPage","selectElementId","selectValues","map","size","id","label","value","paginationAmountData","page","total","count","from","to","Math","min","getPaginationAmountData","paginationAmountText","React","Label","for","Select","onChange","_ref3","options","find","_ref4","ArrowButton","type","ArrowType","First","isDisabled","elementId","onClick","Previous","Next","Last"],"mappings":"uaAGA,IAAMA,EAAmBC,EAAOC,IAAGC,IAAAA,EAAAC,sDAK7BC,EAA0BJ,EAAOC,IAAGI,IAAAA,EAAAF,8JAGd,EAAVG,UAGQ,EAAVA,WAQVC,EAAyBP,EAAOC,IAAGO,IAAAA,EAAAL,4BAInCM,EAAyBT,EAAOC,IAAGS,IAAAA,EAAAP,mCACb,EAAVG,WAGZK,EAA0BX,EAAOC,IAAGW,IAAAA,EAAAT,8BAIpCU,EAAyBb,EAAOC,IAAGa,IAAAA,EAAAX,kEAEX,EAAVG,2BCNmC,SAAvCS,OAJgBC,EAK9BC,EAASF,EAATE,UACAC,EAAOH,EAAPG,QAAOC,EAAAJ,EACPK,UACAC,EAAUN,EAAVM,WACAC,EAAUP,EAAVO,WACAC,EAAWR,EAAXQ,YACAC,EAAWT,EAAXS,YACAC,EAAQV,EAARU,SACAC,EAAeX,EAAfW,gBACAC,EAAmBZ,EAAnBY,oBACAC,EAAeb,EAAfa,gBACAC,EAAed,EAAfc,gBAAeC,EAAAf,EACfgB,iBAAAA,WAAgBD,EAAG,GAAEA,EAAAE,EAAAjB,EACrBkB,aAAAA,WAAYD,EAAG,GAAEA,EAEXE,EAAqBL,gCAErBM,YAfGhB,EAAG,CAAC,GAAI,GAAI,IAAGA,GAeOiB,KAAI,SAACC,GAAI,MAAM,CAC5CC,GAAID,EACJE,MAAOF,EACPG,MAAOH,MAGHI,EAtCR,SAAiCvB,EAAiBwB,EAAcC,GAC9D,IAAMC,EAAQ1B,GAAWwB,EAAO,GAEhC,MAAO,CACLG,KAAMD,EAAQ,EACdE,GAAIC,KAAKC,IAAIJ,EAAQ1B,EAASyB,GAC9BA,MAAAA,GAgC2BM,CAAwB/B,EAASD,EAAY,EAAGK,GACvE4B,EAAuBnB,IA7BCf,EA6B2CyB,GA7BzCI,SAAQ7B,EAAF8B,UAAS9B,EAAL2B,MA+B1C,OACEQ,gBAACpD,OACCoD,gBAAC/C,OACE6B,GAAgBkB,gBAACC,GAAMb,MAAON,EAAcoB,IAAKnB,IAClDiB,gBAAC5C,OACC4C,gBAACG,GACChB,GAAIJ,EACJqB,SAAU,SAAFC,GACNjC,EADeiC,EAALhB,QAGZiB,QAAStB,EACTK,MAAOL,EAAauB,MAAK,SAAAC,GAAO,OAAAA,EAALnB,QAAqBtB,SAItDiC,gBAAC1C,OAAwByC,GACzBC,gBAACxC,OACCwC,gBAACtC,OACCsC,gBAACS,GACCC,KAAMC,YAAUC,MAChBC,YAAatC,EACbuC,UAAcpC,kCACdqC,QAAS,WAAF,OAAQzC,EAAS,OAG5B0B,gBAACtC,OACCsC,gBAACS,GACCC,KAAMC,YAAUK,SAChBH,YAAatC,EACbuC,UAAcpC,qCACdqC,QAASvC,KAGbwB,gBAACtC,OACCsC,gBAACS,GACCC,KAAMC,YAAUM,KAChBJ,YAAaxC,EACbyC,UAAcpC,iCACdqC,QAAStC,KAGbuB,gBAACtC,OACCsC,gBAACS,GACCC,KAAMC,YAAUO,KAChBL,YAAaxC,EACbyC,UAAcpC,iCACdqC,QAAS,WAAF,OAAQzC,EAASJ,EAAa"}
|
package/dist/pagination.esm.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import ArrowButton, {
|
|
2
|
+
import ArrowButton, { ArrowType } from '@propellerads/arrow-button';
|
|
3
3
|
import Label from '@propellerads/label';
|
|
4
4
|
import Select from '@propellerads/select';
|
|
5
5
|
import styled from 'styled-components';
|
|
@@ -74,24 +74,24 @@ var Pagination = function Pagination(_ref2) {
|
|
|
74
74
|
return value === perPage;
|
|
75
75
|
})
|
|
76
76
|
}))), React.createElement(StyledPaginationAmount, null, paginationAmountText), React.createElement(StyledPaginationActions, null, React.createElement(StyledPaginationAction, null, React.createElement(ArrowButton, {
|
|
77
|
-
type:
|
|
77
|
+
type: ArrowType.First,
|
|
78
78
|
isDisabled: !canPreviousPage,
|
|
79
79
|
elementId: parentElementId + "-pagination-first-page-button",
|
|
80
80
|
onClick: function onClick() {
|
|
81
81
|
return gotoPage(0);
|
|
82
82
|
}
|
|
83
83
|
})), React.createElement(StyledPaginationAction, null, React.createElement(ArrowButton, {
|
|
84
|
-
type:
|
|
84
|
+
type: ArrowType.Previous,
|
|
85
85
|
isDisabled: !canPreviousPage,
|
|
86
86
|
elementId: parentElementId + "-pagination-previous-page-button",
|
|
87
87
|
onClick: previousPageHandler
|
|
88
88
|
})), React.createElement(StyledPaginationAction, null, React.createElement(ArrowButton, {
|
|
89
|
-
type:
|
|
89
|
+
type: ArrowType.Next,
|
|
90
90
|
isDisabled: !canNextPage,
|
|
91
91
|
elementId: parentElementId + "-pagination-next-page-button",
|
|
92
92
|
onClick: nextPageHandler
|
|
93
93
|
})), React.createElement(StyledPaginationAction, null, React.createElement(ArrowButton, {
|
|
94
|
-
type:
|
|
94
|
+
type: ArrowType.Last,
|
|
95
95
|
isDisabled: !canNextPage,
|
|
96
96
|
elementId: parentElementId + "-pagination-last-page-button",
|
|
97
97
|
onClick: function onClick() {
|
|
@@ -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\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, {
|
|
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, {ArrowType} 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={ArrowType.First}\n isDisabled={!canPreviousPage}\n elementId={`${parentElementId}-pagination-first-page-button`}\n onClick={() => gotoPage(0)}\n />\n </StyledPaginationAction>\n <StyledPaginationAction>\n <ArrowButton\n type={ArrowType.Previous}\n isDisabled={!canPreviousPage}\n elementId={`${parentElementId}-pagination-previous-page-button`}\n onClick={previousPageHandler}\n />\n </StyledPaginationAction>\n <StyledPaginationAction>\n <ArrowButton\n type={ArrowType.Next}\n isDisabled={!canNextPage}\n elementId={`${parentElementId}-pagination-next-page-button`}\n onClick={nextPageHandler}\n />\n </StyledPaginationAction>\n <StyledPaginationAction>\n <ArrowButton\n type={ArrowType.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","_templateObject","_taggedTemplateLiteralLoose","StyledPaginationPerPage","_templateObject2","spacing","StyledPaginationSelect","_templateObject3","StyledPaginationAmount","_templateObject4","StyledPaginationActions","_templateObject5","StyledPaginationAction","_templateObject6","getPaginationAmountData","perPage","page","total","count","from","to","Math","min","getPaginationAmountText","_ref","Pagination","_ref2","pageIndex","_ref2$pageSizes","pageSizes","totalPages","totalItems","setPageSize","canNextPage","gotoPage","canPreviousPage","previousPageHandler","nextPageHandler","parentElementId","_ref2$paginationAmoun","paginationAmount","_ref2$labelPerPage","labelPerPage","selectElementId","selectValues","map","size","id","label","value","paginationAmountData","paginationAmountText","React","Label","Select","onChange","_ref3","options","find","_ref4","ArrowButton","type","ArrowType","First","isDisabled","elementId","onClick","Previous","Next","Last"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@propellerads/pagination",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.3",
|
|
4
4
|
"repository": "https://github.com/propellerads/ui-components",
|
|
5
5
|
"author": "n.milantyeva@propellerads.net",
|
|
6
6
|
"license": "MIT",
|
|
@@ -28,9 +28,9 @@
|
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@propellerads/stylevariables": "^2.0.1",
|
|
31
|
-
"@propellerads/arrow-button": "^
|
|
32
|
-
"@propellerads/label": "^4.0.
|
|
33
|
-
"@propellerads/select": "^
|
|
31
|
+
"@propellerads/arrow-button": "^4.0.0",
|
|
32
|
+
"@propellerads/label": "^4.0.3",
|
|
33
|
+
"@propellerads/select": "^4.0.0"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"react": ">=18 <19",
|
package/src/index.tsx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, {FunctionComponent} from 'react';
|
|
2
2
|
|
|
3
|
-
import ArrowButton, {
|
|
3
|
+
import ArrowButton, {ArrowType} from '@propellerads/arrow-button';
|
|
4
4
|
import Label from '@propellerads/label';
|
|
5
5
|
import Select from '@propellerads/select';
|
|
6
6
|
|
|
@@ -74,7 +74,7 @@ const Pagination: FunctionComponent<PaginationProps> = ({
|
|
|
74
74
|
<StyledPaginationActions>
|
|
75
75
|
<StyledPaginationAction>
|
|
76
76
|
<ArrowButton
|
|
77
|
-
type={
|
|
77
|
+
type={ArrowType.First}
|
|
78
78
|
isDisabled={!canPreviousPage}
|
|
79
79
|
elementId={`${parentElementId}-pagination-first-page-button`}
|
|
80
80
|
onClick={() => gotoPage(0)}
|
|
@@ -82,7 +82,7 @@ const Pagination: FunctionComponent<PaginationProps> = ({
|
|
|
82
82
|
</StyledPaginationAction>
|
|
83
83
|
<StyledPaginationAction>
|
|
84
84
|
<ArrowButton
|
|
85
|
-
type={
|
|
85
|
+
type={ArrowType.Previous}
|
|
86
86
|
isDisabled={!canPreviousPage}
|
|
87
87
|
elementId={`${parentElementId}-pagination-previous-page-button`}
|
|
88
88
|
onClick={previousPageHandler}
|
|
@@ -90,7 +90,7 @@ const Pagination: FunctionComponent<PaginationProps> = ({
|
|
|
90
90
|
</StyledPaginationAction>
|
|
91
91
|
<StyledPaginationAction>
|
|
92
92
|
<ArrowButton
|
|
93
|
-
type={
|
|
93
|
+
type={ArrowType.Next}
|
|
94
94
|
isDisabled={!canNextPage}
|
|
95
95
|
elementId={`${parentElementId}-pagination-next-page-button`}
|
|
96
96
|
onClick={nextPageHandler}
|
|
@@ -98,7 +98,7 @@ const Pagination: FunctionComponent<PaginationProps> = ({
|
|
|
98
98
|
</StyledPaginationAction>
|
|
99
99
|
<StyledPaginationAction>
|
|
100
100
|
<ArrowButton
|
|
101
|
-
type={
|
|
101
|
+
type={ArrowType.Last}
|
|
102
102
|
isDisabled={!canNextPage}
|
|
103
103
|
elementId={`${parentElementId}-pagination-last-page-button`}
|
|
104
104
|
onClick={() => gotoPage(totalPages - 1)}
|