Page MenuHomePhorge
Files F32199465

D8523.1765106479.diff
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

D8523.1765106479.diff
View Options

diff --git a/native/roles/role-panel-entry.react.js b/native/roles/role-panel-entry.react.js
--- a/native/roles/role-panel-entry.react.js
+++ b/native/roles/role-panel-entry.react.js
@@ -1,10 +1,13 @@
// @flow
+import { useActionSheet } from '@expo/react-native-action-sheet';
import * as React from 'react';
-import { View, Text, TouchableOpacity } from 'react-native';
+import { View, Text, TouchableOpacity, Platform } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
import CommIcon from '../components/comm-icon.react.js';
import SWMansionIcon from '../components/swmansion-icon.react.js';
+import { useSelector } from '../redux/redux-utils.js';
import { useStyles } from '../themes/colors.js';
type RolePanelEntryProps = {
@@ -16,12 +19,59 @@
const { roleName, memberCount } = props;
const styles = useStyles(unboundStyles);
+ const options = React.useMemo(() => {
+ const availableOptions = ['Edit role'];
+
+ if (Platform.OS === 'ios') {
+ availableOptions.push('Cancel');
+ }
+
+ return availableOptions;
+ }, []);
+
+ const onOptionSelected = React.useCallback(
+ (index: ?number) => {
+ if (index === undefined || index === null || index === options.length) {
+ return;
+ }
+ },
+ [options.length],
+ );
+
+ const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
+ const { showActionSheetWithOptions } = useActionSheet();
+ const insets = useSafeAreaInsets();
+
+ const showActionSheet = React.useCallback(() => {
+ const cancelButtonIndex = Platform.OS === 'ios' ? options.length - 1 : -1;
+ const containerStyle = {
+ paddingBottom: insets.bottom,
+ };
+
+ showActionSheetWithOptions(
+ {
+ options,
+ cancelButtonIndex,
+ containerStyle,
+ userInterfaceStyle: activeTheme ?? 'dark',
+ icons: [<SWMansionIcon key="edit-1" name="edit-1" size={20} />],
+ },
+ onOptionSelected,
+ );
+ }, [
+ options,
+ onOptionSelected,
+ insets.bottom,
+ activeTheme,
+ showActionSheetWithOptions,
+ ]);
+
const menuButton = React.useMemo(() => {
if (roleName === 'Admins') {
return <View style={styles.rolePanelEmptyMenuButton} />;
}
return (
- <TouchableOpacity>
+ <TouchableOpacity onPress={showActionSheet}>
<SWMansionIcon
name="menu-horizontal"
size={22}
@@ -29,7 +79,12 @@
/>
</TouchableOpacity>
);
- }, [roleName, styles.rolePanelEmptyMenuButton, styles.rolePanelMenuButton]);
+ }, [
+ roleName,
+ styles.rolePanelEmptyMenuButton,
+ styles.rolePanelMenuButton,
+ showActionSheet,
+ ]);
return (
<View style={styles.rolePanelEntry}>

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 7, 11:21 AM (17 h, 47 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5843283
Default Alt Text
D8523.1765106479.diff (2 KB)

Event Timeline