refactor(context): Update to latest React Context API (#391)

refactor(context): Reworked internals of ConfigProvider to use to latest React Context Api, removed package prop-types from library, updated peerDependency to include >= react@16.3

BREAKING CHANGE: Removed package, prop-types, from library. Also, updated peerDependency to include >= react@16.3

.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,8 +140,7 @@
     "verifyConditions": "condition-circle"
   },
   "peerDependencies": {
-    "prop-types": ">=15",
-    "react": ">=15",
+    "react": ">=16.3",
     "react-dom": ">=15"
   },
   "dependencies": {

scripts/webpack.config.js

@@ -47,7 +47,6 @@ module.exports = {
   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/configProvider/consumer.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/configProvider/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/configProvider/index.js

@@ -1,65 +1,42 @@
 // @flow
 import * as React from 'react'
-import PropTypes from 'prop-types'
-import type {
-  ConfigProviderContext,
-  DisplayAliases,
-  SpacingAliases,
-} from '../types'
-import defaults from '../defaults'
+import type { ConfigContextType } from '../types'
+import Context from './context'
 
-type Props = {
-  base?: number,
+type ProviderProps = {
+  ...ConfigContextType,
   children?: React.Node,
-  columns?: number,
-  displayAliases?: DisplayAliases,
-  fallbackDisplayKey?: string,
-  gutter?: number,
-  maxPageWidth?: number | 'none',
-  minPageWidth?: number,
-  pageMargin?: {
-    [string]: number,
-  },
-  spacingAliases?: SpacingAliases,
-  verticalGutter?: number,
 }
 
-export const ConfigContextPropTypes = {
-  gymnast: PropTypes.shape({
-    base: PropTypes.number,
-    columns: PropTypes.number,
-    displayAliases: PropTypes.shape({}),
-    fallbackDisplayKey: PropTypes.string,
-    gutter: PropTypes.number,
-    maxPageWidth: PropTypes.oneOf([PropTypes.number, 'none']),
-    minPageWidth: PropTypes.number,
-    pageMargin: PropTypes.shape({}),
-    spacingAliases: PropTypes.shape({}),
-    verticalGutter: PropTypes.number,
-  }),
-}
-
-export default class ConfigProvider extends React.Component<Props> {
-  static contextTypes = ConfigContextPropTypes
-  static childContextTypes = ConfigContextPropTypes
+type ProviderState = ConfigContextType | {}
 
-  getChildContext(): ConfigProviderContext {
-    const {
-      gutter = defaults.gutter,
-      verticalGutter = gutter,
-      children,
-      ...props
-    } = this.props
+// 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 {
-      gymnast: {
-        gutter,
-        verticalGutter,
-        ...props,
-      },
+      ...state,
+      ...restProps,
     }
   }
+
+  state = {}
+
   render() {
-    return this.props.children || null
+    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