Page MenuHomePhabricator
Files F3378726

D5721.diff
No OneTemporary
Actions

D5721.diff
View Options

diff --git a/native/navigation/community-drawer-item-cummunity.react.js b/native/navigation/community-drawer-item-cummunity.react.js
new file mode 100644
--- /dev/null
+++ b/native/navigation/community-drawer-item-cummunity.react.js
@@ -0,0 +1,45 @@
+// @flow
+
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { useStyles } from '../themes/colors';
+import CommunityDrawerItem from './community-drawer-item.react';
+import type { DrawerItemProps } from './community-drawer-item.react';
+
+function CommunityDrawerItemCommunity(props: DrawerItemProps): React.Node {
+ const styles = useStyles(unboundStyles);
+
+ const style = React.useMemo(
+ () =>
+ props.expanded
+ ? [styles.communityExpanded, styles.communityBase]
+ : styles.communityBase,
+ [props.expanded, styles.communityBase, styles.communityExpanded],
+ );
+
+ return (
+ <View style={style}>
+ <CommunityDrawerItem {...props} />
+ </View>
+ );
+}
+
+const unboundStyles = {
+ communityBase: {
+ paddingVertical: 8,
+ paddingRight: 24,
+ paddingLeft: 8,
+ overflow: 'hidden',
+ },
+ communityExpanded: {
+ backgroundColor: 'drawerOpenCommunityBackground',
+ borderTopRightRadius: 8,
+ borderBottomRightRadius: 8,
+ },
+};
+
+const MemoizedCommunityDrawerItemCommunity: React.ComponentType<DrawerItemProps> = React.memo(
+ CommunityDrawerItemCommunity,
+);
+export default MemoizedCommunityDrawerItemCommunity;
diff --git a/native/navigation/community-drawer-item.react.js b/native/navigation/community-drawer-item.react.js
new file mode 100644
--- /dev/null
+++ b/native/navigation/community-drawer-item.react.js
@@ -0,0 +1,129 @@
+// @flow
+
+import * as React from 'react';
+import { View, Text, FlatList, TouchableOpacity } from 'react-native';
+
+import type { ThreadInfo } from 'lib/types/thread-types';
+
+import type { MessageListParams } from '../chat/message-list-types';
+import { useStyles } from '../themes/colors';
+import { ExpandButton, ExpandButtonDisabled } from './expand-buttons.react';
+
+export type CommunityDrawerItemData = {
+ +threadInfo: ThreadInfo,
+ +itemChildren?: $ReadOnlyArray<CommunityDrawerItemData>,
+};
+
+export type DrawerItemProps = {
+ +itemData: CommunityDrawerItemData,
+ +toggleExpanded: (threadID: string) => void,
+ +expanded: boolean,
+ +navigateToThread: (params: MessageListParams) => void,
+};
+
+function CommunityDrawerItem(props: DrawerItemProps): React.Node {
+ const {
+ itemData: { threadInfo, itemChildren },
+ navigateToThread,
+ expanded,
+ toggleExpanded,
+ } = props;
+
+ const styles = useStyles(unboundStyles);
+
+ const renderItem = React.useCallback(
+ ({ item }) => (
+ <MemoizedCommunityDrawerItemChat
+ key={item.threadInfo.id}
+ itemData={item}
+ navigateToThread={navigateToThread}
+ />
+ ),
+ [navigateToThread],
+ );
+
+ const children = React.useMemo(() => {
+ if (!expanded) {
+ return null;
+ }
+ return <FlatList data={itemChildren} renderItem={renderItem} />;
+ }, [expanded, itemChildren, renderItem]);
+
+ const onExpandToggled = React.useCallback(() => {
+ toggleExpanded(threadInfo.id);
+ }, [toggleExpanded, threadInfo.id]);
+
+ const itemExpandButton = React.useMemo(() => {
+ if (!itemChildren?.length) {
+ return <ExpandButtonDisabled />;
+ }
+ return <ExpandButton onPress={onExpandToggled} expanded={expanded} />;
+ }, [itemChildren?.length, expanded, onExpandToggled]);
+
+ const onPress = React.useCallback(() => {
+ navigateToThread({ threadInfo });
+ }, [navigateToThread, threadInfo]);
+
+ return (
+ <View>
+ <View style={styles.threadEntry}>
+ {itemExpandButton}
+ <TouchableOpacity onPress={onPress}>
+ <Text style={styles.title}>{threadInfo.uiName}</Text>
+ </TouchableOpacity>
+ </View>
+ {children}
+ </View>
+ );
+}
+
+const unboundStyles = {
+ chatView: {
+ marginLeft: 16,
+ marginVertical: 6,
+ overflow: 'hidden',
+ },
+ threadEntry: {
+ flexDirection: 'row',
+ },
+ title: {
+ color: 'drawerItemLabel',
+ fontSize: 16,
+ lineHeight: 24,
+ },
+};
+
+export type CommunityDrawerItemChatProps = {
+ +itemData: CommunityDrawerItemData,
+ +navigateToThread: (params: MessageListParams) => void,
+};
+
+function CommunityDrawerItemChat(
+ props: CommunityDrawerItemChatProps,
+): React.Node {
+ const [expanded, setExpanded] = React.useState(false);
+ const styles = useStyles(unboundStyles);
+
+ const toggleExpanded = React.useCallback(() => {
+ setExpanded(isExpanded => !isExpanded);
+ }, []);
+
+ return (
+ <View style={styles.chatView}>
+ <CommunityDrawerItem
+ {...props}
+ expanded={expanded}
+ toggleExpanded={toggleExpanded}
+ />
+ </View>
+ );
+}
+const MemoizedCommunityDrawerItemChat: React.ComponentType<CommunityDrawerItemChatProps> = React.memo(
+ CommunityDrawerItemChat,
+);
+
+const MemoizedCommunityDrawerItem: React.ComponentType<DrawerItemProps> = React.memo(
+ CommunityDrawerItem,
+);
+
+export default MemoizedCommunityDrawerItem;
diff --git a/native/themes/colors.js b/native/themes/colors.js
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -89,6 +89,8 @@
siweButtonText: '#1F1F1F',
drawerExpandButton: '#808080',
drawerExpandButtonDisabled: '#404040',
+ drawerItemLabel: '#CCCCCC',
+ drawerOpenCommunityBackground: '#333333',
});
export type Colors = $Exact<typeof light>;
@@ -171,6 +173,8 @@
siweButtonText: '#1F1F1F',
drawerExpandButton: '#808080',
drawerExpandButtonDisabled: '#404040',
+ drawerItemLabel: '#CCCCCC',
+ drawerOpenCommunityBackground: '#333333',
});
const colors = { light, dark };

File Metadata

Mime Type
text/plain
Expires
Thu, Nov 28, 12:41 PM (21 h, 48 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2594006
Default Alt Text
D5721.diff (5 KB)

Event Timeline