Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update CollapseDelete.tsx

This commit is contained in:
Nate Kelley 2025-04-17 13:25:57 -06:00
parent 4abfbbc223
commit f99f2bddab
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
1 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/Common/CollapseDelete.tsx
View File

@ -1,4 +1,4 @@
import React, { useMemo, useState } from 'react'; import React, { useState } from 'react';
import { AnimatePresence, motion } from 'framer-motion'; import { AnimatePresence, motion } from 'framer-motion';
import { ChevronRight, Trash } from '@/components/ui/icons'; import { ChevronRight, Trash } from '@/components/ui/icons';
import { useMemoizedFn } from '@/hooks'; import { useMemoizedFn } from '@/hooks';
@ -135,13 +135,13 @@ const DropdownIcon: React.FC<{
onClickDelete?: () => void; onClickDelete?: () => void;
isDragging?: boolean; isDragging?: boolean;
}> = React.memo(({ open, onToggleDropdown, onClickDelete, isDragging }) => { }> = React.memo(({ open, onToggleDropdown, onClickDelete, isDragging }) => {
const memoizedAnimation = useMemo(() => { // const memoizedAnimation = useMemo(() => {
return { // return {
initial: { rotate: 0 }, // initial: { rotate: 0 },
animate: { rotate: open ? 90 : 0 }, // animate: { rotate: open ? 90 : 0 },
transition: { duration: ANIMATION_DURATION } // transition: { duration: ANIMATION_DURATION }
}; // };
}, [open]); // }, [open]);
const onClickToggleDropdown = useMemoizedFn((e: React.MouseEvent<HTMLElement>) => { const onClickToggleDropdown = useMemoizedFn((e: React.MouseEvent<HTMLElement>) => {
e.stopPropagation(); e.stopPropagation();
@ -184,11 +184,14 @@ const DropdownIcon: React.FC<{
variant="ghost" variant="ghost"
onClick={onClickToggleDropdown} onClick={onClickToggleDropdown}
prefix={ prefix={
<motion.div <div
className={cn('flex items-center justify-center', isDragging && 'hidden!')} className={cn(
{...memoizedAnimation}> 'flex items-center justify-center transition-transform duration-200',
isDragging && 'hidden!',
open && 'rotate-90'
)}>
<ChevronRight /> <ChevronRight />
</motion.div> </div>
}></Button> }></Button>
</div> </div>
); );