@elliemae/ds-page-number 3.16.0 → 3.16.1
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/cjs/DSPageNumber.js +5 -1
- package/dist/cjs/DSPageNumber.js.map +2 -2
- package/dist/cjs/components/utils.js +4 -0
- package/dist/cjs/components/utils.js.map +1 -1
- package/dist/cjs/index.js +6 -2
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/package.json +7 -0
- package/dist/esm/DSPageNumber.js +1 -1
- package/dist/esm/DSPageNumber.js.map +2 -2
- package/dist/esm/index.js +2 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/package.json +7 -0
- package/dist/types/DSPageNumber.d.ts +9 -9
- package/dist/types/index.d.ts +2 -2
- package/package.json +9 -9
package/dist/cjs/DSPageNumber.js
CHANGED
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -37,7 +41,7 @@ var import_ds_classnames = require("@elliemae/ds-classnames");
|
|
|
37
41
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
38
42
|
var import_ds_button = __toESM(require("@elliemae/ds-button"));
|
|
39
43
|
var import_ds_form = require("@elliemae/ds-form");
|
|
40
|
-
var import_utils = require("./components/utils");
|
|
44
|
+
var import_utils = require("./components/utils.js");
|
|
41
45
|
const blockName = "page-number-block";
|
|
42
46
|
const PageNumberInputContainer = (0, import_ds_classnames.aggregatedClasses)(import_ds_form.DSInputGroup)(blockName);
|
|
43
47
|
const DSPageNumber = ({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSPageNumber.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useState, useRef, useEffect } from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { ChevronSmallDown, ChevronSmallUp } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { DSInput, DSInputGroup } from '@elliemae/ds-form';\nimport { lengthToSize, cleanPage } from './components/utils';\n\nconst blockName = 'page-number-block';\nconst PageNumberInputContainer = aggregatedClasses(DSInputGroup)(blockName);\n\nconst DSPageNumber = ({\n className,\n disabled,\n value,\n onChange,\n containerProps,\n currentPage,\n totalPages,\n separator,\n ...otherProps\n}) => {\n const safeTotal = cleanPage(totalPages);\n const ref = useRef(null);\n const { cssClassName, classNameElement } = convertPropToCssClassName('page-number', className, {\n disabled,\n });\n const [page, setPage] = useState(cleanPage(currentPage) || 1);\n const [size, setSize] = useState(null);\n useEffect(() => {\n const { width } = ref.current.getBoundingClientRect();\n const calculatedWidth = lengthToSize(width, page);\n setSize(calculatedWidth);\n }, [page, safeTotal]);\n\n function handleUpdateInput(e) {\n const newValue = cleanPage(e.target.value);\n if (newValue > safeTotal || newValue === 0) return;\n setPage(newValue);\n onChange(newValue);\n }\n function handleIncrease() {\n const newValue = page ? parseInt(page, 10) + 1 : 1;\n if (newValue > safeTotal) return;\n setPage(newValue);\n onChange(newValue);\n }\n function handleDecrease() {\n const newValue = page ? parseInt(page, 10) - 1 : 1;\n if (newValue < 1) return;\n setPage(newValue);\n onChange(newValue);\n }\n\n return (\n <div data-testid=\"ds-page-number\" className={`${cssClassName}`} {...containerProps} {...otherProps}>\n <PageNumberInputContainer>\n <div className={`${classNameElement('pages')}`}>\n <DSInput\n className={`${classNameElement('input')}`}\n data-testid=\"page-number__current-page\"\n onChange={handleUpdateInput}\n style={{\n width: `${size}px`,\n }}\n value={page}\n />\n <div className={`${classNameElement('separator')}`}>{separator}</div>\n <div className={`${classNameElement('total')}`} data-testid=\"page-number__total-pages\">\n {totalPages}\n </div>\n <div ref={ref} className={`${classNameElement('ref')}`} />\n </div>\n <div className={`${classNameElement('limiter')}`} />\n <DSButton\n aria-label=\"dropdown-indicator\"\n buttonType=\"text\"\n className=\"dropdown-indicator\"\n data-testid=\"page-number__increase\"\n icon={<ChevronSmallUp />}\n onClick={handleIncrease}\n />\n <DSButton\n aria-label=\"dropdown-indicator\"\n buttonType=\"text\"\n className=\"dropdown-indicator\"\n data-testid=\"page-number__decrease\"\n icon={<ChevronSmallDown />}\n onClick={handleDecrease}\n />\n </PageNumberInputContainer>\n </div>\n );\n};\n\nconst pageNumberProps = {\n className: PropTypes.string.description('html class attribute'),\n containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n disabled: PropTypes.bool.description('Whether the component is disabled or not').defaultValue(false),\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description('page number value'),\n onChange: PropTypes.func.description('function executed when the page number changes'),\n currentPage: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Value of the current page'),\n totalPages: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Amount of pages').defaultValue(1),\n separator: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n .description('Separator between current page and total pages')\n .defaultValue('/'),\n};\n\nDSPageNumber.propTypes = pageNumberProps;\nDSPageNumber.displayName = 'DSPageNumber';\nconst PageNumberWithSchema = describe(DSPageNumber);\nPageNumberWithSchema.propTypes = pageNumberProps;\n\nDSPageNumber.defaultProps = {\n className: '',\n disabled: false,\n onChange: () => null,\n containerProps: {},\n value: undefined,\n currentPage: undefined,\n totalPages: 1,\n separator: '/',\n};\n\nexport { DSPageNumber, PageNumberWithSchema };\nexport default DSPageNumber;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useState, useRef, useEffect } from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { ChevronSmallDown, ChevronSmallUp } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { DSInput, DSInputGroup } from '@elliemae/ds-form';\nimport { lengthToSize, cleanPage } from './components/utils.js';\n\nconst blockName = 'page-number-block';\nconst PageNumberInputContainer = aggregatedClasses(DSInputGroup)(blockName);\n\nconst DSPageNumber = ({\n className,\n disabled,\n value,\n onChange,\n containerProps,\n currentPage,\n totalPages,\n separator,\n ...otherProps\n}) => {\n const safeTotal = cleanPage(totalPages);\n const ref = useRef(null);\n const { cssClassName, classNameElement } = convertPropToCssClassName('page-number', className, {\n disabled,\n });\n const [page, setPage] = useState(cleanPage(currentPage) || 1);\n const [size, setSize] = useState(null);\n useEffect(() => {\n const { width } = ref.current.getBoundingClientRect();\n const calculatedWidth = lengthToSize(width, page);\n setSize(calculatedWidth);\n }, [page, safeTotal]);\n\n function handleUpdateInput(e) {\n const newValue = cleanPage(e.target.value);\n if (newValue > safeTotal || newValue === 0) return;\n setPage(newValue);\n onChange(newValue);\n }\n function handleIncrease() {\n const newValue = page ? parseInt(page, 10) + 1 : 1;\n if (newValue > safeTotal) return;\n setPage(newValue);\n onChange(newValue);\n }\n function handleDecrease() {\n const newValue = page ? parseInt(page, 10) - 1 : 1;\n if (newValue < 1) return;\n setPage(newValue);\n onChange(newValue);\n }\n\n return (\n <div data-testid=\"ds-page-number\" className={`${cssClassName}`} {...containerProps} {...otherProps}>\n <PageNumberInputContainer>\n <div className={`${classNameElement('pages')}`}>\n <DSInput\n className={`${classNameElement('input')}`}\n data-testid=\"page-number__current-page\"\n onChange={handleUpdateInput}\n style={{\n width: `${size}px`,\n }}\n value={page}\n />\n <div className={`${classNameElement('separator')}`}>{separator}</div>\n <div className={`${classNameElement('total')}`} data-testid=\"page-number__total-pages\">\n {totalPages}\n </div>\n <div ref={ref} className={`${classNameElement('ref')}`} />\n </div>\n <div className={`${classNameElement('limiter')}`} />\n <DSButton\n aria-label=\"dropdown-indicator\"\n buttonType=\"text\"\n className=\"dropdown-indicator\"\n data-testid=\"page-number__increase\"\n icon={<ChevronSmallUp />}\n onClick={handleIncrease}\n />\n <DSButton\n aria-label=\"dropdown-indicator\"\n buttonType=\"text\"\n className=\"dropdown-indicator\"\n data-testid=\"page-number__decrease\"\n icon={<ChevronSmallDown />}\n onClick={handleDecrease}\n />\n </PageNumberInputContainer>\n </div>\n );\n};\n\nconst pageNumberProps = {\n className: PropTypes.string.description('html class attribute'),\n containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n disabled: PropTypes.bool.description('Whether the component is disabled or not').defaultValue(false),\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description('page number value'),\n onChange: PropTypes.func.description('function executed when the page number changes'),\n currentPage: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Value of the current page'),\n totalPages: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Amount of pages').defaultValue(1),\n separator: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n .description('Separator between current page and total pages')\n .defaultValue('/'),\n};\n\nDSPageNumber.propTypes = pageNumberProps;\nDSPageNumber.displayName = 'DSPageNumber';\nconst PageNumberWithSchema = describe(DSPageNumber);\nPageNumberWithSchema.propTypes = pageNumberProps;\n\nDSPageNumber.defaultProps = {\n className: '',\n disabled: false,\n onChange: () => null,\n containerProps: {},\n value: undefined,\n currentPage: undefined,\n totalPages: 1,\n separator: '/',\n};\n\nexport { DSPageNumber, PageNumberWithSchema };\nexport default DSPageNumber;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["DSButton"]
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/utils.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export const lengthToSize = (referenceWidth, value) => referenceWidth + (referenceWidth / 7) * String(value).length;\n\nexport const cleanPage = (value) => {\n if (!value || value === '' || isNaN(parseInt(value))) return '';\n return parseInt(String(value || 1).replace(/\\D/g, ''), 10);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe,CAAC,gBAAgB,UAAU,iBAAkB,iBAAiB,IAAK,OAAO,KAAK,EAAE;AAEtG,MAAM,YAAY,CAAC,UAAU;AAClC,MAAI,CAAC,SAAS,UAAU,MAAM,MAAM,SAAS,KAAK,CAAC;AAAG,WAAO;AAC7D,SAAO,SAAS,OAAO,SAAS,CAAC,EAAE,QAAQ,OAAO,EAAE,GAAG,EAAE;AAC3D;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -19,6 +19,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
19
19
|
};
|
|
20
20
|
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
21
21
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
22
26
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
23
27
|
mod
|
|
24
28
|
));
|
|
@@ -29,6 +33,6 @@ __export(src_exports, {
|
|
|
29
33
|
});
|
|
30
34
|
module.exports = __toCommonJS(src_exports);
|
|
31
35
|
var React = __toESM(require("react"));
|
|
32
|
-
__reExport(src_exports, require("./DSPageNumber"), module.exports);
|
|
33
|
-
var import_DSPageNumber = __toESM(require("./DSPageNumber"));
|
|
36
|
+
__reExport(src_exports, require("./DSPageNumber.js"), module.exports);
|
|
37
|
+
var import_DSPageNumber = __toESM(require("./DSPageNumber.js"));
|
|
34
38
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export * from './DSPageNumber';\n\nexport { default } from './DSPageNumber';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["export * from './DSPageNumber.js';\n\nexport { default } from './DSPageNumber.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,8BAAd;AAEA,0BAAwB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DSPageNumber.js
CHANGED
|
@@ -6,7 +6,7 @@ import { aggregatedClasses, convertPropToCssClassName } from "@elliemae/ds-class
|
|
|
6
6
|
import { ChevronSmallDown, ChevronSmallUp } from "@elliemae/ds-icons";
|
|
7
7
|
import DSButton from "@elliemae/ds-button";
|
|
8
8
|
import { DSInput, DSInputGroup } from "@elliemae/ds-form";
|
|
9
|
-
import { lengthToSize, cleanPage } from "./components/utils";
|
|
9
|
+
import { lengthToSize, cleanPage } from "./components/utils.js";
|
|
10
10
|
const blockName = "page-number-block";
|
|
11
11
|
const PageNumberInputContainer = aggregatedClasses(DSInputGroup)(blockName);
|
|
12
12
|
const DSPageNumber = ({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSPageNumber.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useState, useRef, useEffect } from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { ChevronSmallDown, ChevronSmallUp } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { DSInput, DSInputGroup } from '@elliemae/ds-form';\nimport { lengthToSize, cleanPage } from './components/utils';\n\nconst blockName = 'page-number-block';\nconst PageNumberInputContainer = aggregatedClasses(DSInputGroup)(blockName);\n\nconst DSPageNumber = ({\n className,\n disabled,\n value,\n onChange,\n containerProps,\n currentPage,\n totalPages,\n separator,\n ...otherProps\n}) => {\n const safeTotal = cleanPage(totalPages);\n const ref = useRef(null);\n const { cssClassName, classNameElement } = convertPropToCssClassName('page-number', className, {\n disabled,\n });\n const [page, setPage] = useState(cleanPage(currentPage) || 1);\n const [size, setSize] = useState(null);\n useEffect(() => {\n const { width } = ref.current.getBoundingClientRect();\n const calculatedWidth = lengthToSize(width, page);\n setSize(calculatedWidth);\n }, [page, safeTotal]);\n\n function handleUpdateInput(e) {\n const newValue = cleanPage(e.target.value);\n if (newValue > safeTotal || newValue === 0) return;\n setPage(newValue);\n onChange(newValue);\n }\n function handleIncrease() {\n const newValue = page ? parseInt(page, 10) + 1 : 1;\n if (newValue > safeTotal) return;\n setPage(newValue);\n onChange(newValue);\n }\n function handleDecrease() {\n const newValue = page ? parseInt(page, 10) - 1 : 1;\n if (newValue < 1) return;\n setPage(newValue);\n onChange(newValue);\n }\n\n return (\n <div data-testid=\"ds-page-number\" className={`${cssClassName}`} {...containerProps} {...otherProps}>\n <PageNumberInputContainer>\n <div className={`${classNameElement('pages')}`}>\n <DSInput\n className={`${classNameElement('input')}`}\n data-testid=\"page-number__current-page\"\n onChange={handleUpdateInput}\n style={{\n width: `${size}px`,\n }}\n value={page}\n />\n <div className={`${classNameElement('separator')}`}>{separator}</div>\n <div className={`${classNameElement('total')}`} data-testid=\"page-number__total-pages\">\n {totalPages}\n </div>\n <div ref={ref} className={`${classNameElement('ref')}`} />\n </div>\n <div className={`${classNameElement('limiter')}`} />\n <DSButton\n aria-label=\"dropdown-indicator\"\n buttonType=\"text\"\n className=\"dropdown-indicator\"\n data-testid=\"page-number__increase\"\n icon={<ChevronSmallUp />}\n onClick={handleIncrease}\n />\n <DSButton\n aria-label=\"dropdown-indicator\"\n buttonType=\"text\"\n className=\"dropdown-indicator\"\n data-testid=\"page-number__decrease\"\n icon={<ChevronSmallDown />}\n onClick={handleDecrease}\n />\n </PageNumberInputContainer>\n </div>\n );\n};\n\nconst pageNumberProps = {\n className: PropTypes.string.description('html class attribute'),\n containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n disabled: PropTypes.bool.description('Whether the component is disabled or not').defaultValue(false),\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description('page number value'),\n onChange: PropTypes.func.description('function executed when the page number changes'),\n currentPage: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Value of the current page'),\n totalPages: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Amount of pages').defaultValue(1),\n separator: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n .description('Separator between current page and total pages')\n .defaultValue('/'),\n};\n\nDSPageNumber.propTypes = pageNumberProps;\nDSPageNumber.displayName = 'DSPageNumber';\nconst PageNumberWithSchema = describe(DSPageNumber);\nPageNumberWithSchema.propTypes = pageNumberProps;\n\nDSPageNumber.defaultProps = {\n className: '',\n disabled: false,\n onChange: () => null,\n containerProps: {},\n value: undefined,\n currentPage: undefined,\n totalPages: 1,\n separator: '/',\n};\n\nexport { DSPageNumber, PageNumberWithSchema };\nexport default DSPageNumber;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC0Df,SACE,KADF;AAzDR,SAAgB,UAAU,QAAQ,iBAAiB;AACnD,SAAS,UAAU,iBAAiB;AACpC,SAAS,mBAAmB,iCAAiC;AAC7D,SAAS,kBAAkB,sBAAsB;AACjD,OAAO,cAAc;AACrB,SAAS,SAAS,oBAAoB;AACtC,SAAS,cAAc,iBAAiB;AAExC,MAAM,YAAY;AAClB,MAAM,2BAA2B,kBAAkB,YAAY,EAAE,SAAS;AAE1E,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useState, useRef, useEffect } from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { ChevronSmallDown, ChevronSmallUp } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { DSInput, DSInputGroup } from '@elliemae/ds-form';\nimport { lengthToSize, cleanPage } from './components/utils.js';\n\nconst blockName = 'page-number-block';\nconst PageNumberInputContainer = aggregatedClasses(DSInputGroup)(blockName);\n\nconst DSPageNumber = ({\n className,\n disabled,\n value,\n onChange,\n containerProps,\n currentPage,\n totalPages,\n separator,\n ...otherProps\n}) => {\n const safeTotal = cleanPage(totalPages);\n const ref = useRef(null);\n const { cssClassName, classNameElement } = convertPropToCssClassName('page-number', className, {\n disabled,\n });\n const [page, setPage] = useState(cleanPage(currentPage) || 1);\n const [size, setSize] = useState(null);\n useEffect(() => {\n const { width } = ref.current.getBoundingClientRect();\n const calculatedWidth = lengthToSize(width, page);\n setSize(calculatedWidth);\n }, [page, safeTotal]);\n\n function handleUpdateInput(e) {\n const newValue = cleanPage(e.target.value);\n if (newValue > safeTotal || newValue === 0) return;\n setPage(newValue);\n onChange(newValue);\n }\n function handleIncrease() {\n const newValue = page ? parseInt(page, 10) + 1 : 1;\n if (newValue > safeTotal) return;\n setPage(newValue);\n onChange(newValue);\n }\n function handleDecrease() {\n const newValue = page ? parseInt(page, 10) - 1 : 1;\n if (newValue < 1) return;\n setPage(newValue);\n onChange(newValue);\n }\n\n return (\n <div data-testid=\"ds-page-number\" className={`${cssClassName}`} {...containerProps} {...otherProps}>\n <PageNumberInputContainer>\n <div className={`${classNameElement('pages')}`}>\n <DSInput\n className={`${classNameElement('input')}`}\n data-testid=\"page-number__current-page\"\n onChange={handleUpdateInput}\n style={{\n width: `${size}px`,\n }}\n value={page}\n />\n <div className={`${classNameElement('separator')}`}>{separator}</div>\n <div className={`${classNameElement('total')}`} data-testid=\"page-number__total-pages\">\n {totalPages}\n </div>\n <div ref={ref} className={`${classNameElement('ref')}`} />\n </div>\n <div className={`${classNameElement('limiter')}`} />\n <DSButton\n aria-label=\"dropdown-indicator\"\n buttonType=\"text\"\n className=\"dropdown-indicator\"\n data-testid=\"page-number__increase\"\n icon={<ChevronSmallUp />}\n onClick={handleIncrease}\n />\n <DSButton\n aria-label=\"dropdown-indicator\"\n buttonType=\"text\"\n className=\"dropdown-indicator\"\n data-testid=\"page-number__decrease\"\n icon={<ChevronSmallDown />}\n onClick={handleDecrease}\n />\n </PageNumberInputContainer>\n </div>\n );\n};\n\nconst pageNumberProps = {\n className: PropTypes.string.description('html class attribute'),\n containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n disabled: PropTypes.bool.description('Whether the component is disabled or not').defaultValue(false),\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description('page number value'),\n onChange: PropTypes.func.description('function executed when the page number changes'),\n currentPage: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Value of the current page'),\n totalPages: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Amount of pages').defaultValue(1),\n separator: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n .description('Separator between current page and total pages')\n .defaultValue('/'),\n};\n\nDSPageNumber.propTypes = pageNumberProps;\nDSPageNumber.displayName = 'DSPageNumber';\nconst PageNumberWithSchema = describe(DSPageNumber);\nPageNumberWithSchema.propTypes = pageNumberProps;\n\nDSPageNumber.defaultProps = {\n className: '',\n disabled: false,\n onChange: () => null,\n containerProps: {},\n value: undefined,\n currentPage: undefined,\n totalPages: 1,\n separator: '/',\n};\n\nexport { DSPageNumber, PageNumberWithSchema };\nexport default DSPageNumber;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSPageNumber';\n\nexport { default } from './DSPageNumber';\n"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSPageNumber.js';\n\nexport { default } from './DSPageNumber.js';\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AAEd,SAAS,WAAAA,gBAAe;",
|
|
6
6
|
"names": ["default"]
|
|
7
7
|
}
|
|
@@ -11,14 +11,14 @@ declare const DSPageNumber: {
|
|
|
11
11
|
separator: any;
|
|
12
12
|
}): JSX.Element;
|
|
13
13
|
propTypes: {
|
|
14
|
-
className: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
15
|
-
containerProps: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
16
|
-
disabled: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
17
|
-
value: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
18
|
-
onChange: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
19
|
-
currentPage: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
20
|
-
totalPages: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
21
|
-
separator: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
|
|
14
|
+
className: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
|
|
15
|
+
containerProps: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
|
|
16
|
+
disabled: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
|
|
17
|
+
value: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
|
|
18
|
+
onChange: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
|
|
19
|
+
currentPage: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
|
|
20
|
+
totalPages: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
|
|
21
|
+
separator: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
|
|
22
22
|
};
|
|
23
23
|
displayName: string;
|
|
24
24
|
defaultProps: {
|
|
@@ -32,7 +32,7 @@ declare const DSPageNumber: {
|
|
|
32
32
|
separator: string;
|
|
33
33
|
};
|
|
34
34
|
};
|
|
35
|
-
declare const PageNumberWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<{
|
|
35
|
+
declare const PageNumberWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<{
|
|
36
36
|
[x: string]: any;
|
|
37
37
|
className: any;
|
|
38
38
|
disabled: any;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './DSPageNumber';
|
|
2
|
-
export { default } from './DSPageNumber';
|
|
1
|
+
export * from './DSPageNumber.js';
|
|
2
|
+
export { default } from './DSPageNumber.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-page-number",
|
|
3
|
-
"version": "3.16.
|
|
3
|
+
"version": "3.16.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Page Number",
|
|
6
6
|
"files": [
|
|
@@ -43,17 +43,17 @@
|
|
|
43
43
|
"indent": 4
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@elliemae/ds-button": "3.16.
|
|
47
|
-
"@elliemae/ds-classnames": "3.16.
|
|
48
|
-
"@elliemae/ds-form": "3.16.
|
|
49
|
-
"@elliemae/ds-icons": "3.16.
|
|
50
|
-
"@elliemae/ds-props-helpers": "3.16.
|
|
51
|
-
"@elliemae/ds-utilities": "3.16.
|
|
46
|
+
"@elliemae/ds-button": "3.16.1",
|
|
47
|
+
"@elliemae/ds-classnames": "3.16.1",
|
|
48
|
+
"@elliemae/ds-form": "3.16.1",
|
|
49
|
+
"@elliemae/ds-icons": "3.16.1",
|
|
50
|
+
"@elliemae/ds-props-helpers": "3.16.1",
|
|
51
|
+
"@elliemae/ds-utilities": "3.16.1"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
|
-
"@testing-library/jest-dom": "~5.16.
|
|
54
|
+
"@testing-library/jest-dom": "~5.16.5",
|
|
55
55
|
"@testing-library/react": "~12.1.3",
|
|
56
|
-
"styled-components": "~5.3.
|
|
56
|
+
"styled-components": "~5.3.9"
|
|
57
57
|
},
|
|
58
58
|
"peerDependencies": {
|
|
59
59
|
"lodash": "^4.17.21",
|