replace legacy context API (#500)

* replace legacy context API

* bump version

* update action cache version

Author: nathanmarks

.github/workflows/test.yml

@@ -16,7 +16,7 @@ jobs:
           node-version: '14.18.2'
 
       - name: Restore cache
-        uses: actions/cache@v3.3.1
+        uses: actions/cache@v3
         with:
           path: ~/.cache/yarn
           key: yarn-node-modules-v1-${{ hashFiles('yarn.lock') }}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ic-snacks",
-  "version": "0.0.159",
+  "version": "0.0.160",
   "description": "The Instacart Component Library for Web",
   "main": "dist/snacks.js",
   "module": "dist/esm/index.js",

src/components/Forms/Form.js

@@ -2,6 +2,12 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import isEqual from 'lodash.isequal'
 
+// Create a new context
+export const FormContext = React.createContext({
+  registerComponent: () => {},
+  unregisterComponent: () => {},
+})
+
 class Form extends React.Component {
   static propTypes = {
     /** Form html chilren */
@@ -16,10 +22,6 @@ class Form extends React.Component {
     serverErrors: PropTypes.shape({}),
   }
 
-  static childContextTypes = {
-    ICFormable: PropTypes.object,
-  }
-
   constructor() {
     super()
     this.state = { serverErrors: null }
@@ -28,15 +30,6 @@ class Form extends React.Component {
     this.invalidComponents = []
   }
 
-  getChildContext() {
-    return {
-      ICFormable: {
-        registerComponent: this.registerComponent,
-        unregisterComponent: this.unregisterComponent,
-      },
-    }
-  }
-
   componentDidMount() {
     this.updateModel()
   }
@@ -100,11 +93,17 @@ class Form extends React.Component {
 
   render() {
     const { children, formProps } = this.props
+    const contextValue = {
+      registerComponent: this.registerComponent,
+      unregisterComponent: this.unregisterComponent,
+    }
 
     return (
-      <form {...formProps} onSubmit={this.handleSubmit}>
-        {children}
-      </form>
+      <FormContext.Provider value={contextValue}>
+        <form {...formProps} onSubmit={this.handleSubmit}>
+          {children}
+        </form>
+      </FormContext.Provider>
     )
   }
 }

src/components/Forms/FormComponent.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Validator from 'validator'
+import { FormContext } from './Form'
 
 const formComponent = WrappedComponent => {
   return class FormComponent extends React.Component {
@@ -19,9 +20,7 @@ const formComponent = WrappedComponent => {
       validations: PropTypes.object,
     }
 
-    static contextTypes = {
-      ICFormable: PropTypes.object,
-    }
+    static contextType = FormContext
 
     state = {
       isValid: true,
@@ -34,11 +33,13 @@ const formComponent = WrappedComponent => {
       this.uniqueId =
         id || `${name}-${Math.floor(Math.random() * 0xffff)}`.replace(/[^A-Za-z0-9-]/gi, '')
 
-      this.context.ICFormable && this.context.ICFormable.registerComponent(this)
+      const { registerComponent } = this.context
+      registerComponent && registerComponent(this)
     }
 
     componentWillUnmount() {
-      this.context.ICFormable && this.context.ICFormable.unregisterComponent(this)
+      const { unregisterComponent } = this.context
+      unregisterComponent && unregisterComponent(this)
     }
 
     getValue = () => {