ios app
This commit is contained in:
269
argon-pro-react-native/screens/Chat.js
Normal file
269
argon-pro-react-native/screens/Chat.js
Normal file
@@ -0,0 +1,269 @@
|
||||
import React from "react";
|
||||
import {
|
||||
View,
|
||||
Image,
|
||||
StyleSheet,
|
||||
FlatList,
|
||||
KeyboardAvoidingView
|
||||
} from "react-native";
|
||||
|
||||
import { Input, Block, Text, theme } from "galio-framework";
|
||||
import { Icon } from "../components/";
|
||||
|
||||
import Images from "../constants/Images";
|
||||
import argonTheme from "../constants/Theme";
|
||||
|
||||
const messages = [
|
||||
{
|
||||
id: 1,
|
||||
avatar: Images.ProfileChat,
|
||||
message: `Hey there! How are you today? Can we me et and talk? Thanks!`,
|
||||
time: `10:31 PM`
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
message: `Sure, just let me finish something and I’ll call you.`,
|
||||
time: `10:34 PM`
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
avatar: Images.ProfileChat,
|
||||
message: `OK. Cool! See you!`,
|
||||
time: `10:35 PM`
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
message: `Bye bye`,
|
||||
time: `10:36 PM`
|
||||
}
|
||||
];
|
||||
|
||||
export default class Chat extends React.Component {
|
||||
state = {
|
||||
messages: messages,
|
||||
height: 0
|
||||
};
|
||||
|
||||
messagesScroll = React.createRef();
|
||||
|
||||
itemLayout = (data, index) => ({
|
||||
length: this.state.messages.length - 1,
|
||||
offset: 32 * index,
|
||||
index
|
||||
});
|
||||
|
||||
handleScroll = () => {
|
||||
// const totalIndex = this.state.messages.length - 1;
|
||||
// const insetBottom = this.state.messages.length * (theme.SIZES.BASE * 6.5) + 64; // total messages x message height
|
||||
setTimeout(() => {
|
||||
this.messagesScroll.current.scrollToOffset({ offset: this.state.height });
|
||||
}, 1);
|
||||
};
|
||||
|
||||
onContentSizeChange = (width, height) => {
|
||||
this.setState({
|
||||
height
|
||||
});
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
// this.handleScroll();
|
||||
}
|
||||
|
||||
renderMessage = msg => {
|
||||
if (msg.avatar) {
|
||||
return (
|
||||
<Block key={msg.id}>
|
||||
<Block row space={null}>
|
||||
<Image
|
||||
source={{ uri: msg.avatar }}
|
||||
style={[styles.avatar, styles.shadow]}
|
||||
/>
|
||||
<Block style={styles.messageCardWrapper}>
|
||||
<Block style={[styles.messageCard, styles.shadow]}>
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} color={argonTheme.COLORS.TEXT}>{msg.message}</Text>
|
||||
</Block>
|
||||
<Block right>
|
||||
<Text style={styles.time}>{msg.time}</Text>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Block key={msg.id} right>
|
||||
<Block row>
|
||||
<Block style={styles.messageCardWrapper}>
|
||||
<Block style={[styles.messageCardPersonal, styles.shadow]}>
|
||||
<Text style={{ fontFamily: 'open-sans-regular' }} color={argonTheme.COLORS.WHITE}>{msg.message}</Text>
|
||||
</Block>
|
||||
<Block right>
|
||||
<Text style={[styles.time, { marginRight: 8 }]}>{msg.time}</Text>
|
||||
</Block>
|
||||
</Block>
|
||||
<Image
|
||||
source={Images.ProfilePicture }
|
||||
style={[styles.avatar, styles.shadow]}
|
||||
/>
|
||||
</Block>
|
||||
</Block>
|
||||
);
|
||||
};
|
||||
|
||||
renderMessages = () => {
|
||||
const insetBottom =
|
||||
this.state.messages.length * (theme.SIZES.BASE * 6.5) + 64; // total messages x message height
|
||||
return (
|
||||
<FlatList
|
||||
ref={this.messagesScroll}
|
||||
data={this.state.messages}
|
||||
keyExtractor={item => `${item.id}`}
|
||||
showsVerticalScrollIndicator={false}
|
||||
getItemLayout={this.itemLayout}
|
||||
contentContainerStyle={[styles.messagesWrapper]}
|
||||
renderItem={({ item }) => this.renderMessage(item)}
|
||||
onContentSizeChange={this.onContentSizeChange}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
handleMessageChange = (type, text) => {
|
||||
this.setState({ message: text });
|
||||
};
|
||||
|
||||
handleMessage = () => {
|
||||
const { messages, message } = this.state;
|
||||
const date = new Date();
|
||||
|
||||
messages.push({
|
||||
id: messages.length + 1,
|
||||
message: message,
|
||||
time: date.toLocaleString("en-US", { hour: "2-digit", minute: "numeric" })
|
||||
});
|
||||
|
||||
this.setState({ messages, message: "" });
|
||||
this.handleScroll();
|
||||
};
|
||||
|
||||
messageForm = () => {
|
||||
const { navigation } = this.props;
|
||||
|
||||
return (
|
||||
<View style={styles.messageFormContainer}>
|
||||
<Block>
|
||||
<Input
|
||||
borderless
|
||||
color="#9fa5aa"
|
||||
multiline
|
||||
blurOnSubmit
|
||||
style={styles.input}
|
||||
placeholder="Message"
|
||||
autoCapitalize="none"
|
||||
returnKeyType="send"
|
||||
textContentType="none"
|
||||
placeholderTextColor="#9fa5aa"
|
||||
defaultValue={this.state.message}
|
||||
onSubmitEditing={this.handleMessage}
|
||||
onChangeText={text => this.handleMessageChange("message", text)}
|
||||
iconContent={
|
||||
<Icon
|
||||
size={14}
|
||||
name="camera"
|
||||
family="font-awesome"
|
||||
color={argonTheme.COLORS.ICON}
|
||||
style={{ marginRight: 12, marginTop: 5 }}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Block>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Block flex space="between" style={styles.container}>
|
||||
<KeyboardAvoidingView
|
||||
enabled
|
||||
behavior="padding"
|
||||
style={{ flex: 1 }}
|
||||
keyboardVerticalOffset={theme.SIZES.BASE * 5}
|
||||
>
|
||||
{this.renderMessages()}
|
||||
{this.messageForm()}
|
||||
</KeyboardAvoidingView>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {},
|
||||
messageFormContainer: {
|
||||
height: 96,
|
||||
paddingHorizontal: 16,
|
||||
paddingTop: 16,
|
||||
paddingBottom: 32
|
||||
},
|
||||
input: {
|
||||
// width: width * 0.93,
|
||||
height: theme.SIZES.BASE * 3,
|
||||
backgroundColor: theme.COLORS.WHITE,
|
||||
shadowColor: theme.COLORS.BLACK,
|
||||
shadowOffset: { width: 0, height: 0.7 },
|
||||
shadowRadius: 3,
|
||||
shadowOpacity: 0.07,
|
||||
elevation: 2,
|
||||
},
|
||||
iconButton: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
backgroundColor: "transparent"
|
||||
},
|
||||
messagesWrapper: {
|
||||
flexGrow: 1,
|
||||
top: 0,
|
||||
paddingLeft: 8,
|
||||
paddingRight: 8,
|
||||
paddingVertical: 16,
|
||||
paddingBottom: 56
|
||||
},
|
||||
messageCardWrapper: {
|
||||
maxWidth: "85%",
|
||||
marginLeft: 8,
|
||||
marginBottom: 32
|
||||
},
|
||||
messageCard: {
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 16,
|
||||
borderRadius: 6,
|
||||
backgroundColor: theme.COLORS.WHITE
|
||||
},
|
||||
messageCardPersonal: {
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 16,
|
||||
borderRadius: 6,
|
||||
marginRight: 8,
|
||||
backgroundColor: argonTheme.COLORS.PRIMARY
|
||||
},
|
||||
shadow: {
|
||||
shadowColor: "rgba(0, 0, 0, 0.1)",
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowRadius: 3,
|
||||
shadowOpacity: 1
|
||||
},
|
||||
time: {
|
||||
fontFamily: 'open-sans-regular',
|
||||
fontSize: 11,
|
||||
opacity: 0.5,
|
||||
marginTop: 8
|
||||
},
|
||||
avatar: {
|
||||
height: 40,
|
||||
width: 40,
|
||||
borderRadius: 20,
|
||||
marginBottom: theme.SIZES.BASE
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user