Page MenuHomePhabricator
Files F3335944

D13037.id43580.diff
No OneTemporary
Actions

D13037.id43580.diff
View Options

diff --git a/native/navigation/root-navigator.react.js b/native/navigation/root-navigator.react.js
--- a/native/navigation/root-navigator.react.js
+++ b/native/navigation/root-navigator.react.js
@@ -56,6 +56,7 @@
TagFarcasterChannelNavigatorRouteName,
CreateMissingSIWEBackupMessageRouteName,
RestoreSIWEBackupRouteName,
+ LinkedDevicesBottomSheetRouteName,
} from './route-names.js';
import LoggedOutModal from '../account/logged-out-modal.react.js';
import CreateMissingSIWEBackupMessage from '../account/registration/missing-registration-data/missing-siwe-backup-message.react.js';
@@ -76,6 +77,7 @@
import InviteLinksNavigator from '../invite-links/invite-links-navigator.react.js';
import CustomServerModal from '../profile/custom-server-modal.react.js';
import KeyserverSelectionBottomSheet from '../profile/keyserver-selection-bottom-sheet.react.js';
+import LinkedDevicesBottomSheet from '../profile/linked-devices-bottom-sheet.react.js';
import QRCodeSignInNavigator from '../qr-code/qr-code-sign-in-navigator.react.js';
import RolesNavigator from '../roles/roles-navigator.react.js';
import UserProfileBottomSheetNavigator from '../user-profile/user-profile-bottom-sheet-navigator.react.js';
@@ -292,6 +294,11 @@
component={KeyserverSelectionBottomSheet}
options={modalOverlayScreenOptions}
/>
+ <Root.Screen
+ name={LinkedDevicesBottomSheetRouteName}
+ component={LinkedDevicesBottomSheet}
+ options={modalOverlayScreenOptions}
+ />
<Root.Screen
name={ConnectFarcasterBottomSheetRouteName}
component={ConnectFarcasterBottomSheet}
diff --git a/native/navigation/route-names.js b/native/navigation/route-names.js
--- a/native/navigation/route-names.js
+++ b/native/navigation/route-names.js
@@ -93,6 +93,7 @@
export const InviteLinkModalRouteName = 'InviteLinkModal';
export const InviteLinkNavigatorRouteName = 'InviteLinkNavigator';
export const LinkedDevicesRouteName = 'LinkedDevices';
+export const LinkedDevicesBottomSheetRouteName = 'LinkedDevicesBottomSheet';
export const LoggedOutModalRouteName = 'LoggedOutModal';
export const ManagePublicLinkRouteName = 'ManagePublicLink';
export const MessageListRouteName = 'MessageList';
@@ -191,6 +192,7 @@
+UserProfileBottomSheetNavigator: void,
+TunnelbrokerMenu: void,
+KeyserverSelectionBottomSheet: KeyserverSelectionBottomSheetParams,
+ +LinkedDevicesBottomSheet: void,
+ConnectFarcasterBottomSheet: void,
+TagFarcasterChannelNavigator: void,
+CreateMissingSIWEBackupMessage: void,
diff --git a/native/profile/linked-devices-bottom-sheet.react.js b/native/profile/linked-devices-bottom-sheet.react.js
new file mode 100644
--- /dev/null
+++ b/native/profile/linked-devices-bottom-sheet.react.js
@@ -0,0 +1,39 @@
+// @flow
+
+import * as React from 'react';
+import { View } from 'react-native';
+
+import BottomSheet from '../bottom-sheet/bottom-sheet.react.js';
+import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
+import type { NavigationRoute } from '../navigation/route-names.js';
+import { useStyles } from '../themes/colors.js';
+import type { BottomSheetRef } from '../types/bottom-sheet.js';
+
+type Props = {
+ +navigation: RootNavigationProp<'LinkedDevicesBottomSheet'>,
+ +route: NavigationRoute<'LinkedDevicesBottomSheet'>,
+};
+
+function LinkedDevicesBottomSheet(props: Props): React.Node {
+ const { navigation } = props;
+
+ const { goBack } = navigation;
+
+ const bottomSheetRef = React.useRef<?BottomSheetRef>();
+
+ const styles = useStyles(unboundStyles);
+
+ return (
+ <BottomSheet ref={bottomSheetRef} onClosed={goBack}>
+ <View style={styles.container}></View>
+ </BottomSheet>
+ );
+}
+
+const unboundStyles = {
+ container: {
+ paddingHorizontal: 16,
+ },
+};
+
+export default LinkedDevicesBottomSheet;
diff --git a/native/profile/linked-devices-list-item.react.js b/native/profile/linked-devices-list-item.react.js
--- a/native/profile/linked-devices-list-item.react.js
+++ b/native/profile/linked-devices-list-item.react.js
@@ -1,5 +1,6 @@
// @flow
+import { useNavigation } from '@react-navigation/native';
import * as React from 'react';
import { View, TouchableOpacity } from 'react-native';
@@ -10,6 +11,7 @@
import Pill from '../components/pill.react.js';
import SWMIcon from '../components/swmansion-icon.react.js';
+import { LinkedDevicesBottomSheetRouteName } from '../navigation/route-names.js';
import { useStyles, useColors } from '../themes/colors.js';
type Props = {
@@ -25,6 +27,14 @@
const styles = useStyles(unboundStyles);
const colors = useColors();
+ const { navigate } = useNavigation();
+
+ const onPress = React.useCallback(() => {
+ navigate<'LinkedDevicesBottomSheet'>({
+ name: LinkedDevicesBottomSheetRouteName,
+ });
+ }, [navigate]);
+
const deviceType = platformDetails?.deviceType;
const deviceIcon = React.useMemo(() => {
@@ -63,7 +73,7 @@
const deviceListItem = React.useMemo(
() => (
- <TouchableOpacity style={styles.listItemContainer}>
+ <TouchableOpacity style={styles.listItemContainer} onPress={onPress}>
<View style={styles.pillContainer}>
<Pill
label={label}
@@ -76,6 +86,7 @@
[
styles.listItemContainer,
styles.pillContainer,
+ onPress,
label,
colors.codeBackground,
deviceIcon,

File Metadata

Mime Type
text/plain
Expires
Fri, Nov 22, 12:47 PM (17 h, 48 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2560964
Default Alt Text
D13037.id43580.diff (5 KB)

Event Timeline