commerce/site/components/ui/Collapse/Collapse.tsx

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)