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