-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #991 from mittwald/984-expandable-list-item
feat(List): add option to toggle list details
- Loading branch information
Showing
12 changed files
with
236 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
38 changes: 38 additions & 0 deletions
38
...nents/src/components/List/components/Items/components/Item/components/AccordionButton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import type { FC, PropsWithChildren } from "react"; | ||
| import React from "react"; | ||
| import { Button } from "@/components/Button"; | ||
| import { | ||
| IconChevronDown, | ||
| IconChevronUp, | ||
| } from "@/components/Icon/components/icons"; | ||
| import locales from "../../../../../locales/*.locale.json"; | ||
| import { useLocalizedStringFormatter } from "react-aria"; | ||
|
|
||
| interface Props extends PropsWithChildren { | ||
| isExpanded: boolean; | ||
| toggle: () => void; | ||
| contentElementId: string; | ||
| } | ||
|
|
||
| export const AccordionButton: FC<Props> = (props) => { | ||
| const { isExpanded, toggle, children, contentElementId } = props; | ||
| const stringFormatter = useLocalizedStringFormatter(locales); | ||
|
|
||
| return ( | ||
| <> | ||
| <Button | ||
| variant="plain" | ||
| color="secondary" | ||
| onPress={toggle} | ||
| aria-label={stringFormatter.format( | ||
| "list.toggleExpandButton." + (isExpanded ? "collapse" : "expand"), | ||
| )} | ||
| aria-controls={contentElementId} | ||
| aria-expanded={isExpanded} | ||
| > | ||
| {isExpanded ? <IconChevronUp /> : <IconChevronDown />} | ||
| </Button> | ||
| {isExpanded && children} | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
79 changes: 79 additions & 0 deletions
79
...omponents/src/components/List/components/Items/components/Item/hooks/useGridItemProps.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| import type { PropsWithChildren } from "react"; | ||
| import React, { useEffect, useId, useRef, useState } from "react"; | ||
| import { useList } from "@/components/List"; | ||
| import type { PropsContext } from "@/lib/propsContext"; | ||
| import { dynamic, PropsContextProvider } from "@/lib/propsContext"; | ||
| import { AccordionButton } from "@/components/List/components/Items/components/Item/components/AccordionButton"; | ||
|
|
||
| interface P extends PropsWithChildren { | ||
| data: never; | ||
| } | ||
|
|
||
| export const useGridItemProps = (props: P) => { | ||
| const { data, children: childrenFromProps } = props; | ||
| const list = useList(); | ||
| const itemView = list.itemView; | ||
| const onAction = list.onAction; | ||
|
|
||
| const [isExpanded, setIsExpanded] = useState( | ||
| itemView?.defaultExpanded?.(data) ?? false, | ||
| ); | ||
| const contentElementId = useId(); | ||
| const itemRef = useRef<HTMLDivElement>(null); | ||
|
|
||
| const accordion = list.accordion; | ||
| const children = childrenFromProps ?? itemView?.render(data); | ||
|
|
||
| useEffect(() => { | ||
| if (accordion) { | ||
| itemRef.current?.setAttribute("aria-expanded", String(isExpanded)); | ||
| itemRef.current?.setAttribute("aria-controls", contentElementId); | ||
| } | ||
| }, [isExpanded, contentElementId, itemRef.current, accordion]); | ||
|
|
||
| if (!accordion) { | ||
| return { | ||
| gridItemProps: { | ||
| onAction: () => { | ||
| onAction?.(data); | ||
| }, | ||
| }, | ||
| children, | ||
| }; | ||
| } | ||
|
|
||
| const toggleAccordion = () => { | ||
| setIsExpanded((current) => !current); | ||
| onAction?.(data); | ||
| }; | ||
|
|
||
| const propsContext: PropsContext = { | ||
| Content: { | ||
| id: dynamic((p) => (p.slot === "bottom" ? contentElementId : undefined)), | ||
| wrapWith: dynamic((p) => | ||
| p.slot === "bottom" ? ( | ||
| <AccordionButton | ||
| contentElementId={contentElementId} | ||
| toggle={toggleAccordion} | ||
| isExpanded={isExpanded} | ||
| /> | ||
| ) : undefined, | ||
| ), | ||
| }, | ||
| }; | ||
|
|
||
| return { | ||
| gridItemProps: { | ||
| ref: itemRef, | ||
| onAction: toggleAccordion, | ||
| }, | ||
| children: ( | ||
| <PropsContextProvider | ||
| props={propsContext} | ||
| dependencies={[contentElementId, isExpanded]} | ||
| > | ||
| {children} | ||
| </PropsContextProvider> | ||
| ), | ||
| }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
48 changes: 48 additions & 0 deletions
48
packages/docs/src/content/03-components/structure/list/examples/accordion.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import { | ||
| List, | ||
| ListItem, | ||
| ListItemView, | ||
| ListStaticData, | ||
| } from "@mittwald/flow-react-components/List"; | ||
| import { | ||
| type Domain, | ||
| domains, | ||
| } from "@/content/03-components/structure/list/examples/domainApi"; | ||
| import Avatar from "@mittwald/flow-react-components/Avatar"; | ||
| import Heading from "@mittwald/flow-react-components/Heading"; | ||
| import Text from "@mittwald/flow-react-components/Text"; | ||
| import { | ||
| IconDomain, | ||
| IconSubdomain, | ||
| } from "@mittwald/flow-react-components/Icons"; | ||
| import AlertBadge from "@mittwald/flow-react-components/AlertBadge"; | ||
| import Content from "@mittwald/flow-react-components/Content"; | ||
|
|
||
| <List batchSize={2} accordion> | ||
| <ListStaticData data={domains} /> | ||
| <ListItem<Domain>> | ||
| {(domain) => ( | ||
| <ListItemView> | ||
| <Avatar | ||
| color={domain.type === "Domain" ? "blue" : "teal"} | ||
| > | ||
| {domain.type === "Domain" ? ( | ||
| <IconDomain /> | ||
| ) : ( | ||
| <IconSubdomain /> | ||
| )} | ||
| </Avatar> | ||
| <Heading> | ||
| {domain.hostname} | ||
| {!domain.verified && ( | ||
| <AlertBadge status="warning"> | ||
| Unverifiziert | ||
| </AlertBadge> | ||
| )} | ||
| </Heading> | ||
| <Text>{domain.type}</Text> | ||
| <Content slot="bottom">Mehr Inhalt</Content> | ||
| </ListItemView> | ||
| )} | ||
| </ListItem> | ||
| </List>; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters