Skip to content

Commit 75a2b82

Browse files
bramboomenbramboomen
authored
Merge pull request #62 from CWTSLeiden/feature/details-accordion
implement accordion for DetailsCard
2 parents 62ddf3f + fcba47b commit 75a2b82

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)