bro-js/journal.pl
bro-js/journal.pl
7
1
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Refactor LessonDetail component to enhance student attendance display with 3D flip animation. Removed sorting to prevent reordering animation and added conditional rendering for present and not present states using Flex and Box components.

Browse Source
This commit is contained in:
Primakov Alexandr Alexandrovich 2025-03-25 09:34:27 +03:00
parent 1d95f295cb
commit ac87a2fc80
1 changed files with 67 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/pages/lesson-details.tsx
View File

@ -11,6 +11,7 @@ import {
Heading,
Stack,
useColorMode,
Flex,
} from '@chakra-ui/react'
import { useTranslation } from 'react-i18next'
@ -202,7 +203,8 @@ const LessonDetail = () => {
}
}
return allStudents.sort((a, b) => (a.present ? -1 : 1))
// Removing the sorting to prevent reordering animation
return allStudents
}, [accessCode?.body, AllStudents.data, prevPresentStudentsRef.current])
// Функция для определения цвета на основе посещаемости
@ -298,35 +300,82 @@ const LessonDetail = () => {
{studentsArr.map((student) => (
<motion.li
key={student.sub}
layout
initial={{ opacity: 0, scale: 0.8 }}
animate={{
opacity: 1,
scale: 1,
// Добавляем подсветку для недавно отметившихся студентов
rotateY: student.present ? 0 : 180,
boxShadow: student.recentlyPresent
? ['0 0 0 0 rgba(66, 153, 225, 0)', '0 0 20px 5px rgba(66, 153, 225, 0.7)', '0 0 0 0 rgba(66, 153, 225, 0)']
: '0 0 0 0 rgba(0, 0, 0, 0)'
}}
exit={{ opacity: 0, scale: 0.8 }}
transition={{
type: "spring",
stiffness: 300,
damping: 30,
layout: { duration: 0.4 },
rotateY: { type: "spring", stiffness: 300, damping: 20 },
boxShadow: {
repeat: student.recentlyPresent ? 3 : 0,
duration: 1.5
}
}}
style={{
transformStyle: "preserve-3d",
perspective: "1000px"
}}
>
<UserCard
wrapperAS="div"
student={student}
present={student.present}
recentlyPresent={student.recentlyPresent}
onAddUser={(user: User) => manualAdd({ lessonId, user })}
/>
{/* Front side - visible when present */}
<Box
position="relative"
width="100%"
height="100%"
style={{
transformStyle: "preserve-3d"
}}
>
<Box
position="absolute"
top="0"
left="0"
width="100%"
height="100%"
style={{
backfaceVisibility: "hidden",
transform: "rotateY(0deg)",
zIndex: student.present ? 1 : 0
}}
>
<UserCard
wrapperAS="div"
student={student}
present={student.present}
recentlyPresent={student.recentlyPresent}
onAddUser={(user: User) => manualAdd({ lessonId, user })}
/>
</Box>
{/* Back side - visible when not present */}
<Flex
position="absolute"
top="0"
left="0"
width="100%"
height="100%"
bg={colorMode === "light" ? "gray.100" : "gray.600"}
borderRadius="md"
align="center"
justify="center"
p={4}
style={{
backfaceVisibility: "hidden",
transform: "rotateY(180deg)",
zIndex: student.present ? 0 : 1
}}
>
<Box textAlign="center">
<Box fontSize="sm" fontWeight="medium">
{student.name || student.lastName}
</Box>
<Box fontSize="xs" opacity={0.8}>
{t('journal.pl.lesson.notMarked')}
</Box>
</Box>
</Flex>
</Box>
</motion.li>
))}
</AnimatePresence>