UNPKG

softchatjs-react-native

Version:

React native UI SDK for softchatjs-core. Create a free account at: https://www.softchatjs.com

623 lines (612 loc) 23.6 kB
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/MessageOptions/index.tsx var MessageOptions_exports = {}; __export(MessageOptions_exports, { MessageOptions: () => MessageOptions, default: () => MessageOptions_default }); module.exports = __toCommonJS(MessageOptions_exports); var import_react5 = __toESM(require("react")); var import_react_native3 = require("react-native"); var import_react6 = require("react"); // src/assets/icons.tsx var import_react = __toESM(require("react")); var import_react_native = require("react-native"); var import_react_native_svg = require("react-native-svg"); function EmojiIcon(props) { const { size = 25, color = "black" } = props; return /* @__PURE__ */ import_react.default.createElement(import_react_native_svg.Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react.default.createElement( import_react_native_svg.Path, { d: "M12 17.5C14.33 17.5 16.3 16.04 17.11 14H6.89C7.69 16.04 9.67 17.5 12 17.5ZM8.5 11C8.89782 11 9.27936 10.842 9.56066 10.5607C9.84196 10.2794 10 9.89782 10 9.5C10 9.10218 9.84196 8.72064 9.56066 8.43934C9.27936 8.15804 8.89782 8 8.5 8C8.10218 8 7.72064 8.15804 7.43934 8.43934C7.15804 8.72064 7 9.10218 7 9.5C7 9.89782 7.15804 10.2794 7.43934 10.5607C7.72064 10.842 8.10218 11 8.5 11ZM15.5 11C15.8978 11 16.2794 10.842 16.5607 10.5607C16.842 10.2794 17 9.89782 17 9.5C17 9.10218 16.842 8.72064 16.5607 8.43934C16.2794 8.15804 15.8978 8 15.5 8C15.1022 8 14.7206 8.15804 14.4393 8.43934C14.158 8.72064 14 9.10218 14 9.5C14 9.89782 14.158 10.2794 14.4393 10.5607C14.7206 10.842 15.1022 11 15.5 11ZM12 20C9.87827 20 7.84344 19.1571 6.34315 17.6569C4.84285 16.1566 4 14.1217 4 12C4 9.87827 4.84285 7.84344 6.34315 6.34315C7.84344 4.84285 9.87827 4 12 4C14.1217 4 16.1566 4.84285 17.6569 6.34315C19.1571 7.84344 20 9.87827 20 12C20 14.1217 19.1571 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20ZM12 2C6.47 2 2 6.5 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z", fill: color } )); } function ReplyIcon(props) { const { size = 25, color = "black" } = props; return /* @__PURE__ */ import_react.default.createElement(import_react_native_svg.Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react.default.createElement( import_react_native_svg.Path, { d: "M8 9.8V10.7L9.7 11C12.3 11.4 14.2 12.4 15.6 13.7C13.9 13.2 12.1 12.9 10 12.9H8V14.2L5.8 12L8 9.8ZM10 5L3 12L10 19V14.9C15 14.9 18.5 16.5 21 20C20 15 17 10 10 9", fill: color } )); } function TrashIcon(props) { const { size = 25, color = "red" } = props; return /* @__PURE__ */ import_react.default.createElement(import_react_native_svg.Svg, { width: size, height: size, viewBox: "0 0 20 20", fill: "none" }, /* @__PURE__ */ import_react.default.createElement( import_react_native_svg.Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M8.75009 1C8.02075 1 7.32127 1.28973 6.80555 1.80546C6.28982 2.32118 6.00009 3.02065 6.00009 3.75V4.193C5.20476 4.26967 4.41643 4.369 3.63509 4.491C3.53634 4.50445 3.44126 4.53745 3.35541 4.58807C3.26956 4.63869 3.19465 4.70591 3.13508 4.78581C3.0755 4.86571 3.03245 4.95667 3.00843 5.0534C2.98441 5.15013 2.97992 5.25067 2.9952 5.34916C3.01048 5.44764 3.04524 5.54209 3.09745 5.62699C3.14965 5.71189 3.21825 5.78553 3.29924 5.84361C3.38023 5.90169 3.47199 5.94305 3.56914 5.96526C3.6663 5.98748 3.76691 5.99011 3.86509 5.973L4.01409 5.951L4.85509 16.469C4.91015 17.1582 5.22279 17.8014 5.73075 18.2704C6.23871 18.7394 6.9047 18.9999 7.59609 19H12.4031C13.0945 19.0002 13.7606 18.74 14.2687 18.2711C14.7769 17.8022 15.0898 17.1592 15.1451 16.47L15.9861 5.95L16.1351 5.973C16.3298 5.99952 16.5271 5.94858 16.6847 5.83111C16.8422 5.71365 16.9473 5.53906 16.9775 5.34488C17.0076 5.15071 16.9603 4.95246 16.8458 4.79278C16.7313 4.6331 16.5587 4.52474 16.3651 4.491C15.5798 4.36877 14.7911 4.26939 14.0001 4.193V3.75C14.0001 3.02065 13.7104 2.32118 13.1946 1.80546C12.6789 1.28973 11.9794 1 11.2501 1H8.75009ZM10.0001 4C10.8401 4 11.6734 4.025 12.5001 4.075V3.75C12.5001 3.06 11.9401 2.5 11.2501 2.5H8.75009C8.06009 2.5 7.50009 3.06 7.50009 3.75V4.075C8.32676 4.025 9.16009 4 10.0001 4ZM8.58009 7.72C8.57213 7.52109 8.48549 7.33348 8.33921 7.19846C8.19293 7.06343 7.999 6.99204 7.80009 7C7.60118 7.00796 7.41357 7.0946 7.27855 7.24088C7.14352 7.38716 7.07213 7.58109 7.08009 7.78L7.38009 15.28C7.38403 15.3785 7.40733 15.4752 7.44866 15.5647C7.48999 15.6542 7.54854 15.7347 7.62097 15.8015C7.6934 15.8684 7.77829 15.9203 7.8708 15.9544C7.9633 15.9884 8.0616 16.0039 8.16009 16C8.25858 15.9961 8.35533 15.9728 8.44482 15.9314C8.53431 15.8901 8.61478 15.8315 8.68163 15.7591C8.74849 15.6867 8.80043 15.6018 8.83448 15.5093C8.86853 15.4168 8.88403 15.3185 8.88009 15.22L8.58009 7.72ZM12.9201 7.78C12.924 7.68151 12.9085 7.58321 12.8745 7.4907C12.8404 7.3982 12.7885 7.31331 12.7216 7.24088C12.6548 7.16845 12.5743 7.1099 12.4848 7.06857C12.3953 7.02724 12.2986 7.00394 12.2001 7C12.0012 6.99204 11.8073 7.06343 11.661 7.19846C11.5147 7.33348 11.428 7.52109 11.4201 7.72L11.1201 15.22C11.1162 15.3185 11.1317 15.4168 11.1657 15.5093C11.1998 15.6018 11.2517 15.6867 11.3185 15.7591C11.3854 15.8315 11.4659 15.8901 11.5554 15.9314C11.6448 15.9728 11.7416 15.9961 11.8401 16C11.9386 16.0039 12.0369 15.9884 12.1294 15.9544C12.2219 15.9203 12.3068 15.8684 12.3792 15.8015C12.4516 15.7347 12.5102 15.6542 12.5515 15.5647C12.5929 15.4752 12.6162 15.3785 12.6201 15.28L12.9201 7.78Z", fill: color } )); } function EditIcon(props) { const { size = 25, color = "black" } = props; return /* @__PURE__ */ import_react.default.createElement(import_react_native_svg.Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react.default.createElement( import_react_native_svg.Path, { d: "M7 7H6C5.46957 7 4.96086 7.21071 4.58579 7.58579C4.21071 7.96086 4 8.46957 4 9V18C4 18.5304 4.21071 19.0391 4.58579 19.4142C4.96086 19.7893 5.46957 20 6 20H15C15.5304 20 16.0391 19.7893 16.4142 19.4142C16.7893 19.0391 17 18.5304 17 18V17", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" } ), /* @__PURE__ */ import_react.default.createElement( import_react_native_svg.Path, { d: "M16 5.00011L19 8.00011M20.385 6.58511C20.7788 6.19126 21.0001 5.65709 21.0001 5.10011C21.0001 4.54312 20.7788 4.00895 20.385 3.61511C19.9912 3.22126 19.457 3 18.9 3C18.343 3 17.8088 3.22126 17.415 3.61511L9 12.0001V15.0001H12L20.385 6.58511Z", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" } )); } function CopyIcon(props) { const { size = 25, color = "black" } = props; return /* @__PURE__ */ import_react.default.createElement(import_react_native_svg.Svg, { width: size, height: size, viewBox: "0 0 16 18", fill: "none" }, /* @__PURE__ */ import_react.default.createElement( import_react_native_svg.Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M14 0C14.5304 0 15.0391 0.210714 15.4142 0.585786C15.7893 0.960859 16 1.46957 16 2V12C16 12.5304 15.7893 13.0391 15.4142 13.4142C15.0391 13.7893 14.5304 14 14 14H13V6C13 4.93913 12.5786 3.92172 11.8284 3.17157C11.0783 2.42143 10.0609 2 9 2H6C5.64895 1.99924 5.30395 2.09135 5 2.267V2C5 1.46957 5.21071 0.960859 5.58579 0.585786C5.96086 0.210714 6.46957 0 7 0H14Z", fill: color } ), /* @__PURE__ */ import_react.default.createElement( import_react_native_svg.Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M4 4.054V8H0.2C0.274644 7.84448 0.369095 7.69928 0.481 7.568L2.941 4.698C3.2169 4.37661 3.58771 4.15111 4 4.054ZM6 4V8C6 8.53043 5.78929 9.03914 5.41421 9.41421C5.03914 9.78929 4.53043 10 4 10H0V16C0 16.5304 0.210714 17.0391 0.585786 17.4142C0.960859 17.7893 1.46957 18 2 18H9C9.53043 18 10.0391 17.7893 10.4142 17.4142C10.7893 17.0391 11 16.5304 11 16V6C11 5.46957 10.7893 4.96086 10.4142 4.58579C10.0391 4.21071 9.53043 4 9 4H6Z", fill: color } )); } // src/contexts/ChatProvider.tsx var import_react4 = __toESM(require("react")); // src/contexts/ModalProvider.tsx var import_react2 = __toESM(require("react")); var import_react_native2 = require("react-native"); var initial = { displayModal: () => { }, resetModal: () => { }, modalProps: { dismissable: true, justifyContent: "center", children: null, animation: "slide", containerWidth: "100%" } }; var ModalProviderContext = (0, import_react2.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_react3 = __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_react3.createContext)( initialMessageStateContext ); // src/contexts/ChatProvider.tsx var ConfigContext = (0, import_react4.createContext)({ theme: theme_default, client: null, fontFamily: void 0, fontScale: 1 }); function useConfig() { return (0, import_react4.useContext)(ConfigContext); } // src/components/Chat/MessageOptions/index.tsx var import_react_native_actions_sheet = __toESM(require("react-native-actions-sheet")); var Clipboard = __toESM(require("expo-clipboard")); var defaultSheetHeight = "55%"; var windowHeight = import_react_native3.Dimensions.get("window").height; var emojis = [ { emoji: "\u{1F600}", description: "grinning face", category: "Smileys & Emotion", aliases: ["grinning"], tags: ["smile", "happy"], unicode_version: "6.1", ios_version: "6.0" }, { emoji: "\u{1F603}", description: "grinning face with big eyes", category: "Smileys & Emotion", aliases: ["smiley"], tags: ["happy", "joy", "haha"], unicode_version: "6.0", ios_version: "6.0" }, { emoji: "\u{1F604}", description: "grinning face with smiling eyes", category: "Smileys & Emotion", aliases: ["smile"], tags: ["happy", "joy", "laugh", "pleased"], unicode_version: "6.0", ios_version: "6.0" }, { emoji: "\u{1F601}", description: "beaming face with smiling eyes", category: "Smileys & Emotion", aliases: ["grin"], tags: [], unicode_version: "6.0", ios_version: "6.0" }, { emoji: "\u{1F606}", description: "grinning squinting face", category: "Smileys & Emotion", aliases: ["laughing", "satisfied"], tags: ["happy", "haha"], unicode_version: "6.0", ios_version: "6.0" } ]; var MessageOptions = (0, import_react6.forwardRef)( (props, ref) => { const optionsRef = (0, import_react6.useRef)(null); const { client, fontFamily, fontScale } = useConfig(); const { recipientId, message, isMessageOwner, onReply, onStartEditing, theme: theme2, openEmojiList } = props; const flatListRef = (0, import_react6.useRef)(null); const [height, setHeight] = (0, import_react6.useState)(defaultSheetHeight); const [searchValue, setSearchValue] = (0, import_react6.useState)(""); const width = import_react_native3.Dimensions.get("window").width; const emojiSize = 40; var noOfColumns = Math.floor(width / emojiSize); const close = () => { setHeight(defaultSheetHeight); optionsRef?.current?.hide(); }; const open = () => { optionsRef?.current?.show(); }; (0, import_react6.useImperativeHandle)(ref, () => ({ open: () => open(), close: () => close() })); const deleteMessage = () => { if (client && message) { client.messageClient(message.conversationId).deleteMessage( message.messageId, recipientId, message.conversationId ); } }; const showAlert = () => { optionsRef?.current?.hide(); import_react_native3.Alert.alert( "Delete message", "This action is irreversible. Proceed?", [ { text: "Cancel", onPress: () => console.log("Cancelled"), style: "cancel" }, { text: "Proceed", onPress: () => deleteMessage(), style: "destructive" } ], { cancelable: false } ); }; const copyToClipboard = async (text) => { await Clipboard.setStringAsync(text); if (import_react_native3.Platform.OS === "android") { import_react_native3.ToastAndroid.show("Copied text message", import_react_native3.ToastAndroid.SHORT); } optionsRef.current.hide(); }; const options = (0, import_react6.useMemo)(() => { return [ { label: "Edit message", icon: /* @__PURE__ */ import_react5.default.createElement(EditIcon, { size: 20, color: theme2?.icon }), isVisible: isMessageOwner, onPress: () => onStartEditing() }, { label: "Reply", icon: /* @__PURE__ */ import_react5.default.createElement(ReplyIcon, { size: 20, color: theme2?.icon }), isVisible: true, onPress: () => onReply() }, { label: "Copy", icon: /* @__PURE__ */ import_react5.default.createElement(CopyIcon, { size: 20, color: theme2?.icon }), isVisible: true, onPress: () => copyToClipboard(message?.message) }, { label: "Delete", icon: /* @__PURE__ */ import_react5.default.createElement(TrashIcon, { size: 20, color: "red" }), isVisible: isMessageOwner, onPress: () => showAlert() } ]; }, [isMessageOwner, onReply, message, onStartEditing]); const showAllEmojis = () => { optionsRef.current.hide(); setTimeout(() => { openEmojiList(); }, 200); }; const addReaction = (0, import_react6.useCallback)( (emoji) => { if (client && message) { const newReaction = { emoji, uid: client.chatUserId }; const existingReactionIndex = message.reactions.findIndex( (reaction) => reaction.uid === client.chatUserId ); let updatedReactions; if (existingReactionIndex !== -1) { updatedReactions = [...message.reactions]; updatedReactions[existingReactionIndex] = newReaction; } else { updatedReactions = [...message.reactions, newReaction]; } client.messageClient(message.conversationId).reactToMessage({ conversationId: message.conversationId, messageId: message.messageId, reactions: updatedReactions, to: recipientId }); optionsRef?.current?.hide(); } else { console.log("not sending"); } }, [message, client, recipientId] ); const renderStickers = (0, import_react6.useCallback)(() => { return /* @__PURE__ */ import_react5.default.createElement( import_react_native3.View, { style: [ { flexDirection: "row", alignItems: "center", justifyContent: "space-between", flex: 1 } ] }, emojis.map((emoji, i) => /* @__PURE__ */ import_react5.default.createElement( import_react_native3.TouchableOpacity, { key: i, onPress: () => addReaction(emoji.emoji), style: { alignItems: "center", height: 50, width: 50, margin: 5, justifyContent: "center", borderRadius: emojiSize, backgroundColor: theme2?.background.primary } }, /* @__PURE__ */ import_react5.default.createElement( import_react_native3.Text, { style: { fontSize: import_react_native3.Platform.OS === "ios" ? emojiSize * fontScale : (emojiSize - 5) * fontScale, fontFamily } }, emoji.emoji ) )), /* @__PURE__ */ import_react5.default.createElement( import_react_native3.TouchableOpacity, { onPress: showAllEmojis, style: { borderRadius: 100, alignItems: "center", height: 50, width: 50, margin: 5, justifyContent: "center", backgroundColor: theme2?.background.secondary } }, /* @__PURE__ */ import_react5.default.createElement(EmojiIcon, { size: 35, color: "grey" }) ) ); }, [message]); return /* @__PURE__ */ import_react5.default.createElement( import_react_native_actions_sheet.default, { ref: optionsRef, enableGesturesInScrollView: true, keyboardHandlerEnabled: false, isModal: true, openAnimationConfig: { speed: 700 }, onClose: close, gestureEnabled: true, containerStyle: { borderTopLeftRadius: 30, borderTopRightRadius: 30, backgroundColor: theme2.background.primary, height: "47%", padding: 0 } }, /* @__PURE__ */ import_react5.default.createElement( import_react_native3.View, { style: { // flex: 1, height: "100%", width: "100%", justifyContent: "flex-start", paddingHorizontal: 15, paddingTop: 5 } }, /* @__PURE__ */ import_react5.default.createElement( import_react_native3.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "center", height: 50 } }, renderStickers() ), /* @__PURE__ */ import_react5.default.createElement( import_react_native3.View, { style: { borderRadius: 20, paddingHorizontal: 20, marginTop: 20, backgroundColor: theme2?.background.secondary } }, options.filter((o) => o.isVisible).map((option, i) => /* @__PURE__ */ import_react5.default.createElement( import_react_native3.TouchableOpacity, { onPress: () => option.onPress(), key: i, style: [ { height: 60, flexDirection: "row", alignItems: "center" }, i !== 0 && { borderTopWidth: 1, borderTopColor: theme2?.divider } ] }, option.icon, /* @__PURE__ */ import_react5.default.createElement( import_react_native3.Text, { style: { marginStart: 15, fontFamily, fontSize: 17 * fontScale, color: option.label === "Delete" ? "red" : theme2?.text.secondary } }, option.label ) )) ) ) ); } ); var MessageOptions_default = MessageOptions; // Annotate the CommonJS export names for ESM import in node: 0 && (module.exports = { MessageOptions }); //# sourceMappingURL=index.js.map