72 lines
2.6 KiB
TypeScript
72 lines
2.6 KiB
TypeScript
import { useRosettaColors } from "@/app/hooks/useRosettaColors";
|
|
import { useDialog } from "@/app/providers/DialogProvider/useDialog";
|
|
import { Box, Flex, Paper, Transition } from "@mantine/core";
|
|
import { IconArrowDown, IconArrowUp } from "@tabler/icons-react";
|
|
import { useEffect, useRef, useState } from "react";
|
|
|
|
export interface DialogAffixProps {
|
|
mounted: boolean;
|
|
onClick: () => void;
|
|
}
|
|
|
|
export function DialogAffix(props : DialogAffixProps) {
|
|
const {messages} = useDialog();
|
|
const [updates, setUpdates] = useState(false);
|
|
const colors = useRosettaColors();
|
|
const lastMessageTimeRef = useRef(0);
|
|
//const {isMentioned} = useMentions();
|
|
//const {hasGroup} = useGroups();
|
|
const mentionedAffix = false;
|
|
|
|
useEffect(() => {
|
|
if(!props.mounted){
|
|
setUpdates(false);
|
|
}
|
|
if(messages.length === 0){
|
|
return;
|
|
}
|
|
lastMessageTimeRef.current = messages[messages.length - 1].timestamp;
|
|
}, [props.mounted]);
|
|
|
|
useEffect(() => {
|
|
if(!props.mounted ||
|
|
(messages.length > 0 && lastMessageTimeRef.current >= messages[messages.length - 1].timestamp)
|
|
){
|
|
return;
|
|
}
|
|
setUpdates(true);
|
|
}, [messages]);
|
|
|
|
return (
|
|
<Transition transition="slide-up" mounted={props.mounted}>
|
|
{(transitionStyles) => (
|
|
<Paper withBorder pos={'absolute'} bottom={20} right={20} style={{
|
|
...transitionStyles,
|
|
cursor: 'pointer'
|
|
}}
|
|
radius={35} h={35} w={35} onClick={props.onClick}
|
|
>
|
|
<Transition transition={'scale'} mounted={updates || mentionedAffix}>
|
|
{(transitionStyles) => (
|
|
<Box pos={'absolute'}
|
|
h={11}
|
|
w={11}
|
|
right={-3}
|
|
top={-3}
|
|
style={{
|
|
borderRadius: 12,
|
|
...transitionStyles
|
|
}}
|
|
bg={mentionedAffix ? colors.brandColor : colors.error}>
|
|
</Box>
|
|
)}
|
|
</Transition>
|
|
<Flex h={'100%'} w={'100%'} align={'center'} justify={'center'}>
|
|
{!mentionedAffix && <IconArrowDown color={'var(--mantine-color-gray-6)'} size={16} />}
|
|
{mentionedAffix && <IconArrowUp color={'var(--mantine-color-gray-6)'} size={16} />}
|
|
</Flex>
|
|
</Paper>
|
|
)}
|
|
</Transition>
|
|
);
|
|
} |