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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (85) hide show
  1. package/CHANGELOG.json +78 -1
  2. package/CHANGELOG.md +22 -2
  3. package/SPEC.md +324 -0
  4. package/assets/dark_shimmer_android.png +0 -0
  5. package/assets/dark_shimmer_win32.png +0 -0
  6. package/assets/light_shimmer_android.png +0 -0
  7. package/assets/light_shimmer_win32.png +0 -0
  8. package/jest.config.js +2 -0
  9. package/lib/Shimmer.d.ts.map +1 -1
  10. package/lib/Shimmer.js +27 -30
  11. package/lib/Shimmer.js.map +1 -1
  12. package/lib/Shimmer.styling.d.ts.map +1 -1
  13. package/lib/Shimmer.styling.js +5 -16
  14. package/lib/Shimmer.styling.js.map +1 -1
  15. package/lib/Shimmer.styling.win32.d.ts +1 -2
  16. package/lib/Shimmer.styling.win32.d.ts.map +1 -1
  17. package/lib/Shimmer.styling.win32.js +1 -13
  18. package/lib/Shimmer.styling.win32.js.map +1 -1
  19. package/lib/Shimmer.test.d.ts +2 -0
  20. package/lib/Shimmer.test.d.ts.map +1 -0
  21. package/lib/Shimmer.test.js +48 -0
  22. package/lib/Shimmer.test.js.map +1 -0
  23. package/lib/Shimmer.types.d.ts +22 -10
  24. package/lib/Shimmer.types.d.ts.map +1 -1
  25. package/lib/Shimmer.types.win32.d.ts +1 -1
  26. package/lib/Shimmer.types.win32.d.ts.map +1 -1
  27. package/lib/Shimmer.win32.js +1 -1
  28. package/lib/Shimmer.win32.js.map +1 -1
  29. package/lib/ShimmerTokens.android.d.ts +5 -0
  30. package/lib/ShimmerTokens.android.d.ts.map +1 -0
  31. package/lib/ShimmerTokens.android.js +12 -0
  32. package/lib/ShimmerTokens.android.js.map +1 -0
  33. package/lib/ShimmerTokens.d.ts +5 -0
  34. package/lib/ShimmerTokens.d.ts.map +1 -0
  35. package/lib/ShimmerTokens.js +13 -0
  36. package/lib/ShimmerTokens.js.map +1 -0
  37. package/lib/ShimmerTokens.win32.d.ts +5 -0
  38. package/lib/ShimmerTokens.win32.d.ts.map +1 -0
  39. package/lib/ShimmerTokens.win32.js +14 -0
  40. package/lib/ShimmerTokens.win32.js.map +1 -0
  41. package/lib-commonjs/Shimmer.d.ts.map +1 -1
  42. package/lib-commonjs/Shimmer.js +27 -30
  43. package/lib-commonjs/Shimmer.js.map +1 -1
  44. package/lib-commonjs/Shimmer.styling.d.ts.map +1 -1
  45. package/lib-commonjs/Shimmer.styling.js +5 -16
  46. package/lib-commonjs/Shimmer.styling.js.map +1 -1
  47. package/lib-commonjs/Shimmer.styling.win32.d.ts +1 -2
  48. package/lib-commonjs/Shimmer.styling.win32.d.ts.map +1 -1
  49. package/lib-commonjs/Shimmer.styling.win32.js +3 -16
  50. package/lib-commonjs/Shimmer.styling.win32.js.map +1 -1
  51. package/lib-commonjs/Shimmer.test.d.ts +2 -0
  52. package/lib-commonjs/Shimmer.test.d.ts.map +1 -0
  53. package/lib-commonjs/Shimmer.test.js +69 -0
  54. package/lib-commonjs/Shimmer.test.js.map +1 -0
  55. package/lib-commonjs/Shimmer.types.d.ts +22 -10
  56. package/lib-commonjs/Shimmer.types.d.ts.map +1 -1
  57. package/lib-commonjs/Shimmer.types.win32.d.ts +1 -1
  58. package/lib-commonjs/Shimmer.types.win32.d.ts.map +1 -1
  59. package/lib-commonjs/Shimmer.win32.js +1 -1
  60. package/lib-commonjs/Shimmer.win32.js.map +1 -1
  61. package/lib-commonjs/ShimmerTokens.android.d.ts +5 -0
  62. package/lib-commonjs/ShimmerTokens.android.d.ts.map +1 -0
  63. package/lib-commonjs/ShimmerTokens.android.js +16 -0
  64. package/lib-commonjs/ShimmerTokens.android.js.map +1 -0
  65. package/lib-commonjs/ShimmerTokens.d.ts +5 -0
  66. package/lib-commonjs/ShimmerTokens.d.ts.map +1 -0
  67. package/lib-commonjs/ShimmerTokens.js +17 -0
  68. package/lib-commonjs/ShimmerTokens.js.map +1 -0
  69. package/lib-commonjs/ShimmerTokens.win32.d.ts +5 -0
  70. package/lib-commonjs/ShimmerTokens.win32.d.ts.map +1 -0
  71. package/lib-commonjs/ShimmerTokens.win32.js +18 -0
  72. package/lib-commonjs/ShimmerTokens.win32.js.map +1 -0
  73. package/package.json +9 -3
  74. package/src/Shimmer.styling.ts +6 -17
  75. package/src/Shimmer.styling.win32.ts +2 -14
  76. package/src/Shimmer.test.tsx +53 -0
  77. package/src/Shimmer.tsx +12 -17
  78. package/src/Shimmer.types.ts +22 -10
  79. package/src/Shimmer.types.win32.ts +1 -1
  80. package/src/Shimmer.win32.tsx +2 -2
  81. package/src/ShimmerTokens.android.ts +14 -0
  82. package/src/ShimmerTokens.ts +15 -0
  83. package/src/ShimmerTokens.win32.ts +16 -0
  84. package/src/__snapshots__/Shimmer.test.tsx.snap +249 -0
  85. package/tsconfig.json +2 -1
package/CHANGELOG.json CHANGED
@@ -2,7 +2,84 @@
2
2
  "name": "@fluentui-react-native/experimental-shimmer",
3
3
  "entries": [
4
4
  {
5
- "date": "Fri, 20 Jan 2023 18:04:28 GMT",
5
+ "date": "Mon, 30 Jan 2023 07:10:00 GMT",
6
+ "tag": "@fluentui-react-native/experimental-shimmer_v0.8.14",
7
+ "version": "0.8.14",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "beachball",
12
+ "package": "@fluentui-react-native/experimental-shimmer",
13
+ "comment": "Bump @fluentui-react-native/framework to v0.8.37",
14
+ "commit": "f6f403b2efe86a229448a618b043601ceefd9a5f"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui-react-native/experimental-shimmer",
19
+ "comment": "Bump @fluentui-react-native/tokens to v0.20.6",
20
+ "commit": "f6f403b2efe86a229448a618b043601ceefd9a5f"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui-react-native/experimental-shimmer",
25
+ "comment": "Bump @fluentui-react-native/theming-utils to v0.23.1",
26
+ "commit": "f6f403b2efe86a229448a618b043601ceefd9a5f"
27
+ }
28
+ ]
29
+ }
30
+ },
31
+ {
32
+ "date": "Fri, 27 Jan 2023 18:54:22 GMT",
33
+ "tag": "@fluentui-react-native/experimental-shimmer_v0.8.13",
34
+ "version": "0.8.13",
35
+ "comments": {
36
+ "none": [
37
+ {
38
+ "author": "ayushsinghs@yahoo.in",
39
+ "package": "@fluentui-react-native/experimental-shimmer",
40
+ "commit": "939db0b8e93cc3d172744481f070dd15169de2d9",
41
+ "comment": "Update Shimmer docs"
42
+ }
43
+ ]
44
+ }
45
+ },
46
+ {
47
+ "date": "Wed, 25 Jan 2023 21:31:18 GMT",
48
+ "tag": "@fluentui-react-native/experimental-shimmer_v0.8.13",
49
+ "version": "0.8.13",
50
+ "comments": {
51
+ "none": [
52
+ {
53
+ "author": "ayushsinghs@yahoo.in",
54
+ "package": "@fluentui-react-native/experimental-shimmer",
55
+ "commit": "59844a6c45d5e48c4feb3650e3f4599ee4e9ad72",
56
+ "comment": "Separate shimmer tokens into file"
57
+ }
58
+ ],
59
+ "patch": [
60
+ {
61
+ "author": "beachball",
62
+ "package": "@fluentui-react-native/experimental-shimmer",
63
+ "comment": "Bump @fluentui-react-native/framework to v0.8.36",
64
+ "commit": "391f3d691e286300dfad37cad539bed54d4436b4"
65
+ },
66
+ {
67
+ "author": "beachball",
68
+ "package": "@fluentui-react-native/experimental-shimmer",
69
+ "comment": "Bump @fluentui-react-native/tokens to v0.20.5",
70
+ "commit": "391f3d691e286300dfad37cad539bed54d4436b4"
71
+ },
72
+ {
73
+ "author": "beachball",
74
+ "package": "@fluentui-react-native/experimental-shimmer",
75
+ "comment": "Bump @fluentui-react-native/theming-utils to v0.23.0",
76
+ "commit": "391f3d691e286300dfad37cad539bed54d4436b4"
77
+ }
78
+ ]
79
+ }
80
+ },
81
+ {
82
+ "date": "Fri, 20 Jan 2023 18:06:46 GMT",
6
83
  "tag": "@fluentui-react-native/experimental-shimmer_v0.8.12",
7
84
  "version": "0.8.12",
8
85
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,32 @@
1
1
  # Change Log - @fluentui-react-native/experimental-shimmer
2
2
 
3
- This log was last generated on Fri, 20 Jan 2023 18:04:28 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 30 Jan 2023 07:10:00 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## 0.8.14
8
+
9
+ Mon, 30 Jan 2023 07:10:00 GMT
10
+
11
+ ### Patches
12
+
13
+ - Bump @fluentui-react-native/framework to v0.8.37
14
+ - Bump @fluentui-react-native/tokens to v0.20.6
15
+ - Bump @fluentui-react-native/theming-utils to v0.23.1
16
+
17
+ ## 0.8.13
18
+
19
+ Wed, 25 Jan 2023 21:31:18 GMT
20
+
21
+ ### Patches
22
+
23
+ - Bump @fluentui-react-native/framework to v0.8.36
24
+ - Bump @fluentui-react-native/tokens to v0.20.5
25
+ - Bump @fluentui-react-native/theming-utils to v0.23.0
26
+
7
27
  ## 0.8.12
8
28
 
9
- Fri, 20 Jan 2023 18:04:28 GMT
29
+ Fri, 20 Jan 2023 18:06:46 GMT
10
30
 
11
31
  ### Patches
12
32
 
package/SPEC.md ADDED
@@ -0,0 +1,324 @@
1
+ # Shimmer
2
+
3
+ ## Background
4
+
5
+ The `Shimmer` component is a temporary animation placeholder for when a service call takes time to return data and we don't want to block rendering the rest of the UI.
6
+
7
+ Many a time, applications must wait for content to load or perform lengthy data processing operations. During these times, it is vital to show the user that the application isn't stalled. Progress indicators like `Shimmer` are used in these cases.
8
+
9
+ ## Requirements
10
+
11
+ To work with [FURN's theming](../../../docs/pages/Theming/Basics.md), the `Shimmer` requires the use of `ThemeProvider` from `@fluentui-react-native/theme`.
12
+
13
+ Please see [this page](../../../docs/pages/Guides/UpdateThemeProvider.md) for information on updating your `ThemeProvider` if you are already using the older version from `@uifabricshared/theming-react-native`.
14
+
15
+ ## Sample Code
16
+
17
+ Basic examples:
18
+
19
+ ```jsx
20
+ function shimmerRects(): Array<ShimmerRectElement | ShimmerCircleElement> {
21
+ return [
22
+ {
23
+ type: 'rect',
24
+ borderRadiusX: 3,
25
+ borderRadiusY: 3,
26
+ width: 100,
27
+ height: 20,
28
+ x: 90,
29
+ y: 70,
30
+ },
31
+ {
32
+ type: 'rect',
33
+ borderRadiusX: 3,
34
+ borderRadiusY: 3,
35
+ width: 150,
36
+ height: 20,
37
+ x: 90,
38
+ y: 42,
39
+ },
40
+ {
41
+ type: 'rect',
42
+ borderRadiusX: 3,
43
+ borderRadiusY: 3,
44
+ width: 200,
45
+ height: 20,
46
+ x: 90,
47
+ y: 15,
48
+ },
49
+ {
50
+ type: 'circle',
51
+ radius: 30,
52
+ cx: 40,
53
+ cy: 55,
54
+ },
55
+ ];
56
+ }
57
+ <Shimmer elements={shimmerRects()} style={{ width: 300, height: 100 }} />;
58
+ ```
59
+
60
+ More examples on the [Test pages for the Shimmer](../../../apps/fluent-tester/src/TestComponents/Shimmer). Instructions on running the tester app can be found [here](../../../apps/fluent-tester/README.md).
61
+
62
+ ## Visual Examples
63
+
64
+ Win32:
65
+
66
+ Dark:
67
+ ![Dark Shimmer win32](./assets/dark_shimmer_win32.png)
68
+
69
+ Light:
70
+ ![Light Shimmer win32](./assets/light_shimmer_win32.png)
71
+
72
+ Android:
73
+
74
+ Dark:
75
+ ![Dark Shimmer android](./assets/dark_shimmer_android.png)
76
+
77
+ Light:
78
+ ![Light Shimmer android](./assets/light_shimmer_android.png)
79
+
80
+ ## API
81
+
82
+ ### Slots
83
+
84
+ The `Shimmer` component has only one slot, or part. The slot behaves as follows:
85
+
86
+ - `root` - The outer container representing the `Shimmer` itself that wraps everything passed via the `children` prop.
87
+
88
+ On Win32 though, the `Shimmer` component has four slots, or parts. The slots behave as follows:
89
+
90
+ - `root` - The outer container representing the `Shimmer` itself that wraps everything passed via the `children` prop.
91
+ - `shimmerWave` - The shimmer wave is rendered here.
92
+ - `shimmerWaveContainer` - Container of the shimmer wave. This is responsible for the animation in win32.
93
+ - `clippingMask` - Mask placed along with the shimmer wave to render elements passed.
94
+
95
+ The slots can be modified using the `compose` function on the `Shimmer`. For more information on using the `compose` API, please see [this page](../../framework/composition/README.md).
96
+
97
+ ### Props
98
+
99
+ Below is the set of props the Shimmer supports:
100
+
101
+ ```ts
102
+ export interface ShimmerCircleElement {
103
+ /**
104
+ * Shimmer element type.
105
+ */
106
+ type: 'circle';
107
+
108
+ /**
109
+ * Radius of the circle element.
110
+ * @defaultValue 12
111
+ */
112
+ radius?: number;
113
+
114
+ /**
115
+ * Note: cx and cy should be optional properties [or removed], with relative positioning being the default [or only] positioning mechanism.
116
+ * Note: The behavior of element intersections is undefined. https://www.github.com/Microsoft/fluentui-react-native Issue #866
117
+ */
118
+
119
+ /**
120
+ * The x-axis center of the circle element in the Shimmer relative to the origin [top-left, (0,0)].
121
+ */
122
+ cx: number;
123
+
124
+ /**
125
+ * The y-axis center of the circle element in the Shimmer relative to the origin [top-left, (0,0)].
126
+ */
127
+ cy: number;
128
+ }
129
+
130
+ /**
131
+ * Properties necessary to define a rectangular Shimmer element.
132
+ */
133
+ export interface ShimmerRectElement {
134
+ /**
135
+ * Shimmer element type.
136
+ */
137
+ type: 'rect';
138
+
139
+ /**
140
+ * Width of the rect.
141
+ * @defaultValue 100%
142
+ */
143
+ width?: number;
144
+
145
+ /**
146
+ * Height of the rect.
147
+ * @defaultValue 16
148
+ */
149
+ height?: number;
150
+
151
+ /**
152
+ * Border radius for the x-axis of a rounded rect.
153
+ * @defaultValue 0
154
+ */
155
+ borderRadiusX?: number;
156
+
157
+ /**
158
+ * Border radius for the y-axis of a rounded rect.
159
+ * @defaultValue 0
160
+ */
161
+ borderRadiusY?: number;
162
+
163
+ /**
164
+ * Note: x and y should be optional properties [or removed], with relative positioning being the default [or only] positioning mechanism.
165
+ * Note: The behavior of element intersections is undefined. https://www.github.com/Microsoft/fluentui-react-native Issue #866
166
+ */
167
+
168
+ /**
169
+ * The x-axis position of the rect element's top-left corner in the Shimmer relative to the origin [top-left, (0,0)].
170
+ */
171
+ x: number;
172
+
173
+ /**
174
+ * The y-axis position of the rect element's top-left corner in the Shimmer relative to the origin [top-left, (0,0)].
175
+ */
176
+ y: number;
177
+ }
178
+
179
+ export type ShimmerElementTypes = ShimmerCircleElement | ShimmerRectElement;
180
+ ```
181
+
182
+ ```ts
183
+ export interface ShimmerProps extends ViewProps {
184
+ /**
185
+ * Shimmer shapes that define the masking effect of the Shimmer control.
186
+ */
187
+ elements: Array<ShimmerElementTypes>;
188
+
189
+ /**
190
+ * Specifies the Shimmer effect angle in degrees (produced by a gradient).
191
+ *
192
+ * @defaultValue 45 on @platform Android
193
+ * @defaultValue 0 on other platforms.
194
+ */
195
+ angle?: number;
196
+
197
+ /**
198
+ * Specifies the animation delay time in milliseconds.
199
+ *
200
+ * @defaultValue 500 on @platform win32
201
+ * @defaultValue 0 on other platforms.
202
+ */
203
+ delay?: number;
204
+
205
+ /**
206
+ * Specifies the time required to traverse the control in milliseconds.
207
+ *
208
+ * @defaultValue 1000 on @platform Android
209
+ * @defaultValue 2000 on @platform win32
210
+ * @defaultValue 7000 on other platforms.
211
+ */
212
+ duration?: number;
213
+
214
+ /**
215
+ * Specifies the opacity of the shimmer color.
216
+ * @defaultValue 1
217
+ */
218
+ shimmerColorOpacity?: number;
219
+
220
+ /**
221
+ * Specifies the opacity of the wave color.
222
+ * @defaultValue 1
223
+ */
224
+ shimmerWaveColorOpacity?: number;
225
+
226
+ /**
227
+ * Color you see when the shimmer wave is not animating.
228
+ *
229
+ * @defaultValue theme.colors.neutralStencil1 on @platform Android
230
+ * @defaultValue theme.colors.bodyFrameDivider on @platform win32
231
+ * @defaultValue #E1E1E1/#404040 for light/dark theme on other platforms.
232
+ */
233
+ shimmerColor?: ColorValue;
234
+
235
+ /**
236
+ * Defines the tip color of the wave which has a linear gradient.
237
+ * from shimmerColor to shimmerWaveColor to shimmerColor.
238
+ *
239
+ * @defaultValue theme.colors.neutralStencil2 on @platform Android
240
+ * @defaultValue #E1E1E1 on @platform win32
241
+ * @defaultValue white/black for light/dark theme on other platforms.
242
+ */
243
+ shimmerWaveColor?: ColorValue;
244
+
245
+ /**
246
+ * Width of the Shimmer wave.
247
+ *
248
+ * @defaultValue '100%' of the 'width' property
249
+ * @platform win32
250
+ */
251
+ shimmerWaveWidth?: number | string;
252
+ }
253
+ ```
254
+
255
+ ### Styling Tokens
256
+
257
+ Tokens can be used to customize the styling of the control by using the `customize` function on the `Shimmer`. For more information on using the `customize` API, please see [this page](../../framework/composition/README.md). The `Shimmer` has the following tokens:
258
+
259
+ ```ts
260
+ export interface ShimmerTokens extends IBackgroundColorTokens {
261
+ /**
262
+ * Specifies the Shimmer effect angle in degrees (produced by a gradient)
263
+ * @defaultValue 45 on Android, 0 on other platforms
264
+ */
265
+ angle?: number;
266
+
267
+ /**
268
+ * Specifies the animation delay time in milliseconds
269
+ * @defaultValue 500 on win32, 0 on other platforms
270
+ */
271
+ delay?: number;
272
+
273
+ /**
274
+ * Specifies the time required to traverse the control in milliseconds
275
+ *
276
+ * @defaultValue 1000 on Android, 2000 on win32, 7000 on other platforms
277
+ */
278
+ duration?: number;
279
+
280
+ /**
281
+ * Specifies the opacity of the shimmer color.
282
+ * @defaultValue 1
283
+ */
284
+ shimmerColorOpacity?: number;
285
+
286
+ /**
287
+ * Specifies the opacity of the wave color.
288
+ * @defaultValue 1
289
+ */
290
+ shimmerWaveColorOpacity?: number;
291
+
292
+ /**
293
+ * Color you see when the shimmer wave is not animating.
294
+ *
295
+ * @defaultValue theme.colors.neutralStencil1 on Android, theme.colors.bodyFrameDivider on win32, #E1E1E1/#404040 on other platforms for light/dark theme
296
+ */
297
+ shimmerColor?: ColorValue;
298
+
299
+ /**
300
+ * Defines the tip color of the wave which has a linear gradient.
301
+ * from shimmerColor to shimmerWaveColor to shimmerColor.
302
+ *
303
+ * @defaultValue theme.colors.neutralStencil2 on Android, #E1E1E1 on win32, white/black on other platforms for light/dark theme
304
+ */
305
+ shimmerWaveColor?: ColorValue;
306
+
307
+ /**
308
+ * Width of the Shimmer wave.
309
+ * @defaultValue '100%' of the 'width' property
310
+ * @platform win32
311
+ */
312
+ shimmerWaveWidth?: number | string;
313
+ }
314
+ ```
315
+
316
+ ## Behaviors
317
+
318
+ ### States
319
+
320
+ There is only one default state for `Shimmer`.
321
+
322
+ ### Interaction
323
+
324
+ There are no interactions available for `Shimmer`.
Binary file
Binary file
Binary file
Binary file
package/jest.config.js ADDED
@@ -0,0 +1,2 @@
1
+ const { configureReactNativeJest } = require('@fluentui-react-native/scripts');
2
+ module.exports = configureReactNativeJest('android');
@@ -1 +1 @@
1
- {"version":3,"file":"Shimmer.d.ts","sourceRoot":"","sources":["../src/Shimmer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAe,YAAY,EAAe,MAAM,iBAAiB,CAAC;AAOzE,eAAO,MAAM,OAAO,2KAsHlB,CAAC"}
1
+ {"version":3,"file":"Shimmer.d.ts","sourceRoot":"","sources":["../src/Shimmer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAe,YAAY,EAAe,MAAM,iBAAiB,CAAC;AAOzE,eAAO,MAAM,OAAO,2KAiHlB,CAAC"}
package/lib/Shimmer.js CHANGED
@@ -35,17 +35,20 @@ export var Shimmer = compose(__assign(__assign({ displayName: shimmerName }, sty
35
35
  var Slots = useSlots(props);
36
36
  var AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
37
37
  var tokens = useStyling(props).root;
38
- var memoizedShimmerData = useMemo(function () { return ({
39
- angle: props.angle ? props.angle : tokens['angle'],
40
- containerWidth: (props === null || props === void 0 ? void 0 : props.style['width']) ? props === null || props === void 0 ? void 0 : props.style['width'] : '100%',
41
- containerHeight: (props === null || props === void 0 ? void 0 : props.style['height']) ? props === null || props === void 0 ? void 0 : props.style['height'] : '100%',
42
- delay: props.delay ? props.delay : tokens['delay'],
43
- duration: props.duration ? props.duration : tokens['duration'],
44
- shimmerColor: props.shimmerColor ? props.shimmerColor : tokens['shimmerColor'],
45
- shimmerColorOpacity: tokens['shimmerColorOpacity'],
46
- shimmerWaveColor: props.shimmerWaveColor ? props.shimmerWaveColor : tokens['shimmerWaveColor'],
47
- shimmerWaveColorOpacity: tokens['shimmerWaveColorOpacity'],
48
- }); }, [
38
+ var memoizedShimmerData = useMemo(function () {
39
+ var _a, _b;
40
+ return ({
41
+ angle: props.angle ? props.angle : tokens['angle'],
42
+ containerWidth: ((_a = props === null || props === void 0 ? void 0 : props.style) === null || _a === void 0 ? void 0 : _a['width']) ? props === null || props === void 0 ? void 0 : props.style['width'] : '100%',
43
+ containerHeight: ((_b = props === null || props === void 0 ? void 0 : props.style) === null || _b === void 0 ? void 0 : _b['height']) ? props === null || props === void 0 ? void 0 : props.style['height'] : '100%',
44
+ delay: props.delay ? props.delay : tokens['delay'],
45
+ duration: props.duration ? props.duration : tokens['duration'],
46
+ shimmerColor: props.shimmerColor ? props.shimmerColor : tokens['shimmerColor'],
47
+ shimmerColorOpacity: tokens['shimmerColorOpacity'],
48
+ shimmerWaveColor: props.shimmerWaveColor ? props.shimmerWaveColor : tokens['shimmerWaveColor'],
49
+ shimmerWaveColorOpacity: tokens['shimmerWaveColorOpacity'],
50
+ });
51
+ }, [
49
52
  props.angle,
50
53
  props.delay,
51
54
  props.duration,
@@ -55,26 +58,20 @@ export var Shimmer = compose(__assign(__assign({ displayName: shimmerName }, sty
55
58
  props.shimmerWaveColorOpacity,
56
59
  props.style,
57
60
  ]);
58
- var startValue = useRef(new Animated.Value(0)).current;
59
- /**
60
- * https://github.com/facebook/react-native/pull/29585
61
- * For Animated.loop() to work with the native driver, React Native needs this fix.
62
- * It's only available in React Native 0.66+, and React Native macOS 0.62+
63
- * To workaround this, let's just rerun the loop everytime the animation finishes
61
+ /* The shimmer animation is implemented using a LinearGradient which travels from left to right.
62
+ * Different angles are handled by rotating this gradient.
63
+ * 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.
64
+ * Similarly the endValue is set to 2 to make sure the gradient animation exits the entire screen for any angle.
64
65
  */
66
+ var startValue = useRef(new Animated.Value(-1)).current;
65
67
  var shimmerAnimation = useCallback(function () {
66
- Animated.sequence([
67
- Animated.timing(startValue, {
68
- toValue: 30,
69
- duration: memoizedShimmerData.duration,
70
- delay: memoizedShimmerData.delay,
71
- useNativeDriver: true,
72
- }),
73
- ]).start(function () {
74
- startValue.setValue(0);
75
- shimmerAnimation();
76
- });
77
- }, [memoizedShimmerData.duration, memoizedShimmerData.delay]);
68
+ Animated.loop(Animated.timing(startValue, {
69
+ toValue: 2,
70
+ duration: memoizedShimmerData.duration,
71
+ delay: memoizedShimmerData.delay,
72
+ useNativeDriver: true,
73
+ })).start();
74
+ }, [memoizedShimmerData.delay, memoizedShimmerData.duration]);
78
75
  useEffect(function () {
79
76
  shimmerAnimation();
80
77
  });
@@ -99,7 +96,7 @@ export var Shimmer = compose(__assign(__assign({ displayName: shimmerName }, sty
99
96
  var rtlTransfrom = I18nManager.isRTL ? { translateX: memoizedShimmerData.containerWidth, scaleX: -1 } : {};
100
97
  return (withSlots(Slots.root, __assign({}, mergedProps),
101
98
  withSlots(Defs, null,
102
- withSlots(AnimatedLinearGradient, { id: "gradient", x1: startValue, y1: memoizedShimmerData.angle, x2: "-1", y2: "-1" },
99
+ withSlots(AnimatedLinearGradient, { id: "gradient", x1: startValue, x2: "-1", gradientTransform: "rotate(".concat(memoizedShimmerData.angle, ")") },
103
100
  withSlots(Stop, { offset: "10%", stopColor: memoizedShimmerData.shimmerColor, stopOpacity: memoizedShimmerData.shimmerColorOpacity }),
104
101
  withSlots(Stop, { offset: "20%", stopColor: memoizedShimmerData.shimmerWaveColor, stopOpacity: memoizedShimmerData.shimmerWaveColorOpacity }),
105
102
  withSlots(Stop, { offset: "30%", stopColor: memoizedShimmerData.shimmerColor, stopOpacity: memoizedShimmerData.shimmerColorOpacity })),
@@ -1 +1 @@
1
- {"version":3,"file":"Shimmer.js","sourceRoot":"","sources":["../src/Shimmer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,qBAAqB;AACrB,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,EAAmB,MAAM,kBAAkB,CAAC;AAC/G,OAAO,EAAE,WAAW,EAA6B,MAAM,iBAAiB,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAY,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAC7G,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,WAAW,MAAM,cAAc,CAAC;AAEvC,IAAM,UAAU,GAAG,eAAe,CAAC,eAAe,CAAC,CAAC;AACpD,MAAM,CAAC,IAAM,OAAO,GAAG,OAAO,qBAC5B,WAAW,EAAE,WAAW,IACrB,eAAe,KAClB,KAAK,EAAE;QACL,IAAI,EAAE,GAAG;KACV,EACD,SAAS,EAAE,UAAC,KAAmB,EAAE,QAA+B;QAC9D,IAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAM,sBAAsB,GAAG,QAAQ,CAAC,uBAAuB,CAAC,cAAc,CAAC,CAAC;QAChF,IAAM,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC;QACtC,IAAM,mBAAmB,GAAG,OAAO,CACjC,cAAM,OAAA,CAAC;YACL,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;YAClD,cAAc,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,OAAO,CAAC,EAAC,CAAC,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM;YACtE,eAAe,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,QAAQ,CAAC,EAAC,CAAC,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM;YACzE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;YAClD,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC;YAC9D,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC;YAC9E,mBAAmB,EAAE,MAAM,CAAC,qBAAqB,CAAC;YAClD,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC;YAC9F,uBAAuB,EAAE,MAAM,CAAC,yBAAyB,CAAC;SAC3D,CAAC,EAVI,CAUJ,EACF;YACE,KAAK,CAAC,KAAK;YACX,KAAK,CAAC,KAAK;YACX,KAAK,CAAC,QAAQ;YACd,KAAK,CAAC,YAAY;YAClB,KAAK,CAAC,mBAAmB;YACzB,KAAK,CAAC,gBAAgB;YACtB,KAAK,CAAC,uBAAuB;YAC7B,KAAK,CAAC,KAAK;SACZ,CACF,CAAC;QAEF,IAAM,UAAU,GAAG,MAAM,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;QAEzD;;;;;WAKG;QACH,IAAM,gBAAgB,GAAG,WAAW,CAAC;YACnC,QAAQ,CAAC,QAAQ,CAAC;gBAChB,QAAQ,CAAC,MAAM,CAAC,UAAU,EAAE;oBAC1B,OAAO,EAAE,EAAE;oBACX,QAAQ,EAAE,mBAAmB,CAAC,QAAQ;oBACtC,KAAK,EAAE,mBAAmB,CAAC,KAAK;oBAChC,eAAe,EAAE,IAAI;iBACtB,CAAC;aACH,CAAC,CAAC,KAAK,CAAC;gBACP,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gBACvB,gBAAgB,EAAE,CAAC;YACrB,CAAC,CAAC,CAAC;QACL,CAAC,EAAE,CAAC,mBAAmB,CAAC,QAAQ,EAAE,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC;QAE9D,SAAS,CAAC;YACR,gBAAgB,EAAE,CAAC;QACrB,CAAC,CAAC,CAAC;QAEH,OAAO,UAAC,IAAkB;YACxB,IAAM,KAA+B,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,EAApD,QAAQ,cAAA,EAAK,WAAW,cAA1B,YAA4B,CAA0B,CAAC;YAC7D,IAAM,IAAI,GAAG,EAAE,CAAC;YAEhB,IAAI,QAAQ,EAAE;gBACZ,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;oBACxC,IAAM,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;oBAC5B,IAAI,OAAO,CAAC,IAAI,IAAI,MAAM,EAAE;wBAC1B,IAAI,CAAC,IAAI,CACP,UAAC,IAAI,IACH,GAAG,EAAE,CAAC,EACN,KAAK,EAAE,OAAO,CAAC,KAAK,EACpB,MAAM,EAAE,OAAO,CAAC,MAAM,EACtB,CAAC,EAAE,OAAO,CAAC,CAAC,EACZ,CAAC,EAAE,OAAO,CAAC,CAAC,EACZ,EAAE,EAAE,OAAO,CAAC,aAAa,EACzB,EAAE,EAAE,OAAO,CAAC,aAAa,GACzB,CACH,CAAC;qBACH;yBAAM,IAAI,OAAO,CAAC,IAAI,IAAI,QAAQ,EAAE;wBACnC,IAAI,CAAC,IAAI,CAAC,UAAC,MAAM,IAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC,MAAM,EAAE,EAAE,EAAE,OAAO,CAAC,EAAE,EAAE,EAAE,EAAE,OAAO,CAAC,EAAE,GAAI,CAAC,CAAC;qBAClF;yBAAM;wBACL,WAAW,CAAC,OAAO,CAAC,CAAC;qBACtB;iBACF;aACF;YAED,wCAAwC;YACxC,IAAM,YAAY,GAAoB,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,mBAAmB,CAAC,cAAc,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YAE9H,OAAO,CACL,UAAC,KAAK,CAAC,IAAI,eAAK,WAAW;gBACzB,UAAC,IAAI;oBACH,UAAC,sBAAsB,IAAC,EAAE,EAAC,UAAU,EAAC,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,mBAAmB,CAAC,KAAK,EAAE,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI;wBAClG,UAAC,IAAI,IAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAE,mBAAmB,CAAC,YAAY,EAAE,WAAW,EAAE,mBAAmB,CAAC,mBAAmB,GAAI;wBACxH,UAAC,IAAI,IACH,MAAM,EAAC,KAAK,EACZ,SAAS,EAAE,mBAAmB,CAAC,gBAAgB,EAC/C,WAAW,EAAE,mBAAmB,CAAC,uBAAuB,GACxD;wBACF,UAAC,IAAI,IAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAE,mBAAmB,CAAC,YAAY,EAAE,WAAW,EAAE,mBAAmB,CAAC,mBAAmB,GAAI,CACjG;oBACzB,UAAC,QAAQ,IAAC,EAAE,EAAC,aAAa,IAAE,IAAI,CAAY,CACvC;gBACP,UAAC,CAAC,IAAC,SAAS,EAAE,YAAY;oBACxB,UAAC,IAAI,IACH,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,KAAK,EAAE,mBAAmB,CAAC,cAAc,EACzC,MAAM,EAAE,mBAAmB,CAAC,eAAe,EAC3C,IAAI,EAAC,gBAAgB,EACrB,QAAQ,EAAC,mBAAmB,GAC5B,CACA,CACO,CACd,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,IACD,CAAC"}
1
+ {"version":3,"file":"Shimmer.js","sourceRoot":"","sources":["../src/Shimmer.tsx"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Shimmer.styling.d.ts","sourceRoot":"","sources":["../src/Shimmer.styling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAqB,MAAM,kCAAkC,CAAC;AAExF,OAAO,EAAe,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE7F,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,YAAY,EAAE,gBAAgB,EAAE,aAAa,CA6B5F,CAAC"}
1
+ {"version":3,"file":"Shimmer.styling.d.ts","sourceRoot":"","sources":["../src/Shimmer.styling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAc,MAAM,kCAAkC,CAAC;AACjF,OAAO,EAAe,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAG7F,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,YAAY,EAAE,gBAAgB,EAAE,aAAa,CAkB5F,CAAC"}
@@ -1,29 +1,18 @@
1
1
  import { buildProps } from '@fluentui-react-native/framework';
2
- import { getCurrentAppearance } from '@fluentui-react-native/theming-utils';
3
2
  import { shimmerName } from './Shimmer.types';
3
+ import { defaultShimmerTokens } from './ShimmerTokens';
4
4
  export var stylingSettings = {
5
- tokens: [
6
- function () { return ({
7
- angle: 0,
8
- delay: 0,
9
- duration: 7000,
10
- shimmerColor: '#E1E1E1',
11
- shimmerColorOpacity: 1,
12
- shimmerWaveColor: 'white',
13
- shimmerWaveColorOpacity: 1,
14
- }); },
15
- shimmerName,
16
- ],
5
+ tokens: [defaultShimmerTokens, shimmerName],
17
6
  slotProps: {
18
- root: buildProps(function (tokens, theme) { return ({
7
+ root: buildProps(function (tokens) { return ({
19
8
  accessibilityRole: 'progressbar',
20
9
  accessible: true,
21
10
  angle: tokens.angle,
22
11
  delay: tokens.delay,
23
12
  duration: tokens.duration,
24
- shimmerColor: getCurrentAppearance(theme.host.appearance, 'light') === 'light' ? '#E1E1E1' : '#404040',
13
+ shimmerColor: tokens.shimmerColor,
25
14
  shimmerColorOpacity: tokens.shimmerColorOpacity,
26
- shimmerWaveColor: getCurrentAppearance(theme.host.appearance, 'light') === 'light' ? 'white' : 'black',
15
+ shimmerWaveColor: tokens.shimmerWaveColor,
27
16
  shimmerWaveColorOpacity: tokens.shimmerWaveColorOpacity,
28
17
  }); }, ['angle', 'delay', 'duration', 'shimmerColor', 'shimmerColorOpacity', 'shimmerWaveColor', 'shimmerWaveColorOpacity']),
29
18
  },
@@ -1 +1 @@
1
- {"version":3,"file":"Shimmer.styling.js","sourceRoot":"","sources":["../src/Shimmer.styling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,UAAU,EAAS,MAAM,kCAAkC,CAAC;AACxF,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAiD,MAAM,iBAAiB,CAAC;AAE7F,MAAM,CAAC,IAAM,eAAe,GAAqE;IAC/F,MAAM,EAAE;QACN,cAAM,OAAA,CAAC;YACL,KAAK,EAAE,CAAC;YACR,KAAK,EAAE,CAAC;YACR,QAAQ,EAAE,IAAI;YACd,YAAY,EAAE,SAAS;YACvB,mBAAmB,EAAE,CAAC;YACtB,gBAAgB,EAAE,OAAO;YACzB,uBAAuB,EAAE,CAAC;SAC3B,CAAC,EARI,CAQJ;QACF,WAAW;KACZ;IACD,SAAS,EAAE;QACT,IAAI,EAAE,UAAU,CACd,UAAC,MAAqB,EAAE,KAAY,IAAK,OAAA,CAAC;YACxC,iBAAiB,EAAE,aAAa;YAChC,UAAU,EAAE,IAAI;YAChB,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ;YACzB,YAAY,EAAE,oBAAoB,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YACtG,mBAAmB,EAAE,MAAM,CAAC,mBAAmB;YAC/C,gBAAgB,EAAE,oBAAoB,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO;YACtG,uBAAuB,EAAE,MAAM,CAAC,uBAAuB;SACxD,CAAC,EAVuC,CAUvC,EACF,CAAC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,yBAAyB,CAAC,CACrH;KACF;CACF,CAAC"}
1
+ {"version":3,"file":"Shimmer.styling.js","sourceRoot":"","sources":["../src/Shimmer.styling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,UAAU,EAAE,MAAM,kCAAkC,CAAC;AACjF,OAAO,EAAE,WAAW,EAAiD,MAAM,iBAAiB,CAAC;AAC7F,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,CAAC,IAAM,eAAe,GAAqE;IAC/F,MAAM,EAAE,CAAC,oBAAoB,EAAE,WAAW,CAAC;IAC3C,SAAS,EAAE;QACT,IAAI,EAAE,UAAU,CACd,UAAC,MAAqB,IAAK,OAAA,CAAC;YAC1B,iBAAiB,EAAE,aAAa;YAChC,UAAU,EAAE,IAAI;YAChB,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ;YACzB,YAAY,EAAE,MAAM,CAAC,YAAY;YACjC,mBAAmB,EAAE,MAAM,CAAC,mBAAmB;YAC/C,gBAAgB,EAAE,MAAM,CAAC,gBAAgB;YACzC,uBAAuB,EAAE,MAAM,CAAC,uBAAuB;SACxD,CAAC,EAVyB,CAUzB,EACF,CAAC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,yBAAyB,CAAC,CACrH;KACF;CACF,CAAC"}
@@ -1,7 +1,6 @@
1
- import { UseStylingOptions, TokenSettings } from '@fluentui-react-native/framework';
1
+ import { UseStylingOptions } from '@fluentui-react-native/framework';
2
2
  import { ShimmerProps, ShimmerTokens } from './Shimmer.types';
3
3
  import { ShimmerSlotProps } from './Shimmer.types.win32';
4
- export declare const defaultShimmerTokens: TokenSettings<ShimmerTokens>;
5
4
  /**
6
5
  * tell the styling hook how to build up the tokens
7
6
  */
@@ -1 +1 @@
1
- {"version":3,"file":"Shimmer.styling.win32.d.ts","sourceRoot":"","sources":["../src/Shimmer.styling.win32.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAqB,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACvG,OAAO,EAAe,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,eAAO,MAAM,oBAAoB,EAAE,aAAa,CAAC,aAAa,CAWzC,CAAC;AAEtB;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,YAAY,EAAE,gBAAgB,EAAE,aAAa,CAuC5F,CAAC"}
1
+ {"version":3,"file":"Shimmer.styling.win32.d.ts","sourceRoot":"","sources":["../src/Shimmer.styling.win32.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAc,MAAM,kCAAkC,CAAC;AACjF,OAAO,EAAe,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAGzD;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,YAAY,EAAE,gBAAgB,EAAE,aAAa,CAuC5F,CAAC"}
@@ -1,18 +1,6 @@
1
1
  import { buildProps } from '@fluentui-react-native/framework';
2
2
  import { shimmerName } from './Shimmer.types';
3
- export var defaultShimmerTokens = function (theme) {
4
- return ({
5
- angle: 0,
6
- backgroundColor: theme.colors.background,
7
- delay: 500,
8
- duration: 2000,
9
- shimmerColor: theme.colors.bodyFrameDivider,
10
- shimmerColorOpacity: 1,
11
- shimmerWaveColor: '#E1E1E1',
12
- shimmerWaveColorOpacity: 1,
13
- shimmerWaveWidth: '100%',
14
- });
15
- };
3
+ import { defaultShimmerTokens } from './ShimmerTokens.win32';
16
4
  /**
17
5
  * tell the styling hook how to build up the tokens
18
6
  */