Single expansion logic

does not work correclty yet
jgiven · Mar 1, 2024 · 14c939a · 14c939a
1 parent a9f721b
commit 14c939a
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 57 deletions.
diff --git a/new/src/components/Scenarios/Scenario.tsx b/new/src/components/Scenarios/Scenario.tsx
@@ -1,23 +1,39 @@
-import type { ScenarioCaseModel, ScenarioModel, StepModel } from "../../reportModel";
-import { Accordion, AccordionDetails, Box, Grid, Link, Typography } from "@mui/material";
-import { styled } from "@mui/material/styles";
+import type {ScenarioCaseModel, ScenarioModel, StepModel} from "../../reportModel";
+import {Accordion, AccordionDetails, Box, Grid, Link, Typography} from "@mui/material";
+import {styled} from "@mui/material/styles";
 import ArrowForwardIosSharpIcon from "@mui/icons-material/ArrowForwardIosSharp";
-import MuiAccordionSummary, { AccordionSummaryProps } from "@mui/material/AccordionSummary";
-import { PropsWithChildren } from "react";
-import { addRuntime } from "../utils";
-import { StatusIcon } from "../StatusIconSelector";
-import { processWords } from "../../wordProcessor";
+import MuiAccordionSummary, {AccordionSummaryProps} from "@mui/material/AccordionSummary";
+import {PropsWithChildren, useCallback, useEffect, useState} from "react";
+import {addRuntime} from "../utils";
+import {StatusIcon} from "../StatusIconSelector";
+import {processWords} from "../../wordProcessor";
+import {ExpansionState} from "./ScenarioOverview";
 
 export interface ScenarioProps {
     scenario: ScenarioModel;
+    globalExpansionState: ExpansionState;
+    onExpansionCallback: () => void;
+    onCollapsionCallback: () => void;
     reportName?: string;
-    accordionExpansion: {
-        expanded: boolean;
-        setExpanded: (expanded: boolean) => void;
-    };
 }
 
 export function Scenario(props: ScenarioProps) {
+    const [expanded, setExpanded] = useState(false);
+
+    useEffect(() => {
+        if (props.globalExpansionState === ExpansionState.COLLAPSED) {
+            setExpanded(false);
+        }
+        if (props.globalExpansionState === ExpansionState.EXPANDED) {
+            setExpanded(true);
+        }
+    }, [props.globalExpansionState])
+
+    const onExpansionChanged = useCallback((isExpansion: boolean) => {
+        setExpanded(isExpansion);
+        isExpansion ? props.onExpansionCallback : props.onCollapsionCallback;
+    }, [expanded])
+
     return props.scenario.scenarioCases.length === 1 ? (
         <div
             id={`${props.scenario.className}#${props.scenario.testMethodName}`}
@@ -27,8 +43,8 @@ export function Scenario(props: ScenarioProps) {
                 scenarioCase={props.scenario.scenarioCases[0]}
                 reportName={props.reportName}
                 summary={props.scenario.description}
-                expanded={props.accordionExpansion.expanded}
-                setExpanded={props.accordionExpansion.setExpanded}
+                expanded={expanded}
+                setExpanded={onExpansionChanged}
                 className={props.scenario.className}
             />
         </div>

diff --git a/new/src/components/Scenarios/ScenarioClass.tsx b/new/src/components/Scenarios/ScenarioClass.tsx
diff --git a/new/src/components/Scenarios/ScenarioOverview.tsx b/new/src/components/Scenarios/ScenarioOverview.tsx
@@ -4,13 +4,19 @@ import {Scenario} from "./Scenario";
 import {useState} from "react";
 import {Grid} from "@mui/material";
 
+
+export enum ExpansionState {
+    COLLAPSED,
+    INTERMEDIATE,
+    EXPANDED
+}
 export function ScenarioOverview(props: {
     reportName: string,
     title: string,
     description: string,
     scenarios: ScenarioModel[]
 }) {
-    const [expanded, setExpanded] = useState(false);
+    const [allExpanded, setAllExpanded] = useState<ExpansionState>(ExpansionState.COLLAPSED);
     return (
         <>
             <Grid container>
@@ -34,11 +40,11 @@ export function ScenarioOverview(props: {
                                     targets={{
                                         minusButtonTarget: () => {
                                             console.log("Collapsing stuff");
-                                            setExpanded(false);
+                                            setAllExpanded(ExpansionState.COLLAPSED);
                                         },
                                         plusButtonTarget: () => {
                                             console.log("Expanding stuff");
-                                            setExpanded(true);
+                                            setAllExpanded(ExpansionState.EXPANDED);
                                         },
                                         printButtonTarget: () => {
                                             console.error("print not implemented");
@@ -59,10 +65,9 @@ export function ScenarioOverview(props: {
                                     <Scenario
                                         reportName={props.reportName}
                                         scenario={scenario}
-                                        accordionExpansion={{
-                                            expanded: expanded,
-                                            setExpanded: setExpanded
-                                        }}
+                                        globalExpansionState={allExpanded}
+                                        onCollapsionCallback={() => {setAllExpanded(ExpansionState.INTERMEDIATE)}}
+                                        onExpansionCallback={() => {setAllExpanded(ExpansionState.INTERMEDIATE)}}
                                     ></Scenario>
                                 );
                             })}