From fcba47b048b3d3aa360196537acfe56dcfb85d7a Mon Sep 17 00:00:00 2001 From: Bram van den Boomen Date: Wed, 26 Apr 2023 10:43:54 +0200 Subject: [PATCH] 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 --- src/components/details.tsx | 51 ++++++++++++------- src/components/details_elsewhere_policy.tsx | 3 +- src/components/details_evaluation_policy.tsx | 3 +- src/components/details_identifiers.tsx | 4 +- src/components/details_names.tsx | 4 +- src/components/details_publication_policy.tsx | 3 +- src/components/details_publishers.tsx | 4 +- src/pages/details.tsx | 4 +- 8 files changed, 47 insertions(+), 29 deletions(-) diff --git a/src/components/details.tsx b/src/components/details.tsx index de1e072..76261a3 100644 --- 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 = [] const hidden_component = [] const missing_component = [] return ( - - - - - - - + + + }> + + {title} + {infodialog} +   + + + + + + + + + + + + )} diff --git a/src/components/details_elsewhere_policy.tsx b/src/components/details_elsewhere_policy.tsx index e63dc77..a0a6154 100644 --- 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={} + defaultExpanded={expanded} > {policies.sort(policy_ordering).map(render_policy)} diff --git a/src/components/details_evaluation_policy.tsx b/src/components/details_evaluation_policy.tsx index 8579c62..763b1f6 100644 --- 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={} + defaultExpanded={expanded} > {policies.map(([p, s]) => ( diff --git a/src/components/details_identifiers.tsx b/src/components/details_identifiers.tsx index 97ba461..1fdef87 100644 --- 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 ( - + {identifiers.map(([p, n, s]) => ( { +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 ( - + {names.map(([n, s]) => ( { 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={} + defaultExpanded={expanded} > {policies.sort(policy_ordering).map(render_policy)} diff --git a/src/components/details_publishers.tsx b/src/components/details_publishers.tsx index 65ac235..3577fd9 100644 --- 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 ( - + {publishers.map(([p, s]) => ( - - + +