// @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,
		} 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;

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

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

function createNUXTipsOverlay(		function createNUXTipsOverlay(
ButtonComponent: React.ComponentType<NUXTipsOverlayProps>,		ButtonComponent: React.ComponentType<NUXTipsOverlayProps>,
tipText: string,		tipText: 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 { onExitFinish } = overlayContext;		const { onExitFinish } = 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 + (4 / 10) * width,
};		};
} else {		} else {
return {		return {
alignSelf: 'flex-end',		alignSelf: 'flex-end',
right: extraRightSpace + (width - 20) / 2,		right: extraRightSpace + (4 / 10) * width,
};		};
}		}
}, [dimensions.width, initialCoordinates]);		}, [dimensions.width, initialCoordinates]);

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: onExitFinish,		callback: onExitFinish,
};		};
}, [onExitFinish]);		}, [onExitFinish]);

		// prettier-ignore
		const tipContainerEnteringAnimation = React.useCallback(
		(values/: EntryAnimationsValues/) => {
		'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] Add keyserver to device list during restoreClosedPublicActions

Details

Diff Detail

Event Timeline

Revision ContentsChangeset List

Diff 47525

native/account/restore.js

[native] Add keyserver to device list during restore
ClosedPublic
Actions

Revision Contents
Changeset List