mirror of
https://github.com/hanzoai/react.git
synced 2026-09-24 17:02:27 +00:00
Jan KassensandGitHub
94a6f7c627
This Flow upgrade includes 2 fixes: - Remove `React$StatelessFunctionalComponent` as that was replaced by just `React$AbstractComponent` as Flow doesn't make any guarantees, see the Flow change here: https://github.com/facebook/flow/commit/521317c48f44ffb5eac072a7b2548a72b0745095 - Flow no longer allows `number` type indexing into objects which discovered an incorrect type that is actually an array of the data. Used this command to upgrade ``` yarn add -W flow-bin flow-remove-types hermes-parser hermes-eslint ``` and ran `yarn flow-ci` to check for errors in different configurations.
51 lines
1.5 KiB
JavaScript
51 lines
1.5 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow
|
|
*/
|
|
|
|
import * as React from 'react';
|
|
import {useContext} from 'react';
|
|
import {createPortal} from 'react-dom';
|
|
import ErrorBoundary from './ErrorBoundary';
|
|
import {StoreContext} from './context';
|
|
import ThemeProvider from './ThemeProvider';
|
|
|
|
export type Props = {portalContainer?: Element, ...};
|
|
|
|
export default function portaledContent(
|
|
Component: React$AbstractComponent<any>,
|
|
): React$AbstractComponent<any> {
|
|
return function PortaledContent({portalContainer, ...rest}: Props) {
|
|
const store = useContext(StoreContext);
|
|
|
|
let children = (
|
|
<ErrorBoundary store={store}>
|
|
<Component {...rest} />
|
|
</ErrorBoundary>
|
|
);
|
|
|
|
if (portalContainer != null) {
|
|
// The ThemeProvider works by writing DOM style variables to an HTMLDivElement.
|
|
// Because Portals render in a different DOM subtree, these variables don't propagate.
|
|
// So in this case, we need to re-wrap portaled content in a second ThemeProvider.
|
|
children = (
|
|
<ThemeProvider>
|
|
<div
|
|
data-react-devtools-portal-root={true}
|
|
style={{width: '100vw', height: '100vh'}}>
|
|
{children}
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|
|
|
|
return portalContainer != null
|
|
? createPortal(children, portalContainer)
|
|
: children;
|
|
};
|
|
}
|