@fluentui-react-native/experimental-activity-indicator 0.3.26 → 0.5.1

package/src/ActivityIndicator.mobile.tsx

@@ -0,0 +1,119 @@
+/** @jsx withSlots */
+import { useRef, useEffect, useCallback } from 'react';
+import { Animated, Easing, View } from 'react-native';
+import { Svg, Path } from 'react-native-svg';
+import { compose, mergeProps, withSlots, UseSlots, buildUseStyling } from '@fluentui-react-native/framework';
+import { activityIndicatorName, ActivityIndicatorProps, FluentActivityIndicatorType } from './ActivityIndicator.types';
+import { diameterSizeMap, lineThicknessSizeMap, stylingSettings } from './ActivityIndicator.styling';
+
+const getActivityIndicatorPath = (diameter: number, width: number, color: string) => {
+  const start = {
+    x: width / 2,
+    y: diameter / 2,
+  };
+  const innerRadius = diameter / 2 - width / 2;
+  const path = `M${start.x} ${start.y} a${innerRadius} ${innerRadius} 0 1 1 ${innerRadius} ${innerRadius}`;
+
+  return <Path d={path} stroke={color} strokeWidth={width} strokeLinecap="round" />;
+};
+
+export const AnimatedSvg = Animated.createAnimatedComponent(Svg);
+const useStyling = buildUseStyling(stylingSettings);
+export const ActivityIndicator = compose<FluentActivityIndicatorType>({
+  displayName: activityIndicatorName,
+  ...stylingSettings,
+  slots: {
+    root: View,
+    svg: AnimatedSvg,
+  },
+  render: (props: ActivityIndicatorProps, useSlots: UseSlots<FluentActivityIndicatorType>) => {
+    const Slots = useSlots(props);
+    const slotProps = useStyling(props);
+
+    const animating = props.animating != undefined ? props.animating : true;
+    const hidesWhenStopped = props.hidesWhenStopped != undefined ? props.hidesWhenStopped : true;
+    // React Native ActivityIndicator still takes up space when hidden, so to perfectly match would use opacity
+    // hiding opacity makes the screen reader on iOS and Android skip over it
+    const hideOpacity = animating == false && hidesWhenStopped == true ? 0 : 1;
+
+    const rotationAngle = useRef(new Animated.Value(0)).current;
+
+    const rotationAnimation = useRef<Animated.CompositeAnimation | undefined>(undefined);
+
+    /**
+     * https://github.com/facebook/react-native/pull/29585
+     * For Animated.loop() to work with the native driver, React Native needs this fix.
+     * It's only available in React Native 0.66+, and React Native macOS 0.62+
+     * To workaround this, let's just rerun the loop everytime the animation finishes
+     */
+    const startRotation = useCallback(() => {
+      if (rotationAnimation.current) {
+        rotationAngle.setValue(0);
+        rotationAnimation.current.reset();
+        rotationAnimation.current.start((result: Animated.EndResult) => {
+          if (result.finished) {
+            startRotation();
+          }
+        });
+      }
+    }, [rotationAngle, animating]);
+
+    const stopRotation = () => {
+      if (rotationAnimation.current) {
+        rotationAnimation.current.stop();
+      }
+    };
+
+    useEffect(() => {
+      if (rotationAnimation.current === undefined) {
+        rotationAnimation.current = Animated.sequence([
+          Animated.timing(rotationAngle, {
+            toValue: 359,
+            duration: 750,
+            useNativeDriver: true,
+            easing: Easing.linear,
+          }),
+        ]);
+      }
+
+      if (animating) {
+        startRotation();
+      } else {
+        stopRotation();
+      }
+    }, [animating, hidesWhenStopped, rotationAngle]);
+
+    const interpolateSpin = rotationAngle.interpolate({
+      inputRange: [0, 359],
+      outputRange: ['0deg', '359deg'],
+    });
+
+    const path = getActivityIndicatorPath(
+      diameterSizeMap[slotProps.root.size],
+      lineThicknessSizeMap[slotProps.root.lineThickness],
+      slotProps.root.activityIndicatorColor,
+    );
+
+    // perspective is needed for animations to work on Android. See https://reactnative.dev/docs/animations#bear-in-mind
+    const animatedSvgProps = {
+      style: {
+        transform: [{ rotateZ: interpolateSpin }, { perspective: 10 }],
+      },
+    };
+
+    const otherRootProps = {
+      style: {
+        opacity: hideOpacity,
+      },
+      accessibilityState: { busy: animating },
+    };
+    return (rest: ActivityIndicatorProps) => {
+      const { ...mergedProps } = mergeProps(props, rest, otherRootProps);
+      return (
+        <Slots.root {...mergedProps}>
+          <Slots.svg {...animatedSvgProps}>{path}</Slots.svg>
+        </Slots.root>
+      );
+    };
+  },
+});

package/src/ActivityIndicator.styling.tsx

@@ -1,11 +1,14 @@
 import { UseStylingOptions, buildProps } from '@fluentui-react-native/framework';
-import { Appearance } from 'react-native';
+import { ActivityIndicatorProps as CoreActivityIndicatorProps, Appearance } from 'react-native';
 import {
   activityIndicatorName,
   ActivityIndicatorProps,
-  ActivityIndicatorSlotProps,
+  FluentActivityIndicatorSlotProps,
   ActivityIndicatorTokens,
+  CoreActivityIndicatorSlotProps,
+  ActivityIndicatorSize,
 } from './ActivityIndicator.types';
+import assertNever from 'assert-never';
 
 export const diameterSizeMap: { [key: string]: number } = {
   xSmall: 12,
@@ -22,7 +25,29 @@ export const lineThicknessSizeMap: { [key: string]: number } = {
   xLarge: 4,
 };
 
-export const stylingSettings: UseStylingOptions<ActivityIndicatorProps, ActivityIndicatorSlotProps, ActivityIndicatorTokens> = {
+// Size coversion ramp from the Fluent ActivityIndicator size to the RN ActivityIndicator.
+export function coreSizeFromFluentSize(fluentSize: ActivityIndicatorSize): CoreActivityIndicatorProps['size'] {
+  if (typeof fluentSize === 'undefined') {
+    return fluentSize;
+  }
+
+  switch (fluentSize) {
+    case 'xSmall':
+      return 'small';
+    case 'small':
+      return 'small';
+    case 'medium':
+      return 'small';
+    case 'large':
+      return 'large';
+    case 'xLarge':
+      return 'large';
+    default:
+      assertNever(fluentSize);
+  }
+}
+
+export const stylingSettings: UseStylingOptions<ActivityIndicatorProps, FluentActivityIndicatorSlotProps, ActivityIndicatorTokens> = {
   tokens: [
     () => ({
       activityIndicatorColor: Appearance.getColorScheme() === 'light' ? '#BDBDBD' : '#666666',
@@ -56,3 +81,23 @@ export const stylingSettings: UseStylingOptions<ActivityIndicatorProps, Activity
     ),
   },
 };
+
+// Minimal styling settings for the RN Core ActivityIndicator
+export const coreStylingSettings: UseStylingOptions<ActivityIndicatorProps, CoreActivityIndicatorSlotProps, ActivityIndicatorTokens> = {
+  tokens: [
+    () => ({
+      size: 'small',
+    }),
+    activityIndicatorName,
+  ],
+  tokensThatAreAlsoProps: 'all',
+  slotProps: {
+    root: buildProps(
+      (tokens: ActivityIndicatorTokens) => ({
+        color: tokens.activityIndicatorColor,
+        ...(tokens.size && { size: coreSizeFromFluentSize(tokens.size) }), // Only pass in the prop if defined
+      }),
+      ['activityIndicatorColor', 'size'],
+    ),
+  },
+};

package/src/ActivityIndicator.tsx

@@ -1,89 +1,3 @@
-/** @jsx withSlots */
-import { useRef, useEffect } from 'react';
-import { Animated, Easing, View } from 'react-native';
-import { Svg, Path } from 'react-native-svg';
-import { compose, mergeProps, withSlots, UseSlots, buildUseStyling } from '@fluentui-react-native/framework';
-import { activityIndicatorName, ActivityIndicatorProps, ActivityIndicatorType } from './ActivityIndicator.types';
-import { diameterSizeMap, lineThicknessSizeMap, stylingSettings } from './ActivityIndicator.styling';
-
-const getActivityIndicatorPath = (diameter: number, width: number, color: string) => {
-  const start = {
-    x: width / 2,
-    y: diameter / 2,
-  };
-  const innerRadius = diameter / 2 - width / 2;
-  const path = `M${start.x} ${start.y} a${innerRadius} ${innerRadius} 0 1 1 ${innerRadius} ${innerRadius}`;
-
-  return <Path d={path} stroke={color} strokeWidth={width} strokeLinecap="round" />;
-};
-
-export const AnimatedSvg = Animated.createAnimatedComponent(Svg);
-const useStyling = buildUseStyling(stylingSettings);
-export const ActivityIndicator = compose<ActivityIndicatorType>({
-  displayName: activityIndicatorName,
-  ...stylingSettings,
-  slots: {
-    root: View,
-    svg: AnimatedSvg,
-  },
-  render: (props: ActivityIndicatorProps, useSlots: UseSlots<ActivityIndicatorType>) => {
-    const Slots = useSlots(props);
-    const slotProps = useStyling(props);
-
-    const animating = props.animating != undefined ? props.animating : true;
-    const hidesWhenStopped = props.hidesWhenStopped != undefined ? props.hidesWhenStopped : true;
-    // React Native ActivityIndicator still takes up space when hidden, so to perfectly match would use opacity
-    // hiding opacity makes the screen reader on iOS and Android skip over it
-    const hideOpacity = animating == false && hidesWhenStopped == true ? 0 : 1;
-
-    const spinAnimation = useRef(new Animated.Value(0)).current;
-    useEffect(() => {
-      if (animating) {
-        Animated.loop(
-          Animated.sequence([
-            Animated.timing(spinAnimation, {
-              toValue: 359,
-              duration: 750,
-              useNativeDriver: false,
-              easing: Easing.linear,
-            }),
-          ]),
-        ).start();
-      } else {
-        spinAnimation.stopAnimation();
-      }
-    });
-    const interpolateSpin = spinAnimation.interpolate({
-      inputRange: [0, 359],
-      outputRange: ['0deg', '359deg'],
-    });
-
-    const path = getActivityIndicatorPath(
-      diameterSizeMap[slotProps.root.size],
-      lineThicknessSizeMap[slotProps.root.lineThickness],
-      slotProps.root.activityIndicatorColor,
-    );
-
-    // perspective is needed for animations to work on Android. See https://reactnative.dev/docs/animations#bear-in-mind
-    const animatedSvgProps = {
-      style: {
-        transform: [{ rotateZ: interpolateSpin }, { perspective: 10 }],
-      },
-    };
-
-    const otherRootProps = {
-      style: {
-        opacity: hideOpacity,
-      },
-      accessibilityState: { busy: animating },
-    };
-    return (rest: ActivityIndicatorProps) => {
-      const { ...mergedProps } = mergeProps(props, rest, otherRootProps);
-      return (
-        <Slots.root {...mergedProps}>
-          <Slots.svg {...animatedSvgProps}>{path}</Slots.svg>
-        </Slots.root>
-      );
-    };
-  },
-});
+import { ActivityIndicator } from './CoreActivityIndicator';
+export { ActivityIndicator } from './CoreActivityIndicator';
+export default ActivityIndicator;

package/src/ActivityIndicator.types.tsx

@@ -1,9 +1,9 @@
-import { Animated, ViewProps } from 'react-native';
+import { Animated, ActivityIndicatorProps as CoreActivityIndicatorProps } from 'react-native';
 import { SvgProps } from 'react-native-svg';
 
 export const activityIndicatorName = 'ActivityIndicator';
 /**
- * Specifies the possible sizes of the ActivityIndicator
+ * Specifies the possible sizes of the ActivityIndicator.
  */
 export type ActivityIndicatorSize = 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge';
 
@@ -25,12 +25,7 @@ export interface ActivityIndicatorTokens {
   size?: ActivityIndicatorSize;
 }
 
-export interface ActivityIndicatorSlotProps {
-  root: ViewProps & ActivityIndicatorTokens;
-  svg: Animated.AnimatedProps<SvgProps>;
-}
-
-export interface ActivityIndicatorProps extends ActivityIndicatorTokens, ViewProps {
+export interface ActivityIndicatorProps extends ActivityIndicatorTokens, Omit<CoreActivityIndicatorProps, 'size'> {
   /**
    * ActivityIndicator animating or not
    * @defaultValue 'true'
@@ -43,8 +38,22 @@ export interface ActivityIndicatorProps extends ActivityIndicatorTokens, ViewPro
   hidesWhenStopped?: boolean;
 }
 
-export interface ActivityIndicatorType {
+export interface FluentActivityIndicatorSlotProps {
+  root: ActivityIndicatorProps;
+  svg: Animated.AnimatedProps<SvgProps>;
+}
+export interface FluentActivityIndicatorType {
+  props: ActivityIndicatorProps;
+  slotProps: FluentActivityIndicatorSlotProps;
+  tokens: ActivityIndicatorTokens;
+}
+
+export interface CoreActivityIndicatorSlotProps {
+  root: CoreActivityIndicatorProps;
+}
+
+export interface CoreActivityIndicatorType {
   props: ActivityIndicatorProps;
-  slotProps: ActivityIndicatorSlotProps;
+  slotProps: CoreActivityIndicatorSlotProps;
   tokens: ActivityIndicatorTokens;
 }

package/src/CoreActivityIndicator.tsx

@@ -0,0 +1,22 @@
+/** @jsx withSlots */
+
+import { ActivityIndicator as CoreActivityIndicator } from 'react-native';
+import { activityIndicatorName, CoreActivityIndicatorType, ActivityIndicatorProps } from './ActivityIndicator.types';
+import { coreStylingSettings } from './ActivityIndicator.styling';
+import { compose, withSlots, UseSlots } from '@fluentui-react-native/framework';
+
+/**
+ * Wrapper around React Native Core's ActivityIndicator for platforms we do not
+ * have a custom FluentUI React Native ActivityIndicator defined.
+ */
+export const ActivityIndicator = compose<CoreActivityIndicatorType>({
+  displayName: activityIndicatorName,
+  ...coreStylingSettings,
+  slots: {
+    root: CoreActivityIndicator,
+  },
+  render: (props: ActivityIndicatorProps, useSlots: UseSlots<CoreActivityIndicatorType>) => {
+    const Slots = useSlots(props);
+    return () => <Slots.root />;
+  },
+});