feat(Sticky): add active prop (#2053)

src/modules/Sticky/Sticky.d.ts

@@ -6,6 +6,9 @@ export interface StickyProps {
   /** An element type to render as (string or function). */
   as?: any;
 
+  /** A Sticky can be active. */
+  active?: boolean;
+
   /** Offset in pixels from the bottom of the screen when fixing element to viewport. */
   bottomOffset?: number;
 

src/modules/Sticky/Sticky.js

@@ -6,8 +6,8 @@ import {
   customPropTypes,
   getElementType,
   getUnhandledProps,
-  META,
   isBrowser,
+  META,
 } from '../../lib'
 
 /**
@@ -18,6 +18,9 @@ export default class Sticky extends Component {
     /** An element type to render as (string or function). */
     as: customPropTypes.as,
 
+    /** A Sticky can be active. */
+    active: PropTypes.bool,
+
     /** Offset in pixels from the bottom of the screen when fixing element to viewport. */
     bottomOffset: PropTypes.number,
 
@@ -73,6 +76,7 @@ export default class Sticky extends Component {
   }
 
   static defaultProps = {
+    active: true,
     bottomOffset: 0,
     offset: 0,
     scrollContext: isBrowser ? window : null,
@@ -89,16 +93,46 @@ export default class Sticky extends Component {
 
   componentDidMount() {
     if (!isBrowser) return
+    const { active } = this.props
 
-    const { scrollContext } = this.props
-    this.handleUpdate()
-    scrollContext.addEventListener('scroll', this.handleUpdate)
+    if (active) {
+      this.handleUpdate()
+      this.addListener()
+    }
+  }
+
+  componentWillReceiveProps({ active: next }) {
+    const { active: current } = this.props
+
+    if (current === next) return
+    if (next) {
+      this.handleUpdate()
+      this.addListener()
+      return
+    }
+    this.removeListener()
   }
 
   componentWillUnmount() {
     if (!isBrowser) return
+    const { active } = this.props
+
+    if (active) this.removeListener()
+  }
+
+  // ----------------------------------------
+  // Events
+  // ----------------------------------------
 
+  addListener = () => {
     const { scrollContext } = this.props
+
+    scrollContext.addEventListener('scroll', this.handleUpdate)
+  }
+
+  removeListener = () => {
+    const { scrollContext } = this.props
+
     scrollContext.removeEventListener('scroll', this.handleUpdate)
   }
 
@@ -110,7 +144,6 @@ export default class Sticky extends Component {
     const { pushing } = this.state
 
     this.ticking = false
-
     this.assignRects()
 
     if (pushing) {
@@ -163,9 +196,6 @@ export default class Sticky extends Component {
     }
   }
 
-  // Return true if the height of the component is higher than the window
-  isOversized = () => this.stickyRect.height > window.innerHeight
-
   // Return true when the component reached the bottom of the context
   didReachContextBottom = () => {
     const { offset } = this.props
@@ -186,6 +216,9 @@ export default class Sticky extends Component {
     return (this.contextRect.bottom + bottomOffset) > window.innerHeight
   }
 
+  // Return true if the height of the component is higher than the window
+  isOversized = () => this.stickyRect.height > window.innerHeight
+
   // ----------------------------------------
   // Stick helpers
   // ----------------------------------------