@propellerads/pagination 2.0.4 → 3.0.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.
Files changed (17) hide show
  1. package/dist/index.d.ts +29 -4
  2. package/dist/index.js +117 -6
  3. package/dist/index.js.map +1 -0
  4. package/package.json +30 -25
  5. package/dist/allowJavaScriptModules.d.ts +0 -1
  6. package/dist/pagination.cjs.development.js +0 -111
  7. package/dist/pagination.cjs.development.js.map +0 -1
  8. package/dist/pagination.cjs.production.min.js +0 -2
  9. package/dist/pagination.cjs.production.min.js.map +0 -1
  10. package/dist/pagination.esm.js +0 -104
  11. package/dist/pagination.esm.js.map +0 -1
  12. package/dist/styles.d.ts +0 -7
  13. package/dist/types.d.ts +0 -26
  14. package/src/allowJavaScriptModules.ts +0 -1
  15. package/src/index.tsx +0 -111
  16. package/src/styles.ts +0 -48
  17. package/src/types.ts +0 -30
package/dist/index.d.ts CHANGED
@@ -1,4 +1,29 @@
1
- import { FunctionComponent } from 'react';
2
- import { PaginationProps } from 'types';
3
- declare const Pagination: FunctionComponent<PaginationProps>;
4
- export default Pagination;
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { ReactNode } from 'react';
3
+
4
+ type PaginationProps = {
5
+ paginationAmount?: ReactNode;
6
+ parentElementId: string;
7
+ labelPerPage?: string;
8
+ pageSizes?: Array<string | number>;
9
+ pageIndex: number;
10
+ perPage: number;
11
+ totalPages: number;
12
+ totalItems: number;
13
+ canNextPage: boolean;
14
+ canPreviousPage: boolean;
15
+ nextPageHandler: () => void;
16
+ previousPageHandler: () => void;
17
+ setPageSize: (size: number) => void;
18
+ gotoPage: (page: number) => void;
19
+ };
20
+ type PaginationAmountText = {
21
+ from: number;
22
+ to: number;
23
+ total: number;
24
+ };
25
+
26
+ declare const Pagination: ({ pageIndex, perPage, pageSizes, totalPages, totalItems, setPageSize, canNextPage, gotoPage, canPreviousPage, previousPageHandler, nextPageHandler, parentElementId, paginationAmount, labelPerPage, }: PaginationProps) => react_jsx_runtime.JSX.Element;
27
+
28
+ export { Pagination as default };
29
+ export type { PaginationAmountText, PaginationProps };
package/dist/index.js CHANGED
@@ -1,8 +1,119 @@
1
+ import { jsxs as g, jsx as t } from "react/jsx-runtime";
2
+ import r, { ArrowType as c } from "@propellerads/arrow-button";
3
+ import k from "@propellerads/label";
4
+ import w from "@propellerads/select";
5
+ import a from "styled-components";
6
+ import { spacing as p } from "@propellerads/stylevariables";
7
+ const T = a.div`
8
+ display: flex;
9
+ align-items: center;
10
+ `, j = a.div`
11
+ display: flex;
12
+ align-items: center;
13
+ margin-right: ${p * 9}px;
1
14
 
2
- 'use strict'
15
+ label {
16
+ margin: 0 ${p * 3}px 0 0;
17
+ }
3
18
 
4
- if (process.env.NODE_ENV === 'production') {
5
- module.exports = require('./pagination.cjs.production.min.js')
6
- } else {
7
- module.exports = require('./pagination.cjs.development.js')
8
- }
19
+ select {
20
+ width: 66px;
21
+ }
22
+ `, L = a.div`
23
+ width: 70px;
24
+ `, B = a.div`
25
+ margin-right: ${p * 8}px;
26
+ `, F = a.div`
27
+ display: flex;
28
+ `, d = a.div`
29
+ &:not(:last-child) {
30
+ margin-right: ${p * 2}px;
31
+ }
32
+ `, I = (n, e, o) => {
33
+ const s = n * (e - 1);
34
+ return {
35
+ from: s + 1,
36
+ to: Math.min(s + n, o),
37
+ total: o
38
+ };
39
+ }, M = ({ from: n, to: e, total: o }) => `${n}-${e} of ${o}`, O = ({
40
+ pageIndex: n,
41
+ perPage: e,
42
+ pageSizes: o = [10, 20, 50],
43
+ totalPages: s,
44
+ totalItems: b,
45
+ setPageSize: $,
46
+ canNextPage: m,
47
+ gotoPage: u,
48
+ canPreviousPage: h,
49
+ previousPageHandler: v,
50
+ nextPageHandler: A,
51
+ parentElementId: l,
52
+ paginationAmount: S = "",
53
+ labelPerPage: f = ""
54
+ }) => {
55
+ const x = `${l}-pagination-select-per-page`, y = o.map((i) => ({
56
+ id: i,
57
+ label: i,
58
+ value: i
59
+ })), D = y.find(({ value: i }) => i === e), C = I(e, n + 1, b), P = S || M(C);
60
+ return /* @__PURE__ */ g(T, { children: [
61
+ /* @__PURE__ */ g(j, { children: [
62
+ f && /* @__PURE__ */ t(k, { label: f, for: x }),
63
+ /* @__PURE__ */ t(L, { children: /* @__PURE__ */ t(
64
+ w,
65
+ {
66
+ id: x,
67
+ onChange: (i) => {
68
+ i !== null && $(Number(i.value));
69
+ },
70
+ options: y,
71
+ value: D
72
+ }
73
+ ) })
74
+ ] }),
75
+ /* @__PURE__ */ t(B, { children: P }),
76
+ /* @__PURE__ */ g(F, { children: [
77
+ /* @__PURE__ */ t(d, { children: /* @__PURE__ */ t(
78
+ r,
79
+ {
80
+ type: c.First,
81
+ isDisabled: !h,
82
+ elementId: `${l}-pagination-first-page-button`,
83
+ onClick: () => u(0)
84
+ }
85
+ ) }),
86
+ /* @__PURE__ */ t(d, { children: /* @__PURE__ */ t(
87
+ r,
88
+ {
89
+ type: c.Previous,
90
+ isDisabled: !h,
91
+ elementId: `${l}-pagination-previous-page-button`,
92
+ onClick: v
93
+ }
94
+ ) }),
95
+ /* @__PURE__ */ t(d, { children: /* @__PURE__ */ t(
96
+ r,
97
+ {
98
+ type: c.Next,
99
+ isDisabled: !m,
100
+ elementId: `${l}-pagination-next-page-button`,
101
+ onClick: A
102
+ }
103
+ ) }),
104
+ /* @__PURE__ */ t(d, { children: /* @__PURE__ */ t(
105
+ r,
106
+ {
107
+ type: c.Last,
108
+ isDisabled: !m,
109
+ elementId: `${l}-pagination-last-page-button`,
110
+ onClick: () => u(s - 1)
111
+ }
112
+ ) })
113
+ ] })
114
+ ] });
115
+ };
116
+ export {
117
+ O as default
118
+ };
119
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../src/style.tsx","../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 ArrowButton, {ArrowType} from '@propellerads/arrow-button';\nimport Label from '@propellerads/label';\nimport Select from '@propellerads/select';\nimport type {Option as SelectOption} from '@propellerads/select';\nimport type {PaginationAmountText, PaginationProps} from './types';\nimport {\n StyledPagination,\n StyledPaginationAction,\n StyledPaginationActions,\n StyledPaginationAmount,\n StyledPaginationPerPage,\n StyledPaginationSelect,\n} from './style';\n\nconst 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\nconst getPaginationAmountText = ({from, to, total}: PaginationAmountText): string => {\n return `${from}-${to} of ${total}`;\n};\n\nconst Pagination = ({\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: SelectOption[] = pageSizes.map((size) => ({\n id: size,\n label: size,\n value: size,\n }));\n const selectedPageSize = selectValues.find(({value}) => value === perPage);\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={(newValue) => {\n if (newValue === null) {\n return;\n }\n\n setPageSize(Number(newValue.value));\n }}\n options={selectValues}\n value={selectedPageSize}\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;\nexport type {PaginationAmountText, PaginationProps};\n"],"names":["StyledPagination","styled","StyledPaginationPerPage","spacing","StyledPaginationSelect","StyledPaginationAmount","StyledPaginationActions","StyledPaginationAction","getPaginationAmountData","perPage","page","total","count","getPaginationAmountText","from","to","Pagination","pageIndex","pageSizes","totalPages","totalItems","setPageSize","canNextPage","gotoPage","canPreviousPage","previousPageHandler","nextPageHandler","parentElementId","paginationAmount","labelPerPage","selectElementId","selectValues","size","selectedPageSize","value","paginationAmountData","paginationAmountText","jsxs","jsx","Label","Select","newValue","ArrowButton","ArrowType"],"mappings":"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"}
package/package.json CHANGED
@@ -1,39 +1,44 @@
1
1
  {
2
2
  "name": "@propellerads/pagination",
3
- "version": "2.0.4",
4
- "repository": "https://github.com/propellerads/ui-components",
5
- "author": "n.milantyeva@propellerads.net",
6
- "license": "MIT",
7
- "private": false,
8
- "main": "dist/index.js",
9
- "typings": "dist/index.d.ts",
3
+ "version": "3.0.0",
4
+ "type": "module",
5
+ "types": "dist/index.d.ts",
6
+ "exports": {
7
+ ".": {
8
+ "types": "./dist/index.d.ts",
9
+ "import": "./dist/index.js"
10
+ }
11
+ },
10
12
  "files": [
11
- "dist",
12
- "src"
13
+ "dist"
13
14
  ],
14
- "engines": {
15
- "node": ">=10"
15
+ "repository": "https://github.com/propellerads/ui-components.git",
16
+ "author": "n.milantyeva@propellerads.net",
17
+ "license": "MIT",
18
+ "bugs": {
19
+ "url": "https://github.com/propellerads/ui-components/issues"
16
20
  },
17
21
  "scripts": {
18
- "start": "tsdx watch",
19
- "build": "tsdx build"
20
- },
21
- "module": "dist/pagination.esm.js",
22
- "devDependencies": {
23
- "tsdx": "0.13.3",
24
- "tslib": "2.4.0",
25
- "typescript": "4.9.5",
26
- "@types/styled-components": "5.1.34",
27
- "@types/react": "18.3.24"
22
+ "build": "tsc && vite build && rollup -c rollup.dts.config.mjs"
28
23
  },
24
+ "homepage": "https://github.com/propellerads/ui-components#readme",
25
+ "private": false,
29
26
  "dependencies": {
30
- "@propellerads/stylevariables": "^2.0.1",
31
27
  "@propellerads/arrow-button": "^4.0.1",
32
28
  "@propellerads/label": "^4.0.4",
33
- "@propellerads/select": "^4.0.1"
29
+ "@propellerads/select": "^5.0.0",
30
+ "@propellerads/stylevariables": "^2.0.1"
34
31
  },
35
32
  "peerDependencies": {
36
- "react": ">=18 <19",
37
- "styled-components": "5.1.1"
33
+ "react": "^18.0.0 || ^19.0.0",
34
+ "styled-components": "^5.1.1 || ^6.0.0"
35
+ },
36
+ "devDependencies": {
37
+ "@types/react": "^19.2.14",
38
+ "@vitejs/plugin-react": "^5.1.4",
39
+ "rollup": "^4.58.0",
40
+ "rollup-plugin-dts": "^6.3.0",
41
+ "typescript": "^5.9.3",
42
+ "vite": "^7.3.1"
38
43
  }
39
44
  }
package/dist/allowJavaScriptModules.d.ts DELETED
@@ -1 +0,0 @@
1
- declare module '*';
package/dist/pagination.cjs.development.js DELETED
@@ -1,111 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
6
-
7
- var ArrowButton = require('@propellerads/arrow-button');
8
- var ArrowButton__default = _interopDefault(ArrowButton);
9
- var Label = _interopDefault(require('@propellerads/label'));
10
- var Select = _interopDefault(require('@propellerads/select'));
11
- var React = _interopDefault(require('react'));
12
- var styled = _interopDefault(require('styled-components'));
13
- var stylevariables = require('@propellerads/stylevariables');
14
-
15
- function _taggedTemplateLiteralLoose(e, t) {
16
- return t || (t = e.slice(0)), e.raw = t, e;
17
- }
18
-
19
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
20
- var StyledPagination = /*#__PURE__*/styled.div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
21
- 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);
22
- var StyledPaginationSelect = /*#__PURE__*/styled.div(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 70px;\n"])));
23
- var StyledPaginationAmount = /*#__PURE__*/styled.div(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: ", "px;\n"])), stylevariables.spacing * 8);
24
- var StyledPaginationActions = /*#__PURE__*/styled.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
25
- var StyledPaginationAction = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &:not(:last-child) {\n margin-right: ", "px;\n }\n"])), stylevariables.spacing * 2);
26
-
27
- function getPaginationAmountData(perPage, page, total) {
28
- var count = perPage * (page - 1);
29
- return {
30
- from: count + 1,
31
- to: Math.min(count + perPage, total),
32
- total: total
33
- };
34
- }
35
- function getPaginationAmountText(_ref) {
36
- var from = _ref.from,
37
- to = _ref.to,
38
- total = _ref.total;
39
- return from + "-" + to + " of " + total;
40
- }
41
- var Pagination = function Pagination(_ref2) {
42
- var pageIndex = _ref2.pageIndex,
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;
59
- var selectElementId = parentElementId + "-pagination-select-per-page";
60
- var selectValues = pageSizes.map(function (size) {
61
- return {
62
- id: size,
63
- label: size,
64
- value: size
65
- };
66
- });
67
- var paginationAmountData = getPaginationAmountData(perPage, pageIndex + 1, totalItems);
68
- var paginationAmountText = paginationAmount || getPaginationAmountText(paginationAmountData);
69
- return React.createElement(StyledPagination, null, React.createElement(StyledPaginationPerPage, null, labelPerPage && React.createElement(Label, {
70
- label: labelPerPage,
71
- "for": selectElementId
72
- }), React.createElement(StyledPaginationSelect, null, React.createElement(Select, {
73
- id: selectElementId,
74
- onChange: function onChange(_ref3) {
75
- var value = _ref3.value;
76
- setPageSize(value);
77
- },
78
- options: selectValues,
79
- value: selectValues.find(function (_ref4) {
80
- var value = _ref4.value;
81
- return value === perPage;
82
- })
83
- }))), React.createElement(StyledPaginationAmount, null, paginationAmountText), React.createElement(StyledPaginationActions, null, React.createElement(StyledPaginationAction, null, React.createElement(ArrowButton__default, {
84
- type: ArrowButton.ArrowType.First,
85
- isDisabled: !canPreviousPage,
86
- elementId: parentElementId + "-pagination-first-page-button",
87
- onClick: function onClick() {
88
- return gotoPage(0);
89
- }
90
- })), React.createElement(StyledPaginationAction, null, React.createElement(ArrowButton__default, {
91
- type: ArrowButton.ArrowType.Previous,
92
- isDisabled: !canPreviousPage,
93
- elementId: parentElementId + "-pagination-previous-page-button",
94
- onClick: previousPageHandler
95
- })), React.createElement(StyledPaginationAction, null, React.createElement(ArrowButton__default, {
96
- type: ArrowButton.ArrowType.Next,
97
- isDisabled: !canNextPage,
98
- elementId: parentElementId + "-pagination-next-page-button",
99
- onClick: nextPageHandler
100
- })), React.createElement(StyledPaginationAction, null, React.createElement(ArrowButton__default, {
101
- type: ArrowButton.ArrowType.Last,
102
- isDisabled: !canNextPage,
103
- elementId: parentElementId + "-pagination-last-page-button",
104
- onClick: function onClick() {
105
- return gotoPage(totalPages - 1);
106
- }
107
- }))));
108
- };
109
-
110
- exports.default = Pagination;
111
- //# sourceMappingURL=pagination.cjs.development.js.map
package/dist/pagination.cjs.development.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"pagination.cjs.development.js","sources":["../src/styles.ts","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {spacing} from '@propellerads/stylevariables';\n\nconst StyledPagination = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst StyledPaginationPerPage = styled.div`\n display: flex;\n align-items: center;\n margin-right: ${spacing * 9}px;\n\n label {\n margin: 0 ${spacing * 3}px 0 0;\n }\n\n select {\n width: 66px;\n }\n`;\n\nconst StyledPaginationSelect = styled.div`\n width: 70px;\n`;\n\nconst StyledPaginationAmount = styled.div`\n margin-right: ${spacing * 8}px;\n`;\n\nconst StyledPaginationActions = styled.div`\n display: flex;\n`;\n\nconst StyledPaginationAction = styled.div`\n &:not(:last-child) {\n margin-right: ${spacing * 2}px;\n }\n`;\n\nexport {\n StyledPagination,\n StyledPaginationPerPage,\n StyledPaginationSelect,\n StyledPaginationAmount,\n StyledPaginationActions,\n StyledPaginationAction,\n};\n","import ArrowButton, {ArrowType} from '@propellerads/arrow-button';\nimport Label from '@propellerads/label';\nimport Select from '@propellerads/select';\nimport React, {FunctionComponent} from 'react';\n\nimport {PaginationAmountText, PaginationProps, SelectValue} from 'types';\nimport {\n StyledPagination,\n StyledPaginationAction,\n StyledPaginationActions,\n StyledPaginationAmount,\n StyledPaginationPerPage,\n StyledPaginationSelect,\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/dist/pagination.cjs.production.min.js DELETED
@@ -1,2 +0,0 @@
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=require("@propellerads/arrow-button"),p=e(o),u=e(require("@propellerads/label")),s=e(require("@propellerads/select")),c=e(require("react")),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 c.createElement(f,null,c.createElement(v,null,k&&c.createElement(u,{label:k,for:D}),c.createElement(b,null,c.createElement(s,{id:D,onChange:function(e){d(e.value)},options:T,value:T.find((function(e){return e.value===a}))}))),c.createElement(x,null,z),c.createElement(E,null,c.createElement(y,null,c.createElement(p,{type:o.ArrowType.First,isDisabled:!P,elementId:I+"-pagination-first-page-button",onClick:function(){return m(0)}})),c.createElement(y,null,c.createElement(p,{type:o.ArrowType.Previous,isDisabled:!P,elementId:I+"-pagination-previous-page-button",onClick:h})),c.createElement(y,null,c.createElement(p,{type:o.ArrowType.Next,isDisabled:!g,elementId:I+"-pagination-next-page-button",onClick:w})),c.createElement(y,null,c.createElement(p,{type:o.ArrowType.Last,isDisabled:!g,elementId:I+"-pagination-last-page-button",onClick:function(){return m(r-1)}}))))};
2
- //# sourceMappingURL=pagination.cjs.production.min.js.map
package/dist/pagination.cjs.production.min.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"pagination.cjs.production.min.js","sources":["../src/styles.ts","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {spacing} from '@propellerads/stylevariables';\n\nconst StyledPagination = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst StyledPaginationPerPage = styled.div`\n display: flex;\n align-items: center;\n margin-right: ${spacing * 9}px;\n\n label {\n margin: 0 ${spacing * 3}px 0 0;\n }\n\n select {\n width: 66px;\n }\n`;\n\nconst StyledPaginationSelect = styled.div`\n width: 70px;\n`;\n\nconst StyledPaginationAmount = styled.div`\n margin-right: ${spacing * 8}px;\n`;\n\nconst StyledPaginationActions = styled.div`\n display: flex;\n`;\n\nconst StyledPaginationAction = styled.div`\n &:not(:last-child) {\n margin-right: ${spacing * 2}px;\n }\n`;\n\nexport {\n StyledPagination,\n StyledPaginationPerPage,\n StyledPaginationSelect,\n StyledPaginationAmount,\n StyledPaginationActions,\n StyledPaginationAction,\n};\n","import ArrowButton, {ArrowType} from '@propellerads/arrow-button';\nimport Label from '@propellerads/label';\nimport Select from '@propellerads/select';\nimport React, {FunctionComponent} from 'react';\n\nimport {PaginationAmountText, PaginationProps, SelectValue} from 'types';\nimport {\n StyledPagination,\n StyledPaginationAction,\n StyledPaginationActions,\n StyledPaginationAmount,\n StyledPaginationPerPage,\n StyledPaginationSelect,\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,2BCPmC,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 DELETED
@@ -1,104 +0,0 @@
1
- import ArrowButton, { ArrowType } from '@propellerads/arrow-button';
2
- import Label from '@propellerads/label';
3
- import Select from '@propellerads/select';
4
- import React from 'react';
5
- import styled from 'styled-components';
6
- import { spacing } from '@propellerads/stylevariables';
7
-
8
- function _taggedTemplateLiteralLoose(e, t) {
9
- return t || (t = e.slice(0)), e.raw = t, e;
10
- }
11
-
12
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
13
- var StyledPagination = /*#__PURE__*/styled.div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
14
- 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);
15
- var StyledPaginationSelect = /*#__PURE__*/styled.div(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 70px;\n"])));
16
- var StyledPaginationAmount = /*#__PURE__*/styled.div(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: ", "px;\n"])), spacing * 8);
17
- var StyledPaginationActions = /*#__PURE__*/styled.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
18
- var StyledPaginationAction = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &:not(:last-child) {\n margin-right: ", "px;\n }\n"])), spacing * 2);
19
-
20
- function getPaginationAmountData(perPage, page, total) {
21
- var count = perPage * (page - 1);
22
- return {
23
- from: count + 1,
24
- to: Math.min(count + perPage, total),
25
- total: total
26
- };
27
- }
28
- function getPaginationAmountText(_ref) {
29
- var from = _ref.from,
30
- to = _ref.to,
31
- total = _ref.total;
32
- return from + "-" + to + " of " + total;
33
- }
34
- var Pagination = function Pagination(_ref2) {
35
- var pageIndex = _ref2.pageIndex,
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;
52
- var selectElementId = parentElementId + "-pagination-select-per-page";
53
- var selectValues = pageSizes.map(function (size) {
54
- return {
55
- id: size,
56
- label: size,
57
- value: size
58
- };
59
- });
60
- var paginationAmountData = getPaginationAmountData(perPage, pageIndex + 1, totalItems);
61
- var paginationAmountText = paginationAmount || getPaginationAmountText(paginationAmountData);
62
- return React.createElement(StyledPagination, null, React.createElement(StyledPaginationPerPage, null, labelPerPage && React.createElement(Label, {
63
- label: labelPerPage,
64
- "for": selectElementId
65
- }), React.createElement(StyledPaginationSelect, null, React.createElement(Select, {
66
- id: selectElementId,
67
- onChange: function onChange(_ref3) {
68
- var value = _ref3.value;
69
- setPageSize(value);
70
- },
71
- options: selectValues,
72
- value: selectValues.find(function (_ref4) {
73
- var value = _ref4.value;
74
- return value === perPage;
75
- })
76
- }))), React.createElement(StyledPaginationAmount, null, paginationAmountText), React.createElement(StyledPaginationActions, null, React.createElement(StyledPaginationAction, null, React.createElement(ArrowButton, {
77
- type: ArrowType.First,
78
- isDisabled: !canPreviousPage,
79
- elementId: parentElementId + "-pagination-first-page-button",
80
- onClick: function onClick() {
81
- return gotoPage(0);
82
- }
83
- })), React.createElement(StyledPaginationAction, null, React.createElement(ArrowButton, {
84
- type: ArrowType.Previous,
85
- isDisabled: !canPreviousPage,
86
- elementId: parentElementId + "-pagination-previous-page-button",
87
- onClick: previousPageHandler
88
- })), React.createElement(StyledPaginationAction, null, React.createElement(ArrowButton, {
89
- type: ArrowType.Next,
90
- isDisabled: !canNextPage,
91
- elementId: parentElementId + "-pagination-next-page-button",
92
- onClick: nextPageHandler
93
- })), React.createElement(StyledPaginationAction, null, React.createElement(ArrowButton, {
94
- type: ArrowType.Last,
95
- isDisabled: !canNextPage,
96
- elementId: parentElementId + "-pagination-last-page-button",
97
- onClick: function onClick() {
98
- return gotoPage(totalPages - 1);
99
- }
100
- }))));
101
- };
102
-
103
- export default Pagination;
104
- //# sourceMappingURL=pagination.esm.js.map
package/dist/pagination.esm.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"pagination.esm.js","sources":["../src/styles.ts","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {spacing} from '@propellerads/stylevariables';\n\nconst StyledPagination = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst StyledPaginationPerPage = styled.div`\n display: flex;\n align-items: center;\n margin-right: ${spacing * 9}px;\n\n label {\n margin: 0 ${spacing * 3}px 0 0;\n }\n\n select {\n width: 66px;\n }\n`;\n\nconst StyledPaginationSelect = styled.div`\n width: 70px;\n`;\n\nconst StyledPaginationAmount = styled.div`\n margin-right: ${spacing * 8}px;\n`;\n\nconst StyledPaginationActions = styled.div`\n display: flex;\n`;\n\nconst StyledPaginationAction = styled.div`\n &:not(:last-child) {\n margin-right: ${spacing * 2}px;\n }\n`;\n\nexport {\n StyledPagination,\n StyledPaginationPerPage,\n StyledPaginationSelect,\n StyledPaginationAmount,\n StyledPaginationActions,\n StyledPaginationAction,\n};\n","import ArrowButton, {ArrowType} from '@propellerads/arrow-button';\nimport Label from '@propellerads/label';\nimport Select from '@propellerads/select';\nimport React, {FunctionComponent} from 'react';\n\nimport {PaginationAmountText, PaginationProps, SelectValue} from 'types';\nimport {\n StyledPagination,\n StyledPaginationAction,\n StyledPaginationActions,\n StyledPaginationAmount,\n StyledPaginationPerPage,\n StyledPaginationSelect,\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/dist/styles.d.ts DELETED
@@ -1,7 +0,0 @@
1
- declare const StyledPagination: import("styled-components").StyledComponent<"div", any, {}, never>;
2
- declare const StyledPaginationPerPage: import("styled-components").StyledComponent<"div", any, {}, never>;
3
- declare const StyledPaginationSelect: import("styled-components").StyledComponent<"div", any, {}, never>;
4
- declare const StyledPaginationAmount: import("styled-components").StyledComponent<"div", any, {}, never>;
5
- declare const StyledPaginationActions: import("styled-components").StyledComponent<"div", any, {}, never>;
6
- declare const StyledPaginationAction: import("styled-components").StyledComponent<"div", any, {}, never>;
7
- export { StyledPagination, StyledPaginationPerPage, StyledPaginationSelect, StyledPaginationAmount, StyledPaginationActions, StyledPaginationAction, };
package/dist/types.d.ts DELETED
@@ -1,26 +0,0 @@
1
- import { ReactElement, ReactNode } from 'react';
2
- declare type PaginationProps = {
3
- paginationAmount?: string | ReactNode | ReactElement;
4
- parentElementId: string;
5
- labelPerPage?: string;
6
- pageSizes?: Array<string | number>;
7
- pageIndex: number;
8
- perPage: number;
9
- totalPages: number;
10
- totalItems: number;
11
- canNextPage: boolean;
12
- canPreviousPage: boolean;
13
- nextPageHandler: () => void;
14
- previousPageHandler: () => void;
15
- setPageSize: (size: number) => void;
16
- gotoPage: (page: number) => void;
17
- };
18
- declare type PaginationAmountText = {
19
- from: number;
20
- to: number;
21
- total: number;
22
- };
23
- declare type SelectValue = {
24
- value: number;
25
- };
26
- export type { PaginationAmountText, PaginationProps, SelectValue };
package/src/allowJavaScriptModules.ts DELETED
@@ -1 +0,0 @@
1
- declare module '*';
package/src/index.tsx DELETED
@@ -1,111 +0,0 @@
1
- import ArrowButton, {ArrowType} from '@propellerads/arrow-button';
2
- import Label from '@propellerads/label';
3
- import Select from '@propellerads/select';
4
- import React, {FunctionComponent} from 'react';
5
-
6
- import {PaginationAmountText, PaginationProps, SelectValue} from 'types';
7
- import {
8
- StyledPagination,
9
- StyledPaginationAction,
10
- StyledPaginationActions,
11
- StyledPaginationAmount,
12
- StyledPaginationPerPage,
13
- StyledPaginationSelect,
14
- } from './styles';
15
-
16
- function getPaginationAmountData(perPage: number, page: number, total: number): PaginationAmountText {
17
- const count = perPage * (page - 1);
18
-
19
- return {
20
- from: count + 1,
21
- to: Math.min(count + perPage, total),
22
- total,
23
- };
24
- }
25
-
26
- function getPaginationAmountText({from, to, total}: PaginationAmountText): string {
27
- return `${from}-${to} of ${total}`;
28
- }
29
-
30
- const Pagination: FunctionComponent<PaginationProps> = ({
31
- pageIndex,
32
- perPage,
33
- pageSizes = [10, 20, 50],
34
- totalPages,
35
- totalItems,
36
- setPageSize,
37
- canNextPage,
38
- gotoPage,
39
- canPreviousPage,
40
- previousPageHandler,
41
- nextPageHandler,
42
- parentElementId,
43
- paginationAmount = '',
44
- labelPerPage = '',
45
- }: PaginationProps) => {
46
- const selectElementId = `${parentElementId}-pagination-select-per-page`;
47
-
48
- const selectValues = pageSizes.map((size) => ({
49
- id: size,
50
- label: size,
51
- value: size,
52
- }));
53
-
54
- const paginationAmountData = getPaginationAmountData(perPage, pageIndex + 1, totalItems);
55
- const paginationAmountText = paginationAmount || getPaginationAmountText(paginationAmountData);
56
-
57
- return (
58
- <StyledPagination>
59
- <StyledPaginationPerPage>
60
- {labelPerPage && <Label label={labelPerPage} for={selectElementId} />}
61
- <StyledPaginationSelect>
62
- <Select
63
- id={selectElementId}
64
- onChange={({value}: SelectValue) => {
65
- setPageSize(value);
66
- }}
67
- options={selectValues}
68
- value={selectValues.find(({value}) => value === perPage)}
69
- />
70
- </StyledPaginationSelect>
71
- </StyledPaginationPerPage>
72
- <StyledPaginationAmount>{paginationAmountText}</StyledPaginationAmount>
73
- <StyledPaginationActions>
74
- <StyledPaginationAction>
75
- <ArrowButton
76
- type={ArrowType.First}
77
- isDisabled={!canPreviousPage}
78
- elementId={`${parentElementId}-pagination-first-page-button`}
79
- onClick={() => gotoPage(0)}
80
- />
81
- </StyledPaginationAction>
82
- <StyledPaginationAction>
83
- <ArrowButton
84
- type={ArrowType.Previous}
85
- isDisabled={!canPreviousPage}
86
- elementId={`${parentElementId}-pagination-previous-page-button`}
87
- onClick={previousPageHandler}
88
- />
89
- </StyledPaginationAction>
90
- <StyledPaginationAction>
91
- <ArrowButton
92
- type={ArrowType.Next}
93
- isDisabled={!canNextPage}
94
- elementId={`${parentElementId}-pagination-next-page-button`}
95
- onClick={nextPageHandler}
96
- />
97
- </StyledPaginationAction>
98
- <StyledPaginationAction>
99
- <ArrowButton
100
- type={ArrowType.Last}
101
- isDisabled={!canNextPage}
102
- elementId={`${parentElementId}-pagination-last-page-button`}
103
- onClick={() => gotoPage(totalPages - 1)}
104
- />
105
- </StyledPaginationAction>
106
- </StyledPaginationActions>
107
- </StyledPagination>
108
- );
109
- };
110
-
111
- export default Pagination;
package/src/styles.ts DELETED
@@ -1,48 +0,0 @@
1
- import styled from 'styled-components';
2
- import {spacing} from '@propellerads/stylevariables';
3
-
4
- const StyledPagination = styled.div`
5
- display: flex;
6
- align-items: center;
7
- `;
8
-
9
- const StyledPaginationPerPage = styled.div`
10
- display: flex;
11
- align-items: center;
12
- margin-right: ${spacing * 9}px;
13
-
14
- label {
15
- margin: 0 ${spacing * 3}px 0 0;
16
- }
17
-
18
- select {
19
- width: 66px;
20
- }
21
- `;
22
-
23
- const StyledPaginationSelect = styled.div`
24
- width: 70px;
25
- `;
26
-
27
- const StyledPaginationAmount = styled.div`
28
- margin-right: ${spacing * 8}px;
29
- `;
30
-
31
- const StyledPaginationActions = styled.div`
32
- display: flex;
33
- `;
34
-
35
- const StyledPaginationAction = styled.div`
36
- &:not(:last-child) {
37
- margin-right: ${spacing * 2}px;
38
- }
39
- `;
40
-
41
- export {
42
- StyledPagination,
43
- StyledPaginationPerPage,
44
- StyledPaginationSelect,
45
- StyledPaginationAmount,
46
- StyledPaginationActions,
47
- StyledPaginationAction,
48
- };
package/src/types.ts DELETED
@@ -1,30 +0,0 @@
1
- import {ReactElement, ReactNode} from 'react';
2
-
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
- };
19
-
20
- type PaginationAmountText = {
21
- from: number;
22
- to: number;
23
- total: number;
24
- };
25
-
26
- type SelectValue = {
27
- value: number;
28
- };
29
-
30
- export type {PaginationAmountText, PaginationProps, SelectValue};