Philip Cesar Garay
145 lines
3.6 KiB
JavaScript
145 lines
3.6 KiB
JavaScript
import { useState, useEffect } from "reactn";
|
|
import { Pressable, TextInput, View, Image, Platform } from "react-native";
|
|
import { BlurView } from "expo-blur";
|
|
|
|
import { Fonts, gutters, Palette } from "../styles";
|
|
import Style from "../styles/Style";
|
|
|
|
import { chatsRef } from "../config/firebase";
|
|
|
|
import { icons } from "../assets";
|
|
|
|
import { isWeb } from "../hooks/useLayoutType.js";
|
|
|
|
import DocumentDropZone from "./DocumentDropZone.js";
|
|
import FilesPreview from "./FilesPreview.js";
|
|
|
|
const ChatInput = ({
|
|
message,
|
|
setMessage,
|
|
onSendMessage,
|
|
containerStyle = {},
|
|
placeholder = "",
|
|
chatID = null,
|
|
}) => {
|
|
const [files, setFiles] = useState([]);
|
|
|
|
useEffect(() => {
|
|
setFiles([]);
|
|
}, [chatID]);
|
|
|
|
const handleMessageObject = () => {
|
|
if (message.length > 0 || files.length > 0) {
|
|
onSendMessage({
|
|
customPayload: {
|
|
files,
|
|
},
|
|
});
|
|
setMessage("");
|
|
setFiles([]);
|
|
}
|
|
};
|
|
|
|
const handleKeyPress = (e) => {
|
|
if (e?.nativeEvent?.key?.toLowerCase() === "enter") {
|
|
handleMessageObject();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
...Style.containerItem,
|
|
backgroundColor: Palette.transparentDarkPurple,
|
|
justifyContent: "center",
|
|
borderWidth: 1,
|
|
borderColor: Palette.ultraLightWhite,
|
|
overflow: "hidden",
|
|
width: "100%",
|
|
height: "auto",
|
|
padding: 0,
|
|
...containerStyle,
|
|
}}
|
|
>
|
|
<BlurView
|
|
intensity={Platform.OS !== "ios" ? 10 : 30}
|
|
tint="dark"
|
|
style={{ flex: 1, justifyContent: "center" }}
|
|
// experimentalBlurMethod={
|
|
// Platform.OS !== "ios" ? "dimezisBlurView" : "none"
|
|
// }
|
|
>
|
|
<FilesPreview
|
|
files={files}
|
|
setFiles={setFiles}
|
|
containerStyle={{ margin: gutters / 2, marginBottom: 0 }}
|
|
/>
|
|
|
|
<View style={{ ...Style.containerRow, height: 50 }}>
|
|
<DocumentDropZone
|
|
documentID={chatID}
|
|
collectionRef={chatsRef}
|
|
shouldReturnObject
|
|
setFiles={setFiles}
|
|
customElement={() => (
|
|
<View style={{ width: 50, ...Style.containerCenter }}>
|
|
<Image
|
|
resizeMode="contain"
|
|
source={icons.addFile}
|
|
style={{
|
|
...Style.iconSmall,
|
|
}}
|
|
/>
|
|
</View>
|
|
)}
|
|
/>
|
|
|
|
<TextInput
|
|
numberOfLines={1}
|
|
placeholder={placeholder}
|
|
placeholderTextColor={Palette.white}
|
|
value={message}
|
|
onChangeText={setMessage}
|
|
style={{
|
|
width: "85%",
|
|
...Fonts({ type: "default", style: {} }),
|
|
}}
|
|
keyboardAppearance="dark"
|
|
{...(!isWeb
|
|
? {
|
|
returnKeyType: "send",
|
|
onSubmitEditing: onSendMessage,
|
|
}
|
|
: {
|
|
onKeyPress: handleKeyPress,
|
|
})}
|
|
/>
|
|
|
|
<Pressable
|
|
onPress={handleMessageObject}
|
|
style={{
|
|
position: "absolute",
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
width: 50,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Image
|
|
resizeMode="contain"
|
|
source={icons.send}
|
|
style={{
|
|
...Style.iconSmall,
|
|
}}
|
|
/>
|
|
</Pressable>
|
|
</View>
|
|
</BlurView>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default ChatInput;
|