封装折叠面板组件

components/Collapse.js

@@ -1,25 +1,60 @@
-import React, { useEffect, useRef } from 'react'
+import React from 'react'
 
+/**
+ * 折叠面板组件，支持水平折叠、垂直折叠
+ * @param {type:['horizontal','vertical'],isOpen} props
+ * @returns
+ */
 const Collapse = props => {
-  const collapseRef = useRef(null)
+  const collapseRef = React.useRef(null)
+  const type = props.type || 'vertical'
   const collapseSection = element => {
     const sectionHeight = element.scrollHeight
+    const sectionWidth = element.scrollWidth
+
     requestAnimationFrame(function () {
-      element.style.height = sectionHeight + 'px'
-      requestAnimationFrame(function () {
-        element.style.height = 0 + 'px'
-      })
+      switch (type) {
+        case 'horizontal':
+          element.style.width = sectionWidth + 'px'
+          requestAnimationFrame(function () {
+            element.style.width = 0 + 'px'
+          })
+          break
+        case 'vertical':
+          element.style.height = sectionHeight + 'px'
+          requestAnimationFrame(function () {
+            element.style.height = 0 + 'px'
+          })
+      }
     })
   }
+
+  /**
+   * 展开
+   * @param {*} element
+   */
   const expandSection = element => {
     const sectionHeight = element.scrollHeight
-    element.style.height = sectionHeight + 'px'
-    const clearTime = setTimeout(() => {
-      element.style.height = 'auto'
-    }, 400)
+    const sectionWidth = element.scrollWidth
+    let clearTime = 0
+    switch (type) {
+      case 'horizontal':
+        element.style.width = sectionWidth + 'px'
+        clearTime = setTimeout(() => {
+          element.style.width = 'auto'
+        }, 400)
+        break
+      case 'vertical':
+        element.style.height = sectionHeight + 'px'
+        clearTime = setTimeout(() => {
+          element.style.height = 'auto'
+        }, 400)
+    }
+
     clearTimeout(clearTime)
   }
-  useEffect(() => {
+
+  React.useEffect(() => {
     const element = collapseRef.current
     if (props.isOpen) {
       expandSection(element)
@@ -27,8 +62,9 @@ const Collapse = props => {
       collapseSection(element)
     }
   }, [props.isOpen])
+
   return (
-    <div ref={collapseRef} style={{ height: '0px' }} className={'overflow-hidden duration-200 ' + props.className }>
+    <div ref={collapseRef} style={type === 'vertical' ? { height: '0px' } : { width: '0px' }} className={'overflow-hidden duration-200 ' + props.className }>
       {props.children}
     </div>
   )

components/CollapseLeft.js

@@ -1,38 +0,0 @@
-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

themes/fukasawa/components/TopNav.js

@@ -20,7 +20,7 @@ const TopNav = props => {
 
     {/* 导航栏 */}
     <div id='sticky-nav' className={'lg:relative w-full top-0 z-20 transform duration-500 bg-white dark:bg-black'}>
-      <Collapse isOpen={isOpen}>
+      <Collapse type='vertical' isOpen={isOpen}>
         <div className='py-1 px-5'>
           <GroupMenu {...props} />
           <SearchInput {...props} />
@@ -36,8 +36,8 @@ const TopNav = props => {
 
         {/* 右侧功能 */}
         <div className='mr-1 flex justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
-          <div onClick={toggleMenuOpen} className='w-18 cursor-pointer'>
-            菜单 {isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
+          <div onClick={toggleMenuOpen} className='cursor-pointer'>
+            {isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
           </div>
         </div>
       </div>

themes/hexo/components/TopNav.js

@@ -102,7 +102,7 @@ const TopNav = props => {
         </div>
       </div>
 
-      <Collapse isOpen={isOpen} className='shadow-xl'>
+      <Collapse type='vertical' isOpen={isOpen} className='shadow-xl'>
         <div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 px-5 lg:hidden '>
           <MenuList {...props}/>
         </div>

themes/medium/components/TopNavBar.js

@@ -19,7 +19,7 @@ export default function TopNavBar(props) {
   }
 
   return <div id='top-nav' className={'sticky top-0 lg:relative w-full z-40 ' + className}>
-        <Collapse isOpen={isOpen} className='flex md:hidden'>
+        <Collapse type='vertical' isOpen={isOpen} className='flex md:hidden'>
             <div className='py-1 px-5'>
                 <GroupMenu {...props} />
             </div>

themes/next/components/TopNav.js

@@ -109,7 +109,7 @@ const TopNav = (props) => {
         </div>
       </div>
 
-      <Collapse isOpen={isOpen}>
+      <Collapse type='vertical' isOpen={isOpen}>
         <div className='bg-white py-1 px-5'>
           <MenuButtonGroup {...props} from='top'/>
           </div>