Page MenuHomePhabricator
Files F3524362

D8112.diff
No OneTemporary
Actions

D8112.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

Mime Type
text/plain
Expires
Tue, Dec 24, 12:25 PM (17 h, 40 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2699987
Default Alt Text
D8112.diff (11 KB)

Event Timeline