@trilogy-ds/react 0.0.1-beta-147 → 0.0.1-beta-sc-2

package/lib/components/otp/hook/useOtp.js

@@ -0,0 +1,112 @@
+import { __read } from "tslib";
+import React, { useCallback } from 'react';
+export var useOtp = function (_a) {
+    var code = _a.code, codeSize = _a.codeSize, disabled = _a.disabled, onCompleted = _a.onCompleted, onChange = _a.onChange, onFocus = _a.onFocus;
+    try {
+        var hasChanged_1 = React.useRef(false);
+        var _b = __read(React.useState(stringToCode(code, codeSize) || new Array(codeSize).fill(null)), 2), codeInput_1 = _b[0], setCodeInput_1 = _b[1];
+        var inputOnChange = function (e, idx) {
+            var target = e.target;
+            var targetValue = target.value.trim();
+            if (targetValue.length > 0) {
+                setCodeInput_1(updateCodeInput(targetValue, idx, codeInput_1));
+            }
+            else {
+                setCodeInput_1(codeInput_1.map(function (code, index) {
+                    return index === idx ? null : code;
+                }));
+            }
+        };
+        var inputOnFocus = function (e) {
+            var target = e.target;
+            target.setSelectionRange(0, target.value.length);
+        };
+        var handleClick = useCallback(function () {
+            if (!disabled) {
+                onFocus === null || onFocus === void 0 ? void 0 : onFocus(true);
+            }
+        }, [disabled, onFocus]);
+        React.useEffect(function () {
+            if (!disabled) {
+                isCompleted(codeInput_1) && (onCompleted === null || onCompleted === void 0 ? void 0 : onCompleted(codeToString(codeInput_1)));
+            }
+        }, [codeSize, codeInput_1, onCompleted, disabled]);
+        React.useEffect(function () {
+            hasChanged_1.current = codeInput_1.find(function (code) { return code !== null; }) !== undefined;
+            if (hasChanged_1.current) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(codeToString(codeInput_1));
+            }
+        }, [codeInput_1]);
+        return {
+            codeInput: codeInput_1,
+            inputOnFocus: inputOnFocus,
+            inputOnKeyUp: inputOnKeyUp,
+            inputOnChange: inputOnChange,
+            handleClick: handleClick,
+        };
+    }
+    catch (_c) {
+        return {
+            codeInput: stringToCode(code, codeSize) || new Array(codeSize).fill(null),
+        };
+    }
+};
+var stringToCode = function (str, codeSize) {
+    if (!str)
+        return new Array(codeSize).fill(null);
+    return str.split('').map(function (char) { return (char === '' ? null : Number(char)); });
+};
+var codeToString = function (code) {
+    return code.map(function (char) { return (char === null ? '_' : char); }).join('');
+};
+var isCompleted = function (myCode) {
+    return myCode.every(function (code) { return code !== null; });
+};
+var focusToNextInput = function (target, value) {
+    var nextElementSibling = target.nextElementSibling;
+    if (nextElementSibling) {
+        if (value)
+            nextElementSibling.value = value;
+        if (target.value.length)
+            nextElementSibling.focus();
+    }
+    else {
+        target.focus();
+    }
+};
+var focusToPrevInput = function (target) {
+    var previousElementSibling = target.previousElementSibling;
+    if (previousElementSibling) {
+        previousElementSibling.focus();
+    }
+    else {
+        target.focus();
+    }
+};
+var updateCodeInput = function (value, index, code) {
+    var numberValue = Number(value);
+    if (isNaN(numberValue) || value.length < 1) {
+        return code;
+    }
+    var newCodeInput = code.map(function (code, idx) {
+        return idx === index ? Number(value.slice(0, 1)) : code;
+    });
+    return updateCodeInput(value.slice(1), index + 1, newCodeInput);
+};
+var inputOnKeyUp = function (e) {
+    var key = e.key;
+    var target = e.target;
+    if (key === 'ArrowRight' || key === 'ArrowDown') {
+        return focusToNextInput(target);
+    }
+    if (key === 'ArrowLeft' || key === 'ArrowUp') {
+        return focusToPrevInput(target);
+    }
+    if (key === 'Backspace') {
+        return target.value === '' && focusToPrevInput(target);
+    }
+    if (key >= '0' && key <= '9') {
+        focusToNextInput(target);
+    }
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlT3RwLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9vdHAvaG9vay91c2VPdHAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFdBQVcsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQWExQyxNQUFNLENBQUMsSUFBTSxNQUFNLEdBQUcsVUFBQyxFQUFxRTtRQUFuRSxJQUFJLFVBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxXQUFXLGlCQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsT0FBTyxhQUFBO0lBQy9FLElBQUk7UUFDRixJQUFNLFlBQVUsR0FBRyxLQUFLLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFBO1FBRWhDLElBQUEsS0FBQSxPQUE0QixLQUFLLENBQUMsUUFBUSxDQUM5QyxZQUFZLENBQUMsSUFBSSxFQUFFLFFBQVEsQ0FBQyxJQUFJLElBQUksS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FDL0QsSUFBQSxFQUZNLFdBQVMsUUFBQSxFQUFFLGNBQVksUUFFN0IsQ0FBQTtRQUNELElBQU0sYUFBYSxHQUFHLFVBQUMsQ0FBc0MsRUFBRSxHQUFXO1lBQ2hFLElBQUEsTUFBTSxHQUFLLENBQUMsT0FBTixDQUFNO1lBQ3BCLElBQU0sV0FBVyxHQUFHLE1BQU0sQ0FBQyxLQUFLLENBQUMsSUFBSSxFQUFFLENBQUE7WUFFdkMsSUFBSSxXQUFXLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRTtnQkFDMUIsY0FBWSxDQUFDLGVBQWUsQ0FBQyxXQUFXLEVBQUUsR0FBRyxFQUFFLFdBQVMsQ0FBQyxDQUFDLENBQUE7YUFDM0Q7aUJBQU07Z0JBQ0wsY0FBWSxDQUNWLFdBQVMsQ0FBQyxHQUFHLENBQUMsVUFBQyxJQUFJLEVBQUUsS0FBSztvQkFDeEIsT0FBTyxLQUFLLEtBQUssR0FBRyxDQUFDLENBQUMs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

package/lib/components/otp/index.d.ts

@@ -1,2 +1 @@
-import Otp from './Otp';
-export { Otp };
+export { default as Otp } from '../../components/otp/Otp';

package/lib/components/otp/index.js

@@ -1,3 +1,2 @@
-import Otp from './Otp';
-export { Otp };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL290cC9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEdBQUcsTUFBTSxPQUFPLENBQUE7QUFFdkIsT0FBTyxFQUFFLEdBQUcsRUFBRSxDQUFBIn0=
+export { default as Otp } from '../../components/otp/Otp';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL290cC9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsT0FBTyxJQUFJLEdBQUcsRUFBRSxNQUFNLHNCQUFzQixDQUFBIn0=

package/lib/components/pagination/Pagination.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { PaginationProps } from './PaginationProps';
+import React from 'react';
+import { PaginationProps } from '../../components/pagination/PaginationProps';
 /**
  * Pagination Component
  * @param count {number} Number elements
@@ -11,5 +11,5 @@ import { PaginationProps } from './PaginationProps';
  * @param href {Function} Function that generates a link for seo bots
  * @param testId {string} Test Id for Test Integration
  */
-declare const Pagination: ({ className, id, length, defaultPage, onClick, href, ...others }: PaginationProps) => JSX.Element;
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLCanvasElement>>;
 export default Pagination;

package/lib/components/pagination/Pagination.js

@@ -1,9 +1,10 @@
-import { __assign, __read, __rest, __spreadArray } from "tslib";
-import React, { useEffect, useRef, useState } from 'react';
-import { Icon, IconName } from '../../components/icon';
-import { hashClass } from '../../helpers';
+import { __assign, __rest } from "tslib";
 import clsx from 'clsx';
-import { useTrilogyContext } from '../../context';
+import React from 'react';
+import { ComponentName } from '../../components/enumsComponentsName';
+import { Icon, IconName } from '../../components/icon';
+import { usePagination } from '../../components/pagination/hook/usePagination';
+import { hashClass } from '../../helpers/hashClassesHelpers';
 /**
  * Pagination Component
  * @param count {number} Number elements
@@ -15,75 +16,29 @@ import { useTrilogyContext } from '../../context';
  * @param href {Function} Function that generates a link for seo bots
  * @param testId {string} Test Id for Test Integration
  */
-var Pagination = function (_a) {
-    var className = _a.className, id = _a.id, length = _a.length, _b = _a.defaultPage, defaultPage = _b === void 0 ? 1 : _b, onClick = _a.onClick, href = _a.href, others = __rest(_a, ["className", "id", "length", "defaultPage", "onClick", "href"]);
-    var _c = __read(useState(defaultPage), 2), currentPage = _c[0], setCurrentPage = _c[1];
-    var styled = useTrilogyContext().styled;
-    var classes = hashClass(styled, clsx('pagination', className));
-    var prevCurrentPage = useRef(currentPage);
-    var pager = React.useMemo(function () {
-        // Calculate total pages
-        var startPage = 1;
-        var endPage = 5;
-        if (length <= 5) {
-            // less than pageSize(default is 5) total pages so show all
-            startPage = 1;
-            endPage = length;
-        }
-        else {
-            // more than 3 total pages so calculate start and end pages
-            if (currentPage <= 3) {
-                startPage = 1;
-                endPage = 4;
-            }
-            else if (currentPage + 3 >= length) {
-                startPage = length - 3;
-                endPage = length;
-            }
-            else {
-                startPage = currentPage - 1;
-                endPage = currentPage + 1;
-            }
-        }
-        // Create an array of pages
-        var pages = __spreadArray([], __read(Array(endPage + 1 - startPage).keys()), false).map(function (i) { return startPage + i; });
-        // Set pager object
-        return {
-            currentPage: currentPage,
-            length: length,
-            endPage: endPage,
-            pages: pages,
-        };
-    }, [currentPage, length]);
-    useEffect(function () {
-        if (onClick && prevCurrentPage.current !== pager.currentPage) {
-            onClick(pager);
-        }
-        setCurrentPage(pager.currentPage);
-        prevCurrentPage.current = pager.currentPage;
-    }, [pager.currentPage]);
-    return (React.createElement("nav", __assign({ id: id, className: classes }, others),
-        React.createElement("a", __assign({ className: hashClass(styled, clsx('pagination-previous')) }, (currentPage === 1 ? { 'aria-disabled': true } : {}), { onClick: function () {
-                if (currentPage !== 1) {
-                    setCurrentPage(currentPage - 1);
-                }
-            }, href: href === null || href === void 0 ? void 0 : href(currentPage - 1) }),
+var Pagination = React.forwardRef(function (_a, ref) {
+    var className = _a.className, _b = _a.count, count = _b === void 0 ? 0 : _b, _c = _a.defaultPage, defaultPage = _c === void 0 ? 1 : _c, _d = _a.pageSize, pageSize = _d === void 0 ? 10 : _d, onClick = _a.onClick, testId = _a.testId, href = _a.href, others = __rest(_a, ["className", "count", "defaultPage", "pageSize", "onClick", "testId", "href"]);
+    var _e = usePagination({
+        defaultPage: defaultPage,
+        count: count,
+        pageSize: pageSize,
+        onClick: onClick,
+    }), currentPage = _e.currentPage, pager = _e.pager, handlePrevious = _e.handlePrevious, handleNext = _e.handleNext, handleClickPage = _e.handleClickPage;
+    var totalCountPages = count / pageSize;
+    var classes = hashClass(clsx('pagination', className));
+    return (React.createElement("nav", __assign({ "data-testid": testId, className: classes, ref: ref }, others),
+        React.createElement("a", __assign({ className: hashClass(clsx('pagination-previous')) }, (currentPage === 1 ? { 'aria-disabled': true } : {}), { onClick: handlePrevious, href: href === null || href === void 0 ? void 0 : href(currentPage - 1) }),
             React.createElement(Icon, { name: IconName.ARROW_LEFT })),
-        React.createElement("ul", { className: hashClass(styled, clsx('pagination-list')) },
+        React.createElement("ul", { className: hashClass(clsx('pagination-list')) },
             !pager.pages.includes(1) && (React.createElement("li", null,
-                React.createElement("span", { className: hashClass(styled, clsx('pagination-ellipsis')) }, "\u2026"))),
-            pager.pages.map(function (pageNumber) { return (React.createElement("li", { key: pageNumber },
-                React.createElement("a", __assign({ className: hashClass(styled, clsx('pagination-link')) }, (currentPage === pageNumber ? { 'aria-current': true } : {}), { "aria-label": "Aller \u00E0 la page ".concat(pageNumber), onClick: function () {
-                        setCurrentPage(pageNumber);
-                    }, href: href === null || href === void 0 ? void 0 : href(pageNumber) }), pageNumber))); }),
-            !pager.pages.includes(length) && (React.createElement("li", null,
-                React.createElement("span", { className: hashClass(styled, clsx('pagination-ellipsis')) }, "\u2026")))),
-        React.createElement("a", __assign({ className: hashClass(styled, clsx('pagination-next')) }, (currentPage === Math.max(length) ? { 'aria-disabled': true } : {}), { onClick: function () {
-                if (currentPage !== Math.max(length)) {
-                    setCurrentPage(currentPage + 1);
-                }
-            }, href: href === null || href === void 0 ? void 0 : href(currentPage + 1) }),
+                React.createElement("span", { className: hashClass(clsx('pagination-ellipsis')) }, "\u2026"))),
+            pager.pages.map(function (pageNumber) { return (React.createElement("li", { "data-testid": "".concat(testId, "_").concat(pageNumber), key: pageNumber },
+                React.createElement("a", __assign({ className: hashClass(clsx('pagination-link')) }, (currentPage === pageNumber ? { 'aria-current': true } : {}), { "aria-label": "Aller \u00E0 la page ".concat(pageNumber), onClick: handleClickPage ? function () { return handleClickPage(pageNumber); } : undefined, href: href === null || href === void 0 ? void 0 : href(pageNumber) }), pageNumber))); }),
+            !pager.pages.includes(totalCountPages) && (React.createElement("li", null,
+                React.createElement("span", { className: hashClass(clsx('pagination-ellipsis')) }, "\u2026")))),
+        React.createElement("a", __assign({ className: hashClass(clsx('pagination-next')) }, (currentPage === Math.max(pager.totalPages) ? { 'aria-disabled': true } : {}), { onClick: handleNext, href: href === null || href === void 0 ? void 0 : href(currentPage + 1) }),
             React.createElement(Icon, { name: IconName.ARROW_RIGHT }))));
-};
+});
+Pagination.displayName = ComponentName.Pagination;
 export default Pagination;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUGFnaW5hdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvcGFnaW5hdGlvbi9QYWdpbmF0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUMxRCxPQUFPLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBRWxELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUc3Qzs7Ozs7Ozs7OztHQVVHO0FBQ0gsSUFBTSxVQUFVLEdBQUcsVUFBQyxFQVFGO0lBUGhCLElBQUEsU0FBUyxlQUFBLEVBQ1QsRUFBRSxRQUFBLEVBQ0YsTUFBTSxZQUFBLEVBQ04sbUJBQWUsRUFBZixXQUFXLG1CQUFHLENBQUMsS0FBQSxFQUNmLE9BQU8sYUFBQSxFQUNQLElBQUksVUFBQSxFQUNELE1BQU0sY0FQUywrREFRbkIsQ0FEVTtJQUVILElBQUEsS0FBQSxPQUFnQyxRQUFRLENBQVMsV0FBVyxDQUFDLElBQUEsRUFBNUQsV0FBVyxRQUFBLEVBQUUsY0FBYyxRQUFpQyxDQUFBO0lBQzNELElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBQ3RDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLFlBQVksRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBRWhFLElBQU0sZUFBZSxHQUFHLE1BQU0sQ0FBUyxXQUFXLENBQUMsQ0FBQTtJQUNuRCxJQUFNLEtBQUssR0FBRyxLQUFLLENBQUMsT0FBTyxDQUFRO1FBQ2pDLHdCQUF3QjtRQUV4QixJQUFJLFNBQVMsR0FBRyxD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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUGFnaW5hdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvcGFnaW5hdGlvbi9QYWdpbmF0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUV6QixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNsRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sNENBQTRDLENBQUE7QUFFMUUsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBRXhEOzs7Ozs7Ozs7O0dBVUc7QUFDSCxJQUFNLFVBQVUsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUNqQyxVQUNFLEVBQTJHLEVBQzNHLEdBQWlDO0lBRC9CLElBQUEsU0FBUyxlQUFBLEVBQUUsYUFBUyxFQUFULEtBQUssbUJBQUcsQ0FBQyxLQUFBLEVBQUUsbUJBQWUsRUFBZixXQUFXLG1CQUFHLENBQUMsS0FBQSxFQUFFLGdCQUFhLEVBQWIsUUFBUSxtQkFBRyxFQUFFLEtBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxNQUFNLFlBQUEsRUFBRSxJQUFJLFVBQUEsRUFBSyxNQUFNLGNBQXhGLDhFQUEwRixDQUFGO0lBR2xGLElBQUEsS0FBc0UsYUFBYSxDQUFDO1FBQ3hGLFdBQVcsYUFBQTtRQUNYLEtBQUssT0FBQTtRQUNMLFFBQVEsVUFBQTtRQUNSLE9BQU8sU0FBQTtLQUNSLENBQUMsRUFMTSxXQUFXLGlCQUFBLEVBQUUsS0FBSyxXQUFBLEVBQUUsY0FBYyxvQkFBQSxFQUFFLFVBQVUsZ0JBQUEsRUFBRSxlQUFlLHFCQUtyRSxDQUFBO0lBRUYsSUFBTSxlQUFlLEdBQUcsS0FBSyxHQUFHLFFBQVEsQ0FBQTtJQUN4QyxJQUFN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

package/lib/components/pagination/Pagination.native.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import { PaginationProps } from './PaginationProps';
-import { ComponentName } from '../../components/enumsComponentsName';
+import React from 'react';
+import { View } from 'react-native';
+import { PaginationProps } from '../../components/pagination/PaginationProps';
 /**
  * Pagination Component
  * @param count {number} Number elements
@@ -8,8 +8,5 @@ import { ComponentName } from '../../components/enumsComponentsName';
  * @param pageSize {number} Element per page (default is 10)
  * @param onClick {Function} Return pagination object
  */
-declare const Pagination: {
-    ({ length, defaultPage, onClick, ...others }: PaginationProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<View>>;
 export default Pagination;

package/lib/components/pagination/Pagination.native.js

@@ -1,10 +1,10 @@
 import { __assign, __read, __rest, __spreadArray } from "tslib";
 import React, { useEffect, useRef, useState } from 'react';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
-import { Icon, IconName, IconSize } from '../../components/icon';
-import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
 import { ComponentName } from '../../components/enumsComponentsName';
+import { Icon, IconName, IconSize } from '../../components/icon';
 import { Text } from '../../components/text';
+import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
 /**
  * Pagination Component
  * @param count {number} Number elements
@@ -12,25 +12,27 @@ import { Text } from '../../components/text';
  * @param pageSize {number} Element per page (default is 10)
  * @param onClick {Function} Return pagination object
  */
-var Pagination = function (_a) {
-    var length = _a.length, _b = _a.defaultPage, defaultPage = _b === void 0 ? 1 : _b, onClick = _a.onClick, others = __rest(_a, ["length", "defaultPage", "onClick"]);
-    var _c = __read(useState(defaultPage), 2), currentPage = _c[0], setCurrentPage = _c[1];
-    var _d = __read(useState(Array.from(Array(length + 1).keys())), 1), arrayPage = _d[0];
+var Pagination = React.forwardRef(function (_a, ref) {
+    var count = _a.count, _b = _a.defaultPage, defaultPage = _b === void 0 ? 1 : _b, _c = _a.pageSize, pageSize = _c === void 0 ? 10 : _c, onClick = _a.onClick, others = __rest(_a, ["count", "defaultPage", "pageSize", "onClick"]);
+    var _d = __read(useState(defaultPage), 2), currentPage = _d[0], setCurrentPage = _d[1];
+    var _e = __read(useState(Array.from(Array(count + 1).keys())), 1), arrayPage = _e[0];
     var prevCurrentPage = useRef(currentPage);
-    var _e = __read(useState({
+    var _f = __read(useState({
         currentPage: currentPage,
-        length: length,
-        endPage: length + 1,
+        pageSize: pageSize,
+        totalPages: pageSize,
+        endPage: count,
         pages: arrayPage,
-    }), 2), pager = _e[0], setPager = _e[1];
+    }), 2), pager = _f[0], setPager = _f[1];
     useEffect(function () {
         // Calculate total pages
+        var totalPages = Math.ceil(count / pageSize);
         var startPage = 1;
         var endPage = 5;
-        if (length <= 5) {
+        if (totalPages <= 5) {
             // less than pageSize(default is 5) total pages so show all
             startPage = 1;
-            endPage = length;
+            endPage = totalPages;
         }
         else {
             // more than 3 total pages so calculate start and end pages
@@ -38,9 +40,9 @@ var Pagination = function (_a) {
                 startPage = 1;
                 endPage = 5;
             }
-            else if (currentPage + 3 >= length) {
-                startPage = length - 4;
-                endPage = length;
+            else if (currentPage + 3 >= totalPages) {
+                startPage = totalPages - 4;
+                endPage = totalPages;
             }
             else {
                 startPage = currentPage - 2;
@@ -52,16 +54,18 @@ var Pagination = function (_a) {
         // Set pager object
         setPager({
             currentPage: currentPage,
-            length: length,
+            pageSize: pageSize,
+            totalPages: totalPages,
             endPage: endPage,
             pages: pages,
         });
-    }, [currentPage, length]);
+    }, [currentPage, pageSize, count]);
     useEffect(function () {
         if (onClick && prevCurrentPage.current !== currentPage) {
             onClick(pager);
         }
     }, [currentPage]);
+    var totalCountPages = count / pageSize;
     var styles = StyleSheet.create({
         container: {
             flexDirection: 'row',
@@ -104,7 +108,7 @@ var Pagination = function (_a) {
             marginRight: -12,
         },
     });
-    return (React.createElement(View, __assign({ style: styles.container }, others),
+    return (React.createElement(View, __assign({ style: styles.container, ref: ref }, others),
         React.createElement(TouchableOpacity, { onPress: function () {
                 if (currentPage !== 1) {
                     setCurrentPage(currentPage - 1);
@@ -121,16 +125,16 @@ var Pagination = function (_a) {
                         prevCurrentPage.current = pageNumber;
                     } },
                     React.createElement(Text, { style: currentPage === pageNumber ? styles.textCurrent : styles.text }, pageNumber)))); }),
-            !pager.pages.includes(length) && (React.createElement(View, { style: { marginRight: 15 } },
+            !pager.pages.includes(totalCountPages) && (React.createElement(View, { style: { marginRight: 15 } },
                 React.createElement(Text, { style: styles.dotsRight }, "\u2026")))),
         React.createElement(TouchableOpacity, { onPress: function () {
-                if (currentPage !== Math.max(length)) {
+                if (currentPage !== Math.max(pager.totalPages)) {
                     setCurrentPage(currentPage + 1);
                     prevCurrentPage.current = currentPage + 1;
                 }
             } },
             React.createElement(Icon, { name: IconName.ARROW_RIGHT, size: IconSize.SMALL, color: TrilogyColor.MAIN }))));
-};
+});
 Pagination.displayName = ComponentName.Pagination;
 export default Pagination;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUGFnaW5hdGlvbi5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3BhZ2luYXRpb24vUGFnaW5hdGlvbi5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQzFELE9BQU8sRUFBRSxVQUFVLEVBQUUsZ0JBQWdCLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRWpFLE9BQU8sRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQzVELE9BQU8sRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFDcEUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBRWhFLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUV4Qzs7Ozs7O0dBTUc7QUFDSCxJQUFNLFVBQVUsR0FBRyxVQUFDLEVBQWdFO0lBQTlELElBQUEsTUFBTSxZQUFBLEVBQUUsbUJBQWUsRUFBZixXQUFXLG1CQUFHLENBQUMsS0FBQSxFQUFFLE9BQU8sYUFBQSxFQUFLLE1BQU0sY0FBN0Msb0NBQStDLENBQUY7SUFDekQsSUFBQSxLQUFBLE9BQWdDLFFBQVEsQ0FBUyxXQUFXLENBQUMsSUFBQSxFQUE1RCxXQUFXLFFBQUEsRUFBRSxjQUFjLFFBQWlDLENBQUE7SUFDN0QsSUFBQSxLQUFBLE9BQWMsUUFBUSxDQUFnQixLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQyxJQUFBLEVBQTFFLFNBQVMsUUFBaUUsQ0FBQTtJQUNqRixJQUFNLGVBQWUsR0FBRyxNQUFNLENBQVMsV0FBVyxDQUFDLENBQUE7SUFF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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUGFnaW5hdGlvbi5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3BhZ2luYXRpb24vUGFnaW5hdGlvbi5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQzFELE9BQU8sRUFBRSxVQUFVLEVBQUUsZ0JBQWdCLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRWpFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUc1RCxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDeEMsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUVwRTs7Ozs7O0dBTUc7QUFDSCxJQUFNLFVBQVUsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUNqQyxVQUNFLEVBQThFLEVBQzlFLEdBQW9CO0lBRGxCLElBQUEsS0FBSyxXQUFBLEVBQUUsbUJBQWUsRUFBZixXQUFXLG1CQUFHLENBQUMsS0FBQSxFQUFFLGdCQUFhLEVBQWIsUUFBUSxtQkFBRyxFQUFFLEtBQUEsRUFBRSxPQUFPLGFBQUEsRUFBSyxNQUFNLGNBQTNELCtDQUE2RCxDQUFGO0lBR3JELElBQUEsS0FBQSxPQUFnQyxRQUFRLENBQVMsV0FBVyxDQUFDLElBQUEsRUFBNUQsV0FBVyxRQUFBLEVBQUUsY0FBYyxRQUFpQyxDQUFBO0lBQzdELElBQUEsS0FBQSxPQUFjLFFBQVEsQ0FBZ0IsS0FBSyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxHQUFHLENBQUMsQ0FBQyxDQUFDLElBQUksRUFBRSxDQUFDLENBQUMsSUFBQSxF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

package/lib/components/pagination/PaginationEnum.d.ts

@@ -1,6 +1,7 @@
 export interface Pager {
     currentPage: number;
-    length: number;
+    pageSize: number;
+    totalPages: number;
     endPage: number;
     pages: number[];
 }

package/lib/components/pagination/PaginationProps.d.ts

@@ -1,13 +1,14 @@
-import { Accessibility, Dev } from '../../objects';
-import { Pager } from './PaginationEnum';
-import { CommonProps } from '../../objects/facets/CommonProps';
+import { Pager } from '../../components/pagination/PaginationEnum';
+import { Accessibility } from '../../objects/facets/Accessibility';
+import { Dev } from '../../objects/facets/Dev';
 /**
  * Pagination Interface
  */
-export interface PaginationProps extends Accessibility, Dev, CommonProps {
-    length: number;
+export interface PaginationProps extends Accessibility, Dev {
+    count: number;
     defaultPage?: number;
     pageSize?: number;
     onClick?: (pager: Pager) => void;
+    className?: string;
     href?: (page: number) => string;
 }

package/lib/components/pagination/PaginationPropsDefaults.js

@@ -1,5 +1,5 @@
 export default {
-  "length": {
+  "count": {
     "type": "string",
     "values": []
   },
@@ -24,35 +24,28 @@ export default {
       "Pager) => void"
     ]
   },
-  "href": {
-    "type": "function",
-    "values": [
-      "undefined",
-      "(page: number) => string"
-    ]
-  },
-  "accessibilityLabel": {
+  "className": {
     "type": "string",
     "values": [
       "undefined",
       "string"
     ]
   },
-  "testId": {
-    "type": "string",
+  "href": {
+    "type": "function",
     "values": [
       "undefined",
-      "string"
+      "(page: number) => string"
     ]
   },
-  "id": {
+  "accessibilityLabel": {
     "type": "string",
     "values": [
       "undefined",
       "string"
     ]
   },
-  "className": {
+  "testId": {
     "type": "string",
     "values": [
       "undefined",

package/lib/components/pagination/hook/usePagination.d.ts

@@ -0,0 +1,33 @@
+import { Pager } from '../../../components/pagination/PaginationEnum';
+interface IParams {
+    defaultPage: number;
+    count: number;
+    pageSize: number;
+    onClick?: (pager: Pager) => void;
+}
+export declare const usePagination: ({ defaultPage, count, pageSize, onClick }: IParams) => {
+    currentPage: number;
+    pager: {
+        currentPage: number;
+        totalPages: number;
+        endPage: number;
+        pages: number[];
+        pageSize: number;
+    };
+    handlePrevious: () => void;
+    handleNext: () => void;
+    handleClickPage: (pageNumber: number) => void;
+} | {
+    currentPage: number;
+    pager: {
+        currentPage: number;
+        totalPages: number;
+        endPage: number;
+        pages: number[];
+        pageSize: number;
+    };
+    handlePrevious?: undefined;
+    handleNext?: undefined;
+    handleClickPage?: undefined;
+};
+export {};

package/lib/components/pagination/hook/usePagination.js

@@ -0,0 +1,69 @@
+import { __read, __spreadArray } from "tslib";
+import React from 'react';
+export var usePagination = function (_a) {
+    var defaultPage = _a.defaultPage, count = _a.count, pageSize = _a.pageSize, onClick = _a.onClick;
+    try {
+        var _b = __read(React.useState(defaultPage), 2), currentPage_1 = _b[0], setCurrentPage_1 = _b[1];
+        var prevCurrentPage_1 = React.useRef(currentPage_1);
+        var pager_1 = React.useMemo(function () { return getPager(count, pageSize, currentPage_1); }, [currentPage_1, pageSize, count]);
+        var handlePrevious = React.useCallback(function () {
+            setCurrentPage_1(function (prev) { return (prev !== 1 ? prev - 1 : prev); });
+        }, []);
+        var handleNext = React.useCallback(function () {
+            setCurrentPage_1(function (prev) { return (prev !== Math.max(pager_1.totalPages) ? prev + 1 : prev); });
+        }, []);
+        var handleClickPage = React.useCallback(function (pageNumber) {
+            setCurrentPage_1(pageNumber);
+        }, []);
+        React.useEffect(function () {
+            if (onClick && prevCurrentPage_1.current !== pager_1.currentPage)
+                onClick(pager_1);
+            setCurrentPage_1(pager_1.currentPage);
+            prevCurrentPage_1.current = pager_1.currentPage;
+        }, [pager_1.currentPage, prevCurrentPage_1]);
+        return { currentPage: currentPage_1, pager: pager_1, handlePrevious: handlePrevious, handleNext: handleNext, handleClickPage: handleClickPage };
+    }
+    catch (_c) {
+        return {
+            currentPage: defaultPage,
+            pager: getPager(count, pageSize, defaultPage),
+        };
+    }
+};
+var getPager = function (count, pageSize, currentPage) {
+    // Calculate total pages
+    var totalPages = Math.ceil(count / pageSize);
+    var startPage = 1;
+    var endPage = 5;
+    if (totalPages <= 5) {
+        // less than pageSize(default is 5) total pages so show all
+        startPage = 1;
+        endPage = totalPages;
+    }
+    else {
+        // more than 3 total pages so calculate start and end pages
+        if (currentPage <= 3) {
+            startPage = 1;
+            endPage = 4;
+        }
+        else if (currentPage + 3 >= totalPages) {
+            startPage = totalPages - 3;
+            endPage = totalPages;
+        }
+        else {
+            startPage = currentPage - 1;
+            endPage = currentPage + 1;
+        }
+    }
+    // Create an array of pages
+    var pages = __spreadArray([], __read(Array(endPage + 1 - startPage).keys()), false).map(function (i) { return startPage + i; });
+    // Set pager object
+    return {
+        currentPage: currentPage,
+        totalPages: totalPages,
+        endPage: endPage,
+        pages: pages,
+        pageSize: pageSize,
+    };
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlUGFnaW5hdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvcGFnaW5hdGlvbi9ob29rL3VzZVBhZ2luYXRpb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFXekIsTUFBTSxDQUFDLElBQU0sYUFBYSxHQUFHLFVBQUMsRUFBa0Q7UUFBaEQsV0FBVyxpQkFBQSxFQUFFLEtBQUssV0FBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLE9BQU8sYUFBQTtJQUNuRSxJQUFJO1FBQ0ksSUFBQSxLQUFBLE9BQWdDLEtBQUssQ0FBQyxRQUFRLENBQVMsV0FBVyxDQUFDLElBQUEsRUFBbEUsYUFBVyxRQUFBLEVBQUUsZ0JBQWMsUUFBdUMsQ0FBQTtRQUN6RSxJQUFNLGlCQUFlLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBUyxhQUFXLENBQUMsQ0FBQTtRQUV6RCxJQUFNLE9BQUssR0FBRyxLQUFLLENBQUMsT0FBTyxDQUFDLGNBQU0sT0FBQSxRQUFRLENBQUMsS0FBSyxFQUFFLFFBQVEsRUFBRSxhQUFXLENBQUMsRUFBdEMsQ0FBc0MsRUFBRSxDQUFDLGFBQVcsRUFBRSxRQUFRLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FBQTtRQUV6RyxJQUFNLGNBQWMsR0FBRyxLQUFLLENBQUMsV0FBVyxDQUFDO1lBQ3ZDLGdCQUFjLENBQUMsVUFBQyxJQUFJLElBQUssT0FBQSxDQUFDLElBQUksS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxFQUE5QixDQUE4QixDQUFDLENBQUE7UUFDMUQsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFBO1FBRU4sSUFBTSxVQUFVLEdBQUcsS0FBSyxDQUFDLFdBQVcsQ0FBQztZQUNuQyxnQkFBYyxDQUFDLFVBQUMsSUFBSSxJQUFLLE9BQUEsQ0FBQyxJQUFJLEtBQUssSUFB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

package/lib/components/pagination/index.d.ts

@@ -1,3 +1,2 @@
-import Pagination from './Pagination';
-export { Pagination };
-export * from './PaginationEnum';
+export { default as Pagination } from '../../components/pagination/Pagination';
+export * from '../../components/pagination/PaginationEnum';