@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.
- package/CHANGELOG.json +78 -1
- package/CHANGELOG.md +22 -2
- package/SPEC.md +324 -0
- package/assets/dark_shimmer_android.png +0 -0
- package/assets/dark_shimmer_win32.png +0 -0
- package/assets/light_shimmer_android.png +0 -0
- package/assets/light_shimmer_win32.png +0 -0
- package/jest.config.js +2 -0
- package/lib/Shimmer.d.ts.map +1 -1
- package/lib/Shimmer.js +27 -30
- package/lib/Shimmer.js.map +1 -1
- package/lib/Shimmer.styling.d.ts.map +1 -1
- package/lib/Shimmer.styling.js +5 -16
- package/lib/Shimmer.styling.js.map +1 -1
- package/lib/Shimmer.styling.win32.d.ts +1 -2
- package/lib/Shimmer.styling.win32.d.ts.map +1 -1
- package/lib/Shimmer.styling.win32.js +1 -13
- package/lib/Shimmer.styling.win32.js.map +1 -1
- package/lib/Shimmer.test.d.ts +2 -0
- package/lib/Shimmer.test.d.ts.map +1 -0
- package/lib/Shimmer.test.js +48 -0
- package/lib/Shimmer.test.js.map +1 -0
- package/lib/Shimmer.types.d.ts +22 -10
- package/lib/Shimmer.types.d.ts.map +1 -1
- package/lib/Shimmer.types.win32.d.ts +1 -1
- package/lib/Shimmer.types.win32.d.ts.map +1 -1
- package/lib/Shimmer.win32.js +1 -1
- package/lib/Shimmer.win32.js.map +1 -1
- package/lib/ShimmerTokens.android.d.ts +5 -0
- package/lib/ShimmerTokens.android.d.ts.map +1 -0
- package/lib/ShimmerTokens.android.js +12 -0
- package/lib/ShimmerTokens.android.js.map +1 -0
- package/lib/ShimmerTokens.d.ts +5 -0
- package/lib/ShimmerTokens.d.ts.map +1 -0
- package/lib/ShimmerTokens.js +13 -0
- package/lib/ShimmerTokens.js.map +1 -0
- package/lib/ShimmerTokens.win32.d.ts +5 -0
- package/lib/ShimmerTokens.win32.d.ts.map +1 -0
- package/lib/ShimmerTokens.win32.js +14 -0
- package/lib/ShimmerTokens.win32.js.map +1 -0
- package/lib-commonjs/Shimmer.d.ts.map +1 -1
- package/lib-commonjs/Shimmer.js +27 -30
- package/lib-commonjs/Shimmer.js.map +1 -1
- package/lib-commonjs/Shimmer.styling.d.ts.map +1 -1
- package/lib-commonjs/Shimmer.styling.js +5 -16
- package/lib-commonjs/Shimmer.styling.js.map +1 -1
- package/lib-commonjs/Shimmer.styling.win32.d.ts +1 -2
- package/lib-commonjs/Shimmer.styling.win32.d.ts.map +1 -1
- package/lib-commonjs/Shimmer.styling.win32.js +3 -16
- package/lib-commonjs/Shimmer.styling.win32.js.map +1 -1
- package/lib-commonjs/Shimmer.test.d.ts +2 -0
- package/lib-commonjs/Shimmer.test.d.ts.map +1 -0
- package/lib-commonjs/Shimmer.test.js +69 -0
- package/lib-commonjs/Shimmer.test.js.map +1 -0
- package/lib-commonjs/Shimmer.types.d.ts +22 -10
- package/lib-commonjs/Shimmer.types.d.ts.map +1 -1
- package/lib-commonjs/Shimmer.types.win32.d.ts +1 -1
- package/lib-commonjs/Shimmer.types.win32.d.ts.map +1 -1
- package/lib-commonjs/Shimmer.win32.js +1 -1
- package/lib-commonjs/Shimmer.win32.js.map +1 -1
- package/lib-commonjs/ShimmerTokens.android.d.ts +5 -0
- package/lib-commonjs/ShimmerTokens.android.d.ts.map +1 -0
- package/lib-commonjs/ShimmerTokens.android.js +16 -0
- package/lib-commonjs/ShimmerTokens.android.js.map +1 -0
- package/lib-commonjs/ShimmerTokens.d.ts +5 -0
- package/lib-commonjs/ShimmerTokens.d.ts.map +1 -0
- package/lib-commonjs/ShimmerTokens.js +17 -0
- package/lib-commonjs/ShimmerTokens.js.map +1 -0
- package/lib-commonjs/ShimmerTokens.win32.d.ts +5 -0
- package/lib-commonjs/ShimmerTokens.win32.d.ts.map +1 -0
- package/lib-commonjs/ShimmerTokens.win32.js +18 -0
- package/lib-commonjs/ShimmerTokens.win32.js.map +1 -0
- package/package.json +9 -3
- package/src/Shimmer.styling.ts +6 -17
- package/src/Shimmer.styling.win32.ts +2 -14
- package/src/Shimmer.test.tsx +53 -0
- package/src/Shimmer.tsx +12 -17
- package/src/Shimmer.types.ts +22 -10
- package/src/Shimmer.types.win32.ts +1 -1
- package/src/Shimmer.win32.tsx +2 -2
- package/src/ShimmerTokens.android.ts +14 -0
- package/src/ShimmerTokens.ts +15 -0
- package/src/ShimmerTokens.win32.ts +16 -0
- package/src/__snapshots__/Shimmer.test.tsx.snap +249 -0
- 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": "
|
|
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
|
|
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:
|
|
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
|
+

|
|
68
|
+
|
|
69
|
+
Light:
|
|
70
|
+

|
|
71
|
+
|
|
72
|
+
Android:
|
|
73
|
+
|
|
74
|
+
Dark:
|
|
75
|
+

|
|
76
|
+
|
|
77
|
+
Light:
|
|
78
|
+

|
|
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
package/lib/Shimmer.d.ts.map
CHANGED
|
@@ -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,
|
|
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 () {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
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
|
-
|
|
59
|
-
|
|
60
|
-
*
|
|
61
|
-
*
|
|
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.
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
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,
|
|
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 })),
|
package/lib/Shimmer.js.map
CHANGED
|
@@ -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,
|
|
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,
|
|
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"}
|
package/lib/Shimmer.styling.js
CHANGED
|
@@ -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
|
|
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:
|
|
13
|
+
shimmerColor: tokens.shimmerColor,
|
|
25
14
|
shimmerColorOpacity: tokens.shimmerColorOpacity,
|
|
26
|
-
shimmerWaveColor:
|
|
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,
|
|
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
|
|
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,
|
|
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
|
-
|
|
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
|
*/
|