softchatjs-react-native
Version:
React native UI SDK for softchatjs-core. Create a free account at: https://www.softchatjs.com
469 lines (454 loc) • 13.3 kB
JavaScript
// src/components/Conversations/Conversation.tsx
import { TouchableOpacity as TouchableOpacity2, View as View4, StyleSheet as StyleSheet3, Text as Text4 } from "react-native";
import React6, { useCallback, useMemo as useMemo2 } from "react";
// src/utils/index.ts
import moment from "moment";
import { MessageStates } from "softchatjs-core";
var getUserInfoWithId = (userId, participantList) => {
let presentUser = participantList.find((participant) => participant.participantId === userId);
let otherParticipants = participantList.filter((participant) => participant.participantId !== userId);
return { presentUser: presentUser?.participantDetails, receivingUser: otherParticipants[0]?.participantDetails };
};
var truncate = (str, len) => {
return str.length > len ? str.substring(0, len) + "..." : str;
};
var getConversationTitle = (userId, converstaion) => {
if (converstaion.conversationType !== "group-chat") {
const userInfos = getUserInfoWithId(userId, converstaion.participantList);
const firstname = userInfos.receivingUser?.firstname;
const username = userInfos.receivingUser?.username;
return firstname ? firstname : username;
}
return converstaion.groupMeta?.groupName || "no-groupname";
};
function formatConversationTime(time) {
const now = moment();
const then = moment(time);
const duration = moment.duration(now.diff(then));
const years = Math.floor(duration.asYears());
if (years > 0) return years + "yr";
const months = Math.floor(duration.asMonths());
if (months > 0) return months + "mo";
const weeks = Math.floor(duration.asWeeks());
if (weeks > 0) return weeks + "w";
const days = Math.floor(duration.asDays());
if (days > 0) return days + "d";
const hours = Math.floor(duration.asHours());
if (hours > 0) return hours + "h";
const minutes = Math.floor(duration.asMinutes());
if (minutes > 0) return minutes + "m";
return "Just now";
}
var getUnreadMessageIds = (conversation, userId) => {
var ids = [];
conversation.messages.map((m) => {
if (m.messageState === MessageStates.SENT && m.from !== userId) {
ids.push(m.messageId);
}
});
return ids;
};
var getParticipant = (uid, participantList) => {
return participantList.find((p) => p.participantDetails.uid === uid);
};
// src/components/Conversations/ConversationAvatar.tsx
import {
View as View2,
StyleSheet as StyleSheet2,
Text as Text2
} from "react-native";
import React4, { useMemo } from "react";
// src/constants/Colors.ts
var Colors = {
greyLighter: "#F0F0F0"
};
// src/components/Conversations/ConversationAvatar.tsx
import { Image } from "expo-image";
// src/contexts/ChatProvider.tsx
import React3, { createContext as createContext3, useContext as useContext3 } from "react";
// src/contexts/ModalProvider.tsx
import React, { createContext, useContext, useState } from "react";
import {
Modal,
View
} from "react-native";
var initial = {
displayModal: () => {
},
resetModal: () => {
},
modalProps: {
dismissable: true,
justifyContent: "center",
children: null,
animation: "slide",
containerWidth: "100%"
}
};
var ModalProviderContext = createContext(initial);
// src/theme/colors.ts
var teal = {
50: "#DCF2F0",
100: "#A9DFD8",
200: "#73CABE",
300: "#3AB4A4",
400: "#00A391",
500: "#00927E",
600: "#008572",
700: "#007662",
800: "#006654",
900: "#004A38"
};
var green = {
50: "#E6F5E4",
100: "#C2E6BD",
200: "#9AD693",
300: "#6FC666",
400: "#4ABA42",
500: "#17AE13",
600: "#029F04",
700: "#008D00",
800: "#007C00",
900: "#005E00"
};
var grey = {
50: "#F6F6FF",
100: "#F2F1FF",
200: "#EBEBF9",
300: "#CAC9D7",
400: "#ACACB9",
500: "#82818F",
600: "#6D6D7A",
700: "#4D4D59",
800: "#2B2B36",
900: "#21222D",
A100: "#1D1E26"
};
var stone = {
50: "#F8F8F8",
100: "#EFEFEF",
200: "#E8E8E8",
300: "#D9D9D9",
400: "#D2D2D2",
500: "#A0A0A0",
600: "#87888C",
700: "#2C2D33",
800: "#1D1E26",
900: "#171821"
};
// src/theme/index.ts
var theme = {
background: {
primary: stone[900],
secondary: grey[900],
disabled: grey[800]
},
text: {
primary: "black",
secondary: stone[200],
disabled: stone[500]
},
action: {
primary: teal[50],
secondary: stone[300]
},
chatBubble: {
left: {
bgColor: grey[900],
messageColor: stone[200],
messageTimeColor: "grey",
replyBorderColor: stone[200]
},
right: {
bgColor: "#474952",
messageColor: "white",
messageTimeColor: "grey",
replyBorderColor: green[900]
}
},
icon: "white",
divider: stone[700]
};
var theme_default = theme;
// src/contexts/MessageStateContext.tsx
import React2, {
createContext as createContext2,
useState as useState2,
useContext as useContext2
} from "react";
import { Audio } from "expo-av";
// src/constants/defaultUser.ts
var defaultUser_default = {
id: "",
uid: "",
username: "",
firstname: "",
lastname: "",
profileUrl: "",
color: "",
custom: {}
};
// src/contexts/MessageStateContext.tsx
var initialMessageStateContext = {
globalTextMessage: "",
setGlobalTextMessage: () => {
},
stickers: [],
setStickers: () => {
},
pendingMessages: [],
addNewPendingMessages: (message) => {
},
removePendingMessage: (messageId) => {
},
updatePendingMessage: (messageId, message) => {
},
playVoiceMessage: (media) => {
},
pauseVoiceMessage: () => {
},
resumeVoiceMessage: () => {
},
audioState: null,
unload: () => {
},
sound: null,
activeVoiceMessage: null,
avPlayBackStatus: null,
userMeta: defaultUser_default,
setUserMeta: () => {
},
conversationList: [],
setConversationList: () => {
}
};
var MessageStateContext = createContext2(
initialMessageStateContext
);
// src/contexts/ChatProvider.tsx
var ConfigContext = createContext3({
theme: theme_default,
client: null,
fontFamily: void 0,
fontScale: 1
});
function useConfig() {
return useContext3(ConfigContext);
}
// src/components/Conversations/ConversationAvatar.tsx
var avatarSize = 50;
var ConversationAvatar = ({
type,
chatUserId,
participantList,
groupMeta,
conversationTitle
}) => {
const { fontFamily, fontScale } = useConfig();
const userInfo = useMemo(() => {
if (type === "private-chat") {
return getUserInfoWithId(chatUserId, participantList);
}
return null;
}, [chatUserId, participantList, type]);
const imageUri = type === "private-chat" ? userInfo?.receivingUser?.profileUrl : groupMeta?.groupIcon;
const initials = conversationTitle ? conversationTitle.substring(0, 1) : "";
return imageUri ? /* @__PURE__ */ React4.createElement(Image, { source: { uri: imageUri }, style: styles.avatar, cachePolicy: "disk" }) : /* @__PURE__ */ React4.createElement(View2, { style: styles.avatar }, /* @__PURE__ */ React4.createElement(Text2, { style: { ...styles.avatarInitials, fontSize: 30 * fontScale, fontFamily } }, initials));
};
var styles = StyleSheet2.create({
main: {
height: "100%",
width: "100%"
},
conversationTitle: {
color: "black",
fontSize: 20,
textTransform: "capitalize"
},
messageText: {
color: "black",
fontSize: 17
},
messageTime: {},
avatar: {
height: avatarSize,
width: avatarSize,
borderRadius: avatarSize,
backgroundColor: Colors.greyLighter,
alignItems: "center",
justifyContent: "center",
marginEnd: 10
},
avatarInitials: {
fontSize: 30,
textTransform: "capitalize",
color: "white"
},
listItem: {
height: 80,
width: "100%",
paddingHorizontal: 10,
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between"
}
});
// src/components/Badge.tsx
import React5 from "react";
import { View as View3, Text as Text3 } from "react-native";
var UnreadMessagesBadge = (props) => {
const { label } = props;
return /* @__PURE__ */ React5.createElement(View3, { style: {
height: 25,
width: 25,
borderRadius: 25,
backgroundColor: "lightblue",
alignItems: "center",
justifyContent: "center"
} }, /* @__PURE__ */ React5.createElement(Text3, { style: { color: "white", fontWeight: "bold" } }, label));
};
// src/components/Conversations/Conversation.tsx
var ConversationItem = (props) => {
const { theme: theme2, fontFamily, fontScale } = useConfig();
const { conversation, chatUserId, isLastItem, onPress, lastMessage, unread } = props;
let conversationTitle = useMemo2(() => {
return getConversationTitle(chatUserId, conversation);
}, [chatUserId, conversation]);
let getUnreadMessages = useMemo2(() => {
return getUnreadMessageIds(conversation, chatUserId);
}, [conversation]);
const renderLastMessage = useCallback(() => {
if (!lastMessage) {
return null;
}
if (lastMessage.reactions.length > 0 && chatUserId !== lastMessage?.reactions[lastMessage.reactions.length - 1].uid) {
return /* @__PURE__ */ React6.createElement(Text4, { style: { fontSize: 15.5 * fontScale, color: theme2?.text.secondary, fontFamily } }, /* @__PURE__ */ React6.createElement(Text4, { style: { fontStyle: "italic" } }, "@", getParticipant(
lastMessage.reactions[lastMessage.reactions.length - 1]?.uid,
conversation.participantList
)?.participantDetails.username), " ", 'reacted "', lastMessage.reactions[0]?.emoji, '" to your message.');
}
if (lastMessage.message) {
return /* @__PURE__ */ React6.createElement(Text4, { style: { fontSize: 15.5 * fontScale, color: theme2?.text.secondary, fontFamily } }, lastMessage.from === chatUserId ? "You: " : "", truncate(lastMessage.message, 35));
} else {
return /* @__PURE__ */ React6.createElement(View4, { style: { flexDirection: "row", alignItems: "center" } }, /* @__PURE__ */ React6.createElement(Text4, { style: { fontSize: 15.5 * fontScale, color: theme2?.text.secondary, fontFamily } }, lastMessage.from === chatUserId ? "You: " : ""), /* @__PURE__ */ React6.createElement(View4, { style: { padding: 3, borderWidth: 1, borderColor: theme2?.divider, borderRadius: 3 } }, /* @__PURE__ */ React6.createElement(
Text4,
{
style: {
fontFamily,
fontSize: 10 * fontScale,
color: theme2?.text.secondary
}
},
lastMessage.attachmentType || "media"
)));
}
}, [lastMessage]);
return (
// <Draggeble actionContainer={
// <View style={{ flex: 1, backgroundColor: 'red', width: '100%', height: '100%' }}>
// <Text>hello</Text>
// </View>
// }>
/* @__PURE__ */ React6.createElement(
TouchableOpacity2,
{
style: styles2.listItemContainer,
onPress: () => onPress()
},
/* @__PURE__ */ React6.createElement(
ConversationAvatar,
{
chatUserId,
participantList: conversation.participantList,
type: conversation.conversationType,
groupMeta: conversation.groupMeta,
conversationTitle
}
),
/* @__PURE__ */ React6.createElement(
View4,
{
style: [
{
...styles2.listItem
},
!isLastItem && {
borderBottomWidth: 0.5,
borderBottomColor: theme2?.divider
}
]
},
/* @__PURE__ */ React6.createElement(
View4,
{
style: { flexDirection: "row", flex: 1, alignItems: "center" }
},
/* @__PURE__ */ React6.createElement(View4, { style: { flex: 1 } }, /* @__PURE__ */ React6.createElement(
Text4,
{
style: {
textTransform: "capitalize",
fontSize: 20 * fontScale,
color: theme2?.text.secondary,
fontFamily
}
},
conversationTitle
), /* @__PURE__ */ React6.createElement(React6.Fragment, null, renderLastMessage()))
),
/* @__PURE__ */ React6.createElement(View4, { style: { alignItems: "flex-end" } }, unread.length > 0 && /* @__PURE__ */ React6.createElement(UnreadMessagesBadge, { label: unread.length }), lastMessage && /* @__PURE__ */ React6.createElement(
Text4,
{
style: {
fontSize: 15.5 * fontScale,
color: theme2?.text.secondary,
fontFamily
}
},
formatConversationTime(lastMessage?.createdAt)
))
)
)
);
};
var styles2 = StyleSheet3.create({
main: {
height: "100%",
width: "100%"
},
conversationTitle: {
fontSize: 20,
textTransform: "capitalize"
},
messageText: {
fontSize: 15.5
},
messageTime: {},
avatarInitials: {
fontSize: 30,
textTransform: "capitalize",
color: "white"
},
listItemContainer: {
flexDirection: "row",
height: 80,
flex: 1,
alignItems: "center"
},
listItem: {
width: "100%",
height: "100%",
flexDirection: "row",
alignItems: "center",
flex: 1,
justifyContent: "space-between"
},
typing: {
fontStyle: "italic",
color: "green"
}
});
export {
ConversationItem
};
//# sourceMappingURL=Conversation.mjs.map