Page Menu
Home
Phabricator
Search
Configure Global Search
Log In
Files
F3525936
D8112.id27698.diff
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Flag For Later
Size
11 KB
Referenced Files
None
Subscribers
None
D8112.id27698.diff
View Options
diff --git a/native/navigation/community-drawer-content.react.js b/native/navigation/community-drawer-content.react.js
--- a/native/navigation/community-drawer-content.react.js
+++ b/native/navigation/community-drawer-content.react.js
@@ -15,6 +15,7 @@
childThreadInfos,
communityThreadSelector,
} from 'lib/selectors/thread-selectors.js';
+import { threadTypeIsCommunityRoot } from 'lib/types/thread-types-enum.js';
import {
useDispatchActionPromise,
useServerCall,
@@ -25,11 +26,15 @@
} from 'lib/utils/drawer-utils.react.js';
import { useResolvedThreadInfos } from 'lib/utils/entity-helpers.js';
-import CommunityDrawerItemCommunity from './community-drawer-item-community.react.js';
+import CommunityDrawerItem from './community-drawer-item.react.js';
import { CommunityCreationRouteName } from './route-names.js';
import { useNavigateToThread } from '../chat/message-list-types.js';
import SWMansionIcon from '../components/swmansion-icon.react.js';
import { useStyles } from '../themes/colors.js';
+import {
+ flattenDrawerItemsData,
+ filterOutThreadAndDescendantIDs,
+} from '../utils/drawer-utils.react.js';
const maxDepth = 2;
const safeAreaEdges = Platform.select({
@@ -61,28 +66,17 @@
})();
}, [callFetchPrimaryLinks, dispatchActionPromise, drawerStatus]);
- const [openCommunity, setOpenCommunity] = React.useState(
- communitiesSuffixed.length === 1 ? communitiesSuffixed[0].id : null,
- );
-
- const navigateToThread = useNavigateToThread();
- const childThreadInfosMap = useSelector(childThreadInfos);
-
- const setOpenCommunityOrClose = React.useCallback((index: string) => {
- setOpenCommunity(open => (open === index ? null : index));
- }, []);
-
- const renderItem = React.useCallback(
- ({ item }) => (
- <CommunityDrawerItemCommunity
- key={item.threadInfo.id}
- itemData={item}
- toggleExpanded={setOpenCommunityOrClose}
- expanded={item.threadInfo.id === openCommunity}
- navigateToThread={navigateToThread}
- />
- ),
- [navigateToThread, openCommunity, setOpenCommunityOrClose],
+ const [expanded, setExpanded] = React.useState(() => {
+ if (communitiesSuffixed.length === 1) {
+ return new Set([communitiesSuffixed[0].id]);
+ }
+ return new Set();
+ });
+
+ const setOpenCommunityOrClose = React.useCallback(
+ (id: string) =>
+ expanded.has(id) ? setExpanded(new Set()) : setExpanded(new Set([id])),
+ [expanded],
);
const labelStylesObj = useStyles(labelUnboundStyles);
@@ -94,6 +88,7 @@
],
[labelStylesObj],
);
+ const childThreadInfosMap = useSelector(childThreadInfos);
const drawerItemsData = React.useMemo(
() =>
@@ -106,6 +101,43 @@
[childThreadInfosMap, communitiesSuffixed, labelStyles],
);
+ const toggleExpanded = React.useCallback(
+ (id: string) =>
+ setExpanded(expandedState => {
+ if (expanded.has(id)) {
+ return new Set(
+ filterOutThreadAndDescendantIDs(
+ [...expandedState.values()],
+ drawerItemsData,
+ id,
+ ),
+ );
+ }
+ return new Set([...expanded.values(), id]);
+ }),
+ [drawerItemsData, expanded],
+ );
+
+ const navigateToThread = useNavigateToThread();
+
+ const renderItem = React.useCallback(
+ ({ item }) => {
+ const isCommunity = threadTypeIsCommunityRoot(item.threadInfo.type);
+ return (
+ <CommunityDrawerItem
+ key={item.threadInfo.id}
+ itemData={item}
+ navigateToThread={navigateToThread}
+ isExpanded={expanded.has(item.threadInfo.id)}
+ toggleExpanded={
+ isCommunity ? setOpenCommunityOrClose : toggleExpanded
+ }
+ />
+ );
+ },
+ [expanded, navigateToThread, setOpenCommunityOrClose, toggleExpanded],
+ );
+
const { navigate } = useNavigation();
const onPressCommunityCreation = React.useCallback(() => {
navigate(CommunityCreationRouteName);
@@ -126,9 +158,18 @@
</TouchableOpacity>
);
+ const flattenedDrawerItemsData = React.useMemo(
+ () => flattenDrawerItemsData(drawerItemsData, [...expanded.values()]),
+ [drawerItemsData, expanded],
+ );
+
return (
<SafeAreaView style={styles.drawerContent} edges={safeAreaEdges}>
- <FlatList data={drawerItemsData} renderItem={renderItem} />
+ <FlatList
+ data={flattenedDrawerItemsData}
+ renderItem={renderItem}
+ initialNumToRender={30}
+ />
{communityCreationButton}
</SafeAreaView>
);
diff --git a/native/navigation/community-drawer-item-community.react.js b/native/navigation/community-drawer-item-community.react.js
deleted file mode 100644
--- a/native/navigation/community-drawer-item-community.react.js
+++ /dev/null
@@ -1,44 +0,0 @@
-// @flow
-
-import * as React from 'react';
-import { View } from 'react-native';
-
-import CommunityDrawerItem from './community-drawer-item.react.js';
-import type { DrawerItemProps } from './community-drawer-item.react.js';
-import { useStyles } from '../themes/colors.js';
-
-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: 2,
- 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
--- a/native/navigation/community-drawer-item.react.js
+++ b/native/navigation/community-drawer-item.react.js
@@ -1,9 +1,8 @@
// @flow
import * as React from 'react';
-import { View, FlatList, TouchableOpacity } from 'react-native';
+import { View, TouchableOpacity } from 'react-native';
-import type { CommunityDrawerItemData } from 'lib/utils/drawer-utils.react.js';
import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
import { ExpandButton, ExpandButtonDisabled } from './expand-buttons.react.js';
@@ -13,68 +12,53 @@
import { SingleLine } from '../components/single-line.react.js';
import InviteLinksButton from '../invite-links/invite-links-button.react.js';
import { useStyles } from '../themes/colors.js';
-import type { TextStyle } from '../types/styles.js';
import { useShouldRenderAvatars } from '../utils/avatar-utils.js';
+import type { CommunityDrawerItemDataFlattened } from '../utils/drawer-utils.react.js';
export type DrawerItemProps = {
- +itemData: CommunityDrawerItemData<TextStyle>,
+ +itemData: CommunityDrawerItemDataFlattened,
+toggleExpanded: (threadID: string) => void,
- +expanded: boolean,
+ +isExpanded: boolean,
+navigateToThread: (params: MessageListParams) => void,
};
function CommunityDrawerItem(props: DrawerItemProps): React.Node {
const {
- itemData: { threadInfo, itemChildren, labelStyle, hasSubchannelsButton },
+ itemData: {
+ threadInfo,
+ labelStyle,
+ hasSubchannelsButton,
+ hasChildren,
+ itemStyle,
+ },
navigateToThread,
- expanded,
+ isExpanded,
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;
- }
- if (hasSubchannelsButton) {
+ const subchannelsButton = React.useMemo(() => {
+ if (isExpanded && hasSubchannelsButton) {
return (
<View style={styles.subchannelsButton}>
<SubchannelsButton threadInfo={threadInfo} />
</View>
);
}
- return <FlatList data={itemChildren} renderItem={renderItem} />;
- }, [
- expanded,
- itemChildren,
- renderItem,
- hasSubchannelsButton,
- styles.subchannelsButton,
- threadInfo,
- ]);
+ return null;
+ }, [isExpanded, hasSubchannelsButton, styles.subchannelsButton, threadInfo]);
const onExpandToggled = React.useCallback(() => {
toggleExpanded(threadInfo.id);
}, [toggleExpanded, threadInfo.id]);
const itemExpandButton = React.useMemo(() => {
- if (!itemChildren?.length && !hasSubchannelsButton) {
+ if (!hasChildren && !hasSubchannelsButton) {
return <ExpandButtonDisabled />;
}
- return <ExpandButton onPress={onExpandToggled} expanded={expanded} />;
- }, [itemChildren?.length, hasSubchannelsButton, onExpandToggled, expanded]);
+ return <ExpandButton onPress={onExpandToggled} expanded={isExpanded} />;
+ }, [hasChildren, hasSubchannelsButton, onExpandToggled, isExpanded]);
const onPress = React.useCallback(() => {
navigateToThread({ threadInfo });
@@ -96,8 +80,19 @@
);
}, [shouldRenderAvatars, styles.avatarContainer, threadInfo]);
+ const containerStyle = React.useMemo(
+ () => [
+ styles.container,
+ {
+ paddingLeft: itemStyle.indentation,
+ },
+ styles[itemStyle.background],
+ ],
+ [itemStyle.indentation, itemStyle.background, styles],
+ );
+
return (
- <View>
+ <View style={containerStyle}>
<View style={styles.threadEntry}>
{itemExpandButton}
<TouchableOpacity
@@ -110,18 +105,35 @@
</TouchableOpacity>
<InviteLinksButton community={threadInfo} />
</View>
- {children}
+ {subchannelsButton}
</View>
);
}
const unboundStyles = {
+ container: {
+ paddingRight: 24,
+ },
+ none: {
+ paddingVertical: 2,
+ },
+ beginning: {
+ backgroundColor: 'drawerOpenCommunityBackground',
+ borderTopRightRadius: 8,
+ paddingTop: 2,
+ },
+ middle: {
+ backgroundColor: 'drawerOpenCommunityBackground',
+ paddingRight: 24,
+ },
+ end: {
+ backgroundColor: 'drawerOpenCommunityBackground',
+ borderBottomRightRadius: 8,
+ paddingBottom: 2,
+ },
avatarContainer: {
marginRight: 8,
},
- chatView: {
- marginLeft: 16,
- },
threadEntry: {
flexDirection: 'row',
marginVertical: 6,
@@ -137,34 +149,6 @@
},
};
-export type CommunityDrawerItemChatProps = {
- +itemData: CommunityDrawerItemData<TextStyle>,
- +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);
File Metadata
Details
Attached
Mime Type
text/plain
Expires
Tue, Dec 24, 6:53 PM (8 h, 35 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2699987
Default Alt Text
D8112.id27698.diff (11 KB)
Attached To
Mode
D8112: [native] Flatten nested FlatLists in community drawer
Attached
Detach File
Event Timeline
Log In to Comment