Skip to content

A
AppUms_Student
Commit cc87980e by tungnq
Options

Tái cấu trúc giao diện đăng ký chứng chỉ và công nợ để cải thiện cấu trúc và kiểu dáng 

Cập nhật ListCertificateView để nâng cao khả năng đọc và bảo trì bằng cách tách phần hiển thị thân giao diện ra một hàm riêng.
Tái cấu trúc CertificateRegistrationView để tinh giản bố cục và cải thiện tính nhất quán của kiểu dáng.
Thêm các kiểu dáng mới cho màn hình đăng ký chứng chỉ và công nợ để nâng cao tính nhất quán của giao diện người dùng.
Cải thiện việc xử lý props và state trong thành phần DebtView để có hiệu suất tốt hơn.
Thực hiện các điều chỉnh về thiết kế đáp ứng (responsive design) trong các thành phần lịch học và công nợ.
Loại bỏ các kiểu dáng và import không sử dụng để dọn dẹp mã nguồn.
parent 1d3e037e
Showing with 770 additions and 708 deletions
src/components/Input/TextFieldCus.js
import React, { useRef } from 'react';
import {
View,
Text,
TextInput,
StyleSheet,
Platform,
} from 'react-native';
import React, {useRef} from 'react';
import {View, Text, TextInput, StyleSheet, Platform} from 'react-native';
import R from '../../assets/R';
import {HEIGHT} from '../../config/Functions';
const CustomTextInput = (props) => {
const {
title,
placeholder,
required,
value,
onChangeText,
backgroundColor, // FUNCTIONALITY: Prop backgroundColor tùy chỉnh
...restProps
} = props;
const CustomTextInput = ({
title,
required,
placeholder,
value,
onChangeText,
backgroundColor,
editable,
height,
width,
containerMarginVertical,
containerMarginHorizontal,
containerMarginBottom,
containerMarginTop,
containerBackgroundColor,
messageError,
color,
icon,
secureTextEntry,
fontSize,
onFocus,
...restProps
}) => {
const inputRef = useRef(null);
const renderMess = () => {
if (value && value.trim().length > 0) return `${title} không hợp lệ`;
return `Vui lòng nhập ${title ? title.toLowerCase() : messageError}`;
};
return (
<View style={styles.container}>
<View
style={{
width: width,
marginVertical: containerMarginVertical,
marginHorizontal: containerMarginHorizontal,
marginBottom: containerMarginBottom,
backgroundColor: containerBackgroundColor,
marginTop: containerMarginTop,
}}>
{/* FUNCTIONALITY: Title với sao đỏ nếu required */}
{title && (
<View style={styles.titleContainer}>
......@@ -34,17 +54,31 @@ const CustomTextInput = (props) => {
)}
{/* FUNCTIONALITY: Input container với background tùy chỉnh */}
<View style={[
styles.inputContainer,
backgroundColor && { backgroundColor } // NOTE: Chỉ apply backgroundColor khi có truyền vào
]}>
<View
style={[
styles.inputContainer,
backgroundColor && {backgroundColor}, // NOTE: Chỉ apply backgroundColor khi có truyền vào
]}>
<TextInput
ref={inputRef}
style={styles.input}
style={{
height: HEIGHT(35),
color: color,
borderColor: R.colors.grayBorderInputTextHeader,
fontSize: fontSize,
paddingVertical: 5,
backgroundColor:
editable === false
? backgroundColor || R.colors.blue1 // khi disabled thì lấy màu xám
: backgroundColor, // khi enable thì lấy màu bạn truyền,
}}
placeholder={placeholder}
placeholderTextColor={R.colors.grey_100}
value={value}
onChangeText={onChangeText}
editable={editable}
onFocus={onFocus}
autoCapitalize="none"
{...restProps}
/>
</View>
......@@ -55,8 +89,8 @@ const CustomTextInput = (props) => {
const styles = StyleSheet.create({
// FUNCTIONALITY: Container wrapper
container: {
width: '100%',
marginVertical: 5
marginVertical: 5,
backgroundColor: R.colors.red,
},
// UI/UX: Container cho title
......@@ -68,14 +102,14 @@ const styles = StyleSheet.create({
// UI/UX: Title text
title: {
fontSize: R.fontsize.fontsSize12,
fontFamily: R.fonts.InterRegular,
fontWeight: '400',
color: R.colors.black
fontFamily: R.fonts.InterMedium,
fontWeight: '600',
color: R.colors.black,
},
// UI/UX: Dấu sao đỏ bắt buộc
required: {
color: R.colors.red,
color: R.colors.red,
fontSize: R.fontsize.fontsSize12,
fontFamily: R.fonts.InterRegular,
fontWeight: '500',
......@@ -88,17 +122,16 @@ const styles = StyleSheet.create({
borderWidth: 1,
borderColor: R.colors.grey_200,
paddingHorizontal: 15,
height: 35,
backgroundColor: R.colors.white,
},
// UI/UX: Input text styles
input: {
fontSize: R.fontsize.fontsSize10,
fontFamily: R.fonts.InterRegular,
fontWeight: '400',
color: R.colors.black, // FIXME: Đổi từ grey_200 sang black để text rõ hơn
padding: 0,
minHeight: 40,
},
});
......
src/config/Functions.js
......@@ -125,6 +125,11 @@ const {width, height} = Dimensions.get('window');
export const getWidth = () => width;
export const getHeight = () => height;
export const getFontSize = fz => RFValue(fz - 2);
export const CELL_WIDTH = (getWidth() - 30) / 7;
export const CELL_HEIGHT = (getHeight() - 160) / 6;
export const BOTTOM_SHEET_HEIGHT = getHeight() * 0.6;
// Get size for xd
export const WIDTHXD = w => width * (w / 1125);
export const HEIGHTXD = h => height * (h / 2436);
......
src/routers/Drawer/drawerView.js
......@@ -65,7 +65,8 @@ const DrawerNavigatorView = (props) => {
const HeaderTitle = ({ navigation, route }) => {
const getHeaderTitle = () => {
if (route.name === ScreenName.FILTERDATE) {
if (route.name === ScreenName.FILTERDATE)
{
return `Tháng ${currentDate.getMonth() + 1}`;
}
if (route.name === ScreenName.FILTER3DATE) {
......
src/screens/certificate_registration/card_button.js
import { StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native';
import {StyleSheet, Text, View, TouchableOpacity, Image} from 'react-native';
import React from 'react';
import R from '../../assets/R';
const CardButtonImage = ({
onPress,
text = "Tải ảnh ở đây",
width,
import styles from './style';
const CardButtonImage = ({
onPress,
text = 'Tải ảnh ở đây',
width,
height = 150,
disabled = false
disabled = false,
}) => {
return (
<TouchableOpacity
<TouchableOpacity
style={[
styles.container_image,
{ width, height },
disabled && styles.disabled
]}
styles.container_image,
{width, height},
disabled && styles.disabled,
]}
onPress={onPress}
disabled={disabled}
activeOpacity={0.7}
>
<View style={styles.image_placeholder}>
</View>
activeOpacity={0.7}>
<View style={styles.image_placeholder}></View>
<View>
<Image
source={R.images.icImageDownload}
style={{width:20,height:20, marginRight:5,marginTop:5}}
/>
<Image source={R.images.icImageDownload} style={styles.image} />
</View>
<Text style={styles.placeholder_text}>
{text}
</Text>
<Text style={styles.placeholder_text}>{text}</Text>
</TouchableOpacity>
);
};
export default CardButtonImage;
const styles = StyleSheet.create({
container_image: {
justifyContent: 'center',
alignItems: 'center',
marginHorizontal:15,
marginTop:3,
marginBottom:15,
borderWidth: 1,
borderColor: R.colors.blue500,
borderStyle: 'dashed',
borderRadius: 15,
backgroundColor: R.colors.white,
padding: 16,
flexDirection:'row',
flex:1,
},
image_placeholder: {
position: 'absolute',
width: '100%',
height: '100%',
borderRadius: 10,
},
placeholder_text: {
fontSize: R.fontsize.fontsSize14,
fontWeight: '500',
color:R.colors.black,
textAlign: 'center',
letterSpacing: 0.3,
},
disabled: {
opacity: 0.5,
backgroundColor: R.colors.gray400,
}
});
\ No newline at end of file
src/screens/certificate_registration/detail/view.js
import React from "react";
import React from 'react';
import {
Text,
View,
TouchableOpacity,
StyleSheet,
Image,
SafeAreaView,
ScrollView,
} from "react-native";
import R from "../../../assets/R";
import Header from "../../../components/Header/Header";
} from 'react-native';
import R from '../../../assets/R';
import Header from '../../../components/Header/Header';
import styles from '../style';
const DetailCertificateView = (props) => {
const DetailCertificateView = props => {
return (
<View style={{flex:1,}}>
<Header isBack={true} title={"Chứng chỉ toeic"} />
<ScrollView showsVerticalScrollIndicator={false} style={styles.container}>
<View style={styles.container_card}>
<View style={styles.status}>
<Text style={[styles.text_title, { color: R.colors.white }]}>
Chứng chỉ đang được đánh giá
</Text>
<View style={{flex: 1}}>
<Header isBack={true} title={'Chứng chỉ toeic'} />
<ScrollView
showsVerticalScrollIndicator={false}
style={styles.container_detail}>
<View style={styles.container_card_detail}>
<View style={styles.status}>
<Text style={[styles.text_title, {color: R.colors.white}]}>
Chứng chỉ đang được đánh giá
</Text>
</View>
<View style={styles.card_item}>
<View style={styles.header_card_item}>
<Text style={styles.text_title}>Chứng chỉ toeic</Text>
</View>
<View style={styles.card_item}>
<View style={styles.header_card_item}>
<Text style={styles.text_title}>Chứng chỉ toeic</Text>
</View>
<View style={styles.image_container}>
<Image
source={R.images.igProfileDemo}
style={styles.image}
/>
<View style={styles.image_container}>
<Image source={R.images.igProfileDemo} style={styles.imageDetail} />
</View>
<View>
<Text style={styles.sub_text}>Loại chứng chỉ: TOEIC</Text>
<Text style={styles.sub_text}>Ngày sinh: 23/10/2004</Text>
<Text style={styles.sub_text}>
CCCD/CMND đăng ký: 00228956325
</Text>
<Text style={styles.sub_text}>Ngày thi: 23/10/2024</Text>
<Text style={styles.sub_text}>Tổng điểm: 875</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
}}>
<Text style={styles.sub_text}>Điểm nói: 0</Text>
<Text style={styles.sub_text}>Điểm nghe: 445</Text>
</View>
<View >
<Text style={styles.sub_text}>Loại chứng chỉ: TOEIC</Text>
<Text style={styles.sub_text}>Ngày sinh: 23/10/2004</Text>
<Text style={styles.sub_text}>
CCCD/CMND đăng ký: 00228956325
</Text>
<Text style={styles.sub_text}>Ngày thi: 23/10/2024</Text>
<Text style={styles.sub_text}>Tổng điểm: 875</Text>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
}}
>
<Text style={styles.sub_text}>Điểm nói: 0</Text>
<Text style={styles.sub_text}>Điểm nghe: 445</Text>
</View>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
}}
>
<Text style={styles.sub_text}>Điểm đọc: 430</Text>
<Text style={styles.sub_text}>Điểm viết: 0</Text>
</View>
<Text style={styles.sub_text}>Số TRF: 085692265852</Text>
<Text style={styles.sub_text}>Có hiệu lực đến: 23/10/2026</Text>
<Text style={[styles.sub_text, { color: R.colors.main }]}>
Không dùng để đăng ký học bổng
</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
}}>
<Text style={styles.sub_text}>Điểm đọc: 430</Text>
<Text style={styles.sub_text}>Điểm viết: 0</Text>
</View>
<Text style={styles.sub_text}>Số TRF: 085692265852</Text>
<Text style={styles.sub_text}>Có hiệu lực đến: 23/10/2026</Text>
<Text style={[styles.sub_text, {color: R.colors.main}]}>
Không dùng để đăng ký học bổng
</Text>
</View>
</View>
</View>
</ScrollView>
</View>
);
};
export default DetailCertificateView;
const styles = StyleSheet.create({
container: {
backgroundColor:R.colors.white,
paddingBottom: 10,
},
image: {
maxWidth: '100%',
maxHeight: 200,
resizeMode: "contain",
},
image_container: {
maxWidth: 340,
maxHeight: 200,
alignSelf: "center",
},
status: {
backgroundColor: R.colors.yellow,
borderTopLeftRadius: 15,
borderTopRightRadius: 15,
paddingLeft: 13,
paddingVertical: 5
},
container_card: {
marginVertical: 15,
borderRadius: 15,
marginHorizontal: 15,
backgroundColor: R.colors.white,
shadowColor: R.colors.black,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.5,
shadowRadius: 1,
elevation: 1,
},
card_item: {
backgroundColor: R.colors.white,
borderBottomLeftRadius: 15,
borderBottomRightRadius: 15,
paddingHorizontal: 15,
paddingVertical: 10,
},
header_card_item: {
justifyContent: "space-between",
flexDirection: "row",
},
text_title: {
fontFamily: R.fonts.InterRegular,
fontSize: R.fontsize.fontsSize14,
fontWeight: "400",
color: R.colors.black,
},
sub_text: {
fontFamily: R.fonts.InterRegular,
fontSize: R.fontsize.fontsSize12,
fontWeight: "300",
lineHeight: 24,
color: R.colors.black,
},
});
src/screens/certificate_registration/list/item.js
import { Image, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import R from '../../../assets/R'
import Button from '../../../components/Button'
import { useNavigation } from "@react-navigation/native";
import { DETAILCERTIFICATE } from "../../../routers/ScreenNames";
import {Image, StyleSheet, Text, View} from 'react-native';
import React from 'react';
import R from '../../../assets/R';
import Button from '../../../components/Button';
import {useNavigation} from '@react-navigation/native';
import {DETAILCERTIFICATE} from '../../../routers/ScreenNames';
import styles from '../style';
const ItemNav = () => {
const navigation = useNavigation();
return (
<View style={styles.container_card}>
<View style={styles.header_card_item}>
<Text style={styles.text_title_left}>Chứng chỉ toeic</Text>
<View style={styles.header_card_item}>
<Text style={styles.text_title_left}>Chứng chỉ toeic</Text>
<Text
onPress={() => navigation.navigate(DETAILCERTIFICATE)}
style={styles.text_title_right}>Chi tiết</Text>
<Text
onPress={() => navigation.navigate(DETAILCERTIFICATE)}
style={styles.text_title_right}>
Chi tiết
</Text>
</View>
<View style={styles.image_container}>
<Image source={R.images.igProfileDemo} style={styles.image_item} />
</View>
<View style={styles.footer_card_item}>
<View>
<Text style={styles.sub_text}>Trạng thái: Đang đánh giá</Text>
<Text style={styles.sub_text}>Ngày đăng ký: 23/10/2024</Text>
<Text style={[styles.sub_text, {color: R.colors.blue500}]}>
Không dùng để đăng ký học bổng
</Text>
</View>
<View style={styles.image_container}>
<Image
source={R.images.igProfileDemo}
style={styles.image}
<View style={styles.button_container}>
<Button
title={'Huỷ'}
fontFamily={R.fonts.InterRegular}
fontWeight={300}
fontSize={14}
width={61}
height={27}
backgroundColor={R.colors.red}
borderRadius={10}
textColor={R.colors.white}
/>
</View>
<View style={styles.footer_card_item}>
<View>
<Text style={styles.sub_text}>Trạng thái: Đang đánh giá</Text>
<Text style={styles.sub_text}>Ngày đăng ký: 23/10/2024</Text>
<Text style={[styles.sub_text, { color: R.colors.blue500 }]}>Không dùng để đăng ký học bổng</Text>
</View>
<View style={styles.button_container}>
<Button
title={"Huỷ"}
fontFamily={R.fonts.InterRegular}
fontWeight={300}
fontSize={14}
width={61}
height={27}
backgroundColor={R.colors.red}
borderRadius={10}
textColor={R.colors.white}
/>
</View>
</View>
</View>
</View>
)
}
export default ItemNav
);
};
const styles = StyleSheet.create({
container_card: {
borderRadius: 15,
backgroundColor: R.colors.white,
shadowColor: R.colors.black,
marginVertical: 5,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.5,
shadowRadius: 1,
elevation: 1,
paddingHorizontal: 15,
paddingVertical: 10,
},
button_container: {
alignSelf: "flex-end",
},
header_card_item: {
justifyContent: "space-between",
flexDirection: "row",
},
footer_card_item: {
justifyContent: "space-between",
flexDirection: "row",
},
image: {
maxWidth: '100%',
maxHeight: 200,
resizeMode: "contain",
},
image_container: {
maxWidth: 340,
maxHeight: 200,
alignSelf: "center",
},
text_title_left: {
fontFamily: R.fonts.InterRegular,
fontSize: R.fontsize.fontsSize14,
fontWeight: '400',
color: R.colors.black
},
text_title_right: {
fontFamily: R.fonts.InterRegular,
fontSize: R.fontsize.fontsSize14,
fontWeight: '400',
textDecorationLine: 'underline',
color: R.colors.main
},
sub_text: {
fontFamily: R.fonts.InterRegular,
fontSize: R.fontsize.fontsSize12,
fontWeight: "300",
color: R.colors.black
}
})
\ No newline at end of file
export default ItemNav;
src/screens/certificate_registration/list/view.js
import React from "react";
import { useNavigation } from "@react-navigation/native";
import {
Text,
View,
StyleSheet,
ScrollView,
SafeAreaView,
} from "react-native";
import Header from "../../../components/Header/Header";
import Button from "../../../components/Button";
import R from "../../../assets/R";
import ItemNav from "./item";
import { CERTIFICATEREGISTRATION } from "../../../routers/ScreenNames";
const ListCetificateView = (props) => {
const { } = props;
import React from 'react';
import {useNavigation} from '@react-navigation/native';
import {Text, View, StyleSheet, ScrollView, SafeAreaView} from 'react-native';
import Header from '../../../components/Header/Header';
import Button from '../../../components/Button';
import R from '../../../assets/R';
import ItemNav from './item';
import {CERTIFICATEREGISTRATION} from '../../../routers/ScreenNames';
import styles from '../style';
const ListCetificateView = props => {
const {} = props;
const navigate = useNavigation();
return (
<View style={{flex:1, }}>
<Header isBack={true} isSearch={true} title={"Danh sách chứng chỉ"}
/>
<ScrollView style={styles.container}>
<View style={styles.container_header}>
<Text style={styles.text}>Các chứng chỉ đã đăng kí</Text>
<Button
onPress={() => navigate.navigate(CERTIFICATEREGISTRATION)}
height={27}
borderRadius={10}
textColor={R.colors.white}
fontFamily={R.fonts.InterRegular}
fontWeight={300}
fontSize={R.fontsize.fontsSize12}
iconSpacingLeft={2}
paddingHorizontal={10}
icon={R.images.icPlus}
backgroundColor={R.colors.blue500}
title={"Thêm mới"}
/>
</View>
<View style={styles.container_item}>
<ItemNav />
</View>
const renderBody = () => {
return (
<ScrollView style={styles.box}>
<View style={styles.container_header}>
<Text style={styles.text}>Các chứng chỉ đã đăng kí</Text>
<Button
onPress={() => navigate.navigate(CERTIFICATEREGISTRATION)}
height={27}
borderRadius={10}
textColor={R.colors.white}
fontFamily={R.fonts.InterRegular}
fontWeight={300}
fontSize={R.fontsize.fontsSize12}
iconSpacingLeft={2}
paddingHorizontal={10}
icon={R.images.icPlus}
backgroundColor={R.colors.blue500}
title={'Thêm mới'}
/>
</View>
<View style={styles.container_item}>
<ItemNav />
</View>
</ScrollView>
);
};
return (
<View style={{flex: 1}}>
<Header isBack={true} isSearch={true} title={'Danh sách chứng chỉ'} />
{renderBody()}
</View>
);
};
export default ListCetificateView;
const styles = StyleSheet.create({
container: {
flex: 1,
paddingBottom: 10,
backgroundColor: R.colors.white,
},
container_header: {
alignItems: "center",
justifyContent: "space-between",
flexDirection: "row",
marginVertical: 10,
marginHorizontal: 15,
},
text: {
fontFamily: R.fonts.InterSemiBold,
color: R.colors.main,
},
container_item: {
marginHorizontal: 15,
},
});
src/screens/certificate_registration/style.js 0 → 100644
import {StyleSheet, Dimensions} from 'react-native';
import R from '../../assets/R';
const {width, height} = Dimensions.get('window');
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: R.colors.white,
},
container_row: {
flexDirection: 'row',
},
container_row_body: {
marginHorizontal: 15,
},
footer: {
flexDirection: 'row',
marginBottom: 84,
marginRight: 15,
},
text_footer: {
marginLeft: 10,
flex: 1,
fontFamily: R.fonts.InterRegular,
fontSize: R.fontsize.fontsSize12,
color: R.colors.black,
fontWeight: '400',
},
size_box: {
flex: 1,
},
size_box_2: {
marginHorizontal: 15,
},
size_box_3: {
flex: 1,
marginLeft: 15,
},
size_box_4: {
width: '3%',
},
container_image: {
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 15,
marginTop: 3,
marginBottom: 15,
borderWidth: 1,
borderColor: R.colors.blue500,
borderStyle: 'dashed',
borderRadius: 15,
backgroundColor: R.colors.white,
padding: 16,
flexDirection: 'row',
flex: 1,
},
image: {
width: 20,
height: 20,
marginRight: 5,
marginTop: 5,
},
image_placeholder: {
position: 'absolute',
width: '100%',
height: '100%',
borderRadius: 10,
},
placeholder_text: {
fontSize: R.fontsize.fontsSize14,
fontWeight: '500',
color: R.colors.black,
textAlign: 'center',
letterSpacing: 0.3,
},
disabled: {
opacity: 0.5,
backgroundColor: R.colors.gray400,
},
/* -------------------------------------------------------------------------- */
/* Danh sách chứng chỉ */
/* -------------------------------------------------------------------------- */
box: {
flex: 1,
paddingBottom: 10,
backgroundColor: R.colors.white,
},
container_header: {
alignItems: 'center',
justifyContent: 'space-between',
flexDirection: 'row',
marginVertical: 10,
marginHorizontal: 15,
},
text: {
fontFamily: R.fonts.InterSemiBold,
color: R.colors.main,
},
container_item: {
marginHorizontal: 15,
},
/* -------------------------------------------------------------------------- */
/* Item chứng chỉ */
/* -------------------------------------------------------------------------- */
container_card: {
borderRadius: 15,
backgroundColor: R.colors.white,
shadowColor: R.colors.black,
marginVertical: 5,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.5,
shadowRadius: 1,
elevation: 1,
paddingHorizontal: 15,
paddingVertical: 10,
},
button_container: {
alignSelf: 'flex-end',
},
header_card_item: {
justifyContent: 'space-between',
flexDirection: 'row',
},
footer_card_item: {
justifyContent: 'space-between',
flexDirection: 'row',
},
image_item: {
maxWidth: '100%',
maxHeight: 200,
resizeMode: 'contain',
},
image_container: {
maxWidth: 340,
maxHeight: 200,
alignSelf: 'center',
},
text_title_left: {
fontFamily: R.fonts.InterRegular,
fontSize: R.fontsize.fontsSize14,
fontWeight: '400',
color: R.colors.black,
},
text_title_right: {
fontFamily: R.fonts.InterRegular,
fontSize: R.fontsize.fontsSize14,
fontWeight: '400',
textDecorationLine: 'underline',
color: R.colors.main,
},
sub_text: {
fontFamily: R.fonts.InterRegular,
fontSize: R.fontsize.fontsSize12,
fontWeight: '300',
color: R.colors.black,
},
/* -------------------------------------------------------------------------- */
/* Chi tiết chứng chỉ */
/* -------------------------------------------------------------------------- */
container_detail: {
backgroundColor: R.colors.white,
paddingBottom: 10,
},
imageDetail: {
maxWidth: '100%',
maxHeight: 200,
resizeMode: 'contain',
},
image_container: {
maxWidth: 340,
maxHeight: 200,
alignSelf: 'center',
},
status: {
backgroundColor: R.colors.yellow,
borderTopLeftRadius: 15,
borderTopRightRadius: 15,
paddingLeft: 13,
paddingVertical: 5,
},
container_card_detail: {
marginVertical: 15,
borderRadius: 15,
marginHorizontal: 15,
backgroundColor: R.colors.white,
shadowColor: R.colors.black,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.5,
shadowRadius: 1,
elevation: 1,
},
card_item: {
backgroundColor: R.colors.white,
borderBottomLeftRadius: 15,
borderBottomRightRadius: 15,
paddingHorizontal: 15,
paddingVertical: 10,
},
header_card_item: {
justifyContent: 'space-between',
flexDirection: 'row',
},
text_title: {
fontFamily: R.fonts.InterRegular,
fontSize: R.fontsize.fontsSize14,
fontWeight: '400',
color: R.colors.black,
},
sub_text: {
fontFamily: R.fonts.InterRegular,
fontSize: R.fontsize.fontsSize12,
fontWeight: '300',
lineHeight: 24,
color: R.colors.black,
},
});
export default styles;
src/screens/certificate_registration/view.js
import React from "react";
import {
Text,
View,
StyleSheet,
ScrollView,
SafeAreaView
} from "react-native";
import CheckBox from "../../components/CheckBox";
import Header from "../../components/Header/Header";
import I18n from "../../helper/i18/i18n";
import R from "../../assets/R";
import Button from "../../components/Button";
import CardButtonImage from "./card_button";
import DropdownSelect from "../../components/Dropdown/DropdownSel";
import CustomTextInput from "../../components/Input/TextFieldCus";
const CertificateRegistrationView = (props) => {
const { titleHeader, dataList, isSelected, setSelection } = props;
return (
<View style={{ flex: 1, }}>
<Header isBack title={I18n.t(titleHeader)} />
import React from 'react';
import {Text, View, StyleSheet, ScrollView, SafeAreaView} from 'react-native';
import CheckBox from '../../components/CheckBox';
import Header from '../../components/Header/Header';
import I18n from '../../helper/i18/i18n';
import R from '../../assets/R';
import Button from '../../components/Button';
import CardButtonImage from './card_button';
import DropdownSelect from '../../components/Dropdown/DropdownSel';
import CustomTextInput from '../../components/Input/TextFieldCus';
import styles from './style';
const CertificateRegistrationView = props => {
const {titleHeader, dataList, isSelected, setSelection} = props;
const renderBody = () => {
return (
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.scrollContent}>
<View style={styles.container}>
<DropdownSelect
title={"Loại chứng chỉ *"}
title={'Loại chứng chỉ *'}
titleFontFamily={R.fonts.InterRegular}
titleFontSize={R.fontsize.fontsSize12}
titleFontWeight={"400"}
titleFontWeight={'400'}
titleColor={R.colors.black}
data={dataList}
placeholder="HS"
placeholderFontFamily={R.fonts.InterRegular}
placeholderFontSize={R.fontsize.fontsSize12}
placeholderFontWeight={"400"}
placeholderFontWeight={'400'}
placeholderColor={R.colors.grey}
borderRadius={10}
height={40}
height={35}
marginHorizontal={15}
marginVertical={5}
iconColor={R.colors.black}
iconSize={10}
/>
<View style={{ marginHorizontal: 15, }}>
<View style={styles.size_box_2}>
<CustomTextInput
title={"Ngày sinh "}
title={'Ngày sinh '}
backgroundColor={R.colors.gray400}
editable={false}
height={35}
/>
</View>
<View style={{ marginHorizontal: 15 }}>
<View style={styles.size_box_2}>
<CustomTextInput
title={"CMND/CCCD (thí sinh dùng để đăng ký thi)"}
title={'CMND/CCCD (thí sinh dùng để đăng ký thi)'}
backgroundColor={R.colors.gray400}
editable={false}
height={35}
/>
</View>
<View style={styles.container_row}>
<View style={{ flex: 1, marginLeft: 15 }}>
<View style={[styles.container_row, {marginRight: 15}]}>
<View style={styles.size_box_3}>
<CustomTextInput
title={"Điểm nghe "}
title={'Điểm nghe '}
height={35}
onChangeText={text => console.log(text)}
/>
</View>
<View style={{ width: '3%' }}></View>
<View style={{ flex: 1, marginRight: 15 }}>
<View style={styles.size_box_4}></View>
<View style={styles.size_box_3}>
<CustomTextInput
title={"Điểm nói "}
title={'Điểm nói '}
height={35}
onChangeText={text => console.log(text)}
/>
</View>
</View>
<View style={styles.container_row}>
<View style={{ flex: 1, marginLeft: 15 }}>
<CustomTextInput
title={"Điểm đọc"}
/>
<View style={styles.size_box_3}>
<CustomTextInput title={'Điểm đọc'} height={35} />
</View>
<View style={{ width: '3%' }}></View>
<View style={{ flex: 1, marginRight: 15 }}>
<CustomTextInput
title={"Điểm viết "}
/>
<View style={styles.size_box_4}></View>
<View style={[styles.size_box_3, {marginRight: 15}]}>
<CustomTextInput title={'Điểm viết'} height={35} />
</View>
</View>
<View
style={styles.container_row}
>
<View style={{ flex: 0.85, marginBottom: 10, marginHorizontal: 15 }}>
<CustomTextInput
title={"Tổng điểm "}
/>
<View style={styles.container_row}>
<View style={{flex: 0.85, marginBottom: 10, marginLeft: 15}}>
<CustomTextInput title={'Tổng điểm '} height={35} />
</View>
<CheckBox
label={"Đăng kí học bổng"}
label={'Đăng kí học bổng'}
titleFontFamily={R.fonts.InterRegular}
titleFontSize={R.fontsize.fontsSize12}
titleFontWeight={"300"}
titleFontWeight={'300'}
borderRadius={30}
size={15}
labelStyle={{
fontSize: R.fontsize.fontsSize12,
fontWeight: "300",
fontWeight: '300',
color: R.colors.black,
fontFamily: R.fonts.InterRegular,
}}
style={{ marginTop: 15, flex: 1 }}
style={styles.size_box_3}
/>
</View>
<View style={styles.container_row_body}>
<CustomTextInput
title={"Ngày thi "}
/>
<CustomTextInput title={'Ngày thi '} height={35} />
</View>
<View style={styles.container_row_body}>
<CustomTextInput
title={"Có hiệu lực đến"}
/>
<CustomTextInput title={'Có hiệu lực đến'} height={35} />
</View>
<View style={styles.container_row_body}>
<CustomTextInput
title={"Số TRF"}
/>
<CustomTextInput title={'Số TRF'} height={35} />
</View>
<Text style={{ marginHorizontal: 15, color: R.colors.black }}>
Ảnh chứng chỉ <Text style={{ color: "red" }}>*</Text>
<Text style={{marginHorizontal: 15, color: R.colors.black}}>
Ảnh chứng chỉ <Text style={{color: 'red', fontSize: R.fontsize.fontsSize12}}>*</Text>
</Text>
<CardButtonImage />
......@@ -144,7 +125,6 @@ const CertificateRegistrationView = (props) => {
onValueChange={setSelection}
borderRadius={10}
marginLeft={15}
/>
<Text style={styles.text_footer}>
"Tôi xin cam đoan rằng chứng chỉ mà tôi đã nộp là chứng chỉ hoàn
......@@ -170,34 +150,14 @@ const CertificateRegistrationView = (props) => {
/>
</View>
</ScrollView>
);
};
return (
<View style={styles.size_box}>
<Header isBack title={I18n.t(titleHeader)} />
{renderBody()}
</View>
);
};
export default CertificateRegistrationView;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: R.colors.white,
},
container_row: {
flexDirection: 'row'
},
container_row_body: {
marginHorizontal: 15,
},
footer: {
flexDirection: "row",
marginBottom: 84,
marginRight: 15
},
text_footer: {
marginLeft: 10,
flex: 1,
fontFamily: R.fonts.InterRegular,
fontSize: R.fontsize.fontsSize12,
color: R.colors.black,
fontWeight: '400'
}
});
src/screens/class_schedule/index.js
......@@ -246,7 +246,7 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
};
// ==================== HỆ THỐNG ANIMATION ====================
// A1: Thiết lập PanResponder
// A1: Thiết lập PanResponder cho Bottom Sheet
const panResponder = useRef(
PanResponder.create({
onMoveShouldSetPanResponder: (evt, gestureState) => {
......@@ -270,6 +270,36 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
}),
).current;
// A2: Thiết lập PanResponder cho Calendar Swipe Navigation
const calendarPanResponder = useMemo(
() =>
PanResponder.create({
onStartShouldSetPanResponder: () => true,
onMoveShouldSetPanResponder: (evt, gestureState) => {
// Chỉ kích hoạt khi vuốt ngang nhiều hơn vuốt dọc
return Math.abs(gestureState.dx) > Math.abs(gestureState.dy) && Math.abs(gestureState.dx) > 10;
},
onPanResponderMove: (evt, gestureState) => {
// Không cần xử lý gì trong quá trình di chuyển
},
onPanResponderRelease: (evt, gestureState) => {
const {dx, vx} = gestureState;
// Kiểm tra điều kiện swipe: khoảng cách >= 50px hoặc vận tốc >= 0.3
if (Math.abs(dx) >= 50 || Math.abs(vx) >= 0.3) {
if (dx > 0) {
// Vuốt sang phải = tháng trước
navigateMonth('prev');
} else {
// Vuốt sang trái = tháng sau
navigateMonth('next');
}
}
},
}),
[navigateMonth],
);
// A2: Hàm animation Bottom Sheet
const showBottomSheetModal = () => {
setShowBottomSheet(true);
......@@ -342,6 +372,7 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
showBottomSheet={showBottomSheet}
bottomSheetTranslateY={bottomSheetTranslateY}
panResponder={panResponder}
calendarPanResponder={calendarPanResponder}
getMonthData={getMonthData}
getEventsForDate={getEventsForDate}
parseLocalDate={parseLocalDate}
......
src/screens/class_schedule/modal_bottom_sheet.js
......@@ -3,10 +3,9 @@ import {
Text,
View,
TouchableOpacity,
StyleSheet,
Modal,
Animated,
ScrollView
ScrollView,
} from 'react-native';
import {styles} from './style';
......
src/screens/class_schedule/style.js
import {StyleSheet, Dimensions} from 'react-native';
import {StyleSheet} from 'react-native';
import R from '../../assets/R';
const {width: screenWidth, height: screenHeight} = Dimensions.get('window');
const CELL_WIDTH = (screenWidth - 30) / 7;
const CELL_HEIGHT = (screenHeight - 160) / 6;
const BOTTOM_SHEET_HEIGHT = screenHeight * 0.6;
import {CELL_WIDTH, CELL_HEIGHT, BOTTOM_SHEET_HEIGHT} from '../../config/Functions';
const styles = StyleSheet.create({
// Container chính của màn hình
// ===== CONTAINER CHÍNH =====
container: {
flex: 1,
backgroundColor: R.colors.white,
},
body:{
body: {
flex: 1,
width: '100%',
alignItems: 'center',
},
// Header tháng/năm với nút điều hướng
// ===== HEADER SECTION (renderHeader) =====
header: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingVertical: 15,
marginHorizontal:15
marginHorizontal: 15,
},
header_title: {
fontSize: R.fontsize.fontsSize16,
......@@ -31,7 +27,6 @@ const styles = StyleSheet.create({
color: R.colors.black,
fontWeight: '600',
},
// Nút điều hướng tháng trước/sau
navButton: {
width: 30,
height: 30,
......@@ -44,13 +39,12 @@ const styles = StyleSheet.create({
color: R.colors.white,
fontSize: R.fontsize.fontsSize20,
fontFamily: R.fonts.InterMedium,
},
// Tiêu đề các ngày trong tuần
// ===== WEEK DAYS SECTION (renderWeekDays) =====
weekDaysContainer: {
flexDirection: 'row',
alignSelf:'center',
alignSelf: 'center',
paddingBottom: 3,
marginBottom: 5,
},
......@@ -65,15 +59,15 @@ const styles = StyleSheet.create({
color: R.colors.black,
},
// Lưới lịch
// ===== CALENDAR GRID SECTION (renderCalendarGrid, renderDayCell) =====
calendarGrid: {
alignSelf:'center'
alignSelf: 'center',
},
weekRow: {
flexDirection: 'row',
},
// Ô ngày trong lịch
// Day Cell Styles
dayCell: {
width: CELL_WIDTH,
minHeight: CELL_HEIGHT,
......@@ -82,12 +76,18 @@ const styles = StyleSheet.create({
padding: 6,
alignItems: 'center',
},
// Ô ngày được chọn
dayCellInactive: {
backgroundColor: R.colors.gray100, // Background cho ngày không thuộc cùng tháng
},
selectedDayCell: {
borderColor: R.colors.blue500,
borderWidth: 1,
},
// Text số ngày
todayCell: {
// Thêm style cho ô ngày hôm nay nếu cần
},
// Day Text Styles
dayText: {
fontSize: R.fontsize.fontsSize12,
fontWeight: '400',
......@@ -95,18 +95,15 @@ const styles = StyleSheet.create({
color: R.colors.black,
marginBottom: 2,
},
// Text ngày không thuộc tháng hiện tại
dayTextInactive: {
color: R.colors.black,
opacity: 1,
color: R.colors.gray200, // Màu text mờ hơn cho ngày khác tháng
opacity: 0.6,
},
// Text ngày được chọn
selectedDayText: {
color: R.colors.black,
fontWeight: '500',
fontFamily: R.fonts.InterSemiBold,
},
// Text ngày hôm nay
todayText: {
color: R.colors.white,
fontWeight: '500',
......@@ -117,12 +114,11 @@ const styles = StyleSheet.create({
paddingVertical: 4,
},
// Sự kiện trong ô ngày
// Event Styles in Day Cell
eventsContainer: {
width: '100%',
flex: 1,
},
// Thanh sự kiện nhỏ trong ô ngày
eventBar: {
paddingVertical: 2,
paddingHorizontal: 5,
......@@ -136,7 +132,6 @@ const styles = StyleSheet.create({
fontWeight: '400',
fontFamily: R.fonts.InterRegular,
},
// Text hiển thị số sự kiện còn lại
moreEventsText: {
fontSize: R.fontsize.fontsSize12,
color: R.colors.gray200,
......@@ -145,7 +140,7 @@ const styles = StyleSheet.create({
textAlign: 'center',
},
// Modal bottom sheet
// ===== MODAL BOTTOM SHEET SECTION (ModalBottomSheetView) =====
modalBackdrop: {
flex: 1,
backgroundColor: R.colors.gray220,
......@@ -157,12 +152,11 @@ const styles = StyleSheet.create({
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
},
// Nội dung bottom sheet
bottomSheetContent: {
height: BOTTOM_SHEET_HEIGHT,
},
// Thanh kéo
// Bottom Sheet Header
dragHandle: {
width: 40,
height: 4,
......@@ -172,7 +166,6 @@ const styles = StyleSheet.create({
marginTop: 10,
marginBottom: 15,
},
// Header của bottom sheet
bottomSheetHeader: {
flexDirection: 'row',
alignItems: 'center',
......@@ -186,7 +179,6 @@ const styles = StyleSheet.create({
fontWeight: '600',
flex: 1,
},
// Nút đóng bottom sheet
closeButton: {
width: 30,
height: 30,
......@@ -202,17 +194,14 @@ const styles = StyleSheet.create({
fontWeight: '400',
},
// Danh sách sự kiện trong bottom sheet
// ScrollView chứa danh sách sự kiện
// Bottom Sheet Events List
eventsScrollView: {
paddingTop: 10,
},
// Container cho từng sự kiện
containerBottomSheet: {
flex: 1,
marginBottom: 10,
},
// Trạng thái không có sự kiện
noEventsContainer: {
flex: 1,
alignItems: 'center',
......@@ -226,7 +215,7 @@ const styles = StyleSheet.create({
fontWeight: '400',
},
// Card sự kiện chi tiết
// Event Card Styles
eventCard: {
flexDirection: 'row',
backgroundColor: R.colors.white,
......@@ -245,7 +234,6 @@ const styles = StyleSheet.create({
shadowRadius: 1,
elevation: 2,
},
// Container thời gian sự kiện
eventTimeContainer: {
minWidth: 80,
alignItems: 'flex-start',
......@@ -258,7 +246,6 @@ const styles = StyleSheet.create({
color: R.colors.blue500,
fontWeight: '600',
},
// Container nội dung sự kiện
eventContent: {
flex: 1,
},
......
src/screens/class_schedule/view.js
......@@ -4,24 +4,20 @@ import {
View,
TouchableOpacity,
ScrollView,
Modal,
Animated,
SafeAreaView,
LogBox,
} from 'react-native';
import R from '../../assets/R';
import {styles, CELL_WIDTH, BOTTOM_SHEET_HEIGHT} from './style';
import {useNavigation} from '@react-navigation/native';
import * as SCREENNAME from '../../routers/ScreenNames';
import {styles} from './style';
import {monthNames, weekDays, formatDateToString} from '../../config/Functions';
import ModalBottomSheetView from './modal_bottom_sheet';
LogBox.ignoreAllLogs(true);
const ClassScheduleView = ({
currentDate,
selectedDate,
showBottomSheet,
bottomSheetTranslateY,
panResponder,
calendarPanResponder,
getMonthData,
getEventsForDate,
parseLocalDate,
......@@ -79,6 +75,7 @@ const ClassScheduleView = ({
key={index}
style={[
styles.dayCell,
!isInCurrentMonth && styles.dayCellInactive, // Thêm background cho ngày khác tháng
isSelected && styles.selectedDayCell,
isTodayDate && styles.todayCell,
]}
......@@ -134,7 +131,9 @@ const ClassScheduleView = ({
<View>
{renderHeader()}
{renderWeekDays()}
<View style ={styles.calendarGrid}>
<View
style={styles.calendarGrid}
{...(calendarPanResponder?.panHandlers || {})}>
{renderCalendarGrid()}
</View>
......
src/screens/debt/item.js
import { StyleSheet, Text, View } from "react-native";
import React from "react";
import { useNavigation } from "@react-navigation/native";
import R from "../../assets/R";
import Button from "../../components/Button";
const ItemList = ({ item , onPayPress}) => {
import {StyleSheet, Text, View} from 'react-native';
import React from 'react';
import {useNavigation} from '@react-navigation/native';
import R from '../../assets/R';
import Button from '../../components/Button';
import styles from './style';
const ItemList = ({item, onPayPress}) => {
const navigate = useNavigation();
const QrCodeIconButton = R.images.icQrCodeButton;
const { displayConfig } = item;
const {displayConfig} = item;
return (
<View style={styles.container}>
<Text style={[styles.title, { color: displayConfig.titleColor }]}>
<View style={styles.container_item}>
<Text style={[styles.title, {color: displayConfig.titleColor}]}>
{item.title_notifi_student_code}
</Text>
<View style={styles.container_content}>
<Text style={styles.sub_title}>Số tiền: </Text>
<Text style={[styles.price_text, { color: displayConfig.priceColor }]}>
<Text style={[styles.price_text, {color: displayConfig.priceColor}]}>
{item.price}
</Text>
</View>
......@@ -24,31 +25,32 @@ const ItemList = ({ item , onPayPress}) => {
</View>
<View style={styles.container_content}>
<Text style={styles.sub_title}>Loại công nợ: </Text>
<Text style={[styles.type_of_debt, { color: displayConfig.typeDebtColor }]}>
<Text
style={[styles.type_of_debt, {color: displayConfig.typeDebtColor}]}>
{item.type_debt}
</Text>
</View>
<View style={styles.container_content}>
<Text style={styles.sub_title}>Ghi chú: </Text>
<Text style={[{ flex: 1 }, styles.note]}>{item.message_debt}</Text>
<Text style={[{flex: 1}, styles.note]}>{item.message_debt}</Text>
</View>
<View style={styles.container_content}>
{displayConfig.showPaymentTerm && (
<View style={{flex:1, flexDirection:'row'}}>
{displayConfig.showPaymentTerm && (
<View style={{flex: 1, flexDirection: 'row'}}>
<Text style={styles.sub_title}>Hạn thanh toán: </Text>
<Text style={[styles.time, { color: displayConfig.timeColor }]}>
<Text style={[styles.time, {color: displayConfig.timeColor}]}>
{item.payment_term}
</Text>
</View>
)}
{displayConfig.showButton && (
{displayConfig.showButton && (
<View style={styles.container_button}>
<Button
marginRight={0}
marginRight={0}
title="Thanh toán"
textStyle={styles.text_button}
icon={(props) => <QrCodeIconButton width={16} height={16} />}
icon={props => <QrCodeIconButton width={16} height={16} />}
backgroundColor={R.colors.buttonColorSel}
textColor={R.colors.white}
justifyContent="center"
......@@ -57,11 +59,10 @@ const ItemList = ({ item , onPayPress}) => {
borderRadius={8}
paddingHorizontal={12}
iconSpacingHorizontal={4}
onPress={() => onPayPress?.(item)}
onPress={() => onPayPress?.(item)}
/>
</View>
)}
</View>
</View>
);
......@@ -69,72 +70,4 @@ const ItemList = ({ item , onPayPress}) => {
export default ItemList;
const styles = StyleSheet.create({
container: {
backgroundColor: R.colors.backgroundCard,
marginHorizontal: 15,
marginVertical: 5,
borderRadius: 10,
paddingVertical: 9,
paddingHorizontal: 15,
},
title: {
color: R.colors.black,
fontSize: R.fontsize.fontsSize14,
fontFamily: R.fonts.InterMedium,
fontWeight:'500',
lineHeight: 24,
},
sub_title: {
color: R.colors.black,
fontSize: R.fontsize.fontsSize12,
fontWeight: "300",
lineHeight: 24,
fontFamily: R.fonts.InterRegular,
},
price_text: {
color: R.colors.blue500,
fontFamily: R.fonts.InterRegular,
fontWeight: "bold",
lineHeight: 24,
fontSize: R.fontsize.fontsSize12,
},
code: {
color: R.colors.black,
fontFamily: R.fonts.InterRegular,
fontWeight: "bold",
lineHeight: 24,
fontSize: R.fontsize.fontsSize12,
},
type_of_debt: {
color: R.colors.black,
fontFamily: R.fonts.InterRegular,
fontWeight: "bold",
lineHeight: 24,
fontSize: R.fontsize.fontsSize12,
},
note: {
color: R.colors.black,
fontFamily: R.fonts.InterRegular,
fontWeight: "400",
lineHeight: 24,
fontSize: R.fontsize.fontsSize12,
},
time: {
color: R.colors.red,
fontFamily: R.fonts.InterRegular,
fontWeight: "400",
lineHeight: 24,
fontSize: R.fontsize.fontsSize12,
},
container_content: {
flexDirection: "row",
},
container_button:{
},
text_button:{
fontFamily: R.fonts.InterRegular,
fontWeight: "400",
fontSize: R.fontsize.fontsSize12,
},
});
src/screens/debt/style.js 0 → 100644
import {StyleSheet, Dimensions} from 'react-native';
import R from '../../assets/R';
const {width, height} = Dimensions.get('window');
const styles = StyleSheet.create({
/* -------------------------------------------------------------------------- */
/* Body */
/* -------------------------------------------------------------------------- */
container: {
flex: 1,
backgroundColor: R.colors.white,
},
input: {
height: 40,
paddingHorizontal: 10,
fontFamily: R.fonts.InterRegular,
fontWeight: '400',
color: R.colors.gray400,
fontSize: R.fontsize.fontsSize12,
},
tab_container: {
marginHorizontal: 10,
justifyContent: 'center',
},
tab_button: {
marginHorizontal: 5,
borderRadius: 15,
width: 132,
backgroundColor: R.colors.gray400,
alignItems: 'center',
justifyContent: 'center',
},
tabButtonActive: {
backgroundColor: R.colors.blue500,
},
tabButtonText: {
fontFamily: R.fonts.InterSemiBold,
fontWeight: '600',
fontSize: R.fontsize.fontsSize12,
color: R.colors.white,
},
tabButtonTextActive: {
color: R.colors.white,
fontWeight: '600',
fontFamily: R.fonts.InterSemiBold,
fontSize: R.fontsize.fontsSize12,
},
tab_scroll_content: {
height: 28,
marginTop: 5,
},
sub_text: {
color: R.colors.black,
marginLeft: 15,
fontFamily: R.fonts.InterRegular,
fontWeight: '300',
fontSize: R.fontsize.fontsSize12,
},
/* -------------------------------------------------------------------------- */
/* Item */
/* -------------------------------------------------------------------------- */
container_item: {
backgroundColor: R.colors.backgroundCard,
marginHorizontal: 15,
marginVertical: 5,
borderRadius: 10,
paddingVertical: 9,
paddingHorizontal: 15,
},
title: {
color: R.colors.black,
fontSize: R.fontsize.fontsSize14,
fontFamily: R.fonts.InterMedium,
fontWeight: '500',
lineHeight: 24,
},
sub_title: {
color: R.colors.black,
fontSize: R.fontsize.fontsSize12,
fontWeight: '300',
lineHeight: 24,
fontFamily: R.fonts.InterRegular,
},
price_text: {
color: R.colors.blue500,
fontFamily: R.fonts.InterRegular,
fontWeight: 'bold',
lineHeight: 24,
fontSize: R.fontsize.fontsSize12,
},
code: {
color: R.colors.black,
fontFamily: R.fonts.InterRegular,
fontWeight: 'bold',
lineHeight: 24,
fontSize: R.fontsize.fontsSize12,
},
type_of_debt: {
color: R.colors.black,
fontFamily: R.fonts.InterRegular,
fontWeight: 'bold',
lineHeight: 24,
fontSize: R.fontsize.fontsSize12,
},
note: {
color: R.colors.black,
fontFamily: R.fonts.InterRegular,
fontWeight: '400',
lineHeight: 24,
fontSize: R.fontsize.fontsSize12,
},
time: {
color: R.colors.red,
fontFamily: R.fonts.InterRegular,
fontWeight: '400',
lineHeight: 24,
fontSize: R.fontsize.fontsSize12,
},
container_content: {
flexDirection: 'row',
},
container_button: {},
text_button: {
fontFamily: R.fonts.InterRegular,
fontWeight: '400',
fontSize: R.fontsize.fontsSize12,
},
});
export default styles;
src/screens/debt/view.js
import React, { useState } from "react";
import React, {useState} from 'react';
import {
Text,
SafeAreaView,
TouchableOpacity,
FlatList,
StyleSheet,
Modal,
View,
Image,
TextInput,
} from "react-native";
import Header from "../../components/Header/Header";
import I18n from "../../helper/i18/i18n";
import R from "../../assets/R";
import ItemList from "./item";
} from 'react-native';
import Header from '../../components/Header/Header';
import I18n from '../../helper/i18/i18n';
import R from '../../assets/R';
import ItemList from './item';
import styles from './style';
const DebtView = (props) => {
const { onTabChange, dataListStatus, dataListDebtItem, activeTab, timeDebt } =
const DebtView = props => {
const {onTabChange, dataListStatus, dataListDebtItem, activeTab, timeDebt} =
props;
const IconSearch = R.images.icSearch
const renderTabViewItem = ({ item }) => {
const IconSearch = R.images.icSearch;
const renderTabViewItem = ({item}) => {
const isActive = activeTab === item.key;
return (
<TouchableOpacity
style={[styles.tab_button, isActive && styles.tabButtonActive]}
onPress={() => onTabChange(item.key)}
>
onPress={() => onTabChange(item.key)}>
<Text
style={[styles.tabButtonText, isActive && styles.tabButtonTextActive]}
>
style={[
styles.tabButtonText,
isActive && styles.tabButtonTextActive,
]}>
{item.title_status}
</Text>
</TouchableOpacity>
);
};
const renderItem = ({ item }) => {
const renderItem = ({item}) => {
return <ItemList item={item} onPayPress={props.onPayPress} />;
};
const filteredDebtItems = dataListDebtItem.filter(
(item) => item.status === activeTab
item => item.status === activeTab,
);
return (
<View style={styles.container}>
<Header isBack title={I18n.t("Debt")} />
<Header isBack title={I18n.t('Debt')} />
<View style={styles.tab_container}>
<FlatList
data={dataListStatus}
renderItem={renderTabViewItem}
keyExtractor={(item) => item.key}
keyExtractor={item => item.key}
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={styles.tab_scroll_content}
/>
</View>
<View style={{ marginHorizontal: 15, flexDirection: "row", alignItems: "center", borderWidth: 1, borderColor: R.colors.gray400, borderRadius: 50, padding: 0, maxHeight: 40, paddingHorizontal: 10, marginVertical: 5 }}>
<IconSearch width={20} height={20} stroke={R.colors.gray400}/>
<View
style={{
marginHorizontal: 15,
flexDirection: 'row',
alignItems: 'center',
borderWidth: 1,
borderColor: R.colors.gray400,
borderRadius: 50,
padding: 0,
maxHeight: 40,
paddingHorizontal: 10,
marginVertical: 5,
}}>
<IconSearch width={20} height={20} stroke={R.colors.gray400} />
<TextInput
placeholder={"Tìm kiếm"}
placeholder={'Tìm kiếm'}
style={styles.input}
placeholderTextColor={R.colors.gray400}
/>
</View>
<Text style={styles.sub_text}>{props.timeDebt}</Text>
<FlatList
data={filteredDebtItems}
renderItem={renderItem}
showsVerticalScrollIndicator={false}
keyExtractor={(item) => item.id.toString()}
keyExtractor={item => item.id.toString()}
/>
</View>
);
};
export default DebtView;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: R.colors.white,
},
input: {
height: 40,
paddingHorizontal: 10,
fontFamily: R.fonts.InterRegular,
fontWeight: "400",
color: R.colors.gray400,
fontSize: R.fontsize.fontsSize12,
},
tab_container: {
marginHorizontal: 10,
justifyContent: "center",
},
tab_button: {
marginHorizontal: 5,
borderRadius: 15,
width:132,
backgroundColor: R.colors.gray400,
alignItems: "center",
justifyContent:"center"
},
tabButtonActive: {
backgroundColor: R.colors.blue500,
},
tabButtonText: {
fontFamily: R.fonts.InterSemiBold,
fontWeight: "600",
fontSize: R.fontsize.fontsSize12,
color: R.colors.white,
},
tabButtonTextActive: {
color: R.colors.white,
fontWeight: "600",
fontFamily: R.fonts.InterSemiBold,
fontSize: R.fontsize.fontsSize12,
},
tab_scroll_content: {
height: 28,
marginTop:5
},
sub_text: {
color: R.colors.black,
marginLeft: 15,
fontFamily: R.fonts.InterRegular,
fontWeight: "300",
fontSize: R.fontsize.fontsSize12,
},
});
src/screens/exam_schedule/view.js
import React from 'react';
import {View, FlatList, SafeAreaView } from 'react-native';
import Header from "../../components/Header/Header";
import R from "../../assets/R";
import I18n from "../../helper/i18/i18n";
import ItemView from "./item_view";
import styles from './style';
......
src/screens/profile/view.js
......@@ -20,7 +20,7 @@ const ProfileView = (props) => {
return (
<View style={{ flex: 1, backgroundColor:R.colors.white}}>
<Header title={"Hồ sơ cá nhân"} isBack />
<ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}>
<ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 , backgroundColor:R.colors.white}}>
<View style={styles.container}>
<View style={styles.body_header}>
<View style={styles.container_image}>
......@@ -346,6 +346,7 @@ const styles = StyleSheet.create({
flex: 1,
paddingHorizontal: 15,
paddingBottom: 9,
backgroundColor: R.colors.white
},
body_header: {
flexDirection: "row",
......
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