feature:通用组件

components/CollapseLeft.js

@@ -0,0 +1,38 @@
+import React, { useEffect, useRef } from 'react'
+
+const Collapse = props => {
+  const collapseRef = useRef(null)
+  const collapseSection = element => {
+    const sectionWidth = element.scrollWidth
+    requestAnimationFrame(function () {
+      element.style.width = sectionWidth + 'px'
+      requestAnimationFrame(function () {
+        element.style.width = 0 + 'px'
+      })
+    })
+  }
+  const expandSection = element => {
+    const sectionWidth = element.scrollWidth
+    element.style.width = sectionWidth + 'px'
+    const clearTime = setTimeout(() => {
+      element.style.width = 'auto'
+    }, 400)
+    clearTimeout(clearTime)
+  }
+  useEffect(() => {
+    const element = collapseRef.current
+    if (props.isOpen) {
+      expandSection(element)
+    } else {
+      collapseSection(element)
+    }
+  }, [props.isOpen])
+  return (
+    <div ref={collapseRef} style={{ width: '0px' }} className={'overflow-hidden duration-200 ' + props.className}>
+      {props.children}
+    </div>
+  )
+}
+Collapse.defaultProps = { isOpen: false }
+
+export default Collapse