fix(animated-fab): label styling (web) (#4567)

* fix(animated-fab): label styling (web)

* fix(animated-fab): add canvasContext caching (web)

Author: BogiKay

src/components/FAB/AnimatedFAB.tsx

@@ -21,7 +21,7 @@ import {
 
 import color from 'color';
 
-import { getCombinedStyles, getFABColors } from './utils';
+import { getCombinedStyles, getFABColors, getLabelSizeWeb } from './utils';
 import { useInternalTheme } from '../../core/theming';
 import type { $Omit, $RemoveChildren, ThemeProp } from '../../types';
 import type { IconSource } from '../Icon';
@@ -227,9 +227,11 @@ const AnimatedFAB = ({
   const theme = useInternalTheme(themeOverrides);
   const uppercase: boolean = uppercaseProp ?? !theme.isV3;
   const isIOS = Platform.OS === 'ios';
+  const isWeb = Platform.OS === 'web';
   const isAnimatedFromRight = animateFrom === 'right';
   const isIconStatic = iconMode === 'static';
   const { isRTL } = I18nManager;
+  const labelRef = React.useRef<HTMLElement | null>(null);
   const { current: visibility } = React.useRef<Animated.Value>(
     new Animated.Value(visible ? 1 : 0)
   );
@@ -239,11 +241,44 @@ const AnimatedFAB = ({
   const { isV3, animation } = theme;
   const { scale } = animation;
 
-  const [textWidth, setTextWidth] = React.useState<number>(0);
-  const [textHeight, setTextHeight] = React.useState<number>(0);
+  const labelSize = isWeb ? getLabelSizeWeb(labelRef) : null;
+  const [textWidth, setTextWidth] = React.useState<number>(
+    labelSize?.width ?? 0
+  );
+  const [textHeight, setTextHeight] = React.useState<number>(
+    labelSize?.height ?? 0
+  );
 
   const borderRadius = SIZE / (isV3 ? 3.5 : 2);
 
+  React.useEffect(() => {
+    if (!isWeb) {
+      return;
+    }
+
+    const updateTextSize = () => {
+      if (labelRef.current) {
+        const labelSize = getLabelSizeWeb(labelRef);
+
+        if (labelSize) {
+          setTextHeight(labelSize.height ?? 0);
+          setTextWidth(labelSize.width ?? 0);
+        }
+      }
+    };
+
+    updateTextSize();
+    window.addEventListener('resize', updateTextSize);
+
+    return () => {
+      if (!isWeb) {
+        return;
+      }
+
+      window.removeEventListener('resize', updateTextSize);
+    };
+  }, [isWeb]);
+
   React.useEffect(() => {
     if (visible) {
       Animated.timing(visibility, {
@@ -470,6 +505,7 @@ const AnimatedFAB = ({
 
       <View pointerEvents="none">
         <AnimatedText
+          ref={isWeb ? labelRef : null}
           variant="labelLarge"
           numberOfLines={1}
           onTextLayout={isIOS ? onTextLayout : undefined}

src/components/FAB/utils.ts

@@ -1,4 +1,11 @@
-import { Animated, ColorValue, I18nManager, ViewStyle } from 'react-native';
+import { MutableRefObject } from 'react';
+import {
+  Animated,
+  ColorValue,
+  I18nManager,
+  Platform,
+  ViewStyle,
+} from 'react-native';
 
 import color from 'color';
 
@@ -428,3 +435,40 @@ export const getExtendedFabStyle = ({
 
   return isV3 ? v3Extended : extended;
 };
+
+let cachedContext: CanvasRenderingContext2D | null = null;
+
+const getCanvasContext = () => {
+  if (cachedContext) {
+    return cachedContext;
+  }
+
+  const canvas = document.createElement('canvas');
+  cachedContext = canvas.getContext('2d');
+
+  return cachedContext;
+};
+
+export const getLabelSizeWeb = (ref: MutableRefObject<HTMLElement | null>) => {
+  if (Platform.OS !== 'web' || ref.current === null) {
+    return null;
+  }
+
+  const canvasContext = getCanvasContext();
+
+  if (!canvasContext) {
+    return null;
+  }
+
+  const elementStyles = window.getComputedStyle(ref.current);
+  canvasContext.font = elementStyles.font;
+
+  const metrics = canvasContext.measureText(ref.current.innerText);
+
+  return {
+    width: metrics.width,
+    height:
+      (metrics.fontBoundingBoxAscent ?? 0) +
+      (metrics.fontBoundingBoxDescent ?? 0),
+  };
+};

src/components/Typography/AnimatedText.tsx

@@ -10,6 +10,7 @@ import {
 import type { VariantProp } from './types';
 import { useInternalTheme } from '../../core/theming';
 import type { ThemeProp } from '../../types';
+import { forwardRef } from '../../utils/forwardRef';
 
 type Props<T> = React.ComponentPropsWithRef<typeof Animated.Text> & {
   /**
@@ -39,12 +40,10 @@ type Props<T> = React.ComponentPropsWithRef<typeof Animated.Text> & {
  *
  * @extends Text props https://reactnative.dev/docs/text#props
  */
-function AnimatedText({
-  style,
-  theme: themeOverrides,
-  variant,
-  ...rest
-}: Props<never>) {
+const AnimatedText = forwardRef(function AnimatedText(
+  { style, theme: themeOverrides, variant, ...rest }: Props<never>,
+  ref
+) {
   const theme = useInternalTheme(themeOverrides);
   const writingDirection = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr';
 
@@ -60,6 +59,7 @@ function AnimatedText({
 
     return (
       <Animated.Text
+        ref={ref}
         {...rest}
         style={[
           font,
@@ -77,6 +77,7 @@ function AnimatedText({
     };
     return (
       <Animated.Text
+        ref={ref}
         {...rest}
         style={[
           styles.text,
@@ -89,7 +90,7 @@ function AnimatedText({
       />
     );
   }
-}
+});
 
 const styles = StyleSheet.create({
   text: {