diff --git a/web/sidebar/community-drawer-item.react.js b/web/sidebar/community-drawer-item.react.js --- a/web/sidebar/community-drawer-item.react.js +++ b/web/sidebar/community-drawer-item.react.js @@ -16,6 +16,7 @@ +toggleExpanded: (threadID: string) => void, +expanded: boolean, +paddingLeft: number, + +expandable?: boolean, }; const indentation = 14; @@ -27,6 +28,7 @@ expanded, toggleExpanded, paddingLeft, + expandable = true, } = props; const children = React.useMemo(() => { @@ -52,9 +54,17 @@ itemData={item} key={item.threadInfo.id} paddingLeft={paddingLeft + indentation} + expandable={expandable} /> )); - }, [expanded, hasSubchannelsButton, itemChildren, paddingLeft, threadInfo]); + }, [ + expanded, + hasSubchannelsButton, + itemChildren, + paddingLeft, + expandable, + threadInfo, + ]); const onExpandToggled = React.useCallback( () => toggleExpanded(threadInfo.id), @@ -62,6 +72,9 @@ ); const itemExpandButton = React.useMemo(() => { + if (!expandable) { + return null; + } if (itemChildren?.length === 0 && !hasSubchannelsButton) { return (
@@ -74,7 +87,13 @@
); - }, [itemChildren?.length, hasSubchannelsButton, onExpandToggled, expanded]); + }, [ + expandable, + itemChildren?.length, + hasSubchannelsButton, + onExpandToggled, + expanded, + ]); const Handler = useSelector(state => getCommunityDrawerItemHandler(state.navInfo.tab), @@ -106,6 +125,7 @@ export type CommunityDrawerItemChatProps = { +itemData: CommunityDrawerItemData, +paddingLeft: number, + +expandable?: boolean, }; function CommunityDrawerItemChat( diff --git a/web/sidebar/community-drawer.react.js b/web/sidebar/community-drawer.react.js --- a/web/sidebar/community-drawer.react.js +++ b/web/sidebar/community-drawer.react.js @@ -16,10 +16,12 @@ import CommunityDrawerItemCommunity from './community-drawer-item-community.react'; import css from './community-drawer.css'; -const maxDepth = 2; const labelStyles = ['titleLevel0', 'titleLevel1', 'titleLevel2']; -function CommunityDrawer(): React.Node { +const maxDepth = 2; + +function CommunityDrawerContent(): React.Node { + const tab = useSelector(state => state.navInfo.tab); const childThreadInfosMap = useSelector(childThreadInfos); const communities = useSelector(communityThreadSelector); const communitiesSuffixed = React.useMemo(() => appendSuffix(communities), [ @@ -37,25 +39,57 @@ communitiesSuffixed.length === 1 ? communitiesSuffixed[0].id : null, ); - const setOpenCommunityOrClose = React.useCallback((communityID: string) => { - setOpenCommunity(open => (open === communityID ? null : communityID)); + const setOpenCommunityOrClose = React.useCallback((index: string) => { + setOpenCommunity(open => (open === index ? null : index)); }, []); - const communitiesComponents = drawerItemsData.map(item => ( - - )); + const communitiesComponentsDefault = React.useMemo( + () => + drawerItemsData.map(item => ( + + )), + [drawerItemsData, openCommunity, setOpenCommunityOrClose], + ); + + const communitiesComponentsCal = React.useMemo( + () => + drawerItemsData.map(item => ( + {}} + expanded={false} + paddingLeft={10} + expandable={false} + /> + )), + [drawerItemsData], + ); + + const defaultStyle = React.useMemo( + () => (tab === 'calendar' ? { display: 'none' } : null), + [tab], + ); + const calStyle = React.useMemo( + () => (tab !== 'calendar' ? { display: 'none' } : null), + [tab], + ); return ( -
{communitiesComponents}
+
+
{communitiesComponentsDefault}
+
{communitiesComponentsCal}
+
); } -export default CommunityDrawer; +export default CommunityDrawerContent;