softchatjs-react-native
Version:
React native UI SDK for softchatjs-core. Create a free account at: https://www.softchatjs.com
392 lines (375 loc) • 15.3 kB
JavaScript
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/components/Chat/ChatHeader.tsx
var ChatHeader_exports = {};
__export(ChatHeader_exports, {
default: () => ChatHeader
});
module.exports = __toCommonJS(ChatHeader_exports);
var import_react6 = __toESM(require("react"));
var import_react_native4 = require("react-native");
// src/components/Conversations/ConversationAvatar.tsx
var import_react_native2 = require("react-native");
var import_react4 = __toESM(require("react"));
// src/utils/index.ts
var import_moment = __toESM(require("moment"));
var import_softchatjs_core = require("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 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";
};
// src/constants/Colors.ts
var Colors = {
greyLighter: "#F0F0F0"
};
// src/components/Conversations/ConversationAvatar.tsx
var import_expo_image = require("expo-image");
// src/contexts/ChatProvider.tsx
var import_react3 = __toESM(require("react"));
// src/contexts/ModalProvider.tsx
var import_react = __toESM(require("react"));
var import_react_native = require("react-native");
var initial = {
displayModal: () => {
},
resetModal: () => {
},
modalProps: {
dismissable: true,
justifyContent: "center",
children: null,
animation: "slide",
containerWidth: "100%"
}
};
var ModalProviderContext = (0, import_react.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
var import_react2 = __toESM(require("react"));
var import_expo_av = require("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 = (0, import_react2.createContext)(
initialMessageStateContext
);
// src/contexts/ChatProvider.tsx
var ConfigContext = (0, import_react3.createContext)({
theme: theme_default,
client: null,
fontFamily: void 0,
fontScale: 1
});
function useConfig() {
return (0, import_react3.useContext)(ConfigContext);
}
// src/components/Conversations/ConversationAvatar.tsx
var avatarSize = 50;
var ConversationAvatar = ({
type,
chatUserId,
participantList,
groupMeta,
conversationTitle
}) => {
const { fontFamily, fontScale } = useConfig();
const userInfo = (0, import_react4.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__ */ import_react4.default.createElement(import_expo_image.Image, { source: { uri: imageUri }, style: styles.avatar, cachePolicy: "disk" }) : /* @__PURE__ */ import_react4.default.createElement(import_react_native2.View, { style: styles.avatar }, /* @__PURE__ */ import_react4.default.createElement(import_react_native2.Text, { style: { ...styles.avatarInitials, fontSize: 30 * fontScale, fontFamily } }, initials));
};
var styles = import_react_native2.StyleSheet.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/Chat/ChatHeader.tsx
var import_react7 = require("react");
var import_expo_status_bar = require("expo-status-bar");
// src/assets/icons.tsx
var import_react5 = __toESM(require("react"));
var import_react_native3 = require("react-native");
var import_react_native_svg = require("react-native-svg");
var BroadcastIcon = (props) => {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ import_react5.default.createElement(import_react_native_svg.Svg, { width: size, height: size, viewBox: "0 0 20 20", fill: "none" }, /* @__PURE__ */ import_react5.default.createElement(
import_react_native_svg.Path,
{
d: "M14.158 1.02584C14.2838 1.06763 14.3879 1.15768 14.4474 1.2762C14.5068 1.39472 14.5167 1.532 14.475 1.65784L13.975 3.15784C13.9331 3.28382 13.8428 3.38799 13.7241 3.44744C13.6054 3.50689 13.468 3.51675 13.342 3.47484C13.216 3.43294 13.1118 3.34271 13.0524 3.224C12.9929 3.10529 12.9831 2.96782 13.025 2.84184L13.525 1.34184C13.5458 1.27951 13.5786 1.22189 13.6217 1.17226C13.6648 1.12264 13.7172 1.08199 13.776 1.05265C13.8348 1.0233 13.8988 1.00582 13.9643 1.00123C14.0299 0.996627 14.0957 1.00499 14.158 1.02584ZM17.855 2.85384C17.9014 2.80736 17.9382 2.75218 17.9633 2.69147C17.9884 2.63075 18.0013 2.56569 18.0013 2.49999C18.0012 2.43429 17.9882 2.36925 17.963 2.30857C17.9379 2.24789 17.901 2.19277 17.8545 2.14634C17.808 2.09992 17.7528 2.06311 17.6921 2.03801C17.6314 2.01291 17.5663 2.00002 17.5006 2.00007C17.4349 2.00011 17.3699 2.0131 17.3092 2.03828C17.2485 2.06347 17.1934 2.10036 17.147 2.14684L15.147 4.14684C15.0559 4.24115 15.0055 4.36745 15.0066 4.49855C15.0078 4.62964 15.0604 4.75505 15.1531 4.84775C15.2458 4.94046 15.3712 4.99304 15.5023 4.99418C15.6334 4.99532 15.7597 4.94492 15.854 4.85384L17.855 2.85384ZM7.60698 3.14584C7.74648 2.85208 7.95551 2.59676 8.21596 2.40201C8.47641 2.20726 8.78042 2.07897 9.10164 2.02824C9.42287 1.97751 9.75162 2.00587 10.0594 2.11088C10.3672 2.21589 10.6447 2.39436 10.868 2.63084L17.455 9.61084C17.6748 9.84373 17.8355 10.126 17.9235 10.4339C18.0115 10.7418 18.0243 11.0663 17.9608 11.3802C17.8973 11.6941 17.7594 11.9882 17.5586 12.2376C17.3578 12.4871 17.1 12.6847 16.807 12.8138L12.87 14.5498C13.0159 15.0703 13.0395 15.6175 12.9387 16.1486C12.838 16.6797 12.6158 17.1803 12.2895 17.6113C11.9631 18.0422 11.5415 18.3918 11.0576 18.6327C10.5736 18.8736 10.0405 18.9992 9.49998 18.9998C8.90423 19 8.31831 18.848 7.7977 18.5584C7.27709 18.2688 6.83902 17.8511 6.52498 17.3448L5.32498 17.8738C5.04921 17.9953 4.74326 18.0308 4.447 17.9759C4.15073 17.921 3.87787 17.7781 3.66398 17.5658L2.44198 16.3558C2.22101 16.137 2.07355 15.8549 2.01998 15.5485C1.96641 15.2421 2.00939 14.9267 2.14298 14.6458L7.60698 3.14584ZM7.45298 16.9348C7.78487 17.4086 8.27081 17.7527 8.82797 17.9083C9.38512 18.064 9.97901 18.0216 10.5084 17.7884C11.0378 17.5552 11.4699 17.1456 11.7312 16.6294C11.9924 16.1133 12.0665 15.5225 11.941 14.9578L7.45298 16.9348ZM10.141 3.31784C10.0294 3.19969 9.89068 3.11052 9.73687 3.05805C9.58305 3.00557 9.41877 2.99137 9.25823 3.01669C9.0977 3.042 8.94575 3.10605 8.81555 3.20331C8.68534 3.30057 8.5808 3.42809 8.51098 3.57484L3.04598 15.0748C3.00172 15.1684 2.98757 15.2733 3.00548 15.3752C3.02339 15.4772 3.07248 15.571 3.14598 15.6438L4.36798 16.8548C4.4393 16.9253 4.53016 16.9728 4.62878 16.991C4.7274 17.0091 4.8292 16.9973 4.92098 16.9568L16.403 11.8998C16.5495 11.8354 16.6784 11.7366 16.7788 11.612C16.8793 11.4873 16.9483 11.3404 16.9801 11.1835C17.012 11.0266 17.0057 10.8644 16.9618 10.7105C16.9179 10.5565 16.8377 10.4154 16.728 10.2988L10.141 3.31784ZM17 5.99985C16.8674 5.99985 16.7402 6.05252 16.6464 6.14629C16.5527 6.24006 16.5 6.36724 16.5 6.49985C16.5 6.63245 16.5527 6.75963 16.6464 6.8534C16.7402 6.94717 16.8674 6.99985 17 6.99985H18.5C18.6326 6.99985 18.7598 6.94717 18.8535 6.8534C18.9473 6.75963 19 6.63245 19 6.49985C19 6.36724 18.9473 6.24006 18.8535 6.14629C18.7598 6.05252 18.6326 5.99985 18.5 5.99985H17Z",
fill: color
}
));
};
// src/components/Chat/ChatHeader.tsx
function ChatHeader(props) {
const { conversation, chatUserId, renderChatHeader, isTyping } = props;
const { theme: theme2, fontFamily, fontScale } = useConfig();
let conversationTitle = (0, import_react7.useMemo)(() => {
return conversation ? getConversationTitle(chatUserId, conversation) : null;
}, [chatUserId, conversation]);
if (renderChatHeader !== void 0) {
if (!conversation) return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null);
const userInfo = getUserInfoWithId(
chatUserId,
conversation.participantList
);
return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, renderChatHeader({
conversationTitle,
conversationType: conversation.conversationType,
activeUser: userInfo?.presentUser,
groupMeta: conversation?.groupMeta
}));
}
if (conversation?.conversationType === "broadcast-chat") {
return /* @__PURE__ */ import_react6.default.createElement(import_react_native4.View, { style: { height: "auto", paddingVertical: 10, width: "100%", alignItems: "center", justifyContent: "center", borderBottomColor: theme2?.divider, borderBottomWidth: 1 } }, /* @__PURE__ */ import_react6.default.createElement(BroadcastIcon, { size: 50 }), /* @__PURE__ */ import_react6.default.createElement(import_react_native4.Text, { style: { fontFamily, color: theme2?.text.secondary } }, conversation?.name ?? "Broadcast List"));
}
return /* @__PURE__ */ import_react6.default.createElement(import_react_native4.View, { style: { ...styles2.main, borderBottomColor: theme2?.divider } }, /* @__PURE__ */ import_react6.default.createElement(import_expo_status_bar.StatusBar, { style: "auto" }), conversation !== null && /* @__PURE__ */ import_react6.default.createElement(
ConversationAvatar,
{
chatUserId,
participantList: conversation.participantList,
type: conversation.conversationType,
groupMeta: conversation.groupMeta,
conversationTitle: conversationTitle || ""
}
), /* @__PURE__ */ import_react6.default.createElement(import_react_native4.View, null, conversationTitle && /* @__PURE__ */ import_react6.default.createElement(
import_react_native4.Text,
{
style: {
...styles2.conversationTitle,
fontSize: 20 * fontScale,
color: theme2?.text.secondary,
fontFamily
}
},
conversationTitle
), isTyping && /* @__PURE__ */ import_react6.default.createElement(
import_react_native4.Text,
{
style: {
...styles2.typingIndicator,
fontSize: 15 * fontScale,
color: theme2?.text.secondary,
fontFamily
}
},
"Typing..."
)));
}
var styles2 = import_react_native4.StyleSheet.create({
main: {
paddingHorizontal: 15,
alignItems: "center",
flexDirection: "row",
width: "100%",
paddingVertical: 10,
borderBottomWidth: 1
},
conversationTitle: {
fontSize: 20,
textTransform: "capitalize"
},
typingIndicator: {
fontSize: 15,
fontStyle: "italic"
}
});
//# sourceMappingURL=ChatHeader.js.map