[native] Simplify types
ClosedPublic
Actions

Authored by inka on Aug 13 2024, 8:26 AM.

Details

Reviewers

tomek
will

Commits

rCOMM5c1b9d97b69a: [native] Simplify types

Summary

issue: ENG-9814
I don't need to pass progress to the button components. This is needed for example in text message so that it can move to the right space after being pressed (in oreder to display tooltip). The nux tips don't need this

Test Plan

N/A - this code isn't being used anywhere yet, and the change is very simple

Diff Detail

Repository

rCOMM Comm

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

inka created this revision.Aug 13 2024, 8:26 AM

Herald added a subscriber: ashoat. · View Herald TranscriptAug 13 2024, 8:26 AM

inka edited the test plan for this revision. (Show Details)Aug 13 2024, 8:26 AM

inka added a parent revision: D13064: [native] Modify overlay context to handle reanimated 2 components.

inka added a child revision: D13066: [native] Refactor background opacity to reanimated 2.Aug 13 2024, 8:37 AM

Harbormaster completed remote builds in B31074: Diff 43360.Aug 13 2024, 8:44 AM

inka requested review of this revision.Aug 13 2024, 8:44 AM

will accepted this revision.Aug 13 2024, 4:20 PM

This revision is now accepted and ready to land.Aug 13 2024, 4:20 PM

Rebase

Harbormaster completed remote builds in B31088: Diff 43374.Aug 14 2024, 1:43 AM

tomek accepted this revision.Aug 14 2024, 5:36 AM

Closed by commit rCOMM5c1b9d97b69a: [native] Simplify types (authored by inka). · Explain WhyAug 20 2024, 1:59 AM

This revision was automatically updated to reflect the committed changes.

inka added a commit: rCOMM5c1b9d97b69a: [native] Simplify types.

Revision Contents
Changeset List

Path

Size

native/

tooltip/

nux-tips-overlay.react.js

22 lines

Diff 43360

View Options

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

// @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] Simplify typesClosedPublicActions