Merge pull request #3430 from gaearon/fix-redux-2

Make <Link> work with static containers (take two)

Author: taion

modules/ContextUtils.js

@@ -0,0 +1,114 @@
+import React, { PropTypes } from 'react'
+
+// Works around issues with context updates failing to propagate.
+// https://github.com/facebook/react/issues/2517
+// https://github.com/reactjs/react-router/issues/470
+
+export function createContextProvider(name, contextType = PropTypes.any) {
+  const ContextProvider = React.createClass({
+    propTypes: {
+      children: PropTypes.node.isRequired
+    },
+
+    contextTypes: {
+      [name]: contextType
+    },
+
+    childContextTypes: {
+      [name]: contextType
+    },
+
+    getChildContext() {
+      return {
+        [name]: {
+          ...this.context[name],
+          subscribe: this.subscribe,
+          eventIndex: this.eventIndex
+        }
+      }
+    },
+
+    componentWillMount() {
+      this.eventIndex = 0
+      this.listeners = []
+    },
+
+    componentWillReceiveProps() {
+      this.eventIndex++
+    },
+
+    componentDidUpdate() {
+      this.listeners.forEach(listener => listener(this.eventIndex))
+    },
+
+    subscribe(listener) {
+      // No need to immediately call listener here.
+      this.listeners.push(listener)
+
+      return () => {
+        this.listeners = this.listeners.filter(item => item !== listener)
+      }
+    },
+
+    render() {
+      return this.props.children
+    }
+  })
+
+  return ContextProvider
+}
+
+export function connectToContext(WrappedComponent, name, contextType = PropTypes.any) {
+  const ContextSubscriber = React.createClass({
+    contextTypes: {
+      [name]: contextType
+    },
+
+    getInitialState() {
+      if (!this.context[name]) {
+        return {}
+      }
+
+      return {
+        lastRenderedEventIndex: this.context[name].eventIndex
+      }
+    },
+
+    componentDidMount() {
+      if (!this.context[name]) {
+        return
+      }
+
+      this.unsubscribe = this.context[name].listen(eventIndex => {
+        if (eventIndex !== this.state.lastRenderedEventIndex) {
+          this.setState({ lastRenderedEventIndex: eventIndex })
+        }
+      })
+    },
+
+    componentWillReceiveProps() {
+      if (!this.context[name]) {
+        return
+      }
+
+      this.setState({
+        lastRenderedEventIndex: this.context[name].eventIndex
+      })
+    },
+
+    componentWillUnmount() {
+      if (!this.unsubscribe) {
+        return
+      }
+
+      this.unsubscribe()
+      this.unsubscribe = null
+    },
+
+    render() {
+      return <WrappedComponent {...this.props} />
+    }
+  })
+
+  return ContextSubscriber
+}

modules/Link.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { routerShape } from './PropTypes'
+import { connectToContext } from './ContextUtils'
 
 const { bool, object, string, func, oneOfType } = React.PropTypes
 
@@ -121,4 +122,4 @@ const Link = React.createClass({
 
 })
 
-export default Link
+export default connectToContext(Link, 'router', object)

modules/RouterContext.js

@@ -2,9 +2,11 @@ import invariant from 'invariant'
 import React from 'react'
 
 import getRouteParams from './getRouteParams'
+import { createContextProvider } from './ContextUtils'
 import { isReactChildren } from './RouteUtils'
 
 const { array, func, object } = React.PropTypes
+const RouterContextProvider = createContextProvider('router', object.isRequired)
 
 /**
  * A <RouterContext> renders the component tree for a given router state
@@ -88,12 +90,21 @@ const RouterContext = React.createClass({
       }, element)
     }
 
+    const isEmpty = element === null || element === false
     invariant(
-      element === null || element === false || React.isValidElement(element),
+      isEmpty || React.isValidElement(element),
       'The root route must render a single element'
     )
 
-    return element
+    if (isEmpty) {
+      return element
+    }
+
+    return (
+      <RouterContextProvider>
+        {element}
+      </RouterContextProvider>
+    )
   }
 
 })

modules/__tests__/Link-test.js

@@ -314,6 +314,47 @@ describe('A <Link>', function () {
         </Router>
       ), node, execNextStep)
     })
+
+    it('changes active state inside static containers', function (done) {
+      class LinkWrapper extends Component {
+        shouldComponentUpdate() {
+          return false
+        }
+
+        render() {
+          return (
+            <div>
+              <Link to="/hello" activeClassName="active">Link</Link>
+              {this.props.children}
+            </div>
+          )
+        }
+      }
+
+      let a
+      const history = createHistory('/goodbye')
+      const steps = [
+        function () {
+          a = node.querySelector('a')
+          expect(a.className).toEqual('')
+          history.push('/hello')
+        },
+        function () {
+          expect(a.className).toEqual('active')
+        }
+      ]
+
+      const execNextStep = execSteps(steps, done)
+
+      render((
+        <Router history={history} onUpdate={execNextStep}>
+          <Route path="/" component={LinkWrapper}>
+            <Route path="goodbye" component={Goodbye} />
+            <Route path="hello" component={Hello} />
+          </Route>
+        </Router>
+      ), node, execNextStep)
+    })
   })
 
   describe('when clicked', function () {