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: [], + }, + onOptionSelected, + ); + }, [ + options, + onOptionSelected, + insets.bottom, + activeTheme, + showActionSheetWithOptions, + ]); + const menuButton = React.useMemo(() => { if (roleName === 'Admins') { return ; } return ( - + ); - }, [roleName, styles.rolePanelEmptyMenuButton, styles.rolePanelMenuButton]); + }, [ + roleName, + styles.rolePanelEmptyMenuButton, + styles.rolePanelMenuButton, + showActionSheet, + ]); return (