From ee2a579d1a21f96c280e19b5cc1f14344ba5e315 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Mon, 23 Jun 2025 11:30:33 -0500 Subject: [PATCH] Cleanup and remove provider --- src/App.web.tsx | 9 +++---- src/components/Tooltip/const.ts | 6 +++-- src/components/Tooltip/index.tsx | 38 +++++++++++++--------------- src/components/Tooltip/index.web.tsx | 29 ++++++++++----------- 4 files changed, 38 insertions(+), 44 deletions(-) diff --git a/src/App.web.tsx b/src/App.web.tsx index ec57e1a406..b706774fdc 100644 --- a/src/App.web.tsx +++ b/src/App.web.tsx @@ -60,7 +60,6 @@ import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialo import {Provider as PortalProvider} from '#/components/Portal' import {Provider as ActiveVideoProvider} from '#/components/Post/Embed/VideoEmbed/ActiveVideoWebContext' import {Provider as VideoVolumeProvider} from '#/components/Post/Embed/VideoEmbed/VideoVolumeContext' -import {Provider as TooltipProvider} from '#/components/Tooltip' import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider' import {Provider as HideBottomBarBorderProvider} from './lib/hooks/useHideBottomBarBorder' @@ -195,11 +194,9 @@ function App() { - - - - - + + + diff --git a/src/components/Tooltip/const.ts b/src/components/Tooltip/const.ts index 75e2603052..8f51a3e067 100644 --- a/src/components/Tooltip/const.ts +++ b/src/components/Tooltip/const.ts @@ -1,4 +1,6 @@ import {atoms as a} from '#/alf' -export const TIP_SIZE = 12 -export const MIN_X_SPACE = a.px_lg.paddingLeft +export const ARROW_SIZE = 12 +export const ARROW_HALF_SIZE = ARROW_SIZE / 2 +export const ARROW_VISUAL_OFFSET = ARROW_SIZE / 3 +export const MIN_EDGE_SPACE = a.px_lg.paddingLeft diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx index 95329ab4a8..6d054d0faa 100644 --- a/src/components/Tooltip/index.tsx +++ b/src/components/Tooltip/index.tsx @@ -14,19 +14,14 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context' import {atoms as a, select, useTheme} from '#/alf' import {useOnGesture} from '#/components/hooks/useOnGesture' import {Portal} from '#/components/Portal' -import {MIN_EDGE_SPACE, TIP_SIZE} from '#/components/Tooltip/const' +import { + ARROW_HALF_SIZE, + ARROW_SIZE, + ARROW_VISUAL_OFFSET, + MIN_EDGE_SPACE, +} from '#/components/Tooltip/const' import {Text} from '#/components/Typography' -const HALF_TIP = TIP_SIZE / 2 -const TIP_VISUAL_OFFSET = TIP_SIZE / 3 - -/** - * Only needed on web - */ -export function Provider({children}: {children: React.ReactNode}) { - return children -} - type TooltipContextType = { position: 'top' | 'bottom' ready: boolean @@ -221,7 +216,7 @@ function Bubble({ minLeft, targetMeasurements.x + targetMeasurements.width / 2 - cw / 2, ) - const tipTranslate = HALF_TIP * -1 + const tipTranslate = ARROW_HALF_SIZE * -1 let tipTop = tipTranslate if (left + cw > maxLeft) { @@ -229,7 +224,10 @@ function Bubble({ } let tipLeft = - targetMeasurements.x - left + targetMeasurements.width / 2 - HALF_TIP + targetMeasurements.x - + left + + targetMeasurements.width / 2 - + ARROW_HALF_SIZE let bottom = top + ch @@ -259,11 +257,11 @@ function Bubble({ } if (computedPosition === 'bottom') { - top += TIP_VISUAL_OFFSET - bottom += TIP_VISUAL_OFFSET + top += ARROW_VISUAL_OFFSET + bottom += ARROW_VISUAL_OFFSET } else { - top -= TIP_VISUAL_OFFSET - bottom -= TIP_VISUAL_OFFSET + top -= ARROW_VISUAL_OFFSET + bottom -= ARROW_VISUAL_OFFSET } return { @@ -337,8 +335,8 @@ function Bubble({ { borderTopLeftRadius: a.rounded_2xs.borderRadius, borderBottomRightRadius: a.rounded_2xs.borderRadius, - width: TIP_SIZE, - height: TIP_SIZE, + width: ARROW_SIZE, + height: ARROW_SIZE, transform: [{rotate: '45deg'}], top: coords.tipTop, left: coords.tipLeft, @@ -362,7 +360,7 @@ function Bubble({ width: 0, // provide more shadow beneath tip height: - TIP_VISUAL_OFFSET * + ARROW_VISUAL_OFFSET * (coords.computedPosition === 'bottom' ? -1 : 1), }, }, diff --git a/src/components/Tooltip/index.web.tsx b/src/components/Tooltip/index.web.tsx index 4ed1585bf2..ef52affb97 100644 --- a/src/components/Tooltip/index.web.tsx +++ b/src/components/Tooltip/index.web.tsx @@ -4,11 +4,13 @@ import {Popover} from 'radix-ui' import {atoms as a, flatten, select, useTheme} from '#/alf' import {transparentifyColor} from '#/alf/util/colorGeneration' -import {MIN_EDGE_SPACE, TIP_SIZE} from '#/components/Tooltip/const' +import { + ARROW_SIZE, + ARROW_VISUAL_OFFSET, + MIN_EDGE_SPACE, +} from '#/components/Tooltip/const' import {Text} from '#/components/Typography' -const TIP_VISUAL_OFFSET = TIP_SIZE / 3 - type TooltipContextType = { position: 'top' | 'bottom' } @@ -17,10 +19,6 @@ const TooltipContext = createContext({ position: 'bottom', }) -export function Provider({children}: {children: React.ReactNode}) { - return children -} - export function Outer({ children, position = 'bottom', @@ -43,10 +41,9 @@ export function Outer({ export function Target({ children, }: { - children: (props: object) => React.ReactNode + children: (props: {ref: undefined}) => React.ReactNode }) { - const child = useMemo(() => children({}), [children]) - return {child} + return {children({ref: undefined})} } export function Content({ @@ -64,7 +61,7 @@ export function Content({ className="radix-popover-content" aria-label={label} side={position} - sideOffset={(TIP_SIZE / 3) * -1} + sideOffset={(ARROW_SIZE / 3) * -1} collisionPadding={MIN_EDGE_SPACE} style={flatten([ a.rounded_sm, @@ -76,15 +73,15 @@ export function Content({ { minWidth: 'max-content', boxShadow: select(t.name, { - light: `0 ${TIP_VISUAL_OFFSET}px 16px ${transparentifyColor( + light: `0 ${ARROW_VISUAL_OFFSET}px 16px ${transparentifyColor( t.palette.black, 0.2, )}`, - dark: `0 ${TIP_VISUAL_OFFSET}px 16px ${transparentifyColor( + dark: `0 ${ARROW_VISUAL_OFFSET}px 16px ${transparentifyColor( t.palette.black, 0.2, )}`, - dim: `0 ${TIP_VISUAL_OFFSET}px 16px ${transparentifyColor( + dim: `0 ${ARROW_VISUAL_OFFSET}px 16px ${transparentifyColor( t.palette.black, 0.2, )}`, @@ -92,8 +89,8 @@ export function Content({ }, ])}>