Differential D6634 Diff 23358 web/chat/tooltip-provider.js

Changeset View

Standalone View

web/chat/tooltip-provider.js

Show All 20 Lines	export type RenderTooltipResult = {
+onMouseLeaveCallback: () => mixed,		+onMouseLeaveCallback: () => mixed,
+clearTooltip: () => mixed,		+clearTooltip: () => mixed,
+updateTooltip: React.Node => mixed,		+updateTooltip: React.Node => mixed,
};		};

type TooltipContextType = {		type TooltipContextType = {
+renderTooltip: (params: RenderTooltipParams) => RenderTooltipResult,		+renderTooltip: (params: RenderTooltipParams) => RenderTooltipResult,
+clearTooltip: () => mixed,		+clearTooltip: () => mixed,
+renderEmojiKeyboard: boolean,		+shouldRenderEmojiKeyboard: boolean,
+setRenderEmojiKeyboard: SetState<boolean>,		+setShouldRenderEmojiKeyboard: SetState<boolean>,
};		};

const TooltipContext: React.Context<TooltipContextType> =		const TooltipContext: React.Context<TooltipContextType> =
React.createContext<TooltipContextType>({		React.createContext<TooltipContextType>({
renderTooltip: () => ({		renderTooltip: () => ({
onMouseLeaveCallback: () => {},		onMouseLeaveCallback: () => {},
clearTooltip: () => {},		clearTooltip: () => {},
updateTooltip: () => {},		updateTooltip: () => {},
}),		}),
clearTooltip: () => {},		clearTooltip: () => {},
renderEmojiKeyboard: false,		shouldRenderEmojiKeyboard: false,
setRenderEmojiKeyboard: () => {},		setShouldRenderEmojiKeyboard: () => {},
});		});

type Props = {		type Props = {
+children: React.Node,		+children: React.Node,
};		};
function TooltipProvider(props: Props): React.Node {		function TooltipProvider(props: Props): React.Node {
const { children } = props;		const { children } = props;
const tooltipSymbol = React.useRef<?symbol>(null);		const tooltipSymbol = React.useRef<?symbol>(null);
const tooltipCancelTimer = React.useRef<?TimeoutID>(null);		const tooltipCancelTimer = React.useRef<?TimeoutID>(null);

const [tooltipNode, setTooltipNode] = React.useState<React.Node>(null);		const [tooltipNode, setTooltipNode] = React.useState<React.Node>(null);
const [tooltipPosition, setTooltipPosition] =		const [tooltipPosition, setTooltipPosition] =
React.useState<?TooltipPositionStyle>(null);		React.useState<?TooltipPositionStyle>(null);
const [renderEmojiKeyboard, setRenderEmojiKeyboard] =		const [shouldRenderEmojiKeyboard, setShouldRenderEmojiKeyboard] =
React.useState<boolean>(false);		React.useState<boolean>(false);

const clearTooltip = React.useCallback((tooltipToClose: symbol) => {		const clearTooltip = React.useCallback((tooltipToClose: symbol) => {
if (tooltipSymbol.current !== tooltipToClose) {		if (tooltipSymbol.current !== tooltipToClose) {
return;		return;
}		}
tooltipCancelTimer.current = null;		tooltipCancelTimer.current = null;
setTooltipNode(null);		setTooltipNode(null);
setTooltipPosition(null);		setTooltipPosition(null);
setRenderEmojiKeyboard(false);		setShouldRenderEmojiKeyboard(false);
tooltipSymbol.current = null;		tooltipSymbol.current = null;
}, []);		}, []);

const clearCurrentTooltip = React.useCallback(() => {		const clearCurrentTooltip = React.useCallback(() => {
if (tooltipSymbol.current) {		if (tooltipSymbol.current) {
clearTooltip(tooltipSymbol.current);		clearTooltip(tooltipSymbol.current);
}		}
}, [clearTooltip]);		}, [clearTooltip]);
▲ Show 20 Lines • Show All 76 Lines • ▼ Show 20 Lines	return (
</div>		</div>
);		);
}, [onMouseEnterTooltip, onMouseLeaveTooltip, tooltipNode, tooltipPosition]);		}, [onMouseEnterTooltip, onMouseLeaveTooltip, tooltipNode, tooltipPosition]);

const value = React.useMemo(		const value = React.useMemo(
() => ({		() => ({
renderTooltip,		renderTooltip,
clearTooltip: clearCurrentTooltip,		clearTooltip: clearCurrentTooltip,
renderEmojiKeyboard,		shouldRenderEmojiKeyboard,
setRenderEmojiKeyboard,		setShouldRenderEmojiKeyboard,
}),		}),
[renderTooltip, clearCurrentTooltip, renderEmojiKeyboard],		[renderTooltip, clearCurrentTooltip, shouldRenderEmojiKeyboard],
);		);

return (		return (
<TooltipContext.Provider value={value}>		<TooltipContext.Provider value={value}>
{children}		{children}
{tooltip}		{tooltip}
</TooltipContext.Provider>		</TooltipContext.Provider>
);		);
Show All 10 Lines