merge in react-history

Author: ryanflorence

modules/BrowserRouter.js

@@ -1,16 +1,23 @@
 import React, { PropTypes } from 'react'
-import BrowserHistory from 'react-history/BrowserHistory'
+import createBrowserHistory from 'history/createBrowserHistory'
 import StaticRouter from './StaticRouter'
+import History from './History'
 
-/**
- * A router that uses the HTML5 history API.
- */
-const BrowserRouter = ({ basename, forceRefresh, getUserConfirmation, keyLength, ...props }) => (
-  <BrowserHistory
-    basename={basename}
-    forceRefresh={forceRefresh}
-    getUserConfirmation={getUserConfirmation}
-    keyLength={keyLength}
+const BrowserRouter = ({
+  basename,
+  forceRefresh,
+  getUserConfirmation,
+  keyLength,
+  ...routerProps
+}) => (
+  <History
+    createHistory={createBrowserHistory}
+    historyOptions={{
+      basename,
+      forceRefresh,
+      getUserConfirmation,
+      keyLength
+    }}
   >
     {({ history, action, location }) => (
       <StaticRouter
@@ -20,10 +27,10 @@ const BrowserRouter = ({ basename, forceRefresh, getUserConfirmation, keyLength,
         onPush={history.push}
         onReplace={history.replace}
         blockTransitions={history.block}
-        {...props}
+        {...routerProps}
       />
     )}
-  </BrowserHistory>
+  </History>
 )
 
 if (__DEV__) {

modules/HashRouter.js

@@ -1,5 +1,6 @@
 import React, { PropTypes } from 'react'
-import HashHistory from 'react-history/HashHistory'
+import createHashHistory from 'history/createHashHistory'
+import History from './History'
 import { addLeadingSlash, stripLeadingSlash } from 'history/PathUtils'
 import StaticRouter from './StaticRouter'
 
@@ -25,11 +26,19 @@ const createHref = hashType => path => {
 /**
  * A router that uses the URL hash.
  */
-const HashRouter = ({ basename, getUserConfirmation, hashType, ...props }) => (
-  <HashHistory
-    basename={basename}
-    getUserConfirmation={getUserConfirmation}
-    hashType={hashType}
+const HashRouter = ({
+  basename,
+  getUserConfirmation,
+  hashType,
+  ...routerProps
+}) => (
+  <History
+    createHistory={createHashHistory}
+    historyOptions={{
+      basename,
+      getUserConfirmation,
+      hashType
+    }}
   >
     {({ history, action, location }) => (
       <StaticRouter
@@ -40,10 +49,10 @@ const HashRouter = ({ basename, getUserConfirmation, hashType, ...props }) => (
         onReplace={history.replace}
         blockTransitions={history.block}
         createHref={createHref(hashType)}
-        {...props}
+        {...routerProps}
       />
     )}
-  </HashHistory>
+  </History>
 )
 
 if (__DEV__) {

modules/History.js

@@ -0,0 +1,48 @@
+import React, { PropTypes } from 'react'
+import { historyContext as historyContextType } from './PropTypes'
+
+/**
+ * The common public API for all *History components.
+ */
+class History extends React.Component {
+  static childContextTypes = {
+    history: historyContextType.isRequired
+  }
+
+  getChildContext() {
+    return {
+      history: this.history
+    }
+  }
+
+  componentWillMount() {
+    const { createHistory, historyOptions } = this.props
+    this.history = createHistory(historyOptions)
+    this.unlisten = this.history.listen(() => this.forceUpdate())
+  }
+
+  componentWillUnmount() {
+    this.unlisten()
+  }
+
+  render() {
+    const history = this.history
+    const { location, action } = history
+
+    return this.props.children({
+      history,
+      location,
+      action
+    })
+  }
+}
+
+if (__DEV__) {
+  History.propTypes = {
+    children: PropTypes.func.isRequired,
+    createHistory: PropTypes.func.isRequired,
+    historyOptions: PropTypes.object
+  }
+}
+
+export default History

modules/LocationUtils.js

@@ -1,6 +1,5 @@
-import { parsePath, createPath } from 'react-history/PathUtils'
-
-export { locationsAreEqual } from 'react-history/LocationUtils'
+import { parsePath, createPath } from 'history/PathUtils'
+export { locationsAreEqual } from 'history/LocationUtils'
 
 export const createRouterLocation = (input, parseQueryString, stringifyQuery) => {
   if (typeof input === 'string') {

modules/MemoryRouter.js

@@ -1,16 +1,23 @@
 import React, { PropTypes } from 'react'
-import MemoryHistory from 'react-history/MemoryHistory'
+import createMemoryHistory from 'history/createMemoryHistory'
 import StaticRouter from './StaticRouter'
+import History from './History'
 
-/**
- * A router that stores all locations in memory.
- */
-const MemoryRouter = ({ getUserConfirmation, initialEntries, initialIndex, keyLength, ...props }) => (
-  <MemoryHistory
-    getUserConfirmation={getUserConfirmation}
-    initialEntries={initialEntries}
-    initialIndex={initialIndex}
-    keyLength={keyLength}
+const MemoryRouter = ({
+  getUserConfirmation,
+  initialEntries,
+  initialIndex,
+  keyLength,
+  ...routerProps
+}) => (
+  <History
+    createHistory={createMemoryHistory}
+    historyOptions={{
+      getUserConfirmation,
+      initialEntries,
+      initialIndex,
+      keyLength
+    }}
   >
     {({ history, action, location }) => (
       <StaticRouter
@@ -19,10 +26,10 @@ const MemoryRouter = ({ getUserConfirmation, initialEntries, initialIndex, keyLe
         onPush={history.push}
         onReplace={history.replace}
         blockTransitions={history.block}
-        {...props}
+        {...routerProps}
       />
     )}
-  </MemoryHistory>
+  </History>
 )
 
 if (__DEV__) {

modules/NavigationPrompt.js

@@ -1,3 +1,57 @@
-import NavigationPrompt from 'react-history/Prompt'
-export default NavigationPrompt
+import React, { PropTypes } from 'react'
+import { historyContext as historyContextType } from './PropTypes'
+
+class NavigationPrompt extends React.Component {
+  static contextTypes = {
+    history: historyContextType.isRequired
+  }
+
+  static defaultProps = {
+    when: true
+  }
+
+  block() {
+    if (!this.teardownPrompt)
+      this.teardownPrompt = this.context.history.block(this.props.message)
+  }
+
+  unblock() {
+    if (this.teardownPrompt) {
+      this.teardownPrompt()
+      this.teardownPrompt = null
+    }
+  }
+
+  componentWillMount() {
+    if (this.props.when)
+      this.block()
+  }
 
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.when) {
+      this.block()
+    } else {
+      this.unblock()
+    }
+  }
+
+  componentWillUnmount() {
+    this.unblock()
+  }
+
+  render() {
+    return null
+  }
+}
+
+if (__DEV__) {
+  NavigationPrompt.propTypes = {
+    when: PropTypes.bool,
+    message: PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.string
+    ]).isRequired
+  }
+}
+
+export default NavigationPrompt

modules/PropTypes.js

@@ -27,9 +27,22 @@ export const location = PropTypes.shape({
   key: PropTypes.string
 })
 
+export const historyContext = PropTypes.shape({
+  action: action.isRequired,
+  location: location.isRequired,
+  push: PropTypes.func.isRequired,
+  replace: PropTypes.func.isRequired,
+  go: PropTypes.func.isRequired,
+  goBack: PropTypes.func.isRequired,
+  goForward: PropTypes.func.isRequired,
+  canGo: PropTypes.func,
+  block: PropTypes.func.isRequired
+})
+
 export const routerContext = PropTypes.shape({
   transitionTo: PropTypes.func.isRequired,
   replaceWith: PropTypes.func.isRequired,
   blockTransitions: PropTypes.func.isRequired,
   createHref: PropTypes.func.isRequired
 })
+

modules/index.js

@@ -1,7 +1,7 @@
 export Link from './Link'
 export Match from './Match'
 export Miss from './Miss'
-export NavigationPrompt from 'react-history/Prompt'
+export NavigationPrompt from './NavigationPrompt'
 export Redirect from './Redirect'
 
 // High-level wrappers

package.json

@@ -30,7 +30,7 @@
     "path-to-regexp": "^1.5.3",
     "query-string": "4.2.3",
     "react-broadcast": "^0.1.1",
-    "react-history": "^0.14.0"
+    "history": "^4.3.0"
   },
   "peerDependencies": {
     "react": "15.x"

website/components/FakeBrowser/index.js

@@ -1,10 +1,19 @@
 import React, { PropTypes } from 'react'
-import StaticRouter from '../../../modules/StaticRouter'
-import MemoryHistory from 'react-history/MemoryHistory'
+import History from '../../../modules/History'
 import { B, V, H, PAD, LIGHT_GRAY, GRAY } from '../bricks'
 import { button } from './style.css' // eslint-disable-line
 import { stringify as stringifyQuery } from 'query-string'
 import { createPath } from 'history/PathUtils'
+import createMemoryHistory from 'history/createMemoryHistory'
+
+const MemoryHistory = ({ children, ...historyOptions }) => (
+  <History
+    children={children}
+    createHistory={createMemoryHistory}
+    historyOptions={historyOptions}
+  />
+)
+
 
 // have to recreate what StaticRouter does, there should be a way to
 // compose?...