Skip to content

Commit fcba47b

Browse files
bramboomenbramboomen
committed
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
1 parent 62ddf3f commit fcba47b

File tree

8 files changed

+47
-29
lines changed

8 files changed

+47
-29
lines changed

‎src/components/details.tsx‎

Lines changed: 33 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React, { ReactElement } from "react";
2-
import { Avatar, Badge, Card, CardContent, CardHeader, Chip, Divider, Grid, IconButton, Link, ListItem, ListItemAvatar, ListItemText, Skeleton, Stack, Tooltip, Typography, useTheme } from "@mui/material";
1+
import React, { ReactElement, useState } from "react";
2+
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";
33
import { ld_to_str } from "../query/jsonld_helpers";
44
import { labelize } from "../query/labels";
55
import { colorize } from "./theme";
6-
import { Link as LinkIcon } from "@mui/icons-material";
6+
import { ExpandMore, Link as LinkIcon } from "@mui/icons-material";
77
import { useAppSelector } from "../store";
88
import { sort_sources_keys } from "./details_sources";
99

@@ -74,28 +74,43 @@ type DetailsCardProps = {
7474
children?: React.ReactElement | React.ReactElement[];
7575
loading?: boolean
7676
infodialog?: React.ReactElement;
77+
defaultExpanded?: boolean
7778
}
78-
export const DetailsCard = ({title, children, loading, infodialog}: DetailsCardProps) => {
79+
export const DetailsCard = ({title, children, loading, infodialog, defaultExpanded}: DetailsCardProps) => {
80+
const [state, setState] = useState(defaultExpanded == null ? true : defaultExpanded)
81+
const toggle = () => setState(!state)
7982
const sources_disabled = useAppSelector(s => s.details.sources_disabled)
8083
const loading_component = [<DetailsListItemSkeleton key="0" />]
8184
const hidden_component = [<DetailsListItem key="0" primary="Hidden" secondary="Expand source filter" disabled />]
8285
const missing_component = [<DetailsListItem key="0" primary="No data" disabled />]
8386
return (
8487
<Card>
85-
<CardHeader title={title} action={infodialog} titleTypographyProps={{variant: 'h6'}} />
86-
<Divider />
87-
<CardContent>
88-
<Stack direction="column" spacing={1}>
89-
<DetailsSwitch
90-
items={children}
91-
filter={filter_children_src(sources_disabled)}
92-
loading={loading}
93-
loading_component={loading_component}
94-
missing_component={missing_component}
95-
hidden_component={hidden_component}
96-
/>
97-
</Stack>
98-
</CardContent>
88+
<Accordion expanded={state} disableGutters>
89+
<CardContent sx={{p: 0}}>
90+
<AccordionSummary expandIcon={<ExpandMore onClick={toggle} />}>
91+
<Box sx={{ width: "100%", display: "flex", alignItems: "center" }}>
92+
<Typography variant="h6" onClick={toggle} >{title}</Typography>
93+
{infodialog}
94+
<Box sx={{ flex: 1 }} onClick={toggle} >&nbsp;</Box>
95+
</Box>
96+
</AccordionSummary>
97+
</CardContent>
98+
<Divider />
99+
<CardContent>
100+
<AccordionDetails sx={{m: 0, p: 0}}>
101+
<Stack direction="column" spacing={1}>
102+
<DetailsSwitch
103+
items={children}
104+
filter={filter_children_src(sources_disabled)}
105+
loading={loading}
106+
loading_component={loading_component}
107+
missing_component={missing_component}
108+
hidden_component={hidden_component}
109+
/>
110+
</Stack>
111+
</AccordionDetails>
112+
</CardContent>
113+
</Accordion>
99114
</Card>
100115
)}
101116

‎src/components/details_elsewhere_policy.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const policy_ordering = ([policy1,]: [object], [policy2,]: [object]) => {
2828
return Math.sign(Object.keys(policy1).length - Object.keys(policy2).length)
2929
}
3030

31-
export const PlatformElsewherePolicies = () => {
31+
export const PlatformElsewherePolicies = ({ expanded }: { expanded?: boolean }) => {
3232
const padStore = useContext(PadContext)
3333
const [policies, setPolicies] = useState([]);
3434
const [loading, setLoading] = useState(true);
@@ -49,6 +49,7 @@ export const PlatformElsewherePolicies = () => {
4949
title="Preprinting/self-archiving policies"
5050
loading={loading}
5151
infodialog={<AnnotationDialog property="publication-elsewhere-policies-title" text={info["publication-elsewhere-policies-text"]} />}
52+
defaultExpanded={expanded}
5253
>
5354
{policies.sort(policy_ordering).map(render_policy)}
5455
</DetailsCard>

‎src/components/details_evaluation_policy.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import * as summary from "./details_policy_summary"
1010
import { AnnotationDialog } from "./info";
1111
import info from "../strings/info.json";
1212

13-
export const PlatformEvaluationPolicies = () => {
13+
export const PlatformEvaluationPolicies = ({ expanded }: { expanded?: boolean }) => {
1414
const padStore = useContext(PadContext)
1515
const [policies, setPolicies] = useState([]);
1616
const [loading, setLoading] = useState(true);
@@ -29,6 +29,7 @@ export const PlatformEvaluationPolicies = () => {
2929
title="Evaluation policies"
3030
loading={loading}
3131
infodialog={<AnnotationDialog property="evaluation-policies-title" text={info["evaluation-policies-text"]} />}
32+
defaultExpanded={expanded}
3233
>
3334
{policies.map(([p, s]) => (
3435
<PlatformEvaluationPolicy key={p["@id"]} policy={p} src={s} />

‎src/components/details_identifiers.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const links = {
1414
"fabio:hasIssnL": "https://portal.issn.org/resource/ISSN/"
1515
}
1616

17-
export const PlatformIdentifiers = () => {
17+
export const PlatformIdentifiers = ({ expanded }: { expanded?: boolean }) => {
1818
const labels = useContext(LabelContext)
1919
const padStore = useContext(PadContext)
2020
const [identifiers, setIdentifiers] = useState([]);
@@ -37,7 +37,7 @@ export const PlatformIdentifiers = () => {
3737
}
3838

3939
return (
40-
<DetailsCard title="Identifiers" loading={loading}>
40+
<DetailsCard title="Identifiers" loading={loading} defaultExpanded={expanded}>
4141
{identifiers.map(([p, n, s]) => (
4242
<SourceWrapper key={p + n} src={s}>
4343
<DetailsListItem

‎src/components/details_names.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Quadstore } from "quadstore";
55
import { first, ld_cons_src, ld_to_str } from "../query/jsonld_helpers";
66
import { DetailsCard, DetailsListItem, SourceWrapper } from "./details";
77

8-
export const PlatformNames = () => {
8+
export const PlatformNames = ({ expanded }: { expanded?: boolean }) => {
99
const padStore = useContext(PadContext)
1010
const [names, setNames] = useState([]);
1111
const [loading, setLoading] = useState(true);
@@ -18,7 +18,7 @@ export const PlatformNames = () => {
1818
padStore ? render() : null
1919
}, [padStore]);
2020
return (
21-
<DetailsCard title="Names" loading={loading}>
21+
<DetailsCard title="Names" loading={loading} defaultExpanded={expanded}>
2222
{names.map(([n, s]) => (
2323
<SourceWrapper key={ld_to_str(n["@id"])} src={s} >
2424
<DetailsListItem

‎src/components/details_publication_policy.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const policy_ordering = ([policy1,]: [object], [policy2,]: [object]) => {
1919
return Math.sign(Object.keys(policy1).length - Object.keys(policy2).length)
2020
}
2121

22-
export const PlatformPubPolicies = () => {
22+
export const PlatformPubPolicies = ({ expanded }: { expanded?: boolean }) => {
2323
const padStore = useContext(PadContext)
2424
const [policies, setPolicies] = useState([]);
2525
const [loading, setLoading] = useState(true);
@@ -40,6 +40,7 @@ export const PlatformPubPolicies = () => {
4040
title="Publication policies"
4141
loading={loading}
4242
infodialog={<AnnotationDialog property="publication-policies-title" text={info["publication-policies-text"]} />}
43+
defaultExpanded={expanded}
4344
>
4445
{policies.sort(policy_ordering).map(render_policy)}
4546
</DetailsCard>

‎src/components/details_publishers.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { DetailsCard, DetailsListItem, SourceWrapper } from "./details";
77
import { labelize } from "../query/labels";
88
import { CorporateFare } from "@mui/icons-material";
99

10-
export const PlatformPublishers = () => {
10+
export const PlatformPublishers = ({ expanded }: { expanded?: boolean }) => {
1111
const labels = useContext(LabelContext)
1212
const padStore = useContext(PadContext)
1313
const [publishers, setPublishers] = useState([]);
@@ -23,7 +23,7 @@ export const PlatformPublishers = () => {
2323
}, [padStore]);
2424

2525
return (
26-
<DetailsCard title="Publishers" loading={loading}>
26+
<DetailsCard title="Publishers" loading={loading} defaultExpanded={expanded}>
2727
{publishers.map(([p, s]) => (
2828
<SourceWrapper key={p["@id"]} src={s}>
2929
<DetailsListItem

‎src/pages/details.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,8 @@ function DetailsComponent() {
6363
</Grid>
6464
<Grid item xs={12} sm={12} md={8} lg={9} component="main" container spacing={2} sx={{pb: 2}}>
6565
<Grid item xs={12}><PlatformKeywords /></Grid>
66-
<Grid item xs={12}><PlatformNames /></Grid>
67-
<Grid item xs={12}><PlatformIdentifiers /></Grid>
66+
<Grid item xs={12}><PlatformNames expanded={false} /></Grid>
67+
<Grid item xs={12}><PlatformIdentifiers expanded={false} /></Grid>
6868
<Grid item xs={12}><PlatformPublishers /></Grid>
6969
<Grid item xs={12}><PlatformPubPolicies /></Grid>
7070
<Grid item xs={12}><PlatformElsewherePolicies /></Grid>

0 commit comments

Comments
 (0)