@ethora/chat-component-rn 26.8.1 → 26.8.3

package/src/components/Modals/ModalWrapper/ModalWrapper.tsx

@@ -1,6 +1,7 @@
 import { FC, useRef, useState } from 'react';
 import {
   CloseButton,
+  CloseButtonText,
   GroupContainer,
   ModalBackground,
   ModalContainer,
@@ -9,9 +10,10 @@ import {
 } from '../styledModalComponents';
 import { TextareaInput } from '../../styled/StyledInputComponents/StyledInputComponents';
 import Button from '../../styled/Button';
-import { Modal, Text, TextInput, View, StyleSheet } from 'react-native';
+import { Modal, TextInput, View, StyleSheet } from 'react-native';
 import { useChatSettingState } from '../../../hooks/useChatSettingState';
 import { getIconColor } from '../../../helpers/getIconColor';
+import { useTheme } from '../../../hooks/useTheme';
 
 interface ModalWrapperProps {
   iconTitle?: any;
@@ -47,6 +49,7 @@ export const ModalWrapper: FC<ModalWrapperProps> = ({
 }) => {
   const textareaRef = useRef<TextInput>(null);
   const { config } = useChatSettingState();
+  const theme = useTheme();
 
   // const handleInput = () => {
   //   const textarea = textareaRef.current;
@@ -59,7 +62,7 @@ export const ModalWrapper: FC<ModalWrapperProps> = ({
   const inner = (
     <>
       <CloseButton onPress={handleCloseModal}>
-        <Text style={{ fontSize: 24 }}>&times;</Text>
+        <CloseButtonText>&times;</CloseButtonText>
       </CloseButton>
       {IconTitle ? <IconTitle /> : <ModalTitle>{title}</ModalTitle>}
       {description && <ModalDescription>{description}</ModalDescription>}
@@ -87,7 +90,7 @@ export const ModalWrapper: FC<ModalWrapperProps> = ({
             // White label on the filled (e.g. red Delete) button. Button
             // applies an inline `color: color || 'black'` that overrides
             // the filled-variant white, so pass it explicitly.
-            color="#FFFFFF"
+            color={theme.textOnPrimary}
             style={{
               width: '100%',
               backgroundColor: backgroundColorButton,
@@ -115,7 +118,14 @@ export const ModalWrapper: FC<ModalWrapperProps> = ({
           // their own bounded View instead — never full-screen (#14).
           // (Upstream also shrank this modal; this keeps that intent while
           // adding the white filled-button label via `inner` below.)
-          <View style={styles.compactDialog}>{inner}</View>
+          <View
+            style={[
+              styles.compactDialog,
+              { backgroundColor: theme.surface, shadowColor: theme.shadow },
+            ]}
+          >
+            {inner}
+          </View>
         ) : (
           <ModalContainer style={{ maxWidth: 640 }}>{inner}</ModalContainer>
         )}
@@ -129,11 +139,9 @@ const styles = StyleSheet.create({
     width: '85%',
     maxWidth: 360,
     alignSelf: 'center',
-    backgroundColor: '#fff',
     borderRadius: 16,
     padding: 24,
     gap: 16,
-    shadowColor: '#000',
     shadowOffset: { width: 0, height: 4 },
     shadowOpacity: 0.2,
     shadowRadius: 12,

package/src/components/Modals/NewChatModal/ModalContent.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
+import { PickedImage } from '../../../helpers/pickImageAsset';
 import {
   ModalContainer,
   CloseButton,
+  CloseButtonText,
   ModalTitle,
   GroupContainer,
 } from '../styledModalComponents';
@@ -12,19 +14,19 @@ import UsersList from '../../UsersList/UsersList';
 import { ProfileImagePlaceholder } from '../../MainComponents/ProfileImagePlaceholder';
 import { ChatAccessOption } from '../../../types/types';
 import { AddPhotoIcon } from '../../../assets/icons';
-import { Text } from 'react-native';
 
 type ModalContentProps = {
   activeTab: '0' | '1' | null;
   roomName: string;
   roomDescription: string;
   chatType: ChatAccessOption;
-  profileImage: string | File | null;
+  profileImage: string | PickedImage | null;
   setActiveTab: (tab: '0' | '1' | null) => void;
   handleRoomNameChange: (e: string) => void;
   setRoomDescription: (description: string) => void;
   setChatType: (type: ChatAccessOption) => void;
-  setProfileImage: (image: string | File | null) => void;
+  setProfileImage: (image: string | PickedImage | null) => void;
+  onUploadImage: () => void;
   selectedUsers: any[];
   setSelectedUsers: (users: any[]) => void;
   handleCreateRoom: () => void;
@@ -40,6 +42,7 @@ const ModalContent: React.FC<ModalContentProps> = ({
   roomDescription,
   chatType,
   profileImage,
+  onUploadImage,
   setActiveTab,
   handleRoomNameChange,
   setChatType,
@@ -55,14 +58,14 @@ const ModalContent: React.FC<ModalContentProps> = ({
   return (
     <ModalContainer>
       <CloseButton onPress={handleCloseModal}>
-        <Text style={{ fontSize: 24 }}>&times;</Text>
+        <CloseButtonText>&times;</CloseButtonText>
       </CloseButton>
       {activeTab === '0' && (
         <>
           <ModalTitle>Create New Chat</ModalTitle>
           <ProfileImagePlaceholder
             size={120}
-            upload={{ active: true, onUpload: setProfileImage }}
+            upload={{ active: true, onUpload: onUploadImage }}
             remove={{
               enabled: true,
               onRemoveClick: () => setProfileImage(null),

package/src/components/Modals/NewChatModal/NewChatModal.tsx

@@ -1,20 +1,24 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import Button from '../../styled/Button';
-import { AddNewIcon, AddPhotoIcon } from '../../../assets/icons';
+import React, { useState, useMemo } from 'react';
+import { CameraIcon } from '../../../assets/icons';
 import { RootState } from '../../../roomStore';
 import { useXmppClient } from '../../../context/xmppProvider';
-import {
-  CloseButton,
-  GroupContainer,
-  ModalBackground,
-  ModalContainer,
-  ModalTitle,
-} from '../styledModalComponents';
 import { addRoomViaApi, setCurrentRoom, updateRoom } from '../../../roomStore/roomsSlice';
-import InputWithLabel from '../../styled/StyledInput';
 import { uploadFile } from '../../../networking/api-requests/auth.api';
-import { ProfileImagePlaceholder } from '../../MainComponents/ProfileImagePlaceholder';
-import { Text, Alert, Linking } from 'react-native';
+import {
+  ActivityIndicator,
+  Alert,
+  Image,
+  Linking,
+  Modal,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { getIconColor } from '../../../helpers/getIconColor';
+import { useT } from '../../../i18n/useT';
 import * as ImagePicker from 'expo-image-picker';
 import { ApiRoom, ChatAccessOption, RoomMember } from '../../../types/models/room.model';
 import { createRoomFromApi } from '../../../helpers/createRoomFromApi';
@@ -22,19 +26,20 @@ import { postRoom } from '../../../networking/api-requests/rooms.api';
 import { useAppDispatch, useAppSelector } from '../../../hooks/hooks';
 import { useChatSettingState } from '../../../hooks/useChatSettingState';
 import { useToast } from '../../../context/ToastContext';
-import { useT } from '../../../i18n/useT';
+import { useTheme } from '../../../hooks/useTheme';
+import type { ChatTheme } from '../../../theme/theme';
 
 interface NewChatModalProps {
-  handleCloseModal?: any;
+  handleCloseModal?: () => void;
 }
 
 const NewChatModal: React.FC<NewChatModalProps> = ({
   // Some call sites mount `<NewChatModal />` with no props (e.g. the
-  // empty-state in ChatRoom when roomsList is empty). Default to a noop
-  // so the Close/Cancel buttons don't throw "handleClose is not a
-  // function".
-  handleCloseModal: handleClose = () => {},
+  // empty-state in ChatRoom when roomsList is empty). There is nothing to
+  // dismiss back to there, so Cancel just resets the form.
+  handleCloseModal: handleClose,
 }) => {
+  const t = useT();
  const config = useAppSelector(
     (state: RootState) => state.chatSettingStore.config
   );
@@ -43,11 +48,10 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
   const { client } = useXmppClient();
   const { user } = useChatSettingState();
   const { showToast } = useToast();
-  const t = useT();
+  const theme = useTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
 
-  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
-  const [activeTab, setActiveTab] = useState<'0' | '1' | null>('0');
 
   const [roomName, setRoomName] = useState<string>('');
   const [roomDescription, setRoomDescription] = useState<string>('');
@@ -67,7 +71,7 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
 
   const validateRoomName = (name: string) => {
     if (name.trim().length < 3) {
-      return 'Room name must be at least 3 characters.';
+      return t('modal.newChat.nameTooShort');
     }
     return '';
   };
@@ -99,13 +103,17 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
     }));
   };
 
-  const handleOpenModal = () => setIsModalOpen(true);
-  const handleCloseModal = () => {
-    handleClose();
-    setActiveTab('0');
-    setIsModalOpen(false);
+  const resetForm = () => {
     setRoomName('');
+    setRoomDescription('');
+    setProfileImage(null);
     setSelectedUsers([]);
+    setErrors({ name: '', description: '' });
+  };
+
+  const handleCloseModal = () => {
+    resetForm();
+    handleClose?.();
   };
 
   const onUpload = async () => {
@@ -134,7 +142,7 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
         quality: 0.8,
       });
 
-      if (result.canceled) return;
+      if (result.canceled) {return;}
 
       const asset = result.assets[0];
       const originalName = asset.uri.split('/').pop();
@@ -166,7 +174,7 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
         usersArrayLength
       );
 
-      if (!normalizedChat || !client) return;
+      if (!normalizedChat || !client) {return;}
 
       dispatch(
         addRoomViaApi({
@@ -266,103 +274,199 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
         }
       }
 
-      setIsModalOpen(false);
-      setErrors({ name: '', description: '' });
-      setProfileImage(null);
-      setRoomName('');
-      setRoomDescription('');
+      resetForm();
       setLoading(false);
     }
   };
 
+  const primary = getIconColor(config);
+  const pickedUri =
+    profileImage && typeof profileImage === 'object' && 'uri' in profileImage
+      ? profileImage.uri
+      : typeof profileImage === 'string'
+        ? profileImage
+        : null;
+
   return (
-    <>
-      {/* <Button
-        style={{
-          padding: 8,
-          borderRadius: 16,
-          backgroundColor: "transparent",
-        }}
-        color="black"
-        unstyled
-        EndIcon={<AddNewIcon color={config?.colors?.primary} />}
-        onPress={handleOpenModal}
-      /> */}
-
-      <ModalBackground
-      // visible={isModalOpen}
-      // transparent={true}
-      // animationType="fade"
-      // onRequestClose={handleCloseModal}
-      >
-        <ModalContainer>
-          <CloseButton onPress={handleCloseModal}>
-            <Text style={{ fontSize: 24, padding: 5 }}>&times;</Text>
-          </CloseButton>
-          <ModalTitle>Create New Chat</ModalTitle>
-          <ProfileImagePlaceholder
-            size={120}
-            upload={{ active: true, onUpload }}
-            remove={{ enabled: true, onRemoveClick }}
-            placeholderIcon={<AddPhotoIcon color="#0052CD" />}
-            icon={
-              profileImage && typeof profileImage === 'object' && 'uri' in profileImage
-                ? { uri: profileImage.uri }
-                : profileImage
-            }
-            disableOverlay={!profileImage}
-            role="user"
-          />
-          <GroupContainer
-            style={{
-              flexDirection: 'column',
-              position: 'relative',
-              width: '100%',
-            }}
+    // A real <Modal> rather than an in-tree overlay: the SDK renders inside
+    // whatever frame the host gives it, so an in-tree backdrop stopped at
+    // the component's edge and left the host's own chrome (tab bars and
+    // such) lit. This one dims the whole window.
+    <Modal
+      transparent
+      visible
+      animationType="fade"
+      statusBarTranslucent
+      onRequestClose={handleCloseModal}
+    >
+      <View style={styles.backdrop}>
+        <Pressable
+          testID="new-chat-backdrop"
+          style={StyleSheet.absoluteFill}
+          onPress={handleCloseModal}
+        />
+        <View style={styles.card}>
+          <Text style={styles.title}>{t('modal.newChat.title')}</Text>
+
+          <TouchableOpacity
+            testID="new-chat-picture"
+            activeOpacity={0.8}
+            onPress={onUpload}
+            onLongPress={pickedUri ? onRemoveClick : undefined}
+            style={[styles.picture, { backgroundColor: primary }]}
           >
-            <InputWithLabel
-              color="#F5F7F9"
-              id="roomName"
-              value={roomName}
-              onChangeText={handleRoomNameChange}
-              placeholder="Enter Room Name"
-              helperText={errors.name}
-              error={!!errors.name}
-            />
-            <InputWithLabel
-              color="#F5F7F9"
-              id="roomDescription"
-              value={roomDescription}
-              onChangeText={handleRoomDescriptionChange}
-              placeholder="Enter Description"
-              helperText={errors.description}
-              error={!!errors.description}
-            />
-          </GroupContainer>
-
-          <GroupContainer>
-            <Button
-              onPress={handleCreateRoom}
-              text={'Create'}
-              style={{ width: '100%' }}
-              unstyled
-              variant="filled"
-              disabled={!isValid}
-              color="#fff"
-            />
-            <Button
+            {pickedUri ? (
+              <Image source={{ uri: pickedUri }} style={styles.pictureImage} />
+            ) : (
+              <CameraIcon color={theme.textOnPrimary} width={26} height={26} />
+            )}
+          </TouchableOpacity>
+
+          <TextInput
+            testID="new-chat-name"
+            style={styles.input}
+            value={roomName}
+            onChangeText={handleRoomNameChange}
+            placeholder={t('modal.newChat.roomNamePlaceholder')}
+            placeholderTextColor={theme.textMuted}
+            returnKeyType="next"
+          />
+          {!!errors.name && roomName.length > 0 && (
+            <Text testID="new-chat-name-error" style={styles.error}>
+              {errors.name}
+            </Text>
+          )}
+
+          <TextInput
+            testID="new-chat-description"
+            style={[styles.input, styles.textArea]}
+            value={roomDescription}
+            onChangeText={handleRoomDescriptionChange}
+            placeholder={t('modal.newChat.descriptionPlaceholder')}
+            placeholderTextColor={theme.textMuted}
+            multiline
+          />
+
+          <View style={styles.buttons}>
+            <TouchableOpacity
+              testID="new-chat-cancel"
+              activeOpacity={0.7}
+              style={[styles.button, styles.cancel]}
               onPress={handleCloseModal}
-              text={'Cancel'}
-              style={{ width: '100%' }}
-              unstyled
-              variant="outlined"
-              color="#0052CD"
-            />
-          </GroupContainer>
-        </ModalContainer>
-      </ModalBackground>
-    </>
+            >
+              <Text style={styles.cancelLabel}>{t('action.cancel')}</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              testID="new-chat-submit"
+              activeOpacity={0.7}
+              disabled={!isValid || loading}
+              style={[
+                styles.button,
+                { backgroundColor: primary, opacity: !isValid || loading ? 0.5 : 1 },
+              ]}
+              onPress={handleCreateRoom}
+            >
+              {loading ? (
+                <ActivityIndicator color={theme.textOnPrimary} />
+              ) : (
+                <Text style={styles.submitLabel}>
+                  {t('modal.newChat.createButton')}
+                </Text>
+              )}
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </Modal>
   );
 };
 
+const createStyles = (theme: ChatTheme) => StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    // Opaque, per the design: the chat list behind stays hidden rather
+    // than showing through a translucent dim.
+    backgroundColor: theme.listBackground,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24,
+  },
+  card: {
+    width: '100%',
+    maxWidth: 380,
+    borderRadius: 20,
+    backgroundColor: theme.surface,
+    padding: 20,
+    shadowColor: theme.shadow,
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.08,
+    shadowRadius: 24,
+    elevation: 6,
+  },
+  title: {
+    fontSize: 17,
+    fontWeight: '700',
+    color: theme.text,
+    textAlign: 'center',
+  },
+  picture: {
+    alignSelf: 'center',
+    width: 72,
+    height: 72,
+    borderRadius: 36,
+    marginVertical: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+  pictureImage: {
+    width: '100%',
+    height: '100%',
+  },
+  input: {
+    borderRadius: 12,
+    backgroundColor: theme.surfaceSecondary,
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    fontSize: 15,
+    color: theme.text,
+    marginTop: 10,
+  },
+  textArea: {
+    minHeight: 84,
+    textAlignVertical: 'top',
+  },
+  error: {
+    color: theme.danger,
+    fontSize: 12,
+    marginTop: 6,
+    marginLeft: 4,
+  },
+  buttons: {
+    flexDirection: 'row',
+    gap: 12,
+    marginTop: 20,
+  },
+  button: {
+    flex: 1,
+    height: 44,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  cancel: {
+    backgroundColor: theme.surfaceSecondary,
+  },
+  cancelLabel: {
+    fontSize: 15,
+    fontWeight: '500',
+    color: theme.textSecondary,
+  },
+  submitLabel: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: theme.textOnPrimary,
+  },
+});
+
 export default NewChatModal;

package/src/components/Modals/NewChatModal/UpdNewChatModal.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useMemo } from 'react';
+import { pickImageAsset, PickedImage } from '../../../helpers/pickImageAsset';
 import Button from '../../styled/Button';
 import { AddNewIcon } from '../../../assets/icons';
 import { useDispatch, useSelector } from 'react-redux';
@@ -29,7 +30,16 @@ const NewChatModal: React.FC = () => {
     name: 'Public',
     id: 'public',
   });
-  const [profileImage, setProfileImage] = useState<string | File | null>(null);
+  const [profileImage, setProfileImage] = useState<
+    string | PickedImage | null
+  >(null);
+
+  const handleUploadImage = async () => {
+    const picked = await pickImageAsset();
+    if (picked) {
+      setProfileImage(picked);
+    }
+  };
   const [errors, setErrors] = useState({ name: '', description: '' });
   const [selectedUsers, setSelectedUsers] = useState<RoomMember[]>([]);
 
@@ -119,6 +129,7 @@ const NewChatModal: React.FC = () => {
             setRoomDescription={setRoomDescription}
             setChatType={setChatType}
             setProfileImage={setProfileImage}
+            onUploadImage={handleUploadImage}
             selectedUsers={selectedUsers}
             setSelectedUsers={setSelectedUsers}
             handleCreateRoom={handleCreateRoom}