Page MenuHomePhabricator
Files F3295881

D7459.diff
No OneTemporary
Actions

D7459.diff
View Options

diff --git a/native/components/edit-avatar.react.js b/native/components/edit-avatar.react.js
--- a/native/components/edit-avatar.react.js
+++ b/native/components/edit-avatar.react.js
@@ -1,8 +1,11 @@
// @flow
+import { useActionSheet } from '@expo/react-native-action-sheet';
import * as React from 'react';
-import { View, TouchableOpacity } from 'react-native';
+import { View, 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 { useColors, useStyles } from '../themes/colors.js';
@@ -14,9 +17,77 @@
function EditAvatar(props: Props): React.Node {
const { onPressEmojiAvatarFlow, children, disabled } = props;
+ const { showActionSheetWithOptions } = useActionSheet();
+
const colors = useColors();
const styles = useStyles(unboundStyles);
+ const editAvatarOptions = React.useMemo(() => {
+ const options = [
+ {
+ id: 'emoji',
+ text: 'Use Emoji',
+ onPress: onPressEmojiAvatarFlow,
+ icon: (
+ <CommIcon
+ name="emote-smile-filled"
+ size={18}
+ style={styles.bottomSheetIcon}
+ />
+ ),
+ },
+ ];
+
+ if (Platform.OS === 'ios') {
+ options.push({
+ id: 'cancel',
+ text: 'Cancel',
+ isCancel: true,
+ });
+ }
+ return options;
+ }, [onPressEmojiAvatarFlow, styles.bottomSheetIcon]);
+
+ const insets = useSafeAreaInsets();
+
+ const onPressEditAvatar = React.useCallback(() => {
+ const texts = editAvatarOptions.map(option => option.text);
+
+ const cancelButtonIndex = editAvatarOptions.findIndex(
+ option => option.isCancel,
+ );
+
+ const containerStyle = {
+ paddingBottom: insets.bottom,
+ };
+
+ const icons = editAvatarOptions.map(option => option.icon);
+
+ const onPressAction = (selectedIndex: ?number) => {
+ if (
+ selectedIndex === null ||
+ selectedIndex === undefined ||
+ selectedIndex < 0
+ ) {
+ return;
+ }
+ const option = editAvatarOptions[selectedIndex];
+ if (option.onPress) {
+ option.onPress();
+ }
+ };
+
+ showActionSheetWithOptions(
+ {
+ options: texts,
+ cancelButtonIndex,
+ containerStyle,
+ icons,
+ },
+ onPressAction,
+ );
+ }, [editAvatarOptions, insets.bottom, showActionSheetWithOptions]);
+
const editBadge = React.useMemo(() => {
if (disabled) {
return null;
@@ -40,7 +111,7 @@
]);
return (
- <TouchableOpacity onPress={onPressEmojiAvatarFlow} disabled={disabled}>
+ <TouchableOpacity onPress={onPressEditAvatar} disabled={disabled}>
{children}
{editBadge}
</TouchableOpacity>
@@ -63,6 +134,9 @@
editAvatarIcon: {
textAlign: 'center',
},
+ bottomSheetIcon: {
+ color: '#000000',
+ },
};
export default EditAvatar;

File Metadata

Mime Type
text/plain
Expires
Sun, Nov 17, 11:36 PM (22 h, 13 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2532322
Default Alt Text
D7459.diff (2 KB)

Event Timeline