diff --git a/package.json b/package.json index 3db5736..c9c05ea 100644 --- a/package.json +++ b/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", diff --git a/src/components/ElectionResultsDiscreteTableSection/ElectionResultsDiscreteTableSection.tsx b/src/components/ElectionResultsDiscreteTableSection/ElectionResultsDiscreteTableSection.tsx index 89667ae..48827f2 100644 --- a/src/components/ElectionResultsDiscreteTableSection/ElectionResultsDiscreteTableSection.tsx +++ b/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(true); + const canCollapse = candidates && candidates.length >= 12; + + const onToggleCollapsed = useCallback(() => { + setCollapsed((x) => !x); + }, []); return (
@@ -25,14 +32,22 @@ const CandidateTable: React.FC<{ {candidates && - candidates.map((candidate, index) => ( - - {candidate.name} - {formatGroupedNumber(candidate.votes)} - - ))} + candidates.map( + (candidate, index) => + (!(canCollapse && collapsed) || index < 10) && ( + + {candidate.name} + {formatGroupedNumber(candidate.votes)} + + ), + )} + {canCollapse && ( + + )}
); }; diff --git a/src/util/mocks.ts b/src/util/mocks.ts index 561e6ca..2589f7a 100644 --- a/src/util/mocks.ts +++ b/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, + }, ], };