diff --git a/src/components/FAB/FABGroup.tsx b/src/components/FAB/FABGroup.tsx index d010393975..8efd351882 100644 --- a/src/components/FAB/FABGroup.tsx +++ b/src/components/FAB/FABGroup.tsx @@ -222,6 +222,8 @@ const FABGroup = ({ rippleColor, }: Props) => { const theme = useInternalTheme(themeOverrides); + const { top, bottom, right, left } = useSafeAreaInsets(); + const { current: backdrop } = React.useRef( new Animated.Value(0) ); @@ -229,6 +231,9 @@ const FABGroup = ({ actions.map(() => new Animated.Value(open ? 1 : 0)) ); + const [isClosingAnimationFinished, setIsClosingAnimationFinished] = + React.useState(false); + const [prevActions, setPrevActions] = React.useState< | { icon: IconSource; @@ -247,6 +252,7 @@ const FABGroup = ({ React.useEffect(() => { if (open) { + setIsClosingAnimationFinished(false); Animated.parallel([ Animated.timing(backdrop, { toValue: 1, @@ -280,14 +286,33 @@ const FABGroup = ({ useNativeDriver: true, }) ), - ]).start(); + ]).start(({ finished }) => { + if (finished) { + setIsClosingAnimationFinished(true); + } + }); } }, [open, actions, backdrop, scale, isV3]); const close = () => onStateChange({ open: false }); - const toggle = () => onStateChange({ open: !open }); + const handlePress = (e: GestureResponderEvent) => { + onPress?.(e); + if (!toggleStackOnLongPress || open) { + toggle(); + } + }; + + const handleLongPress = (e: GestureResponderEvent) => { + if (!open || enableLongPressWhenStackOpened) { + onLongPress?.(e); + if (toggleStackOnLongPress) { + toggle(); + } + } + }; + const { labelColor, backdropColor, stackedFABBackgroundColor } = getFABGroupColors({ theme, customBackdropColor }); @@ -325,7 +350,6 @@ const FABGroup = ({ : -8 ); - const { top, bottom, right, left } = useSafeAreaInsets(); const containerPaddings = { paddingBottom: bottom, paddingRight: right, @@ -333,6 +357,10 @@ const FABGroup = ({ paddingTop: top, }; + const actionsContainerVisibility: ViewStyle = { + display: isClosingAnimationFinished ? 'none' : 'flex', + }; + if (actions.length !== prevActions?.length) { animations.current = actions.map( (_, i) => animations.current[i] || new Animated.Value(open ? 1 : 0) @@ -358,7 +386,10 @@ const FABGroup = ({ ]} /> - + {actions.map((it, i) => { const labelTextStyle = { color: it.labelTextColor ?? labelColor, @@ -372,6 +403,11 @@ const FABGroup = ({ : it.label; const size = typeof it.size !== 'undefined' ? it.size : 'small'; + const handleActionPress = (e: GestureResponderEvent) => { + it.onPress(e); + close(); + }; + return ( { - it.onPress(e); - close(); - }} + onPress={handleActionPress} accessibilityHint={it.accessibilityHint} importantForAccessibility="no-hide-descendants" accessibilityElementsHidden={true} @@ -440,10 +473,7 @@ const FABGroup = ({ ]} accessibilityElementsHidden={true} theme={theme} - onPress={(e) => { - it.onPress(e); - close(); - }} + onPress={handleActionPress} importantForAccessibility="no-hide-descendants" testID={it.testID} visible={open} @@ -454,20 +484,8 @@ const FABGroup = ({ })} { - onPress?.(e); - if (!toggleStackOnLongPress || open) { - toggle(); - } - }} - onLongPress={(e) => { - if (!open || enableLongPressWhenStackOpened) { - onLongPress?.(e); - if (toggleStackOnLongPress) { - toggle(); - } - } - }} + onPress={handlePress} + onLongPress={handleLongPress} delayLongPress={delayLongPress} icon={icon} color={colorProp}