@propellerads/pagination 2.0.0 → 2.0.2
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.
|
@@ -12,13 +12,8 @@ var Select = _interopDefault(require('@propellerads/select'));
|
|
|
12
12
|
var styled = _interopDefault(require('styled-components'));
|
|
13
13
|
var stylevariables = require('@propellerads/stylevariables');
|
|
14
14
|
|
|
15
|
-
function _taggedTemplateLiteralLoose(
|
|
16
|
-
|
|
17
|
-
raw = strings.slice(0);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
strings.raw = raw;
|
|
21
|
-
return strings;
|
|
15
|
+
function _taggedTemplateLiteralLoose(e, t) {
|
|
16
|
+
return t || (t = e.slice(0)), e.raw = t, e;
|
|
22
17
|
}
|
|
23
18
|
|
|
24
19
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
@@ -37,32 +32,30 @@ function getPaginationAmountData(perPage, page, total) {
|
|
|
37
32
|
total: total
|
|
38
33
|
};
|
|
39
34
|
}
|
|
40
|
-
|
|
41
35
|
function getPaginationAmountText(_ref) {
|
|
42
36
|
var from = _ref.from,
|
|
43
|
-
|
|
44
|
-
|
|
37
|
+
to = _ref.to,
|
|
38
|
+
total = _ref.total;
|
|
45
39
|
return from + "-" + to + " of " + total;
|
|
46
40
|
}
|
|
47
|
-
|
|
48
41
|
var Pagination = function Pagination(_ref2) {
|
|
49
42
|
var pageIndex = _ref2.pageIndex,
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
43
|
+
perPage = _ref2.perPage,
|
|
44
|
+
_ref2$pageSizes = _ref2.pageSizes,
|
|
45
|
+
pageSizes = _ref2$pageSizes === void 0 ? [10, 20, 50] : _ref2$pageSizes,
|
|
46
|
+
totalPages = _ref2.totalPages,
|
|
47
|
+
totalItems = _ref2.totalItems,
|
|
48
|
+
setPageSize = _ref2.setPageSize,
|
|
49
|
+
canNextPage = _ref2.canNextPage,
|
|
50
|
+
gotoPage = _ref2.gotoPage,
|
|
51
|
+
canPreviousPage = _ref2.canPreviousPage,
|
|
52
|
+
previousPageHandler = _ref2.previousPageHandler,
|
|
53
|
+
nextPageHandler = _ref2.nextPageHandler,
|
|
54
|
+
parentElementId = _ref2.parentElementId,
|
|
55
|
+
_ref2$paginationAmoun = _ref2.paginationAmount,
|
|
56
|
+
paginationAmount = _ref2$paginationAmoun === void 0 ? '' : _ref2$paginationAmoun,
|
|
57
|
+
_ref2$labelPerPage = _ref2.labelPerPage,
|
|
58
|
+
labelPerPage = _ref2$labelPerPage === void 0 ? '' : _ref2$labelPerPage;
|
|
66
59
|
var selectElementId = parentElementId + "-pagination-select-per-page";
|
|
67
60
|
var selectValues = pageSizes.map(function (size) {
|
|
68
61
|
return {
|
|
@@ -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, {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":"
|
|
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","_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","ARROW_TYPE","FIRST","isDisabled","elementId","onClick","PREVIOUS","NEXT","LAST"],"mappings":"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"}
|
|
@@ -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, {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,
|
|
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","_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","ARROW_TYPE","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,aAAWC,MACjBC,YAAatC,EACbuC,UAAcpC,kCACdqC,QAAS,WAAF,OAAQzC,EAAS,OAG5B0B,gBAACtC,OACCsC,gBAACS,GACCC,KAAMC,aAAWK,SACjBH,YAAatC,EACbuC,UAAcpC,qCACdqC,QAASvC,KAGbwB,gBAACtC,OACCsC,gBAACS,GACCC,KAAMC,aAAWM,KACjBJ,YAAaxC,EACbyC,UAAcpC,iCACdqC,QAAStC,KAGbuB,gBAACtC,OACCsC,gBAACS,GACCC,KAAMC,aAAWO,KACjBL,YAAaxC,EACbyC,UAAcpC,iCACdqC,QAAS,WAAF,OAAQzC,EAASJ,EAAa"}
|
package/dist/pagination.esm.js
CHANGED
|
@@ -5,13 +5,8 @@ import Select from '@propellerads/select';
|
|
|
5
5
|
import styled from 'styled-components';
|
|
6
6
|
import { spacing } from '@propellerads/stylevariables';
|
|
7
7
|
|
|
8
|
-
function _taggedTemplateLiteralLoose(
|
|
9
|
-
|
|
10
|
-
raw = strings.slice(0);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
strings.raw = raw;
|
|
14
|
-
return strings;
|
|
8
|
+
function _taggedTemplateLiteralLoose(e, t) {
|
|
9
|
+
return t || (t = e.slice(0)), e.raw = t, e;
|
|
15
10
|
}
|
|
16
11
|
|
|
17
12
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
@@ -30,32 +25,30 @@ function getPaginationAmountData(perPage, page, total) {
|
|
|
30
25
|
total: total
|
|
31
26
|
};
|
|
32
27
|
}
|
|
33
|
-
|
|
34
28
|
function getPaginationAmountText(_ref) {
|
|
35
29
|
var from = _ref.from,
|
|
36
|
-
|
|
37
|
-
|
|
30
|
+
to = _ref.to,
|
|
31
|
+
total = _ref.total;
|
|
38
32
|
return from + "-" + to + " of " + total;
|
|
39
33
|
}
|
|
40
|
-
|
|
41
34
|
var Pagination = function Pagination(_ref2) {
|
|
42
35
|
var pageIndex = _ref2.pageIndex,
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
36
|
+
perPage = _ref2.perPage,
|
|
37
|
+
_ref2$pageSizes = _ref2.pageSizes,
|
|
38
|
+
pageSizes = _ref2$pageSizes === void 0 ? [10, 20, 50] : _ref2$pageSizes,
|
|
39
|
+
totalPages = _ref2.totalPages,
|
|
40
|
+
totalItems = _ref2.totalItems,
|
|
41
|
+
setPageSize = _ref2.setPageSize,
|
|
42
|
+
canNextPage = _ref2.canNextPage,
|
|
43
|
+
gotoPage = _ref2.gotoPage,
|
|
44
|
+
canPreviousPage = _ref2.canPreviousPage,
|
|
45
|
+
previousPageHandler = _ref2.previousPageHandler,
|
|
46
|
+
nextPageHandler = _ref2.nextPageHandler,
|
|
47
|
+
parentElementId = _ref2.parentElementId,
|
|
48
|
+
_ref2$paginationAmoun = _ref2.paginationAmount,
|
|
49
|
+
paginationAmount = _ref2$paginationAmoun === void 0 ? '' : _ref2$paginationAmoun,
|
|
50
|
+
_ref2$labelPerPage = _ref2.labelPerPage,
|
|
51
|
+
labelPerPage = _ref2$labelPerPage === void 0 ? '' : _ref2$labelPerPage;
|
|
59
52
|
var selectElementId = parentElementId + "-pagination-select-per-page";
|
|
60
53
|
var selectValues = pageSizes.map(function (size) {
|
|
61
54
|
return {
|
|
@@ -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, {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":"
|
|
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","_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","ARROW_TYPE","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.2",
|
|
4
4
|
"repository": "https://github.com/propellerads/ui-components",
|
|
5
5
|
"author": "n.milantyeva@propellerads.net",
|
|
6
6
|
"license": "MIT",
|
|
@@ -15,23 +15,22 @@
|
|
|
15
15
|
"node": ">=10"
|
|
16
16
|
},
|
|
17
17
|
"scripts": {
|
|
18
|
-
"prepublishOnly": "tsdx build",
|
|
19
18
|
"start": "tsdx watch",
|
|
20
19
|
"build": "tsdx build"
|
|
21
20
|
},
|
|
22
21
|
"module": "dist/pagination.esm.js",
|
|
23
22
|
"devDependencies": {
|
|
24
|
-
"tsdx": "
|
|
25
|
-
"tslib": "
|
|
26
|
-
"typescript": "
|
|
23
|
+
"tsdx": "0.13.3",
|
|
24
|
+
"tslib": "2.4.0",
|
|
25
|
+
"typescript": "4.9.5",
|
|
27
26
|
"@types/styled-components": "5.1.34",
|
|
28
|
-
"@types/react": "
|
|
27
|
+
"@types/react": "18.3.24"
|
|
29
28
|
},
|
|
30
29
|
"dependencies": {
|
|
31
|
-
"@propellerads/stylevariables": "^
|
|
32
|
-
"@propellerads/arrow-button": "^
|
|
33
|
-
"@propellerads/label": "^
|
|
34
|
-
"@propellerads/select": "^
|
|
30
|
+
"@propellerads/stylevariables": "^2.0.1",
|
|
31
|
+
"@propellerads/arrow-button": "^3.0.1",
|
|
32
|
+
"@propellerads/label": "^4.0.1",
|
|
33
|
+
"@propellerads/select": "^4.0.0"
|
|
35
34
|
},
|
|
36
35
|
"peerDependencies": {
|
|
37
36
|
"react": ">=18 <19",
|