7e50c0466a
Summary: This diff moves all UI code from app/src to app/flipper-ui-core. That is now slightly too much (e.g. node deps are not removed yet), but from here it should be easier to move things out again, as I don't want this diff to be open for too long to avoid too much merge conflicts. * But at least flipper-ui-core is Electron free :) * Killed all cross module imports as well, as they where now even more in the way * Some unit test needed some changes, most not too big (but emotion hashes got renumbered in the snapshots, feel free to ignore that) * Found some files that were actually meaningless (tsconfig in plugins, WatchTools files, that start generating compile errors, removed those Follow up work: * make flipper-ui-core configurable, and wire up flipper-server-core in Electron instead of here * remove node deps (aigoncharov) * figure out correct place to load GKs, plugins, make intern requests etc., and move to the correct module * clean up deps Reviewed By: aigoncharov Differential Revision: D32427722 fbshipit-source-id: 14fe92e1ceb15b9dcf7bece367c8ab92df927a70
68 lines
1.6 KiB
TypeScript
68 lines
1.6 KiB
TypeScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
*/
|
|
|
|
import {TooltipOptions, TooltipContext} from './TooltipProvider';
|
|
import styled from '@emotion/styled';
|
|
import React, {useContext, useCallback, useRef, useEffect} from 'react';
|
|
|
|
const TooltipContainer = styled.div({
|
|
display: 'contents',
|
|
});
|
|
TooltipContainer.displayName = 'Tooltip:TooltipContainer';
|
|
|
|
type TooltipProps = {
|
|
/** Content shown in the tooltip */
|
|
title: React.ReactNode;
|
|
/** Component that will show the tooltip */
|
|
children: React.ReactNode;
|
|
options?: TooltipOptions;
|
|
};
|
|
|
|
/**
|
|
* @deprecated use Tooltip from 'tantd'
|
|
*/
|
|
export default function Tooltip(props: TooltipProps) {
|
|
const tooltipManager = useContext(TooltipContext);
|
|
const ref = useRef<HTMLDivElement | null>();
|
|
const isOpen = useRef<boolean>(false);
|
|
const {title, options} = props;
|
|
|
|
useEffect(
|
|
() => () => {
|
|
if (isOpen.current) {
|
|
tooltipManager.close();
|
|
}
|
|
},
|
|
[title, options],
|
|
);
|
|
|
|
const onMouseEnter = useCallback(() => {
|
|
if (ref.current && title) {
|
|
tooltipManager.open(ref.current, title, options || {});
|
|
isOpen.current = true;
|
|
}
|
|
}, [options, title, isOpen, ref]);
|
|
|
|
const onMouseLeave = useCallback(() => {
|
|
if (isOpen.current) {
|
|
tooltipManager.close();
|
|
isOpen.current = false;
|
|
}
|
|
}, [isOpen]);
|
|
|
|
return (
|
|
<TooltipContainer
|
|
ref={ref as any}
|
|
onMouseEnter={onMouseEnter}
|
|
onMouseLeave={onMouseLeave}>
|
|
{props.children}
|
|
</TooltipContainer>
|
|
);
|
|
}
|