diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index cb0a84d6..8af18343 100644 --- a/.github/workflows/test.yml +++ b/.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') }} diff --git a/package.json b/package.json index e5133e82..ee30d60b 100644 --- a/package.json +++ b/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", diff --git a/src/components/Forms/Form.js b/src/components/Forms/Form.js index 7a0bd490..e5f31e77 100644 --- a/src/components/Forms/Form.js +++ b/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 ( -
- {children} -
+ +
+ {children} +
+
) } } diff --git a/src/components/Forms/FormComponent.js b/src/components/Forms/FormComponent.js index 207c908c..02a4d953 100644 --- a/src/components/Forms/FormComponent.js +++ b/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 = () => {