fix(community-side-navigation): updated animation and fixed other bugs

telus · Dec 6, 2019 · 4c99177 · 4c99177
1 parent 30b8bed
commit 4c99177
Show file tree

Hide file tree

Showing 5 changed files with 2,107 additions and 1,885 deletions.
diff --git a/packages/SideNavigation/SideNavigation.jsx b/packages/SideNavigation/SideNavigation.jsx
@@ -84,17 +84,24 @@ class SideNavigation extends Component {
   }
 
   componentDidMount() {
-    this.checkOffset()
     window.addEventListener('scroll', this.checkOffset)
-    this.adjustWidth()
     window.addEventListener('resize', this.adjustWidth)
+    this.checkOffset()
+    this.adjustWidth()
     this.checkActiveState()
   }
 
   componentWillUnmount() {
     this.removeEventListeners()
   }
 
+  onExited = () => {
+    const sideNavRect = this._sideNav.current
+    if (this.checkOverflow(sideNavRect) && this.state.variant === 'fixedOverflow') {
+      this.setState({ variant: 'fixed' })
+    }
+  }
+
   adjustWidth() {
     const parentWidth = this._sideNavContainer.offsetWidth
     const sideNav = this._sideNav.current
@@ -127,12 +134,13 @@ class SideNavigation extends Component {
 
     if (
       (sideNavRect.top >= 0 && containerRect.top >= 0) ||
-      sideNavRect.height > containerRect.height
+      sideNavRect.height >= containerRect.height
     ) {
       this.setState({ variant: 'top' })
     } else if (
       this.checkOverflow(this._sideNav.current) &&
       sideNavRect.bottom <= containerRect.bottom &&
+      sideNavRect.bottom >= 0 &&
       this.state.variant !== 'bottom' &&
       sideNavRect.height < containerRect.height
     ) {
@@ -148,9 +156,14 @@ class SideNavigation extends Component {
     ) {
       this.setState({ variant: 'fixed' })
     } else if (
-      (sideNavRect.bottom > containerRect.bottom || sideNavRect.bottom <= 0) &&
-      sideNavRect.height <= containerRect.height &&
-      this.state.variant !== 'top'
+      ((sideNavRect.bottom > containerRect.bottom || sideNavRect.bottom <= 0) &&
+        sideNavRect.height <= containerRect.height &&
+        this.state.variant !== 'top') ||
+      (sideNavRect.top < 0 &&
+        containerRect.top < 0 &&
+        sideNavRect.bottom <= containerRect.bottom &&
+        sideNavRect.bottom < 0 &&
+        this.state.variant !== 'bottom')
     ) {
       this.setState({ variant: 'bottom' })
     }
@@ -163,7 +176,7 @@ class SideNavigation extends Component {
   }
 
   checkOverflow = element => {
-    return element.scrollHeight > window.innerHeight
+    return element.scrollHeight >= window.innerHeight
   }
 
   checkActiveState = () => {
@@ -187,7 +200,13 @@ class SideNavigation extends Component {
         }}
       >
         <NavContainer ref={this._sideNav} variant={variant}>
-          <Box vertical={variant === 'bottom' || variant === 'fixed' ? undefined : verticalSpacing}>
+          <Box
+            vertical={
+              variant === 'bottom' || variant === 'fixed' || variant === 'fixedOverflow'
+                ? undefined
+                : verticalSpacing
+            }
+          >
             {category && (
               <Box vertical={3} horizontal={3}>
                 <Text size="large" bold>
@@ -205,7 +224,8 @@ class SideNavigation extends Component {
                     handleToggleSubMenu: this.toggleSubMenu,
                     isOpen: this.checkAccordion(id),
                     id,
-                    callback: this.checkOffset,
+                    onOpen: this.checkOffset,
+                    onExit: this.onExited,
                   }
                 }
                 return <StyledLi>{React.cloneElement(child, options)}</StyledLi>

diff --git a/packages/SideNavigation/SubMenu/SubMenu.jsx b/packages/SideNavigation/SubMenu/SubMenu.jsx
@@ -6,7 +6,7 @@ import DecorativeIcon from '@tds/core-decorative-icon'
 import Box from '@tds/core-box'
 import Text from '@tds/core-text'
 import { safeRest } from '@tds/util-helpers'
-import { Reveal } from '@tds/shared-animation'
+import { FadeAndReveal } from '@tds/shared-animation'
 import { componentWithName } from '@tds/util-prop-types'
 import { colorTelusPurple, colorWhiteLilac, colorShuttleGrey } from '@tds/core-colours'
 import { fontTelus } from '@tds/shared-typography'
@@ -90,7 +90,7 @@ class SubMenu extends React.Component {
   }
 
   render() {
-    const { children, label, isOpen, callback, ...rest } = this.props
+    const { children, label, isOpen, onOpen, onExit, ...rest } = this.props
 
     const activeChild = this.state.active
     return (
@@ -115,12 +115,13 @@ class SubMenu extends React.Component {
             />
           </SpaceBox>
         </ButtonSubMenu>
-        <Reveal
+        <FadeAndReveal
           timeout={isOpen ? 500 : 0}
           duration={500}
           in={isOpen}
           height={this.state.subMenuHeight}
-          onEntered={callback}
+          onEntered={onOpen}
+          onExited={onExit}
         >
           {() => (
             <SubMenuContainer
@@ -133,7 +134,7 @@ class SubMenu extends React.Component {
               ))}
             </SubMenuContainer>
           )}
-        </Reveal>
+        </FadeAndReveal>
       </React.Fragment>
     )
   }
@@ -176,7 +177,13 @@ SubMenu.propTypes = {
    *
    * @ignore
    */
-  callback: PropTypes.func,
+  onOpen: PropTypes.func,
+  /**
+   * Callback.
+   *
+   * @ignore
+   */
+  onExit: PropTypes.func,
 }
 
 SubMenu.defaultProps = {
@@ -185,7 +192,8 @@ SubMenu.defaultProps = {
   children: undefined,
   id: undefined,
   onClick: undefined,
-  callback: undefined,
+  onOpen: undefined,
+  onExit: undefined,
 }
 
 export default SubMenu