@rohitninawe/chat-uikit-react-native
Version:
Ready-to-use Chat UI Components for React Native
180 lines • 8.88 kB
JavaScript
import React, { useEffect, useRef, useState } from 'react';
import { View, TouchableOpacity, Image, Text, SectionList } from 'react-native';
import { CometChat } from '@cometchat/chat-sdk-react-native';
import { AvatarStyle, CometChatAvatar, CometChatContext, localize } from '../../shared';
import { Style } from './style';
import { CloseIcon } from './resources';
import { useContext } from 'react';
import { CallLogDetailsStyle } from './CallLogDetailsStyle';
import { CallingDetailsUtils } from '../CallingDetailsUtils';
import { CometChatParticipants } from '../CometChatCallLogParticipants/CometChatCallLogParticipants';
import { CometChatRecordings } from '../CometChatCallLogRecordings/CometChatCallLogRecordings';
import { CometChatCallLogHistory } from '../CometChatCallLogHistory';
const listenerId = "userListener_" + new Date().getTime();
const SCREEN = {
DETAILS: "details",
PARTICIPANTS: "participants",
RECORDINGS: "recordings",
HISTORY: "history",
};
export const CometChatCallLogDetails = (props) => {
const { onBack, onError, CustomProfileView, data, hideProfile, call, closeButtonIconImage, showCloseButton = true, title = localize("CALL_DETAILS"), avatarStyle, callLogDetailsStyle, callLogHistoryConfiguration, callLogParticipantsConfiguration, callLogRecordingsConfiguration } = props;
const { theme } = useContext(CometChatContext);
const [tempates, setTemplates] = useState([]);
const [group, setGroup] = useState(undefined);
const [user, setUser] = useState(undefined);
const [error, setError] = useState(undefined);
const [screen, setScreen] = useState(SCREEN.DETAILS);
const [participantsData, setParticipantsData] = useState([]);
const [recordingsData, setRecordingsData] = useState([]);
const [callData, setCallData] = useState(call);
const loggedInUser = useRef(null);
const _avatarStyle = new AvatarStyle({
nameTextColor: theme.palette.getAccent(),
backgroundColor: theme.palette.getBackgroundColor(),
nameTextFont: theme.typography.heading,
height: 100,
width: 100,
borderRadius: 50,
...avatarStyle
});
const _callLogDetailsStyle = new CallLogDetailsStyle({
titleColor: theme.palette.getAccent(),
titleFont: theme.typography.heading,
closeIconTint: theme.palette.getPrimary(),
backgroundColor: theme.palette.getBackgroundColor(),
...callLogDetailsStyle
});
useEffect(() => {
CometChat.getLoggedinUser().then((loggedUser) => {
let tmpList;
loggedInUser.current = loggedUser;
console.log({ callData });
let user = callData?.getReceiverType() == "user" ? loggedInUser.current?.getUid() === callData?.getInitiator()?.getUid() ? callData.getReceiver() : callData?.getInitiator() : undefined;
let group = callData?.getReceiverType() == "group" ? loggedInUser.current?.getUid() === callData?.getInitiator()?.getUid() ? callData.getReceiver() : callData?.getInitiator() : undefined;
console.log({ user });
if (data) {
tmpList = data({ message: callData, user, group });
}
else {
let detailsTemplate = CallingDetailsUtils.getDefaultDetailsTemplates(callData, loggedInUser.current, theme);
detailsTemplate.push(CallingDetailsUtils.getSecondaryDetailsTemplate(callData, loggedInUser.current, theme));
tmpList = [...detailsTemplate];
}
setTemplates(tmpList.map(item => {
item['data'] = item.options;
return item;
}));
setUser(user);
setGroup(group);
}, (error) => {
setError(localize("SOMETHING_WRONG"));
onError && onError(error);
});
CometChat.addUserListener(listenerId, new CometChat.UserListener({
onUserOnline: (user) => {
setUser(user);
},
onUserOffline: (user) => {
setUser(user);
},
}));
return () => {
CometChat.removeUserListener(listenerId);
};
}, [callData]);
const _render = ({ item, onClick }) => {
function _onPress() {
if (onClick) {
onClick(item);
return;
}
else {
if (item.id == SCREEN.PARTICIPANTS) {
setScreen(SCREEN.PARTICIPANTS);
setParticipantsData(callData?.getParticipants());
return;
}
else if (item.id == SCREEN.RECORDINGS) {
setScreen(SCREEN.RECORDINGS);
setRecordingsData(callData?.getRecordings());
return;
}
else if (item.id == SCREEN.HISTORY) {
setScreen(SCREEN.HISTORY);
return;
}
}
console.log("onClicked", item);
}
const { CustomView } = item;
if (item.CustomView) {
return <TouchableOpacity activeOpacity={1} onPress={_onPress}>
<CustomView />
</TouchableOpacity>;
}
return <></>;
};
console.log({ user, group });
return (<View style={{ flex: 1, backgroundColor: _callLogDetailsStyle.backgroundColor }}>
{screen === SCREEN.DETAILS ? <>
{!hideProfile &&
<View style={[Style.row, { height: 60, alignItems: "center" }]}>
{CustomProfileView && <CustomProfileView user={user}/>}
{showCloseButton &&
<TouchableOpacity onPress={onBack}>
<Image style={[Style.imageStyle, { tintColor: _callLogDetailsStyle.closeIconTint }]} source={closeButtonIconImage || CloseIcon}/>
</TouchableOpacity>}
<Text style={[theme.typography.heading, Style.heading, { color: theme.palette.getAccent() }]}>{title}</Text>
</View>}
{(error &&
<View style={{ justifyContent: "center", alignItems: "center" }}>
<Text style={{ color: theme.palette.getError() }}>{error}</Text>
</View>) ||
<>
<View style={{ alignItems: "center", justifyContent: "center" }}>
<CometChatAvatar style={_avatarStyle} image={user && user['avatar'] ? { uri: user['avatar'] } : group ? { uri: group['icon'] || group['avatar'] } : undefined} name={user ? user['name'] : group ? group['name'] : undefined}/>
<Text style={[{ marginVertical: 10, color: _callLogDetailsStyle.titleColor }, _callLogDetailsStyle.titleFont]}>{user ? user['name'] : group ? group['name'] : undefined}</Text>
</View>
<SectionList sections={tempates} keyExtractor={(item, index) => item + index} renderItem={_render} renderSectionHeader={({ section }) => {
const { title, titleColor, titleFont, titleStyle } = section;
if (!title)
return null;
return (<Text style={[
{ color: titleColor ?? theme.palette.getAccent500() },
titleFont ? titleFont : theme.typography.text2,
titleStyle ? titleStyle : {},
]}>
{title}
</Text>);
}}/>
</>}
</>
: screen === SCREEN.PARTICIPANTS ?
<>
<CometChatParticipants call={callData} data={participantsData} showBackButton={true} onBack={() => {
setScreen(SCREEN.DETAILS);
setParticipantsData([]);
}} {...callLogParticipantsConfiguration}/>
</>
: screen === SCREEN.RECORDINGS ?
<>
<CometChatRecordings data={recordingsData} showBackButton={true} onBack={() => {
setScreen(SCREEN.DETAILS);
setRecordingsData([]);
}} {...callLogRecordingsConfiguration}/>
</>
: screen === SCREEN.HISTORY ?
<>
<CometChatCallLogHistory user={user} group={group} showBackButton={true} onBack={() => {
setScreen(SCREEN.DETAILS);
}} onItemPress={(item) => {
console.log("item", item);
setCallData(item);
setScreen(SCREEN.DETAILS);
}} {...callLogHistoryConfiguration}/>
</>
: null}
</View>);
};
//# sourceMappingURL=CometChatCallLogDetails.js.map