@trackunit/react-components 0.1.40 → 0.1.42

package/index.js

@@ -1723,34 +1723,19 @@ const SkeletonLine = tw.div `
  * @param {IPaginationProps} props - The props for the Pagination component
  * @returns {JSX.Element} Pagination component
  */
-const Pagination = ({ gotoPage, previousPage, nextPage, pageCount, pageIndex, canPreviousPage, canNextPage, loading, className, dataTestId, getTranslatedCount, getTranslatedPage, onPageChange, cursorBase, }) => {
-    const [page, setPage] = React.useState(pageIndex);
-    const [pageInputValue, setPageInputValue] = React.useState(String(pageIndex !== undefined ? pageIndex + 1 : 1));
+const Pagination = ({ previousPage, nextPage, canPreviousPage, canNextPage, pageCount, pageIndex, loading, className, dataTestId, getTranslatedCount, onPageChange, cursorBase, }) => {
+    const [page, setPage] = useState(pageIndex);
+    const [currentPage, setCurrentPage] = useState(String(pageIndex !== undefined ? pageIndex + 1 : 1));
     if (!loading && pageCount === undefined) {
         throw Error("Pagination should be provided with a pageCount");
     }
-    React.useEffect(() => {
+    useEffect(() => {
         if (pageIndex !== undefined && (isNaN(pageIndex) || pageIndex < 0)) {
-            gotoPage(0);
-        }
-        else if (pageIndex !== undefined && pageCount !== null && pageCount !== undefined && pageIndex > pageCount - 1) {
-            gotoPage(pageCount - 1);
-        }
-        else {
             setPage(pageIndex);
-            pageIndex !== undefined && setPageInputValue(String(pageIndex + 1));
+            pageIndex !== undefined && setCurrentPage(String(pageIndex + 1));
         }
-    }, [pageIndex, gotoPage, setPage, setPageInputValue, pageCount]);
-    const parsePageString = React.useCallback((pageString) => {
-        let val = parseInt(pageString);
-        val = isNaN(val) ? 0 : val;
-        val = val < 1 ? 0 : val - 1;
-        if (pageCount !== undefined && pageCount !== null) {
-            val = val > pageCount ? pageCount - 1 : val;
-        }
-        return val;
-    }, [pageCount]);
-    const handlePageChange = React.useCallback((action) => {
+    }, [pageIndex, setPage, setCurrentPage, pageCount]);
+    const handlePageChange = useCallback((action) => {
         const from = page;
         let to = from;
         let description = "";
@@ -1765,37 +1750,17 @@ const Pagination = ({ gotoPage, previousPage, nextPage, pageCount, pageIndex, ca
                 nextPage();
                 description = "Next Page";
                 break;
-            case "manual":
-                to = parsePageString(pageInputValue);
-                gotoPage(to);
-                description = "Manual Page Change";
-                break;
         }
         if (to) {
             setPage(to);
-            setPageInputValue(String(to + 1));
+            setCurrentPage(String(to + 1));
         }
         onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange({ from, to, description });
-    }, [page, onPageChange, previousPage, nextPage, parsePageString, pageInputValue, gotoPage]);
-    const handleOnBlur = () => {
-        handlePageChange("manual");
-    };
-    const handleOnFocus = (e) => e.target.select();
-    const handleOnChange = React.useCallback((e) => {
-        setPageInputValue(e.target.value);
-    }, []);
-    const handleOnKeyPress = React.useCallback((e) => {
-        if (e.key !== "Enter") {
-            return;
-        }
-        handlePageChange("manual");
-    }, [handlePageChange]);
+    }, [page, onPageChange, previousPage, nextPage]);
     if (loading) {
         return (jsx(Root$3, Object.assign({ className: className }, { children: jsx(SkeletonLines, { height: 16, width: 150 }) })));
     }
-    return (jsxs(Root$3, Object.assign({ "data-testid": dataTestId, className: className }, { children: [jsx(IconButton, { onClick: () => handlePageChange("prev"), disabled: cursorBase ? !canPreviousPage || false : page !== undefined && page <= 0, "data-testid": "prev-page", icon: jsx(Icon, { name: "ChevronLeftIcon", size: "small" }), size: "small", color: "secondary", variant: "transparent" }), !cursorBase && (jsxs(Fragment, { children: [jsx(Text$1, { children: getTranslatedPage() }), jsx(PageInput, { type: "number", min: 1, 
-                        // max={amountOfPages}
-                        value: pageInputValue, onFocus: handleOnFocus, onBlur: handleOnBlur, onChange: handleOnChange, onKeyPress: handleOnKeyPress, "data-testid": "page-input" }), jsx(TextStyled, Object.assign({ dataTestId: "page-count" }, { children: pageCount !== null && pageCount !== undefined && getTranslatedCount(pageCount) }))] })), jsx(IconButton, { onClick: () => handlePageChange("next"), disabled: cursorBase
+    return (jsxs(Root$3, Object.assign({ "data-testid": dataTestId, className: className }, { children: [jsx(IconButton, { onClick: () => handlePageChange("prev"), disabled: cursorBase ? !canPreviousPage || false : page !== undefined && page <= 0, "data-testid": "prev-page", icon: jsx(Icon, { name: "ChevronLeftIcon", size: "small" }), size: "small", color: "secondary", variant: "transparent" }), !cursorBase && (jsxs(Fragment, { children: [jsx(TextStyled, Object.assign({ dataTestId: "current-page" }, { children: currentPage })), jsx(TextStyled, Object.assign({ dataTestId: "page-count" }, { children: pageCount !== null && pageCount !== undefined && getTranslatedCount(pageCount) }))] })), jsx(IconButton, { onClick: () => handlePageChange("next"), disabled: cursorBase
                     ? !canNextPage || false
                     : page !== undefined && pageCount !== undefined && pageCount !== null && page >= pageCount - 1, "data-testid": "next-page", icon: jsx(Icon, { name: "ChevronRightIcon", size: "small" }), size: "small", color: "secondary", variant: "transparent" })] })));
 };
@@ -1804,14 +1769,6 @@ tu-pagination
 `;
 const TextStyled = twx(Text$1) `
   tu-pagination__text
-`;
-const PageInput = tw.input `
- tu-pagination__page-input
- [&::-webkit-inner-spin-button]:[-webkit-appearance:none]
- [&::-webkit-outer-spin-button]:[-webkit-appearance:none]
- [&::-webkit-inner-spin-button]:m-0
- [&::-webkit-outer-spin-button]:m-0
- [-moz-appearance:textfield]
 `;
 
 /**
@@ -2971,35 +2928,36 @@ function tryParse(value) {
 }
 
 /**
- * The useTimeout hook.
- *
  * @param {UseTimeoutProps} props The props
- * @returns {{ startTimeout: () => void; stopTimeout: () => void; }} return
+ * @returns {{ startTimeout: () => void; stopTimeout: () => void; isReady: boolean | null}} return
  */
 const useTimeout = ({ onTimeout, duration }) => {
-    const [activated, setActivated] = useState(true);
-    const timeoutRef = useRef();
+    const ready = useRef(false);
+    const timeout = useRef();
+    const callback = useRef(onTimeout);
+    const isReady = useCallback(() => ready.current, []);
     const startTimeout = useCallback(() => {
-        setActivated(true);
-    }, []);
+        ready.current = false;
+        timeout.current && clearTimeout(timeout.current);
+        timeout.current = setTimeout(() => {
+            ready.current = true;
+            callback.current();
+        }, duration);
+    }, [duration]);
     const stopTimeout = useCallback(() => {
-        window.clearTimeout(timeoutRef.current);
-        setActivated(false);
+        ready.current = null;
+        timeout.current && clearTimeout(timeout.current);
     }, []);
+    // update ref when function changes
     useEffect(() => {
-        if (activated) {
-            timeoutRef.current = window.setTimeout(() => {
-                onTimeout();
-            }, duration);
-        }
-        return () => {
-            stopTimeout();
-        };
-    }, [onTimeout, activated, duration, stopTimeout]);
-    return {
-        startTimeout,
-        stopTimeout,
-    };
+        callback.current = onTimeout;
+    }, [onTimeout]);
+    // startTimeout on mount, stopTimeout on unmount
+    useEffect(() => {
+        startTimeout();
+        return stopTimeout;
+    }, [duration, startTimeout, stopTimeout]);
+    return [isReady, stopTimeout, startTimeout];
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.40",
+  "version": "0.1.42",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {

package/src/components/Pagination/Pagination.d.ts

@@ -1,9 +1,5 @@
 /// <reference types="react" />
 export interface IPaginationProps {
-    /**
-     * A go to page handler
-     */
-    gotoPage: (index: number) => void;
     /**
      * A go to previous page handler
      */
@@ -44,10 +40,6 @@ export interface IPaginationProps {
      * An helper to get translation for count.
      */
     getTranslatedCount: (count: number) => string;
-    /**
-     * An helper to get translation for page.
-     */
-    getTranslatedPage: () => string;
     /**
      * Callback that fires on page change with details about the action
      */
@@ -67,4 +59,4 @@ export interface IPaginationProps {
  * @param {IPaginationProps} props - The props for the Pagination component
  * @returns {JSX.Element} Pagination component
  */
-export declare const Pagination: ({ gotoPage, previousPage, nextPage, pageCount, pageIndex, canPreviousPage, canNextPage, loading, className, dataTestId, getTranslatedCount, getTranslatedPage, onPageChange, cursorBase, }: IPaginationProps) => JSX.Element;
+export declare const Pagination: ({ previousPage, nextPage, canPreviousPage, canNextPage, pageCount, pageIndex, loading, className, dataTestId, getTranslatedCount, onPageChange, cursorBase, }: IPaginationProps) => JSX.Element;

package/src/hooks/useTimeout.d.ts

@@ -1,15 +1,11 @@
+export type UseTimeoutReturn = [() => boolean | null, () => void, () => void];
 interface UseTimeoutProps {
     onTimeout: () => void;
     duration: number;
 }
 /**
- * The useTimeout hook.
- *
  * @param {UseTimeoutProps} props The props
- * @returns {{ startTimeout: () => void; stopTimeout: () => void; }} return
+ * @returns {{ startTimeout: () => void; stopTimeout: () => void; isReady: boolean | null}} return
  */
-export declare const useTimeout: ({ onTimeout, duration }: UseTimeoutProps) => {
-    startTimeout: () => void;
-    stopTimeout: () => void;
-};
+export declare const useTimeout: ({ onTimeout, duration }: UseTimeoutProps) => UseTimeoutReturn;
 export {};