Page MenuHomePhabricator
Differential D14407

[native] Rename positionV2 to position in overlay navigator
ClosedPublic
Actions

Authored by angelika on Feb 25 2025, 3:02 AM.
Tags
None
Referenced Files
F5381452: D14407.id47261.diff
Wed, Apr 9, 6:43 PM
F5357960: D14407.id47331.diff
Wed, Apr 9, 11:47 AM
Unknown Object (File)
Sun, Apr 6, 12:24 PM
Unknown Object (File)
Sun, Apr 6, 12:24 PM
Unknown Object (File)
Sun, Apr 6, 8:31 AM
Unknown Object (File)
Sun, Apr 6, 1:00 AM
Unknown Object (File)
Sat, Apr 5, 10:23 PM
Unknown Object (File)
Sat, Apr 5, 1:58 PM
View All 41 Files
Subscribers
ashoat

Details

Reviewers
tomek
Commits
rCOMM0c8cb92c0d46: [native] Rename positionV2 to position in overlay navigator
Summary

https://linear.app/comm/issue/ENG-10006/rename-positionv2-variables-in-overlaynavigator-to-position

Since position variable is removed we can rename positionV2 to position in OverlayNavigator

Depends on D14406

Test Plan

Flow & run the app

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Revision Contents
Changeset List

Diff 47266

View Options

native/chat/multimedia-message-multimedia.react.js

// @flow // @flow
import { useNavigation, useRoute } from '@react-navigation/native'; import { useNavigation, useRoute } from '@react-navigation/native';
import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { View, useWindowDimensions } from 'react-native'; import { View, useWindowDimensions } from 'react-native';
import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet'; import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
import { FlatList } from 'react-native-gesture-handler'; import { FlatList } from 'react-native-gesture-handler';
import { useFetchThreadMedia } from 'lib/actions/thread-actions.js'; import { useFetchThreadMedia } from 'lib/actions/thread-actions.js';
import type { MediaInfo, Media } from 'lib/types/media-types'; import type { MediaInfo, Media } from 'lib/types/media-types';
import { import {
ThreadSettingsCategoryActionHeader, ThreadSettingsCategoryActionHeader,
ThreadSettingsCategoryFooter, ThreadSettingsCategoryFooter,
} from './thread-settings-category.react.js'; } from './thread-settings-category.react.js';
import GestureTouchableOpacity from '../../components/gesture-touchable-opacity.react.js'; import GestureTouchableOpacity from '../../components/gesture-touchable-opacity.react.js';
import type { ImageModalParams } from '../../media/image-modal.react.js';
import Multimedia from '../../media/multimedia.react.js'; import Multimedia from '../../media/multimedia.react.js';
import type { VideoPlaybackModalParams } from '../../media/video-playback-modal.react.js';
import { import {
ImageModalRouteName, ImageModalRouteName,
VideoPlaybackModalRouteName, VideoPlaybackModalRouteName,
} from '../../navigation/route-names.js'; } from '../../navigation/route-names.js';
import { useStyles } from '../../themes/colors.js'; import { useStyles } from '../../themes/colors.js';
import type { import type {
LayoutCoordinates, LayoutCoordinates,
VerticalBounds, VerticalBounds,
▲ Show 20 Lines • Show All 196 Lines • ▼ Show 20 Lines const navigateToMedia = React.useCallback(() => {
ref.current?.measure((x, y, width, height, pageX, pageY) => { ref.current?.measure((x, y, width, height, pageX, pageY) => {
const initialCoordinates: LayoutCoordinates = { const initialCoordinates: LayoutCoordinates = {
x: pageX, x: pageX,
y: pageY, y: pageY,
width, width,
height, height,
}; };
invariant(
verticalBounds,
'verticalBounds should be set in navigateToMedia',
);
const params: ImageModalParams | VideoPlaybackModalParams = {
presentedFrom: route.key,
mediaInfo,
initialCoordinates,
verticalBounds,
};
navigation.navigate<'VideoPlaybackModal' | 'ImageModal'>({ navigation.navigate<'VideoPlaybackModal' | 'ImageModal'>({
name: name:
mediaInfo.type === 'video' || mediaInfo.type === 'encrypted_video' mediaInfo.type === 'video' || mediaInfo.type === 'encrypted_video'
? VideoPlaybackModalRouteName ? VideoPlaybackModalRouteName
: ImageModalRouteName, : ImageModalRouteName,
key: `multimedia|${threadID}|${mediaInfo.id}`, key: `multimedia|${threadID}|${mediaInfo.id}`,
params: { params,
presentedFrom: route.key,
mediaInfo,
item,
initialCoordinates,
verticalBounds,
},
}); });
}); });
}, [navigation, route, threadID, mediaInfo, item, verticalBounds]); }, [navigation, route, threadID, mediaInfo, verticalBounds]);
const containerStyle = const containerStyle =
index % numColumns === 0 index % numColumns === 0
? memoizedStyles.mediaContainer ? memoizedStyles.mediaContainer
: memoizedStyles.mediaContainerWithMargin; : memoizedStyles.mediaContainerWithMargin;
return ( return (
<View key={item.id} style={containerStyle} onLayout={onLayout} ref={ref}> <View key={item.id} style={containerStyle} onLayout={onLayout} ref={ref}>
Show All 25 Lines
View Options

native/chat/reaction-selection-popover.react.js

// @flow // @flow
import { useNavigation, useRoute } from '@react-navigation/native'; import { useNavigation, useRoute } from '@react-navigation/native';
import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { View, useWindowDimensions } from 'react-native'; import { View, useWindowDimensions } from 'react-native';
import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet'; import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
import { FlatList } from 'react-native-gesture-handler'; import { FlatList } from 'react-native-gesture-handler';
import { useFetchThreadMedia } from 'lib/actions/thread-actions.js'; import { useFetchThreadMedia } from 'lib/actions/thread-actions.js';
import type { MediaInfo, Media } from 'lib/types/media-types'; import type { MediaInfo, Media } from 'lib/types/media-types';
import { import {
ThreadSettingsCategoryActionHeader, ThreadSettingsCategoryActionHeader,
ThreadSettingsCategoryFooter, ThreadSettingsCategoryFooter,
} from './thread-settings-category.react.js'; } from './thread-settings-category.react.js';
import GestureTouchableOpacity from '../../components/gesture-touchable-opacity.react.js'; import GestureTouchableOpacity from '../../components/gesture-touchable-opacity.react.js';
import type { ImageModalParams } from '../../media/image-modal.react.js';
import Multimedia from '../../media/multimedia.react.js'; import Multimedia from '../../media/multimedia.react.js';
import type { VideoPlaybackModalParams } from '../../media/video-playback-modal.react.js';
import { import {
ImageModalRouteName, ImageModalRouteName,
VideoPlaybackModalRouteName, VideoPlaybackModalRouteName,
} from '../../navigation/route-names.js'; } from '../../navigation/route-names.js';
import { useStyles } from '../../themes/colors.js'; import { useStyles } from '../../themes/colors.js';
import type { import type {
LayoutCoordinates, LayoutCoordinates,
VerticalBounds, VerticalBounds,
▲ Show 20 Lines • Show All 196 Lines • ▼ Show 20 Lines const navigateToMedia = React.useCallback(() => {
ref.current?.measure((x, y, width, height, pageX, pageY) => { ref.current?.measure((x, y, width, height, pageX, pageY) => {
const initialCoordinates: LayoutCoordinates = { const initialCoordinates: LayoutCoordinates = {
x: pageX, x: pageX,
y: pageY, y: pageY,
width, width,
height, height,
}; };
invariant(
verticalBounds,
'verticalBounds should be set in navigateToMedia',
);
const params: ImageModalParams | VideoPlaybackModalParams = {
presentedFrom: route.key,
mediaInfo,
initialCoordinates,
verticalBounds,
};
navigation.navigate<'VideoPlaybackModal' | 'ImageModal'>({ navigation.navigate<'VideoPlaybackModal' | 'ImageModal'>({
name: name:
mediaInfo.type === 'video' || mediaInfo.type === 'encrypted_video' mediaInfo.type === 'video' || mediaInfo.type === 'encrypted_video'
? VideoPlaybackModalRouteName ? VideoPlaybackModalRouteName
: ImageModalRouteName, : ImageModalRouteName,
key: `multimedia|${threadID}|${mediaInfo.id}`, key: `multimedia|${threadID}|${mediaInfo.id}`,
params: { params,
presentedFrom: route.key,
mediaInfo,
item,
initialCoordinates,
verticalBounds,
},
}); });
}); });
}, [navigation, route, threadID, mediaInfo, item, verticalBounds]); }, [navigation, route, threadID, mediaInfo, verticalBounds]);
const containerStyle = const containerStyle =
index % numColumns === 0 index % numColumns === 0
? memoizedStyles.mediaContainer ? memoizedStyles.mediaContainer
: memoizedStyles.mediaContainerWithMargin; : memoizedStyles.mediaContainerWithMargin;
return ( return (
<View key={item.id} style={containerStyle} onLayout={onLayout} ref={ref}> <View key={item.id} style={containerStyle} onLayout={onLayout} ref={ref}>
Show All 25 Lines
View Options

native/chat/utils.js

// @flow // @flow
import { useNavigation, useRoute } from '@react-navigation/native'; import { useNavigation, useRoute } from '@react-navigation/native';
import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { View, useWindowDimensions } from 'react-native'; import { View, useWindowDimensions } from 'react-native';
import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet'; import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
import { FlatList } from 'react-native-gesture-handler'; import { FlatList } from 'react-native-gesture-handler';
import { useFetchThreadMedia } from 'lib/actions/thread-actions.js'; import { useFetchThreadMedia } from 'lib/actions/thread-actions.js';
import type { MediaInfo, Media } from 'lib/types/media-types'; import type { MediaInfo, Media } from 'lib/types/media-types';
import { import {
ThreadSettingsCategoryActionHeader, ThreadSettingsCategoryActionHeader,
ThreadSettingsCategoryFooter, ThreadSettingsCategoryFooter,
} from './thread-settings-category.react.js'; } from './thread-settings-category.react.js';
import GestureTouchableOpacity from '../../components/gesture-touchable-opacity.react.js'; import GestureTouchableOpacity from '../../components/gesture-touchable-opacity.react.js';
import type { ImageModalParams } from '../../media/image-modal.react.js';
import Multimedia from '../../media/multimedia.react.js'; import Multimedia from '../../media/multimedia.react.js';
import type { VideoPlaybackModalParams } from '../../media/video-playback-modal.react.js';
import { import {
ImageModalRouteName, ImageModalRouteName,
VideoPlaybackModalRouteName, VideoPlaybackModalRouteName,
} from '../../navigation/route-names.js'; } from '../../navigation/route-names.js';
import { useStyles } from '../../themes/colors.js'; import { useStyles } from '../../themes/colors.js';
import type { import type {
LayoutCoordinates, LayoutCoordinates,
VerticalBounds, VerticalBounds,
▲ Show 20 Lines • Show All 196 Lines • ▼ Show 20 Lines const navigateToMedia = React.useCallback(() => {
ref.current?.measure((x, y, width, height, pageX, pageY) => { ref.current?.measure((x, y, width, height, pageX, pageY) => {
const initialCoordinates: LayoutCoordinates = { const initialCoordinates: LayoutCoordinates = {
x: pageX, x: pageX,
y: pageY, y: pageY,
width, width,
height, height,
}; };
invariant(
verticalBounds,
'verticalBounds should be set in navigateToMedia',
);
const params: ImageModalParams | VideoPlaybackModalParams = {
presentedFrom: route.key,
mediaInfo,
initialCoordinates,
verticalBounds,
};
navigation.navigate<'VideoPlaybackModal' | 'ImageModal'>({ navigation.navigate<'VideoPlaybackModal' | 'ImageModal'>({
name: name:
mediaInfo.type === 'video' || mediaInfo.type === 'encrypted_video' mediaInfo.type === 'video' || mediaInfo.type === 'encrypted_video'
? VideoPlaybackModalRouteName ? VideoPlaybackModalRouteName
: ImageModalRouteName, : ImageModalRouteName,
key: `multimedia|${threadID}|${mediaInfo.id}`, key: `multimedia|${threadID}|${mediaInfo.id}`,
params: { params,
presentedFrom: route.key,
mediaInfo,
item,
initialCoordinates,
verticalBounds,
},
}); });
}); });
}, [navigation, route, threadID, mediaInfo, item, verticalBounds]); }, [navigation, route, threadID, mediaInfo, verticalBounds]);
const containerStyle = const containerStyle =
index % numColumns === 0 index % numColumns === 0
? memoizedStyles.mediaContainer ? memoizedStyles.mediaContainer
: memoizedStyles.mediaContainerWithMargin; : memoizedStyles.mediaContainerWithMargin;
return ( return (
<View key={item.id} style={containerStyle} onLayout={onLayout} ref={ref}> <View key={item.id} style={containerStyle} onLayout={onLayout} ref={ref}>
Show All 25 Lines
View Options

native/components/full-screen-view-modal.react.js

// @flow // @flow
import { useNavigation, useRoute } from '@react-navigation/native'; import { useNavigation, useRoute } from '@react-navigation/native';
import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { View, useWindowDimensions } from 'react-native'; import { View, useWindowDimensions } from 'react-native';
import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet'; import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
import { FlatList } from 'react-native-gesture-handler'; import { FlatList } from 'react-native-gesture-handler';
import { useFetchThreadMedia } from 'lib/actions/thread-actions.js'; import { useFetchThreadMedia } from 'lib/actions/thread-actions.js';
import type { MediaInfo, Media } from 'lib/types/media-types'; import type { MediaInfo, Media } from 'lib/types/media-types';
import { import {
ThreadSettingsCategoryActionHeader, ThreadSettingsCategoryActionHeader,
ThreadSettingsCategoryFooter, ThreadSettingsCategoryFooter,
} from './thread-settings-category.react.js'; } from './thread-settings-category.react.js';
import GestureTouchableOpacity from '../../components/gesture-touchable-opacity.react.js'; import GestureTouchableOpacity from '../../components/gesture-touchable-opacity.react.js';
import type { ImageModalParams } from '../../media/image-modal.react.js';
import Multimedia from '../../media/multimedia.react.js'; import Multimedia from '../../media/multimedia.react.js';
import type { VideoPlaybackModalParams } from '../../media/video-playback-modal.react.js';
import { import {
ImageModalRouteName, ImageModalRouteName,
VideoPlaybackModalRouteName, VideoPlaybackModalRouteName,
} from '../../navigation/route-names.js'; } from '../../navigation/route-names.js';
import { useStyles } from '../../themes/colors.js'; import { useStyles } from '../../themes/colors.js';
import type { import type {
LayoutCoordinates, LayoutCoordinates,
VerticalBounds, VerticalBounds,
▲ Show 20 Lines • Show All 196 Lines • ▼ Show 20 Lines const navigateToMedia = React.useCallback(() => {
ref.current?.measure((x, y, width, height, pageX, pageY) => { ref.current?.measure((x, y, width, height, pageX, pageY) => {
const initialCoordinates: LayoutCoordinates = { const initialCoordinates: LayoutCoordinates = {
x: pageX, x: pageX,
y: pageY, y: pageY,
width, width,
height, height,
}; };
invariant(
verticalBounds,
'verticalBounds should be set in navigateToMedia',
);
const params: ImageModalParams | VideoPlaybackModalParams = {
presentedFrom: route.key,
mediaInfo,
initialCoordinates,
verticalBounds,
};
navigation.navigate<'VideoPlaybackModal' | 'ImageModal'>({ navigation.navigate<'VideoPlaybackModal' | 'ImageModal'>({
name: name:
mediaInfo.type === 'video' || mediaInfo.type === 'encrypted_video' mediaInfo.type === 'video' || mediaInfo.type === 'encrypted_video'
? VideoPlaybackModalRouteName ? VideoPlaybackModalRouteName
: ImageModalRouteName, : ImageModalRouteName,
key: `multimedia|${threadID}|${mediaInfo.id}`, key: `multimedia|${threadID}|${mediaInfo.id}`,
params: { params,
presentedFrom: route.key,
mediaInfo,
item,
initialCoordinates,
verticalBounds,
},
}); });
}); });
}, [navigation, route, threadID, mediaInfo, item, verticalBounds]); }, [navigation, route, threadID, mediaInfo, verticalBounds]);
const containerStyle = const containerStyle =
index % numColumns === 0 index % numColumns === 0
? memoizedStyles.mediaContainer ? memoizedStyles.mediaContainer
: memoizedStyles.mediaContainerWithMargin; : memoizedStyles.mediaContainerWithMargin;
return ( return (
<View key={item.id} style={containerStyle} onLayout={onLayout} ref={ref}> <View key={item.id} style={containerStyle} onLayout={onLayout} ref={ref}>
Show All 25 Lines
View Options

native/media/camera-modal.react.js

Loading...
View Options

native/media/video-playback-modal.react.js

Loading...
View Options

native/navigation/action-result-modal.react.js

Loading...
View Options

native/navigation/overlay-context.js

Loading...
View Options

native/navigation/overlay-navigator.react.js

Loading...
View Options

native/tooltip/tooltip.react.js

Loading...