fix: update logic expanded multiple row

cardano-foundation · Oct 30, 2024 · 75b7321 · 75b7321
1 parent 51940e7
commit 75b7321
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 23 deletions.
diff --git a/src/components/commons/Table/index.tsx b/src/components/commons/Table/index.tsx
@@ -345,19 +345,19 @@ const TableBody = <T extends ColumnType>({
               handleOpenDetail={onClickRow} // this event occur when click on eye icon
               showTabView={showTabView}
               selected={!!rowKey && (typeof rowKey === "function" ? rowKey(row) : row[rowKey]) === selected}
-              selectedProps={selected === index ? selectedProps : undefined}
+              selectedProps={selected?.includes(index) ? selectedProps : undefined}
               selectable={selectable}
               toggleSelection={toggleSelection}
               isSelected={isSelected}
               isModal={isModal}
               onCallBackHeight={onCallBackHeight}
               expandedTable={expandedTable}
             />
-            {expandedTable && !!rowKey && (typeof rowKey === "function" ? rowKey(row) : row[rowKey]) === selected && (
+            {expandedTable && !!rowKey && (
               <tr>
                 <td colSpan={columns.length}>
                   <Collapse
-                    in={!!rowKey && (typeof rowKey === "function" ? rowKey(row) : row[rowKey]) === selected}
+                    in={!!rowKey && selected?.includes(typeof rowKey === "function" ? rowKey(row) : row[rowKey])}
                     timeout="auto"
                     unmountOnExit
                   >

diff --git a/src/pages/BlockList/index.tsx b/src/pages/BlockList/index.tsx
@@ -9,7 +9,6 @@ import { Column } from "src/types/table";
 import CustomTooltip from "src/components/commons/CustomTooltip";
 import { details } from "src/commons/routers";
 import { formatDateTimeLocal, formatNameBlockNo, getShortHash } from "src/commons/utils/helper";
-import { setOnDetailView } from "src/stores/user";
 import Card from "src/components/commons/Card";
 import Table from "src/components/commons/Table";
 import { API } from "src/commons/utils/api";
@@ -29,7 +28,7 @@ const BlockList = () => {
   const { onDetailView } = useSelector(({ user }: RootState) => user);
   const blockNo = useSelector(({ system }: RootState) => system.blockNo);
   const { pageInfo, setSort } = usePageInfo();
-  const [selected, setSelected] = useState<number | string | null>(null);
+  const [selected, setSelected] = useState<(number | string | null)[]>([]);
 
   const fetchData = useFetchList<Block>(API.BLOCK.LIST, { ...pageInfo }, false, blockNo);
   const mainRef = useRef(document.querySelector("#main"));
@@ -129,28 +128,29 @@ const BlockList = () => {
     }
   ];
 
-  const openDetail = (_: MouseEvent<Element, globalThis.MouseEvent>, r: Block) => {
-    setOnDetailView(true);
-    setSelected(r.blockNo || r.hash);
-  };
-
-  const onClickTabView = (_: MouseEvent<Element, globalThis.MouseEvent>, r: Block) => {
+  const handleOpenDetail = (_: MouseEvent<Element, globalThis.MouseEvent>, r: Block) => {
     history.push(details.block(r.blockNo));
   };
 
   const handleClose = () => {
-    setOnDetailView(false);
-    setSelected(null);
+    setSelected([]);
   };
 
   useEffect(() => {
     if (!onDetailView) handleClose();
   }, [onDetailView]);
 
   const handleExpandedRow = (data: Block) => {
-    setSelected(selected === data.blockNo ? null : data.blockNo);
-  };
+    setSelected((prev) => {
+      const isSelected = prev.includes(Number(data.blockNo));
 
+      if (isSelected) {
+        return prev.filter((blockNo) => blockNo !== Number(data.blockNo));
+      } else {
+        return [...prev, Number(data.blockNo)];
+      }
+    });
+  };
   return (
     <StyledContainer>
       <Card data-testid="blocks-card" title={t("head.page.blocks")}>
@@ -174,8 +174,7 @@ const BlockList = () => {
             },
             handleCloseDetailView: handleClose
           }}
-          onClickRow={openDetail}
-          onClickTabView={onClickTabView}
+          onClickRow={handleOpenDetail}
           rowKey={(r: Block) => r.blockNo || r.hash}
           selected={selected}
           showTabView

diff --git a/src/pages/Epoch/index.tsx b/src/pages/Epoch/index.tsx
@@ -12,7 +12,6 @@ import { formatDateTimeLocal } from "src/commons/utils/helper";
 import Card from "src/components/commons/Card";
 import FirstEpoch from "src/components/commons/Epoch/FirstEpoch";
 import Table, { Column } from "src/components/commons/Table";
-import { setOnDetailView } from "src/stores/user";
 import { Capitalize } from "src/components/commons/CustomText/styles";
 import usePageInfo from "src/commons/hooks/usePageInfo";
 import DatetimeTypeTooltip from "src/components/commons/DatetimeTypeTooltip";
@@ -24,7 +23,7 @@ import { Blocks, BlueText, EpochNumber, StatusTableRow, StyledContainer, StyledL
 
 const Epoch: React.FC = () => {
   const { t } = useTranslation();
-  const [selected, setSelected] = useState<number | null>(null);
+  const [selected, setSelected] = useState<(number | string | null)[]>([]);
   const history = useHistory();
   const { onDetailView } = useSelector(({ user }: RootState) => user);
   const epochNo = useSelector(({ system }: RootState) => system.currentEpoch?.no);
@@ -104,12 +103,19 @@ const Epoch: React.FC = () => {
   };
 
   const handleExpandedRow = (data: IDataEpoch) => {
-    setSelected(selected === data.no ? null : data.no);
+    setSelected((prev) => {
+      const isSelected = prev.includes(Number(data.no));
+
+      if (isSelected) {
+        return prev.filter((no) => no !== Number(data.no));
+      } else {
+        return [...prev, Number(data.no)];
+      }
+    });
   };
 
   const handleClose = () => {
-    setOnDetailView(false);
-    setSelected(null);
+    setSelected([]);
   };
 
   useEffect(() => {

diff --git a/src/types/table.d.ts b/src/types/table.d.ts
@@ -90,7 +90,7 @@ export interface TableProps<T extends ColumnType = any> {
    * If rowKey is function, key is result of that fuction
    */
   rowKey?: string | ((record: T) => string | number | symbol);
-  selected?: string | number | symbol | null;
+  selected?: (string | number | symbol | null)[];
   selectedProps?: {
     className?: string;
     style?: React.CSSProperties;