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 @@ -43,6 +43,7 @@ threadInfo: item.threadInfo, itemChildren: item.itemChildren, labelStyle: item.labelStyle, + showSubchannelsButton: item.subchannelsButton, }; return ( [item, 0]); @@ -108,6 +110,9 @@ threadInfo: childItem, itemChildren: [], labelStyle: labelStyles[Math.min(lvl + 1, labelStyles.length - 1)], + showSubchannelsButton: + lvl + 1 === MAX_DEPTH && + childThreadInfosMap[childItem.id]?.length > 0, })); queue = queue.concat( item.itemChildren.map(childItem => [childItem, lvl + 1]), 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 @@ -10,11 +10,13 @@ import { useStyles } from '../themes/colors'; import type { TextStyle } from '../types/styles'; import { ExpandButton, ExpandButtonDisabled } from './expand-buttons.react'; +import SubchannelsButton from './subchannels-button.react'; export type CommunityDrawerItemData = { +threadInfo: ThreadInfo, +itemChildren?: $ReadOnlyArray, +labelStyle: TextStyle, + +showSubchannelsButton: boolean, }; export type DrawerItemProps = { @@ -26,7 +28,7 @@ function CommunityDrawerItem(props: DrawerItemProps): React.Node { const { - itemData: { threadInfo, itemChildren, labelStyle }, + itemData: { threadInfo, itemChildren, labelStyle, showSubchannelsButton }, navigateToThread, expanded, toggleExpanded, @@ -49,19 +51,33 @@ if (!expanded) { return null; } + if (showSubchannelsButton) { + return ( + + + + ); + } return ; - }, [expanded, itemChildren, renderItem]); + }, [ + expanded, + itemChildren, + renderItem, + showSubchannelsButton, + styles.subchannelsButton, + threadInfo, + ]); const onExpandToggled = React.useCallback(() => { toggleExpanded(threadInfo.id); }, [toggleExpanded, threadInfo.id]); const itemExpandButton = React.useMemo(() => { - if (!itemChildren?.length) { + if (!itemChildren?.length && !showSubchannelsButton) { return ; } return ; - }, [itemChildren?.length, expanded, onExpandToggled]); + }, [itemChildren?.length, showSubchannelsButton, onExpandToggled, expanded]); const onPress = React.useCallback(() => { navigateToThread({ threadInfo }); @@ -95,6 +111,10 @@ textTouchableWrapper: { flex: 1, }, + subchannelsButton: { + marginLeft: 24, + marginBottom: 6, + }, }; export type CommunityDrawerItemChatProps = {