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 ( + + + + ); +} + +const unboundStyles = { + communityBase: { + paddingVertical: 8, + paddingRight: 24, + paddingLeft: 8, + overflow: 'hidden', + }, + communityExpanded: { + backgroundColor: 'drawerOpenCommunityBackground', + borderTopRightRadius: 8, + borderBottomRightRadius: 8, + }, +}; + +const MemoizedCommunityDrawerItemCommunity: React.ComponentType = 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, +}; + +export type DrawerItemProps = { + +itemData: CommunityDrawerItemData, + +setExpanded: (threadID: string) => void, + +expanded: boolean, + +navigateToThread: (params: MessageListParams) => void, +}; + +function CommunityDrawerItem(props: DrawerItemProps): React.Node { + const { + itemData: { threadInfo, itemChildren }, + navigateToThread, + expanded, + setExpanded, + } = props; + + const styles = useStyles(unboundStyles); + + const renderItem = React.useCallback( + ({ item }) => ( + + ), + [navigateToThread], + ); + + const children = React.useMemo(() => { + if (!expanded) { + return null; + } + return ; + }, [expanded, itemChildren, renderItem]); + + const onExpandToggled = React.useCallback(() => { + setExpanded(threadInfo.id); + }, [setExpanded, threadInfo.id]); + + const itemExpandButton = React.useMemo(() => { + if (!itemChildren?.length) { + return ; + } + return ; + }, [itemChildren?.length, expanded, onExpandToggled]); + + const onPress = React.useCallback(() => { + navigateToThread({ threadInfo }); + }, [navigateToThread, threadInfo]); + + return ( + + + {itemExpandButton} + + {threadInfo.uiName} + + + {children} + + ); +} + +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 wrappedSetExpanded = React.useCallback(() => { + setExpanded(isExpanded => !isExpanded); + }, []); + + return ( + + + + ); +} +const MemoizedCommunityDrawerItemChat: React.ComponentType = React.memo( + CommunityDrawerItemChat, +); + +const MemoizedCommunityDrawerItem: React.ComponentType = 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 @@ -84,6 +84,8 @@ tooltipBackground: '#E0E0E0', drawerExpandButton: '#808080', drawerExpandButtonDisabled: '#404040', + drawerItemLabel: '#CCCCCC', + drawerOpenCommunityBackground: '#333333', }); export type Colors = $Exact; @@ -161,6 +163,8 @@ tooltipBackground: '#1F1F1F', drawerExpandButton: '#808080', drawerExpandButtonDisabled: '#404040', + drawerItemLabel: '#CCCCCC', + drawerOpenCommunityBackground: '#333333', }); const colors = { light, dark };