@elliemae/ds-pagination 3.37.0-rc.4 → 3.37.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/parts/DSPaginator/useOnElementOnResize.js +60 -0
- package/dist/cjs/parts/DSPaginator/useOnElementOnResize.js.map +7 -0
- package/dist/cjs/parts/DSPaginator/usePaginator.js +2 -2
- package/dist/cjs/parts/DSPaginator/usePaginator.js.map +2 -2
- package/dist/cjs/parts/DSPerPageSelector/getOptions.js +2 -2
- package/dist/cjs/parts/DSPerPageSelector/getOptions.js.map +2 -2
- package/dist/esm/parts/DSPaginator/useOnElementOnResize.js +30 -0
- package/dist/esm/parts/DSPaginator/useOnElementOnResize.js.map +7 -0
- package/dist/esm/parts/DSPaginator/usePaginator.js +1 -1
- package/dist/esm/parts/DSPaginator/usePaginator.js.map +2 -2
- package/dist/esm/parts/DSPerPageSelector/getOptions.js +1 -1
- package/dist/esm/parts/DSPerPageSelector/getOptions.js.map +1 -1
- package/dist/types/parts/DSPaginator/useOnElementOnResize.d.ts +2 -0
- package/package.json +10 -11
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
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.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var useOnElementOnResize_exports = {};
|
|
30
|
+
__export(useOnElementOnResize_exports, {
|
|
31
|
+
useOnElementResize: () => useOnElementResize
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(useOnElementOnResize_exports);
|
|
34
|
+
var React = __toESM(require("react"));
|
|
35
|
+
var import_react = require("react");
|
|
36
|
+
const useOnElementResize = (targetRef) => {
|
|
37
|
+
const [width, setWidth] = (0, import_react.useState)(targetRef.current?.offsetWidth ?? 0);
|
|
38
|
+
const [height, setHeight] = (0, import_react.useState)(targetRef.current?.offsetHeight ?? 0);
|
|
39
|
+
const observer = (0, import_react.useRef)();
|
|
40
|
+
(0, import_react.useEffect)(() => {
|
|
41
|
+
function outputsize() {
|
|
42
|
+
setWidth(targetRef.current?.offsetWidth ?? 0);
|
|
43
|
+
setHeight(targetRef.current?.offsetHeight ?? 0);
|
|
44
|
+
}
|
|
45
|
+
observer.current = new ResizeObserver(outputsize);
|
|
46
|
+
const el = targetRef.current;
|
|
47
|
+
if (el) observer.current.observe(el);
|
|
48
|
+
return () => {
|
|
49
|
+
if (el) observer.current?.disconnect();
|
|
50
|
+
};
|
|
51
|
+
}, [targetRef]);
|
|
52
|
+
return (0, import_react.useMemo)(
|
|
53
|
+
() => ({
|
|
54
|
+
width,
|
|
55
|
+
height
|
|
56
|
+
}),
|
|
57
|
+
[width, height]
|
|
58
|
+
);
|
|
59
|
+
};
|
|
60
|
+
//# sourceMappingURL=useOnElementOnResize.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/parts/DSPaginator/useOnElementOnResize.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import type React from 'react';\nimport { useState, useEffect, useRef, useMemo } from 'react';\n\n// Custom hook to track dimension of a component\n// Taken and modified from https://stackoverflow.com/a/60218754\nexport const useOnElementResize = <T extends HTMLElement>(\n targetRef: React.RefObject<T>,\n): Record<'width' | 'height', number> => {\n const [width, setWidth] = useState(targetRef.current?.offsetWidth ?? 0);\n const [height, setHeight] = useState(targetRef.current?.offsetHeight ?? 0);\n const observer = useRef<ResizeObserver>();\n\n useEffect(() => {\n function outputsize() {\n setWidth(targetRef.current?.offsetWidth ?? 0);\n setHeight(targetRef.current?.offsetHeight ?? 0);\n }\n\n observer.current = new ResizeObserver(outputsize);\n const el = targetRef.current as Element | null;\n if (el) observer.current.observe(el);\n\n return () => {\n if (el) observer.current?.disconnect();\n };\n }, [targetRef]);\n\n return useMemo(\n () => ({\n width,\n height,\n }),\n [width, height],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAqD;AAI9C,MAAM,qBAAqB,CAChC,cACuC;AACvC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,UAAU,SAAS,eAAe,CAAC;AACtE,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,UAAU,SAAS,gBAAgB,CAAC;AACzE,QAAM,eAAW,qBAAuB;AAExC,8BAAU,MAAM;AACd,aAAS,aAAa;AACpB,eAAS,UAAU,SAAS,eAAe,CAAC;AAC5C,gBAAU,UAAU,SAAS,gBAAgB,CAAC;AAAA,IAChD;AAEA,aAAS,UAAU,IAAI,eAAe,UAAU;AAChD,UAAM,KAAK,UAAU;AACrB,QAAI,GAAI,UAAS,QAAQ,QAAQ,EAAE;AAEnC,WAAO,MAAM;AACX,UAAI,GAAI,UAAS,SAAS,WAAW;AAAA,IACvC;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,MAAM;AAAA,EAChB;AACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -34,9 +34,9 @@ module.exports = __toCommonJS(usePaginator_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_react = require("react");
|
|
36
36
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
37
|
-
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
38
37
|
var import_usePaginationSearch = require("./usePaginationSearch.js");
|
|
39
38
|
var import_getOptions = require("./getOptions.js");
|
|
39
|
+
var import_useOnElementOnResize = require("./useOnElementOnResize.js");
|
|
40
40
|
const usePaginator = (props) => {
|
|
41
41
|
const { pageIndex, pageCount, pageDetails } = props;
|
|
42
42
|
const [isOpened, setIsOpened] = (0, import_react.useState)(false);
|
|
@@ -44,7 +44,7 @@ const usePaginator = (props) => {
|
|
|
44
44
|
const [pageInfoWidth, setPageInfoWidth] = (0, import_react.useState)(0);
|
|
45
45
|
const btnRef = (0, import_react.useRef)(null);
|
|
46
46
|
const actionRef = (0, import_react.useRef)({});
|
|
47
|
-
const { width: btnWidth } = (0,
|
|
47
|
+
const { width: btnWidth } = (0, import_useOnElementOnResize.useOnElementResize)(btnRef);
|
|
48
48
|
const options = (0, import_react.useMemo)(
|
|
49
49
|
() => (0, import_getOptions.getOptions)({ pageCount, pageIndex, pageDetails, pageInfoWidth }),
|
|
50
50
|
[pageCount, pageIndex, pageDetails, pageInfoWidth]
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DSPaginator/usePaginator.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAsE;AACtE,8BAA2D;AAC3D,
|
|
4
|
+
"sourcesContent": ["import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { usePaginationSearch } from './usePaginationSearch.js';\nimport { getOptions } from './getOptions.js';\nimport type { DSPaginationT } from '../../react-desc-prop-types.js';\nimport type { DSButtonV2T } from '@elliemae/ds-button-v2';\nimport { useOnElementResize } from './useOnElementOnResize.js';\n\nexport const usePaginator = (props: DSPaginationT.PaginatorInternalProps) => {\n const { pageIndex, pageCount, pageDetails } = props;\n\n const [isOpened, setIsOpened] = useState(false);\n const [detailWidth, setDetailWidth] = useState(0);\n const [pageInfoWidth, setPageInfoWidth] = useState(0);\n\n const btnRef = useRef<HTMLButtonElement>(null);\n const actionRef = useRef<Record<string, (dsId: string) => void>>({});\n\n const { width: btnWidth } = useOnElementResize(btnRef);\n\n const options = useMemo(\n () => getOptions({ pageCount, pageIndex, pageDetails, pageInfoWidth }),\n [pageCount, pageIndex, pageDetails, pageInfoWidth],\n );\n\n const onKeyDown = usePaginationSearch(pageCount, actionRef);\n\n const globalAttributes = useGetGlobalAttributes<\n DSPaginationT.PaginatorInternalProps,\n HTMLButtonElement,\n DSButtonV2T.Props\n >(props);\n const xstyledAttributes = useGetXstyledProps(props);\n\n useEffect(() => {\n if (isOpened) {\n actionRef.current.setActiveDescendant(pageIndex.toString());\n actionRef.current.scrollOptionIntoView(pageIndex.toString());\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpened]);\n\n useLayoutEffect(() => {\n const invisibleDetails = [\n ...document.body.querySelectorAll('[data-testid=\"ds-pagination-invisible-detail-for-width-calc\"]'),\n ] as HTMLDivElement[];\n const maxWidth = invisibleDetails.reduce((acc, cur) => Math.max(acc, cur.getBoundingClientRect().width), 0);\n setDetailWidth(maxWidth);\n }, [pageDetails]);\n\n useEffect(() => {\n setPageInfoWidth(() => {\n // Here we get the size of the page info\n // Inside of the button, we have the page info, the chevron, separators, page details and padding\n // We substract the detailWidth if present, and the padding + chevron + separators in each case\n if (detailWidth) return btnWidth - detailWidth - 89;\n return btnWidth - 56;\n });\n }, [btnWidth, detailWidth]);\n\n return {\n btnRef,\n btnWidth,\n pageInfoWidth,\n options,\n isOpened,\n setIsOpened,\n detailWidth,\n setDetailWidth,\n globalAttributes,\n xstyledAttributes,\n actionRef,\n onKeyDown,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAsE;AACtE,8BAA2D;AAC3D,iCAAoC;AACpC,wBAA2B;AAG3B,kCAAmC;AAE5B,MAAM,eAAe,CAAC,UAAgD;AAC3E,QAAM,EAAE,WAAW,WAAW,YAAY,IAAI;AAE9C,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,CAAC;AAChD,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,CAAC;AAEpD,QAAM,aAAS,qBAA0B,IAAI;AAC7C,QAAM,gBAAY,qBAA+C,CAAC,CAAC;AAEnE,QAAM,EAAE,OAAO,SAAS,QAAI,gDAAmB,MAAM;AAErD,QAAM,cAAU;AAAA,IACd,UAAM,8BAAW,EAAE,WAAW,WAAW,aAAa,cAAc,CAAC;AAAA,IACrE,CAAC,WAAW,WAAW,aAAa,aAAa;AAAA,EACnD;AAEA,QAAM,gBAAY,gDAAoB,WAAW,SAAS;AAE1D,QAAM,uBAAmB,gDAIvB,KAAK;AACP,QAAM,wBAAoB,4CAAmB,KAAK;AAElD,8BAAU,MAAM;AACd,QAAI,UAAU;AACZ,gBAAU,QAAQ,oBAAoB,UAAU,SAAS,CAAC;AAC1D,gBAAU,QAAQ,qBAAqB,UAAU,SAAS,CAAC;AAAA,IAC7D;AAAA,EAEF,GAAG,CAAC,QAAQ,CAAC;AAEb,oCAAgB,MAAM;AACpB,UAAM,mBAAmB;AAAA,MACvB,GAAG,SAAS,KAAK,iBAAiB,+DAA+D;AAAA,IACnG;AACA,UAAM,WAAW,iBAAiB,OAAO,CAAC,KAAK,QAAQ,KAAK,IAAI,KAAK,IAAI,sBAAsB,EAAE,KAAK,GAAG,CAAC;AAC1G,mBAAe,QAAQ;AAAA,EACzB,GAAG,CAAC,WAAW,CAAC;AAEhB,8BAAU,MAAM;AACd,qBAAiB,MAAM;AAIrB,UAAI,YAAa,QAAO,WAAW,cAAc;AACjD,aAAO,WAAW;AAAA,IACpB,CAAC;AAAA,EACH,GAAG,CAAC,UAAU,WAAW,CAAC;AAE1B,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,7 +33,7 @@ __export(getOptions_exports, {
|
|
|
33
33
|
});
|
|
34
34
|
module.exports = __toCommonJS(getOptions_exports);
|
|
35
35
|
var React = __toESM(require("react"));
|
|
36
|
-
var
|
|
36
|
+
var import_lodash = require("lodash");
|
|
37
37
|
const generateOption = (value) => {
|
|
38
38
|
if (typeof value === "object") {
|
|
39
39
|
return value;
|
|
@@ -46,7 +46,7 @@ const generateOption = (value) => {
|
|
|
46
46
|
};
|
|
47
47
|
};
|
|
48
48
|
const getOptions = (step, min, max) => {
|
|
49
|
-
const options = (0,
|
|
49
|
+
const options = (0, import_lodash.range)(min, max + step, step).map(generateOption);
|
|
50
50
|
return min === 0 ? options.slice(1, options.length) : options;
|
|
51
51
|
};
|
|
52
52
|
//# sourceMappingURL=getOptions.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DSPerPageSelector/getOptions.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { range } from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { range } from 'lodash';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\n\nexport const generateOption = (\n value: number | DSDropdownMenuT.ItemSingleOptions,\n): DSDropdownMenuT.ItemSingleOptions => {\n if (typeof value === 'object') {\n return value;\n }\n return {\n dsId: value.toString(),\n value,\n label: value.toString(),\n type: 'single',\n } as const;\n};\n\nexport const getOptions = (step: number, min: number, max: number) => {\n const options = range(min, max + step, step).map(generateOption);\n return min === 0 ? options.slice(1, options.length) : options;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAAsB;AAGf,MAAM,iBAAiB,CAC5B,UACsC;AACtC,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA,EACT;AACA,SAAO;AAAA,IACL,MAAM,MAAM,SAAS;AAAA,IACrB;AAAA,IACA,OAAO,MAAM,SAAS;AAAA,IACtB,MAAM;AAAA,EACR;AACF;AAEO,MAAM,aAAa,CAAC,MAAc,KAAa,QAAgB;AACpE,QAAM,cAAU,qBAAM,KAAK,MAAM,MAAM,IAAI,EAAE,IAAI,cAAc;AAC/D,SAAO,QAAQ,IAAI,QAAQ,MAAM,GAAG,QAAQ,MAAM,IAAI;AACxD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useState, useEffect, useRef, useMemo } from "react";
|
|
3
|
+
const useOnElementResize = (targetRef) => {
|
|
4
|
+
const [width, setWidth] = useState(targetRef.current?.offsetWidth ?? 0);
|
|
5
|
+
const [height, setHeight] = useState(targetRef.current?.offsetHeight ?? 0);
|
|
6
|
+
const observer = useRef();
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
function outputsize() {
|
|
9
|
+
setWidth(targetRef.current?.offsetWidth ?? 0);
|
|
10
|
+
setHeight(targetRef.current?.offsetHeight ?? 0);
|
|
11
|
+
}
|
|
12
|
+
observer.current = new ResizeObserver(outputsize);
|
|
13
|
+
const el = targetRef.current;
|
|
14
|
+
if (el) observer.current.observe(el);
|
|
15
|
+
return () => {
|
|
16
|
+
if (el) observer.current?.disconnect();
|
|
17
|
+
};
|
|
18
|
+
}, [targetRef]);
|
|
19
|
+
return useMemo(
|
|
20
|
+
() => ({
|
|
21
|
+
width,
|
|
22
|
+
height
|
|
23
|
+
}),
|
|
24
|
+
[width, height]
|
|
25
|
+
);
|
|
26
|
+
};
|
|
27
|
+
export {
|
|
28
|
+
useOnElementResize
|
|
29
|
+
};
|
|
30
|
+
//# sourceMappingURL=useOnElementOnResize.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPaginator/useOnElementOnResize.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useState, useEffect, useRef, useMemo } from 'react';\n\n// Custom hook to track dimension of a component\n// Taken and modified from https://stackoverflow.com/a/60218754\nexport const useOnElementResize = <T extends HTMLElement>(\n targetRef: React.RefObject<T>,\n): Record<'width' | 'height', number> => {\n const [width, setWidth] = useState(targetRef.current?.offsetWidth ?? 0);\n const [height, setHeight] = useState(targetRef.current?.offsetHeight ?? 0);\n const observer = useRef<ResizeObserver>();\n\n useEffect(() => {\n function outputsize() {\n setWidth(targetRef.current?.offsetWidth ?? 0);\n setHeight(targetRef.current?.offsetHeight ?? 0);\n }\n\n observer.current = new ResizeObserver(outputsize);\n const el = targetRef.current as Element | null;\n if (el) observer.current.observe(el);\n\n return () => {\n if (el) observer.current?.disconnect();\n };\n }, [targetRef]);\n\n return useMemo(\n () => ({\n width,\n height,\n }),\n [width, height],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,UAAU,WAAW,QAAQ,eAAe;AAI9C,MAAM,qBAAqB,CAChC,cACuC;AACvC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,UAAU,SAAS,eAAe,CAAC;AACtE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,UAAU,SAAS,gBAAgB,CAAC;AACzE,QAAM,WAAW,OAAuB;AAExC,YAAU,MAAM;AACd,aAAS,aAAa;AACpB,eAAS,UAAU,SAAS,eAAe,CAAC;AAC5C,gBAAU,UAAU,SAAS,gBAAgB,CAAC;AAAA,IAChD;AAEA,aAAS,UAAU,IAAI,eAAe,UAAU;AAChD,UAAM,KAAK,UAAU;AACrB,QAAI,GAAI,UAAS,QAAQ,QAAQ,EAAE;AAEnC,WAAO,MAAM;AACX,UAAI,GAAI,UAAS,SAAS,WAAW;AAAA,IACvC;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,MAAM;AAAA,EAChB;AACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
|
|
3
3
|
import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-props-helpers";
|
|
4
|
-
import { useOnElementResize } from "@elliemae/ds-utilities";
|
|
5
4
|
import { usePaginationSearch } from "./usePaginationSearch.js";
|
|
6
5
|
import { getOptions } from "./getOptions.js";
|
|
6
|
+
import { useOnElementResize } from "./useOnElementOnResize.js";
|
|
7
7
|
const usePaginator = (props) => {
|
|
8
8
|
const { pageIndex, pageCount, pageDetails } = props;
|
|
9
9
|
const [isOpened, setIsOpened] = useState(false);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPaginator/usePaginator.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,iBAAiB,SAAS,QAAQ,gBAAgB;AACtE,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { usePaginationSearch } from './usePaginationSearch.js';\nimport { getOptions } from './getOptions.js';\nimport type { DSPaginationT } from '../../react-desc-prop-types.js';\nimport type { DSButtonV2T } from '@elliemae/ds-button-v2';\nimport { useOnElementResize } from './useOnElementOnResize.js';\n\nexport const usePaginator = (props: DSPaginationT.PaginatorInternalProps) => {\n const { pageIndex, pageCount, pageDetails } = props;\n\n const [isOpened, setIsOpened] = useState(false);\n const [detailWidth, setDetailWidth] = useState(0);\n const [pageInfoWidth, setPageInfoWidth] = useState(0);\n\n const btnRef = useRef<HTMLButtonElement>(null);\n const actionRef = useRef<Record<string, (dsId: string) => void>>({});\n\n const { width: btnWidth } = useOnElementResize(btnRef);\n\n const options = useMemo(\n () => getOptions({ pageCount, pageIndex, pageDetails, pageInfoWidth }),\n [pageCount, pageIndex, pageDetails, pageInfoWidth],\n );\n\n const onKeyDown = usePaginationSearch(pageCount, actionRef);\n\n const globalAttributes = useGetGlobalAttributes<\n DSPaginationT.PaginatorInternalProps,\n HTMLButtonElement,\n DSButtonV2T.Props\n >(props);\n const xstyledAttributes = useGetXstyledProps(props);\n\n useEffect(() => {\n if (isOpened) {\n actionRef.current.setActiveDescendant(pageIndex.toString());\n actionRef.current.scrollOptionIntoView(pageIndex.toString());\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpened]);\n\n useLayoutEffect(() => {\n const invisibleDetails = [\n ...document.body.querySelectorAll('[data-testid=\"ds-pagination-invisible-detail-for-width-calc\"]'),\n ] as HTMLDivElement[];\n const maxWidth = invisibleDetails.reduce((acc, cur) => Math.max(acc, cur.getBoundingClientRect().width), 0);\n setDetailWidth(maxWidth);\n }, [pageDetails]);\n\n useEffect(() => {\n setPageInfoWidth(() => {\n // Here we get the size of the page info\n // Inside of the button, we have the page info, the chevron, separators, page details and padding\n // We substract the detailWidth if present, and the padding + chevron + separators in each case\n if (detailWidth) return btnWidth - detailWidth - 89;\n return btnWidth - 56;\n });\n }, [btnWidth, detailWidth]);\n\n return {\n btnRef,\n btnWidth,\n pageInfoWidth,\n options,\n isOpened,\n setIsOpened,\n detailWidth,\n setDetailWidth,\n globalAttributes,\n xstyledAttributes,\n actionRef,\n onKeyDown,\n };\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,iBAAiB,SAAS,QAAQ,gBAAgB;AACtE,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,2BAA2B;AACpC,SAAS,kBAAkB;AAG3B,SAAS,0BAA0B;AAE5B,MAAM,eAAe,CAAC,UAAgD;AAC3E,QAAM,EAAE,WAAW,WAAW,YAAY,IAAI;AAE9C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAChD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC;AAEpD,QAAM,SAAS,OAA0B,IAAI;AAC7C,QAAM,YAAY,OAA+C,CAAC,CAAC;AAEnE,QAAM,EAAE,OAAO,SAAS,IAAI,mBAAmB,MAAM;AAErD,QAAM,UAAU;AAAA,IACd,MAAM,WAAW,EAAE,WAAW,WAAW,aAAa,cAAc,CAAC;AAAA,IACrE,CAAC,WAAW,WAAW,aAAa,aAAa;AAAA,EACnD;AAEA,QAAM,YAAY,oBAAoB,WAAW,SAAS;AAE1D,QAAM,mBAAmB,uBAIvB,KAAK;AACP,QAAM,oBAAoB,mBAAmB,KAAK;AAElD,YAAU,MAAM;AACd,QAAI,UAAU;AACZ,gBAAU,QAAQ,oBAAoB,UAAU,SAAS,CAAC;AAC1D,gBAAU,QAAQ,qBAAqB,UAAU,SAAS,CAAC;AAAA,IAC7D;AAAA,EAEF,GAAG,CAAC,QAAQ,CAAC;AAEb,kBAAgB,MAAM;AACpB,UAAM,mBAAmB;AAAA,MACvB,GAAG,SAAS,KAAK,iBAAiB,+DAA+D;AAAA,IACnG;AACA,UAAM,WAAW,iBAAiB,OAAO,CAAC,KAAK,QAAQ,KAAK,IAAI,KAAK,IAAI,sBAAsB,EAAE,KAAK,GAAG,CAAC;AAC1G,mBAAe,QAAQ;AAAA,EACzB,GAAG,CAAC,WAAW,CAAC;AAEhB,YAAU,MAAM;AACd,qBAAiB,MAAM;AAIrB,UAAI,YAAa,QAAO,WAAW,cAAc;AACjD,aAAO,WAAW;AAAA,IACpB,CAAC;AAAA,EACH,GAAG,CAAC,UAAU,WAAW,CAAC;AAE1B,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPerPageSelector/getOptions.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { range } from '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { range } from 'lodash';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\n\nexport const generateOption = (\n value: number | DSDropdownMenuT.ItemSingleOptions,\n): DSDropdownMenuT.ItemSingleOptions => {\n if (typeof value === 'object') {\n return value;\n }\n return {\n dsId: value.toString(),\n value,\n label: value.toString(),\n type: 'single',\n } as const;\n};\n\nexport const getOptions = (step: number, min: number, max: number) => {\n const options = range(min, max + step, step).map(generateOption);\n return min === 0 ? options.slice(1, options.length) : options;\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa;AAGf,MAAM,iBAAiB,CAC5B,UACsC;AACtC,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA,EACT;AACA,SAAO;AAAA,IACL,MAAM,MAAM,SAAS;AAAA,IACrB;AAAA,IACA,OAAO,MAAM,SAAS;AAAA,IACtB,MAAM;AAAA,EACR;AACF;AAEO,MAAM,aAAa,CAAC,MAAc,KAAa,QAAgB;AACpE,QAAM,UAAU,MAAM,KAAK,MAAM,MAAM,IAAI,EAAE,IAAI,cAAc;AAC/D,SAAO,QAAQ,IAAI,QAAQ,MAAM,GAAG,QAAQ,MAAM,IAAI;AACxD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-pagination",
|
|
3
|
-
"version": "3.37.0
|
|
3
|
+
"version": "3.37.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Pagination",
|
|
6
6
|
"files": [
|
|
@@ -77,21 +77,20 @@
|
|
|
77
77
|
},
|
|
78
78
|
"dependencies": {
|
|
79
79
|
"@xstyled/system": "~3.7.3",
|
|
80
|
-
"@elliemae/ds-button-v2": "3.37.0
|
|
81
|
-
"@elliemae/ds-
|
|
82
|
-
"@elliemae/ds-
|
|
83
|
-
"@elliemae/ds-
|
|
84
|
-
"@elliemae/ds-
|
|
85
|
-
"@elliemae/ds-props-helpers": "3.37.0
|
|
86
|
-
"@elliemae/ds-
|
|
87
|
-
"@elliemae/ds-
|
|
88
|
-
"@elliemae/ds-typography": "3.37.0-rc.4"
|
|
80
|
+
"@elliemae/ds-button-v2": "3.37.0",
|
|
81
|
+
"@elliemae/ds-circular-progress-indicator": "3.37.0",
|
|
82
|
+
"@elliemae/ds-dropdownmenu-v2": "3.37.0",
|
|
83
|
+
"@elliemae/ds-grid": "3.37.0",
|
|
84
|
+
"@elliemae/ds-icons": "3.37.0",
|
|
85
|
+
"@elliemae/ds-props-helpers": "3.37.0",
|
|
86
|
+
"@elliemae/ds-system": "3.37.0",
|
|
87
|
+
"@elliemae/ds-typography": "3.37.0"
|
|
89
88
|
},
|
|
90
89
|
"devDependencies": {
|
|
91
90
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
92
91
|
"styled-components": "~5.3.9",
|
|
93
92
|
"styled-system": "~5.1.5",
|
|
94
|
-
"@elliemae/ds-monorepo-devops": "3.37.0
|
|
93
|
+
"@elliemae/ds-monorepo-devops": "3.37.0"
|
|
95
94
|
},
|
|
96
95
|
"peerDependencies": {
|
|
97
96
|
"lodash": "^4.17.21",
|