mirror of
https://github.com/vercel/commerce.git
synced 2025-07-30 21:51:21 +00:00
.vscode
ISSUE_TEMPLATE
packages
site
assets
components
auth
cart
checkout
common
icons
product
ui
Button
Collapse
Collapse.module.css
Collapse.tsx
index.ts
Container
Dropdown
Grid
Hero
Input
Link
LoadingDots
Logo
Marquee
Modal
Quantity
Rating
Sidebar
Skeleton
Text
README.md
context.tsx
index.ts
wishlist
search.tsx
config
lib
pages
public
.env.template
.eslintrc
.gitignore
.prettierignore
.prettierrc
commerce-config.js
commerce.config.json
global.d.ts
next-env.d.ts
next.config.js
package.json
postcss.config.js
tailwind.config.js
tsconfig.json
.editorconfig
.gitignore
.prettierignore
.prettierrc
README.md
license.md
package.json
turbo.json
yarn.lock
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import cn from 'clsx'
|
|
import React, { FC, ReactNode, useState } from 'react'
|
|
import s from './Collapse.module.css'
|
|
import { ChevronRight } from '@components/icons'
|
|
import { useSpring, a } from '@react-spring/web'
|
|
import useMeasure from 'react-use-measure'
|
|
|
|
export interface CollapseProps {
|
|
title: string
|
|
children: ReactNode
|
|
}
|
|
|
|
const Collapse: FC<CollapseProps> = ({ title, children }) => {
|
|
const [isActive, setActive] = useState(false)
|
|
const [ref, { height: viewHeight }] = useMeasure()
|
|
|
|
const animProps = useSpring({
|
|
height: isActive ? viewHeight : 0,
|
|
config: { tension: 250, friction: 32, clamp: true, duration: 150 },
|
|
opacity: isActive ? 1 : 0,
|
|
})
|
|
|
|
const toggle = () => setActive((x) => !x)
|
|
|
|
return (
|
|
<div
|
|
className={s.root}
|
|
role="button"
|
|
tabIndex={0}
|
|
aria-expanded={isActive}
|
|
onClick={toggle}
|
|
>
|
|
<div className={s.header}>
|
|
<ChevronRight className={cn(s.icon, { [s.open]: isActive })} />
|
|
<span className={s.label}>{title}</span>
|
|
</div>
|
|
<a.div style={{ overflow: 'hidden', ...animProps }}>
|
|
<div ref={ref} className={s.content}>
|
|
{children}
|
|
</div>
|
|
</a.div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default React.memo(Collapse)
|