Merge pull request #87 from quangkhoa/fix-scroll-synchronisation-issue

Fix issue with scroll synchronisation, closes #31
temando · Jun 6, 2017 · 7952396 · 7952396
2 parents 8f3277d + 6756f09
commit 7952396
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 33 deletions.
diff --git a/src/components/Indicator/Indicator.js b/src/components/Indicator/Indicator.js
@@ -8,11 +8,11 @@ const arrow = require('./arrow.png')
 
 export default class Indicator extends PureComponent {
   render () {
-    const { status, className } = this.props
+    const { direction, className } = this.props
 
     return (
       <span className={classNames('indicator', className, {
-        [`indicator--${status}`]: status
+        [`indicator--${direction}`]: direction
       })}>
         <img src={arrow} alt='' title='arrow' />
       </span>
@@ -21,6 +21,6 @@ export default class Indicator extends PureComponent {
 }
 
 Indicator.propTypes = {
-  status: PropTypes.string,
+  direction: PropTypes.string,
   className: PropTypes.string
 }
diff --git a/src/components/Indicator/Indicator.scss b/src/components/Indicator/Indicator.scss
@@ -11,10 +11,10 @@
   width: 20px;
 }
 
-.indicator--open img {
+.indicator--down img {
   transform: rotate(180deg);
 }
 
 .indicator--right img {
   transform: rotate(-90deg);
-}
+}
diff --git a/src/components/Navigation/Navigation.js b/src/components/Navigation/Navigation.js
@@ -31,17 +31,17 @@ export default class Navigation extends Component {
     return (
       <nav className='nav'>
         {navigation && navigation.map((tag) => {
-          let status
+          let shouldBeExpanded = false
           if (expandedTags.includes(tag.title)) {
-            status = 'right'
+            shouldBeExpanded = true
           }
 
           return (
             <NavigationTag
               key={tag.title}
               title={tag.title}
               methods={tag.methods}
-              status={status}
+              shouldBeExpanded={shouldBeExpanded}
               onClick={this.onClick}
               location={location}
             />

diff --git a/src/components/NavigationMethod/NavigationMethod.js b/src/components/NavigationMethod/NavigationMethod.js
@@ -6,12 +6,14 @@ import './NavigationMethod.scss'
 
 export default class NavigationMethod extends PureComponent {
   render () {
-    const { method, isActive } = this.props
+    const { method, isActive, isOpen } = this.props
 
     return (
       <a
         className={classNames('nav-method', {
-          active: isActive
+          active: isActive,
+          open: isOpen,
+          closed: !isOpen
         })}
         href={`#${method.link}`}
       >
@@ -24,5 +26,6 @@ export default class NavigationMethod extends PureComponent {
 
 NavigationMethod.propTypes = {
   method: PropTypes.object,
-  isActive: PropTypes.bool
+  isActive: PropTypes.bool,
+  isOpen: PropTypes.bool
 }
diff --git a/src/components/NavigationMethod/NavigationMethod.scss b/src/components/NavigationMethod/NavigationMethod.scss
@@ -10,6 +10,14 @@
   &.active {
     background-color: $grey-dark;
   }
+
+  &.open {
+    display: block;
+  }
+
+  &.closed {
+    display: none;
+  }
 }
 
 .method-title {

diff --git a/src/components/NavigationTag/NavigationTag.js b/src/components/NavigationTag/NavigationTag.js
@@ -1,6 +1,5 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-
 import Indicator from '../Indicator/Indicator'
 import NavigationMethod from '../NavigationMethod/NavigationMethod'
 
@@ -15,9 +14,9 @@ export default class NavigationTag extends Component {
 
   shouldComponentUpdate (nextProps, nextState) {
     const isHashDiff = this.props.location.hash !== nextProps.location.hash
-    const isStatusDiff = this.props.status !== nextProps.status
+    const isExpandedStatusDiff = this.props.shouldBeExpanded !== nextProps.shouldBeExpanded
 
-    return isHashDiff || isStatusDiff
+    return isHashDiff || isExpandedStatusDiff
   }
 
   componentWillMount () {
@@ -37,9 +36,25 @@ export default class NavigationTag extends Component {
   }
 
   render () {
-    const { title, status, methods, location } = this.props
+    const { title, shouldBeExpanded, methods, location } = this.props
+
+    // If tag has any method that matches location hash, then it is considered active
+    let isActiveTag = false
+    if (methods) {
+      isActiveTag = methods.some(method => (`#${method.link}` === location.hash))
+    }
 
-    const isExpanded = (status === 'right')
+    let isExpanded = false
+    if (shouldBeExpanded || isActiveTag) {
+      isExpanded = true
+    }
+
+    let indicatorDirection
+    if (isExpanded) {
+      indicatorDirection = 'bottom'
+    } else {
+      indicatorDirection = 'right'
+    }
 
     return (
       <div>
@@ -49,13 +64,13 @@ export default class NavigationTag extends Component {
           onClick={this.handleClick}
         >
           {title}
-          <Indicator status={status} />
+          <Indicator direction={indicatorDirection} />
         </a>
         <div className='nav-tag-methods'>
-          {isExpanded && methods && methods.map((method) => {
+          {methods && methods.map((method) => {
             const isActive = (`#${method.link}` === location.hash)
 
-            return <NavigationMethod key={method.link} method={method} isActive={isActive} />
+            return <NavigationMethod key={method.link} method={method} isActive={isActive} isOpen={isExpanded} />
           })}
         </div>
       </div>
@@ -66,7 +81,7 @@ export default class NavigationTag extends Component {
 NavigationTag.propTypes = {
   title: PropTypes.string.isRequired,
   methods: PropTypes.array,
-  status: PropTypes.string,
+  shouldBeExpanded: PropTypes.bool,
   onClick: PropTypes.func.isRequired,
   location: PropTypes.object
 }
diff --git a/src/components/NavigationTag/NavigationTag.scss b/src/components/NavigationTag/NavigationTag.scss
@@ -9,4 +9,12 @@
   &.active {
     background-color: $grey-dark;
   }
+
+  &.is-open {
+    display: block;
+  }
+
+  &.is-closed {
+    display: none;
+  }
 }
diff --git a/src/components/ServiceContainer/ServiceContainer.js b/src/components/ServiceContainer/ServiceContainer.js
@@ -1,25 +1,19 @@
 import React, { PureComponent } from 'react'
-import ScrollableAnchor from 'react-scrollable-anchor'
 import PropTypes from 'prop-types'
-
 import Method from '../Method/Method'
 
-// import './ServiceContainer.scss';
-
 export default class ServiceContainer extends PureComponent {
   render () {
     const { service } = this.props
     const { title, methods } = service
 
     return (
-      <ScrollableAnchor id={title}>
-        <div className='service-container'>
-          <h2>{title}</h2>
-          {methods.map(
-            (method) => <Method key={method.link} method={method} />
-          )}
-        </div>
-      </ScrollableAnchor>
+      <div className='service-container' id={title}>
+        <h2>{title}</h2>
+        {methods.map(
+          (method) => <Method key={method.link} method={method} />
+        )}
+      </div>
     )
   }
 }

diff --git a/src/handlers/BaseHandler.js b/src/handlers/BaseHandler.js
@@ -15,7 +15,7 @@ class BaseHandler extends Component {
     const openApiUrl = this.props.location.query.url
     const parserType = this.props.parserType
     this.props.getDefinition(openApiUrl, parserType)
-    configureAnchors({ offset: 10 })
+    configureAnchors({ offset: -10, scrollDuration: 100 })
   }
 
   render () {