Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix flow types #18204

Merged
merged 5 commits into from
Mar 3, 2020
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flow v97 doesn't go very deep here I guess. 🤷‍♂️


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