Skip to content

Commit

Permalink
Fix flow types (#18204)
Browse files Browse the repository at this point in the history
* Added missing @flow pragma to React.js

* Fixed useContext() return type definition

* Fixed previously masked Flow errors in DevTools and react-interactions packages

* Added displayName to internal Context Flow type

* Removed Flow generic annotations for createResponder

This seems to cause a parsing error. (Not sure why.) The API is deprecated anyway so I'm being lazy for now and just adding a .
  • Loading branch information
Brian Vaughn authored Mar 3, 2020
1 parent 8e6a08e commit d2158d6
Show file tree
Hide file tree
Showing 29 changed files with 150 additions and 95 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import {RegistryContext} from './Contexts';

import styles from './ContextMenu.css';

import type {RegistryContextType} from './Contexts';

function respositionToFit(element: HTMLElement, pageX: number, pageY: number) {
const ownerWindow = element.ownerDocument.defaultView;
if (element !== null) {
Expand Down Expand Up @@ -52,7 +54,7 @@ type Props = {|
|};

export default function ContextMenu({children, id}: Props) {
const {registerMenu} = useContext(RegistryContext);
const {registerMenu} = useContext<RegistryContextType>(RegistryContext);

const [state, setState] = useState(HIDDEN_STATE);

Expand All @@ -61,12 +63,15 @@ export default function ContextMenu({children, id}: Props) {
const menuRef = useRef(null);

useEffect(() => {
const ownerDocument = bodyAccessorRef.current.ownerDocument;
containerRef.current = ownerDocument.createElement('div');
ownerDocument.body.appendChild(containerRef.current);
return () => {
ownerDocument.body.removeChild(containerRef.current);
};
const element = bodyAccessorRef.current;
if (element !== null) {
const ownerDocument = element.ownerDocument;
containerRef.current = ownerDocument.createElement('div');
ownerDocument.body.appendChild(containerRef.current);
return () => {
ownerDocument.body.removeChild(containerRef.current);
};
}
}, []);

useEffect(() => {
Expand All @@ -82,45 +87,52 @@ export default function ContextMenu({children, id}: Props) {
return;
}

const menu = menuRef.current;
const menu = ((menuRef.current: any): HTMLElement);
const container = containerRef.current;
if (container !== null) {
const hideUnlessContains = event => {
if (!menu.contains(event.target)) {
setState(HIDDEN_STATE);
}
};

const hideUnlessContains = event => {
if (!menu.contains(event.target)) {
const hide = event => {
setState(HIDDEN_STATE);
}
};
};

const hide = event => {
setState(HIDDEN_STATE);
};
const ownerDocument = container.ownerDocument;
ownerDocument.addEventListener('mousedown', hideUnlessContains);
ownerDocument.addEventListener('touchstart', hideUnlessContains);
ownerDocument.addEventListener('keydown', hideUnlessContains);

const ownerDocument = containerRef.current.ownerDocument;
ownerDocument.addEventListener('mousedown', hideUnlessContains);
ownerDocument.addEventListener('touchstart', hideUnlessContains);
ownerDocument.addEventListener('keydown', hideUnlessContains);
const ownerWindow = ownerDocument.defaultView;
ownerWindow.addEventListener('resize', hide);

const ownerWindow = ownerDocument.defaultView;
ownerWindow.addEventListener('resize', hide);
respositionToFit(menu, state.pageX, state.pageY);

respositionToFit(menu, state.pageX, state.pageY);
return () => {
ownerDocument.removeEventListener('mousedown', hideUnlessContains);
ownerDocument.removeEventListener('touchstart', hideUnlessContains);
ownerDocument.removeEventListener('keydown', hideUnlessContains);

return () => {
ownerDocument.removeEventListener('mousedown', hideUnlessContains);
ownerDocument.removeEventListener('touchstart', hideUnlessContains);
ownerDocument.removeEventListener('keydown', hideUnlessContains);

ownerWindow.removeEventListener('resize', hide);
};
ownerWindow.removeEventListener('resize', hide);
};
}
}, [state]);

if (!state.isVisible) {
return <div ref={bodyAccessorRef} />;
} else {
return createPortal(
<div ref={menuRef} className={styles.ContextMenu}>
{children(state.data)}
</div>,
containerRef.current,
);
const container = containerRef.current;
if (container !== null) {
return createPortal(
<div ref={menuRef} className={styles.ContextMenu}>
{children(state.data)}
</div>,
container,
);
} else {
return null;
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,16 @@ import {RegistryContext} from './Contexts';

import styles from './ContextMenuItem.css';

import type {RegistryContextType} from './Contexts';

type Props = {|
children: React$Node,
onClick: () => void,
title: string,
|};

export default function ContextMenuItem({children, onClick, title}: Props) {
const {hideMenu} = useContext(RegistryContext);
const {hideMenu} = useContext<RegistryContextType>(RegistryContext);

const handleClick = event => {
onClick();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,18 @@ function registerMenu(id: string, showFn: ShowFn, hideFn: HideFn) {
};
}

export const RegistryContext = createContext({
export type RegistryContextType = {|
hideMenu: () => void,
showMenu: ({|
data: Object,
id: string,
pageX: number,
pageY: number,
|}) => void,
registerMenu: (string, ShowFn, HideFn) => Function,
|};

export const RegistryContext = createContext<RegistryContextType>({
hideMenu,
showMenu,
registerMenu,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
import {useContext, useEffect} from 'react';
import {RegistryContext} from './Contexts';

import type {RegistryContextType} from './Contexts';
import type {ElementRef} from 'react';

export default function useContextMenu({
Expand All @@ -21,7 +22,7 @@ export default function useContextMenu({
id: string,
ref: {current: ElementRef<'div'> | null},
|}) {
const {showMenu} = useContext(RegistryContext);
const {showMenu} = useContext<RegistryContextType>(RegistryContext);

useEffect(() => {
if (ref.current !== null) {
Expand All @@ -30,11 +31,11 @@ export default function useContextMenu({
event.stopPropagation();

const pageX =
event.pageX ||
(event.touches && ((event: any): TouchEvent).touches[0].pageX);
(event: any).pageX ||
(event.touches && (event: any).touches[0].pageX);
const pageY =
event.pageY ||
(event.touches && ((event: any): TouchEvent).touches[0].pageY);
(event: any).pageY ||
(event.touches && (event: any).touches[0].pageY);

showMenu({data, id, pageX, pageY});
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,30 @@ import {NativeStyleContextController} from './NativeStyleEditor/context';

import styles from './Components.css';

type Orientation = 'horizontal' | 'vertical';

type ResizeActionType =
| 'ACTION_SET_DID_MOUNT'
| 'ACTION_SET_IS_RESIZING'
| 'ACTION_SET_HORIZONTAL_PERCENTAGE'
| 'ACTION_SET_VERTICAL_PERCENTAGE';

type ResizeAction = {|
type: ResizeActionType,
payload: any,
|};

type ResizeState = {|
horizontalPercentage: number,
isResizing: boolean,
verticalPercentage: number,
|};

function Components(_: {||}) {
const wrapperElementRef = useRef<HTMLElement>(null);
const resizeElementRef = useRef<HTMLElement>(null);
const wrapperElementRef = useRef<null | HTMLElement>(null);
const resizeElementRef = useRef<null | HTMLElement>(null);

const [state, dispatch] = useReducer<ResizeState, ResizeAction>(
const [state, dispatch] = useReducer<ResizeState, any, ResizeAction>(
resizeReducer,
null,
initResizeState,
Expand Down Expand Up @@ -171,25 +190,6 @@ const LOCAL_STORAGE_KEY = 'React::DevTools::createResizeReducer';
const VERTICAL_MODE_MAX_WIDTH = 600;
const MINIMUM_SIZE = 50;

type Orientation = 'horizontal' | 'vertical';

type ResizeActionType =
| 'ACTION_SET_DID_MOUNT'
| 'ACTION_SET_IS_RESIZING'
| 'ACTION_SET_HORIZONTAL_PERCENTAGE'
| 'ACTION_SET_VERTICAL_PERCENTAGE';

type ResizeAction = {|
type: ResizeActionType,
payload: any,
|};

type ResizeState = {|
horizontalPercentage: number,
isResizing: boolean,
verticalPercentage: number,
|};

function initResizeState(): ResizeState {
let horizontalPercentage = 0.65;
let verticalPercentage = 0.5;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {useCallback, useState} from 'react';
import AutoSizeInput from './NativeStyleEditor/AutoSizeInput';
import styles from './EditableName.css';

type OverrideNameFn = (path: Array<string | number>, value: any) => void;
type OverrideNameFn = (name: string, value: any) => void;

type EditableNameProps = {|
autoFocus?: boolean,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,7 @@ function HookView({canEditHooks, hook, id, inspectPath, path}: HookViewProps) {
} else {
let overrideValueFn = null;
// TODO Maybe read editable value from debug hook?
if (canEditHooks && isStateEditable) {
if (canEditHooks && isStateEditable && hookID !== null) {
overrideValueFn = (
absolutePath: Array<string | number>,
newValue: any,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,14 +51,16 @@ export type GetInspectedElement = (
id: number,
) => InspectedElementFrontend | null;

type Context = {|
export type InspectedElementContextType = {|
copyInspectedElementPath: CopyInspectedElementPath,
getInspectedElementPath: GetInspectedElementPath,
getInspectedElement: GetInspectedElement,
storeAsGlobal: StoreAsGlobal,
|};

const InspectedElementContext = createContext<Context>(((null: any): Context));
const InspectedElementContext = createContext<InspectedElementContextType>(
((null: any): InspectedElementContextType),
);
InspectedElementContext.displayName = 'InspectedElementContext';

type ResolveFn = (inspectedElement: InspectedElementFrontend) => void;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,9 @@ import {
} from 'react-devtools-shared/src/devtools/views/context';
import {TreeStateContext} from '../TreeContext';

import type {StateContext} from '../TreeContext';
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
import type Store from 'react-devtools-shared/src/devtools/store';
import type {StyleAndLayout as StyleAndLayoutBackend} from 'react-devtools-shared/src/backend/NativeStyleEditor/types';
import type {StyleAndLayout as StyleAndLayoutFrontend} from './types';
import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types';
Expand Down Expand Up @@ -77,8 +80,8 @@ type Props = {|
|};

function NativeStyleContextController({children}: Props) {
const bridge = useContext(BridgeContext);
const store = useContext(StoreContext);
const bridge = useContext<FrontendBridge>(BridgeContext);
const store = useContext<Store>(StoreContext);

const getStyleAndLayout = useCallback<GetStyleAndLayout>(
(id: number) => {
Expand All @@ -95,7 +98,7 @@ function NativeStyleContextController({children}: Props) {
// It's very important that this context consumes selectedElementID and not NativeStyleID.
// Otherwise the effect that sends the "inspect" message across the bridge-
// would itself be blocked by the same render that suspends (waiting for the data).
const {selectedElementID} = useContext(TreeStateContext);
const {selectedElementID} = useContext<StateContext>(TreeStateContext);

const [
currentStyleAndLayout,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export default function OwnerStack() {
const {ownerID} = useContext(TreeStateContext);
const treeDispatch = useContext(TreeDispatcherContext);

const [state, dispatch] = useReducer<State, Action>(dialogReducer, {
const [state, dispatch] = useReducer<State, State, Action>(dialogReducer, {
ownerID: null,
owners: [],
selectedIndex: 0,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,11 @@ import {

import styles from './SelectedElement.css';

import type {ContextMenuContextType} from '../context';
import type {
CopyInspectedElementPath,
GetInspectedElementPath,
InspectedElementContextType,
StoreAsGlobal,
} from './InspectedElementContext';
import type {Element, InspectedElement} from './types';
Expand All @@ -62,8 +64,7 @@ export default function SelectedElement(_: Props) {
getInspectedElementPath,
getInspectedElement,
storeAsGlobal,
viewInspectedElementPath,
} = useContext(InspectedElementContext);
} = useContext<InspectedElementContextType>(InspectedElementContext);

const element =
inspectedElementID !== null
Expand Down Expand Up @@ -244,7 +245,6 @@ export default function SelectedElement(_: Props) {
getInspectedElementPath={getInspectedElementPath}
inspectedElement={inspectedElement}
storeAsGlobal={storeAsGlobal}
viewInspectedElementPath={viewInspectedElementPath}
/>
)}
</div>
Expand All @@ -270,7 +270,6 @@ function InspectedElementView({
getInspectedElementPath,
inspectedElement,
storeAsGlobal,
viewInspectedElementPath,
}: InspectedElementViewProps) {
const {id, type} = element;
const {
Expand All @@ -293,7 +292,7 @@ function InspectedElementView({
const {
isEnabledForInspectedElement,
viewAttributeSourceFunction,
} = useContext(ContextMenuContext);
} = useContext<ContextMenuContextType>(ContextMenuContext);

const inspectContextPath = useCallback(
(path: Array<string | number>) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ type Props = {|
|};

function ModalDialogContextController({children}: Props) {
const [state, dispatch] = useReducer<State, Action>(dialogReducer, {
const [state, dispatch] = useReducer<State, State, Action>(dialogReducer, {
canBeDismissed: true,
content: null,
isVisible: false,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,9 @@ type Props = {|
|};

function CommitFlamegraph({chartData, commitTree, height, width}: Props) {
const [hoveredFiberData, hoverFiber] = useState<number | null>(null);
const [hoveredFiberData, hoverFiber] = useState<TooltipFiberData | null>(
null,
);
const {lineHeight} = useContext(SettingsContext);
const {selectFiber, selectedFiberID} = useContext(ProfilerContext);

Expand Down
Loading

0 comments on commit d2158d6

Please sign in to comment.