hax/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-12-17 08:54:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: replace the animation on button

Browse source
This commit is contained in:
MAZE 2024-04-26 12:40:04 +03:30
parent 3b0c22968e
commit 8307657628
1 changed files with 27 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/components/sounds/sounds.tsx
View file

@ -20,6 +20,8 @@ export function Sounds({ functional, id, sounds }: SoundsProps) {
const [showAll, setShowAll] = useLocalStorage(`${id}-show-more`, false); const [showAll, setShowAll] = useLocalStorage(`${id}-show-more`, false);
const [clickedMore, setClickedMore] = useState(false); const [clickedMore, setClickedMore] = useState(false);
const [isAnimating, setIsAnimating] = useState(false);
const firstNewSound = useRef<HTMLDivElement>(null); const firstNewSound = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
@ -30,7 +32,6 @@ export function Sounds({ functional, id, sounds }: SoundsProps) {
}, [showAll, clickedMore]); }, [showAll, clickedMore]);
const showMoreButton = useRef<HTMLButtonElement>(null); const showMoreButton = useRef<HTMLButtonElement>(null);
const [exitComplete, setExitComplete] = useState(false);
const [hiddenSelections, setHiddenSelections] = useState<{ const [hiddenSelections, setHiddenSelections] = useState<{
[key: string]: boolean; [key: string]: boolean;
@ -57,8 +58,10 @@ export function Sounds({ functional, id, sounds }: SoundsProps) {
}, []); }, []);
const toggleMore = () => { const toggleMore = () => {
setShowAll(prev => !prev); if (!isAnimating) {
setClickedMore(true); setShowAll(prev => !prev);
setClickedMore(true);
}
}; };
const variants = mix(fade(), scale(0.9)); const variants = mix(fade(), scale(0.9));
@ -85,34 +88,28 @@ export function Sounds({ functional, id, sounds }: SoundsProps) {
</div> </div>
{sounds.length > 6 && ( {sounds.length > 6 && (
<AnimatePresence <button
initial={false} ref={showMoreButton}
mode="wait" className={cn(
onExitComplete={() => setExitComplete(true)} styles.button,
hasHiddenSelection && !showAll && styles.active,
)}
onClick={toggleMore}
> >
<motion.button <AnimatePresence initial={false} mode="wait">
animate="show" <motion.span
exit="hidden" animate="show"
initial="hidden" exit="hidden"
key={showAll ? `${id}-show-less` : `${id}-show-more`} initial="hidden"
ref={showMoreButton} key={showAll ? `${id}-show-less` : `${id}-show-more`}
transition={{ duration: 0.2 }} variants={variants}
variants={variants} onAnimationComplete={() => setIsAnimating(false)}
className={cn( onAnimationStart={() => setIsAnimating(true)}
styles.button, >
hasHiddenSelection && !showAll && styles.active, {showAll ? 'Show Less' : 'Show More'}
)} </motion.span>
onClick={toggleMore} </AnimatePresence>
onAnimationComplete={() => { </button>
if (!showAll && exitComplete) {
setExitComplete(false);
showMoreButton.current?.focus();
}
}}
>
{showAll ? 'Show Less' : 'Show More'}
</motion.button>
</AnimatePresence>
)} )}
</div> </div>
); );