@ethora/chat-component-rn 26.8.1 → 26.8.3

package/src/components/Modals/ProfileHeader/ProfileMenu.tsx

@@ -0,0 +1,224 @@
+/** @format */
+
+import React, { useRef, useState } from 'react';
+import {
+  Animated,
+  Dimensions,
+  Easing,
+  Modal,
+  Pressable,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { MoreIcon } from '../../../assets/icons';
+import { useTheme } from '../../../hooks/useTheme';
+
+export interface ProfileMenuItem {
+  key: string;
+  label: string;
+  icon: React.ReactNode;
+  destructive?: boolean;
+  onPress: () => void;
+}
+
+/** Fallbacks used for the very first frame, before the card is measured. */
+const ESTIMATED_WIDTH = 220;
+const ESTIMATED_HEIGHT = 160;
+const GAP = 8;
+/** Roughly a notch inset + the header band, used until measured. */
+const DEFAULT_TOP = 104;
+const EDGE = 12;
+
+/**
+ * The "…" overflow menu shared by the chat and user profile screens.
+ *
+ * The shared `DropdownMenu` pins its card at a hard-coded `top: 95`, which
+ * on this screen landed it over the host's own tab bar, unanchored to the
+ * button. This one measures the button and grows the card out of it: the
+ * card scales up from its top-right corner (translate → scale → translate
+ * back, which is how you fake a transform-origin in React Native) so the
+ * menu visibly unfolds from the three dots.
+ */
+const ProfileMenu: React.FC<{
+  items: ProfileMenuItem[];
+  testIDPrefix?: string;
+}> = ({ items, testIDPrefix = 'chat-profile' }) => {
+  const theme = useTheme();
+  const buttonRef = useRef<View>(null);
+  const [open, setOpen] = useState(false);
+  const [anchor, setAnchor] = useState({ top: DEFAULT_TOP, right: EDGE });
+  const [size, setSize] = useState({
+    width: ESTIMATED_WIDTH,
+    height: ESTIMATED_HEIGHT,
+  });
+  const progress = useRef(new Animated.Value(0)).current;
+
+  const animate = (to: number, done?: () => void) =>
+    Animated.timing(progress, {
+      toValue: to,
+      duration: to ? 180 : 140,
+      easing: to ? Easing.out(Easing.back(1.3)) : Easing.in(Easing.quad),
+      useNativeDriver: true,
+    }).start(({ finished }) => finished && done?.());
+
+  // Anchor to the button's window frame — that is the same coordinate
+  // space the <Modal> lays out in, so no insets to subtract. Measured on
+  // layout (and again on open) rather than *before* opening: on some hosts
+  // the measure callback never fires, and gating the open on it would mean
+  // a menu that simply doesn't appear.
+  const measure = () =>
+    buttonRef.current?.measureInWindow?.((x, y, width, height) => {
+      if (typeof y !== 'number' || typeof x !== 'number') {return;}
+      const screenWidth = Dimensions.get('window').width;
+      setAnchor({
+        top: y + height + GAP,
+        right: Math.max(screenWidth - (x + width), EDGE),
+      });
+    });
+
+  const openMenu = () => {
+    measure();
+    progress.setValue(0);
+    setOpen(true);
+    animate(1);
+  };
+
+  const closeMenu = (then?: () => void) =>
+    animate(0, () => {
+      setOpen(false);
+      then?.();
+    });
+
+  const scale = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0.2, 1],
+  });
+
+  if (items.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <View ref={buttonRef} collapsable={false} onLayout={measure}>
+        <TouchableOpacity
+          testID={`${testIDPrefix}-menu`}
+          activeOpacity={0.7}
+          onPress={openMenu}
+          style={styles.button}
+        >
+          <MoreIcon color="#FFFFFF" />
+        </TouchableOpacity>
+      </View>
+
+      <Modal
+        transparent
+        visible={open}
+        animationType="none"
+        onRequestClose={() => closeMenu()}
+      >
+        <Pressable
+          testID={`${testIDPrefix}-menu-backdrop`}
+          style={StyleSheet.absoluteFill}
+          onPress={() => closeMenu()}
+        />
+        <Animated.View
+          testID={`${testIDPrefix}-menu-card`}
+          onLayout={(e) => {
+            const { width, height } = e.nativeEvent.layout;
+            if (width && height) {setSize({ width, height });}
+          }}
+          style={[
+            styles.card,
+            {
+              backgroundColor: theme.surface,
+              shadowColor: theme.shadow,
+              top: anchor.top,
+              right: anchor.right,
+              opacity: progress,
+              transform: [
+                // Move the origin to the card's top-right corner, scale
+                // there, then move back — RN has no transform-origin.
+                { translateX: size.width / 2 },
+                { translateY: -size.height / 2 },
+                { scale },
+                { translateX: -size.width / 2 },
+                { translateY: size.height / 2 },
+              ],
+            },
+          ]}
+        >
+          {items.map((item, index) => (
+            <TouchableOpacity
+              key={item.key}
+              testID={`${testIDPrefix}-menu-${item.key}`}
+              activeOpacity={0.6}
+              style={[
+                styles.row,
+                index > 0 && styles.rowDivider,
+                index > 0 && theme.dark && { borderTopColor: theme.divider },
+              ]}
+              onPress={() => closeMenu(item.onPress)}
+            >
+              <Text
+                style={[
+                  styles.label,
+                  { color: theme.text },
+                  item.destructive && { color: theme.danger },
+                ]}
+              >
+                {item.label}
+              </Text>
+              <View style={styles.icon}>{item.icon}</View>
+            </TouchableOpacity>
+          ))}
+        </Animated.View>
+      </Modal>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'rgba(0,0,0,0.28)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  card: {
+    position: 'absolute',
+    minWidth: 200,
+    borderRadius: 14,
+    paddingVertical: 4,
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.18,
+    shadowRadius: 16,
+    elevation: 12,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 24,
+    paddingHorizontal: 16,
+    paddingVertical: 13,
+  },
+  rowDivider: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    // Light hairline; swapped for theme.divider in dark mode.
+    borderTopColor: '#EFEFF2',
+  },
+  label: {
+    fontSize: 16,
+  },
+  icon: {
+    width: 22,
+    alignItems: 'center',
+  },
+});
+
+export default ProfileMenu;

package/src/components/Modals/SelectUsersModal/SelectUsersModal.tsx

@@ -4,6 +4,7 @@ import { getActiveRoom, RootState } from '../../../roomStore';
 import {
   ActionButton,
   CloseButton,
+  CloseButtonText,
   GroupContainer,
   ModalBackground,
   ModalContainer,
@@ -15,9 +16,14 @@ import Loader from '../../styled/Loader';
 import { postAddRoomMember } from '../../../networking/api-requests/rooms.api';
 import { useToast } from '../../../context/ToastContext';
 import { updateRoom } from '../../../roomStore/roomsSlice';
-import { Text } from 'react-native';
 
-const SelectUsersModal: React.FC = () => {
+interface SelectUsersModalProps {
+  /** Render the opener yourself (the chat profile uses an "Add Members"
+   * row). Falls back to the plain "Add more Users" button. */
+  trigger?: (open: () => void) => React.ReactNode;
+}
+
+const SelectUsersModal: React.FC<SelectUsersModalProps> = ({ trigger }) => {
   const { showToast } = useToast();
   const dispatch = useDispatch();
 
@@ -74,16 +80,19 @@ const SelectUsersModal: React.FC = () => {
 
   return (
     <>
-      <ActionButton variant="filled" unstyled onPress={handleOpenModal}>
-        Add more Users
-      </ActionButton>
+      {trigger ? (
+        trigger(handleOpenModal)
+      ) : (
+        <ActionButton variant="filled" unstyled onPress={handleOpenModal}>
+          Add more Users
+        </ActionButton>
+      )}
 
       {isModalOpen && (
         <ModalBackground>
           <ModalContainer>
             <CloseButton onPress={handleCloseModal}>
-              <Text style={{ fontSize: 24 }}>&times;</Text>
-              &times;
+              <CloseButtonText>&times;</CloseButtonText>
             </CloseButton>
             <GroupContainer
               style={{

package/src/components/Modals/SettingsModals/ManageDataModal/ManageDataModal.tsx

@@ -20,6 +20,7 @@ import {
   SharedSettingsStyledLabel,
 } from '../SharedStyledComponents';
 import { View } from 'react-native';
+import { useTheme } from '../../../../hooks/useTheme';
 
 interface ManageDataModalProps {
   handleCloseModal: any;
@@ -37,6 +38,7 @@ const ManageDataModal: React.FC<ManageDataModalProps> = ({
   handleCloseModal,
 }) => {
   const { config } = useSelector((state: RootState) => state.chatSettingStore);
+  const theme = useTheme();
 
   const handleDownloadClick = async () => {
     // const exportedData = await getExportMyData();
@@ -76,10 +78,10 @@ const ManageDataModal: React.FC<ManageDataModalProps> = ({
             </LabelData>
           </SharedSettingsSectionContainer>
           <SharedSettingsStyledButton
-            borderColor={config?.colors?.primary || '#0052CD'}
+            borderColor={theme.primary}
             onPress={handleDownloadClick}
             text="Download your data"
-            color={config?.colors?.primary || '#0052CD'}
+            color={theme.primary}
           />
         </SharedSettingsColumnContainer>
         <SharedSettingsColumnContainer>
@@ -93,10 +95,10 @@ const ManageDataModal: React.FC<ManageDataModalProps> = ({
             </SharedSettingsLabelData>
           </SharedSettingsSectionContainer>
           <SharedSettingsInfoPanel
-            bgColor={config?.colors?.secondary || '#F3F6FC'}
+            bgColor={config?.colors?.secondary || theme.surfaceHighlight}
           >
             <View>
-              <InfoIcon color={config?.colors?.primary || '#0052CD'} />
+              <InfoIcon color={theme.primary} />
             </View>
             <SharedSettingsInfoText>
               Due to the immutable nature of distributed ledger technology,
@@ -108,9 +110,9 @@ const ManageDataModal: React.FC<ManageDataModalProps> = ({
             </SharedSettingsInfoText>
           </SharedSettingsInfoPanel>
           <SharedSettingsStyledButton
-            borderColor="#E53935"
+            borderColor={theme.danger}
             text="Delete My Account"
-            color="#E53935"
+            color={theme.danger}
           />
         </SharedSettingsColumnContainer>
       </SharedSettingsCenterContainer>

package/src/components/Modals/SettingsModals/Referrals/Referrals.tsx

@@ -22,6 +22,7 @@ import { useSelector } from 'react-redux';
 import { RootState } from '../../../../roomStore';
 import { View, Text } from 'react-native';
 import Animated from 'react-native-reanimated';
+import { useTheme } from '../../../../hooks/useTheme';
 
 interface ReferralsModalProps {
   handleCloseModal: any;
@@ -31,6 +32,7 @@ const ReferralsModal: React.FC<ReferralsModalProps> = ({
   handleCloseModal,
 }) => {
   const { config } = useSelector((state: RootState) => state.chatSettingStore);
+  const theme = useTheme();
 
   return (
     <ModalContainerFullScreen>
@@ -45,7 +47,7 @@ const ReferralsModal: React.FC<ReferralsModalProps> = ({
           <SendCoinIcon style={{ width: 24, height: 24 }} />
           <SharedSettingsStyledLabel>and receive 25</SharedSettingsStyledLabel>
           <SendCoinIcon style={{ width: 24, height: 24 }} />
-          <Text>.</Text>
+          <Text style={{ color: theme.text }}>.</Text>
           <SharedSettingsStyledLabel>
             Send friends invite with your personal invitation code.
           </SharedSettingsStyledLabel>
@@ -55,7 +57,7 @@ const ReferralsModal: React.FC<ReferralsModalProps> = ({
             Your invitation code
           </SharedSettingsStyledLabel>
           <StyledInput
-            {...{ color: config?.colors?.primary || '' } as any}
+            {...{ color: config?.colors?.primary || theme.primary } as any}
             placeholder="Your invitation code"
             // label={'About'}
             // value={message}
@@ -71,7 +73,7 @@ const ReferralsModal: React.FC<ReferralsModalProps> = ({
             Or enter your referral code to earn coins
           </SharedSettingsStyledLabel>
           <StyledInput
-            {...{ color: config?.colors?.primary || '' } as any}
+            {...{ color: config?.colors?.primary || theme.primary } as any}
             placeholder="Your referral code"
             // label={'About'}
             // value={message}

package/src/components/Modals/SettingsModals/SharedStyledComponents.ts

@@ -39,7 +39,7 @@ export const RowWrapper = styled.View`
 export const SharedSettingsLabelData = styled(Label)`
   font-size: 12px;
   text-align: start;
-  color: #8c8c8c;
+  color: ${({theme}) => theme.textSecondary};
 `;
 
 export const SharedSettingsStyledButton = styled(Button)<{
@@ -57,10 +57,10 @@ export const SharedSettingsStyledButton = styled(Button)<{
   border: 1px solid ${({borderColor}) => borderColor};
 `;
 
-export const SharedSettingsInfoPanel = styled.View<{bgColor: string | undefined}>`
+export const SharedSettingsInfoPanel = styled.View<{bgColor?: string}>`
   display: flex;
   align-items: flex-start;
-  background-color: ${({bgColor}) => bgColor};
+  background-color: ${({bgColor}) => bgColor || 'transparent'};
   padding: 16px;
   border-radius: 8px;
   gap: 8px;
@@ -68,7 +68,7 @@ export const SharedSettingsInfoPanel = styled.View<{bgColor: string | undefined}
 
 export const SharedSettingsInfoText = styled.Text`
   font-size: 12px;
-  color: #141414;
+  color: ${({theme}) => theme.text};
   display: flex;
   text-align: start;
 `;

package/src/components/Modals/SettingsModals/Visibility/RadioInput.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { useTheme } from '../../../../hooks/useTheme';
 
 interface RadioInputProps {
   option: { label: string; value?: boolean };
@@ -12,8 +13,10 @@ export const RadioInput: React.FC<RadioInputProps> = ({
   option,
   checked,
   onChange,
-  radioColor = '#0052CD',
+  radioColor,
 }) => {
+  const theme = useTheme();
+  const color = radioColor || theme.primary;
   return (
     <View style={styles.container}>
       <TouchableOpacity
@@ -25,12 +28,14 @@ export const RadioInput: React.FC<RadioInputProps> = ({
           style={[
             styles.radioCircle,
             {
-              borderColor: radioColor,
-              backgroundColor: checked ? radioColor : 'transparent',
+              borderColor: color,
+              backgroundColor: checked ? color : 'transparent',
             },
           ]}
         />
-        <Text style={styles.radioLabel}>{option.label}</Text>
+        <Text style={[styles.radioLabel, { color: theme.text }]}>
+          {option.label}
+        </Text>
       </TouchableOpacity>
     </View>
   );
@@ -54,6 +59,5 @@ const styles = StyleSheet.create({
   },
   radioLabel: {
     fontSize: 16,
-    color: '#333',
   },
 });

package/src/components/Modals/SettingsModals/Visibility/VisibilityModal.tsx

@@ -15,6 +15,7 @@ import {
   SharedSettingsStyledLabel,
 } from '../SharedStyledComponents';
 import { RadioInput } from './RadioInput';
+import { useTheme } from '../../../../hooks/useTheme';
 
 interface VisibilityModalProps {
   handleCloseModal: any;
@@ -24,9 +25,8 @@ const VisibilityModal: React.FC<VisibilityModalProps> = ({
   handleCloseModal,
 }) => {
   const dispatch = useDispatch();
-  const { user, config } = useSelector(
-    (state: RootState) => state.chatSettingStore
-  );
+  const { user } = useSelector((state: RootState) => state.chatSettingStore);
+  const theme = useTheme();
 
   const doUpdateUser = (user: User) => dispatch(setUser(user));
   const [isProfileOpen, setIsProfileOpen] = useState(user?.isProfileOpen);
@@ -78,7 +78,7 @@ const VisibilityModal: React.FC<VisibilityModalProps> = ({
             <RadioLabel>
               <RadioInput
                 option={{ label: 'Open (default)', value: isProfileOpen }}
-                radioColor={config?.colors?.primary}
+                radioColor={theme.primary}
                 checked={isProfileOpen === true}
                 onChange={() => setIsProfileOpen(true)}
               />
@@ -91,7 +91,7 @@ const VisibilityModal: React.FC<VisibilityModalProps> = ({
             <RadioLabel>
               <RadioInput
                 option={{ label: 'Restricted', value: isProfileOpen }}
-                radioColor={config?.colors?.primary}
+                radioColor={theme.primary}
                 checked={isProfileOpen === false}
                 onChange={() => setIsProfileOpen(false)}
               />
@@ -110,7 +110,7 @@ const VisibilityModal: React.FC<VisibilityModalProps> = ({
             <RadioLabel>
               <RadioInput
                 option={{ label: 'Full (default)', value: isAssetsOpen }}
-                radioColor={config?.colors?.primary}
+                radioColor={theme.primary}
                 checked={isAssetsOpen === true}
                 onChange={() => setIsAssetsOpen(true)}
               />
@@ -121,7 +121,7 @@ const VisibilityModal: React.FC<VisibilityModalProps> = ({
             <RadioLabel>
               <RadioInput
                 option={{ label: 'InViewidual', value: isAssetsOpen }}
-                radioColor={config?.colors?.primary}
+                radioColor={theme.primary}
                 checked={isAssetsOpen === false}
                 onChange={() => setIsAssetsOpen(false)}
               />

package/src/components/Modals/UserProfileModal/EditUserModal.tsx

@@ -8,23 +8,11 @@ import { updateProfile } from '../../../networking/api-requests/user.api';
 import { useDispatch } from 'react-redux';
 import { updateUser } from '../../../roomStore/chatSettingsSlice';
 import { View } from 'react-native';
+import { pickImageAsset, PickedImage } from '../../../helpers/pickImageAsset';
 import { AddPhotoIcon } from '../../../assets/icons';
+import { useTheme } from '../../../hooks/useTheme';
 // import { actionUpdateUser } from '../actions';
 
-const base64ToFile = (base64String: string, fileName: string) => {
-  const byteString = atob(base64String.split(',')[1]);
-  const arrayBuffer = new ArrayBuffer(byteString.length);
-  const uintArray = new Uint8Array(arrayBuffer);
-  for (let i = 0; i < byteString.length; i++) {
-    uintArray[i] = byteString.charCodeAt(i);
-  }
-  const blob = new Blob([uintArray], { type: 'image/jpeg' });
-  return new File([blob], fileName, {
-    type: 'image/jpeg',
-    lastModified: Date.now(),
-  });
-};
-
 interface EditUserModalProps {
   setIsEditing: React.Dispatch<React.SetStateAction<boolean>>;
   modalUser: any;
@@ -37,11 +25,12 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
   config,
 }) => {
   const dispatch = useDispatch();
+  const theme = useTheme();
 
   const [firstName, setFirstName] = useState(modalUser?.firstName || '');
   const [lastName, setLastName] = useState(modalUser?.lastName || '');
   const [description, setDescription] = useState(modalUser?.description || '');
-  const [profileImage, setProfileImage] = useState<string | File>(
+  const [profileImage, setProfileImage] = useState<string | PickedImage>(
     modalUser?.profileImage
   );
 
@@ -49,14 +38,8 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
     try {
       let fd = new FormData();
 
-      if (
-        typeof profileImage === 'string' &&
-        profileImage.startsWith('data:image/')
-      ) {
-        const file = base64ToFile(profileImage, 'profileImage.jpg');
-        fd.append('file', file);
-      } else if (profileImage instanceof File) {
-        fd.append('file', profileImage);
+      if (profileImage && typeof profileImage !== 'string') {
+        fd.append('file', profileImage as any);
       }
 
       fd.append('firstName', firstName);
@@ -82,8 +65,11 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
     }
   };
 
-  const handleProfileImageChange = (image: File) => {
-    setProfileImage(image);
+  const handleProfileImageChange = async () => {
+    const picked = await pickImageAsset();
+    if (picked) {
+      setProfileImage(picked);
+    }
   };
 
   return (
@@ -108,7 +94,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
             onPress={onSave}
             variant="outlined"
             style={{ width: 128 }}
-            color="#0052CD"
+            color={theme.primary}
             text="Save"
           />
         }