diff --git a/native/navigation/route-names.js b/native/navigation/route-names.js --- a/native/navigation/route-names.js +++ b/native/navigation/route-names.js @@ -53,6 +53,7 @@ import type { CommunityRolesScreenParams } from '../roles/community-roles-screen.react.js'; import type { CreateRolesScreenParams } from '../roles/create-roles-screen.react.js'; import type { MessageSearchParams } from '../search/message-search.react.js'; +import type { NUXTipsOverlayParams } from '../tooltip/nux-tips-overlay.react.js'; import type { UserProfileAvatarModalParams } from '../user-profile/user-profile-avatar-modal.react.js'; import type { UserProfileBottomSheetParams } from '../user-profile/user-profile-bottom-sheet.react.js'; @@ -166,6 +167,7 @@ export const TagFarcasterChannelByNameRouteName = 'TagFarcasterChannelByName'; export const ThreadSettingsNotificationsRouteName = 'ThreadSettingsNotifications'; +export const NUXTipsOverlayRouteName = 'NUXTipsOverlay'; export type RootParamList = { +LoggedOutModal: void, @@ -222,6 +224,7 @@ +ThreadAvatarCameraModal: ThreadAvatarCameraModalParams, +VideoPlaybackModal: VideoPlaybackModalParams, +TogglePinModal: TogglePinModalParams, + +NUXTipsOverlay: NUXTipsOverlayParams, ...TooltipModalParamList, }; diff --git a/native/tooltip/nux-tips-overlay.react.js b/native/tooltip/nux-tips-overlay.react.js --- a/native/tooltip/nux-tips-overlay.react.js +++ b/native/tooltip/nux-tips-overlay.react.js @@ -1,6 +1,5 @@ // @flow -import type { RouteProp } from '@react-navigation/core'; import invariant from 'invariant'; import * as React from 'react'; import { View, TouchableWithoutFeedback, Platform } from 'react-native'; @@ -11,7 +10,7 @@ OverlayContext, type OverlayContextType, } from '../navigation/overlay-context.js'; -import type { TooltipModalParamList } from '../navigation/route-names.js'; +import type { NavigationRoute } from '../navigation/route-names.js'; import { type DimensionsInfo } from '../redux/dimensions-updater.react.js'; import { useSelector } from '../redux/redux-utils.js'; import { useStyles } from '../themes/colors.js'; @@ -67,63 +66,51 @@ }, }; -export type TooltipParams = { - ...CustomProps, +export type NUXTipsOverlayParams = { +initialCoordinates: LayoutCoordinates, +verticalBounds: VerticalBounds, }; -export type TooltipRoute> = RouteProp< - TooltipModalParamList, - RouteName, ->; - -export type BaseTooltipProps = { - +navigation: AppNavigationProp, - +route: TooltipRoute, + +export type BaseNUXTipsOverlayProps = { + +navigation: AppNavigationProp<'NUXTipsOverlay'>, + +route: NavigationRoute<'NUXTipsOverlay'>, }; type ButtonProps = { ...Base, +progress: Node, }; -type TooltipProps = { +type NUXTipsOverlayProps = { ...Base, // Redux state +dimensions: DimensionsInfo, +overlayContext: ?OverlayContextType, +styles: $ReadOnly, - +closeTooltip: () => mixed, -}; - -export type TooltipMenuProps = { - ...BaseTooltipProps, + +closeTip: () => mixed, }; -function createTooltip< - RouteName: $Keys, - BaseTooltipPropsType: BaseTooltipProps = BaseTooltipProps, ->( - ButtonComponent: React.ComponentType>, - MenuComponent: React.ComponentType>, -): React.ComponentType { - class Tooltip extends React.PureComponent< - TooltipProps, +function createNUXTipsOverlay( + ButtonComponent: React.ComponentType>, + MenuComponent: React.ComponentType, +): React.ComponentType { + class NUXTipsOverlay extends React.PureComponent< + NUXTipsOverlayProps, > { backdropOpacity: Node; - tooltipContainerOpacity: Node; - tooltipVerticalAbove: Node; - tooltipVerticalBelow: Node; - tooltipHorizontalOffset: Value = new Value(0); - tooltipHorizontal: Node; - tooltipScale: Node; - fixedTooltipVertical: Node; - tooltipHeight: number = 30; + tipContainerOpacity: Node; + tipVerticalAbove: Node; + tipVerticalBelow: Node; + tipHorizontalOffset: Value = new Value(0); + tipHorizontal: Node; + tipScale: Node; + fixedTipVertical: Node; + tipHeight: number = 30; margin: number = 20; - constructor(props: TooltipProps) { + constructor(props: NUXTipsOverlayProps) { super(props); const { overlayContext } = props; - invariant(overlayContext, 'Tooltip should have OverlayContext'); + invariant(overlayContext, 'NUXTipsOverlay should have OverlayContext'); const { position } = overlayContext; this.backdropOpacity = interpolateNode(position, { @@ -131,38 +118,35 @@ outputRange: [0, 0.7], extrapolate: Extrapolate.CLAMP, }); - this.tooltipContainerOpacity = interpolateNode(position, { + this.tipContainerOpacity = interpolateNode(position, { inputRange: [0, 0.1], outputRange: [0, 1], extrapolate: Extrapolate.CLAMP, }); const { margin } = this; - this.tooltipVerticalAbove = interpolateNode(position, { + this.tipVerticalAbove = interpolateNode(position, { inputRange: [0, 1], - outputRange: [margin + this.tooltipHeight / 2, 0], + outputRange: [margin + this.tipHeight / 2, 0], extrapolate: Extrapolate.CLAMP, }); - this.tooltipVerticalBelow = interpolateNode(position, { + this.tipVerticalBelow = interpolateNode(position, { inputRange: [0, 1], - outputRange: [-margin - this.tooltipHeight / 2, 0], + outputRange: [-margin - this.tipHeight / 2, 0], extrapolate: Extrapolate.CLAMP, }); const invertedPosition = add(1, multiply(-1, position)); - this.tooltipHorizontal = multiply( - invertedPosition, - this.tooltipHorizontalOffset, - ); + this.tipHorizontal = multiply(invertedPosition, this.tipHorizontalOffset); - this.tooltipScale = interpolateNode(position, { + this.tipScale = interpolateNode(position, { inputRange: [0, 0.2, 0.8, 1], outputRange: [0, 0, 1, 1], extrapolate: Extrapolate.CLAMP, }); - this.fixedTooltipVertical = multiply( + this.fixedTipVertical = multiply( invertedPosition, props.dimensions.height, ); @@ -200,7 +184,7 @@ }; } - get tooltipContainerStyle(): AnimatedViewStyle { + get tipContainerStyle(): AnimatedViewStyle { const { dimensions, route } = this.props; const { initialCoordinates, verticalBounds } = route.params; const { x, y, width, height } = initialCoordinates; @@ -209,11 +193,11 @@ const style: WritableAnimatedStyleObj = {}; style.position = 'absolute'; style.alignItems = 'center'; - style.opacity = this.tooltipContainerOpacity; + style.opacity = this.tipContainerOpacity; const transform: Array = []; - transform.push({ translateX: this.tooltipHorizontal }); + transform.push({ translateX: this.tipHorizontal }); const extraLeftSpace = x; const extraRightSpace = dimensions.width - width - x; @@ -227,8 +211,8 @@ style.top = Math.min(y + height, verticalBounds.y + verticalBounds.height) + margin; - transform.push({ translateY: this.tooltipVerticalBelow }); - transform.push({ scale: this.tooltipScale }); + transform.push({ translateY: this.tipVerticalBelow }); + transform.push({ scale: this.tipScale }); style.transform = transform; return style; @@ -239,7 +223,7 @@ dimensions, overlayContext, styles, - closeTooltip, + closeTip, ...navAndRouteForFlow } = this.props; @@ -263,20 +247,20 @@ const triangleUp = ; - invariant(overlayContext, 'Tooltip should have OverlayContext'); + invariant(overlayContext, 'NUXTipsOverlay should have OverlayContext'); const { position } = overlayContext; - const buttonProps: ButtonProps = { + const buttonProps: ButtonProps = { ...navAndRouteForFlow, progress: position, }; - let tooltip = null; + let tip = null; - tooltip = ( + tip = ( {triangleUp} @@ -286,7 +270,7 @@ ); return ( - + @@ -294,13 +278,13 @@ - {tooltip} + {tip} ); } - onTooltipContainerLayout = (event: LayoutEvent) => { + onTipContainerLayout = (event: LayoutEvent) => { const { route, dimensions } = this.props; const { x, width } = route.params.initialCoordinates; @@ -310,19 +294,15 @@ const actualWidth = event.nativeEvent.layout.width; if (extraLeftSpace < extraRightSpace) { const minWidth = width + 2 * extraLeftSpace; - this.tooltipHorizontalOffset.setValue((minWidth - actualWidth) / 2); + this.tipHorizontalOffset.setValue((minWidth - actualWidth) / 2); } else { const minWidth = width + 2 * extraRightSpace; - this.tooltipHorizontalOffset.setValue((actualWidth - minWidth) / 2); + this.tipHorizontalOffset.setValue((actualWidth - minWidth) / 2); } }; } - function ConnectedTooltip( - props: $ReadOnly<{ - ...BaseTooltipPropsType, - }>, - ) { + function ConnectedNUXTipsOverlay(props: BaseNUXTipsOverlayProps) { const dimensions = useSelector(state => state.dimensions); const overlayContext = React.useContext(OverlayContext); @@ -331,19 +311,16 @@ const styles = useStyles(unboundStyles); return ( - ); } - function MemoizedTooltip(props: BaseTooltipPropsType) { - return ; - } - return React.memo(MemoizedTooltip); + return React.memo(ConnectedNUXTipsOverlay); } -export { createTooltip }; +export { createNUXTipsOverlay };