@ethora/chat-component-rn 26.4.1

package/src/components/MainComponents/ProfileImagePlaceholder.tsx

@@ -0,0 +1,143 @@
+import React, { useMemo } from 'react';
+import styled from 'styled-components/native';
+import { TouchableOpacity, Image, Text } from 'react-native';
+import { EditIcon } from '../../assets/icons';
+import {
+  AvatarCircle,
+  AvatarImage,
+  InitialsText,
+  Overlay,
+  RemoveButton,
+  RemoveButtonText,
+  Wrapper,
+} from '../styled/StyledComponents';
+import { nameToColor } from '../../helpers/hashcolor';
+
+interface ProfileImagePlaceholderProps {
+  name?: string;
+  icon?: string | { uri: string } | string | File | null;
+  click?: {
+    onPress: () => void;
+    isClick: boolean;
+  };
+  size?: number;
+  upload?: {
+    onUpload: (image: any) => void;
+    active: boolean;
+  };
+  remove?: {
+    enabled: boolean;
+    onRemoveClick: () => void;
+  };
+  role?: string;
+  active?: boolean;
+  placeholderIcon?: React.ReactNode;
+  disableOverlay?: boolean;
+}
+
+export const ProfileImagePlaceholder: React.FC<
+  ProfileImagePlaceholderProps
+> = ({
+  name,
+  icon,
+  click,
+  size = 64,
+  upload,
+  remove,
+  role,
+  active = false,
+  placeholderIcon,
+  disableOverlay,
+}) => {
+  const backgroundColor = useMemo(() => {
+    if(!name) {
+      return { backgroundColor: 'transparent' };
+    }
+    return nameToColor(name);
+  }, [name]);
+
+  const getTwoUppercaseLetters = (fullName: string) => {
+    if (!fullName) {return '';}
+
+    const words = fullName.trim().split(' ').filter(word => word.length > 0);
+
+    if (words.length === 0) {return '';}
+
+    if (words.length >= 2) {
+      const firstLetter = /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[0]?.[0] || '')
+        ? words[0][0].toUpperCase()
+        : '';
+      const secondLetter = /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[1]?.[0] || '')
+        ? words[1][0].toUpperCase()
+        : '';
+      return firstLetter + secondLetter;
+    }
+
+    if (words.length === 1 && words[0].length >= 2) {
+      const firstLetter = /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[0][0] || '')
+        ? words[0][0].toUpperCase()
+        : '';
+      const secondLetter = /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[0][1] || '')
+        ? words[0][1].toUpperCase()
+        : '';
+      return firstLetter + secondLetter;
+    }
+
+    if (words.length === 1 && words[0].length === 1) {
+      return /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[0][0] || '')
+        ? words[0][0].toUpperCase()
+        : '';
+    }
+
+    return '';
+  };
+
+  const getInitials = () => (!icon && name ? getTwoUppercaseLetters(name) : '');
+
+  return (
+    <Wrapper
+      bgColor={icon ? 'transparent' : backgroundColor?.backgroundColor}
+      size={size}
+      isClickable={active || !!upload?.active}
+    >
+      <AvatarCircle
+        bgColor={icon ? 'transparent' : backgroundColor?.backgroundColor}
+        size={size}
+        isClickable={active || !!upload?.active}
+        onPress={
+          upload?.active
+            ? upload.onUpload
+            : click?.isClick
+            ? click.onPress
+            : undefined
+        }
+      >
+        {icon ? (
+          <AvatarImage
+            source={typeof icon === 'string' ? { uri: icon } : icon}
+            size={size}
+          />
+        ) : placeholderIcon ? (
+          placeholderIcon
+        ) : (
+          // Black initials on the pastel hash-color bg — white text
+          // on these light backgrounds is unreadable (matches web's
+          // default-color behavior).
+          <InitialsText size={size} color="#141414">
+            {getInitials()}
+          </InitialsText>
+        )}
+        {upload?.active && !disableOverlay && (
+          <Overlay>
+            <EditIcon style={{ fontSize: size / 2 }} color="#141414" />
+          </Overlay>
+        )}
+      </AvatarCircle>
+      {remove?.enabled && icon && role !== 'participant' && (
+        <RemoveButton onPress={remove.onRemoveClick}>
+          <RemoveButtonText>&times;</RemoveButtonText>
+        </RemoveButton>
+      )}
+    </Wrapper>
+  );
+};

package/src/components/MainComponents/RNStyled.tsx

@@ -0,0 +1,34 @@
+import {View, Text, Button} from 'react-native';
+import styled from 'styled-components/native';
+
+export const Container = styled.View`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  padding: 20px;
+  gap: 8px;
+`;
+
+export const Message = styled.Text`
+  font-size: 16px;
+  color: #333;
+`;
+
+export const OrDelimiter = styled.Text`
+  font-size: 14px;
+  color: #666;
+`;
+
+export const CustomButton = styled.TouchableOpacity`
+  width: 100%;
+  background-color: #007bff;
+  padding: 10px;
+  border-radius: 4px;
+  align-items: center;
+`;
+
+export const ButtonText = styled.Text`
+  color: #fff;
+  font-size: 16px;
+`;

package/src/components/MainComponents/ReduxWrapper.tsx

@@ -0,0 +1,40 @@
+import React, {useMemo} from 'react';
+import {Provider} from 'react-redux';
+import {store} from '../../roomStore';
+import {ConfigUser, IConfig, MessageProps} from '../../types/types';
+import {XmppProvider} from '../../context/xmppProvider.tsx';
+import {MessageNotificationProvider} from '../../context/MessageNotificationContext.tsx';
+import {ToastProvider} from '../../context/ToastContext.tsx';
+import LoginWrapper from './LoginWrapper.tsx';
+// Side-effect import: attaches globalThis.useStoreConsole when enabled.
+import '../../helpers/storeConsole';
+
+interface ChatWrapperProps {
+  token?: string;
+  roomJID?: string;
+  user?: ConfigUser;
+  loginData?: {email: string; password: string};
+  MainComponentStyles?: React.CSSProperties;
+  CustomMessageComponent?: React.ComponentType<MessageProps>;
+  config?: IConfig;
+}
+
+export const ReduxWrapper: React.FC<ChatWrapperProps> = React.memo(
+  ({...props}) => {
+    const memoizedConfig = useMemo(() => {
+      return props.config;
+    }, [props.config]);
+
+    return (
+      <Provider store={store}>
+        <XmppProvider config={memoizedConfig}>
+          <ToastProvider>
+            <MessageNotificationProvider config={memoizedConfig}>
+              <LoginWrapper config={memoizedConfig} {...props} />
+            </MessageNotificationProvider>
+          </ToastProvider>
+        </XmppProvider>
+      </Provider>
+    );
+  },
+);

package/src/components/MainComponents/RoomList.tsx

@@ -0,0 +1,246 @@
+/** @format */
+
+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  useMemo,
+  useRef,
+} from 'react';
+import {
+  View,
+  StyleSheet,
+  FlatList,
+  Pressable,
+  Animated,
+  Text,
+  TouchableOpacity,
+} from 'react-native';
+import { IRoom } from '../../types/types';
+import { SearchInput } from '../InputComponents/Search';
+import { BurgerMenuIcon, SearchIcon } from '../../assets/icons';
+import ChatRoomItem from '../RoomComponents/ChatRoomItem';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import Button from '../styled/Button';
+import { HeaderRoomList } from '../Header/HeaderRoomList';
+import { HeaderRoomListMenu } from '../Menu/HeaderRoomListMenu';
+
+const LONG_PRESS_THRESHOLD = 200;
+
+interface RoomListProps {
+  chats: IRoom[];
+  burgerMenu?: boolean;
+  onRoomClick?: (chat: IRoom) => void;
+}
+
+const RoomList: React.FC<RoomListProps> = ({
+  chats,
+  burgerMenu = false,
+  onRoomClick,
+}) => {
+  const { config } = useChatSettingState();
+
+  const [open, setOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [isLongPress, setIsLongPress] = useState(false);
+  const [isDrawerOpen, setDrawerOpen] = useState(false);
+
+  const pressTimer = useRef<NodeJS.Timeout | null>(null);
+  const containerRef = useRef<View>(null);
+
+  const drawerAnimation = useRef(new Animated.Value(0)).current;
+  const overlayAnimation = useRef(new Animated.Value(0)).current;
+
+  const handlePressIn = useCallback(() => {
+    setIsLongPress(false);
+    pressTimer.current = setTimeout(() => {
+      setIsLongPress(true);
+    }, LONG_PRESS_THRESHOLD);
+  }, []);
+
+  const handlePressOut = useCallback(() => {
+    if (pressTimer.current) {
+      clearTimeout(pressTimer.current);
+    }
+  }, []);
+
+  const performClick = useCallback(
+    (chat: IRoom) => {
+      if (!isLongPress) {
+        onRoomClick?.(chat);
+      }
+      setOpen(false);
+    },
+    [onRoomClick, isLongPress]
+  );
+
+  const handleSearchChange = useCallback((text: string) => {
+    setSearchTerm(text);
+  }, []);
+
+  const getLastMessage = useCallback(
+    (chat: IRoom) => chat?.messages?.[chat?.messages.length - 1],
+    []
+  );
+
+  const filteredChats = useMemo(() => {
+    const lowerCaseSearchTerm = searchTerm.toLowerCase();
+    const chatsMap = new Map<string, IRoom[]>();
+
+    if (!chatsMap.has(lowerCaseSearchTerm)) {
+      const result = chats
+        .filter((chat) => {
+          const hay = `${chat?.title || ''} ${chat?.name || ''}`.toLowerCase();
+          return hay.includes(lowerCaseSearchTerm);
+        })
+        .sort((a, b) => {
+          if (getLastMessage(a)?.id && getLastMessage(b)?.id) {
+            return Number(getLastMessage(b).id) - Number(getLastMessage(a).id);
+          } else if (getLastMessage(a)?.id) {
+            return -1;
+          } else if (getLastMessage(b)?.id) {
+            return 1;
+          }
+          return -1;
+        });
+
+      chatsMap.set(lowerCaseSearchTerm, result);
+    }
+
+    return chatsMap.get(lowerCaseSearchTerm) || [];
+  }, [chats, searchTerm]);
+
+  useEffect(() => {
+    if (burgerMenu) {
+      // Since React Native doesn't have a native mouse event, we won't use `mousedown`
+      // A listener for "blur" event (on touch outside) or "TouchableWithoutFeedback" may be used for mobile
+    }
+  }, [burgerMenu]);
+
+  const toggleDrawer = () => {
+    if (isDrawerOpen) {
+      closeDrawer();
+    } else {
+      setDrawerOpen(true);
+      Animated.parallel([
+        Animated.timing(drawerAnimation, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        Animated.timing(overlayAnimation, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }
+  };
+
+  const closeDrawer = () => {
+    Animated.parallel([
+      Animated.timing(drawerAnimation, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+      }),
+      Animated.timing(overlayAnimation, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+      }),
+    ]).start(() => {
+      setDrawerOpen(false);
+    });
+  };
+
+  return (
+    <>
+      {burgerMenu && !open && (
+        <Button
+          style={{
+            padding: 8,
+            borderRadius: 16,
+            backgroundColor: 'transparent',
+          }}
+          color="black"
+          unstyled
+          EndIcon={<BurgerMenuIcon color={config?.colors?.primary} />}
+          onPress={() => setOpen(!open)}
+        />
+      )}
+      <View
+        ref={containerRef}
+        style={[styles.container, config?.roomListStyles]}
+      >
+        {(open || !burgerMenu) && (
+          <>
+            <View style={styles.scrollContainer}>
+              <HeaderRoomList setDrawerOpen={toggleDrawer} />
+              <FlatList
+                data={filteredChats}
+                keyExtractor={(item) => item.jid}
+                renderItem={({ item }) => (
+                  <Pressable
+                    onPress={() => performClick(item)}
+                    onPressIn={handlePressIn}
+                    onPressOut={handlePressOut}
+                  >
+                    <ChatRoomItem chat={item} config={config} />
+                  </Pressable>
+                )}
+                ListHeaderComponent={
+                  <SearchInput
+                    icon={<SearchIcon height={20} />}
+                    value={searchTerm}
+                    onChangeText={handleSearchChange}
+                    placeholder="Search..."
+                  />
+                }
+                style={styles.chatList}
+              />
+
+              <HeaderRoomListMenu
+                closeDrawer={closeDrawer}
+                drawerAnimation={drawerAnimation}
+                overlayAnimation={overlayAnimation}
+                isDrawerOpen={isDrawerOpen}
+              />
+            </View>
+          </>
+        )}
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  burgerButton: {
+    fontSize: 24,
+    padding: 10,
+    color: '#333',
+  },
+  container: {
+    width: '100%',
+    height: '100%',
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  scrollContainer: {
+    flexGrow: 1,
+  },
+  headerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    justifyContent: 'space-between',
+  },
+  chatList: {
+    flex: 1,
+    paddingTop: 10,
+    paddingHorizontal: 8,
+    backgroundColor: '#FAFAFA',
+  },
+});
+
+export default RoomList;

package/src/components/MainComponents/Select.tsx

@@ -0,0 +1,165 @@
+import React, { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components/native';
+import {
+  Animated,
+  TextInput,
+  TouchableOpacity,
+  FlatList,
+  Keyboard,
+} from 'react-native';
+import { Iso639_1Codes } from '../../types/types';
+
+const SelectWrapper = styled.View`
+  position: relative;
+  width: 100%;
+`;
+
+const SelectBox = styled.TouchableOpacity<{
+  isOpen: boolean;
+  borderColor?: string;
+}>`
+  border: ${({ borderColor }) =>
+    borderColor ? `1px solid ${borderColor}` : '1px solid #ccc'};
+  padding: 10px;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #fff;
+  border-radius: 5px;
+  box-shadow: ${({ isOpen }) =>
+    isOpen ? '0px 4px 8px rgba(0, 0, 0, 0.1)' : 'none'};
+`;
+
+const Placeholder = styled.Text`
+  color: #aaa;
+`;
+
+const Icon = styled(Animated.Text)`
+  margin-left: 10px;
+`;
+
+const Dropdown = styled.View`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background-color: #fff;
+  max-height: 200px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  z-index: 100;
+`;
+
+const SearchBox = styled.TextInput`
+  width: 100%;
+  padding: 10px;
+  border-bottom-width: 1px;
+  border-color: #ccc;
+  box-sizing: border-box;
+`;
+
+const DropdownItem = styled.TouchableOpacity`
+  padding: 10px;
+`;
+
+const DropdownItemText = styled.Text`
+  color: #000;
+`;
+
+interface SelectProps {
+  options: { name: string; id: Iso639_1Codes }[];
+  placeholder: string;
+  onSelect: (selected: { name: string; id: Iso639_1Codes }) => void;
+  accentColor?: string;
+  selectedValue: { name: string; id: string } | null;
+}
+
+const Select: React.FC<SelectProps> = ({
+  options,
+  placeholder,
+  onSelect,
+  accentColor,
+  selectedValue = null,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<{ name: string; id: string } | null>(
+    selectedValue
+  );
+  const [searchTerm, setSearchTerm] = useState('');
+  const rotationAnim = useRef(new Animated.Value(0)).current;
+
+  const toggleDropdown = () => {
+    setIsOpen((prev) => !prev);
+    Animated.timing(rotationAnim, {
+      toValue: isOpen ? 0 : 1,
+      duration: 300,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const handleSelect = (option: { name: string; id: Iso639_1Codes }) => {
+    setSelected(option);
+    onSelect(option);
+    setIsOpen(false);
+    setSearchTerm('');
+    Keyboard.dismiss();
+  };
+
+  const filteredOptions = options.filter((option) =>
+    option.name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const rotateInterpolation = rotationAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '180deg'],
+  });
+
+  return (
+    <SelectWrapper>
+      <SelectBox
+        isOpen={isOpen}
+        onPress={toggleDropdown}
+        borderColor={accentColor}
+      >
+        {selected ? (
+          <Placeholder>{selected.name}</Placeholder>
+        ) : (
+          <Placeholder>{placeholder}</Placeholder>
+        )}
+        <Icon
+          style={{
+            transform: [{ rotate: rotateInterpolation }],
+            color: accentColor,
+          }}
+        >
+          ▼
+        </Icon>
+      </SelectBox>
+      {isOpen && (
+        <Dropdown>
+          <SearchBox
+            placeholder="Search..."
+            value={searchTerm}
+            onChangeText={setSearchTerm}
+          />
+          <FlatList
+            data={filteredOptions}
+            keyExtractor={(item) => item.id}
+            renderItem={({ item }) => (
+              <DropdownItem onPress={() => handleSelect(item)}>
+                <DropdownItemText>{item.name}</DropdownItemText>
+              </DropdownItem>
+            )}
+            ListEmptyComponent={
+              <DropdownItem>
+                <DropdownItemText>No options found</DropdownItemText>
+              </DropdownItem>
+            }
+          />
+        </Dropdown>
+      )}
+    </SelectWrapper>
+  );
+};
+
+export default Select;

package/src/components/MainComponents/Switch.tsx

@@ -0,0 +1,73 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { Animated } from 'react-native';
+import styled from 'styled-components/native';
+
+const SwitchContainer = styled.Pressable<{ isOn: boolean; bgColor?: string }>`
+  width: 34px;
+  height: 18px;
+  background-color: ${({ isOn, bgColor }) =>
+    isOn ? (bgColor ? bgColor : '#0056d2') : '#8C8C8C'};
+  border-radius: 100px;
+  display: flex;
+  transition: background-color 0.3s;
+  padding: 2px;
+`;
+
+const Toggle = styled(Animated.View)`
+  width: 15px;
+  height: 15px;
+  background-color: white;
+  border-radius: 100px;
+`;
+
+interface SwitchProps {
+  onToggle: (isOn: boolean) => void;
+  bgColor?: string;
+  onSwitchOn?: () => void;
+  onSwitchOff?: () => void;
+}
+
+const Switch: React.FC<SwitchProps> = ({
+  onSwitchOn,
+  onSwitchOff,
+  onToggle,
+  bgColor,
+}) => {
+  const [isOn, setIsOn] = useState(false);
+  const translateX = useRef(new Animated.Value(0)).current;
+
+  const toggleSwitch = () => {
+    const nextState = !isOn;
+
+    Animated.timing(translateX, {
+      toValue: nextState ? 15 : 0,
+      duration: 300,
+      useNativeDriver: true,
+    }).start();
+
+    if (nextState) {
+      onSwitchOn?.();
+    } else {
+      onSwitchOff?.();
+    }
+
+    setIsOn(nextState);
+    onToggle(nextState);
+  };
+
+  return (
+    <SwitchContainer
+      isOn={isOn}
+      onPress={toggleSwitch}
+      accessibilityRole="switch"
+      accessibilityState={{ checked: isOn }}
+      accessibilityLabel="Toggle switch"
+      accessibilityHint="Double tap to toggle on or off"
+      bgColor={bgColor}
+    >
+      <Toggle style={{ transform: [{ translateX }] }} />
+    </SwitchContainer>
+  );
+};
+
+export default Switch;