diff --git a/native/invite-links/invite-links-button.react.js b/native/components/community-actions-button.react.js similarity index 95% rename from native/invite-links/invite-links-button.react.js rename to native/components/community-actions-button.react.js index f7aa6b8d4..d9e8d0a40 100644 --- a/native/invite-links/invite-links-button.react.js +++ b/native/components/community-actions-button.react.js @@ -1,134 +1,134 @@ // @flow import { useActionSheet } from '@expo/react-native-action-sheet'; import { useNavigation } from '@react-navigation/native'; import * as React from 'react'; import { TouchableOpacity, View } from 'react-native'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { primaryInviteLinksSelector } from 'lib/selectors/invite-links-selectors.js'; import { threadHasPermission } from 'lib/shared/thread-utils.js'; import { threadPermissions } from 'lib/types/thread-permission-types.js'; import type { ThreadInfo } from 'lib/types/thread-types.js'; -import SWMansionIcon from '../components/swmansion-icon.react.js'; +import SWMansionIcon from './swmansion-icon.react.js'; import { InviteLinkNavigatorRouteName, ManagePublicLinkRouteName, ViewInviteLinksRouteName, } from '../navigation/route-names.js'; import { useSelector } from '../redux/redux-utils.js'; import { useStyles } from '../themes/colors.js'; type Props = { +community: ThreadInfo, }; -function InviteLinksButton(props: Props): React.Node { +function CommunityActionsButton(props: Props): React.Node { const { community } = props; const inviteLink = useSelector(primaryInviteLinksSelector)[community.id]; const { navigate } = useNavigation(); const navigateToInviteLinksView = React.useCallback(() => { if (!inviteLink || !community) { return; } navigate<'InviteLinkNavigator'>(InviteLinkNavigatorRouteName, { screen: ViewInviteLinksRouteName, params: { community, }, }); }, [community, inviteLink, navigate]); const navigateToManagePublicLinkView = React.useCallback(() => { navigate<'InviteLinkNavigator'>(InviteLinkNavigatorRouteName, { screen: ManagePublicLinkRouteName, params: { community, }, }); }, [community, navigate]); const insets = useSafeAreaInsets(); const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme); const styles = useStyles(unboundStyles); const { showActionSheetWithOptions } = useActionSheet(); const actions = React.useMemo(() => { if (!community) { return null; } const result = []; const canManageLinks = threadHasPermission( community, threadPermissions.MANAGE_INVITE_LINKS, ); if (canManageLinks) { result.push({ label: 'Manage invite links', action: navigateToManagePublicLinkView, }); } if (inviteLink) { result.push({ label: 'Invite link', action: navigateToInviteLinksView, }); } if (result.length > 0) { return result; } return null; }, [ community, inviteLink, navigateToInviteLinksView, navigateToManagePublicLinkView, ]); const openActionSheet = React.useCallback(() => { if (!actions) { return; } const options = [...actions.map(a => a.label), 'Cancel']; showActionSheetWithOptions( { options, cancelButtonIndex: options.length - 1, containerStyle: { paddingBottom: insets.bottom, }, userInterfaceStyle: activeTheme ?? 'dark', }, selectedIndex => { if (selectedIndex !== undefined && selectedIndex < actions.length) { actions[selectedIndex].action(); } }, ); }, [actions, activeTheme, insets.bottom, showActionSheetWithOptions]); let button = null; if (actions) { button = ( ); } return {button}; } const unboundStyles = { button: { color: 'drawerItemLabelLevel0', }, container: { width: 22, }, }; -export default InviteLinksButton; +export default CommunityActionsButton; diff --git a/native/navigation/community-drawer-item.react.js b/native/navigation/community-drawer-item.react.js index 83a58d6fb..77bb75d16 100644 --- a/native/navigation/community-drawer-item.react.js +++ b/native/navigation/community-drawer-item.react.js @@ -1,142 +1,142 @@ // @flow import * as React from 'react'; import { View, TouchableOpacity } from 'react-native'; import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js'; import { ExpandButton, ExpandButtonDisabled } from './expand-buttons.react.js'; import SubchannelsButton from './subchannels-button.react.js'; import ThreadAvatar from '../avatars/thread-avatar.react.js'; import type { MessageListParams } from '../chat/message-list-types.js'; +import CommunityActionsButton from '../components/community-actions-button.react.js'; 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 { CommunityDrawerItemDataFlattened } from '../utils/drawer-utils.react.js'; export type DrawerItemProps = { +itemData: CommunityDrawerItemDataFlattened, +toggleExpanded: (threadID: string) => void, +isExpanded: boolean, +navigateToThread: (params: MessageListParams) => void, }; function CommunityDrawerItem(props: DrawerItemProps): React.Node { const { itemData: { threadInfo, labelStyle, hasSubchannelsButton, hasChildren, itemStyle, }, navigateToThread, isExpanded, toggleExpanded, } = props; const styles = useStyles(unboundStyles); const subchannelsButton = React.useMemo(() => { if (isExpanded && hasSubchannelsButton) { return ( ); } return null; }, [isExpanded, hasSubchannelsButton, styles.subchannelsButton, threadInfo]); const onExpandToggled = React.useCallback(() => { toggleExpanded(threadInfo.id); }, [toggleExpanded, threadInfo.id]); const itemExpandButton = React.useMemo(() => { if (!hasChildren && !hasSubchannelsButton) { return ; } return ; }, [hasChildren, hasSubchannelsButton, onExpandToggled, isExpanded]); const onPress = React.useCallback(() => { navigateToThread({ threadInfo }); }, [navigateToThread, threadInfo]); const { uiName } = useResolvedThreadInfo(threadInfo); const containerStyle = React.useMemo( () => [ styles.container, { paddingLeft: itemStyle.indentation, }, styles[itemStyle.background], ], [itemStyle.indentation, itemStyle.background, styles], ); return ( {itemExpandButton} {uiName} - + {subchannelsButton} ); } const unboundStyles = { container: { paddingRight: 8, }, none: { paddingVertical: 2, }, beginning: { backgroundColor: 'drawerOpenCommunityBackground', borderTopRightRadius: 8, paddingTop: 2, }, middle: { backgroundColor: 'drawerOpenCommunityBackground', }, end: { backgroundColor: 'drawerOpenCommunityBackground', borderBottomRightRadius: 8, paddingBottom: 2, }, avatarContainer: { marginRight: 8, }, threadEntry: { flexDirection: 'row', marginVertical: 6, }, textTouchableWrapper: { flex: 1, flexDirection: 'row', alignItems: 'center', marginRight: 24, }, subchannelsButton: { marginLeft: 24, marginBottom: 6, }, }; const MemoizedCommunityDrawerItem: React.ComponentType = React.memo(CommunityDrawerItem); export default MemoizedCommunityDrawerItem;