Page MenuHomePhabricator

D8915.id30447.diff
No OneTemporary

D8915.id30447.diff

diff --git a/native/components/user-profile.react.js b/native/components/user-profile.react.js
--- a/native/components/user-profile.react.js
+++ b/native/components/user-profile.react.js
@@ -1,9 +1,11 @@
// @flow
+import Clipboard from '@react-native-clipboard/clipboard';
import * as React from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, TouchableOpacity } from 'react-native';
import type { AccountUserInfo } from 'lib/types/user-types';
+import sleep from 'lib/utils/sleep.js';
import SWMansionIcon from './swmansion-icon.react.js';
import UserAvatar from '../avatars/user-avatar.react.js';
@@ -16,8 +18,48 @@
function UserProfile(props: Props): React.Node {
const { userInfo } = props;
+ const [usernameCopied, setUsernameCopied] = React.useState<boolean>(false);
+
const styles = useStyles(unboundStyles);
+ const onPressCopyUsername = React.useCallback(async () => {
+ Clipboard.setString(userInfo.username);
+ setUsernameCopied(true);
+ await sleep(3000);
+ setUsernameCopied(false);
+ }, [userInfo.username]);
+
+ const copyUsernameButton = React.useMemo(() => {
+ if (usernameCopied) {
+ return (
+ <View style={styles.copyUsernameContainer}>
+ <SWMansionIcon
+ name="check"
+ style={styles.copyUsernameIcon}
+ size={16}
+ />
+ <Text style={styles.copyUsernameText}>Username copied!</Text>
+ </View>
+ );
+ }
+
+ return (
+ <TouchableOpacity
+ style={styles.copyUsernameContainer}
+ onPress={onPressCopyUsername}
+ >
+ <SWMansionIcon name="copy" style={styles.copyUsernameIcon} size={16} />
+ <Text style={styles.copyUsernameText}>Copy username</Text>
+ </TouchableOpacity>
+ );
+ }, [
+ onPressCopyUsername,
+ styles.copyUsernameContainer,
+ styles.copyUsernameIcon,
+ styles.copyUsernameText,
+ usernameCopied,
+ ]);
+
return (
<View style={styles.container}>
<SWMansionIcon name="menu-vertical" size={24} style={styles.moreIcon} />
@@ -25,14 +67,7 @@
<UserAvatar size="profile" userID={userInfo.id} />
<View style={styles.usernameContainer}>
<Text style={styles.usernameText}>{userInfo.username}</Text>
- <View style={styles.copyUsernameContainer}>
- <SWMansionIcon
- name="copy"
- style={styles.copyUsernameIcon}
- size={16}
- />
- <Text style={styles.copyUsernameText}>Copy username</Text>
- </View>
+ {copyUsernameButton}
</View>
</View>
</View>

File Metadata

Mime Type
text/plain
Expires
Mon, Dec 2, 8:16 AM (17 h, 33 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2607094
Default Alt Text
D8915.id30447.diff (2 KB)

Event Timeline