v5.0.52

Author: novykh

src/components/collapsible/index.js

@@ -1,4 +1,4 @@
-import React, { memo, useMemo, useState } from "react"
+import React, { memo, useMemo, useState, useEffect } from "react"
 import styled from "styled-components"
 import useUpdateEffect from "@/hooks/useUpdateEffect"
 import useForwardRef from "@/hooks/useForwardRef"
@@ -26,15 +26,33 @@ const Collapsible = ({
   closedValue = 0,
   overflow = "visible",
   ref: parentRef,
+  initial,
   ...rest
 }) => {
   const measurement = measurementByDimension[direction] || measurementByDimension.vertical
   duration = process.env.NODE_ENV === "test" ? 0 : duration
 
-  const [dimension, setDimension] = useState(open ? "initial" : `${closedValue}px`)
+  const [dimension, setDimension] = useState(open ? initial : `${closedValue}px`)
   const [animatedOpen, setAnimatedOpen] = useState(open)
   const [ref, setRef] = useForwardRef(parentRef)
 
+  useEffect(() => {
+    if (open && ref.current) {
+      const size =
+        measurement === measurementByDimension.vertical
+          ? ref.current.scrollHeight
+          : ref.current.scrollWidth
+
+      setDimension(`${size}px`)
+
+      const id = setTimeout(() => {
+        setDimension("initial") // let it grow naturally after animation
+      }, duration)
+
+      return () => clearTimeout(id)
+    }
+  }, [])
+
   useUpdateEffect(() => {
     if (!ref.current) return
 
@@ -43,7 +61,7 @@ const Collapsible = ({
         ? `${
             measurement === measurementByDimension.vertical
               ? ref.current.scrollHeight
-              : ref.current.scrollHeight
+              : ref.current.scrollWidth
           }px`
         : `${closedValue}px`
     )
@@ -56,7 +74,7 @@ const Collapsible = ({
           ? `${
               measurement === measurementByDimension.vertical
                 ? ref.current.scrollHeight
-                : ref.current.scrollHeight
+                : ref.current.scrollWidth
             }px`
           : `${closedValue}px`
       )