softchatjs-react-native
Version:
React native UI SDK for softchatjs-core. Create a free account at: https://www.softchatjs.com
860 lines (843 loc) • 29.8 kB
JavaScript
// src/components/Modals/ImagePreview.tsx
import {
View as View5,
KeyboardAvoidingView as KeyboardAvoidingView2,
Platform as Platform2,
TouchableWithoutFeedback as TouchableWithoutFeedback2,
Keyboard,
Dimensions as Dimensions2,
TouchableOpacity as TouchableOpacity3,
ActivityIndicator as ActivityIndicator3
} from "react-native";
import React7, { useMemo as useMemo3, useRef as useRef2, useState as useState4 } from "react";
import {
generateFillerTimestamps,
generateId,
AttachmentTypes,
MediaType
} from "softchatjs-core";
// src/components/Chat/ChatInput.tsx
import React6 from "react";
import {
TextInput,
View as View4,
StyleSheet as StyleSheet2,
TouchableOpacity as TouchableOpacity2,
Dimensions,
Platform,
ActivityIndicator as ActivityIndicator2
} from "react-native";
import {
useSharedValue
} from "react-native-reanimated";
// src/assets/icons.tsx
import React from "react";
import { View } from "react-native";
import { Svg, Path, G, Defs, ClipPath, Rect } from "react-native-svg";
function XIcon(props) {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React.createElement(
Path,
{
d: "M6 18L17.94 6M18 18L6.06 6",
stroke: color,
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}
));
}
function TimesIcon(props) {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ React.createElement(XIcon, { size, color });
}
function CloseIcon(props) {
const { size = 25, color = "black", bgColor } = props;
return /* @__PURE__ */ React.createElement(
View,
{
style: { padding: 3, borderRadius: size * 2, backgroundColor: bgColor }
},
/* @__PURE__ */ React.createElement(TimesIcon, { size, color })
);
}
function EmojiIcon(props) {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React.createElement(
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 SendIcon(props) {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React.createElement(
Path,
{
"fill-rule": "evenodd",
"clip-rule": "evenodd",
d: "M9.94011 12.646L7.69211 11.897C5.33911 11.113 4.16211 10.721 4.16211 9.99998C4.16211 9.27998 5.33911 8.88698 7.69211 8.10298L16.2051 5.26498C17.8611 4.71298 18.6891 4.43698 19.1261 4.87398C19.5631 5.31098 19.2871 6.13898 18.7361 7.79398L15.8971 16.308C15.1131 18.661 14.7211 19.838 14.0001 19.838C13.2801 19.838 12.8871 18.661 12.1031 16.308L11.3531 14.061L15.7071 9.70698C15.8893 9.51838 15.9901 9.26578 15.9878 9.00358C15.9855 8.74138 15.8803 8.49057 15.6949 8.30516C15.5095 8.11976 15.2587 8.01459 14.9965 8.01231C14.7343 8.01003 14.4817 8.11082 14.2931 8.29298L9.94011 12.646Z",
fill: color
}
));
}
function AttachmentIcon(props) {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React.createElement(
Path,
{
d: "M21.4381 11.662L12.2481 20.852C11.1222 21.9778 9.59528 22.6103 8.00309 22.6103C6.41091 22.6103 4.88394 21.9778 3.75809 20.852C2.63225 19.7261 1.99976 18.1992 1.99976 16.607C1.99976 15.0148 2.63225 13.4878 3.75809 12.362L12.9481 3.17198C13.6987 2.42142 14.7166 1.99976 15.7781 1.99976C16.8395 1.99976 17.8575 2.42142 18.6081 3.17198C19.3587 3.92254 19.7803 4.94052 19.7803 6.00198C19.7803 7.06344 19.3587 8.08142 18.6081 8.83198L9.40809 18.022C9.22227 18.2078 9.00167 18.3552 8.75889 18.4558C8.5161 18.5563 8.25588 18.6081 7.99309 18.6081C7.7303 18.6081 7.47009 18.5563 7.2273 18.4558C6.98451 18.3552 6.76391 18.2078 6.57809 18.022C6.39227 17.8362 6.24487 17.6156 6.14431 17.3728C6.04374 17.13 5.99198 16.8698 5.99198 16.607C5.99198 16.3442 6.04374 16.084 6.14431 15.8412C6.24487 15.5984 6.39227 15.3778 6.57809 15.192L15.0681 6.71198",
stroke: color,
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
));
}
function MicIcon(props) {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, viewBox: "0 0 256 256", fill: "none" }, /* @__PURE__ */ React.createElement(
Path,
{
d: "M128 176C140.726 175.987 152.928 170.925 161.927 161.927C170.925 152.928 175.987 140.726 176 128V64C176 51.2696 170.943 39.0606 161.941 30.0589C152.939 21.0571 140.73 16 128 16C115.27 16 103.061 21.0571 94.0589 30.0589C85.0571 39.0606 80 51.2696 80 64V128C80.0132 140.726 85.0746 152.928 94.0735 161.927C103.072 170.925 115.274 175.987 128 176ZM96 64C96 55.5131 99.3714 47.3737 105.373 41.3726C111.374 35.3714 119.513 32 128 32C136.487 32 144.626 35.3714 150.627 41.3726C156.629 47.3737 160 55.5131 160 64V128C160 136.487 156.629 144.626 150.627 150.627C144.626 156.629 136.487 160 128 160C119.513 160 111.374 156.629 105.373 150.627C99.3714 144.626 96 136.487 96 128V64ZM136 207.6V232C136 234.122 135.157 236.157 133.657 237.657C132.157 239.157 130.122 240 128 240C125.878 240 123.843 239.157 122.343 237.657C120.843 236.157 120 234.122 120 232V207.6C100.276 205.593 81.9976 196.344 68.6984 181.641C55.3992 166.938 48.0244 147.825 48 128C48 125.878 48.8429 123.843 50.3431 122.343C51.8434 120.843 53.8783 120 56 120C58.1217 120 60.1566 120.843 61.6569 122.343C63.1571 123.843 64 125.878 64 128C64 144.974 70.7428 161.253 82.7452 173.255C94.7475 185.257 111.026 192 128 192C144.974 192 161.253 185.257 173.255 173.255C185.257 161.253 192 144.974 192 128C192 125.878 192.843 123.843 194.343 122.343C195.843 120.843 197.878 120 200 120C202.122 120 204.157 120.843 205.657 122.343C207.157 123.843 208 125.878 208 128C207.976 147.825 200.601 166.938 187.302 181.641C174.002 196.344 155.724 205.593 136 207.6Z",
fill: color
}
));
}
function TrashIcon(props) {
const { size = 25, color = "red" } = props;
return /* @__PURE__ */ React.createElement(Svg, { width: size, height: size, viewBox: "0 0 20 20", fill: "none" }, /* @__PURE__ */ React.createElement(
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
}
));
}
// src/components/Chat/ChatInput.tsx
import { useMemo as useMemo2, useState as useState3 } from "react";
// src/contexts/ChatProvider.tsx
import React4, { createContext as createContext3, useContext as useContext3 } from "react";
// src/contexts/ModalProvider.tsx
import React2, { createContext, useContext, useState } from "react";
import {
Modal,
View as View2
} from "react-native";
var initial = {
displayModal: () => {
},
resetModal: () => {
},
modalProps: {
dismissable: true,
justifyContent: "center",
children: null,
animation: "slide",
containerWidth: "100%"
}
};
var ModalProviderContext = createContext(initial);
var useModalProvider = () => useContext(ModalProviderContext);
// 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 React3, {
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
);
var useMessageState = () => useContext2(MessageStateContext);
// src/contexts/ChatProvider.tsx
var ConfigContext = createContext3({
theme: theme_default,
client: null,
fontFamily: void 0,
fontScale: 1
});
function useConfig() {
return useContext3(ConfigContext);
}
// src/components/Chat/ChatInput.tsx
import { Audio as Audio2 } from "expo-av";
// src/components/Chat/ChatItem/Media/VoiceMessage.tsx
import { View as View3, Text as Text2, TouchableOpacity, ActivityIndicator } from "react-native";
import React5, { useCallback, useMemo } from "react";
// src/utils/index.ts
import moment from "moment";
import { MessageStates } from "softchatjs-core";
function convertToMinutes(seconds) {
var _seconds = Number(seconds.toFixed(0));
const minutes = Math.floor(_seconds / 60);
const remainingSeconds = _seconds % 60;
const paddedMinutes = String(minutes).padStart(2, "0");
const paddedSeconds = String(remainingSeconds).padStart(2, "0");
return `${paddedMinutes}:${paddedSeconds}`;
}
// src/components/Chat/ChatItem/Media/VoiceMessage.tsx
var AudioWaves = ({
type = "record",
audioTime,
audioWaves
}) => {
const { theme: theme2, fontFamily } = useConfig();
const waves = Object.values(audioWaves).flat();
return /* @__PURE__ */ React5.createElement(
View3,
{
style: {
flex: 1,
marginHorizontal: 5,
borderWidth: type === "record" ? 1 : 0,
overflow: "hidden",
borderColor: theme2?.divider,
borderRadius: 100,
paddingHorizontal: 10,
height: 35,
flexDirection: "row",
alignItems: "center"
}
},
/* @__PURE__ */ React5.createElement(
Text2,
{
style: {
color: type === "play" ? theme2?.text.primary : "white",
fontSize: 12,
fontFamily,
marginEnd: 5
}
},
convertToMinutes(Number(audioTime.toFixed(0)))
),
/* @__PURE__ */ React5.createElement(
View3,
{
style: {
flex: 1,
flexDirection: "row",
alignItems: "center",
height: "100%",
justifyContent: type === "play" ? "flex-start" : "flex-end",
overflow: "hidden",
paddingHorizontal: 0
}
},
waves.map((wave, i) => /* @__PURE__ */ React5.createElement(
View3,
{
key: i,
style: {
width: 2,
backgroundColor: theme2?.icon,
height: `${wave.height}%`,
marginEnd: 2,
borderRadius: 1
}
}
))
)
);
};
// src/components/Chat/ChatInput.tsx
var ActionContainer = ({
loading,
onPress,
children,
style
}) => {
if (loading) {
return /* @__PURE__ */ React6.createElement(ActivityIndicator2, { style: { ...style } });
}
return /* @__PURE__ */ React6.createElement(
TouchableOpacity2,
{
disabled: loading,
style: {
padding: Platform.OS === "ios" ? 3 : 1.5,
borderRadius: 100,
...style
},
onPress
},
children
);
};
var METERING_MIN_POWER = Platform.select({
default: -50,
android: -100
});
function ChatInput(props) {
const {
inputRef,
openEmojis,
mediaOptionsRef,
sendMessage,
// chatUserId,
// recipientId,
// selectedMessage,
hasEmojis = true,
value,
setValue,
isEditing,
onStopEditing,
messageType = "text",
conversationId,
recipientId,
isLoading = false,
audioWaves = {},
sendVoiceMessage,
onStartRecording,
onDeleteRecording,
isRecording = false,
audioTime = 0
} = props;
const { theme: theme2, fontScale } = useConfig();
var minInputHeight = Platform.OS === "android" ? 30 : 40;
const { addNewPendingMessages, pauseVoiceMessage } = useMessageState();
const { client, fontFamily } = useConfig();
const [inputHeight, setInputHeight] = useState3(minInputHeight);
const [alignItems, setAlignItems] = useState3("center");
const touchStart = useSharedValue({ x: 0, y: 0, time: 0 });
const inputAnimatedView = useSharedValue(0);
const deviceWidth = Dimensions.get("window").width;
const deviceHeight = Dimensions.get("window").height;
const micDrag = useSharedValue({ x: deviceWidth, y: 0 });
const [lock, setLock] = useState3(false);
const [isInputFocused, setIsInputFocused] = useState3(false);
const [recording, setRecording] = useState3();
const [permissionResponse, requestPermission] = Audio2.usePermissions();
const [sound, setSound] = useState3();
const [audioFileUri, setAudioFileUri] = useState3("");
const [isRecordingPaused, setIsRecordingPaused] = useState3(false);
const [voiceMessageState, setVoiceMessageState] = useState3("inactive");
const hasTyped = useMemo2(() => {
if (messageType === "text") {
return value?.length > 0 ? true : false;
}
return true;
}, [value]);
const getContainerBottomPadding = useMemo2(() => {
let value2 = 0;
if (inputHeight > 60) {
if (alignItems === "flex-end") {
if (Platform.OS === "ios") {
value2 = 0;
}
value2 = 5;
}
if (Platform.OS === "android") value2 = 10;
} else {
if (Platform.OS === "android") {
value2 = 10;
}
}
return value2;
}, []);
if (isRecording) {
return /* @__PURE__ */ React6.createElement(
View4,
{
style: [
{
...styles.main,
alignItems,
flexDirection: "column",
paddingBottom: getContainerBottomPadding,
borderTopColor: theme2?.divider,
justifyContent: "space-between"
}
]
},
/* @__PURE__ */ React6.createElement(
View4,
{
style: {
flexDirection: "row",
alignItems: "center",
paddingHorizontal: 0
}
},
/* @__PURE__ */ React6.createElement(
TouchableOpacity2,
{
style: {
padding: Platform.OS === "ios" ? 3 : 1.5,
borderRadius: 100
// backgroundColor: theme?.icon,
},
onPress: () => onDeleteRecording?.()
},
/* @__PURE__ */ React6.createElement(TrashIcon, { color: theme2?.icon })
),
/* @__PURE__ */ React6.createElement(
AudioWaves,
{
type: "record",
audioTime,
audioWaves
}
),
/* @__PURE__ */ React6.createElement(
ActionContainer,
{
loading: isLoading,
onPress: () => sendVoiceMessage?.()
},
/* @__PURE__ */ React6.createElement(SendIcon, { size: 30, color: theme2?.icon })
)
)
);
}
return /* @__PURE__ */ React6.createElement(
View4,
{
style: [
{
...styles.main,
alignItems,
paddingBottom: getContainerBottomPadding,
borderTopColor: theme2?.divider
}
]
},
/* @__PURE__ */ React6.createElement(
View4,
{
style: [
{
flexDirection: "row",
alignItems: "center",
flex: 1
}
]
},
hasEmojis && /* @__PURE__ */ React6.createElement(
TouchableOpacity2,
{
onPress: () => {
mediaOptionsRef?.current.pickAttachment();
inputRef?.current?.blur();
},
style: {
marginEnd: 5,
marginBottom: 3,
display: isEditing ? "none" : "flex"
}
},
/* @__PURE__ */ React6.createElement(AttachmentIcon, { size: 26, color: theme2?.icon })
),
/* @__PURE__ */ React6.createElement(
View4,
{
style: {
backgroundColor: theme2?.background.secondary,
flex: 1,
flexDirection: "row",
alignItems: "center",
borderRadius: 25,
padding: Platform.OS === "ios" ? 5 : 2.5
}
},
/* @__PURE__ */ React6.createElement(
TextInput,
{
ref: inputRef,
style: {
...styles.textInput,
fontSize: 18 * fontScale,
color: theme2?.text.secondary,
backgroundColor: theme2?.background.secondary,
fontFamily
},
onFocus: () => setIsInputFocused(true),
onBlur: () => setIsInputFocused(false),
multiline: true,
defaultValue: value,
onChangeText: (value2) => setValue(value2)
}
),
hasEmojis && /* @__PURE__ */ React6.createElement(
TouchableOpacity2,
{
onPress: () => openEmojis?.(),
style: { padding: 4, display: isEditing ? "none" : "flex" }
},
/* @__PURE__ */ React6.createElement(EmojiIcon, { size: 25, color: theme2?.icon })
)
),
isEditing && /* @__PURE__ */ React6.createElement(
TouchableOpacity2,
{
activeOpacity: 0.7,
style: {
marginStart: 10,
marginEnd: 5,
padding: Platform.OS === "ios" ? 3 : 1.5,
borderRadius: 100,
backgroundColor: "red"
},
onPress: () => onStopEditing?.()
},
/* @__PURE__ */ React6.createElement(CloseIcon, { bgColor: "transparent", size: 23, color: "white" })
),
hasTyped ? /* @__PURE__ */ React6.createElement(
TouchableOpacity2,
{
disabled: !hasTyped || isLoading,
activeOpacity: 0.7,
style: {
opacity: hasTyped ? 1 : 0.3,
marginStart: 5,
padding: Platform.OS === "ios" ? 3 : 1.5,
borderRadius: 100
// backgroundColor: theme?.icon,
},
onPress: () => sendMessage()
},
isLoading ? /* @__PURE__ */ React6.createElement(ActivityIndicator2, null) : /* @__PURE__ */ React6.createElement(
SendIcon,
{
size: 30,
color: messageType === "multimedia-text" ? "white" : theme2?.icon
}
)
) : /* @__PURE__ */ React6.createElement(ActionContainer, { loading: isLoading, style: { marginLeft: 5 }, onPress: () => onStartRecording?.() }, /* @__PURE__ */ React6.createElement(MicIcon, { color: theme2?.icon }))
)
);
}
var styles = StyleSheet2.create({
main: {
width: "100%",
flexDirection: "row",
paddingHorizontal: 10,
borderTopWidth: 0.5,
alignItems: "center",
paddingVertical: Platform.OS === "ios" ? 10 : 10,
maxHeight: 110
},
textInput: {
maxHeight: 100,
fontSize: 18,
height: Platform.OS === "ios" ? "100%" : "100%",
width: "100%",
paddingHorizontal: 10,
borderRadius: 25,
flex: 1
}
});
// src/components/Modals/ImagePreview.tsx
import { Image } from "expo-image";
var { width, height } = Dimensions2.get("screen");
function ImagePreview(props) {
const inputRef = useRef2(null);
const {
image,
chatUserId,
recipientId,
activeQuote,
clearActiveQuote,
viewOnly = false,
conversationId
} = props;
const { userMeta, addNewPendingMessages } = useMessageState();
const { resetModal } = useModalProvider();
const { client } = useConfig();
const { globalTextMessage, setGlobalTextMessage } = useMessageState();
const [message, setMessage] = useState4(globalTextMessage);
const screenWidth = width;
const screenHeight = height;
const [uploading, showUploading] = useState4(false);
const uploadImage = async () => {
try {
if (client && image?.base64) {
var timeStamps = generateFillerTimestamps();
addNewPendingMessages({
from: chatUserId,
messageId: generateId(),
conversationId,
to: recipientId,
message,
reactions: [],
attachedMedia: [
{
uploading: true,
type: MediaType.IMAGE,
mimeType: image.mimeType,
ext: ".png",
mediaId: generateId(),
mediaUrl: image.base64,
meta: {
aspectRatio: image?.meta?.aspectRatio,
height: image?.meta?.height,
width: image?.meta?.width,
size: image?.meta?.size
}
}
],
messageOwner: {
...userMeta,
...timeStamps
},
attachmentType: AttachmentTypes.MEDIA,
quotedMessage: null,
quotedMessageId: activeQuote?.messageId || "",
createdAt: /* @__PURE__ */ new Date()
});
if (activeQuote?.message) {
clearActiveQuote();
}
resetModal();
}
} catch (error) {
if (error instanceof Error) {
console.error(error.message);
}
} finally {
showUploading(false);
}
};
const url = useMemo3(() => {
return image?.mediaUrl;
}, [image]);
return (
// <GestureHandlerRootView>
/* @__PURE__ */ React7.createElement(
View5,
{
style: {
flex: 1,
backgroundColor: "black",
height: "100%",
width: "100%",
paddingBottom: Platform2.OS === "android" ? 0 : 20
}
},
/* @__PURE__ */ React7.createElement(
TouchableOpacity3,
{
onPress: () => resetModal(() => {
}),
style: {
zIndex: 999,
top: Platform2.OS === "ios" ? 50 : 20,
right: 15,
position: "absolute",
alignSelf: "flex-end"
}
},
/* @__PURE__ */ React7.createElement(XIcon, { size: 30, color: "white" })
),
/* @__PURE__ */ React7.createElement(
KeyboardAvoidingView2,
{
style: { flex: 1 },
behavior: Platform2.OS === "ios" ? "padding" : "height",
keyboardVerticalOffset: Platform2.OS === "ios" ? 10 : 0
},
/* @__PURE__ */ React7.createElement(TouchableWithoutFeedback2, { onPress: () => Keyboard.dismiss() }, /* @__PURE__ */ React7.createElement(
View5,
{
style: {
flex: 1,
height: "100%",
width: "100%",
justifyContent: "center",
alignItems: "center"
}
},
/* @__PURE__ */ React7.createElement(
Image,
{
source: { uri: url },
style: {
height: "100%",
width: "100%"
},
contentFit: "contain"
}
)
)),
viewOnly === false && /* @__PURE__ */ React7.createElement(
View5,
{
style: {
width: screenWidth,
alignSelf: "center",
opacity: 1,
backgroundColor: "black"
}
},
/* @__PURE__ */ React7.createElement(
ChatInput,
{
conversationId: conversationId || "",
hasEmojis: false,
inputRef,
sendMessage: () => uploadImage(),
chatUserId,
recipientId,
value: message,
setValue: setMessage,
messageType: "multimedia-text"
}
)
)
),
uploading && /* @__PURE__ */ React7.createElement(
View5,
{
style: {
position: "absolute",
flex: 1,
height: "100%",
width: "100%",
backgroundColor: "rgba(0,0,0,.5)",
alignItems: "center",
justifyContent: "center"
}
},
/* @__PURE__ */ React7.createElement(ActivityIndicator3, { size: "large" })
)
)
);
}
export {
ImagePreview as default
};
//# sourceMappingURL=ImagePreview.mjs.map