Rosetta/desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Flip-анимация перемещения диалогов

Browse Source
This commit is contained in:
RoyceDa
2026-02-20 17:21:09 +02:00
parent d53c987e7e
commit db72246e5a
1 changed files with 26 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/components/DialogsList/DialogsList.tsx
View File

@@ -4,7 +4,7 @@ import animationData from './lottie.json';
import { Box, Flex, Skeleton, Text } from "@mantine/core"; import { Box, Flex, Skeleton, Text } from "@mantine/core";
import { useDialogsList } from "@/app/providers/DialogListProvider/useDialogsList"; import { useDialogsList } from "@/app/providers/DialogListProvider/useDialogsList";
import { GroupDialog } from "../GroupDialog/GroupDialog"; import { GroupDialog } from "../GroupDialog/GroupDialog";
import React from "react"; import { AnimatePresence, motion } from "framer-motion";
interface DialogsListProps { interface DialogsListProps {
mode: 'all' | 'requests'; mode: 'all' | 'requests';
@@ -13,6 +13,7 @@ interface DialogsListProps {
export function DialogsList(props : DialogsListProps) { export function DialogsList(props : DialogsListProps) {
const {dialogs, loadingDialogs} = useDialogsList(); const {dialogs, loadingDialogs} = useDialogsList();
const filteredDialogs = dialogs.filter(v => (v.is_request == (props.mode == 'requests')));
return ( return (
<> <>
@@ -36,21 +37,30 @@ export function DialogsList(props : DialogsListProps) {
))} ))}
</> </>
)} )}
{loadingDialogs === 0 && dialogs.filter(v => (v.is_request == (props.mode == 'requests'))).map((dialog) => ( <motion.div style={{display: 'flex', flexDirection: 'column'}}>
<React.Fragment key={dialog.dialog_id}> <AnimatePresence mode="popLayout">
{dialog.dialog_id.startsWith('#group:') ? ( {loadingDialogs === 0 && filteredDialogs.map((dialog) => (
<GroupDialog <motion.div
onClickDialog={props.onSelectDialog} key={dialog.dialog_id}
{...dialog} layout
/> initial={false}
) : ( transition={{ duration: 0.1, ease: 'easeInOut' }}
<Dialog >
onClickDialog={props.onSelectDialog} {dialog.dialog_id.startsWith('#group:') ? (
{...dialog} <GroupDialog
/> onClickDialog={props.onSelectDialog}
)} {...dialog}
</React.Fragment> />
))} ) : (
<Dialog
onClickDialog={props.onSelectDialog}
{...dialog}
/>
)}
</motion.div>
))}
</AnimatePresence>
</motion.div>
</> </>
); );
} }