implement accordion for DetailsCard

possible solution to (#61) Accordion can be collapsed by default Accordionsummary is a bit clunky because we can have an info button in the summary, to make sure the button is clickable, the summary is not actually clickable, but the title, whitespace and icon are
CWTSLeiden · Apr 26, 2023 · fcba47b · fcba47b
1 parent 62ddf3f
commit fcba47b
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 29 deletions.
diff --git a/src/components/details.tsx b/src/components/details.tsx
@@ -1,9 +1,9 @@
-import React, { ReactElement } from "react";
-import { Avatar, Badge, Card, CardContent, CardHeader, Chip, Divider, Grid, IconButton, Link, ListItem, ListItemAvatar, ListItemText, Skeleton, Stack, Tooltip, Typography, useTheme } from "@mui/material";
+import React, { ReactElement, useState } from "react";
+import { Accordion, AccordionDetails, AccordionSummary, Avatar, Badge, Box, Card, CardContent, CardHeader, Chip, Divider, Grid, IconButton, Link, ListItem, ListItemAvatar, ListItemText, Skeleton, Stack, Tooltip, Typography, useTheme } from "@mui/material";
 import { ld_to_str } from "../query/jsonld_helpers";
 import { labelize } from "../query/labels";
 import { colorize } from "./theme";
-import { Link as LinkIcon } from "@mui/icons-material";
+import { ExpandMore, Link as LinkIcon } from "@mui/icons-material";
 import { useAppSelector } from "../store";
 import { sort_sources_keys } from "./details_sources";
 
@@ -74,28 +74,43 @@ type DetailsCardProps = {
     children?: React.ReactElement | React.ReactElement[];
     loading?: boolean
     infodialog?: React.ReactElement;
+    defaultExpanded?: boolean
 }
-export const DetailsCard = ({title, children, loading, infodialog}: DetailsCardProps) => {
+export const DetailsCard = ({title, children, loading, infodialog, defaultExpanded}: DetailsCardProps) => {
+    const [state, setState] = useState(defaultExpanded == null ? true : defaultExpanded)
+    const toggle = () => setState(!state)
     const sources_disabled = useAppSelector(s => s.details.sources_disabled)
     const loading_component = [<DetailsListItemSkeleton key="0" />]
     const hidden_component = [<DetailsListItem key="0" primary="Hidden" secondary="Expand source filter" disabled />]
     const missing_component = [<DetailsListItem key="0" primary="No data" disabled />]
     return (
         <Card>
-            <CardHeader title={title} action={infodialog} titleTypographyProps={{variant: 'h6'}} />
-            <Divider />
-            <CardContent>
-                <Stack direction="column" spacing={1}>
-                    <DetailsSwitch
-                        items={children}
-                        filter={filter_children_src(sources_disabled)}
-                        loading={loading}
-                        loading_component={loading_component}
-                        missing_component={missing_component}
-                        hidden_component={hidden_component}
-                    />
-                </Stack>
-            </CardContent>
+            <Accordion expanded={state} disableGutters>
+                <CardContent sx={{p: 0}}>
+                    <AccordionSummary expandIcon={<ExpandMore onClick={toggle} />}>
+                        <Box sx={{ width: "100%", display: "flex", alignItems: "center" }}>
+                            <Typography variant="h6" onClick={toggle} >{title}</Typography>
+                            {infodialog}
+                            <Box sx={{ flex: 1 }} onClick={toggle} >&nbsp;</Box>
+                        </Box>
+                    </AccordionSummary>
+                </CardContent>
+                <Divider />
+                <CardContent>
+                    <AccordionDetails sx={{m: 0, p: 0}}>
+                        <Stack direction="column" spacing={1}>
+                            <DetailsSwitch
+                                items={children}
+                                filter={filter_children_src(sources_disabled)}
+                                loading={loading}
+                                loading_component={loading_component}
+                                missing_component={missing_component}
+                                hidden_component={hidden_component}
+                            />
+                        </Stack>
+                    </AccordionDetails>
+                </CardContent>
+            </Accordion>
         </Card>
 )}
 

diff --git a/src/components/details_elsewhere_policy.tsx b/src/components/details_elsewhere_policy.tsx
@@ -28,7 +28,7 @@ const policy_ordering = ([policy1,]: [object], [policy2,]: [object]) => {
     return Math.sign(Object.keys(policy1).length - Object.keys(policy2).length)
 }
 
-export const PlatformElsewherePolicies = () => {
+export const PlatformElsewherePolicies = ({ expanded }: { expanded?: boolean }) => {
     const padStore = useContext(PadContext)
     const [policies, setPolicies] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -49,6 +49,7 @@ export const PlatformElsewherePolicies = () => {
             title="Preprinting/self-archiving policies"
             loading={loading}
             infodialog={<AnnotationDialog property="publication-elsewhere-policies-title" text={info["publication-elsewhere-policies-text"]} />}
+            defaultExpanded={expanded}
         >
             {policies.sort(policy_ordering).map(render_policy)}
         </DetailsCard>

diff --git a/src/components/details_evaluation_policy.tsx b/src/components/details_evaluation_policy.tsx
@@ -10,7 +10,7 @@ import * as summary from "./details_policy_summary"
 import { AnnotationDialog } from "./info";
 import info from "../strings/info.json";
 
-export const PlatformEvaluationPolicies = () => {
+export const PlatformEvaluationPolicies = ({ expanded }: { expanded?: boolean }) => {
     const padStore = useContext(PadContext)
     const [policies, setPolicies] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -29,6 +29,7 @@ export const PlatformEvaluationPolicies = () => {
             title="Evaluation policies"
             loading={loading}
             infodialog={<AnnotationDialog property="evaluation-policies-title" text={info["evaluation-policies-text"]} />}
+            defaultExpanded={expanded}
         >
             {policies.map(([p, s]) => (
                 <PlatformEvaluationPolicy key={p["@id"]} policy={p} src={s} />

diff --git a/src/components/details_identifiers.tsx b/src/components/details_identifiers.tsx
@@ -14,7 +14,7 @@ const links = {
     "fabio:hasIssnL": "https://portal.issn.org/resource/ISSN/"
 }
 
-export const PlatformIdentifiers = () => {
+export const PlatformIdentifiers = ({ expanded }: { expanded?: boolean }) => {
     const labels = useContext(LabelContext)
     const padStore = useContext(PadContext)
     const [identifiers, setIdentifiers] = useState([]);
@@ -37,7 +37,7 @@ export const PlatformIdentifiers = () => {
     }
 
     return (
-        <DetailsCard title="Identifiers" loading={loading}>
+        <DetailsCard title="Identifiers" loading={loading} defaultExpanded={expanded}>
             {identifiers.map(([p, n, s]) => (
                 <SourceWrapper key={p + n} src={s}>
                     <DetailsListItem

diff --git a/src/components/details_names.tsx b/src/components/details_names.tsx
@@ -5,7 +5,7 @@ import { Quadstore } from "quadstore";
 import { first, ld_cons_src, ld_to_str } from "../query/jsonld_helpers";
 import { DetailsCard, DetailsListItem, SourceWrapper } from "./details";
 
-export const PlatformNames = () => {
+export const PlatformNames = ({ expanded }: { expanded?: boolean }) => {
     const padStore = useContext(PadContext)
     const [names, setNames] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -18,7 +18,7 @@ export const PlatformNames = () => {
         padStore ? render() : null
     }, [padStore]);
     return (
-        <DetailsCard title="Names" loading={loading}>
+        <DetailsCard title="Names" loading={loading} defaultExpanded={expanded}>
             {names.map(([n, s]) => (
                 <SourceWrapper key={ld_to_str(n["@id"])} src={s} >
                     <DetailsListItem

diff --git a/src/components/details_publication_policy.tsx b/src/components/details_publication_policy.tsx
@@ -19,7 +19,7 @@ const policy_ordering = ([policy1,]: [object], [policy2,]: [object]) => {
     return Math.sign(Object.keys(policy1).length - Object.keys(policy2).length)
 }
 
-export const PlatformPubPolicies = () => {
+export const PlatformPubPolicies = ({ expanded }: { expanded?: boolean }) => {
     const padStore = useContext(PadContext)
     const [policies, setPolicies] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -40,6 +40,7 @@ export const PlatformPubPolicies = () => {
             title="Publication policies"
             loading={loading}
             infodialog={<AnnotationDialog property="publication-policies-title" text={info["publication-policies-text"]} />}
+            defaultExpanded={expanded}
         >
             {policies.sort(policy_ordering).map(render_policy)}
         </DetailsCard>

diff --git a/src/components/details_publishers.tsx b/src/components/details_publishers.tsx
@@ -7,7 +7,7 @@ import { DetailsCard, DetailsListItem, SourceWrapper } from "./details";
 import { labelize } from "../query/labels";
 import { CorporateFare } from "@mui/icons-material";
 
-export const PlatformPublishers = () => {
+export const PlatformPublishers = ({ expanded }: { expanded?: boolean }) => {
     const labels = useContext(LabelContext)
     const padStore = useContext(PadContext)
     const [publishers, setPublishers] = useState([]);
@@ -23,7 +23,7 @@ export const PlatformPublishers = () => {
     }, [padStore]);
 
     return (
-        <DetailsCard title="Publishers" loading={loading}>
+        <DetailsCard title="Publishers" loading={loading} defaultExpanded={expanded}>
             {publishers.map(([p, s]) => (
                 <SourceWrapper key={p["@id"]} src={s}>
                     <DetailsListItem

diff --git a/src/pages/details.tsx b/src/pages/details.tsx
@@ -63,8 +63,8 @@ function DetailsComponent() {
                     </Grid>
                     <Grid item xs={12} sm={12} md={8} lg={9} component="main" container spacing={2} sx={{pb: 2}}>
                         <Grid item xs={12}><PlatformKeywords /></Grid>
-                        <Grid item xs={12}><PlatformNames /></Grid>
-                        <Grid item xs={12}><PlatformIdentifiers /></Grid>
+                        <Grid item xs={12}><PlatformNames expanded={false} /></Grid>
+                        <Grid item xs={12}><PlatformIdentifiers expanded={false} /></Grid>
                         <Grid item xs={12}><PlatformPublishers /></Grid>
                         <Grid item xs={12}><PlatformPubPolicies /></Grid>
                         <Grid item xs={12}><PlatformElsewherePolicies /></Grid>