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

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"]
 }