chore: add react animate height for transition

web3ui · Nov 29, 2022 · a7f69ce · a7f69ce
1 parent c9bfb9d
commit a7f69ce
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 79 deletions.
diff --git a/package.json b/package.json
@@ -96,6 +96,7 @@
         "node-polyfill-webpack-plugin": "^1.1.4",
         "plop": "^3.1.1",
         "react": "^18.0.0",
+        "react-animate-height": "^3.0.5",
         "react-dom": "^18.0.0",
         "react-lazily": "^0.9.1",
         "rollup-plugin-dts": "^4.2.1",

diff --git a/packages/core/src/lib/Accordion/Accordion.stories.tsx b/packages/core/src/lib/Accordion/Accordion.stories.tsx
@@ -116,5 +116,4 @@ CustomAccordion.args = {
         close: <ChevronDown width={22} height={22} />,
     },
     iconLayout: 'trailing',
-    contentMaxHeight: 'max-content',
 };
diff --git a/packages/core/src/lib/Accordion/Accordion.styles.ts b/packages/core/src/lib/Accordion/Accordion.styles.ts
@@ -26,10 +26,7 @@ const SectionStyled = styled.section<TStyleProps>`
     background-color: ${color.white};
     border: 1px solid ${(p) => getThemeColor(p.theme)};
     border-radius: 20px;
-    opacity: 0%;
     overflow: hidden;
-    transition-delay: 0.3s;
-    transition: opacity 0.3s ease-out;
 `;
 
 const HeaderStyled = styled.header`
@@ -81,7 +78,6 @@ const DivStyled = styled.div`
 
 const DivStyledContent = styled.div`
     overflow: hidden;
-    transition: max-height 0.3s ease-out;
 `;
 
 export default {

diff --git a/packages/core/src/lib/Accordion/Accordion.tsx b/packages/core/src/lib/Accordion/Accordion.tsx
@@ -1,8 +1,9 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState } from 'react';
 import { Tag } from '../Tag';
 import { Plus, Minus, LockOpen, LockClosed } from '@web3uikit/icons';
 import { AccordionProps } from './types';
 import styles from './Accordion.styles';
+import AnimateHeight, { Height } from 'react-animate-height';
 
 const {
     SectionStyled,
@@ -40,36 +41,23 @@ const Accordion: React.FC<AccordionProps> = ({
         ),
     },
     iconLayout = 'leading',
-    contentMaxHeight = null,
     ...props
 }) => {
     const [isOpen, setIsOpen] = useState(isExpanded);
-    const [height, setHeight] = useState('');
-    const [opacity, setOpacity] = useState('0%');
-    const [heightWhenOpen, setHeightWhenOpen] = useState('');
+    const [height, setHeight] = useState(isExpanded ? 'auto' : 0);
     const formattedID = id.replace(/\s/g, '-');
-    const divElement = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-        setHeightWhenOpen(`${divElement.current?.clientHeight}px`);
-        setHeight(isOpen ? heightWhenOpen : '0px');
-        setOpacity('100%');
-    }, []);
 
     const toggleOpen = () => {
-        let currHeight = heightWhenOpen;
-        if (contentMaxHeight) currHeight = contentMaxHeight;
-        if (isOpen) currHeight = '0px';
-        setHeight(currHeight);
-        setIsOpen(!isOpen);
+        setHeight(isOpen ? 0 : 'auto');
+        setIsOpen((prev) => !prev);
     };
 
     return (
         <SectionStyled
             aria-label="Accordion item"
             data-testid="test-accordion"
             id={id}
-            style={{ opacity: opacity, ...style }}
+            style={{ ...style }}
             theme={theme}
             {...props}
         >
@@ -125,18 +113,19 @@ const Accordion: React.FC<AccordionProps> = ({
                         (isOpen ? icon.open : icon.close)}
                 </DivStyled>
             </HeaderStyled>
-
-            <DivStyledContent
-                aria-hidden={isOpen}
-                data-testid="test-accordion-content"
-                id={`content-${formattedID}`}
-                ref={divElement}
-                style={{
-                    maxHeight: height,
-                }}
+            <AnimateHeight
+                height={height as Height}
+                duration={300}
+                animateOpacity={true}
             >
-                {children}
-            </DivStyledContent>
+                <DivStyledContent
+                    aria-hidden={isOpen}
+                    data-testid="test-accordion-content"
+                    id={`content-${formattedID}`}
+                >
+                    {children}
+                </DivStyledContent>
+            </AnimateHeight>
         </SectionStyled>
     );
 };

diff --git a/packages/core/src/lib/Accordion/types.ts b/packages/core/src/lib/Accordion/types.ts
@@ -61,9 +61,4 @@ export interface AccordionProps {
      * position of the icon
      */
     iconLayout?: 'leading' | 'trailing' | 'none';
-
-    /**
-     * Height of the content, set it to max-content for auto growing content
-     */
-    contentMaxHeight?: string;
 }