diff --git a/native/chat/chat.react.js b/native/chat/chat.react.js
--- a/native/chat/chat.react.js
+++ b/native/chat/chat.react.js
@@ -41,6 +41,7 @@
ComposeSubchannelRouteName,
DeleteThreadRouteName,
ThreadSettingsRouteName,
+ FullScreenThreadMediaGalleryRouteName,
MessageListRouteName,
ChatThreadListRouteName,
HomeChatThreadListRouteName,
@@ -55,6 +56,7 @@
import ChatRouter, { type ChatRouterNavigationHelpers } from './chat-router';
import ComposeSubchannel from './compose-subchannel.react';
import ComposeThreadButton from './compose-thread-button.react';
+import FullScreenThreadMediaGallery from './fullscreen-thread-media-gallery.react';
import HomeChatThreadList from './home-chat-thread-list.react';
import MessageListContainer from './message-list-container.react';
import MessageListHeaderTitle from './message-list-header-title.react';
@@ -249,6 +251,10 @@
),
headerBackTitleVisible: false,
});
+const fullScreenThreadMediaGalleryOptions = {
+ headerTitle: 'Media Gallery',
+ headerBackTitleVisible: false,
+};
const deleteThreadOptions = {
headerTitle: 'Delete chat',
headerBackTitleVisible: false,
@@ -346,6 +352,11 @@
component={ThreadSettings}
options={threadSettingsOptions}
/>
+
,
+ +route: NavigationRoute<'FullScreenThreadMediaGallery'>,
+};
+
+function FullScreenThreadMediaGallery(
+ props: FullScreenThreadMediaGalleryProps,
+): React.Node {
+ const { id } = props.route.params.threadInfo;
+ return {id} ;
+}
+
+export default FullScreenThreadMediaGallery;
diff --git a/native/chat/settings/thread-settings-category.react.js b/native/chat/settings/thread-settings-category.react.js
--- a/native/chat/settings/thread-settings-category.react.js
+++ b/native/chat/settings/thread-settings-category.react.js
@@ -2,7 +2,7 @@
import invariant from 'invariant';
import * as React from 'react';
-import { View, Text, Platform } from 'react-native';
+import { View, Text, Platform, TouchableOpacity } from 'react-native';
import { useStyles } from '../../themes/colors';
@@ -34,6 +34,40 @@
);
}
+type ActionHeaderProps = {
+ +type: CategoryType,
+ +title: string,
+ +actionText: string,
+ +onPress: () => void,
+};
+function ThreadSettingsCategoryActionHeader(
+ props: ActionHeaderProps,
+): React.Node {
+ const styles = useStyles(unboundStyles);
+ let contentStyle, paddingStyle;
+ if (props.type === 'full') {
+ contentStyle = styles.fullHeader;
+ paddingStyle = styles.fullHeaderPadding;
+ } else if (props.type === 'outline') {
+ // nothing
+ } else if (props.type === 'unpadded') {
+ contentStyle = styles.fullHeader;
+ } else {
+ invariant(false, 'invalid ThreadSettingsCategory type');
+ }
+ return (
+
+
+ {props.title.toUpperCase()}
+
+ {props.actionText}
+
+
+
+
+ );
+}
+
type FooterProps = {
+type: CategoryType,
};
@@ -93,6 +127,22 @@
paddingBottom: 3,
paddingLeft: 24,
},
+ actionHeader: {
+ marginTop: 16,
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ },
+ actionText: {
+ color: 'link',
+ fontSize: 12,
+ fontWeight: '400',
+ paddingBottom: 3,
+ paddingRight: 12,
+ },
};
-export { ThreadSettingsCategoryHeader, ThreadSettingsCategoryFooter };
+export {
+ ThreadSettingsCategoryHeader,
+ ThreadSettingsCategoryActionHeader,
+ ThreadSettingsCategoryFooter,
+};
diff --git a/native/chat/settings/thread-settings.react.js b/native/chat/settings/thread-settings.react.js
--- a/native/chat/settings/thread-settings.react.js
+++ b/native/chat/settings/thread-settings.react.js
@@ -57,6 +57,7 @@
import {
AddUsersModalRouteName,
ComposeSubchannelModalRouteName,
+ FullScreenThreadMediaGalleryRouteName,
} from '../../navigation/route-names';
import type { TabNavigationProp } from '../../navigation/tab-navigator.react';
import { useSelector } from '../../redux/redux-utils';
@@ -72,6 +73,7 @@
import type { CategoryType } from './thread-settings-category.react';
import {
ThreadSettingsCategoryHeader,
+ ThreadSettingsCategoryActionHeader,
ThreadSettingsCategoryFooter,
} from './thread-settings-category.react';
import ThreadSettingsChildThread from './thread-settings-child-thread.react';
@@ -112,6 +114,14 @@
+title: string,
+categoryType: CategoryType,
}
+ | {
+ +itemType: 'actionHeader',
+ +key: string,
+ +title: string,
+ +categoryType: CategoryType,
+ +actionText: string,
+ +onPress: () => void,
+ }
| {
+itemType: 'footer',
+key: string,
@@ -631,10 +641,12 @@
const limit = 6;
listData.push({
- itemType: 'header',
+ itemType: 'actionHeader',
key: 'mediaGalleryHeader',
title: 'Media Gallery',
categoryType: 'outline',
+ actionText: 'See more',
+ onPress: this.onPressSeeMoreMediaGallery,
});
listData.push({
@@ -856,6 +868,15 @@
title={item.title}
/>
);
+ } else if (item.itemType === 'actionHeader') {
+ return (
+
+ );
} else if (item.itemType === 'footer') {
return ;
} else if (item.itemType === 'name') {
@@ -1020,6 +1041,12 @@
numSidebarsShowing: prevState.numSidebarsShowing + itemPageLength,
}));
};
+
+ onPressSeeMoreMediaGallery = () => {
+ this.props.navigation.navigate(FullScreenThreadMediaGalleryRouteName, {
+ threadInfo: this.props.threadInfo,
+ });
+ };
}
const unboundStyles = {
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
@@ -5,6 +5,7 @@
import type { TermsAndPrivacyModalParams } from '../account/terms-and-privacy-modal.react';
import type { ThreadPickerModalParams } from '../calendar/thread-picker-modal.react';
import type { ComposeSubchannelParams } from '../chat/compose-subchannel.react';
+import type { FullScreenThreadMediaGalleryParams } from '../chat/fullscreen-thread-media-gallery.react';
import type { ImagePasteModalParams } from '../chat/image-paste-modal.react';
import type { MessageListParams } from '../chat/message-list-types';
import type { MessageReactionsModalParams } from '../chat/message-reactions-modal.react';
@@ -49,6 +50,8 @@
export const DevToolsRouteName = 'DevTools';
export const EditPasswordRouteName = 'EditPassword';
export const FriendListRouteName = 'FriendList';
+export const FullScreenThreadMediaGalleryRouteName =
+ 'FullScreenThreadMediaGallery';
export const HomeChatThreadListRouteName = 'HomeChatThreadList';
export const ImageModalRouteName = 'ImageModal';
export const ImagePasteModalRouteName = 'ImagePasteModal';
@@ -125,6 +128,7 @@
+ComposeSubchannel: ComposeSubchannelParams,
+ThreadSettings: ThreadSettingsParams,
+DeleteThread: DeleteThreadParams,
+ +FullScreenThreadMediaGallery: FullScreenThreadMediaGalleryParams,
};
export type ChatTopTabsParamList = {
@@ -184,4 +188,5 @@
ThreadSettingsRouteName,
DeleteThreadRouteName,
ComposeSubchannelRouteName,
+ FullScreenThreadMediaGalleryRouteName,
];