fix(pagination): fix update bug

* fix(pagination): fix update bug
NJUPT-SAST · Apr 26, 2024 · a7b5174 · a7b5174
1 parent ebf66e9
commit a7b5174
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 32 deletions.
diff --git a/packages/ui-react/lib/Checkbox/Checkbox.stories.tsx b/packages/ui-react/lib/Checkbox/Checkbox.stories.tsx
@@ -3,6 +3,10 @@ import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { Checkbox, type CheckboxProps } from './Checkbox';
 
+const test = (value) => {
+  console.log(value);
+};
+
 const meta = {
   title: 'Components/Checkbox',
   component: Checkbox,
@@ -20,6 +24,7 @@ type Story = StoryObj<typeof meta>;
 const defaultProps: CheckboxProps = {
   label: 'SAST',
   disabled: false,
+  onChecked: test,
 };
 
 export const DefaultCheckbox: Story = {

diff --git a/packages/ui-react/lib/Pagination/Pagination.tsx b/packages/ui-react/lib/Pagination/Pagination.tsx
@@ -66,11 +66,8 @@ export const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
 
     useEffect(() => {
       onChange(currentPage);
-    }, [currentPage, onChange]);
-
-    useEffect(() => {
-      if (activePage) changeCurrentPage(activePage);
-    }, [activePage, changeCurrentPage]);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentPage]);
 
     useEffect(() => {
       const newItems: ReactNode[] = [];
@@ -83,6 +80,7 @@ export const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
               key={i}
               index={i}
               disabled={disabled}
+              activePage={activePage}
             >
               {i + 1}
             </PaginationItem>,
@@ -95,15 +93,20 @@ export const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
             newItems.push(
               <PaginationItem
                 type="select"
+                key={i}
                 index={i}
                 disabled={disabled}
+                activePage={activePage}
               >
                 {i + 1}
               </PaginationItem>,
             );
           }
           newItems.push(
-            <PaginationItem type="none">
+            <PaginationItem
+              type="none"
+              key="more"
+            >
               <span>...</span>
             </PaginationItem>,
           );
@@ -112,7 +115,9 @@ export const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
               <PaginationItem
                 type="select"
                 index={i}
+                key={i}
                 disabled={disabled}
+                activePage={activePage}
               >
                 {i + 1}
               </PaginationItem>,
@@ -126,14 +131,19 @@ export const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
               <PaginationItem
                 type="select"
                 index={i}
+                key={i}
                 disabled={disabled}
+                activePage={activePage}
               >
                 {i + 1}
               </PaginationItem>,
             );
           }
           newItems.push(
-            <PaginationItem type="none">
+            <PaginationItem
+              type="none"
+              key="more"
+            >
               <span>...</span>
             </PaginationItem>,
           );
@@ -142,7 +152,9 @@ export const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
               <PaginationItem
                 type="select"
                 index={i}
+                key={i}
                 disabled={disabled}
+                activePage={activePage}
               >
                 {i + 1}
               </PaginationItem>,
@@ -155,13 +167,18 @@ export const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
             <PaginationItem
               type="select"
               index={0}
+              key={1}
               disabled={disabled}
+              activePage={activePage}
             >
               {1}
             </PaginationItem>,
           );
           newItems.push(
-            <PaginationItem type="none">
+            <PaginationItem
+              type="none"
+              key="leftMore"
+            >
               <span>...</span>
             </PaginationItem>,
           );
@@ -170,14 +187,19 @@ export const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
               <PaginationItem
                 type="select"
                 index={i}
+                key={i}
                 disabled={disabled}
+                activePage={activePage}
               >
                 {i + 1}
               </PaginationItem>,
             );
           }
           newItems.push(
-            <PaginationItem type="none">
+            <PaginationItem
+              type="none"
+              key="rightMore"
+            >
               <span>...</span>
             </PaginationItem>,
           );
@@ -186,39 +208,41 @@ export const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
               type="select"
               index={pageNumber - 1}
               disabled={disabled}
+              key={pageNumber - 1}
+              activePage={activePage}
             >
               {pageNumber}
             </PaginationItem>,
           );
         }
       }
       setItemList(newItems);
-    }, [pageNumber, currentPage, disabled]);
+    }, [pageNumber, currentPage, disabled, activePage]);
 
     const PaginationClass = classNames(`${styles['base']} ${styles[disabled ? 'disabled' : '']}`);
 
     return (
-      <>
-        <div
-          ref={ref}
-          {...rest}
-          className={PaginationClass}
+      <div
+        ref={ref}
+        {...rest}
+        className={PaginationClass}
+      >
+        <PaginationItem
+          type="delete"
+          disabled={currentPage === 1 || disabled}
+          key={'delete'}
+        >
+          <ChevronsLeft size={16} />
+        </PaginationItem>
+        {itemList}
+        <PaginationItem
+          type="add"
+          disabled={currentPage === pageNumber || disabled}
+          key={'add'}
         >
-          <PaginationItem
-            type="delete"
-            disabled={currentPage === 1 || disabled}
-          >
-            <ChevronsLeft size={16} />
-          </PaginationItem>
-          {itemList}
-          <PaginationItem
-            type="add"
-            disabled={currentPage === pageNumber || disabled}
-          >
-            <ChevronsRight size={16} />
-          </PaginationItem>
-        </div>
-      </>
+          <ChevronsRight size={16} />
+        </PaginationItem>
+      </div>
     );
   },
 );

diff --git a/packages/ui-react/lib/Pagination/PaginationItem.tsx b/packages/ui-react/lib/Pagination/PaginationItem.tsx
@@ -8,13 +8,15 @@ export interface PaginationItemProps {
   disabled?: boolean;
   type: 'select' | 'add' | 'delete' | 'none';
   index?: number;
+  activePage?: number;
 }
 
 export const PaginationItem = ({
   children,
   disabled = false,
   index,
   type,
+  activePage,
 }: PaginationItemProps) => {
   const [currentPage, increaseCurrentPage, decreaseCurrentPage, changeCurrentPage] =
     useCurrentPageStore((state) => [
@@ -33,7 +35,7 @@ export const PaginationItem = ({
   return (
     <Button
       className={styles['pagination-item']}
-      color={`${index !== undefined && currentPage === index + 1 ? 'primary' : 'border'}`}
+      color={`${index !== undefined && (activePage || currentPage) === index + 1 ? 'primary' : 'border'}`}
       onClick={() => handleClick(type, index)}
       disabled={disabled}
     >

diff --git a/packages/ui-react/package.json b/packages/ui-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui-aurora/react",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "A React UI library built for SASTOJ",
   "author": "sast",
   "license": "MIT",