refactor(context): Update to latest React Context API

.babelrc

@@ -34,9 +34,6 @@
     ]
   ],
   "env": {
-    "development": {
-      "plugins": ["flow-react-proptypes"]
-    },
     "test": {
       "plugins": [
         [

.eslintrc

@@ -18,10 +18,7 @@
     "jest": true,
     "jasmine": true
   },
-  "plugins": [
-    "react",
-    "flowtype"
-  ],
+  "plugins": ["react", "flowtype"],
   "settings": {
     "react": {
       "version": "15.5"
@@ -40,9 +37,7 @@
     "import/no-unresolved": [
       2,
       {
-        "ignore": [
-          "gymnast"
-        ]
+        "ignore": ["gymnast"]
       }
     ],
     "no-use-before-define": ["error", "nofunc"],

package.json

@@ -33,7 +33,6 @@
     "babel-cli": "6.26.0",
     "babel-eslint": "8.2.6",
     "babel-jest": "23.4.2",
-    "babel-plugin-flow-react-proptypes": "24.1.1",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-macros": "2.4.0",
     "babel-plugin-module-resolver": "3.1.1",
@@ -141,7 +140,6 @@
     "verifyConditions": "condition-circle"
   },
   "peerDependencies": {
-    "prop-types": ">=15",
     "react": ">=15",
     "react-dom": ">=15"
   },

scripts/webpack.config.js

@@ -46,8 +46,6 @@ module.exports = {
   devtool: 'source-map',
   externals: {
     react: 'react',
-    'react-dom': 'react-dom',
-    'prop-types': 'prop-types',
   },
   module: {
     rules: [

src/asGrid/index.js

@@ -1,16 +1,12 @@
 // @flow
 import * as React from 'react'
 import { compact } from 'lodash'
-import type {
-  OneResolutionGrid,
-  ConfigProviderContext,
-  GridProps,
-  OneResolution,
-} from '../types'
+import type { OneResolutionGrid, GridProps, OneResolution } from '../types'
 import { styles, getCol } from './grid.styles'
 import { getValue } from '../utils'
 import getCoreStyles from '../core'
 import withResolution from '../withResolution'
+import withContext from '../withContext'
 
 const resolutionProperties = ['align', 'justify', 'size']
 
@@ -20,17 +16,15 @@ export default function asGrid(
     props: $Shape<OneResolution>
   ) => $Shape<OneResolution> = props => props
 ): React.ComponentType<GridProps> {
-  function Grid(
-    {
-      align,
-      className,
-      justify,
-      size,
-      innerRef,
-      ...restProps
-    }: OneResolutionGrid,
-    context: ConfigProviderContext
-  ) {
+  function Grid({
+    align,
+    className,
+    justify,
+    size,
+    innerRef,
+    context,
+    ...restProps
+  }: OneResolutionGrid) {
     const props = getCoreStyles(mapDefaultProps(restProps), context)
     const classes = compact([
       styles.grid,
@@ -43,5 +37,7 @@ export default function asGrid(
     return <Component ref={innerRef} {...props} className={classes.join(' ')} />
   }
 
-  return withResolution(Grid, resolutionProperties)
+  const Resolution = withResolution(Grid, resolutionProperties)
+
+  return withContext(Resolution)
 }

src/asLayout/index.js

@@ -1,16 +1,12 @@
 // @flow
 import * as React from 'react'
 import { compact } from 'lodash'
-import type {
-  OneResolutionLayout,
-  ConfigProviderContext,
-  LayoutProps,
-  OneResolution,
-} from '../types'
+import type { OneResolutionLayout, LayoutProps, OneResolution } from '../types'
 import getStyles from './layout.styles'
 import getCoreStyles from '../core'
 import { getValues } from '../utils/index'
 import withResolution from '../withResolution'
+import withContext from '../withContext'
 
 const resolutionProperties = ['fixed', 'height', 'overflow']
 
@@ -20,17 +16,15 @@ export default function asLayout(
     props: $Shape<OneResolution>
   ) => $Shape<OneResolution> = props => props
 ): React.ComponentType<LayoutProps> {
-  function Layout(
-    {
-      className,
-      fixed,
-      height,
-      overflow,
-      innerRef,
-      ...restProps
-    }: OneResolutionLayout,
-    context: ConfigProviderContext
-  ) {
+  function Layout({
+    className,
+    fixed,
+    height,
+    overflow,
+    innerRef,
+    context,
+    ...restProps
+  }: OneResolutionLayout) {
     const props = getCoreStyles(mapDefaultProps(restProps), context)
     const styles = getStyles(getValues(context, restProps))
     const classes = compact([
@@ -44,5 +38,7 @@ export default function asLayout(
     return <Component ref={innerRef} {...props} className={classes.join(' ')} />
   }
 
-  return withResolution(Layout, resolutionProperties)
+  const Resolution = withResolution(Layout, resolutionProperties)
+
+  return withContext(Resolution)
 }

src/configContext/configConsumer.js

@@ -0,0 +1,10 @@
+// @flow
+import * as React from 'react'
+import type { ConfigContextType } from '../types'
+import Context from './context'
+
+type Props = { children: (context: ConfigContextType) => ?React.Node }
+
+export default function ConfigConsumer({ children }: Props) {
+  return <Context.Consumer>{context => children(context)}</Context.Consumer>
+}

src/configContext/configProvider.js

@@ -0,0 +1,42 @@
+// @flow
+import * as React from 'react'
+import type { ConfigContextType } from '../types'
+import Context from './context'
+
+type ProviderProps = {
+  ...ConfigContextType,
+  children?: React.Node,
+}
+
+type ProviderState = ConfigContextType | {}
+
+// This HOC takes a Provider component and wraps it around a Consumer
+// component that provides non-defaulted values that have been set from preceding
+// Provider components.
+class ConfigProvider extends React.Component<ProviderProps, ProviderState> {
+  static getDerivedStateFromProps(props: ProviderProps, state: ProviderState) {
+    const { children, ...restProps } = props
+
+    return {
+      ...state,
+      ...restProps,
+    }
+  }
+
+  state = {}
+
+  render() {
+    return (
+      <Context.Consumer>
+        {(context: ConfigContextType) => {
+          const { children } = this.props
+          const value = { ...context, ...this.state }
+
+          return <Context.Provider value={value}>{children}</Context.Provider>
+        }}
+      </Context.Consumer>
+    )
+  }
+}
+
+export default ConfigProvider

src/configContext/context.js

@@ -0,0 +1,10 @@
+// @flow
+import * as React from 'react'
+import type { ConfigContextType } from '../types'
+import defaults from '../defaults'
+
+const contextDefaults: ConfigContextType = defaults
+
+const Context = React.createContext(contextDefaults)
+
+export default Context

src/configContext/index.js

@@ -0,0 +1,9 @@
+// @flow
+
+import ConfigProvider from './configProvider'
+import ConfigConsumer from './configConsumer'
+
+export default {
+  Provider: ConfigProvider,
+  Consumer: ConfigConsumer,
+}