mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Cleanup and remove provider

Eric Bailey ee2a579d 4bea63fa

+38 -44
+3 -6
src/App.web.tsx
··· 60 60 import {Provider as PortalProvider} from '#/components/Portal' 61 61 import {Provider as ActiveVideoProvider} from '#/components/Post/Embed/VideoEmbed/ActiveVideoWebContext' 62 62 import {Provider as VideoVolumeProvider} from '#/components/Post/Embed/VideoEmbed/VideoVolumeContext' 63 - import {Provider as TooltipProvider} from '#/components/Tooltip' 64 63 import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider' 65 64 import {Provider as HideBottomBarBorderProvider} from './lib/hooks/useHideBottomBarBorder' 66 65 ··· 195 194 <DialogStateProvider> 196 195 <LightboxStateProvider> 197 196 <PortalProvider> 198 - <TooltipProvider> 199 - <StarterPackProvider> 200 - <InnerApp /> 201 - </StarterPackProvider> 202 - </TooltipProvider> 197 + <StarterPackProvider> 198 + <InnerApp /> 199 + </StarterPackProvider> 203 200 </PortalProvider> 204 201 </LightboxStateProvider> 205 202 </DialogStateProvider>
+4 -2
src/components/Tooltip/const.ts
··· 1 1 import {atoms as a} from '#/alf' 2 2 3 - export const TIP_SIZE = 12 4 - export const MIN_X_SPACE = a.px_lg.paddingLeft 3 + export const ARROW_SIZE = 12 4 + export const ARROW_HALF_SIZE = ARROW_SIZE / 2 5 + export const ARROW_VISUAL_OFFSET = ARROW_SIZE / 3 6 + export const MIN_EDGE_SPACE = a.px_lg.paddingLeft
+18 -20
src/components/Tooltip/index.tsx
··· 14 14 import {atoms as a, select, useTheme} from '#/alf' 15 15 import {useOnGesture} from '#/components/hooks/useOnGesture' 16 16 import {Portal} from '#/components/Portal' 17 - import {MIN_EDGE_SPACE, TIP_SIZE} from '#/components/Tooltip/const' 17 + import { 18 + ARROW_HALF_SIZE, 19 + ARROW_SIZE, 20 + ARROW_VISUAL_OFFSET, 21 + MIN_EDGE_SPACE, 22 + } from '#/components/Tooltip/const' 18 23 import {Text} from '#/components/Typography' 19 - 20 - const HALF_TIP = TIP_SIZE / 2 21 - const TIP_VISUAL_OFFSET = TIP_SIZE / 3 22 - 23 - /** 24 - * Only needed on web 25 - */ 26 - export function Provider({children}: {children: React.ReactNode}) { 27 - return children 28 - } 29 24 30 25 type TooltipContextType = { 31 26 position: 'top' | 'bottom' ··· 221 216 minLeft, 222 217 targetMeasurements.x + targetMeasurements.width / 2 - cw / 2, 223 218 ) 224 - const tipTranslate = HALF_TIP * -1 219 + const tipTranslate = ARROW_HALF_SIZE * -1 225 220 let tipTop = tipTranslate 226 221 227 222 if (left + cw > maxLeft) { ··· 229 224 } 230 225 231 226 let tipLeft = 232 - targetMeasurements.x - left + targetMeasurements.width / 2 - HALF_TIP 227 + targetMeasurements.x - 228 + left + 229 + targetMeasurements.width / 2 - 230 + ARROW_HALF_SIZE 233 231 234 232 let bottom = top + ch 235 233 ··· 259 257 } 260 258 261 259 if (computedPosition === 'bottom') { 262 - top += TIP_VISUAL_OFFSET 263 - bottom += TIP_VISUAL_OFFSET 260 + top += ARROW_VISUAL_OFFSET 261 + bottom += ARROW_VISUAL_OFFSET 264 262 } else { 265 - top -= TIP_VISUAL_OFFSET 266 - bottom -= TIP_VISUAL_OFFSET 263 + top -= ARROW_VISUAL_OFFSET 264 + bottom -= ARROW_VISUAL_OFFSET 267 265 } 268 266 269 267 return { ··· 337 335 { 338 336 borderTopLeftRadius: a.rounded_2xs.borderRadius, 339 337 borderBottomRightRadius: a.rounded_2xs.borderRadius, 340 - width: TIP_SIZE, 341 - height: TIP_SIZE, 338 + width: ARROW_SIZE, 339 + height: ARROW_SIZE, 342 340 transform: [{rotate: '45deg'}], 343 341 top: coords.tipTop, 344 342 left: coords.tipLeft, ··· 362 360 width: 0, 363 361 // provide more shadow beneath tip 364 362 height: 365 - TIP_VISUAL_OFFSET * 363 + ARROW_VISUAL_OFFSET * 366 364 (coords.computedPosition === 'bottom' ? -1 : 1), 367 365 }, 368 366 },
+13 -16
src/components/Tooltip/index.web.tsx
··· 4 4 5 5 import {atoms as a, flatten, select, useTheme} from '#/alf' 6 6 import {transparentifyColor} from '#/alf/util/colorGeneration' 7 - import {MIN_EDGE_SPACE, TIP_SIZE} from '#/components/Tooltip/const' 7 + import { 8 + ARROW_SIZE, 9 + ARROW_VISUAL_OFFSET, 10 + MIN_EDGE_SPACE, 11 + } from '#/components/Tooltip/const' 8 12 import {Text} from '#/components/Typography' 9 - 10 - const TIP_VISUAL_OFFSET = TIP_SIZE / 3 11 13 12 14 type TooltipContextType = { 13 15 position: 'top' | 'bottom' ··· 16 18 const TooltipContext = createContext<TooltipContextType>({ 17 19 position: 'bottom', 18 20 }) 19 - 20 - export function Provider({children}: {children: React.ReactNode}) { 21 - return children 22 - } 23 21 24 22 export function Outer({ 25 23 children, ··· 43 41 export function Target({ 44 42 children, 45 43 }: { 46 - children: (props: object) => React.ReactNode 44 + children: (props: {ref: undefined}) => React.ReactNode 47 45 }) { 48 - const child = useMemo(() => children({}), [children]) 49 - return <Popover.Trigger asChild>{child}</Popover.Trigger> 46 + return <Popover.Trigger asChild>{children({ref: undefined})}</Popover.Trigger> 50 47 } 51 48 52 49 export function Content({ ··· 64 61 className="radix-popover-content" 65 62 aria-label={label} 66 63 side={position} 67 - sideOffset={(TIP_SIZE / 3) * -1} 64 + sideOffset={(ARROW_SIZE / 3) * -1} 68 65 collisionPadding={MIN_EDGE_SPACE} 69 66 style={flatten([ 70 67 a.rounded_sm, ··· 76 73 { 77 74 minWidth: 'max-content', 78 75 boxShadow: select(t.name, { 79 - light: `0 ${TIP_VISUAL_OFFSET}px 16px ${transparentifyColor( 76 + light: `0 ${ARROW_VISUAL_OFFSET}px 16px ${transparentifyColor( 80 77 t.palette.black, 81 78 0.2, 82 79 )}`, 83 - dark: `0 ${TIP_VISUAL_OFFSET}px 16px ${transparentifyColor( 80 + dark: `0 ${ARROW_VISUAL_OFFSET}px 16px ${transparentifyColor( 84 81 t.palette.black, 85 82 0.2, 86 83 )}`, 87 - dim: `0 ${TIP_VISUAL_OFFSET}px 16px ${transparentifyColor( 84 + dim: `0 ${ARROW_VISUAL_OFFSET}px 16px ${transparentifyColor( 88 85 t.palette.black, 89 86 0.2, 90 87 )}`, ··· 92 89 }, 93 90 ])}> 94 91 <Popover.Arrow 95 - width={TIP_SIZE} 96 - height={TIP_SIZE / 2} 92 + width={ARROW_SIZE} 93 + height={ARROW_SIZE / 2} 97 94 fill={select(t.name, { 98 95 light: t.atoms.bg.backgroundColor, 99 96 dark: t.atoms.bg_contrast_100.backgroundColor,