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;