@fluentui-react-native/experimental-shimmer 0.8.11 → 0.8.13

package/src/Shimmer.test.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import * as renderer from 'react-test-renderer';
+import { Shimmer } from './Shimmer';
+import { ShimmerCircleElement, ShimmerRectElement } from './Shimmer.types';
+
+// mocks out setTimeout and other timer functions with mock functions, test will fail without this as we're using Animated API
+jest.useFakeTimers();
+
+function shimmerRects(): Array<ShimmerRectElement | ShimmerCircleElement> {
+  return [
+    {
+      type: 'rect',
+      borderRadiusX: 3,
+      borderRadiusY: 3,
+      width: 100,
+      height: 20,
+      x: 90,
+      y: 70,
+    },
+    {
+      type: 'rect',
+      borderRadiusX: 3,
+      borderRadiusY: 3,
+      width: 150,
+      height: 20,
+      x: 90,
+      y: 42,
+    },
+    {
+      type: 'rect',
+      borderRadiusX: 3,
+      borderRadiusY: 3,
+      width: 200,
+      height: 20,
+      x: 90,
+      y: 15,
+    },
+  ];
+}
+
+const style = { width: 300, height: 100 };
+
+describe('Shimmer component tests', () => {
+  it('Shimmer default', () => {
+    const tree = renderer.create(<Shimmer elements={shimmerRects()} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Shimmer with style prop', () => {
+    const tree = renderer.create(<Shimmer elements={shimmerRects()} style={style} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/Shimmer.tsx

@@ -21,8 +21,8 @@ export const Shimmer = compose<ShimmerType>({
     const memoizedShimmerData = useMemo(
       () => ({
         angle: props.angle ? props.angle : tokens['angle'],
-        containerWidth: props?.style['width'] ? props?.style['width'] : '100%',
-        containerHeight: props?.style['height'] ? props?.style['height'] : '100%',
+        containerWidth: props?.style?.['width'] ? props?.style['width'] : '100%',
+        containerHeight: props?.style?.['height'] ? props?.style['height'] : '100%',
         delay: props.delay ? props.delay : tokens['delay'],
         duration: props.duration ? props.duration : tokens['duration'],
         shimmerColor: props.shimmerColor ? props.shimmerColor : tokens['shimmerColor'],
@@ -42,27 +42,22 @@ export const Shimmer = compose<ShimmerType>({
       ],
     );
 
-    const startValue = useRef(new Animated.Value(0)).current;
-
-    /**
-     * 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
+    /* The shimmer animation is implemented using a LinearGradient which travels from left to right.
+     * Different angles are handled by rotating this gradient.
+     * The startValue is used to control the start position of the gradient animation, it is set as -1 to make sure it is starts off the screen for any angle.
+     * Similarly the endValue is set to 2 to make sure the gradient animation exits the entire screen for any angle.
      */
+    const startValue = useRef(new Animated.Value(-1)).current;
     const shimmerAnimation = useCallback(() => {
-      Animated.sequence([
+      Animated.loop(
         Animated.timing(startValue, {
-          toValue: 30,
+          toValue: 2,
           duration: memoizedShimmerData.duration,
           delay: memoizedShimmerData.delay,
           useNativeDriver: true,
         }),
-      ]).start(() => {
-        startValue.setValue(0);
-        shimmerAnimation();
-      });
-    }, [memoizedShimmerData.duration, memoizedShimmerData.delay]);
+      ).start();
+    }, [memoizedShimmerData.delay, memoizedShimmerData.duration]);
 
     useEffect(() => {
       shimmerAnimation();
@@ -101,7 +96,7 @@ export const Shimmer = compose<ShimmerType>({
       return (
         <Slots.root {...mergedProps}>
           <Defs>
-            <AnimatedLinearGradient id="gradient" x1={startValue} y1={memoizedShimmerData.angle} x2="-1" y2="-1">
+            <AnimatedLinearGradient id="gradient" x1={startValue} x2="-1" gradientTransform={`rotate(${memoizedShimmerData.angle})`}>
               <Stop offset="10%" stopColor={memoizedShimmerData.shimmerColor} stopOpacity={memoizedShimmerData.shimmerColorOpacity} />
               <Stop
                 offset="20%"

package/src/Shimmer.types.ts

@@ -140,7 +140,7 @@ export interface ShimmerTokens extends IBackgroundColorTokens {
   shimmerWaveWidth?: number | string;
 }
 
-export interface ShimmerSlotProps extends ShimmerProps {
+export interface ShimmerSlotProps {
   root: SvgProps;
 }
 
@@ -148,7 +148,7 @@ export interface ShimmerProps extends ViewProps, ShimmerTokens {
   /**
    * Shimmer shapes that define the masking effect of the Shimmer control.
    */
-  elements?: Array<ShimmerElementTypes>;
+  elements: Array<ShimmerElementTypes>;
 }
 
 export interface ShimmerType {

package/src/Shimmer.types.win32.ts

@@ -26,7 +26,7 @@ export interface ShimmerWaveProps extends ShimmerTokens {
   viewBoxWidth: number;
 }
 
-export interface ShimmerSlotProps extends ShimmerProps {
+export interface ShimmerSlotProps {
   root: ViewProps;
   clippingMask: ClippingMaskProps;
   shimmerWave: ShimmerWaveProps;

package/src/Shimmer.win32.tsx

@@ -82,10 +82,10 @@ export const Shimmer = compose<ShimmerType>({
   },
 
   useRender: (props: ShimmerProps, useSlots: UseSlots<ShimmerType>) => {
+    const Slots = useSlots(props);
+
     return (rest: ShimmerProps) => {
       const { elements, ...mergedProps } = mergeProps(props, rest);
-      const Slots = useSlots(mergedProps);
-
       /**
        * Generate a clip path from the provided element shapes, with their path parameter strings generated from their corresponding properties.
        * Ideally this would be better possible with functions from the shape elements themselves and not to rely on our own calculations.

package/src/ShimmerTokens.android.ts

@@ -0,0 +1,14 @@
+import { Theme } from '@fluentui-react-native/framework';
+import { ShimmerTokens } from './Shimmer.types';
+import { TokenSettings } from '@fluentui-react-native/use-styling';
+
+export const defaultShimmerTokens: TokenSettings<ShimmerTokens, Theme> = (theme: Theme) =>
+  ({
+    angle: 45,
+    delay: 0,
+    duration: 1000,
+    shimmerColor: theme.colors.neutralStencil1,
+    shimmerColorOpacity: 1,
+    shimmerWaveColor: theme.colors.neutralStencil2,
+    shimmerWaveColorOpacity: 1,
+  } as ShimmerTokens);

package/src/ShimmerTokens.ts

@@ -0,0 +1,15 @@
+import { Theme } from '@fluentui-react-native/framework';
+import { ShimmerTokens } from './Shimmer.types';
+import { TokenSettings } from '@fluentui-react-native/use-styling';
+import { getCurrentAppearance } from '@fluentui-react-native/theming-utils';
+
+export const defaultShimmerTokens: TokenSettings<ShimmerTokens, Theme> = (theme: Theme) =>
+  ({
+    angle: 0,
+    delay: 0,
+    duration: 7000,
+    shimmerColor: getCurrentAppearance(theme.host.appearance, 'light') === 'light' ? '#E1E1E1' : '#404040',
+    shimmerColorOpacity: 1,
+    shimmerWaveColor: getCurrentAppearance(theme.host.appearance, 'light') === 'light' ? 'white' : 'black',
+    shimmerWaveColorOpacity: 1,
+  } as ShimmerTokens);

package/src/ShimmerTokens.win32.ts

@@ -0,0 +1,16 @@
+import { Theme } from '@fluentui-react-native/framework';
+import { ShimmerTokens } from './Shimmer.types';
+import { TokenSettings } from '@fluentui-react-native/use-styling';
+
+export const defaultShimmerTokens: TokenSettings<ShimmerTokens, Theme> = (theme: Theme) =>
+  ({
+    angle: 0,
+    backgroundColor: theme.colors.background,
+    delay: 500,
+    duration: 2000,
+    shimmerColor: theme.colors.bodyFrameDivider,
+    shimmerColorOpacity: 1,
+    shimmerWaveColor: '#E1E1E1',
+    shimmerWaveColorOpacity: 1,
+    shimmerWaveWidth: '100%',
+  } as ShimmerTokens);

package/src/__snapshots__/Shimmer.test.tsx.snap

@@ -0,0 +1,249 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Shimmer component tests Shimmer default 1`] = `
+<RNSVGSvgView
+  accessibilityRole="progressbar"
+  accessible={true}
+  angle={45}
+  bbHeight="100%"
+  bbWidth="100%"
+  delay={0}
+  duration={1000}
+  focusable={false}
+  shimmerColor="#e6e6e6"
+  shimmerColorOpacity={1}
+  shimmerWaveColor="#fafafa"
+  shimmerWaveColorOpacity={1}
+  style={
+    Array [
+      Object {
+        "backgroundColor": "transparent",
+        "borderWidth": 0,
+      },
+      Object {
+        "flex": 0,
+        "height": "100%",
+        "width": "100%",
+      },
+    ]
+  }
+>
+  <RNSVGGroup>
+    <RNSVGDefs>
+      <RNSVGLinearGradient
+        gradient={
+          Array [
+            0.1,
+            -1644826,
+            0.2,
+            -328966,
+            0.3,
+            -1644826,
+          ]
+        }
+        gradientTransform={
+          Array [
+            0.7071067811865476,
+            0.7071067811865475,
+            -0.7071067811865475,
+            0.7071067811865476,
+            0,
+            0,
+          ]
+        }
+        gradientUnits={0}
+        name="gradient"
+        x1={-1}
+        x2="-1"
+        y1="0%"
+        y2="0%"
+      />
+      <RNSVGClipPath
+        name="shimmerView"
+      >
+        <RNSVGRect
+          height={20}
+          rx={3}
+          ry={3}
+          width={100}
+          x={90}
+          y={70}
+        />
+        <RNSVGRect
+          height={20}
+          rx={3}
+          ry={3}
+          width={150}
+          x={90}
+          y={42}
+        />
+        <RNSVGRect
+          height={20}
+          rx={3}
+          ry={3}
+          width={200}
+          x={90}
+          y={15}
+        />
+      </RNSVGClipPath>
+    </RNSVGDefs>
+    <RNSVGGroup
+      matrix={
+        Array [
+          1,
+          0,
+          0,
+          1,
+          0,
+          0,
+        ]
+      }
+    >
+      <RNSVGRect
+        clipPath="shimmerView"
+        fill={
+          Array [
+            1,
+            "gradient",
+          ]
+        }
+        height="100%"
+        propList={
+          Array [
+            "fill",
+          ]
+        }
+        width="100%"
+        x="0"
+        y="0"
+      />
+    </RNSVGGroup>
+  </RNSVGGroup>
+</RNSVGSvgView>
+`;
+
+exports[`Shimmer component tests Shimmer with style prop 1`] = `
+<RNSVGSvgView
+  accessibilityRole="progressbar"
+  accessible={true}
+  angle={45}
+  bbHeight={100}
+  bbWidth={300}
+  delay={0}
+  duration={1000}
+  focusable={false}
+  shimmerColor="#e6e6e6"
+  shimmerColorOpacity={1}
+  shimmerWaveColor="#fafafa"
+  shimmerWaveColorOpacity={1}
+  style={
+    Array [
+      Object {
+        "backgroundColor": "transparent",
+        "borderWidth": 0,
+      },
+      Object {
+        "height": 100,
+        "width": 300,
+      },
+      Object {
+        "flex": 0,
+        "height": 100,
+        "width": 300,
+      },
+    ]
+  }
+>
+  <RNSVGGroup>
+    <RNSVGDefs>
+      <RNSVGLinearGradient
+        gradient={
+          Array [
+            0.1,
+            -1644826,
+            0.2,
+            -328966,
+            0.3,
+            -1644826,
+          ]
+        }
+        gradientTransform={
+          Array [
+            0.7071067811865476,
+            0.7071067811865475,
+            -0.7071067811865475,
+            0.7071067811865476,
+            0,
+            0,
+          ]
+        }
+        gradientUnits={0}
+        name="gradient"
+        x1={-1}
+        x2="-1"
+        y1="0%"
+        y2="0%"
+      />
+      <RNSVGClipPath
+        name="shimmerView"
+      >
+        <RNSVGRect
+          height={20}
+          rx={3}
+          ry={3}
+          width={100}
+          x={90}
+          y={70}
+        />
+        <RNSVGRect
+          height={20}
+          rx={3}
+          ry={3}
+          width={150}
+          x={90}
+          y={42}
+        />
+        <RNSVGRect
+          height={20}
+          rx={3}
+          ry={3}
+          width={200}
+          x={90}
+          y={15}
+        />
+      </RNSVGClipPath>
+    </RNSVGDefs>
+    <RNSVGGroup
+      matrix={
+        Array [
+          1,
+          0,
+          0,
+          1,
+          0,
+          0,
+        ]
+      }
+    >
+      <RNSVGRect
+        clipPath="shimmerView"
+        fill={
+          Array [
+            1,
+            "gradient",
+          ]
+        }
+        height={100}
+        propList={
+          Array [
+            "fill",
+          ]
+        }
+        width={300}
+        x="0"
+        y="0"
+      />
+    </RNSVGGroup>
+  </RNSVGGroup>
+</RNSVGSvgView>
+`;

package/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "extends": "@fluentui-react-native/scripts/tsconfig.json",
   "compilerOptions": {
-    "outDir": "lib"
+    "outDir": "lib",
+    "types": ["node", "jest"]
   },
   "include": ["src"]
 }