From d284f405c85ac5f2b3d4075d2b2954aebc865924 Mon Sep 17 00:00:00 2001 From: David Pordomingo Date: Tue, 11 Feb 2020 12:31:15 +0100 Subject: [PATCH] Update MenuPlacer context usage to the new context API This solves #3916, and partially addresses #3703. From React 16.3 the old Context API was deprecated and it's rising warnings when runng in strict-mode. --- packages/react-select/src/components/Menu.js | 23 +++++++++----------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/packages/react-select/src/components/Menu.js b/packages/react-select/src/components/Menu.js index 2777297ef4..fcdbaaf336 100644 --- a/packages/react-select/src/components/Menu.js +++ b/packages/react-select/src/components/Menu.js @@ -1,6 +1,7 @@ // @flow /** @jsx jsx */ import { + createContext, Component, type Element as ReactElement, type ElementRef, @@ -8,7 +9,6 @@ import { } from 'react'; import { jsx } from '@emotion/core'; import { createPortal } from 'react-dom'; -import PropTypes from 'prop-types'; import { animatedScrollTo, @@ -258,15 +258,16 @@ export const menuCSS = ({ zIndex: 1, }); +const PortalPlacementContext = createContext<() => void>(() => { }); + // NOTE: internal only export class MenuPlacer extends Component { state = { maxHeight: this.props.maxMenuHeight, placement: null, }; - static contextTypes = { - getPortalPlacement: PropTypes.func, - }; + static contextType = PortalPlacementContext; + getPlacement = (ref: ElementRef<*>) => { const { minMenuHeight, @@ -481,14 +482,6 @@ export const menuPortalCSS = ({ rect, offset, position }: PortalStyleArgs) => ({ export class MenuPortal extends Component { state = { placement: null }; - static childContextTypes = { - getPortalPlacement: PropTypes.func, - }; - getChildContext() { - return { - getPortalPlacement: this.getPortalPlacement, - }; - } // callback for occassions where the menu must "flip" getPortalPlacement = ({ placement }: MenuState) => { @@ -526,6 +519,10 @@ export class MenuPortal extends Component {
{children}
); - return appendTo ? createPortal(menuWrapper, appendTo) : menuWrapper; + return ( + + {appendTo ? createPortal(menuWrapper, appendTo) : menuWrapper} + + ); } }