feat: add Collapse

Author: shiftpsh

example/src/stories/Collapse.stories.tsx

@@ -0,0 +1,41 @@
+import { Collapse } from '@solved-ac/ui-react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import React from 'react'
+
+export default {
+  title: 'Collapse',
+  component: Collapse,
+  argTypes: {
+    shown: {
+      control: 'boolean',
+      description: 'Whether the children should be shown',
+    },
+  },
+} as ComponentMeta<typeof Collapse>
+
+const Template: ComponentStory<typeof Collapse> = (args) => (
+  <Collapse {...args} />
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  children: (
+    <>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
+      vulputate arcu, nec semper est. Vestibulum ante ipsum primis in faucibus
+      orci luctus et ultrices posuere cubilia curae; Suspendisse vel purus et
+      metus laoreet efficitur in ut elit. Duis ultrices enim dapibus purus
+      imperdiet molestie. Nam pretium odio metus, tempus vehicula neque sodales
+      quis. Suspendisse vehicula, libero ac viverra consectetur, ante lectus
+      malesuada ex, ut porta nunc justo quis neque. Aenean tristique nulla quis
+      eros faucibus, sit amet lacinia nibh interdum. Quisque aliquet leo ut erat
+      ultrices posuere. Duis mauris nulla, posuere sed dapibus eget, ultricies
+      id dui. Phasellus vel augue a urna fermentum vehicula. Quisque sed elit
+      non nibh ullamcorper lacinia. Orci varius natoque penatibus et magnis dis
+      parturient montes, nascetur ridiculus mus. Duis nibh ligula, scelerisque
+      porta rutrum ac, tempus vitae ipsum. Morbi ut ante a felis fringilla
+      aliquam bibendum nec felis. Donec vel nunc congue, rhoncus mauris quis,
+      malesuada nisi.
+    </>
+  ),
+}

example/yarn-error.log

@@ -0,0 +1,60 @@
+import React, { ReactHTML, useLayoutEffect, useRef, useState } from 'react'
+
+export interface CollapseProps {
+  shown: boolean
+  as?: keyof ReactHTML
+}
+
+export const Collapse: React.FC<CollapseProps> = (props) => {
+  const { as, shown, children } = props
+
+  const contentsRef = useRef<HTMLDivElement>(null)
+  const [contentHeight, setContentHeight] = useState<number>(0)
+  const [renderHeight, setRenderHeight] = useState<number | 'auto'>(0)
+  const [mountChild, setMountChild] = useState<boolean>(shown)
+  const [prevShown, setPrevShown] = useState<boolean>(shown)
+
+  useLayoutEffect(() => {
+    if (contentsRef.current === null || !mountChild) return
+    setContentHeight(contentsRef.current?.clientHeight ?? 0)
+  }, [children, mountChild])
+
+  useLayoutEffect(() => {
+    if (shown) setMountChild(true)
+
+    setRenderHeight(shown ? 0 : contentHeight)
+    const renderHeightDelay = setTimeout(() => {
+      setRenderHeight(shown ? contentHeight : 0)
+    }, 30)
+    const animationDelay = setTimeout(() => {
+      setPrevShown(shown)
+      setRenderHeight(shown ? 'auto' : 0)
+      if (!shown) setMountChild(false)
+    }, 400)
+    return () => {
+      clearTimeout(renderHeightDelay)
+      clearTimeout(animationDelay)
+    }
+  }, [shown, contentHeight])
+
+  const RenderComponent = as ?? 'div'
+
+  return (
+    <RenderComponent
+      style={{
+        height: renderHeight,
+        transformOrigin: 'top',
+        opacity: prevShown || shown ? 1 : 0,
+        transition: `height .3s ease, opacity .3s ease`,
+        pointerEvents: prevShown || shown ? 'all' : 'none',
+        overflow: 'hidden',
+      }}
+    >
+      {mountChild ? <div ref={contentsRef}>{children}</div> : null}
+    </RenderComponent>
+  )
+}
+
+Collapse.defaultProps = {
+  as: 'div',
+}

src/components/Collapse.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-interface SpaceProps {
+export interface SpaceProps {
   h?: number | string
   w?: number | string
 }

src/components/Space.tsx

@@ -1,3 +1,4 @@
 export * from './Button'
+export * from './Collapse'
 export * from './Space'