Page MenuHomePhabricator
Files F3348828

D8859.id30053.diff
No OneTemporary
Actions

D8859.id30053.diff
View Options

diff --git a/web/chat/reaction-pill.react.js b/web/chat/reaction-pill.react.js
--- a/web/chat/reaction-pill.react.js
+++ b/web/chat/reaction-pill.react.js
@@ -10,6 +10,13 @@
import { useSendReaction } from './reaction-message-utils.js';
import css from './reaction-pill.css';
+import { useReactionTooltip } from '../utils/tooltip-action-utils.js';
+import { tooltipPositions } from '../utils/tooltip-utils.js';
+
+const availableReactionTooltipPositions = [
+ tooltipPositions.TOP,
+ tooltipPositions.BOTTOM,
+];
type Props = {
+reaction: string,
@@ -37,6 +44,12 @@
[reaction, sendReaction],
);
+ const { onMouseEnter, onMouseLeave } = useReactionTooltip({
+ reaction,
+ reactions,
+ availablePositions: availableReactionTooltipPositions,
+ });
+
const reactionInfo = reactions[reaction];
const numOfReacts = reactionInfo.users.length;
@@ -46,7 +59,13 @@
});
return (
- <a onClick={onClickReaction} className={reactionClassName} key={reaction}>
+ <a
+ onClick={onClickReaction}
+ onMouseEnter={onMouseEnter}
+ onMouseLeave={onMouseLeave}
+ className={reactionClassName}
+ key={reaction}
+ >
{`${reaction} ${numOfReacts}`}
</a>
);
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
@@ -5,7 +5,10 @@
import { useModalContext } from 'lib/components/modal-provider.react.js';
import { useResettingState } from 'lib/hooks/use-resetting-state.js';
-import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
+import type {
+ ReactionInfo,
+ ChatMessageInfoItem,
+} from 'lib/selectors/chat-selectors.js';
import { useCanEditMessage } from 'lib/shared/edit-messages-utils.js';
import { createMessageReply } from 'lib/shared/message-utils.js';
import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils.js';
@@ -23,6 +26,7 @@
type MessageTooltipAction,
getTooltipPositionStyle,
calculateMessageTooltipSize,
+ calculateReactionTooltipSize,
type TooltipPosition,
type TooltipPositionStyle,
type TooltipSize,
@@ -30,6 +34,7 @@
import { getComposedMessageID } from '../chat/chat-constants.js';
import { useEditModalContext } from '../chat/edit-message-provider.js';
import MessageTooltip from '../chat/message-tooltip.react.js';
+import ReactionTooltip from '../chat/reaction-tooltip.react.js';
import { useTooltipContext } from '../chat/tooltip-provider.js';
import CommIcon from '../CommIcon.react.js';
import { InputStateContext } from '../input/input-state.js';
@@ -449,10 +454,58 @@
};
}
+type UseReactionTooltipArgs = {
+ +reaction: string,
+ +reactions: ReactionInfo,
+ +availablePositions: $ReadOnlyArray<TooltipPosition>,
+};
+
+function useReactionTooltip({
+ reaction,
+ reactions,
+ availablePositions,
+}: UseReactionTooltipArgs): UseTooltipResult {
+ const users = reactions[reaction].users;
+
+ const tooltipSize = React.useMemo(() => {
+ if (typeof document === 'undefined') {
+ return {
+ width: 0,
+ height: 0,
+ };
+ }
+
+ const usernames = users.map(user => user.username).filter(Boolean);
+ const { width, height } = calculateReactionTooltipSize(usernames);
+
+ return {
+ width,
+ height,
+ };
+ }, [users]);
+
+ const createReactionTooltip = React.useCallback(
+ () => <ReactionTooltip reactions={reactions} reaction={reaction} />,
+ [reaction, reactions],
+ );
+
+ const { onMouseEnter, onMouseLeave } = useTooltip({
+ createTooltip: createReactionTooltip,
+ tooltipSize,
+ availablePositions,
+ });
+
+ return {
+ onMouseEnter,
+ onMouseLeave,
+ };
+}
+
export {
useMessageTooltipSidebarAction,
useMessageTooltipReplyAction,
useMessageReactAction,
useMessageTooltipActions,
useMessageTooltip,
+ useReactionTooltip,
};

File Metadata

Mime Type
text/plain
Expires
Sat, Nov 23, 4:09 PM (19 h, 52 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2571496
Default Alt Text
D8859.id30053.diff (3 KB)

Event Timeline