Page MenuHomePhabricator
Files F3503566

D12986.id43356.diff
No OneTemporary
Actions

D12986.id43356.diff
View Options

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
@@ -8,7 +8,6 @@
import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
import { OverlayContext } from '../navigation/overlay-context.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';
import type {
@@ -18,8 +17,6 @@
import type { LayoutEvent } from '../types/react-native.js';
import {
AnimatedView,
- type ViewStyle,
- type AnimatedViewStyle,
type WritableAnimatedStyleObj,
type ReanimatedTransform,
} from '../types/styles.js';
@@ -76,24 +73,6 @@
...Base,
+progress: Node,
};
-type NUXTipsOverlayProps<Base> = {
- ...Base,
- // Redux state
- +dimensions: DimensionsInfo,
- +position: Animated.Node,
- +styles: $ReadOnly<typeof unboundStyles>,
- +closeTip: () => mixed,
- +contentContainerStyle: ViewStyle,
- +opacityStyle: AnimatedViewStyle,
- +buttonStyle: ViewStyle,
- +tipHorizontalOffset: Value,
- +onTipContainerLayout: (event: LayoutEvent) => void,
- +tipContainerOpacity: Node,
- +tipVerticalBelow: Node,
- +tipHorizontal: Node,
- +tipScale: Node,
- +tipContainerStyle: AnimatedViewStyle,
-};
const tipHeight: number = 30;
const margin: number = 20;
@@ -102,86 +81,20 @@
ButtonComponent: React.ComponentType<ButtonProps<BaseNUXTipsOverlayProps>>,
MenuComponent: React.ComponentType<BaseNUXTipsOverlayProps>,
): React.ComponentType<BaseNUXTipsOverlayProps> {
- class NUXTipsOverlay extends React.PureComponent<
- NUXTipsOverlayProps<BaseNUXTipsOverlayProps>,
- > {
- constructor(props: NUXTipsOverlayProps<BaseNUXTipsOverlayProps>) {
- super(props);
- }
-
- render(): React.Node {
- const {
- dimensions,
- position,
- styles,
- opacityStyle,
- buttonStyle,
- tipContainerStyle,
- navigation,
- route,
- } = this.props;
-
- let triangleStyle;
- const { initialCoordinates } = route.params;
- const { x, width } = initialCoordinates;
- const extraLeftSpace = x;
- const extraRightSpace = dimensions.width - width - x;
- if (extraLeftSpace < extraRightSpace) {
- triangleStyle = {
- alignSelf: 'flex-start',
- left: extraLeftSpace + (width - 20) / 2,
- };
- } else {
- triangleStyle = {
- alignSelf: 'flex-end',
- right: extraRightSpace + (width - 20) / 2,
- };
- }
-
- return (
- <TouchableWithoutFeedback onPress={this.props.closeTip}>
- <View style={styles.container}>
- <AnimatedView style={opacityStyle} />
- <View style={this.props.contentContainerStyle}>
- <View style={buttonStyle}>
- <ButtonComponent
- navigation={navigation}
- route={route}
- progress={position}
- />
- </View>
- </View>
- <AnimatedView
- style={tipContainerStyle}
- onLayout={this.props.onTipContainerLayout}
- >
- <View style={[styles.triangleUp, triangleStyle]} />
- <View style={styles.items}>
- <MenuComponent
- navigation={navigation}
- route={route}
- key="menu"
- />
- </View>
- </AnimatedView>
- </View>
- </TouchableWithoutFeedback>
- );
- }
- }
-
function ConnectedNUXTipsOverlay(props: BaseNUXTipsOverlayProps) {
const dimensions = useSelector(state => state.dimensions);
const overlayContext = React.useContext(OverlayContext);
invariant(overlayContext, 'NUXTipsOverlay should have OverlayContext');
const { position } = overlayContext;
- const { goBackOnce } = props.navigation;
+ const { navigation, route } = props;
+
+ const { goBackOnce } = navigation;
const styles = useStyles(unboundStyles);
const contentContainerStyle = React.useMemo(() => {
- const { verticalBounds } = props.route.params;
+ const { verticalBounds } = route.params;
const fullScreenHeight = dimensions.height;
const top = verticalBounds.y;
const bottom =
@@ -191,7 +104,7 @@
marginTop: top,
marginBottom: bottom,
};
- }, [dimensions.height, props.route.params, styles.contentContainer]);
+ }, [dimensions.height, route.params, styles.contentContainer]);
const opacityStyle = React.useMemo(() => {
const backdropOpacity = interpolateNode(position, {
@@ -314,24 +227,47 @@
verticalBounds.y,
]);
+ const triangleStyle = React.useMemo(() => {
+ const { x, width } = initialCoordinates;
+ const extraLeftSpace = x;
+ const extraRightSpace = dimensions.width - width - x;
+ if (extraLeftSpace < extraRightSpace) {
+ return {
+ alignSelf: 'flex-start',
+ left: extraLeftSpace + (width - 20) / 2,
+ };
+ } else {
+ return {
+ alignSelf: 'flex-end',
+ right: extraRightSpace + (width - 20) / 2,
+ };
+ }
+ }, [dimensions.width, initialCoordinates]);
+
return (
- <NUXTipsOverlay
- {...props}
- dimensions={dimensions}
- position={position}
- styles={styles}
- closeTip={goBackOnce}
- contentContainerStyle={contentContainerStyle}
- opacityStyle={opacityStyle}
- buttonStyle={buttonStyle}
- tipHorizontalOffset={tipHorizontalOffset}
- onTipContainerLayout={onTipContainerLayout}
- tipContainerOpacity={tipContainerOpacity}
- tipVerticalBelow={tipVerticalBelow}
- tipHorizontal={tipHorizontal}
- tipScale={tipScale}
- tipContainerStyle={tipContainerStyle}
- />
+ <TouchableWithoutFeedback onPress={goBackOnce}>
+ <View style={styles.container}>
+ <AnimatedView style={opacityStyle} />
+ <View style={contentContainerStyle}>
+ <View style={buttonStyle}>
+ <ButtonComponent
+ navigation={props.navigation}
+ route={route}
+ progress={position}
+ />
+ </View>
+ </View>
+ <AnimatedView
+ style={tipContainerStyle}
+ onLayout={onTipContainerLayout}
+ >
+ <View style={[styles.triangleUp, triangleStyle]} />
+ <View style={styles.items}>
+ <MenuComponent navigation={navigation} route={route} key="menu" />
+ </View>
+ </AnimatedView>
+ </View>
+ </TouchableWithoutFeedback>
);
}
return React.memo<BaseNUXTipsOverlayProps>(ConnectedNUXTipsOverlay);

File Metadata

Mime Type
text/plain
Expires
Sat, Dec 21, 5:38 AM (18 h, 22 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2683732
Default Alt Text
D12986.id43356.diff (6 KB)

Event Timeline