Merge pull request #89 from code4romania/collapse_discreet_table

Add toggle to discreet table

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code4ro/reusable-components",
-  "version": "0.1.45",
+  "version": "0.1.46",
   "description": "Component library for code4ro",
   "keywords": [
     "code4ro",

src/components/ElectionResultsDiscreteTableSection/ElectionResultsDiscreteTableSection.tsx

@@ -1,8 +1,9 @@
-import React from "react";
+import React, { useCallback, useState } from "react";
 import { ResultsTable } from "../ResultsTable/ResultsTable";
 import { ElectionResultsCandidate } from "../../types/Election";
 import { formatGroupedNumber } from "../../util/format";
 import { themable } from "../../hooks/theme";
+import { Button } from "../Button/Button";
 import classes from "./ElectionResultsDiscreteTableSection.module.scss";
 
 type Props = {
@@ -14,6 +15,12 @@ const CandidateTable: React.FC<{
   candidates: ElectionResultsCandidate[] | undefined;
   heading: string;
 }> = ({ candidates, heading }) => {
+  const [collapsed, setCollapsed] = useState<boolean>(true);
+  const canCollapse = candidates && candidates.length >= 12;
+
+  const onToggleCollapsed = useCallback(() => {
+    setCollapsed((x) => !x);
+  }, []);
   return (
     <div className={classes.tableContainer}>
       <ResultsTable className={classes.table}>
@@ -25,14 +32,22 @@ const CandidateTable: React.FC<{
         </thead>
         <tbody>
           {candidates &&
-            candidates.map((candidate, index) => (
-              <tr key={index}>
-                <td className={classes.nameCell}>{candidate.name}</td>
-                <td>{formatGroupedNumber(candidate.votes)}</td>
-              </tr>
-            ))}
+            candidates.map(
+              (candidate, index) =>
+                (!(canCollapse && collapsed) || index < 10) && (
+                  <tr key={index}>
+                    <td className={classes.nameCell}>{candidate.name}</td>
+                    <td>{formatGroupedNumber(candidate.votes)}</td>
+                  </tr>
+                ),
+            )}
         </tbody>
       </ResultsTable>
+      {canCollapse && (
+        <Button className={classes.collapseButton} onClick={onToggleCollapsed}>
+          {collapsed ? "Afișează toate rezultatele" : "Ascunde rezultatele"}
+        </Button>
+      )}
     </div>
   );
 };

src/util/mocks.ts

@@ -148,6 +148,36 @@ export const mockResults: ElectionResults = {
       shortName: "DUM2",
       votes: 1063331,
     },
+    {
+      name: "Dummy 3",
+      shortName: "DUM3",
+      votes: 1063331,
+    },
+    {
+      name: "Dummy 4",
+      shortName: "DUM4",
+      votes: 1063331,
+    },
+    {
+      name: "Dummy 5",
+      shortName: "DUM5",
+      votes: 1063331,
+    },
+    {
+      name: "Dummy 6",
+      shortName: "DUM6",
+      votes: 1063331,
+    },
+    {
+      name: "Dummy 7",
+      shortName: "DUM7",
+      votes: 1063331,
+    },
+    {
+      name: "Dummy 8",
+      shortName: "DUM8",
+      votes: 1063331,
+    },
   ],
 };