Page MenuHomePhabricator
Files F3356419

D6466.diff
No OneTemporary
Actions

D6466.diff
View Options

diff --git a/native/chat/settings/thread-settings-media-gallery.react.js b/native/chat/settings/thread-settings-media-gallery.react.js
new file mode 100644
--- /dev/null
+++ b/native/chat/settings/thread-settings-media-gallery.react.js
@@ -0,0 +1,99 @@
+// @flow
+
+import * as React from 'react';
+import {
+ View,
+ TouchableOpacity,
+ Image,
+ useWindowDimensions,
+} from 'react-native';
+import { FlatList } from 'react-native-gesture-handler';
+
+import { useStyles } from '../../themes/colors.js';
+
+const galleryItemGap = 8;
+const numColumns = 3;
+
+function ThreadSettingsMediaGallery(): React.Node {
+ const styles = useStyles(unboundStyles);
+ const { width } = useWindowDimensions();
+
+ // Explanation of galleryItemWidth:
+ // The FlatList has a horizontal padding of 16px on each side,
+ // and so the width of the actual FlatList is `width - 32px`.
+ // With three columns, there will be two gaps in between the items,
+ // so the width of each item (with the gaps) will be
+ // (width - 32px - (numColumns-1) * galleryItemGap) / numColumns.
+ // E.g. 16px, media, galleryItemGap, media, galleryItemGap, media, 16px
+ const galleryItemWidth =
+ (width - 32 - (numColumns - 1) * galleryItemGap) / numColumns;
+ const mediaInfos = React.useMemo(() => [], []);
+
+ const memoizedStyles = React.useMemo(() => {
+ return {
+ mediaContainer: {
+ marginTop: galleryItemGap,
+ width: galleryItemWidth,
+ ...styles.mediaContainer,
+ },
+ mediaContainerWithMargin: {
+ marginTop: galleryItemGap,
+ marginLeft: galleryItemGap,
+ width: galleryItemWidth,
+ ...styles.mediaContainer,
+ },
+ media: {
+ width: galleryItemWidth,
+ ...styles.media,
+ },
+ };
+ }, [galleryItemWidth, styles.media, styles.mediaContainer]);
+
+ const renderItem = React.useCallback(
+ ({ item, index }) => {
+ const containerStyle =
+ index % numColumns === 0
+ ? memoizedStyles.mediaContainer
+ : memoizedStyles.mediaContainerWithMargin;
+
+ return (
+ <View key={item.id} style={containerStyle}>
+ <TouchableOpacity>
+ <Image source={item.source} style={memoizedStyles.media} />
+ </TouchableOpacity>
+ </View>
+ );
+ },
+ [
+ memoizedStyles.media,
+ memoizedStyles.mediaContainer,
+ memoizedStyles.mediaContainerWithMargin,
+ ],
+ );
+
+ return (
+ <View style={styles.flatListContainer}>
+ <FlatList
+ data={mediaInfos}
+ numColumns={numColumns}
+ renderItem={renderItem}
+ />
+ </View>
+ );
+}
+
+const unboundStyles = {
+ flatListContainer: {
+ paddingHorizontal: 16,
+ },
+ mediaContainer: {
+ height: 180,
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ media: {
+ height: 180,
+ },
+};
+
+export default ThreadSettingsMediaGallery;

File Metadata

Mime Type
text/plain
Expires
Sun, Nov 24, 6:48 PM (21 h, 11 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2577013
Default Alt Text
D6466.diff (2 KB)

Event Timeline