removed deprecated defaultProps

plgd-dev · Apr 30, 2024 · bd23aed · bd23aed
1 parent f1f9aaa
commit bd23aed
Show file tree

Hide file tree

Showing 5 changed files with 189 additions and 1,017 deletions.
diff --git a/src/components/Atomic/ContentMenu/ContentMenu.styles.ts b/src/components/Atomic/ContentMenu/ContentMenu.styles.ts
@@ -48,25 +48,6 @@ export const menuList = css`
     list-style: none;
     padding: 0;
     margin: 0;
-
-    .item-enter {
-    }
-
-    .item-enter-done {
-        max-height: 200px;
-    }
-
-    .item-enter-active {
-        max-height: 200px;
-    }
-
-    .item-exit {
-        max-height: 0;
-    }
-
-    .item-exit-active {
-        max-height: 0;
-    }
 `
 
 export const itemTitleIcon = css`
@@ -139,9 +120,7 @@ export const activeArrow = css`
 `
 
 export const subItems = css`
-    // max-height: 0;
     overflow: hidden;
-    //transition: all 0.45s;
 `
 
 export const subItemsList = css`

diff --git a/src/components/Atomic/ContentMenu/__snapshots__/ContentMenu.test.tsx.snap b/src/components/Atomic/ContentMenu/__snapshots__/ContentMenu.test.tsx.snap
@@ -15,22 +15,6 @@ exports[`<ContentMenu> renders without crashing 1`] = `
   margin: 0;
 }
 
-.emotion-1 .item-enter-done {
-  max-height: 200px;
-}
-
-.emotion-1 .item-enter-active {
-  max-height: 200px;
-}
-
-.emotion-1 .item-exit {
-  max-height: 0;
-}
-
-.emotion-1 .item-exit-active {
-  max-height: 0;
-}
-
 .emotion-2 {
   display: -webkit-box;
   display: -webkit-flex;

diff --git a/src/components/Layout/LeftPanel/LeftPanel.styles.ts b/src/components/Layout/LeftPanel/LeftPanel.styles.ts
@@ -82,25 +82,6 @@ export const menu = css`
             margin-top: 12px;
         }
     }
-
-    .item-enter {
-    }
-
-    .item-enter-done {
-        max-height: 200px;
-    }
-
-    .item-enter-active {
-        max-height: 200px;
-    }
-
-    .item-exit {
-        max-height: 0;
-    }
-
-    .item-exit-active {
-        max-height: 0;
-    }
 `
 
 export const menuCollapsed = css`
@@ -153,6 +134,7 @@ export const item = (theme: ThemeType) => css`
     transition: all 0.25s;
     position: relative;
     overflow: hidden;
+    cursor: pointer;
 
     &:hover {
         color: ${get(theme, `LeftPanel.item.hover.color`)};
@@ -229,9 +211,9 @@ export const arrowCollapsed = css`
 `
 
 export const subItems = css`
-    max-height: 0;
+    //max-height: 0;
     overflow: hidden;
-    transition: all 0.45s;
+    //transition: all 0.45s;
 `
 
 export const subItemsList = css`

diff --git a/src/components/Layout/LeftPanel/LeftPanel.tsx b/src/components/Layout/LeftPanel/LeftPanel.tsx
@@ -1,6 +1,5 @@
 import React, { cloneElement, FC, ReactElement, SyntheticEvent, useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
-import { CSSTransition } from 'react-transition-group'
 import { useFloating, shift, offset } from '@floating-ui/react-dom'
 import { motion, AnimatePresence } from 'framer-motion'
 import isFunction from 'lodash/isFunction'
@@ -39,7 +38,7 @@ const LeftPanelItem = (props: LeftPanelItemType) => {
                 rel={isExternal ? 'noreferrer' : undefined}
                 target={isExternal ? '_blank' : undefined}
             >
-                <div css={[styles.itemTitle, isActive && styles.itemTitleActive]} data-icon={item.icon}>
+                <span css={[styles.itemTitle, isActive && styles.itemTitleActive]} data-icon={item.icon}>
                     {typeof item.icon === 'string' ? <Icon icon={item.icon} /> : cloneElement(item.icon as ReactElement, { css: styles.itemTitleIcon })}
                     <span aria-label={item.title} css={styles.itemTitleText}>
                         {item.title}
@@ -49,8 +48,9 @@ const LeftPanelItem = (props: LeftPanelItemType) => {
                             <Arrow height={6} width={10} />
                         </span>
                     )}
-                </div>
+                </span>
             </a>
+
             {item.children && (
                 <LeftPanelSubItems
                     active={active}
@@ -113,25 +113,49 @@ const LeftPanelSubItems = (props: LeftPanelSubItemsType) => {
         }
     } else {
         return (
-            <CSSTransition appear={true} classNames='item' in={isActive} key={item.id} timeout={0}>
-                <div css={styles.subItems}>
-                    <ul css={[styles.subItemsList]}>
-                        {item.children?.map((subItem, key) => (
-                            <li key={key}>
-                                <a
-                                    css={[styles.subItemLink, subItem.id === active && styles.subItemLinkActive, subItem.disabled && styles.disabled]}
-                                    href={`${item.link}${subItem.link}`}
-                                    onClick={subItem.disabled ? undefined : (e) => handleItemClick({ ...subItem, link: `${item.link}${subItem.link}` }, e)}
-                                >
-                                    <img alt='line' css={styles.line} src={img} />
-                                    {subItem.title}
-                                    {subItem.tag && <span css={styles.tag(subItem.tag.variant)}>{subItem.tag.text}</span>}
-                                </a>
-                            </li>
-                        ))}
-                    </ul>
-                </div>
-            </CSSTransition>
+            <AnimatePresence initial={false}>
+                {isActive ? (
+                    <motion.div
+                        animate='open'
+                        css={styles.subItems}
+                        exit='collapsed'
+                        initial='collapsed'
+                        key='content'
+                        transition={{ duration: 0.3 }}
+                        variants={{
+                            open: { opacity: 1, height: 'auto' },
+                            collapsed: { opacity: 0, height: 0 },
+                        }}
+                    >
+                        <ul css={[styles.subItemsList]}>
+                            {item.children?.map((subItem, key) => (
+                                <li key={key}>
+                                    <a
+                                        css={[styles.subItemLink, subItem.id === active && styles.subItemLinkActive, subItem.disabled && styles.disabled]}
+                                        href={`${item.link}${subItem.link}`}
+                                        onClick={
+                                            subItem.disabled
+                                                ? undefined
+                                                : (e) =>
+                                                      handleItemClick(
+                                                          {
+                                                              ...subItem,
+                                                              link: `${item.link}${subItem.link}`,
+                                                          },
+                                                          e
+                                                      )
+                                        }
+                                    >
+                                        <img alt='line' css={styles.line} src={img} />
+                                        {subItem.title}
+                                        {subItem.tag && <span css={styles.tag(subItem.tag.variant)}>{subItem.tag.text}</span>}
+                                    </a>
+                                </li>
+                            ))}
+                        </ul>
+                    </motion.div>
+                ) : null}
+            </AnimatePresence>
         )
     }
 }