Page MenuHomePhabricator
Files F3385972

D8829.diff
No OneTemporary
Actions

D8829.diff
View Options

diff --git a/web/utils/tooltip-action-utils.js b/web/utils/tooltip-action-utils.js
--- a/web/utils/tooltip-action-utils.js
+++ b/web/utils/tooltip-action-utils.js
@@ -24,6 +24,8 @@
getTooltipPositionStyle,
calculateTooltipSize,
type TooltipPosition,
+ type TooltipPositionStyle,
+ type TooltipSize,
} from './tooltip-utils.js';
import { getComposedMessageID } from '../chat/chat-constants.js';
import { useEditModalContext } from '../chat/edit-message-provider.js';
@@ -37,6 +39,101 @@
useOnClickThread,
} from '../selectors/thread-selectors.js';
+type UseTooltipArgs = {
+ +createTooltip: (tooltipPositionStyle: TooltipPositionStyle) => React.Node,
+ +tooltipSize: TooltipSize,
+ +availablePositions: $ReadOnlyArray<TooltipPosition>,
+ +preventDisplayingBelowSource?: boolean,
+};
+type UseTooltipResult = {
+ +onMouseEnter: (event: SyntheticEvent<HTMLElement>) => mixed,
+ +onMouseLeave: ?() => mixed,
+};
+
+function useTooltip({
+ createTooltip,
+ tooltipSize,
+ availablePositions,
+ preventDisplayingBelowSource,
+}: UseTooltipArgs): UseTooltipResult {
+ const [onMouseLeave, setOnMouseLeave] = React.useState<?() => mixed>(null);
+ const [tooltipSourcePosition, setTooltipSourcePosition] = React.useState();
+
+ const { renderTooltip } = useTooltipContext();
+ const updateTooltip = React.useRef();
+
+ const onMouseEnter = React.useCallback(
+ (event: SyntheticEvent<HTMLElement>) => {
+ if (!renderTooltip) {
+ return;
+ }
+ const rect = event.currentTarget.getBoundingClientRect();
+ const { top, bottom, left, right, height, width } = rect;
+ const sourcePosition = { top, bottom, left, right, height, width };
+ setTooltipSourcePosition(sourcePosition);
+
+ const tooltipPositionStyle = getTooltipPositionStyle({
+ tooltipSourcePosition: sourcePosition,
+ tooltipSize,
+ availablePositions,
+ preventDisplayingBelowSource,
+ });
+ if (!tooltipPositionStyle) {
+ return;
+ }
+
+ const tooltip = createTooltip(tooltipPositionStyle);
+
+ const renderTooltipResult = renderTooltip({
+ newNode: tooltip,
+ tooltipPositionStyle,
+ });
+ if (renderTooltipResult) {
+ const { onMouseLeaveCallback: callback } = renderTooltipResult;
+ setOnMouseLeave((() => callback: () => () => mixed));
+ updateTooltip.current = renderTooltipResult.updateTooltip;
+ }
+ },
+ [
+ availablePositions,
+ createTooltip,
+ preventDisplayingBelowSource,
+ renderTooltip,
+ tooltipSize,
+ ],
+ );
+
+ React.useEffect(() => {
+ if (!updateTooltip.current) {
+ return;
+ }
+
+ const tooltipPositionStyle = getTooltipPositionStyle({
+ tooltipSourcePosition,
+ tooltipSize,
+ availablePositions,
+ preventDisplayingBelowSource,
+ });
+ if (!tooltipPositionStyle) {
+ return;
+ }
+
+ const tooltip = createTooltip(tooltipPositionStyle);
+ updateTooltip.current?.(tooltip);
+ }, [
+ availablePositions,
+ createTooltip,
+ preventDisplayingBelowSource,
+ tooltipSize,
+ tooltipSourcePosition,
+ ]);
+
+ return {
+ onMouseEnter,
+ onMouseLeave,
+ };
+}
+
function useMessageTooltipSidebarAction(
item: ChatMessageInfoItem,
threadInfo: ThreadInfo,
@@ -297,19 +394,11 @@
+threadInfo: ThreadInfo,
};
-type UseMessageTooltipResult = {
- onMouseEnter: (event: SyntheticEvent<HTMLElement>) => void,
- onMouseLeave: ?() => mixed,
-};
-
function useMessageTooltip({
availablePositions,
item,
threadInfo,
-}: UseMessageTooltipArgs): UseMessageTooltipResult {
- const [onMouseLeave, setOnMouseLeave] = React.useState<?() => mixed>(null);
-
- const { renderTooltip } = useTooltipContext();
+}: UseMessageTooltipArgs): UseTooltipResult {
const tooltipActions = useMessageTooltipActions(item, threadInfo);
const containsInlineEngagement = !!item.threadCreatedFromMessage;
@@ -333,78 +422,8 @@
});
}, [messageTimestamp, tooltipActions]);
- const updateTooltip = React.useRef();
- const [tooltipMessagePosition, setTooltipMessagePosition] = React.useState();
-
- const onMouseEnter = React.useCallback(
- (event: SyntheticEvent<HTMLElement>) => {
- if (!renderTooltip) {
- return;
- }
- const rect = event.currentTarget.getBoundingClientRect();
- const { top, bottom, left, right, height, width } = rect;
- const messagePosition = { top, bottom, left, right, height, width };
- setTooltipMessagePosition(messagePosition);
-
- const tooltipPositionStyle = getTooltipPositionStyle({
- tooltipSourcePosition: messagePosition,
- tooltipSize,
- availablePositions,
- preventDisplayingBelowSource: containsInlineEngagement,
- });
-
- if (!tooltipPositionStyle) {
- return;
- }
-
- const tooltip = (
- <MessageTooltip
- actions={tooltipActions}
- messageTimestamp={messageTimestamp}
- tooltipPositionStyle={tooltipPositionStyle}
- tooltipSize={tooltipSize}
- item={item}
- threadInfo={threadInfo}
- />
- );
- const renderTooltipResult = renderTooltip({
- newNode: tooltip,
- tooltipPositionStyle,
- });
- if (renderTooltipResult) {
- const { onMouseLeaveCallback: callback } = renderTooltipResult;
- setOnMouseLeave((() => callback: () => () => mixed));
- updateTooltip.current = renderTooltipResult.updateTooltip;
- }
- },
- [
- availablePositions,
- containsInlineEngagement,
- item,
- messageTimestamp,
- renderTooltip,
- threadInfo,
- tooltipActions,
- tooltipSize,
- ],
- );
-
- React.useEffect(() => {
- if (!updateTooltip.current) {
- return;
- }
-
- const tooltipPositionStyle = getTooltipPositionStyle({
- tooltipSourcePosition: tooltipMessagePosition,
- tooltipSize,
- availablePositions,
- preventDisplayingBelowSource: containsInlineEngagement,
- });
- if (!tooltipPositionStyle) {
- return;
- }
-
- const tooltip = (
+ const createMessageTooltip = React.useCallback(
+ tooltipPositionStyle => (
<MessageTooltip
actions={tooltipActions}
messageTimestamp={messageTimestamp}
@@ -413,19 +432,16 @@
item={item}
threadInfo={threadInfo}
/>
- );
+ ),
+ [item, messageTimestamp, threadInfo, tooltipActions, tooltipSize],
+ );
- updateTooltip.current?.(tooltip);
- }, [
- availablePositions,
- containsInlineEngagement,
- item,
- messageTimestamp,
- threadInfo,
- tooltipActions,
- tooltipMessagePosition,
+ const { onMouseEnter, onMouseLeave } = useTooltip({
+ createTooltip: createMessageTooltip,
tooltipSize,
- ]);
+ availablePositions,
+ preventDisplayingBelowSource: containsInlineEngagement,
+ });
return {
onMouseEnter,

File Metadata

Mime Type
text/plain
Expires
Sat, Nov 30, 2:58 AM (21 h, 13 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2599203
Default Alt Text
D8829.diff (6 KB)

Event Timeline