Skip to content

A
AppUms_Lecturer
Commit 84361ad9 by tungnq
Options

TODO: Đã dựng xong khung detail email

parent 8eed865c
Showing with 339 additions and 22 deletions
src/assets/images.js
...@@ -60,7 +60,10 @@ const images = { ...@@ -60,7 +60,10 @@ const images = {
icSearchHeader:require('./icon/icon_png/icon_search_header.png'), icSearchHeader:require('./icon/icon_png/icon_search_header.png'),
icSearch: require('./icon/icon_png/icon_search.png'), icSearch: require('./icon/icon_png/icon_search.png'),
icDocument: require('./icon/icon_png/ic_document.png'), icDocument: require('./icon/icon_png/ic_document.png'),
icReply: require('./icon/icon_png/ic_reply.png'),
icTick: require('./icon/icon_png/ic_tick.png'), icTick: require('./icon/icon_png/ic_tick.png'),
icDelete: require('./icon/icon_png/ic_delete.png'),
icReplyAll: require('./icon/icon_png/ic_reply_all.png'),
//Image Logo //Image Logo
igLogo: require('./images/logo.png'), igLogo: require('./images/logo.png'),
......
src/routers/StackNavigation.js
...@@ -31,6 +31,7 @@ import ListWork from '../screens/list_work'; ...@@ -31,6 +31,7 @@ import ListWork from '../screens/list_work';
import DetailListWork from '../screens/list_work/detail'; import DetailListWork from '../screens/list_work/detail';
import DrawerEmailView from '../routers/drawer_email/drawerView'; import DrawerEmailView from '../routers/drawer_email/drawerView';
import SendEmail from '../screens/email/send'; import SendEmail from '../screens/email/send';
import DetailEmail from '../screens/email/detail';
const Stack = createStackNavigator(); const Stack = createStackNavigator();
function MyStack(props) { function MyStack(props) {
...@@ -70,6 +71,7 @@ function MyStack(props) { ...@@ -70,6 +71,7 @@ function MyStack(props) {
<Stack.Screen name={ScreenName.DETAILWORK} component={DetailListWork}/> <Stack.Screen name={ScreenName.DETAILWORK} component={DetailListWork}/>
<Stack.Screen name={ScreenName.EMAIL} component={DrawerEmailView}/> <Stack.Screen name={ScreenName.EMAIL} component={DrawerEmailView}/>
<Stack.Screen name={ScreenName.SENDEMAIL} component={SendEmail}/> <Stack.Screen name={ScreenName.SENDEMAIL} component={SendEmail}/>
<Stack.Screen name={ScreenName.DETAILEMAIL} component={DetailEmail}/>
</Stack.Navigator> </Stack.Navigator>
); );
} }
......
src/screens/email/detail/index.js
import React from 'react'; import React, { useState } from 'react';
import {Text, View, StyleSheet} from 'react-native'; import {Text, View, StyleSheet} from 'react-native';
import DetailEmailView from './view'; import DetailEmailView from './view';
const DetailEmail = (props) => { const DetailEmail = (props) => {
const [incoming_document, setIncomingDocument] = useState({
title:'Đăng ký tham gia TechX 2025 - Định hình tương lai công nghệ!',
avatar:'https://i.pinimg.com/736x/a5/71/ca/a571cac1f9e27c642f3b5e13f76f87fb.jpg',
name:'Vũ công bình',
date:'27/07/2025',
from:'ducnm@.abc.com',
cc:[{id:1, name:'ducnm@.abc.com'},{id:2, name:'ducnm@.abc.com'},{id:3, name:'ducnm@.abc.com'}, {id:4, name:'ducnm@.abc.com'}, {id:5, name:'ducnm@.abc.com'}, {id:6, name:'ducnm@.abc.com'}, {id:7, name:'ducnm@.abc.com'}, {id:8, name:'ducnm@.abc.com'}, {id:9, name:'ducnm@.abc.com'}, {id:10, name:'ducnm@.abc.com'}, {id:11, name:'ducnm@.abc.com'}, {id:12, name:'ducnm@.abc.com'}, {id:13, name:'ducnm@.abc.com'}, {id:14, name:'ducnm@.abc.com'}, {id:15, name:'ducnm@.abc.com'}, {id:16, name:'ducnm@.abc.com'}, {id:17, name:'ducnm@.abc.com'}, {id:18, name:'ducnm@.abc.com'}, {id:19, name:'ducnm@.abc.com'}, {id:20, name:'ducnm@.abc.com'}],
bcc:'ducnm@.abc.com',
to:'ducnm@.abc.com',
content: "Kính gửi toàn thể Anh/Chị CBNV,\n\nTheo cập nhật mới nhất từ cơ quan khí tượng, bão số 3 (tên quốc tế: Wipha) hiện đang cách Quảng Ninh – Hải Phòng khoảng 233km về phía Đông. Trong 12 giờ qua, bão đã suy yếu 3 cấp (còn cấp 9), tuy nhiên dự báo sẽ mạnh lên khi đi vào khu vực Vịnh Bắc Bộ trong hôm nay (21/7).\n\nDự kiến từ chiều và tối nay, các tỉnh vùng ven biển và khu vực đồng bằng Bắc Bộ, bao gồm cả Hà Nội, có thể xảy ra mưa to, gió lớn, thậm chí có hiện tượng ngập úng cục bộ, cây đổ, mất điện.\n\nĐể đảm bảo an toàn cho toàn thể CBNV, công ty xin lưu ý:\n\n1. CBNV đang sinh sống tại khu vực bị ảnh hưởng bởi mưa bão có thể chủ động làm việc từ xa (remote) vào ngày mai nếu thấy điều kiện di chuyển không an toàn.\n\n2. Trong mọi trường hợp, ưu tiên cao nhất là an toàn cá nhân. Nếu gặp tình trạng ngập sâu, cây gãy đổ, đường trơn trượt nguy hiểm... vui lòng không cố gắng di chuyển đến văn phòng.\n\n3. Các quản lý trực tiếp chủ động nhắc nhở thành viên trong nhóm, và tạo điều kiện linh hoạt để đảm bảo công việc được duy trì hiệu quả, dù làm việc tại nhà.\n\nCông ty khuyến nghị anh/chị:\n\n- Hạn chế ra ngoài khi mưa gió lớn, kiểm tra và gia cố nhà cửa nếu cần thiết;\n- Liên hệ ngay với quản lý hoặc bộ phận HCNS nếu có tình huống khẩn cấp.\n\nRất mong anh/chị giữ gìn sức khỏe, an toàn và chủ động phối hợp trong thời gian này."
});
return ( return (
<DetailEmailView /> <DetailEmailView incoming_document={incoming_document}/>
); );
}; };
......
src/screens/email/detail/style.js
import { StyleSheet, Text, View } from 'react-native' import { StyleSheet, Text, View } from 'react-native'
import R from '../../../assets/R'
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:R.colors.white,
},
body:{
flex:1,
backgroundColor:R.colors.white,
paddingHorizontal:15,
paddingVertical:10
},
header:{
backgroundColor:R.colors.blue,
height:50,
flexDirection:'row',
alignItems:'center',
justifyContent:'space-between',
paddingHorizontal:15
},
iconBack:{
width:25,
height:20
},
iconDelete:{
width:25,
height:20
},
title:{
fontSize:R.fontsize.fontSizeSubTitle,
fontFamily:R.fonts.fontMedium,
fontWeight:'600',
color:R.colors.black,
},
avatarBox:{
height:50,
flexDirection:'row',
marginVertical:5
},
avatarContainer:{
width:50,
height:50,
borderRadius:25,
},
avatar:{
width:50,
height:50,
borderRadius:25,
},
avatarTextContainer:{
flex:1,
marginLeft:10,
paddingVertical:2,
flexDirection:'row',
justifyContent:'space-between',
},
name:{
fontSize:R.fontsize.fontSizeLabel,
fontFamily:R.fonts.fontMedium,
fontWeight:'600',
color:R.colors.black,
},
date:{
fontSize:R.fontsize.fontSizeLabel,
fontFamily:R.fonts.fontMedium,
fontWeight:'600',
color:R.colors.gray,
},
iconDrop:{
width:20,
height:20
},
toMeContainer:{
flexDirection:'row',
alignItems:'center',
},
detailSendContainer:{
width:'100%',
height:200,
backgroundColor:R.colors.blue4,
borderRadius:15,
paddingHorizontal:15,
paddingVertical:10
},
textTitleMail:{
fontSize:R.fontsize.fontSizeLabel,
fontFamily:R.fonts.fontBold,
fontWeight:'600',
color:R.colors.black,
},
textSubMail:{
fontSize:R.fontsize.fontSizeLabel,
fontFamily:R.fonts.fontRegular,
fontWeight:'400',
color:R.colors.black,
},
textContent:{
fontSize:R.fontsize.fontSizeLabel,
fontFamily:R.fonts.fontRegular,
fontWeight:'400',
color:R.colors.black,
},
iconReply:{
width:15,
height:15
},
iconForward:{
width:15,
height:15
}
})
export default styles export default styles
const styles = StyleSheet.create({})
\ No newline at end of file
src/screens/email/detail/view.js
import React from 'react'; import React from 'react';
import {Text, View, TouchableOpacity, StyleSheet} from 'react-native'; import {Text, View, TouchableOpacity, Image, ScrollView} from 'react-native';
import styles from './style';
import Header from '../../../components/Header/Header';
import R from '../../../assets/R';
import {useNavigation} from '@react-navigation/native';
const DetailEmailView = props => {
const {incoming_document} = props;
const navigation = useNavigation();
const renderHeader = () => {
return (
<View style={styles.header}>
<TouchableOpacity onPress={() => navigation.goBack()}>
<Image
source={R.images.icBack}
style={styles.iconBack}
resizeMode="contain"
/>
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.goBack()}>
<Image
source={R.images.icDelete}
style={styles.iconDelete}
resizeMode="contain"
/>
</TouchableOpacity>
</View>
);
};
const renderBottomCard = () =>{
return(
<View style={styles.detailSendContainer}>
<ScrollView nestedScrollEnabled={true} style={{flex:1} }>
<Text style={styles.textTitleMail}>From:{' '}
<Text style={styles.textSubMail}>{incoming_document.from}</Text>
</Text>
<Text style={styles.textTitleMail}>CC:{' '}
<Text style={styles.textSubMail}>{incoming_document.cc.map((item,index)=>{
return(
<Text key={index}>{item.name},</Text>
)
})}</Text>
</Text>
<Text style={styles.textTitleMail}>BCC:{' '}
<Text style={styles.textSubMail}>{incoming_document.bcc}</Text>
</Text>
<Text style={styles.textTitleMail}>TO:{' '}
<Text style={styles.textSubMail}>{incoming_document.to}</Text>
</Text>
</ScrollView>
</View>
)
const DetailEmailView = (props) => { }
const { } = props;
return ( const renderButton =(
<View {
style={{ title,
flex: 1, onPress,
justifyContent: 'center', style,
alignItems: 'center', icon,
}}> textStyle,
<TouchableOpacity> iconRight,
<Text>DetailEmail</Text> }
)=>{
return(
<TouchableOpacity style={style} onPress={onPress}>
<View style={{flexDirection:'row', alignItems:'center', justifyContent:'center', marginHorizontal:10,}}>
<Image
source={icon}
style={styles.iconReply}
resizeMode="contain"
/>
<Text style={textStyle}>{title}</Text>
<Image
source={iconRight}
style={[styles.iconForward, { transform: [{ rotateY: '180deg' }] }]}
resizeMode="contain"
/>
</View>
</TouchableOpacity> </TouchableOpacity>
)
}
const renderBody = () => {
return (
<ScrollView showsVerticalScrollIndicator={false} style={styles.body}>
<Text style={styles.title}>{incoming_document.title}</Text>
<View style={styles.avatarBox}>
<View style={styles.avatarContainer}>
<Image
source={{uri: incoming_document.avatar}}
style={styles.avatar}
resizeMode="cover"
/>
</View>
<View style={styles.avatarTextContainer}>
<View>
<Text style={styles.name}>{incoming_document.name}</Text>
<View style={styles.toMeContainer}>
<Text>
to me
</Text>
<Image
source={R.images.icDrop}
style={styles.iconDrop}
resizeMode="contain"
/>
</View>
</View>
<Text style={styles.date}>{incoming_document.date}</Text>
</View>
</View>
{renderBottomCard()}
<View style={{marginVertical:15}}>
<Text style={styles.textContent}>{incoming_document.content}</Text>
</View>
<View style={{marginBottom:35 , flexDirection:'row', justifyContent:'space-between'}}>
{renderButton({
title:'Reply',
onPress:()=>{},
icon:R.images.icReply,
style:{
backgroundColor:R.colors.white,
padding:5,
borderRadius:15,
borderColor:R.colors.black,
borderWidth:1,
width:105,
flexDirection:'row',
alignItems:'center',
justifyContent:'center',
height:40,
},
textStyle:{
color:R.colors.black,
fontSize:R.fontsize.fontSizeLabel,
fontFamily:R.fonts.fontMedium,
fontWeight:'600',
marginLeft:5
},
})}
{renderButton({
title:'Reply All',
onPress:()=>{},
icon:R.images.icReplyAll,
style:{
backgroundColor:R.colors.white,
padding:5,
borderRadius:15,
borderColor:R.colors.black,
borderWidth:1,
width:105,
flexDirection:'row',
alignItems:'center',
justifyContent:'center',
height:40,
},
textStyle:{
color:R.colors.black,
fontSize:R.fontsize.fontSizeLabel,
fontFamily:R.fonts.fontMedium,
fontWeight:'600',
marginLeft:5
},
})}
{renderButton({
title:'Forward',
onPress:()=>{},
iconRight:R.images.icReply,
style:{
backgroundColor:R.colors.white,
padding:5,
borderRadius:15,
borderColor:R.colors.black,
borderWidth:1,
width:105,
flexDirection:'row',
alignItems:'center',
justifyContent:'center',
height:40,
},
textStyle:{
color:R.colors.black,
fontSize:R.fontsize.fontSizeLabel,
fontFamily:R.fonts.fontMedium,
fontWeight:'600',
marginRight:5
},
})}
</View>
</ScrollView>
);
};
return (
<View style={styles.container}>
{renderHeader()}
{renderBody()}
</View> </View>
); );
}; };
export default DetailEmailView; export default DetailEmailView;
const styles = StyleSheet.create({})
\ No newline at end of file
src/screens/email/send/view.js
...@@ -110,7 +110,7 @@ const renderHeader = () => { ...@@ -110,7 +110,7 @@ const renderHeader = () => {
style={styles.input} style={styles.input}
/> />
</View> </View>
<View style={[ {height:100}]}> <View style={[ {height:100, marginTop:10}]}>
<TextInput <TextInput
placeholderTextColor={R.colors.gray} placeholderTextColor={R.colors.gray}
style={[styles.input , {paddingHorizontal:10 ,borderBottomWidth:1 ,borderColor:R.colors.grayBorderInputTextHeader}]} style={[styles.input , {paddingHorizontal:10 ,borderBottomWidth:1 ,borderColor:R.colors.grayBorderInputTextHeader}]}
......
src/screens/email/view.js
...@@ -32,7 +32,7 @@ const EmailHomeView = props => { ...@@ -32,7 +32,7 @@ const EmailHomeView = props => {
const renderEmailItem = ({item}) => ( const renderEmailItem = ({item}) => (
<TouchableOpacity <TouchableOpacity
style={[styles.emailItem, !item.isRead && styles.unreadEmail]} style={[styles.emailItem, !item.isRead && styles.unreadEmail]}
onPress={() => onEmailPress(item)}> onPress={() => navigation.navigate(SCREENNAME.DETAILEMAIL)}>
<View style={styles.avatarContainer}> <View style={styles.avatarContainer}>
<View style={styles.avatar}> <View style={styles.avatar}>
<Text style={styles.avatarText}> <Text style={styles.avatarText}>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment