@momo-kits/foundation 0.169.3 → 0.169.4-beta.1

package/Layout/FloatingButton.tsx

@@ -13,7 +13,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
 import { ApplicationContext } from '../Context';
-import { Colors } from '../Consts';
+import { Colors, Spacing } from '../Consts';
 import { Icon } from '../Icon';
 import { useScaleSize, exportFontFamily } from '../Text';
 import { type AnimatedCompatValue } from '../Application/utils';
@@ -50,8 +50,11 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   const labelFontFamily = exportFontFamily('bold');
   const maxWidth = useSharedValue(0);
   const minWidth = size === 'small' ? 36 : 48;
+  const iconSize = size === 'small' ? 12 : 24;
   const opacityAnimated = useSharedValue(0);
   const widthAnimated = useSharedValue<number | null>(null);
+  const paddingLeftAnimated = useSharedValue(Spacing.M);
+  const collapsedPaddingLeft = useSharedValue(Spacing.M);
   const lastOffset = useSharedValue(0);
   const lastDirection = useSharedValue<string | null>(null);
   const [showText, setShowText] = useState(true);
@@ -73,6 +76,9 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
           lastDirection.value = direction;
           if (direction === 'down') {
             opacityAnimated.value = withTiming(0, { duration: 100 });
+            paddingLeftAnimated.value = withTiming(collapsedPaddingLeft.value, {
+              duration: 100,
+            });
             widthAnimated.value = withTiming(
               minWidth,
               { duration: 100 },
@@ -82,6 +88,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
             );
           } else {
             opacityAnimated.value = withTiming(1, { duration: 100 });
+            paddingLeftAnimated.value = withTiming(Spacing.M, { duration: 100 });
             widthAnimated.value = withTiming(
               maxWidth.value,
               { duration: 100 },
@@ -98,6 +105,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
 
   const containerStyle = useAnimatedStyle(() => ({
     width: widthAnimated.value ?? undefined,
+    paddingLeft: paddingLeftAnimated.value,
   }));
 
   const labelStyle = useAnimatedStyle(() => ({
@@ -107,8 +115,14 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   const handleLayout = (event: LayoutChangeEvent) => {
     const layout = event.nativeEvent.layout;
     if (widthAnimated.value != null) return;
-    maxWidth.value = layout.width;
-    widthAnimated.value = layout.width;
+    // layout is already scaled: rescale by height/minWidth so `width` isn't scaled twice
+    const expandedWidth = (layout.width * minWidth) / layout.height;
+    maxWidth.value = expandedWidth;
+    widthAnimated.value = expandedWidth;
+    // collapsed it is a circle as wide as it is tall: center the icon from the
+    // rendered height so it stays centered when sizes are scaled but padding is not
+    collapsedPaddingLeft.value =
+      (layout.height - (layout.height * iconSize) / minWidth) / 2;
   };
 
   if (renderComponent) {
@@ -140,11 +154,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
       ]}
     >
       <TouchableOpacity style={styles.content} onPress={onPress}>
-        <Icon
-          source={icon}
-          size={size === 'small' ? 12 : 24}
-          color={iconColor}
-        />
+        <Icon source={icon} size={iconSize} color={iconColor} />
         {showText && !!label && (
           <Animated.Text
             allowFontScaling={false}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.169.3",
+    "version": "0.169.4-beta.1",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},