Skip to content

A
AppUms_Student
Commit e10510ea by tungnq
Options

TODO: Đã chỉnh sửa xong filter tháng

parent ad6996b4
Showing with 418 additions and 163 deletions
App.js
......@@ -7,7 +7,7 @@
*/
import React, {useEffect} from 'react';
import {View, Text} from 'react-native';
import {View, Text, DeviceEventEmitter} from 'react-native';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';
import rootReducer from './src/reducers/index';
......@@ -16,6 +16,15 @@ import createSagaMiddleware from 'redux-saga';
import rootSaga from './src/saga/rootSaga';
// import FirebaseNotification from "./src/helper/FirebaseNotification";
import SplashScreen from 'react-native-splash-screen';
if (!DeviceEventEmitter.removeListener) {
DeviceEventEmitter.removeListener = function(eventType, listener) {
// Use the new API
const subscription = this.addListener(eventType, () => {});
if (subscription && subscription.remove) {
subscription.remove();
}
};
}
const sagaMiddleware = createSagaMiddleware();
let store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
......
src/assets/images.js
......@@ -43,6 +43,8 @@ const images = {
icProfileUn:require('./icon/profile_navigation_unsel.png'),
igProfileDemo:require('./images/image.png'),
icImageDownload:require('./images/icImageDownload.png'),
icLeft:require('./icon/arrow_left.png'),
icRight:require('./icon/arrow_right.png'),
ic3Date:Date3Drawer,
icDateDrawer:DateDrawer,
icMenu:Menu,
......
src/config/Functions.js
import React from 'react';
import React, { useRef, useEffect } from 'react';
import {
Dimensions,
Platform,
......@@ -234,6 +234,9 @@ export const removeItemFromArr2 = (items, index) => {
return fill;
};
export const isValidEmail = email =>
email.length > 0 && /(.+)@(.+){2,}\.(.+){2,}/gim.test(email);
export const removeItemFromArr = (items, index) => {
items.splice(index, 1);
return items;
......@@ -601,3 +604,138 @@ export const getMimeType = fileExt => {
return '*/*';
}
};
//Calendar
export const parseMinutes = timeStr => {
if (!timeStr || typeof timeStr !== 'string') return 0;
const parts = timeStr.split(':');
if (parts.length !== 2) return 0;
const [h, m] = parts.map(Number);
if (isNaN(h) || isNaN(m)) return 0;
return h * 60 + m;
};
export const formatDateToString = date => {
const y = date.getFullYear();
const m = String(date.getMonth() + 1).padStart(2, '0');
const d = String(date.getDate()).padStart(2, '0');
return `${y}-${m}-${d}`;
};
export const isSameDay = (a, b) =>
a.getFullYear() === b.getFullYear() &&
a.getMonth() === b.getMonth() &&
a.getDate() === b.getDate();
/**
* Trả về mảng events đã có toạ độ:
* { topPosition, height, leftOffset, rightOffset, zIndex, columnIndex, numColumns }
*/
export const layoutDayEvents = (events, hourHeight = 80) => {
if (!events || events.length === 0) return [];
// Chuẩn hoá + sort theo start
const mapped = events
.filter(e => e?.time && e?.endTime)
.map((e, i) => ({
...e,
start: parseMinutes(e.time),
end: parseMinutes(e.endTime),
_idx: i,
}))
.filter(e => e.end > e.start)
.sort((a, b) => a.start - b.start);
// Gom nhóm overlap tuyến tính
const groups = [];
let cur = null;
for (const ev of mapped) {
if (!cur || ev.start >= cur.maxEnd) {
cur = {id: groups.length, items: [ev], maxEnd: ev.end};
groups.push(cur);
} else {
cur.items.push(ev);
if (ev.end > cur.maxEnd) cur.maxEnd = ev.end;
}
}
const out = [];
// Gán cột theo greedy interval partitioning
for (const g of groups) {
const colEnds = []; // end time cuối mỗi cột
const colOf = {}; // event.id -> columnIndex
const items = [...g.items].sort((a, b) => a.start - b.start);
for (const ev of items) {
let placed = false;
for (let c = 0; c < colEnds.length; c++) {
if (ev.start >= colEnds[c]) {
colEnds[c] = ev.end;
colOf[ev.id] = c;
placed = true;
break;
}
}
if (!placed) {
colOf[ev.id] = colEnds.length;
colEnds.push(ev.end);
}
}
const numCols = Math.max(colEnds.length, 1);
for (const ev of items) {
const columnIndex = colOf[ev.id] ?? 0;
const topPosition = (ev.start / 60) * hourHeight;
const height = ((ev.end - ev.start) / 60) * hourHeight;
const widthPct = 100 / numCols;
const leftPct = columnIndex * widthPct;
out.push({
...ev,
topPosition,
height,
leftOffset: `${Math.round(leftPct * 100) / 100}%`,
rightOffset: `${Math.round((100 - (leftPct + widthPct)) * 100) / 100}%`,
widthPct,
columnIndex,
numColumns: numCols,
zIndex: 10 + columnIndex,
});
}
}
// Trả về theo thứ tự ban đầu để render ổn định
return out.sort((a, b) => a._idx - b._idx);
/**
* Hook đếm số lần render của một component
*/
};
export const useRenderCount = (name = 'Component') => {
const renderCount = useRef(0);
renderCount.current += 1;
useEffect(() => {
console.log(`${name} đã render ${renderCount.current} lần`);
});
return renderCount.current;
};
export const monthNames = [
'Tháng 1',
'Tháng 2',
'Tháng 3',
'Tháng 4',
'Tháng 5',
'Tháng 6',
'Tháng 7',
'Tháng 8',
'Tháng 9',
'Tháng 10',
'Tháng 11',
'Tháng 12',
]
\ No newline at end of file
src/routers/TabNavigation.js
......@@ -124,8 +124,8 @@ export default connect(mapStateToProps, {})(TabNavigator);
const styles = StyleSheet.create({
tabBarIcon: {
width: Platform.OS === 'ios' ? 20: '50%',
height: Platform.OS === 'ios' ? 20 : '50%',
width: Platform.OS === 'ios' ? 20: 25,
height: Platform.OS === 'ios' ? 20 : 25,
resizeMode: 'contain'
}
});
\ No newline at end of file
src/screens/class_schedule/index.js
import React, {useState, useMemo, useRef} from 'react';
import {Animated, PanResponder, Dimensions} from 'react-native';
import React, {useState, useMemo, useRef, useEffect} from 'react';
import {Animated, PanResponder, Dimensions, DeviceEventEmitter} from 'react-native';
import {useFocusEffect} from '@react-navigation/native';
import ClassScheduleView from './view';
// ==================== HẰNG SỐ ====================
const {height: screenHeight} = Dimensions.get('window');
const BOTTOM_SHEET_HEIGHT = screenHeight * 0.6;
const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
const [currentDate, setCurrentDate] = useState(new Date(2025, 7, 1));
// ==================== QUẢN LÝ STATE ====================
// B1: State ngày tháng và lịch
const [currentDate, setCurrentDate] = useState(new Date());
const [selectedDate, setSelectedDate] = useState(null);
// ==================== EFFECTS ====================
// Reset về ngày hiện tại khi chuyển màn hình
useFocusEffect(
React.useCallback(() => {
const today = new Date();
setCurrentDate(today);
setSelectedDate(null);
DeviceEventEmitter.emit('onDateChange', today);
// Cập nhật header drawer với tháng hiện tại
DeviceEventEmitter.emit('updateHeaderMonth', today.getMonth());
}, [])
);
// B2: State bottom sheet
const [showBottomSheet, setShowBottomSheet] = useState(false);
const bottomSheetTranslateY = useRef(new Animated.Value(BOTTOM_SHEET_HEIGHT)).current;
// B3: Tham chiếu animation
const bottomSheetTranslateY = useRef(
new Animated.Value(BOTTOM_SHEET_HEIGHT),
).current;
const formatDateToString = (date) => {
// ==================== HÀM TIỆN ÍCH ====================
// T1: Định dạng ngày thành chuỗi
const formatDateToString = date => {
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
return `${year}-${month}-${day}`;
};
// T2: Định dạng ngày để hiển thị
const formatDateToDisplay = date => {
const day = date.getDate().toString().padStart(2, '0');
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const year = date.getFullYear();
return `Lịch ngày ${day}/${month}/${year}`;
};
// T3: Chuyển đổi chuỗi thành ngày
const parseLocalDate = dateString => {
const [year, month, day] = dateString.split('-').map(Number);
return new Date(year, month - 1, day);
};
// ==================== QUẢN LÝ DỮ LIỆU ====================
// D1: Tạo dữ liệu sự kiện mẫu
const createMockEvents = () => {
const today = new Date();
const todayStr = formatDateToString(today);
......@@ -147,32 +187,25 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
];
};
// D2: Xử lý dữ liệu sự kiện
const mockEvents = createMockEvents();
const allEvents = [...events, ...mockEvents];
const panResponder = useRef(
PanResponder.create({
onMoveShouldSetPanResponder: (evt, gestureState) => {
return Math.abs(gestureState.dy) > 10;
},
onPanResponderMove: (evt, gestureState) => {
if (gestureState.dy > 0) {
bottomSheetTranslateY.setValue(gestureState.dy);
}
},
onPanResponderRelease: (evt, gestureState) => {
if (gestureState.dy > 100) {
hideBottomSheetModal();
} else {
Animated.spring(bottomSheetTranslateY, {
toValue: 0,
useNativeDriver: true,
}).start();
}
},
})
).current;
// D3: Hàm truy vấn sự kiện
const getEventsForDate = date => {
const dateStr = formatDateToString(date);
return allEvents.filter(event => event.date === dateStr);
};
const getSelectedEvents = () => {
if (!selectedDate) return [];
return allEvents
.filter(event => event.date === selectedDate)
.sort((a, b) => a.time.localeCompare(b.time));
};
// ==================== LOGIC LỊCH ====================
// L1: Tạo dữ liệu tháng
const getMonthData = useMemo(() => {
const year = currentDate.getFullYear();
const month = currentDate.getMonth();
......@@ -198,28 +231,12 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
};
}, [currentDate]);
const getEventsForDate = (date) => {
const dateStr = formatDateToString(date);
return allEvents.filter(event => event.date === dateStr);
};
const parseLocalDate = (dateString) => {
const [year, month, day] = dateString.split('-').map(Number);
return new Date(year, month - 1, day);
};
const formatDateToDisplay = (date) => {
const day = date.getDate().toString().padStart(2, '0');
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const year = date.getFullYear();
return `Lịch ngày ${day}/${month}/${year}`;
};
const isCurrentMonth = (date) => {
// L2: Hàm kiểm tra ngày tháng
const isCurrentMonth = date => {
return date.getMonth() === currentDate.getMonth();
};
const isToday = (date) => {
const isToday = date => {
const today = new Date();
return (
date.getDate() === today.getDate() &&
......@@ -228,20 +245,32 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
);
};
const navigateMonth = (direction) => {
const newDate = new Date(currentDate);
if (direction === 'prev') {
newDate.setMonth(newDate.getMonth() - 1);
} else {
newDate.setMonth(newDate.getMonth() + 1);
// ==================== HỆ THỐNG ANIMATION ====================
// A1: Thiết lập PanResponder
const panResponder = useRef(
PanResponder.create({
onMoveShouldSetPanResponder: (evt, gestureState) => {
return Math.abs(gestureState.dy) > 10;
},
onPanResponderMove: (evt, gestureState) => {
if (gestureState.dy > 0) {
bottomSheetTranslateY.setValue(gestureState.dy);
}
setCurrentDate(newDate);
setSelectedDate(null);
if (showBottomSheet) {
},
onPanResponderRelease: (evt, gestureState) => {
if (gestureState.dy > 100) {
hideBottomSheetModal();
} else {
Animated.spring(bottomSheetTranslateY, {
toValue: 0,
useNativeDriver: true,
}).start();
}
};
},
}),
).current;
// A2: Hàm animation Bottom Sheet
const showBottomSheetModal = () => {
setShowBottomSheet(true);
Animated.spring(bottomSheetTranslateY, {
......@@ -262,7 +291,30 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
});
};
const handleDatePress = (date) => {
// ==================== XỬ LÝ SỰ KIỆN ====================
// X1: Xử lý điều hướng
const navigateMonth = direction => {
const newDate = new Date(currentDate);
if (direction === 'prev') {
newDate.setMonth(newDate.getMonth() - 1);
} else {
newDate.setMonth(newDate.getMonth() + 1);
}
setCurrentDate(newDate);
setSelectedDate(null);
// Phát sự kiện để cập nhật header title
DeviceEventEmitter.emit('onDateChange', newDate.toISOString());
// Cập nhật header drawer với tháng mới
DeviceEventEmitter.emit('updateHeaderMonth', newDate.getMonth());
if (showBottomSheet) {
hideBottomSheetModal();
}
};
// X2: Xử lý chọn ngày
const handleDatePress = date => {
const dateStr = formatDateToString(date);
const dayEvents = getEventsForDate(date);
......@@ -274,7 +326,8 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
}
};
const handleEventPress = (event) => {
// X3: Xử lý tương tác sự kiện
const handleEventPress = event => {
onEventPress?.(event);
};
......@@ -282,13 +335,6 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
hideBottomSheetModal();
};
const getSelectedEvents = () => {
if (!selectedDate) return [];
return allEvents
.filter(event => event.date === selectedDate)
.sort((a, b) => a.time.localeCompare(b.time));
};
return (
<ClassScheduleView
currentDate={currentDate}
......@@ -300,6 +346,7 @@ const ClassSchedule = ({events = [], onDateSelect, onEventPress}) => {
getEventsForDate={getEventsForDate}
parseLocalDate={parseLocalDate}
formatDateToDisplay={formatDateToDisplay}
formatDateToString={formatDateToString}
isCurrentMonth={isCurrentMonth}
isToday={isToday}
navigateMonth={navigateMonth}
......
src/screens/class_schedule/style.js
......@@ -3,15 +3,18 @@ import R from '../../assets/R';
const {width: screenWidth, height: screenHeight} = Dimensions.get('window');
const CELL_WIDTH = (screenWidth - 30) / 7;
const CELL_HEIGHT = (screenHeight - 140) / 6;
const CELL_HEIGHT = (screenHeight - 160) / 6;
const BOTTOM_SHEET_HEIGHT = screenHeight * 0.6;
const styles = StyleSheet.create({
// Container chính của màn hình
container: {
flex: 1,
backgroundColor: R.colors.white,
alignItems: 'center',
},
// Header tháng/năm với nút điều hướng
header: {
flexDirection: 'row',
alignItems: 'center',
......@@ -19,24 +22,20 @@ const styles = StyleSheet.create({
paddingVertical: 15,
},
header_title: {
fontSize: R.fontsize.fontsSize16,
fontSize: R.fontsize.fontsSize14,
fontFamily: R.fonts.InterMedium,
color: R.colors.black,
fontWeight: '600',
},
// Nút điều hướng tháng trước/sau
navButton: {
width: 30,
height: 30,
borderRadius: 20,
backgroundColor: R.colors.blue500,
alignItems: 'center',
justifyContent: 'center',
},
navButtonText: {
color: R.colors.white,
fontSize: R.fontsize.fontsSize16,
fontFamily: R.fonts.InterMedium,
},
// Tiêu đề các ngày trong tuần
weekDaysContainer: {
flexDirection: 'row',
paddingBottom: 5,
......@@ -47,78 +46,94 @@ const styles = StyleSheet.create({
alignItems: 'center',
},
weekDayText: {
fontFamily: R.fonts.InterRegular,
fontSize: R.fontsize.fontsSize10,
fontWeight: '400',
fontFamily: R.fonts.InterMedium,
fontSize: R.fontsize.fontsSize12,
fontWeight: '600',
color: R.colors.black,
},
calendarGrid: {
},
// Lưới lịch
calendarGrid: {},
weekRow: {
flexDirection: 'row',
},
// Ô ngày trong lịch
dayCell: {
width: CELL_WIDTH,
minHeight: CELL_HEIGHT,
borderWidth: 1,
borderColor: R.colors.grey_200,
padding: 4,
borderColor: R.colors.gray150,
padding: 6,
alignItems: 'center',
},
// Ô ngày được chọn
selectedDayCell: {
borderColor: R.colors.blue500,
borderColor: R.colors.main,
borderWidth: 1,
},
// Text số ngày
dayText: {
fontSize: R.fontsize.fontsSize12,
fontWeight: '500',
fontFamily:R.fonts.InterMedium,
fontWeight: '400',
fontFamily: R.fonts.InterRegular,
color: R.colors.black,
marginBottom: 2,
},
// Text ngày không thuộc tháng hiện tại
dayTextInactive: {
color: R.colors.grey_100,
color: R.colors.black,
opacity: 1,
},
// Text ngày được chọn
selectedDayText: {
color: R.colors.black,
fontWeight: 'bold',
fontWeight: '500',
fontFamily: R.fonts.InterSemiBold,
},
// Text ngày hôm nay
todayText: {
color: R.colors.white,
fontWeight: 'bold',
fontFamily: R.fonts.InterSemiBold,
backgroundColor: R.colors.blue500,
borderRadius: 10,
paddingHorizontal: 5,
fontWeight: '600',
fontFamily: R.fonts.fontSemiBold,
backgroundColor: R.colors.main,
borderRadius: 15,
paddingHorizontal: 6,
paddingVertical: 4,
},
// Sự kiện trong ô ngày
eventsContainer: {
width: '100%',
flex: 1,
},
// Thanh sự kiện nhỏ trong ô ngày
eventBar: {
paddingVertical: 2,
paddingHorizontal: 5,
borderRadius: 5,
borderRadius: 10,
marginBottom: 2,
backgroundColor: R.colors.main,
},
eventBarText: {
fontSize: R.fontsize.fontsSize10,
fontSize: R.fontsize.fontsSize12,
color: R.colors.white,
fontWeight: '500',
fontFamily: R.fonts.InterRegular
fontWeight: '400',
fontFamily: R.fonts.InterRegular,
},
// Text hiển thị số sự kiện còn lại
moreEventsText: {
fontSize: R.fontsize.fontsSize10,
color: R.colors.grey_100,
fontSize: R.fontsize.fontsSize12,
color: R.colors.gray150,
fontWeight: '400',
fontFamily: R.fonts.InterRegular,
textAlign: 'center',
},
// Modal bottom sheet
modalBackdrop: {
flex: 1,
backgroundColor: R.colors.grey_200,
backgroundColor: R.colors.black250,
justifyContent: 'flex-end',
},
bottomSheet: {
......@@ -126,46 +141,63 @@ const styles = StyleSheet.create({
backgroundColor: R.colors.white,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
},
// Nội dung bottom sheet
bottomSheetContent: {
paddingHorizontal: 15,
height: BOTTOM_SHEET_HEIGHT,
},
// Thanh kéo
dragHandle: {
width: 40,
height: 4,
backgroundColor: R.colors.grey_200,
borderRadius: 2,
backgroundColor: R.colors.gray150,
borderRadius: 5,
alignSelf: 'center',
marginTop: 10,
marginBottom: 15,
},
// Header của bottom sheet
bottomSheetHeader: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: 20,
paddingHorizontal: 15,
},
bottomSheetTitle: {
fontSize: R.fontsize.fontSizeHeader1,
fontSize: R.fontsize.fontsSize12,
fontFamily: R.fonts.InterMedium,
color: R.colors.black,
fontWeight: '600',
flex: 1,
},
// Nút đóng bottom sheet
closeButton: {
width: 30,
height: 30,
borderRadius: 15,
backgroundColor: R.colors.grey_200,
backgroundColor: R.colors.gray150,
alignItems: 'center',
justifyContent: 'center',
},
closeButtonText: {
fontSize: R.fontsize.fontsSize12,
color: R.colors.grey_800,
color: R.colors.black,
fontFamily: R.fonts.InterRegular,
fontWeight: '400',
},
// Danh sách sự kiện trong bottom sheet
// ScrollView chứa danh sách sự kiện
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',
......@@ -175,17 +207,20 @@ const styles = StyleSheet.create({
noEventsText: {
fontSize: R.fontsize.fontsSize12,
fontFamily: R.fonts.InterRegular,
color: R.colors.grey_800,
fontWeight: '400'
color: R.colors.gray150,
fontWeight: '400',
},
// Card sự kiện chi tiết
eventCard: {
flexDirection: 'row',
backgroundColor: R.colors.white,
borderRadius: 12,
padding: 15,
marginBottom: 12,
marginBottom: 10,
marginHorizontal: 15,
borderLeftWidth: 4,
borderLeftColor: R.colors.blue500,
borderLeftColor: R.colors.main,
shadowColor: R.colors.black,
shadowOffset: {
width: 0,
......@@ -195,6 +230,7 @@ const styles = StyleSheet.create({
shadowRadius: 1,
elevation: 2,
},
// Container thời gian sự kiện
eventTimeContainer: {
minWidth: 80,
alignItems: 'flex-start',
......@@ -204,9 +240,10 @@ const styles = StyleSheet.create({
eventTime: {
fontSize: R.fontsize.fontsSize12,
fontFamily: R.fonts.InterMedium,
color: R.colors.blue500,
color: R.colors.main,
fontWeight: '600',
},
// Container nội dung sự kiện
eventContent: {
flex: 1,
},
......@@ -220,7 +257,8 @@ const styles = StyleSheet.create({
eventDescription: {
fontSize: R.fontsize.fontsSize12,
fontFamily: R.fonts.InterRegular,
color: R.colors.grey_800,
color: R.colors.gray200,
fontWeight: '400',
},
});
......
src/screens/class_schedule/view.js
......@@ -3,20 +3,23 @@ import {
Text,
View,
TouchableOpacity,
StyleSheet,
ScrollView,
Dimensions,
Modal,
Animated,
SafeAreaView,
LogBox,
PanResponder,
Image
} from 'react-native';
import R from '../../assets/R';
import { styles, CELL_WIDTH, BOTTOM_SHEET_HEIGHT } from './style';
import { useNavigation } from '@react-navigation/native';
import {styles} from './style';
import {useNavigation} from '@react-navigation/native';
import * as SCREENNAME from '../../routers/ScreenNames';
import { monthNames } from '../../config/Functions';
LogBox.ignoreLogs([
'[Reanimated] Reduced motion setting is enabled',
'Each child in a list should have a unique "key" prop'
]);
const ClassScheduleView = ({
currentDate,
selectedDate,
showBottomSheet,
bottomSheetTranslateY,
......@@ -25,6 +28,7 @@ const ClassScheduleView = ({
getEventsForDate,
parseLocalDate,
formatDateToDisplay,
formatDateToString,
isCurrentMonth,
isToday,
navigateMonth,
......@@ -34,18 +38,38 @@ const ClassScheduleView = ({
getSelectedEvents,
}) => {
const navigation = useNavigation();
const renderHeader = () => {
const monthNames = [
'Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6',
'Tháng 7', 'Tháng 8', 'Tháng 9', 'Tháng 10', 'Tháng 11', 'Tháng 12',
];
// Tạo PanResponder cho swipe gesture điều hướng tháng
const swipePanResponder = PanResponder.create({
onMoveShouldSetPanResponder: (evt, gestureState) => {
// Chỉ kích hoạt khi vuốt ngang với khoảng cách đủ lớn
return Math.abs(gestureState.dx) > Math.abs(gestureState.dy) && Math.abs(gestureState.dx) > 20;
},
onPanResponderMove: (evt, gestureState) => {
// Có thể thêm animation preview ở đây nếu cần
},
onPanResponderRelease: (evt, gestureState) => {
const swipeThreshold = 50; // Ngưỡng tối thiểu để kích hoạt swipe
if (gestureState.dx > swipeThreshold) {
// Vuốt phải -> tháng trước
navigateMonth('prev');
} else if (gestureState.dx < -swipeThreshold) {
// Vuốt trái -> tháng sau
navigateMonth('next');
}
},
});
const renderHeader = () => {
return (
<View style={styles.header}>
<TouchableOpacity
style={styles.navButton}
onPress={() => navigateMonth('prev')}>
<Text style={styles.navButtonText}>‹</Text>
<Image
source={R.images.icLeft}
style={styles.icBack}
/>
</TouchableOpacity>
<Text style={styles.header_title}>
......@@ -55,7 +79,10 @@ const ClassScheduleView = ({
<TouchableOpacity
style={styles.navButton}
onPress={() => navigateMonth('next')}>
<Text style={styles.navButtonText}>›</Text>
<Image
source={R.images.icRight}
style={styles.icBack}
/>
</TouchableOpacity>
</View>
);
......@@ -75,7 +102,7 @@ const ClassScheduleView = ({
);
};
const renderDayCell = (date, index) => {
const renderDayCell = (date, index, formatDateToString) => {
const dayEvents = getEventsForDate(date);
const isSelected = selectedDate === formatDateToString(date);
const isTodayDate = isToday(date);
......@@ -88,10 +115,11 @@ const ClassScheduleView = ({
styles.dayCell,
isSelected && styles.selectedDayCell,
isTodayDate && styles.todayCell,
!isInCurrentMonth && {backgroundColor: R.colors.gray220},
]}
onPress={() => handleDatePress(date)}
activeOpacity={0.7}>
activeOpacity={0.7}
>
<Text
style={[
styles.dayText,
......@@ -107,10 +135,7 @@ const ClassScheduleView = ({
{dayEvents.slice(0, 2).map((event, eventIndex) => (
<TouchableOpacity
key={event.id}
style={[
styles.eventBar,
{ backgroundColor: R.colors.main },
]}
style={[styles.eventBar]}
onPress={() => handleEventPress(event)}>
<Text style={styles.eventBarText} numberOfLines={1}>
{event.title}
......@@ -126,14 +151,6 @@ const ClassScheduleView = ({
);
};
const formatDateToString = (date) => {
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
return `${year}-${month}-${day}`;
};
const renderCalendarGrid = () => {
const weeks = [];
for (let i = 0; i < 6; i++) {
......@@ -141,7 +158,7 @@ const ClassScheduleView = ({
weeks.push(
<View key={i} style={styles.weekRow}>
{week.map((date, dayIndex) =>
renderDayCell(date, i * 7 + dayIndex),
renderDayCell(date, i * 7 + dayIndex, formatDateToString),
)}
</View>,
);
......@@ -157,7 +174,7 @@ const ClassScheduleView = ({
return (
<View style={styles.bottomSheetContent}>
<View style={styles.dragHandle} />
<View style={styles.dragHandle}></View>
<View style={styles.bottomSheetHeader}>
<Text style={styles.bottomSheetTitle}>
......@@ -169,7 +186,6 @@ const ClassScheduleView = ({
<Text style={styles.closeButtonText}>✕</Text>
</TouchableOpacity>
</View>
<ScrollView
style={styles.eventsScrollView}
showsVerticalScrollIndicator={false}>
......@@ -179,12 +195,14 @@ const ClassScheduleView = ({
</View>
) : (
selectedEvents.map((event, index) => (
<View style={styles.containerBottomSheet}>
<TouchableOpacity
key={event.id}
style={styles.eventCard}
onPress={() => navigation.navigate(SCREENNAME.DETAILCLASSSCHEDULE, { event })}
onPress={() =>
navigation.navigate(SCREENNAME.DETAILSCHEDULE, {event})
}
activeOpacity={0.7}>
<View style={styles.eventTimeContainer}>
<Text style={styles.eventTime}>
{event.time}
......@@ -203,6 +221,7 @@ const ClassScheduleView = ({
)}
</View>
</TouchableOpacity>
</View>
))
)}
</ScrollView>
......@@ -210,6 +229,8 @@ const ClassScheduleView = ({
);
};
// ===== RENDER BOTTOM SHEET - Modal bottom sheet =====
// Sử dụng styles: modalBackdrop, bottomSheet
const renderBottomSheet = () => {
return (
<Modal
......@@ -217,17 +238,15 @@ const ClassScheduleView = ({
transparent={true}
animationType="none"
onRequestClose={handleCloseBottomSheet}>
<TouchableOpacity
style={styles.modalBackdrop}
activeOpacity={1}
onPress={handleCloseBottomSheet}>
<Animated.View
style={[
styles.bottomSheet,
{
transform: [{ translateY: bottomSheetTranslateY }],
transform: [{translateY: bottomSheetTranslateY}],
},
]}
{...panResponder.panHandlers}>
......@@ -240,19 +259,20 @@ const ClassScheduleView = ({
);
};
// ===== MAIN RENDER - Render chính của component =====
// Sử dụng styles: container
return (
<SafeAreaView style={styles.container}>
<View style={styles.container}>
<ScrollView showsVerticalScrollIndicator={false}>
<View style={styles.body} {...swipePanResponder.panHandlers}>
{renderHeader()}
{renderWeekDays()}
{renderCalendarGrid()}
</View>
</ScrollView>
{renderBottomSheet()}
</SafeAreaView>
</View>
);
};
export default ClassScheduleView;
src/screens/home/style.js
......@@ -89,7 +89,7 @@ const styles = StyleSheet.create({
backgroundColor: R.colors.blue500,
},
avatar_text: {
fontSize: R.fontsize.fontsSize16,
fontSize: R.fontsize.fontsSize14,
fontWeight: '600',
color: R.colors.white,
fontFamily: R.fonts.InterSemiBold,
......@@ -100,9 +100,9 @@ const styles = StyleSheet.create({
},
text_card_info: {
fontSize: R.fontsize.fontsSize12,
fontWeight: '600',
fontWeight: '400',
color: R.colors.black,
fontFamily: R.fonts.InterMedium,
fontFamily: R.fonts.InterRegular,
numberOfLines: 1,
ellipsizeMode: 'tail',
},
......@@ -110,15 +110,14 @@ const styles = StyleSheet.create({
paddingVertical: 5,
paddingHorizontal: 10,
backgroundColor: R.colors.gray220,
minHeight: 21,
maxWidth: 108,
height:30,
borderRadius: 15,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
btn_text: {
fontSize: R.fontsize.fontsSize10,
fontSize: R.fontsize.fontsSize12,
fontWeight: '400',
color: R.colors.black,
fontFamily: R.fonts.InterRegular,
......
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