catchup-library-web 2.5.8 → 2.5.9

package/dist/index.js

@@ -7682,77 +7682,56 @@ var PageTravelGroup = ({
   (0, import_react28.useEffect)(() => {
     setNewPageNumber(pageNumber + 1);
   }, [pageNumber]);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap", children: [
-    pageNumber === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-      BaseImage_default,
-      {
-        size: "small",
-        alt: "arrow-left",
-        src: "/icons/arrow-left.webp",
-        onClick: () => {
-          if (isImageProcessing) {
-            handleImageProcessing();
-          } else {
-            if (pageNumber - 1 >= 0) {
-              setPageNumber(pageNumber - 1);
-            }
-            setImageReady(false);
-          }
-        }
-      }
-    ) }),
-    Array.from(Array(totalPageNumber).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-      "p",
+  const handlePageChange = (newPage) => {
+    if (isImageProcessing) {
+      handleImageProcessing();
+    } else {
+      setPageNumber(newPage);
+      setImageReady(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap gap-x-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      "button",
       {
-        className: `${pageNumber === index ? "text-xl" : "text-md"} cursor-pointer`,
-        onClick: () => {
-          if (isImageProcessing) {
-            handleImageProcessing();
-          } else {
-            setPageNumber(index);
-            setImageReady(false);
-          }
-        },
-        children: index + 1
+        className: "px-2 py-1 bg-catchup-blue-100 rounded-catchup-small",
+        disabled: pageNumber <= 0,
+        onClick: () => handlePageChange(pageNumber - 1),
+        children: "\u2190"
       }
-    ) }, index)),
-    totalPageNumber === 0 || pageNumber === totalPageNumber - 1 ? null : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-      BaseImage_default,
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("p", { className: "text-md", children: [
+      pageNumber + 1,
+      " / ",
+      totalPageNumber
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      "button",
       {
-        size: "small",
-        alt: "arrow-right",
-        src: "/icons/arrow-right.webp",
-        onClick: () => {
-          if (isImageProcessing) {
-            handleImageProcessing();
-          } else {
-            if (pageNumber + 1 <= totalPageNumber) {
-              setPageNumber(pageNumber + 1);
-            }
-            setImageReady(false);
-          }
-        }
+        className: "px-2 py-1 bg-catchup-blue-100 rounded-catchup-small",
+        disabled: pageNumber >= totalPageNumber - 1,
+        onClick: () => handlePageChange(pageNumber + 1),
+        children: "\u2192"
       }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       "input",
       {
-        className: `w-[90px] py-2 px-4 border border-catchup-gray-100 rounded-catchup-xlarge focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 focus:shadow-input`,
+        className: "w-[90px] py-2 px-4 border border-catchup-gray-100 rounded-catchup-xlarge focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 focus:shadow-input",
         type: "number",
         value: newPageNumber,
         onChange: (e) => {
-          const inputPageNumber = parseInt(e.target.value);
-          setNewPageNumber(inputPageNumber);
+          setNewPageNumber(parseInt(e.target.value));
         },
         onKeyDown: (e) => {
           if (isNaN(newPageNumber) || newPageNumber <= 0 || newPageNumber > totalPageNumber)
             return;
           if (e.key === "Enter") {
-            setPageNumber(newPageNumber - 1);
+            handlePageChange(newPageNumber - 1);
           }
         }
       }
-    ) })
+    )
   ] });
 };
 var PageTravelGroup_default = PageTravelGroup;

package/dist/index.mjs

@@ -7448,77 +7448,56 @@ var PageTravelGroup = ({
   useEffect18(() => {
     setNewPageNumber(pageNumber + 1);
   }, [pageNumber]);
-  return /* @__PURE__ */ jsxs41("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap", children: [
-    pageNumber === 0 ? null : /* @__PURE__ */ jsx52("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ jsx52(
-      BaseImage_default,
-      {
-        size: "small",
-        alt: "arrow-left",
-        src: "/icons/arrow-left.webp",
-        onClick: () => {
-          if (isImageProcessing) {
-            handleImageProcessing();
-          } else {
-            if (pageNumber - 1 >= 0) {
-              setPageNumber(pageNumber - 1);
-            }
-            setImageReady(false);
-          }
-        }
-      }
-    ) }),
-    Array.from(Array(totalPageNumber).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ jsx52("div", { className: "px-2", children: /* @__PURE__ */ jsx52(
-      "p",
+  const handlePageChange = (newPage) => {
+    if (isImageProcessing) {
+      handleImageProcessing();
+    } else {
+      setPageNumber(newPage);
+      setImageReady(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs41("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap gap-x-2", children: [
+    /* @__PURE__ */ jsx52(
+      "button",
       {
-        className: `${pageNumber === index ? "text-xl" : "text-md"} cursor-pointer`,
-        onClick: () => {
-          if (isImageProcessing) {
-            handleImageProcessing();
-          } else {
-            setPageNumber(index);
-            setImageReady(false);
-          }
-        },
-        children: index + 1
+        className: "px-2 py-1 bg-catchup-blue-100 rounded-catchup-small",
+        disabled: pageNumber <= 0,
+        onClick: () => handlePageChange(pageNumber - 1),
+        children: "\u2190"
       }
-    ) }, index)),
-    totalPageNumber === 0 || pageNumber === totalPageNumber - 1 ? null : /* @__PURE__ */ jsx52("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ jsx52(
-      BaseImage_default,
+    ),
+    /* @__PURE__ */ jsxs41("p", { className: "text-md", children: [
+      pageNumber + 1,
+      " / ",
+      totalPageNumber
+    ] }),
+    /* @__PURE__ */ jsx52(
+      "button",
       {
-        size: "small",
-        alt: "arrow-right",
-        src: "/icons/arrow-right.webp",
-        onClick: () => {
-          if (isImageProcessing) {
-            handleImageProcessing();
-          } else {
-            if (pageNumber + 1 <= totalPageNumber) {
-              setPageNumber(pageNumber + 1);
-            }
-            setImageReady(false);
-          }
-        }
+        className: "px-2 py-1 bg-catchup-blue-100 rounded-catchup-small",
+        disabled: pageNumber >= totalPageNumber - 1,
+        onClick: () => handlePageChange(pageNumber + 1),
+        children: "\u2192"
       }
-    ) }),
-    /* @__PURE__ */ jsx52("div", { children: /* @__PURE__ */ jsx52(
+    ),
+    /* @__PURE__ */ jsx52(
       "input",
       {
-        className: `w-[90px] py-2 px-4 border border-catchup-gray-100 rounded-catchup-xlarge focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 focus:shadow-input`,
+        className: "w-[90px] py-2 px-4 border border-catchup-gray-100 rounded-catchup-xlarge focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 focus:shadow-input",
         type: "number",
         value: newPageNumber,
         onChange: (e) => {
-          const inputPageNumber = parseInt(e.target.value);
-          setNewPageNumber(inputPageNumber);
+          setNewPageNumber(parseInt(e.target.value));
         },
         onKeyDown: (e) => {
           if (isNaN(newPageNumber) || newPageNumber <= 0 || newPageNumber > totalPageNumber)
             return;
           if (e.key === "Enter") {
-            setPageNumber(newPageNumber - 1);
+            handlePageChange(newPageNumber - 1);
           }
         }
       }
-    ) })
+    )
   ] });
 };
 var PageTravelGroup_default = PageTravelGroup;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "2.5.8",
+  "version": "2.5.9",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/components/groups/PageTravelGroup.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
 import { IPageTravelGroupProps } from "../../properties/GroupProperties";
-import BaseImage from "../images/BaseImage";
 
 const PageTravelGroup = ({
   isImageProcessing,
@@ -22,92 +21,53 @@ const PageTravelGroup = ({
     setNewPageNumber(pageNumber + 1);
   }, [pageNumber]);
 
-  return (
-    <div className="flex-1 flex flex-row justify-center items-center flex-wrap">
-      {pageNumber === 0 ? null : (
-        <div className="px-2 flex flex-col items-center">
-          <BaseImage
-            size="small"
-            alt="arrow-left"
-            src="/icons/arrow-left.webp"
-            onClick={() => {
-              if (isImageProcessing) {
-                handleImageProcessing();
-              } else {
-                if (pageNumber - 1 >= 0) {
-                  setPageNumber(pageNumber - 1);
-                }
-                setImageReady(false);
-              }
-            }}
-          />
-        </div>
-      )}
-      {Array.from(Array(totalPageNumber).keys())
-        .filter((index) => index < pageNumber + 5)
-        .filter((index) => index > pageNumber - 5)
-        .map((index) => (
-          <div key={index} className="px-2">
-            <p
-              className={`${
-                pageNumber === index ? "text-xl" : "text-md"
-              } cursor-pointer`}
-              onClick={() => {
-                if (isImageProcessing) {
-                  handleImageProcessing();
-                } else {
-                  setPageNumber(index);
-                  setImageReady(false);
-                }
-              }}
-            >
-              {index + 1}
-            </p>
-          </div>
-        ))}
-
-      {totalPageNumber === 0 || pageNumber === totalPageNumber - 1 ? null : (
-        <div className="px-2 flex flex-col items-center">
-          <BaseImage
-            size="small"
-            alt="arrow-right"
-            src="/icons/arrow-right.webp"
-            onClick={() => {
-              if (isImageProcessing) {
-                handleImageProcessing();
-              } else {
-                if (pageNumber + 1 <= totalPageNumber) {
-                  setPageNumber(pageNumber + 1);
-                }
+  const handlePageChange = (newPage: number) => {
+    if (isImageProcessing) {
+      handleImageProcessing();
+    } else {
+      setPageNumber(newPage);
+      setImageReady(false);
+    }
+  };
 
-                setImageReady(false);
-              }
-            }}
-          />
-        </div>
-      )}
-      <div>
-        <input
-          className={`w-[90px] py-2 px-4 border border-catchup-gray-100 rounded-catchup-xlarge focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 focus:shadow-input`}
-          type="number"
-          value={newPageNumber}
-          onChange={(e) => {
-            const inputPageNumber = parseInt(e.target.value);
-            setNewPageNumber(inputPageNumber);
-          }}
-          onKeyDown={(e) => {
-            if (
-              isNaN(newPageNumber) ||
-              newPageNumber <= 0 ||
-              newPageNumber > totalPageNumber
-            )
-              return;
-            if (e.key === "Enter") {
-              setPageNumber(newPageNumber - 1);
-            }
-          }}
-        />
-      </div>
+  return (
+    <div className="flex-1 flex flex-row justify-center items-center flex-wrap gap-x-2">
+      <button
+        className="px-2 py-1 bg-catchup-blue-100 rounded-catchup-small"
+        disabled={pageNumber <= 0}
+        onClick={() => handlePageChange(pageNumber - 1)}
+      >
+        ←
+      </button>
+      <p className="text-md">
+        {pageNumber + 1} / {totalPageNumber}
+      </p>
+      <button
+        className="px-2 py-1 bg-catchup-blue-100 rounded-catchup-small"
+        disabled={pageNumber >= totalPageNumber - 1}
+        onClick={() => handlePageChange(pageNumber + 1)}
+      >
+        →
+      </button>
+      <input
+        className="w-[90px] py-2 px-4 border border-catchup-gray-100 rounded-catchup-xlarge focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 focus:shadow-input"
+        type="number"
+        value={newPageNumber}
+        onChange={(e) => {
+          setNewPageNumber(parseInt(e.target.value));
+        }}
+        onKeyDown={(e) => {
+          if (
+            isNaN(newPageNumber) ||
+            newPageNumber <= 0 ||
+            newPageNumber > totalPageNumber
+          )
+            return;
+          if (e.key === "Enter") {
+            handlePageChange(newPageNumber - 1);
+          }
+        }}
+      />
     </div>
   );
 };