Merge pull request #3436 from LieutenantRoger/feature/member-list-redesign

fix sticky issue #3432

Author: maxceem

src/components/Sticky.jsx

@@ -7,14 +7,26 @@ export default class Sticky extends React.Component {
     super(props)
     this.mountSticky = (sticky) => { this.sticky = sticky }
     this.handleScroll = this.handleScroll.bind(this)
+    this.updateSticky = this.updateSticky.bind(this)
   }
 
   componentDidMount() {
     window.addEventListener('scroll', this.handleScroll)
+    document.addEventListener('refreshsticky', this.updateSticky)
   }
 
   componentWillUnmount() {
     window.removeEventListener('scroll', this.handleScroll)
+    document.removeEventListener('refreshsticky', this.updateSticky)
+  }
+
+  updateSticky() {
+    setTimeout(() => {
+      if (this.sticky) {
+        this.sticky.updateInitialDimension()
+        this.sticky.update()
+      }
+    })
   }
 
   handleScroll() {

src/components/TeamManagement/TeamManagement.jsx

@@ -52,12 +52,21 @@ class TeamManagement extends React.Component {
   }
 
   topcoderTeamInviteButtonClick() {
+    this.refreshStickyComp()
     this.setState({topcoderTeamInviteButtonExpanded: !this.state.topcoderTeamInviteButtonExpanded})
   }
 
   projectTeamInviteButtonClick() {
+    this.refreshStickyComp()
     this.setState({projectTeamInviteButtonExpanded: !this.state.projectTeamInviteButtonExpanded})
   }
+
+  refreshStickyComp() {
+    const event = document.createEvent('Event')
+    event.initEvent('refreshsticky', true, true)
+    document.dispatchEvent(event)
+  }
+
   componentWillReceiveProps(nextProps) {
     if (this.props.processingMembers !== nextProps.processingMembers && (!nextProps.processingMembers)) {
       this.props.onJoin(false)

src/projects/detail/containers/DashboardContainer.jsx

@@ -212,7 +212,7 @@ class DashboardContainer extends React.Component {
           <MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
             {(matches) => {
               if (matches) {
-                return <Sticky top={60}>{leftArea}</Sticky>
+                return <Sticky top={60} bottomBoundary="#wrapper-main">{leftArea}</Sticky>
               } else {
                 return leftArea
               }