enx-uikit-react-native
Version:
It is a react native component for Enablex users.
264 lines (251 loc) • 7.19 kB
JavaScript
import React, { Component } from "react";
import {KeyboardAvoidingView,ScrollView, FlatList, View, Text, TouchableHighlight, Image, StyleSheet,TouchableOpacity,TextInput } from "react-native";
import { format } from 'date-fns';
import { LinkPreview } from '@flyerhq/react-native-link-preview'
class EnxChatScreen extends Component {
constructor(props) {
super(props);
this.state={
selfClientId:this.props.selfClientId,
participantClientId:this.props.participantClientId,
chatType:this.props.chatType,
value:'',
flatList:React.createRef(),
inputTextValue:'',
backImage: require("../image_asset/back.png"),
}
}
sendMessaage = () => {
if(this.state.value != "") {
var option = {
msg:this.state.value,
type:this.state.chatType,
clientId: this.state.participantClientId,
}
this.props.sendMessageInGroup(option)
this.setState({
value:''
})
}
}
shareFile = () => {
var option = {
type: this.state.chatType,
clientId: this.state.participantClientId,
}
this.props.shareFile(option)
}
renderItem = ({ item, index }) => {
// Function to render text with link preview
const renderTextWithLinkPreview = (text) => {
const urlRegex = /(https?:\/\/[^\s]+)/g;
const parts = text.split(urlRegex);
return parts.map((part, i) => {
if (part.match(urlRegex)) {
return (
<LinkPreview
key={i}
text={part}
renderText={(previewText) => <Text style={styles.linkText} key={i}>{previewText}</Text>}
containerStyle={styles.linkPreviewContainer}
textContainerStyle={styles.linkPreviewTextContainer}
/>
);
}
return <Text style={styles.normalText} key={i}>{part}</Text>;
});
};
if (!item.isReceived) {
// Message Right
return (
<View style={styles.viewWrapItemRight}>
<View style={styles.textItemRight}>
<Text >{item.sender+" "+format(new Date( item.timestamp), 'hh:mm:ss a')}</Text>
{renderTextWithLinkPreview(item.message)}
</View>
</View>
)
} else {
// Message left
return (
<View style={styles.viewWrapItemLeft}>
<View style={styles.textItemLeft}>
<Text>{item.sender+" "+format(new Date(item.timestamp), 'hh:mm:ss a')}</Text>
{renderTextWithLinkPreview(item.message)}
{item.jsondata!=null && item.jsondata!=''?
<TouchableOpacity onPress={() => { this.props.downloadFile(index)}}
>
<Text style={{color: 'blue'}}>[Download]</Text>
</TouchableOpacity>
:null
}
</View>
</View>
)
}
listRef.current.scrollToEnd();
};
render() {
return (
<ScrollView
contentContainerStyle={{ flexGrow: 1 }}
keyboardShouldPersistTaps="handled"
>
<View style={{ flex: 1 }}>
{/* Action Bar */}
{/* <View style={{ flexDirection: 'row', width: '100%', height: 60, backgroundColor: 'white', top: 0, marginLeft: 20, alignItems: 'center' }}>
<TouchableHighlight
underlayColor="transparent"
onPress={() => { this.props.onBackClick()}}
>
<Image
source={this.state.backImage}
style={{ width: 30, alignSelf: "center", height: 30, zIndex: 50 }}
/>
</TouchableHighlight>
<Text style={{ fontSize: 18, color: "black", fontWeight: "bold", marginLeft: 10 }}> Chat Screen </Text>
</View> */}
<View style={styles.container}>
{/* Chat List */}
<FlatList style={styles.list}
data={this.props.data}
keyExtractor={(item) => {
return item.id;
}}
renderItem={this.renderItem}
ref={this.state.flatList}
onContentSizeChange={() => {
this.state.flatList.current.scrollToEnd();
}}
/>
{/* Layout to send message and share file */}
<View style={styles.footer}>
<View style={styles.inputContainer}>
<TextInput style={styles.inputs}
placeholder="Write a message..."
underlineColorAndroid='transparent'
returnKeyType="done"
value={this.state.value}
onChangeText={(value) => this.setState({ value })} />
<TouchableHighlight
style={{padding:5}}
onPress={this.shareFile}>
<Image source={require("../image_asset/file_chooser.png")} style={{width: 27,height: 27,alignSelf: 'center'}} />
</TouchableHighlight>
</View>
<TouchableHighlight style={styles.btnSend}
onPress={this.sendMessaage}>
<Image source={require("../image_asset/send.png")} style={styles.iconSend} />
</TouchableHighlight>
</View>
</View>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
list: {
paddingHorizontal: 17,
},
footer: {
flexDirection: 'row',
height: 60,
backgroundColor: '#eeeeee',
paddingHorizontal: 10,
padding: 5,
},
btnSend: {
backgroundColor: "#F44336",
width: 40,
height: 40,
borderRadius: 360,
alignItems: 'center',
justifyContent: 'center',
},
iconSend: {
width: 30,
height: 30,
alignSelf: 'center',
},
inputContainer: {
borderBottomColor: '#F5FCFF',
backgroundColor: '#FFFFFF',
borderRadius: 30,
borderBottomWidth: 1,
height: 40,
flexDirection: 'row',
alignItems: 'center',
flex: 1,
marginRight: 10,
},
inputs: {
height: 40,
marginLeft: 16,
borderBottomColor: '#FFFFFF',
flex: 1,
},
// Message right
viewWrapItemRight: {
alignSelf: 'flex-end',
marginRight: 20,
marginBottom: 6,
marginTop: 6
},
textItemRight: {
borderRadius: 10,
alignSelf: 'flex-start',
backgroundColor: '#EBECF0',
color: 'black',
paddingTop: 8,
paddingBottom: 8,
paddingLeft: 10,
paddingRight: 10,
overflow: 'hidden'
},
// Message left
viewWrapItemLeft: {
marginLeft: 10,
marginBottom: 6,
marginTop: 6,
},
textItemLeft: {
borderRadius: 10,
alignSelf: 'flex-start',
backgroundColor: '#D3D3D3',
color: 'white',
paddingTop: 8,
paddingBottom: 8,
paddingLeft: 10,
paddingRight: 10,
overflow: 'hidden'
},
avatarItemLeft: {
width: 30,
height: 30,
borderRadius: 15,
marginLeft: 10
},
linkPreviewContainer: {
marginTop: 5,
},
linkPreviewTextContainer: {
flexDirection: 'row',
},
normalText: {
color: '#000', // Normal text color
},
linkText: {
color: 'blue', // Link color
},
senderText: {
fontWeight: 'bold',
},
downloadText: {
color: 'blue',
},
});
export default EnxChatScreen;