Changeset View
Changeset View
Standalone View
Standalone View
web/tooltips/tooltip-action-utils.js
| // @flow | // @flow | ||||
| import invariant from 'invariant'; | import invariant from 'invariant'; | ||||
| import * as React from 'react'; | import * as React from 'react'; | ||||
| import { useModalContext } from 'lib/components/modal-provider.react.js'; | import { useModalContext } from 'lib/components/modal-provider.react.js'; | ||||
| import { useENSNames } from 'lib/hooks/ens-cache.js'; | |||||
| import { useResettingState } from 'lib/hooks/use-resetting-state.js'; | import { useResettingState } from 'lib/hooks/use-resetting-state.js'; | ||||
| import type { | import type { | ||||
| ChatMessageInfoItem, | ChatMessageInfoItem, | ||||
| ReactionInfo, | ReactionInfo, | ||||
| } from 'lib/selectors/chat-selectors.js'; | } from 'lib/selectors/chat-selectors.js'; | ||||
| import { useCanEditMessage } from 'lib/shared/edit-messages-utils.js'; | import { useCanEditMessage } from 'lib/shared/edit-messages-utils.js'; | ||||
| import { createMessageReply } from 'lib/shared/message-utils.js'; | import { createMessageReply } from 'lib/shared/message-utils.js'; | ||||
| import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils.js'; | import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils.js'; | ||||
| ▲ Show 20 Lines • Show All 419 Lines • ▼ Show 20 Lines | function useMessageTooltip({ | ||||
| }); | }); | ||||
| return { | return { | ||||
| onMouseEnter, | onMouseEnter, | ||||
| onMouseLeave, | onMouseLeave, | ||||
| }; | }; | ||||
| } | } | ||||
| const useENSNamesOptions = { allAtOnce: true }; | |||||
| type UseReactionTooltipArgs = { | type UseReactionTooltipArgs = { | ||||
| +reaction: string, | +reaction: string, | ||||
| +reactions: ReactionInfo, | +reactions: ReactionInfo, | ||||
| +availablePositions: $ReadOnlyArray<TooltipPosition>, | +availablePositions: $ReadOnlyArray<TooltipPosition>, | ||||
| }; | }; | ||||
| function useReactionTooltip({ | function useReactionTooltip({ | ||||
| reaction, | reaction, | ||||
| reactions, | reactions, | ||||
| availablePositions, | availablePositions, | ||||
| }: UseReactionTooltipArgs): UseTooltipResult { | }: UseReactionTooltipArgs): UseTooltipResult { | ||||
| const { users } = reactions[reaction]; | const { users } = reactions[reaction]; | ||||
| const resolvedUsers = useENSNames(users, useENSNamesOptions); | |||||
| const tooltipSize = React.useMemo(() => { | const tooltipSize = React.useMemo(() => { | ||||
| if (typeof document === 'undefined') { | if (typeof document === 'undefined') { | ||||
| return undefinedTooltipSize; | return undefinedTooltipSize; | ||||
| } | } | ||||
| const usernames = users.map(user => user.username).filter(Boolean); | const usernames = resolvedUsers.map(user => user.username).filter(Boolean); | ||||
| return calculateReactionTooltipSize(usernames); | return calculateReactionTooltipSize(usernames); | ||||
| }, [users]); | }, [resolvedUsers]); | ||||
| const createReactionTooltip = React.useCallback( | const createReactionTooltip = React.useCallback( | ||||
| () => <ReactionTooltip reactions={reactions} reaction={reaction} />, | () => <ReactionTooltip reactions={reactions} reaction={reaction} />, | ||||
| [reaction, reactions], | [reaction, reactions], | ||||
| ); | ); | ||||
| const { onMouseEnter, onMouseLeave } = useTooltip({ | const { onMouseEnter, onMouseLeave } = useTooltip({ | ||||
| createTooltip: createReactionTooltip, | createTooltip: createReactionTooltip, | ||||
| ▲ Show 20 Lines • Show All 64 Lines • Show Last 20 Lines | |||||