Page MenuHomePhabricator
Differential D10071

[lib] `MemberInfo` -> `LegacyMemberInfo`
ClosedPublic
Actions

Authored by atul on Nov 28 2023, 7:43 AM.
Tags
None
Referenced Files
Unknown Object (File)
Tue, Apr 8, 4:41 PM
Unknown Object (File)
Tue, Apr 8, 9:06 AM
Unknown Object (File)
Tue, Apr 8, 2:00 AM
Unknown Object (File)
Mon, Apr 7, 7:22 PM
Unknown Object (File)
Mon, Apr 7, 3:19 PM
Unknown Object (File)
Mon, Apr 7, 4:17 AM
Unknown Object (File)
Wed, Apr 2, 4:43 AM
Unknown Object (File)
Tue, Apr 1, 10:55 PM
View All 78 Files
Subscribers
None

Details

Reviewers
ashoat
ginsu
tomek
rohan
Commits
rCOMMd1dd9b34acc2: [lib] `MemberInfo` -> `LegacyMemberInfo`
Summary

Similar to D10066 but for MemberInfo

Depends on D10068

Test Plan

flow/CI/etc

Diff Detail

Repository
rCOMM Comm
Branch
master
Lint
No Lint Coverage
Unit
No Test Coverage

Revision Contents
Changeset List

Diff 33947

View Options

lib/permissions/minimally-encoded-thread-permissions-validators.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,
} 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 Linesexport 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
View Options

lib/shared/thread-utils.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,
} 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 Linesexport 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
View Options

lib/types/minimally-encoded-thread-permissions-types.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,
} 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 Linesexport 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
View Options

lib/types/thread-types.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,
} 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 Linesexport 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
View Options

native/redux/edit-thread-permission-migration.js

Loading...
View Options

native/redux/manage-pins-permission-migration.js

Loading...
View Options

native/redux/update-roles-and-permissions.js

Loading...