Merge pull request #1 from x86chi/fix/use-styled-props

fix: Use styled props in Collapse component

src/components/Collapse.tsx

@@ -1,13 +1,28 @@
 import React, { ReactHTML, useLayoutEffect, useRef, useState } from 'react'
+import styled from 'styled-components'
 
 export interface CollapseProps {
   shown: boolean
   children?: React.ReactNode
   as?: keyof ReactHTML
 }
 
+interface RenderComponentProps {
+  height: number | 'auto'
+  opacity: number
+}
+
+const CollapseContainer = styled.div<RenderComponentProps>`
+  height: ${({ height }) => height};
+  transform-origin: top;
+  opacity: ${({ opacity }) => opacity};
+  transition: height 0.3s ease, opacity 0.3s ease;
+  pointer-events: ${({ opacity }) => (opacity ? 'all' : 'none')};
+  overflow: 'hidden';
+`
+
 export const Collapse: React.FC<CollapseProps> = (props) => {
-  const { as = 'div', shown, children } = props
+  const { as, shown, children } = props
 
   const contentsRef = useRef<HTMLDivElement>(null)
   const [contentHeight, setContentHeight] = useState<number>(0)
@@ -38,19 +53,13 @@ export const Collapse: React.FC<CollapseProps> = (props) => {
     }
   }, [shown, contentHeight])
 
-  const RenderComponent = as
   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',
-      }}
+    <CollapseContainer
+      as={as}
+      height={renderHeight}
+      opacity={prevShown || shown ? 1 : 0}
     >
       {mountChild ? <div ref={contentsRef}>{children}</div> : null}
-    </RenderComponent>
+    </CollapseContainer>
   )
 }