@fluentui-react-native/experimental-shimmer 0.5.22 → 0.6.1
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 +110 -1
- package/CHANGELOG.md +41 -2
- package/lib/Shimmer.d.ts +0 -2
- package/lib/Shimmer.d.ts.map +1 -1
- package/lib/Shimmer.js +30 -19
- package/lib/Shimmer.js.map +1 -1
- package/lib-commonjs/Shimmer.d.ts +0 -2
- package/lib-commonjs/Shimmer.d.ts.map +1 -1
- package/lib-commonjs/Shimmer.js +27 -17
- package/lib-commonjs/Shimmer.js.map +1 -1
- package/package.json +7 -7
- package/src/Shimmer.tsx +41 -30
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,116 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/experimental-shimmer",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Thu, 16 Dec 2021 06:26:42 GMT",
|
|
6
|
+
"tag": "@fluentui-react-native/experimental-shimmer_v0.6.1",
|
|
7
|
+
"version": "0.6.1",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "sanajmi@microsoft.com",
|
|
12
|
+
"package": "@fluentui-react-native/experimental-shimmer",
|
|
13
|
+
"commit": "6bc41c5b55447849b86d9c8928aafc022e11f688",
|
|
14
|
+
"comment": "Flip Shimmer in RTL"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui-react-native/experimental-shimmer",
|
|
19
|
+
"comment": "Bump @fluentui-react-native/framework to v0.7.1",
|
|
20
|
+
"commit": "841d2998e8b97fabe0b6dac9c74c3d63d2b3bbd4"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui-react-native/experimental-shimmer",
|
|
25
|
+
"comment": "Bump @fluentui-react-native/tokens to v0.11.1",
|
|
26
|
+
"commit": "841d2998e8b97fabe0b6dac9c74c3d63d2b3bbd4"
|
|
27
|
+
}
|
|
28
|
+
]
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"date": "Wed, 17 Nov 2021 19:28:07 GMT",
|
|
33
|
+
"tag": "@fluentui-react-native/experimental-shimmer_v0.6.0",
|
|
34
|
+
"version": "0.6.0",
|
|
35
|
+
"comments": {
|
|
36
|
+
"minor": [
|
|
37
|
+
{
|
|
38
|
+
"comment": "Update to react-native 0.64",
|
|
39
|
+
"author": "afoxman@microsoft.com",
|
|
40
|
+
"commit": "f16d742b5c2d5b97e49ac1ef7b740cbf89fc42e6",
|
|
41
|
+
"package": "@fluentui-react-native/experimental-shimmer"
|
|
42
|
+
}
|
|
43
|
+
],
|
|
44
|
+
"patch": [
|
|
45
|
+
{
|
|
46
|
+
"comment": "Bump @fluentui-react-native/tokens to v0.11.0",
|
|
47
|
+
"author": "afoxman@microsoft.com",
|
|
48
|
+
"commit": "f16d742b5c2d5b97e49ac1ef7b740cbf89fc42e6",
|
|
49
|
+
"package": "@fluentui-react-native/experimental-shimmer"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"comment": "Bump @fluentui-react-native/framework to v0.7.0",
|
|
53
|
+
"author": "afoxman@microsoft.com",
|
|
54
|
+
"commit": "f16d742b5c2d5b97e49ac1ef7b740cbf89fc42e6",
|
|
55
|
+
"package": "@fluentui-react-native/experimental-shimmer"
|
|
56
|
+
}
|
|
57
|
+
]
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"date": "Fri, 12 Nov 2021 16:07:20 GMT",
|
|
62
|
+
"tag": "@fluentui-react-native/experimental-shimmer_v0.5.24",
|
|
63
|
+
"version": "0.5.24",
|
|
64
|
+
"comments": {
|
|
65
|
+
"patch": [
|
|
66
|
+
{
|
|
67
|
+
"comment": "Use the native driver for the animation",
|
|
68
|
+
"author": "sanajmi@microsoft.com",
|
|
69
|
+
"commit": "9df126ca41535e2c8c1eb72084690d38ac664cff",
|
|
70
|
+
"package": "@fluentui-react-native/experimental-shimmer"
|
|
71
|
+
}
|
|
72
|
+
],
|
|
73
|
+
"none": [
|
|
74
|
+
{
|
|
75
|
+
"comment": "Bump @fluentui-react-native/framework to v0.6.6",
|
|
76
|
+
"author": "4123478+tido64@users.noreply.github.com",
|
|
77
|
+
"commit": "25673699e6c6c064b41f1246c2c995baa67a74ad",
|
|
78
|
+
"package": "@fluentui-react-native/experimental-shimmer"
|
|
79
|
+
}
|
|
80
|
+
]
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"date": "Thu, 11 Nov 2021 23:17:41 GMT",
|
|
85
|
+
"tag": "@fluentui-react-native/experimental-shimmer_v0.5.23",
|
|
86
|
+
"version": "0.5.23",
|
|
87
|
+
"comments": {
|
|
88
|
+
"none": [
|
|
89
|
+
{
|
|
90
|
+
"comment": "Rename uifabricshared/eslint-config-rules to fluentui-react-native/eslint-config-rules",
|
|
91
|
+
"author": "ruaraki@microsoft.com",
|
|
92
|
+
"commit": "110fba2a1721a914501404f6040f07656307549e",
|
|
93
|
+
"package": "@fluentui-react-native/experimental-shimmer"
|
|
94
|
+
}
|
|
95
|
+
]
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
"date": "Tue, 09 Nov 2021 23:04:33 GMT",
|
|
100
|
+
"tag": "@fluentui-react-native/experimental-shimmer_v0.5.23",
|
|
101
|
+
"version": "0.5.23",
|
|
102
|
+
"comments": {
|
|
103
|
+
"patch": [
|
|
104
|
+
{
|
|
105
|
+
"comment": "Bump @fluentui-react-native/framework to v0.6.6",
|
|
106
|
+
"author": "67026167+chiuam@users.noreply.github.com",
|
|
107
|
+
"commit": "8baa72ed4ec06f90a51cf757e1924e946f76a537",
|
|
108
|
+
"package": "@fluentui-react-native/experimental-shimmer"
|
|
109
|
+
}
|
|
110
|
+
]
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"date": "Mon, 01 Nov 2021 18:53:37 GMT",
|
|
6
115
|
"tag": "@fluentui-react-native/experimental-shimmer_v0.5.22",
|
|
7
116
|
"version": "0.5.22",
|
|
8
117
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,51 @@
|
|
|
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 Thu, 16 Dec 2021 06:26:42 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.6.1
|
|
8
|
+
|
|
9
|
+
Thu, 16 Dec 2021 06:26:42 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- Flip Shimmer in RTL (sanajmi@microsoft.com)
|
|
14
|
+
- Bump @fluentui-react-native/framework to v0.7.1
|
|
15
|
+
- Bump @fluentui-react-native/tokens to v0.11.1
|
|
16
|
+
|
|
17
|
+
## 0.6.0
|
|
18
|
+
|
|
19
|
+
Wed, 17 Nov 2021 19:28:07 GMT
|
|
20
|
+
|
|
21
|
+
### Minor changes
|
|
22
|
+
|
|
23
|
+
- Update to react-native 0.64 (afoxman@microsoft.com)
|
|
24
|
+
|
|
25
|
+
### Patches
|
|
26
|
+
|
|
27
|
+
- Bump @fluentui-react-native/tokens to v0.11.0 (afoxman@microsoft.com)
|
|
28
|
+
- Bump @fluentui-react-native/framework to v0.7.0 (afoxman@microsoft.com)
|
|
29
|
+
|
|
30
|
+
## 0.5.24
|
|
31
|
+
|
|
32
|
+
Fri, 12 Nov 2021 16:07:20 GMT
|
|
33
|
+
|
|
34
|
+
### Patches
|
|
35
|
+
|
|
36
|
+
- Use the native driver for the animation (sanajmi@microsoft.com)
|
|
37
|
+
|
|
38
|
+
## 0.5.23
|
|
39
|
+
|
|
40
|
+
Tue, 09 Nov 2021 23:04:33 GMT
|
|
41
|
+
|
|
42
|
+
### Patches
|
|
43
|
+
|
|
44
|
+
- Bump @fluentui-react-native/framework to v0.6.6 (67026167+chiuam@users.noreply.github.com)
|
|
45
|
+
|
|
7
46
|
## 0.5.22
|
|
8
47
|
|
|
9
|
-
Mon, 01 Nov 2021 18:
|
|
48
|
+
Mon, 01 Nov 2021 18:53:37 GMT
|
|
10
49
|
|
|
11
50
|
### Patches
|
|
12
51
|
|
package/lib/Shimmer.d.ts
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
1
|
import { ShimmerProps } from './Shimmer.types';
|
|
2
|
-
import { Animated } from 'react-native';
|
|
3
|
-
export declare function useShimmerAnimation(memoData: any): Animated.Value;
|
|
4
2
|
export declare const Shimmer: import("@fluentui-react-native/composition").ComposeFactoryComponent<ShimmerProps, import("./Shimmer.types").ShimmerSlotProps, import("./Shimmer.types").ShimmerTokens, import("@fluentui-react-native/framework").Theme, object>;
|
|
5
3
|
//# sourceMappingURL=Shimmer.d.ts.map
|
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;
|
|
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,mOAsHlB,CAAC"}
|
package/lib/Shimmer.js
CHANGED
|
@@ -21,27 +21,13 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
21
21
|
return t;
|
|
22
22
|
};
|
|
23
23
|
/** @jsx withSlots */
|
|
24
|
-
import { useRef, useEffect, useMemo } from 'react';
|
|
25
|
-
import { Circle, ClipPath, Defs, LinearGradient, Rect, Stop, Svg } from 'react-native-svg';
|
|
24
|
+
import { useRef, useEffect, useMemo, useCallback } from 'react';
|
|
25
|
+
import { Circle, ClipPath, Defs, LinearGradient, Rect, Stop, Svg, G } from 'react-native-svg';
|
|
26
26
|
import { shimmerName } from './Shimmer.types';
|
|
27
27
|
import { compose, mergeProps, withSlots, buildUseStyling } from '@fluentui-react-native/framework';
|
|
28
|
-
import { Animated } from 'react-native';
|
|
28
|
+
import { Animated, I18nManager } from 'react-native';
|
|
29
29
|
import { stylingSettings } from './Shimmer.styling';
|
|
30
30
|
import assertNever from 'assert-never';
|
|
31
|
-
export function useShimmerAnimation(memoData) {
|
|
32
|
-
var startValue = useRef(new Animated.Value(0)).current;
|
|
33
|
-
useEffect(function () {
|
|
34
|
-
Animated.loop(Animated.sequence([
|
|
35
|
-
Animated.timing(startValue, {
|
|
36
|
-
toValue: 30,
|
|
37
|
-
duration: memoData.duration,
|
|
38
|
-
delay: memoData.delay,
|
|
39
|
-
useNativeDriver: false,
|
|
40
|
-
}),
|
|
41
|
-
])).start();
|
|
42
|
-
});
|
|
43
|
-
return startValue;
|
|
44
|
-
}
|
|
45
31
|
var useStyling = buildUseStyling(stylingSettings);
|
|
46
32
|
export var Shimmer = compose(__assign(__assign({ displayName: shimmerName }, stylingSettings), { slots: {
|
|
47
33
|
root: Svg,
|
|
@@ -69,7 +55,29 @@ export var Shimmer = compose(__assign(__assign({ displayName: shimmerName }, sty
|
|
|
69
55
|
props.shimmerWaveColorOpacity,
|
|
70
56
|
props.style,
|
|
71
57
|
]);
|
|
72
|
-
var startValue =
|
|
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
|
|
64
|
+
*/
|
|
65
|
+
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]);
|
|
78
|
+
useEffect(function () {
|
|
79
|
+
shimmerAnimation();
|
|
80
|
+
});
|
|
73
81
|
return function (rest) {
|
|
74
82
|
var _a = mergeProps(props, rest), elements = _a.elements, mergedProps = __rest(_a, ["elements"]);
|
|
75
83
|
var rows = [];
|
|
@@ -87,6 +95,8 @@ export var Shimmer = compose(__assign(__assign({ displayName: shimmerName }, sty
|
|
|
87
95
|
}
|
|
88
96
|
}
|
|
89
97
|
}
|
|
98
|
+
// Flip the SVG if we are running in RTL
|
|
99
|
+
var rtlTransfrom = I18nManager.isRTL ? { translateX: memoizedShimmerData.containerWidth, scaleX: -1 } : {};
|
|
90
100
|
return (withSlots(Slots.root, __assign({}, mergedProps),
|
|
91
101
|
withSlots(Defs, null,
|
|
92
102
|
withSlots(AnimatedLinearGradient, { id: "gradient", x1: startValue, y1: memoizedShimmerData.angle, x2: "-1", y2: "-1" },
|
|
@@ -94,7 +104,8 @@ export var Shimmer = compose(__assign(__assign({ displayName: shimmerName }, sty
|
|
|
94
104
|
withSlots(Stop, { offset: "20%", stopColor: memoizedShimmerData.shimmerWaveColor, stopOpacity: memoizedShimmerData.shimmerWaveColorOpacity }),
|
|
95
105
|
withSlots(Stop, { offset: "30%", stopColor: memoizedShimmerData.shimmerColor, stopOpacity: memoizedShimmerData.shimmerColorOpacity })),
|
|
96
106
|
withSlots(ClipPath, { id: "shimmerView" }, rows)),
|
|
97
|
-
withSlots(
|
|
107
|
+
withSlots(G, { transform: rtlTransfrom },
|
|
108
|
+
withSlots(Rect, { x: "0", y: "0", width: memoizedShimmerData.containerWidth, height: memoizedShimmerData.containerHeight, fill: "url(#gradient)", clipPath: "url(#shimmerView)" }))));
|
|
98
109
|
};
|
|
99
110
|
} }));
|
|
100
111
|
//# sourceMappingURL=Shimmer.js.map
|
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,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Shimmer.js","sourceRoot":"","sources":["../src/Shimmer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,3 @@
|
|
|
1
1
|
import { ShimmerProps } from './Shimmer.types';
|
|
2
|
-
import { Animated } from 'react-native';
|
|
3
|
-
export declare function useShimmerAnimation(memoData: any): Animated.Value;
|
|
4
2
|
export declare const Shimmer: import("@fluentui-react-native/composition").ComposeFactoryComponent<ShimmerProps, import("./Shimmer.types").ShimmerSlotProps, import("./Shimmer.types").ShimmerTokens, import("@fluentui-react-native/framework").Theme, object>;
|
|
5
3
|
//# sourceMappingURL=Shimmer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shimmer.d.ts","sourceRoot":"","sources":["../src/Shimmer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAe,YAAY,EAAe,MAAM,iBAAiB,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,mOAsHlB,CAAC"}
|
package/lib-commonjs/Shimmer.js
CHANGED
|
@@ -33,21 +33,6 @@ var framework_1 = require("@fluentui-react-native/framework");
|
|
|
33
33
|
var react_native_1 = require("react-native");
|
|
34
34
|
var Shimmer_styling_1 = require("./Shimmer.styling");
|
|
35
35
|
var assert_never_1 = __importDefault(require("assert-never"));
|
|
36
|
-
function useShimmerAnimation(memoData) {
|
|
37
|
-
var startValue = react_1.useRef(new react_native_1.Animated.Value(0)).current;
|
|
38
|
-
react_1.useEffect(function () {
|
|
39
|
-
react_native_1.Animated.loop(react_native_1.Animated.sequence([
|
|
40
|
-
react_native_1.Animated.timing(startValue, {
|
|
41
|
-
toValue: 30,
|
|
42
|
-
duration: memoData.duration,
|
|
43
|
-
delay: memoData.delay,
|
|
44
|
-
useNativeDriver: false,
|
|
45
|
-
}),
|
|
46
|
-
])).start();
|
|
47
|
-
});
|
|
48
|
-
return startValue;
|
|
49
|
-
}
|
|
50
|
-
exports.useShimmerAnimation = useShimmerAnimation;
|
|
51
36
|
var useStyling = framework_1.buildUseStyling(Shimmer_styling_1.stylingSettings);
|
|
52
37
|
exports.Shimmer = framework_1.compose(__assign(__assign({ displayName: Shimmer_types_1.shimmerName }, Shimmer_styling_1.stylingSettings), { slots: {
|
|
53
38
|
root: react_native_svg_1.Svg,
|
|
@@ -75,7 +60,29 @@ exports.Shimmer = framework_1.compose(__assign(__assign({ displayName: Shimmer_t
|
|
|
75
60
|
props.shimmerWaveColorOpacity,
|
|
76
61
|
props.style,
|
|
77
62
|
]);
|
|
78
|
-
var startValue =
|
|
63
|
+
var startValue = react_1.useRef(new react_native_1.Animated.Value(0)).current;
|
|
64
|
+
/**
|
|
65
|
+
* https://github.com/facebook/react-native/pull/29585
|
|
66
|
+
* For Animated.loop() to work with the native driver, React Native needs this fix.
|
|
67
|
+
* It's only available in React Native 0.66+, and React Native macOS 0.62+
|
|
68
|
+
* To workaround this, let's just rerun the loop everytime the animation finishes
|
|
69
|
+
*/
|
|
70
|
+
var shimmerAnimation = react_1.useCallback(function () {
|
|
71
|
+
react_native_1.Animated.sequence([
|
|
72
|
+
react_native_1.Animated.timing(startValue, {
|
|
73
|
+
toValue: 30,
|
|
74
|
+
duration: memoizedShimmerData.duration,
|
|
75
|
+
delay: memoizedShimmerData.delay,
|
|
76
|
+
useNativeDriver: true,
|
|
77
|
+
}),
|
|
78
|
+
]).start(function () {
|
|
79
|
+
startValue.setValue(0);
|
|
80
|
+
shimmerAnimation();
|
|
81
|
+
});
|
|
82
|
+
}, [memoizedShimmerData.duration, memoizedShimmerData.delay]);
|
|
83
|
+
react_1.useEffect(function () {
|
|
84
|
+
shimmerAnimation();
|
|
85
|
+
});
|
|
79
86
|
return function (rest) {
|
|
80
87
|
var _a = framework_1.mergeProps(props, rest), elements = _a.elements, mergedProps = __rest(_a, ["elements"]);
|
|
81
88
|
var rows = [];
|
|
@@ -93,6 +100,8 @@ exports.Shimmer = framework_1.compose(__assign(__assign({ displayName: Shimmer_t
|
|
|
93
100
|
}
|
|
94
101
|
}
|
|
95
102
|
}
|
|
103
|
+
// Flip the SVG if we are running in RTL
|
|
104
|
+
var rtlTransfrom = react_native_1.I18nManager.isRTL ? { translateX: memoizedShimmerData.containerWidth, scaleX: -1 } : {};
|
|
96
105
|
return (framework_1.withSlots(Slots.root, __assign({}, mergedProps),
|
|
97
106
|
framework_1.withSlots(react_native_svg_1.Defs, null,
|
|
98
107
|
framework_1.withSlots(AnimatedLinearGradient, { id: "gradient", x1: startValue, y1: memoizedShimmerData.angle, x2: "-1", y2: "-1" },
|
|
@@ -100,7 +109,8 @@ exports.Shimmer = framework_1.compose(__assign(__assign({ displayName: Shimmer_t
|
|
|
100
109
|
framework_1.withSlots(react_native_svg_1.Stop, { offset: "20%", stopColor: memoizedShimmerData.shimmerWaveColor, stopOpacity: memoizedShimmerData.shimmerWaveColorOpacity }),
|
|
101
110
|
framework_1.withSlots(react_native_svg_1.Stop, { offset: "30%", stopColor: memoizedShimmerData.shimmerColor, stopOpacity: memoizedShimmerData.shimmerColorOpacity })),
|
|
102
111
|
framework_1.withSlots(react_native_svg_1.ClipPath, { id: "shimmerView" }, rows)),
|
|
103
|
-
framework_1.withSlots(react_native_svg_1.
|
|
112
|
+
framework_1.withSlots(react_native_svg_1.G, { transform: rtlTransfrom },
|
|
113
|
+
framework_1.withSlots(react_native_svg_1.Rect, { x: "0", y: "0", width: memoizedShimmerData.containerWidth, height: memoizedShimmerData.containerHeight, fill: "url(#gradient)", clipPath: "url(#shimmerView)" }))));
|
|
104
114
|
};
|
|
105
115
|
} }));
|
|
106
116
|
//# sourceMappingURL=Shimmer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shimmer.js","sourceRoot":"","sources":["../src/Shimmer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qBAAqB;AACrB,+
|
|
1
|
+
{"version":3,"file":"Shimmer.js","sourceRoot":"","sources":["../src/Shimmer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qBAAqB;AACrB,+BAAgE;AAChE,qDAA+G;AAC/G,iDAAyE;AACzE,8DAA6G;AAC7G,6CAAqD;AACrD,qDAAoD;AACpD,8DAAuC;AAEvC,IAAM,UAAU,GAAG,2BAAe,CAAC,iCAAe,CAAC,CAAC;AACvC,QAAA,OAAO,GAAG,mBAAO,qBAC5B,WAAW,EAAE,2BAAW,IACrB,iCAAe,KAClB,KAAK,EAAE;QACL,IAAI,EAAE,sBAAG;KACV,EACD,MAAM,EAAE,UAAC,KAAmB,EAAE,QAA+B;QAC3D,IAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAM,sBAAsB,GAAG,uBAAQ,CAAC,uBAAuB,CAAC,iCAAc,CAAC,CAAC;QAChF,IAAM,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC;QACtC,IAAM,mBAAmB,GAAG,eAAO,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,GAAE,CAAC,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM;YACtE,eAAe,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,QAAQ,GAAE,CAAC,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,QAAQ,EAAE,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,cAAM,CAAC,IAAI,uBAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;QAEzD;;;;;WAKG;QACH,IAAM,gBAAgB,GAAG,mBAAW,CAAC;YACnC,uBAAQ,CAAC,QAAQ,CAAC;gBAChB,uBAAQ,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,iBAAS,CAAC;YACR,gBAAgB,EAAE,CAAC;QACrB,CAAC,CAAC,CAAC;QAEH,OAAO,UAAC,IAAkB;YACxB,IAAM,wCAAsD,EAApD,sBAAQ,EAAE,sCAA0C,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,sBAAC,uBAAI,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,sBAAC,yBAAM,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,sBAAW,CAAC,OAAO,CAAC,CAAC;qBACtB;iBACF;aACF;YAED,wCAAwC;YACxC,IAAM,YAAY,GAAoB,0BAAW,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,sBAAC,KAAK,CAAC,IAAI,eAAK,WAAW;gBACzB,sBAAC,uBAAI;oBACH,sBAAC,sBAAsB,IAAC,EAAE,EAAC,UAAU,EAAC,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,mBAAmB,CAAC,KAAK,EAAE,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI;wBAClG,sBAAC,uBAAI,IAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAE,mBAAmB,CAAC,YAAY,EAAE,WAAW,EAAE,mBAAmB,CAAC,mBAAmB,GAAI;wBACxH,sBAAC,uBAAI,IACH,MAAM,EAAC,KAAK,EACZ,SAAS,EAAE,mBAAmB,CAAC,gBAAgB,EAC/C,WAAW,EAAE,mBAAmB,CAAC,uBAAuB,GACxD;wBACF,sBAAC,uBAAI,IAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAE,mBAAmB,CAAC,YAAY,EAAE,WAAW,EAAE,mBAAmB,CAAC,mBAAmB,GAAI,CACjG;oBACzB,sBAAC,2BAAQ,IAAC,EAAE,EAAC,aAAa,IAAE,IAAI,CAAY,CACvC;gBACP,sBAAC,oBAAC,IAAC,SAAS,EAAE,YAAY;oBACxB,sBAAC,uBAAI,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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/experimental-shimmer",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.1",
|
|
4
4
|
"description": "A cross-platform Fluent Shimmer component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -14,19 +14,19 @@
|
|
|
14
14
|
"prettier-fix": "fluentui-scripts prettier --fix true"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@fluentui-react-native/framework": "0.
|
|
18
|
-
"@fluentui-react-native/tokens": ">=0.
|
|
17
|
+
"@fluentui-react-native/framework": "0.7.1",
|
|
18
|
+
"@fluentui-react-native/tokens": ">=0.11.1 <1.0.0",
|
|
19
19
|
"react-native-svg": "^12.1.1"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
|
-
"@
|
|
22
|
+
"@fluentui-react-native/eslint-config-rules": "^0.1.1",
|
|
23
|
+
"@types/react-native": "^0.64.0",
|
|
23
24
|
"@uifabricshared/build-native": "^0.1.1",
|
|
24
|
-
"@uifabricshared/eslint-config-rules": "^0.1.1",
|
|
25
25
|
"assert-never": "^1.2.1",
|
|
26
|
-
"react-native": "^0.
|
|
26
|
+
"react-native": "^0.64.3"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
|
-
"react-native": ">=0.
|
|
29
|
+
"react-native": ">=0.64.3"
|
|
30
30
|
},
|
|
31
31
|
"author": "",
|
|
32
32
|
"license": "MIT"
|
package/src/Shimmer.tsx
CHANGED
|
@@ -1,29 +1,12 @@
|
|
|
1
1
|
/** @jsx withSlots */
|
|
2
|
-
import { useRef, useEffect, useMemo } from 'react';
|
|
3
|
-
import { Circle, ClipPath, Defs, LinearGradient, Rect, Stop, Svg } from 'react-native-svg';
|
|
2
|
+
import { useRef, useEffect, useMemo, useCallback } from 'react';
|
|
3
|
+
import { Circle, ClipPath, Defs, LinearGradient, Rect, Stop, Svg, G, TransformObject } from 'react-native-svg';
|
|
4
4
|
import { shimmerName, ShimmerProps, ShimmerType } from './Shimmer.types';
|
|
5
5
|
import { compose, mergeProps, withSlots, UseSlots, buildUseStyling } from '@fluentui-react-native/framework';
|
|
6
|
-
import { Animated } from 'react-native';
|
|
6
|
+
import { Animated, I18nManager } from 'react-native';
|
|
7
7
|
import { stylingSettings } from './Shimmer.styling';
|
|
8
8
|
import assertNever from 'assert-never';
|
|
9
9
|
|
|
10
|
-
export function useShimmerAnimation(memoData: any) {
|
|
11
|
-
const startValue = useRef(new Animated.Value(0)).current;
|
|
12
|
-
useEffect(() => {
|
|
13
|
-
Animated.loop(
|
|
14
|
-
Animated.sequence([
|
|
15
|
-
Animated.timing(startValue, {
|
|
16
|
-
toValue: 30,
|
|
17
|
-
duration: memoData.duration,
|
|
18
|
-
delay: memoData.delay,
|
|
19
|
-
useNativeDriver: false,
|
|
20
|
-
}),
|
|
21
|
-
]),
|
|
22
|
-
).start();
|
|
23
|
-
});
|
|
24
|
-
return startValue;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
10
|
const useStyling = buildUseStyling(stylingSettings);
|
|
28
11
|
export const Shimmer = compose<ShimmerType>({
|
|
29
12
|
displayName: shimmerName,
|
|
@@ -35,7 +18,6 @@ export const Shimmer = compose<ShimmerType>({
|
|
|
35
18
|
const Slots = useSlots(props);
|
|
36
19
|
const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
|
|
37
20
|
const tokens = useStyling(props).root;
|
|
38
|
-
|
|
39
21
|
const memoizedShimmerData = useMemo(
|
|
40
22
|
() => ({
|
|
41
23
|
angle: props.angle ? props.angle : tokens['angle'],
|
|
@@ -60,7 +42,31 @@ export const Shimmer = compose<ShimmerType>({
|
|
|
60
42
|
],
|
|
61
43
|
);
|
|
62
44
|
|
|
63
|
-
const startValue =
|
|
45
|
+
const startValue = useRef(new Animated.Value(0)).current;
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* https://github.com/facebook/react-native/pull/29585
|
|
49
|
+
* For Animated.loop() to work with the native driver, React Native needs this fix.
|
|
50
|
+
* It's only available in React Native 0.66+, and React Native macOS 0.62+
|
|
51
|
+
* To workaround this, let's just rerun the loop everytime the animation finishes
|
|
52
|
+
*/
|
|
53
|
+
const shimmerAnimation = useCallback(() => {
|
|
54
|
+
Animated.sequence([
|
|
55
|
+
Animated.timing(startValue, {
|
|
56
|
+
toValue: 30,
|
|
57
|
+
duration: memoizedShimmerData.duration,
|
|
58
|
+
delay: memoizedShimmerData.delay,
|
|
59
|
+
useNativeDriver: true,
|
|
60
|
+
}),
|
|
61
|
+
]).start(() => {
|
|
62
|
+
startValue.setValue(0);
|
|
63
|
+
shimmerAnimation();
|
|
64
|
+
});
|
|
65
|
+
}, [memoizedShimmerData.duration, memoizedShimmerData.delay]);
|
|
66
|
+
|
|
67
|
+
useEffect(() => {
|
|
68
|
+
shimmerAnimation();
|
|
69
|
+
});
|
|
64
70
|
|
|
65
71
|
return (rest: ShimmerProps) => {
|
|
66
72
|
const { elements, ...mergedProps } = mergeProps(props, rest);
|
|
@@ -89,6 +95,9 @@ export const Shimmer = compose<ShimmerType>({
|
|
|
89
95
|
}
|
|
90
96
|
}
|
|
91
97
|
|
|
98
|
+
// Flip the SVG if we are running in RTL
|
|
99
|
+
const rtlTransfrom: TransformObject = I18nManager.isRTL ? { translateX: memoizedShimmerData.containerWidth, scaleX: -1 } : {};
|
|
100
|
+
|
|
92
101
|
return (
|
|
93
102
|
<Slots.root {...mergedProps}>
|
|
94
103
|
<Defs>
|
|
@@ -103,14 +112,16 @@ export const Shimmer = compose<ShimmerType>({
|
|
|
103
112
|
</AnimatedLinearGradient>
|
|
104
113
|
<ClipPath id="shimmerView">{rows}</ClipPath>
|
|
105
114
|
</Defs>
|
|
106
|
-
<
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
115
|
+
<G transform={rtlTransfrom}>
|
|
116
|
+
<Rect
|
|
117
|
+
x="0"
|
|
118
|
+
y="0"
|
|
119
|
+
width={memoizedShimmerData.containerWidth}
|
|
120
|
+
height={memoizedShimmerData.containerHeight}
|
|
121
|
+
fill="url(#gradient)"
|
|
122
|
+
clipPath="url(#shimmerView)"
|
|
123
|
+
/>
|
|
124
|
+
</G>
|
|
114
125
|
</Slots.root>
|
|
115
126
|
);
|
|
116
127
|
};
|