next-helios-fe 1.8.73 → 1.8.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.8.73",
+  "version": "1.8.74",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/table/index.tsx

@@ -159,8 +159,8 @@ export const Table: TableComponentProps = ({
     xlsx.writeFile(workbook, fileName + ".xlsx");
   };
 
-  const handleOnPreviousClick = () => {
-    if (page - 1 === 1) {
+  useEffect(() => {
+    if (page === 1) {
       paginationRef.current?.scrollTo({
         left: 0,
         behavior: "smooth",
@@ -169,25 +169,10 @@ export const Table: TableComponentProps = ({
       document.getElementById(`pagination-page-${page - 1}`)?.scrollIntoView({
         behavior: "smooth",
         block: "nearest",
-        inline: "end",
-      });
-    }
-  };
-
-  const handleOnNextClick = () => {
-    if (page + 1 === Math.ceil(data?.length / maxRow)) {
-      paginationRef.current?.scrollTo({
-        left: paginationRef.current?.scrollWidth,
-        behavior: "smooth",
-      });
-    } else {
-      document.getElementById(`pagination-page-${page + 1}`)?.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest",
-        inline: "end",
+        inline: "center",
       });
     }
-  };
+  }, [page]);
 
   const filteredData = useMemo(() => {
     const tempData = data
@@ -813,7 +798,7 @@ export const Table: TableComponentProps = ({
               }}
             />
           </div>
-          <div className="block md:hidden !text-sm">
+          <div className="block md:hidden w-36 !text-sm">
             <Form.Select
               options={{
                 width: "fit",
@@ -833,7 +818,7 @@ export const Table: TableComponentProps = ({
             />
           </div>
           {filteredData && filteredData.length !== 0 && (
-            <span className="hidden md:block text-sm text-disabled">{`Showing ${
+            <span className="hidden lg:block text-sm text-disabled">{`Showing ${
               (page - 1) * maxRow + 1
             } to ${
               page * maxRow > filteredData?.length
@@ -848,10 +833,6 @@ export const Table: TableComponentProps = ({
               disabled={page === 1}
               onClick={() => {
                 setPage(1);
-                paginationRef.current?.scrollTo({
-                  left: 0,
-                  behavior: "smooth",
-                });
               }}
             >
               <Icon icon="gravity-ui:chevrons-left" />
@@ -862,14 +843,13 @@ export const Table: TableComponentProps = ({
               disabled={page === 1}
               onClick={() => {
                 setPage((prev) => prev - 1);
-                handleOnPreviousClick();
               }}
             >
               <Icon icon="gravity-ui:chevron-left" />
             </button>
             <div
               ref={paginationRef}
-              className="flex gap-2 max-w-20 overflow-auto [&::-webkit-scrollbar]:hidden"
+              className="flex gap-2 max-w-20 xl:max-w-[124px] overflow-auto [&::-webkit-scrollbar]:hidden"
             >
               {Array.from({
                 length: Math.ceil(filteredData?.length / maxRow),
@@ -896,7 +876,6 @@ export const Table: TableComponentProps = ({
               disabled={filteredData?.length <= page * maxRow}
               onClick={() => {
                 setPage((prev) => prev + 1);
-                handleOnNextClick();
               }}
             >
               <Icon icon="gravity-ui:chevron-right" />
@@ -907,10 +886,6 @@ export const Table: TableComponentProps = ({
               disabled={filteredData?.length <= page * maxRow}
               onClick={() => {
                 setPage(Math.ceil(filteredData?.length / maxRow));
-                paginationRef.current?.scrollTo({
-                  left: paginationRef.current?.scrollWidth,
-                  behavior: "smooth",
-                });
               }}
             >
               <Icon icon="gravity-ui:chevrons-right" />