// @flow		// @flow

import invariant from 'invariant';		import invariant from 'invariant';
import * as React from 'react';		import * as React from 'react';
import { View, TouchableWithoutFeedback, Platform, Text } from 'react-native';		import { View, TouchableWithoutFeedback, Platform, Text } from 'react-native';
import Animated, { withTiming } from 'react-native-reanimated';		import Animated, {
		FadeOut,
		withTiming,
		// eslint-disable-next-line no-unused-vars
		type EntryAnimationsValues,
		// eslint-disable-next-line no-unused-vars
		type ExitAnimationsValues,
		inkaAuthorUnsubmitted Done Inline Actions Those types are used in worklets. We have to import them for flow, but eslint doesn't understand that inka: Those types are used in worklets. We have to import them for flow, but eslint doesn't…
		tomekUnsubmitted Not Done Inline Actions It seems like it can't be fixed on eslint level https://github.com/jsx-eslint/eslint-plugin-react/issues/1714. It needs to be fixed on babel level - I found an issue https://github.com/babel/babel/issues/15061 where someone is using `flowComments` plugin. Maybe we should give it a try. https://linear.app/comm/issue/ENG-9040/check-if-flowcomments-babel-plugin-allows-flow-comment-syntax tomek: It seems like it can't be fixed on eslint level https://github.com/jsx-eslint/eslint-plugin…
		} from 'react-native-reanimated';

import type { AppNavigationProp } from '../navigation/app-navigator.react.js';		import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
import { OverlayContext } from '../navigation/overlay-context.js';		import { OverlayContext } from '../navigation/overlay-context.js';
import type { NavigationRoute } from '../navigation/route-names.js';		import type { NavigationRoute } from '../navigation/route-names.js';
import { useSelector } from '../redux/redux-utils.js';		import { useSelector } from '../redux/redux-utils.js';
import { useStyles } from '../themes/colors.js';		import { useStyles } from '../themes/colors.js';
import type {		import type {
LayoutCoordinates,		LayoutCoordinates,
VerticalBounds,		VerticalBounds,
} from '../types/layout-types.js';		} from '../types/layout-types.js';
import type { LayoutEvent } from '../types/react-native.js';		import type { LayoutEvent } from '../types/react-native.js';
import {		import { AnimatedView } from '../types/styles.js';
AnimatedView,
type WritableAnimatedStyleObj,
type ReanimatedTransform,
} from '../types/styles.js';

const { Value, Extrapolate, add, multiply, interpolateNode } = Animated;		const { Value } = Animated;

const animationDuration = 150;		const animationDuration = 150;

const unboundStyles = {		const unboundStyles = {
backdrop: {		backdrop: {
backgroundColor: 'black',		backgroundColor: 'black',
bottom: 0,		bottom: 0,
left: 0,		left: 0,
Show All 39 Lines	export type NUXTipsOverlayParams = {
+verticalBounds: VerticalBounds,		+verticalBounds: VerticalBounds,
};		};

export type NUXTipsOverlayProps = {		export type NUXTipsOverlayProps = {
+navigation: AppNavigationProp<'NUXTipsOverlay'>,		+navigation: AppNavigationProp<'NUXTipsOverlay'>,
+route: NavigationRoute<'NUXTipsOverlay'>,		+route: NavigationRoute<'NUXTipsOverlay'>,
};		};

const tipHeight: number = 30;
const margin: number = 20;		const margin: number = 20;
		const tipContainerTranslateY = -80;
		inkaAuthorUnsubmitted Done Inline Actions I don't think this value can ba calculated in any way? I think I just have to use something that looks rigth? inka: I don't think this value can ba calculated in any way? I think I just have to use something…
		tomekUnsubmitted Not Done Inline Actions Isn't it related to the height of the tooltip? tomek: Isn't it related to the height of the tooltip?
		inkaAuthorUnsubmitted Done Inline Actions You are right, going to fix this in D13072 where I move this to the component inka: You are right, going to fix this in D13072 where I move this to the component

function opacityEnteringAnimation() {		function opacityEnteringAnimation() {
'worklet';		'worklet';

return {		return {
animations: {		animations: {
opacity: withTiming(0.7, { duration: animationDuration }),		opacity: withTiming(0.7, { duration: animationDuration }),
transform: [{}],		transform: [{}],
Show All 9 Lines	function createNUXTipsOverlay(
getTipText: () => string,		getTipText: () => string,
): React.ComponentType<NUXTipsOverlayProps> {		): React.ComponentType<NUXTipsOverlayProps> {
function NUXTipsOverlay(props: NUXTipsOverlayProps) {		function NUXTipsOverlay(props: NUXTipsOverlayProps) {
const dimensions = useSelector(state => state.dimensions);		const dimensions = useSelector(state => state.dimensions);
const overlayContext = React.useContext(OverlayContext);		const overlayContext = React.useContext(OverlayContext);
invariant(overlayContext, 'NUXTipsOverlay should have OverlayContext');		invariant(overlayContext, 'NUXTipsOverlay should have OverlayContext');
const { animationCallback } = overlayContext;		const { animationCallback } = overlayContext;

const position = React.useMemo(() => new Animated.Value(1), []);

const { navigation, route } = props;		const { navigation, route } = props;

const { goBackOnce } = navigation;		const { goBackOnce } = navigation;

const styles = useStyles(unboundStyles);		const styles = useStyles(unboundStyles);

const contentContainerStyle = React.useMemo(() => {		const contentContainerStyle = React.useMemo(() => {
const { verticalBounds } = route.params;		const { verticalBounds } = route.params;
Show All 37 Lines	const onTipContainerLayout = React.useCallback(
} else {		} else {
const minWidth = width + 2 * extraRightSpace;		const minWidth = width + 2 * extraRightSpace;
tipHorizontalOffset.setValue((actualWidth - minWidth) / 2);		tipHorizontalOffset.setValue((actualWidth - minWidth) / 2);
}		}
},		},
[dimensions.width, initialCoordinates, tipHorizontalOffset],		[dimensions.width, initialCoordinates, tipHorizontalOffset],
);		);

const tipContainerOpacity = React.useMemo(
() =>
interpolateNode(position, {
inputRange: [0, 0.1],
outputRange: [0, 1],
extrapolate: Extrapolate.CLAMP,
}),
[position],
);

const tipVerticalBelow = React.useMemo(
() =>
interpolateNode(position, {
inputRange: [0, 1],
outputRange: [-margin - tipHeight / 2, 0],
extrapolate: Extrapolate.CLAMP,
}),
[position],
);

const tipHorizontal = React.useMemo(() => {
const invertedPosition = add(1, multiply(-1, position));
return multiply(invertedPosition, tipHorizontalOffset);
}, [position, tipHorizontalOffset]);

const tipScale = React.useMemo(
() =>
interpolateNode(position, {
inputRange: [0, 0.2, 0.8, 1],
outputRange: [0, 0, 1, 1],
extrapolate: Extrapolate.CLAMP,
}),
[position],
);

const baseTipContainerStyle = React.useMemo(() => {		const baseTipContainerStyle = React.useMemo(() => {
const { y, x, height, width } = initialCoordinates;		const { y, x, height, width } = initialCoordinates;

const top =		const top =
Math.min(y + height, verticalBounds.y + verticalBounds.height) + margin;		Math.min(y + height, verticalBounds.y + verticalBounds.height) + margin;

const extraLeftSpace = x;		const extraLeftSpace = x;
const extraRightSpace = dimensions.width - width - x;		const extraRightSpace = dimensions.width - width - x;
Show All 16 Lines	const baseTipContainerStyle = React.useMemo(() => {
}		}
}, [		}, [
dimensions.width,		dimensions.width,
initialCoordinates,		initialCoordinates,
verticalBounds.height,		verticalBounds.height,
verticalBounds.y,		verticalBounds.y,
]);		]);

const tipContainerStyle = React.useMemo(() => {
const style: WritableAnimatedStyleObj = {};
style.opacity = tipContainerOpacity;

const transform: Array<ReanimatedTransform> = [];

transform.push({ translateX: tipHorizontal });
transform.push({ translateY: tipVerticalBelow });
transform.push({ scale: tipScale });
style.transform = transform;

return { ...baseTipContainerStyle, ...style };
}, [
baseTipContainerStyle,
tipContainerOpacity,
tipHorizontal,
tipScale,
tipVerticalBelow,
]);

const triangleStyle = React.useMemo(() => {		const triangleStyle = React.useMemo(() => {
const { x, width } = initialCoordinates;		const { x, width } = initialCoordinates;
const extraLeftSpace = x;		const extraLeftSpace = x;
const extraRightSpace = dimensions.width - width - x;		const extraRightSpace = dimensions.width - width - x;
if (extraLeftSpace < extraRightSpace) {		if (extraLeftSpace < extraRightSpace) {
return {		return {
alignSelf: 'flex-start',		alignSelf: 'flex-start',
left: extraLeftSpace + (width - 20) / 2,		left: extraLeftSpace + (width - (20 / 100) * width) / 2,
};		};
} else {		} else {
return {		return {
alignSelf: 'flex-end',		alignSelf: 'flex-end',
right: extraRightSpace + (width - 20) / 2,		right: extraRightSpace + (width - (20 / 100) * width) / 2,
		inkaAuthorUnsubmitted Done Inline Actions For community drawer button which is rather small, the hardcoded `20` made it look awkward. I used 20% instead, but this may be changed later inka: For community drawer button which is rather small, the hardcoded `20` made it look awkward. I…
		tomekUnsubmitted Not Done Inline Actions Please simplify these expressions tomek: Please simplify these expressions
};		};
}		}
}, [dimensions.width, initialCoordinates]);		}, [dimensions.width, initialCoordinates]);

const tipText = getTipText();		const tipText = getTipText();

const opacityExitingAnimation = React.useCallback(() => {		const opacityExitingAnimation = React.useCallback(() => {
'worklet';		'worklet';

return {		return {
animations: {		animations: {
opacity: withTiming(0, { duration: animationDuration }),		opacity: withTiming(0, { duration: animationDuration }),
},		},
initialValues: {		initialValues: {
opacity: 0.7,		opacity: 0.7,
},		},
callback: animationCallback,		callback: animationCallback,
};		};
}, [animationCallback]);		}, [animationCallback]);

		// prettier-ignore
		const tipContainerEnteringAnimation = React.useCallback(
		(values/: EntryAnimationsValues/) => {
		inkaAuthorUnsubmitted Done Inline Actions In worklets we cannot use flow types inka: In worklets we cannot use flow types
		'worklet';

		const initialX =
		(-values.targetWidth +
		initialCoordinates.width +
		initialCoordinates.x) /
		2;
		const initialY = tipContainerTranslateY;

		return {
		animations: {
		opacity: withTiming(1, { duration: animationDuration }),
		transform: [
		{ translateX: withTiming(0, { duration: animationDuration }) },
		{ translateY: withTiming(0, { duration: animationDuration }) },
		{ scale: withTiming(1, { duration: animationDuration }) },
		],
		},
		initialValues: {
		opacity: 0,
		transform: [
		{ translateX: initialX },
		{ translateY: initialY },
		{ scale: 0 },
		],
		},
		};
		},
		[initialCoordinates.width, initialCoordinates.x],
		);

		// prettier-ignore
		const tipContainerExitingAnimation = React.useCallback(
		(values/: ExitAnimationsValues/) => {
		'worklet';

		const toValueX =
		(-values.currentWidth +
		initialCoordinates.width +
		initialCoordinates.x) /
		2;
		const toValueY = tipContainerTranslateY;

		return {
		animations: {
		opacity: withTiming(0, { duration: animationDuration }),
		transform: [
		{
		translateX: withTiming(toValueX, {
		duration: animationDuration,
		}),
		},
		{
		translateY: withTiming(toValueY, {
		duration: animationDuration,
		}),
		},
		{ scale: withTiming(0, { duration: animationDuration }) },
		],
		},
		initialValues: {
		opacity: 1,
		transform: [{ translateX: 0 }, { translateY: 0 }, { scale: 1 }],
		},
		};
		},
		[initialCoordinates.width, initialCoordinates.x],
		);

return (		return (
<TouchableWithoutFeedback onPress={goBackOnce}>		<TouchableWithoutFeedback onPress={goBackOnce}>
<View style={styles.container}>		<View style={styles.container}>
<AnimatedView		<AnimatedView
style={styles.backdrop}		style={styles.backdrop}
// $FlowFixMe		// $FlowFixMe
entering={opacityEnteringAnimation}		entering={opacityEnteringAnimation}
exiting={opacityExitingAnimation}		exiting={opacityExitingAnimation}
/>		/>
<View style={contentContainerStyle}>		<View style={contentContainerStyle}>
<View style={buttonStyle}>		<Animated.View
		style={buttonStyle}
		exiting={FadeOut.duration(animationDuration)}
		>
<ButtonComponent navigation={props.navigation} route={route} />		<ButtonComponent navigation={props.navigation} route={route} />
</View>		</Animated.View>
</View>		</View>
<AnimatedView		<AnimatedView
style={tipContainerStyle}		style={baseTipContainerStyle}
onLayout={onTipContainerLayout}		onLayout={onTipContainerLayout}
		entering={tipContainerEnteringAnimation}
		exiting={tipContainerExitingAnimation}
>		>
<View style={[styles.triangleUp, triangleStyle]} />		<View style={[styles.triangleUp, triangleStyle]} />
<View style={styles.items}>		<View style={styles.items}>
<Text style={styles.tipText}>{tipText}</Text>		<Text style={styles.tipText}>{tipText}</Text>
</View>		</View>
</AnimatedView>		</AnimatedView>
</View>		</View>
</TouchableWithoutFeedback>		</TouchableWithoutFeedback>
Show All 16 Lines

[native] Move render and constructorClosedPublicActions

Details

Diff Detail

Event Timeline

Revision ContentsChangeset List

Diff 43356

native/tooltip/nux-tips-overlay.react.js

[native] Move render and constructor
ClosedPublic
Actions

Revision Contents
Changeset List