92 lines
2.5 KiB
TypeScript
92 lines
2.5 KiB
TypeScript
"use client"
|
|
import { useEffect, useRef } from "react"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { CheckIcon, ChevronDownIcon } from "@/components/Icons"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
|
|
import styles from "./sectionAccordion.module.css"
|
|
|
|
import { SectionAccordionProps } from "@/types/components/hotelReservation/selectRate/sectionAccordion"
|
|
|
|
export default function SectionAccordion({
|
|
header,
|
|
isOpen,
|
|
isCompleted,
|
|
label,
|
|
path,
|
|
children,
|
|
}: React.PropsWithChildren<SectionAccordionProps>) {
|
|
const intl = useIntl()
|
|
|
|
const contentRef = useRef<HTMLDivElement>(null)
|
|
const circleRef = useRef<HTMLDivElement>(null)
|
|
|
|
useEffect(() => {
|
|
const content = contentRef.current
|
|
const circle = circleRef.current
|
|
if (content) {
|
|
if (isOpen) {
|
|
content.style.maxHeight = `${content.scrollHeight}px`
|
|
} else {
|
|
content.style.maxHeight = "0"
|
|
}
|
|
}
|
|
|
|
if (circle) {
|
|
if (isOpen) {
|
|
circle.style.backgroundColor = `var(--UI-Text-Placeholder);`
|
|
} else {
|
|
circle.style.backgroundColor = `var(--Base-Surface-Subtle-Hover);`
|
|
}
|
|
}
|
|
}, [isOpen])
|
|
|
|
return (
|
|
<section className={styles.wrapper} data-open={isOpen}>
|
|
<div className={styles.iconWrapper}>
|
|
<div
|
|
className={styles.circle}
|
|
data-checked={isCompleted}
|
|
ref={circleRef}
|
|
>
|
|
{isCompleted ? (
|
|
<CheckIcon color="white" height="16" width="16" />
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
<div className={styles.main}>
|
|
<header className={styles.headerContainer}>
|
|
<div>
|
|
<Footnote
|
|
asChild
|
|
textTransform="uppercase"
|
|
color="uiTextPlaceholder"
|
|
>
|
|
<h2>{header}</h2>
|
|
</Footnote>
|
|
<Subtitle
|
|
type="two"
|
|
className={styles.selection}
|
|
color="uiTextHighContrast"
|
|
>
|
|
{label}
|
|
</Subtitle>
|
|
</div>
|
|
{isCompleted && !isOpen && (
|
|
<Link href={path} color="burgundy" variant="icon">
|
|
{intl.formatMessage({ id: "Modify" })}{" "}
|
|
<ChevronDownIcon color="burgundy" />
|
|
</Link>
|
|
)}
|
|
</header>
|
|
<div className={styles.content} ref={contentRef}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|