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> = {
- ...CustomProps,
+export type NUXTipsOverlayParams = {
+initialCoordinates: LayoutCoordinates,
+verticalBounds: VerticalBounds,
};
-export type TooltipRoute<RouteName: $Keys<TooltipModalParamList>> = RouteProp<
- TooltipModalParamList,
- RouteName,
->;
-
-export type BaseTooltipProps<RouteName> = {
- +navigation: AppNavigationProp<RouteName>,
- +route: TooltipRoute<RouteName>,
+
+export type BaseNUXTipsOverlayProps = {
+ +navigation: AppNavigationProp<'NUXTipsOverlay'>,
+ +route: NavigationRoute<'NUXTipsOverlay'>,
};
type ButtonProps<Base> = {
...Base,
+progress: Node,
};
-type TooltipProps<Base> = {
+type NUXTipsOverlayProps<Base> = {
...Base,
// Redux state
+dimensions: DimensionsInfo,
+overlayContext: ?OverlayContextType,
+styles: $ReadOnly<typeof unboundStyles>,
- +closeTooltip: () => mixed,
-};
-
-export type TooltipMenuProps<RouteName> = {
- ...BaseTooltipProps<RouteName>,
+ +closeTip: () => mixed,
};
-function createTooltip<
- RouteName: $Keys<TooltipModalParamList>,
- BaseTooltipPropsType: BaseTooltipProps<RouteName> = BaseTooltipProps<RouteName>,
->(
- ButtonComponent: React.ComponentType<ButtonProps<BaseTooltipPropsType>>,
- MenuComponent: React.ComponentType<TooltipMenuProps<RouteName>>,
-): React.ComponentType<BaseTooltipPropsType> {
- class Tooltip extends React.PureComponent<
- TooltipProps<BaseTooltipPropsType>,
+function createNUXTipsOverlay(
+ ButtonComponent: React.ComponentType<ButtonProps<BaseNUXTipsOverlayProps>>,
+ MenuComponent: React.ComponentType<BaseNUXTipsOverlayProps>,
+): React.ComponentType<BaseNUXTipsOverlayProps> {
+ class NUXTipsOverlay extends React.PureComponent<
+ NUXTipsOverlayProps<BaseNUXTipsOverlayProps>,
> {
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<BaseTooltipPropsType>) {
+ constructor(props: NUXTipsOverlayProps<BaseNUXTipsOverlayProps>) {
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<ReanimatedTransform> = [];
- 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 = <View style={[styles.triangleUp, triangleStyle]} />;
- invariant(overlayContext, 'Tooltip should have OverlayContext');
+ invariant(overlayContext, 'NUXTipsOverlay should have OverlayContext');
const { position } = overlayContext;
- const buttonProps: ButtonProps<BaseTooltipPropsType> = {
+ const buttonProps: ButtonProps<BaseNUXTipsOverlayProps> = {
...navAndRouteForFlow,
progress: position,
};
- let tooltip = null;
+ let tip = null;
- tooltip = (
+ tip = (
<AnimatedView
- style={this.tooltipContainerStyle}
- onLayout={this.onTooltipContainerLayout}
+ style={this.tipContainerStyle}
+ onLayout={this.onTipContainerLayout}
>
{triangleUp}
<View style={styles.items}>
@@ -286,7 +270,7 @@
);
return (
- <TouchableWithoutFeedback onPress={this.props.closeTooltip}>
+ <TouchableWithoutFeedback onPress={this.props.closeTip}>
<View style={styles.container}>
<AnimatedView style={this.opacityStyle} />
<View style={this.contentContainerStyle}>
@@ -294,13 +278,13 @@
<ButtonComponent {...buttonProps} />
</View>
</View>
- {tooltip}
+ {tip}
</View>
</TouchableWithoutFeedback>
);
}
- 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 (
- <Tooltip
+ <NUXTipsOverlay
{...props}
dimensions={dimensions}
overlayContext={overlayContext}
styles={styles}
- closeTooltip={goBackOnce}
+ closeTip={goBackOnce}
/>
);
}
- function MemoizedTooltip(props: BaseTooltipPropsType) {
- return <ConnectedTooltip {...props} />;
- }
- return React.memo<BaseTooltipPropsType>(MemoizedTooltip);
+ return React.memo<BaseNUXTipsOverlayProps>(ConnectedNUXTipsOverlay);
}
-export { createTooltip };
+export { createNUXTipsOverlay };