MM-69835 Replace legacy context API with modern one

src/ControlLabel.js

@@ -3,6 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import warning from 'warning';
 
+import FormGroupContext from './FormGroupContext';
 import { bsClass, getClassSet, splitBsProps } from './utils/bootstrapUtils';
 
 const propTypes = {
@@ -17,13 +18,9 @@ const defaultProps = {
   srOnly: false
 };
 
-const contextTypes = {
-  $bs_formGroup: PropTypes.object
-};
-
 class ControlLabel extends React.Component {
   render() {
-    const formGroup = this.context.$bs_formGroup;
+    const formGroup = this.context;
     const controlId = formGroup && formGroup.controlId;
 
     const { htmlFor = controlId, srOnly, className, ...props } = this.props;
@@ -51,6 +48,6 @@ class ControlLabel extends React.Component {
 
 ControlLabel.propTypes = propTypes;
 ControlLabel.defaultProps = defaultProps;
-ControlLabel.contextTypes = contextTypes;
+ControlLabel.contextType = FormGroupContext;
 
 export default bsClass('control-label', ControlLabel);

src/FormControl.js

@@ -6,6 +6,7 @@ import warning from 'warning';
 
 import FormControlFeedback from './FormControlFeedback';
 import FormControlStatic from './FormControlStatic';
+import FormGroupContext from './FormGroupContext';
 import {
   prefix,
   bsClass,
@@ -39,13 +40,9 @@ const defaultProps = {
   componentClass: 'input'
 };
 
-const contextTypes = {
-  $bs_formGroup: PropTypes.object
-};
-
 class FormControl extends React.Component {
   render() {
-    const formGroup = this.context.$bs_formGroup;
+    const formGroup = this.context;
     const controlId = formGroup && formGroup.controlId;
 
     const {
@@ -92,7 +89,7 @@ class FormControl extends React.Component {
 
 FormControl.propTypes = propTypes;
 FormControl.defaultProps = defaultProps;
-FormControl.contextTypes = contextTypes;
+FormControl.contextType = FormGroupContext;
 
 FormControl.Feedback = FormControlFeedback;
 FormControl.Static = FormControlStatic;

src/FormControlFeedback.js

@@ -1,18 +1,14 @@
 import classNames from 'classnames';
 import React from 'react';
-import PropTypes from 'prop-types';
 
+import FormGroupContext from './FormGroupContext';
 import Glyphicon from './Glyphicon';
 import { bsClass, getClassSet, splitBsProps } from './utils/bootstrapUtils';
 
 const defaultProps = {
   bsRole: 'feedback'
 };
 
-const contextTypes = {
-  $bs_formGroup: PropTypes.object
-};
-
 class FormControlFeedback extends React.Component {
   getGlyph(validationState) {
     switch (validationState) {
@@ -50,7 +46,7 @@ class FormControlFeedback extends React.Component {
 
     if (!children) {
       return this.renderDefaultFeedback(
-        this.context.$bs_formGroup,
+        this.context,
         className,
         classes,
         elementProps
@@ -66,6 +62,6 @@ class FormControlFeedback extends React.Component {
 }
 
 FormControlFeedback.defaultProps = defaultProps;
-FormControlFeedback.contextTypes = contextTypes;
+FormControlFeedback.contextType = FormGroupContext;
 
 export default bsClass('form-control-feedback', FormControlFeedback);

src/FormGroup.js

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import FormGroupContext from './FormGroupContext';
 import {
   bsClass,
   bsSizes,
@@ -19,22 +20,7 @@ const propTypes = {
   validationState: PropTypes.oneOf(['success', 'warning', 'error', null])
 };
 
-const childContextTypes = {
-  $bs_formGroup: PropTypes.object.isRequired
-};
-
 class FormGroup extends React.Component {
-  getChildContext() {
-    const { controlId, validationState } = this.props;
-
-    return {
-      $bs_formGroup: {
-        controlId,
-        validationState
-      }
-    };
-  }
-
   hasFeedback(children) {
     return ValidComponentChildren.some(
       children,
@@ -57,15 +43,18 @@ class FormGroup extends React.Component {
     }
 
     return (
-      <div {...elementProps} className={classNames(className, classes)}>
-        {children}
-      </div>
+      <FormGroupContext.Provider
+        value={{ controlId: this.props.controlId, validationState }}
+      >
+        <div {...elementProps} className={classNames(className, classes)}>
+          {children}
+        </div>
+      </FormGroupContext.Provider>
     );
   }
 }
 
 FormGroup.propTypes = propTypes;
-FormGroup.childContextTypes = childContextTypes;
 
 export default bsClass(
   'form-group',

src/FormGroupContext.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+const FormGroupContext = React.createContext(undefined);
+FormGroupContext.displayName = 'FormGroupContext';
+
+export default FormGroupContext;

src/Modal.js

@@ -12,6 +12,7 @@ import elementType from 'prop-types-extra/lib/elementType';
 
 import Fade from './Fade';
 import Body from './ModalBody';
+import ModalContext from './ModalContext';
 import ModalDialog from './ModalDialog';
 import Footer from './ModalFooter';
 import Header from './ModalHeader';
@@ -128,12 +129,6 @@ const defaultProps = {
   dialogComponentClass: ModalDialog
 };
 
-const childContextTypes = {
-  $bs_modal: PropTypes.shape({
-    onHide: PropTypes.func
-  })
-};
-
 /* eslint-disable no-use-before-define, react/no-multi-comp */
 function DialogTransition(props) {
   return <Fade {...props} timeout={Modal.TRANSITION_DURATION} />;
@@ -160,14 +155,6 @@ class Modal extends React.Component {
     };
   }
 
-  getChildContext() {
-    return {
-      $bs_modal: {
-        onHide: this.props.onHide
-      }
-    };
-  }
-
   componentWillUnmount() {
     // Clean up the listener if we need to.
     this.handleExited();
@@ -257,39 +244,40 @@ class Modal extends React.Component {
     const inClassName = show && !animation && 'in';
 
     return (
-      <BaseModal
-        {...baseModalProps}
-        ref={this.setModalRef}
-        show={show}
-        containerClassName={prefix(props, 'open')}
-        transition={animation ? DialogTransition : undefined}
-        backdrop={backdrop}
-        backdropTransition={animation ? BackdropTransition : undefined}
-        backdropClassName={classNames(
-          prefix(props, 'backdrop'),
-          backdropClassName,
-          inClassName
-        )}
-        onEntering={createChainedFunction(onEntering, this.handleEntering)}
-        onExited={createChainedFunction(onExited, this.handleExited)}
-      >
-        <Dialog
-          {...dialogProps}
-          style={{ ...this.state.style, ...style }}
-          className={classNames(className, inClassName)}
-          onClick={backdrop === true ? this.handleDialogClick : null}
-          handleDialogMouseDown={this.handleDialogMouseDown}
+      <ModalContext.Provider value={{ onHide: this.props.onHide }}>
+        <BaseModal
+          {...baseModalProps}
+          ref={this.setModalRef}
+          show={show}
+          containerClassName={prefix(props, 'open')}
+          transition={animation ? DialogTransition : undefined}
+          backdrop={backdrop}
+          backdropTransition={animation ? BackdropTransition : undefined}
+          backdropClassName={classNames(
+            prefix(props, 'backdrop'),
+            backdropClassName,
+            inClassName
+          )}
+          onEntering={createChainedFunction(onEntering, this.handleEntering)}
+          onExited={createChainedFunction(onExited, this.handleExited)}
         >
-          {children}
-        </Dialog>
-      </BaseModal>
+          <Dialog
+            {...dialogProps}
+            style={{ ...this.state.style, ...style }}
+            className={classNames(className, inClassName)}
+            onClick={backdrop === true ? this.handleDialogClick : null}
+            handleDialogMouseDown={this.handleDialogMouseDown}
+          >
+            {children}
+          </Dialog>
+        </BaseModal>
+      </ModalContext.Provider>
     );
   }
 }
 
 Modal.propTypes = propTypes;
 Modal.defaultProps = defaultProps;
-Modal.childContextTypes = childContextTypes;
 
 Modal.Body = Body;
 Modal.Header = Header;

src/ModalContext.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+const ModalContext = React.createContext(undefined);
+ModalContext.displayName = 'ModalContext';
+
+export default ModalContext;

src/ModalHeader.js

@@ -5,6 +5,7 @@ import React from 'react';
 import { bsClass, getClassSet, splitBsProps } from './utils/bootstrapUtils';
 import createChainedFunction from './utils/createChainedFunction';
 import CloseButton from './CloseButton';
+import ModalContext from './ModalContext';
 
 // TODO: `aria-label` should be `closeLabel`.
 
@@ -34,12 +35,6 @@ const defaultProps = {
   closeButton: false
 };
 
-const contextTypes = {
-  $bs_modal: PropTypes.shape({
-    onHide: PropTypes.func
-  })
-};
-
 class ModalHeader extends React.Component {
   render() {
     const {
@@ -51,7 +46,7 @@ class ModalHeader extends React.Component {
       ...props
     } = this.props;
 
-    const modal = this.context.$bs_modal;
+    const modal = this.context;
 
     const [bsProps, elementProps] = splitBsProps(props);
 
@@ -74,6 +69,6 @@ class ModalHeader extends React.Component {
 
 ModalHeader.propTypes = propTypes;
 ModalHeader.defaultProps = defaultProps;
-ModalHeader.contextTypes = contextTypes;
+ModalHeader.contextType = ModalContext;
 
 export default bsClass('modal-header', ModalHeader);