@fluentui-react-native/experimental-shimmer 0.13.6 → 0.13.8
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 +42 -1
- package/CHANGELOG.md +10 -2
- package/eslint.config.js +3 -0
- package/lib/Shimmer.js +38 -58
- package/lib/Shimmer.js.map +1 -1
- package/lib/Shimmer.styling.js +3 -3
- package/lib/Shimmer.styling.js.map +1 -1
- package/lib/Shimmer.styling.win32.js +9 -9
- package/lib/Shimmer.styling.win32.js.map +1 -1
- package/lib/Shimmer.test.js +13 -71
- package/lib/Shimmer.test.js.map +1 -1
- package/lib/Shimmer.types.shared.js +1 -1
- package/lib/Shimmer.types.shared.js.map +1 -1
- package/lib/Shimmer.win32.js +33 -50
- package/lib/Shimmer.win32.js.map +1 -1
- package/lib/ShimmerTokens.android.js +9 -11
- package/lib/ShimmerTokens.android.js.map +1 -1
- package/lib/ShimmerTokens.ios.js +9 -11
- package/lib/ShimmerTokens.ios.js.map +1 -1
- package/lib/ShimmerTokens.js +10 -12
- package/lib/ShimmerTokens.js.map +1 -1
- package/lib/ShimmerTokens.win32.js +11 -13
- package/lib/ShimmerTokens.win32.js.map +1 -1
- package/lib/SvgShapeToPath.js +7 -7
- package/lib/SvgShapeToPath.js.map +1 -1
- package/lib/consts.android.js +3 -3
- package/lib/consts.android.js.map +1 -1
- package/lib/consts.ios.js +3 -3
- package/lib/consts.ios.js.map +1 -1
- package/lib/consts.js +3 -3
- package/lib/consts.js.map +1 -1
- package/lib/consts.win32.js +3 -3
- package/lib/consts.win32.js.map +1 -1
- package/lib-commonjs/Shimmer.js +45 -65
- package/lib-commonjs/Shimmer.js.map +1 -1
- package/lib-commonjs/Shimmer.styling.js +5 -5
- package/lib-commonjs/Shimmer.styling.js.map +1 -1
- package/lib-commonjs/Shimmer.styling.win32.js +11 -11
- package/lib-commonjs/Shimmer.styling.win32.js.map +1 -1
- package/lib-commonjs/Shimmer.test.js +16 -74
- package/lib-commonjs/Shimmer.test.js.map +1 -1
- package/lib-commonjs/Shimmer.win32.js +42 -59
- package/lib-commonjs/Shimmer.win32.js.map +1 -1
- package/lib-commonjs/ShimmerTokens.android.js +10 -12
- package/lib-commonjs/ShimmerTokens.android.js.map +1 -1
- package/lib-commonjs/ShimmerTokens.ios.js +10 -12
- package/lib-commonjs/ShimmerTokens.ios.js.map +1 -1
- package/lib-commonjs/ShimmerTokens.js +12 -14
- package/lib-commonjs/ShimmerTokens.js.map +1 -1
- package/lib-commonjs/ShimmerTokens.win32.js +12 -14
- package/lib-commonjs/ShimmerTokens.win32.js.map +1 -1
- package/lib-commonjs/SvgShapeToPath.js +7 -7
- package/lib-commonjs/SvgShapeToPath.js.map +1 -1
- package/lib-commonjs/Win32ShimmerNativeComponent.js +1 -13
- package/lib-commonjs/Win32ShimmerNativeComponent.js.map +1 -1
- package/package.json +18 -6
- package/.eslintrc.js +0 -3
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,48 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/experimental-shimmer",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Fri, 11 Jul 2025 19:50:54 GMT",
|
|
6
|
+
"version": "0.13.8",
|
|
7
|
+
"tag": "@fluentui-react-native/experimental-shimmer_v0.13.8",
|
|
8
|
+
"comments": {
|
|
9
|
+
"none": [
|
|
10
|
+
{
|
|
11
|
+
"author": "4123478+tido64@users.noreply.github.com",
|
|
12
|
+
"package": "@fluentui-react-native/experimental-shimmer",
|
|
13
|
+
"commit": "79bb06f6bbfd0a36f9d2ef371f4857be9660f027",
|
|
14
|
+
"comment": "Fixed `align-deps` warnings"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "sanajmi@microsoft.com",
|
|
18
|
+
"package": "@fluentui-react-native/experimental-shimmer",
|
|
19
|
+
"commit": "405ca368dc3f2963bfc252a1952b1e14ff503499",
|
|
20
|
+
"comment": "fix: run `beachball sync` to sync package versions with NPM"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "ruaraki@microsoft.com",
|
|
24
|
+
"package": "@fluentui-react-native/experimental-shimmer",
|
|
25
|
+
"commit": "a245202877ef7f2be9ab5f0e1356b2270957e693",
|
|
26
|
+
"comment": "Run bump-versions"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "jasonmo@microsoft.com",
|
|
30
|
+
"package": "@fluentui-react-native/experimental-shimmer",
|
|
31
|
+
"commit": "54087dca787180bbf34630470cd0d06e88366b30",
|
|
32
|
+
"comment": "update eslint to 9.x and use new flat config format with security rules"
|
|
33
|
+
}
|
|
34
|
+
],
|
|
35
|
+
"patch": [
|
|
36
|
+
{
|
|
37
|
+
"author": "jasonmo@microsoft.com",
|
|
38
|
+
"package": "@fluentui-react-native/experimental-shimmer",
|
|
39
|
+
"commit": "479b93cea460a26df70c55b5d3335927ed374713",
|
|
40
|
+
"comment": "update builds to use node16 settings and modern export maps"
|
|
41
|
+
}
|
|
42
|
+
]
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"date": "Thu, 10 Jul 2025 19:20:23 GMT",
|
|
6
47
|
"version": "0.13.6",
|
|
7
48
|
"tag": "@fluentui-react-native/experimental-shimmer_v0.13.6",
|
|
8
49
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,20 @@
|
|
|
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 Fri, 11 Jul 2025 19:50:54 GMT and should not be manually modified. -->
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.13.8
|
|
8
|
+
|
|
9
|
+
Fri, 11 Jul 2025 19:50:54 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- update builds to use node16 settings and modern export maps (jasonmo@microsoft.com)
|
|
14
|
+
|
|
7
15
|
## 0.13.6
|
|
8
16
|
|
|
9
|
-
Thu,
|
|
17
|
+
Thu, 10 Jul 2025 19:20:23 GMT
|
|
10
18
|
|
|
11
19
|
### Patches
|
|
12
20
|
|
package/eslint.config.js
ADDED
package/lib/Shimmer.js
CHANGED
|
@@ -1,25 +1,3 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
/** @jsxRuntime classic */
|
|
24
2
|
/** @jsx withSlots */
|
|
25
3
|
import { useRef, useEffect, useMemo, useCallback } from 'react';
|
|
@@ -29,30 +7,31 @@ import assertNever from 'assert-never';
|
|
|
29
7
|
import { Circle, ClipPath, Defs, LinearGradient, Rect, Stop, Svg, G } from 'react-native-svg';
|
|
30
8
|
import { stylingSettings } from './Shimmer.styling';
|
|
31
9
|
import { shimmerName } from './Shimmer.types';
|
|
32
|
-
|
|
33
|
-
export
|
|
10
|
+
const useStyling = buildUseStyling(stylingSettings);
|
|
11
|
+
export const Shimmer = compose({
|
|
12
|
+
displayName: shimmerName,
|
|
13
|
+
...stylingSettings,
|
|
14
|
+
slots: {
|
|
34
15
|
root: Svg,
|
|
35
|
-
},
|
|
36
|
-
|
|
16
|
+
},
|
|
17
|
+
useRender: (props, useSlots) => {
|
|
18
|
+
const Slots = useSlots(props);
|
|
37
19
|
props = mergeProps(props, Slots.root({}).props);
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
shimmerWaveColorOpacity: tokens['shimmerWaveColorOpacity'],
|
|
54
|
-
});
|
|
55
|
-
}, [
|
|
20
|
+
const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
|
|
21
|
+
const tokens = useStyling(props).root;
|
|
22
|
+
const memoizedShimmerData = useMemo(() => ({
|
|
23
|
+
angle: props.angle ? props.angle : tokens['angle'],
|
|
24
|
+
backgroundColor: props?.style?.['backgroundColor'] ? props?.style['backgroundColor'] : tokens['backgroundColor'] ?? 'transparent',
|
|
25
|
+
containerBorderRadius: props?.style?.['borderRadius'] ? props?.style['borderRadius'] : 0,
|
|
26
|
+
containerWidth: props?.style?.['width'] ? props?.style['width'] : '100%',
|
|
27
|
+
containerHeight: props?.style?.['height'] ? props?.style['height'] : '100%',
|
|
28
|
+
delay: props.delay ? props.delay : tokens['delay'],
|
|
29
|
+
duration: props.duration ? props.duration : tokens['duration'],
|
|
30
|
+
shimmerColor: props.shimmerColor ? props.shimmerColor : tokens['shimmerColor'],
|
|
31
|
+
shimmerColorOpacity: tokens['shimmerColorOpacity'],
|
|
32
|
+
shimmerWaveColor: props.shimmerWaveColor ? props.shimmerWaveColor : tokens['shimmerWaveColor'],
|
|
33
|
+
shimmerWaveColorOpacity: tokens['shimmerWaveColorOpacity'],
|
|
34
|
+
}), [
|
|
56
35
|
props.angle,
|
|
57
36
|
props.backgroundColor,
|
|
58
37
|
props.delay,
|
|
@@ -69,10 +48,10 @@ export var Shimmer = compose(__assign(__assign({ displayName: shimmerName }, sty
|
|
|
69
48
|
* Similarly the endValue is set to 3 to make sure the gradient animation exits the entire screen for any angle.
|
|
70
49
|
* In RTL, startValue and endValue are flipped to ensure that the animation moves from right to left.
|
|
71
50
|
*/
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
51
|
+
const startValue = I18nManager.isRTL ? 3 : -2;
|
|
52
|
+
const endValue = I18nManager.isRTL ? -2 : 3;
|
|
53
|
+
const x1 = useRef(new Animated.Value(startValue)).current;
|
|
54
|
+
const shimmerAnimation = useCallback(() => {
|
|
76
55
|
Animated.loop(Animated.timing(x1, {
|
|
77
56
|
toValue: endValue,
|
|
78
57
|
duration: memoizedShimmerData.duration,
|
|
@@ -80,15 +59,15 @@ export var Shimmer = compose(__assign(__assign({ displayName: shimmerName }, sty
|
|
|
80
59
|
useNativeDriver: true,
|
|
81
60
|
})).start();
|
|
82
61
|
}, [memoizedShimmerData.delay, memoizedShimmerData.duration]);
|
|
83
|
-
useEffect(
|
|
62
|
+
useEffect(() => {
|
|
84
63
|
shimmerAnimation();
|
|
85
64
|
});
|
|
86
|
-
return
|
|
87
|
-
|
|
88
|
-
|
|
65
|
+
return (rest) => {
|
|
66
|
+
const { elements, ...mergedProps } = mergeProps(props, rest);
|
|
67
|
+
const rows = [];
|
|
89
68
|
if (elements) {
|
|
90
|
-
for (
|
|
91
|
-
|
|
69
|
+
for (let i = 0; i < elements.length; i++) {
|
|
70
|
+
const element = elements[i];
|
|
92
71
|
if (element.type == 'rect') {
|
|
93
72
|
rows.push(withSlots(Rect, { key: i, width: element.width, height: element.height, x: element.x, y: element.y, rx: element.borderRadiusX, ry: element.borderRadiusY }));
|
|
94
73
|
}
|
|
@@ -101,12 +80,12 @@ export var Shimmer = compose(__assign(__assign({ displayName: shimmerName }, sty
|
|
|
101
80
|
}
|
|
102
81
|
}
|
|
103
82
|
// Flip the SVG if we are running in RTL
|
|
104
|
-
|
|
83
|
+
const rtlTransfrom = I18nManager.isRTL
|
|
105
84
|
? { translateX: memoizedShimmerData.containerWidth, scaleX: -1 }
|
|
106
85
|
: { translateX: undefined, scaleX: undefined };
|
|
107
|
-
return (withSlots(Slots.root,
|
|
86
|
+
return (withSlots(Slots.root, { ...mergedProps },
|
|
108
87
|
withSlots(Defs, null,
|
|
109
|
-
withSlots(AnimatedLinearGradient, { id: "gradient", x1: x1, x2: "-1", gradientTransform:
|
|
88
|
+
withSlots(AnimatedLinearGradient, { id: "gradient", x1: x1, x2: "-1", gradientTransform: `rotate(${memoizedShimmerData.angle})` },
|
|
110
89
|
withSlots(Stop, { offset: "10%", stopColor: memoizedShimmerData.shimmerColor, stopOpacity: memoizedShimmerData.shimmerColorOpacity }),
|
|
111
90
|
withSlots(Stop, { offset: "20%", stopColor: memoizedShimmerData.shimmerWaveColor, stopOpacity: memoizedShimmerData.shimmerWaveColorOpacity }),
|
|
112
91
|
withSlots(Stop, { offset: "30%", stopColor: memoizedShimmerData.shimmerColor, stopOpacity: memoizedShimmerData.shimmerColorOpacity })),
|
|
@@ -115,5 +94,6 @@ export var Shimmer = compose(__assign(__assign({ displayName: shimmerName }, sty
|
|
|
115
94
|
withSlots(Rect, { x: "0", y: "0", width: memoizedShimmerData.containerWidth, height: memoizedShimmerData.containerHeight, fill: memoizedShimmerData.backgroundColor, rx: memoizedShimmerData.containerBorderRadius }),
|
|
116
95
|
withSlots(Rect, { x: "0", y: "0", width: memoizedShimmerData.containerWidth, height: memoizedShimmerData.containerHeight, fill: "url(#gradient)", rx: memoizedShimmerData.containerBorderRadius, clipPath: "url(#shimmerView)" }))));
|
|
117
96
|
};
|
|
118
|
-
}
|
|
97
|
+
},
|
|
98
|
+
});
|
|
119
99
|
//# 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":"
|
|
1
|
+
{"version":3,"file":"Shimmer.js","sourceRoot":"","sources":["../src/Shimmer.tsx"],"names":[],"mappings":"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"}
|
package/lib/Shimmer.styling.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { buildProps } from '@fluentui-react-native/framework';
|
|
2
2
|
import { shimmerName } from './Shimmer.types';
|
|
3
3
|
import { defaultShimmerTokens } from './ShimmerTokens';
|
|
4
|
-
export
|
|
4
|
+
export const stylingSettings = {
|
|
5
5
|
tokens: [defaultShimmerTokens, shimmerName],
|
|
6
6
|
tokensThatAreAlsoProps: 'all',
|
|
7
7
|
slotProps: {
|
|
8
|
-
root: buildProps(
|
|
8
|
+
root: buildProps((tokens) => ({
|
|
9
9
|
accessibilityRole: 'progressbar',
|
|
10
10
|
accessible: true,
|
|
11
11
|
style: { overflow: 'hidden', backgroundColor: tokens.backgroundColor },
|
|
@@ -16,7 +16,7 @@ export var stylingSettings = {
|
|
|
16
16
|
shimmerColorOpacity: tokens.shimmerColorOpacity,
|
|
17
17
|
shimmerWaveColor: tokens.shimmerWaveColor,
|
|
18
18
|
shimmerWaveColorOpacity: tokens.shimmerWaveColorOpacity,
|
|
19
|
-
})
|
|
19
|
+
}), [
|
|
20
20
|
'angle',
|
|
21
21
|
'delay',
|
|
22
22
|
'duration',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shimmer.styling.js","sourceRoot":"","sources":["../src/Shimmer.styling.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAG9D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"Shimmer.styling.js","sourceRoot":"","sources":["../src/Shimmer.styling.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAG9D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,CAAC,MAAM,eAAe,GAAqE;IAC/F,MAAM,EAAE,CAAC,oBAAoB,EAAE,WAAW,CAAC;IAC3C,sBAAsB,EAAE,KAAK;IAC7B,SAAS,EAAE;QACT,IAAI,EAAE,UAAU,CACd,CAAC,MAAqB,EAAE,EAAE,CAAC,CAAC;YAC1B,iBAAiB,EAAE,aAAa;YAChC,UAAU,EAAE,IAAI;YAChB,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,CAAC,eAAe,EAAE;YACtE,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,EACF;YACE,OAAO;YACP,OAAO;YACP,UAAU;YACV,cAAc;YACd,qBAAqB;YACrB,kBAAkB;YAClB,yBAAyB;YACzB,iBAAiB;SAClB,CACF;KACF;CACF,CAAC"}
|
|
@@ -4,29 +4,29 @@ import { defaultShimmerTokens } from './ShimmerTokens.win32';
|
|
|
4
4
|
/**
|
|
5
5
|
* tell the styling hook how to build up the tokens
|
|
6
6
|
*/
|
|
7
|
-
export
|
|
7
|
+
export const stylingSettings = {
|
|
8
8
|
tokens: [defaultShimmerTokens, shimmerName],
|
|
9
9
|
tokensThatAreAlsoProps: 'all',
|
|
10
10
|
slotProps: {
|
|
11
|
-
root: buildProps(
|
|
11
|
+
root: buildProps((tokens) => ({
|
|
12
12
|
accessibilityRole: 'progressbar',
|
|
13
13
|
accessible: true,
|
|
14
14
|
style: { overflow: 'hidden', backgroundColor: tokens.backgroundColor },
|
|
15
|
-
})
|
|
16
|
-
shimmerWaveContainer: buildProps(
|
|
15
|
+
}), ['backgroundColor']),
|
|
16
|
+
shimmerWaveContainer: buildProps((tokens) => ({
|
|
17
17
|
delay: tokens.delay,
|
|
18
18
|
duration: tokens.duration,
|
|
19
19
|
shimmerColor: tokens.shimmerColor,
|
|
20
|
-
})
|
|
21
|
-
shimmerWave: buildProps(
|
|
20
|
+
}), ['delay', 'duration', 'shimmerColor']),
|
|
21
|
+
shimmerWave: buildProps((tokens) => ({
|
|
22
22
|
angle: tokens.angle,
|
|
23
23
|
shimmerColor: tokens.shimmerColor,
|
|
24
24
|
shimmerWaveColor: tokens.shimmerWaveColor,
|
|
25
25
|
shimmerWaveWidth: tokens.shimmerWaveWidth,
|
|
26
|
-
})
|
|
27
|
-
clippingMask: buildProps(
|
|
26
|
+
}), ['angle', 'shimmerColor', 'shimmerWaveColor', 'shimmerWaveWidth']),
|
|
27
|
+
clippingMask: buildProps((tokens) => ({
|
|
28
28
|
backgroundColor: tokens.backgroundColor,
|
|
29
|
-
})
|
|
29
|
+
}), ['backgroundColor']),
|
|
30
30
|
},
|
|
31
31
|
};
|
|
32
32
|
//# sourceMappingURL=Shimmer.styling.win32.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shimmer.styling.win32.js","sourceRoot":"","sources":["../src/Shimmer.styling.win32.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAG9D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAE7D;;GAEG;AACH,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"Shimmer.styling.win32.js","sourceRoot":"","sources":["../src/Shimmer.styling.win32.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAG9D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAE7D;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAqE;IAC/F,MAAM,EAAE,CAAC,oBAAoB,EAAE,WAAW,CAAC;IAC3C,sBAAsB,EAAE,KAAK;IAC7B,SAAS,EAAE;QACT,IAAI,EAAE,UAAU,CACd,CAAC,MAAqB,EAAE,EAAE,CAAC,CAAC;YAC1B,iBAAiB,EAAE,aAAa;YAChC,UAAU,EAAE,IAAI;YAChB,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,CAAC,eAAe,EAAE;SACvE,CAAC,EACF,CAAC,iBAAiB,CAAC,CACpB;QAED,oBAAoB,EAAE,UAAU,CAC9B,CAAC,MAAqB,EAAE,EAAE,CAAC,CAAC;YAC1B,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ;YACzB,YAAY,EAAE,MAAM,CAAC,YAAY;SAClC,CAAC,EACF,CAAC,OAAO,EAAE,UAAU,EAAE,cAAc,CAAC,CACtC;QAED,WAAW,EAAE,UAAU,CACrB,CAAC,MAAqB,EAAE,EAAE,CAAC,CAAC;YAC1B,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,YAAY,EAAE,MAAM,CAAC,YAAY;YACjC,gBAAgB,EAAE,MAAM,CAAC,gBAAgB;YACzC,gBAAgB,EAAE,MAAM,CAAC,gBAAgB;SAC1C,CAAC,EACF,CAAC,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,kBAAkB,CAAC,CAClE;QAED,YAAY,EAAE,UAAU,CACtB,CAAC,MAAqB,EAAE,EAAE,CAAC,CAAC;YAC1B,eAAe,EAAE,MAAM,CAAC,eAAe;SACxC,CAAC,EACF,CAAC,iBAAiB,CAAC,CACpB;KACF;CACF,CAAC"}
|
package/lib/Shimmer.test.js
CHANGED
|
@@ -1,39 +1,3 @@
|
|
|
1
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
|
-
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
11
|
-
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
12
|
-
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
13
|
-
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
14
|
-
function step(op) {
|
|
15
|
-
if (f) throw new TypeError("Generator is already executing.");
|
|
16
|
-
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
17
|
-
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
18
|
-
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
19
|
-
switch (op[0]) {
|
|
20
|
-
case 0: case 1: t = op; break;
|
|
21
|
-
case 4: _.label++; return { value: op[1], done: false };
|
|
22
|
-
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
23
|
-
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
24
|
-
default:
|
|
25
|
-
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
26
|
-
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
27
|
-
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
28
|
-
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
29
|
-
if (t[2]) _.ops.pop();
|
|
30
|
-
_.trys.pop(); continue;
|
|
31
|
-
}
|
|
32
|
-
op = body.call(thisArg, _);
|
|
33
|
-
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
34
|
-
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
1
|
import * as React from 'react';
|
|
38
2
|
import * as renderer from 'react-test-renderer';
|
|
39
3
|
import { Shimmer } from './Shimmer';
|
|
@@ -68,44 +32,22 @@ function shimmerRects() {
|
|
|
68
32
|
},
|
|
69
33
|
];
|
|
70
34
|
}
|
|
71
|
-
|
|
72
|
-
describe('Shimmer component tests',
|
|
73
|
-
beforeAll(
|
|
35
|
+
const style = { width: 300, height: 100 };
|
|
36
|
+
describe('Shimmer component tests', () => {
|
|
37
|
+
beforeAll(() => {
|
|
74
38
|
// mocks out setTimeout and other timer functions with mock functions, test will fail without this as we're using Animated API
|
|
75
39
|
jest.useFakeTimers();
|
|
76
40
|
jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
|
|
77
41
|
});
|
|
78
|
-
it('Shimmer default',
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
case 1:
|
|
89
|
-
_a.sent();
|
|
90
|
-
return [2 /*return*/];
|
|
91
|
-
}
|
|
92
|
-
});
|
|
93
|
-
}); });
|
|
94
|
-
it('Shimmer with style prop', function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
95
|
-
var tree;
|
|
96
|
-
return __generator(this, function (_a) {
|
|
97
|
-
switch (_a.label) {
|
|
98
|
-
case 0:
|
|
99
|
-
tree = renderer.create(React.createElement(Shimmer, { elements: shimmerRects(), style: style })).toJSON();
|
|
100
|
-
expect(tree).toMatchSnapshot();
|
|
101
|
-
return [4 /*yield*/, renderer.act(function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
|
|
102
|
-
return [2 /*return*/, null];
|
|
103
|
-
}); }); })];
|
|
104
|
-
case 1:
|
|
105
|
-
_a.sent();
|
|
106
|
-
return [2 /*return*/];
|
|
107
|
-
}
|
|
108
|
-
});
|
|
109
|
-
}); });
|
|
42
|
+
it('Shimmer default', async () => {
|
|
43
|
+
const tree = renderer.create(React.createElement(Shimmer, { elements: shimmerRects() })).toJSON();
|
|
44
|
+
expect(tree).toMatchSnapshot();
|
|
45
|
+
await renderer.act(async () => null);
|
|
46
|
+
});
|
|
47
|
+
it('Shimmer with style prop', async () => {
|
|
48
|
+
const tree = renderer.create(React.createElement(Shimmer, { elements: shimmerRects(), style: style })).toJSON();
|
|
49
|
+
expect(tree).toMatchSnapshot();
|
|
50
|
+
await renderer.act(async () => null);
|
|
51
|
+
});
|
|
110
52
|
});
|
|
111
53
|
//# sourceMappingURL=Shimmer.test.js.map
|
package/lib/Shimmer.test.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shimmer.test.js","sourceRoot":"","sources":["../src/Shimmer.test.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Shimmer.test.js","sourceRoot":"","sources":["../src/Shimmer.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAC;AAEhD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC,SAAS,YAAY;IACnB,OAAO;QACL;YACE,IAAI,EAAE,MAAM;YACZ,aAAa,EAAE,CAAC;YAChB,aAAa,EAAE,CAAC;YAChB,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,EAAE;YACV,CAAC,EAAE,EAAE;YACL,CAAC,EAAE,EAAE;SACN;QACD;YACE,IAAI,EAAE,MAAM;YACZ,aAAa,EAAE,CAAC;YAChB,aAAa,EAAE,CAAC;YAChB,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,EAAE;YACV,CAAC,EAAE,EAAE;YACL,CAAC,EAAE,EAAE;SACN;QACD;YACE,IAAI,EAAE,MAAM;YACZ,aAAa,EAAE,CAAC;YAChB,aAAa,EAAE,CAAC;YAChB,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,EAAE;YACV,CAAC,EAAE,EAAE;YACL,CAAC,EAAE,EAAE;SACN;KACF,CAAC;AACJ,CAAC;AAED,MAAM,KAAK,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;AAE1C,QAAQ,CAAC,yBAAyB,EAAE,GAAG,EAAE;IACvC,SAAS,CAAC,GAAG,EAAE;QACb,8HAA8H;QAC9H,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,IAAI,CAAC,sDAAsD,CAAC,CAAC;IACpE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iBAAiB,EAAE,KAAK,IAAI,EAAE;QAC/B,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,oBAAC,OAAO,IAAC,QAAQ,EAAE,YAAY,EAAE,GAAI,CAAC,CAAC,MAAM,EAAE,CAAC;QAC7E,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;QAC/B,MAAM,QAAQ,CAAC,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC,IAAI,CAAC,CAAC;IACvC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;QACvC,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,oBAAC,OAAO,IAAC,QAAQ,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC,CAAC,MAAM,EAAE,CAAC;QAC3F,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;QAC/B,MAAM,QAAQ,CAAC,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC,IAAI,CAAC,CAAC;IACvC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export
|
|
1
|
+
export const shimmerName = 'Shimmer';
|
|
2
2
|
//# sourceMappingURL=Shimmer.types.shared.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shimmer.types.shared.js","sourceRoot":"","sources":["../src/Shimmer.types.shared.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"Shimmer.types.shared.js","sourceRoot":"","sources":["../src/Shimmer.types.shared.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,MAAM,WAAW,GAAG,SAAS,CAAC"}
|
package/lib/Shimmer.win32.js
CHANGED
|
@@ -3,28 +3,6 @@
|
|
|
3
3
|
* Licensed under the MIT License.
|
|
4
4
|
* @format
|
|
5
5
|
*/
|
|
6
|
-
var __assign = (this && this.__assign) || function () {
|
|
7
|
-
__assign = Object.assign || function(t) {
|
|
8
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
-
s = arguments[i];
|
|
10
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
11
|
-
t[p] = s[p];
|
|
12
|
-
}
|
|
13
|
-
return t;
|
|
14
|
-
};
|
|
15
|
-
return __assign.apply(this, arguments);
|
|
16
|
-
};
|
|
17
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
18
|
-
var t = {};
|
|
19
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
20
|
-
t[p] = s[p];
|
|
21
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
22
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
23
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
24
|
-
t[p[i]] = s[p[i]];
|
|
25
|
-
}
|
|
26
|
-
return t;
|
|
27
|
-
};
|
|
28
6
|
/** @jsxRuntime classic */
|
|
29
7
|
/** @jsx withSlots */
|
|
30
8
|
import { processColor, View } from 'react-native';
|
|
@@ -36,7 +14,7 @@ import { stylingSettings } from './Shimmer.styling.win32';
|
|
|
36
14
|
import { shimmerName } from './Shimmer.types.shared';
|
|
37
15
|
import { convertRectToSvgPath, convertCircleToSvgPath } from './SvgShapeToPath';
|
|
38
16
|
import RCTNativeAnimatedShimmer from './Win32ShimmerNativeComponent';
|
|
39
|
-
|
|
17
|
+
const clippingMask = (props) => {
|
|
40
18
|
/**
|
|
41
19
|
* Absolute positioning is used to overlay the clipping mask on top of the shimmer wave.
|
|
42
20
|
*
|
|
@@ -44,24 +22,24 @@ var clippingMask = function (props) {
|
|
|
44
22
|
* viewPort, starting from the origin of the viewPort and minimum coordinates of the viewBox.
|
|
45
23
|
* 'slice' removes the unnecessary remainder.
|
|
46
24
|
*/
|
|
47
|
-
|
|
48
|
-
|
|
25
|
+
const { backgroundColor, viewBoxHeight, viewBoxWidth } = props;
|
|
26
|
+
const svgProps = {
|
|
49
27
|
style: { position: 'absolute', height: viewBoxHeight, width: viewBoxWidth },
|
|
50
28
|
viewBox: '0 0 ' + viewBoxWidth + ' ' + viewBoxHeight,
|
|
51
29
|
preserveAspectRatio: 'xMinYMin slice',
|
|
52
30
|
};
|
|
53
|
-
return (withSlots(Svg,
|
|
31
|
+
return (withSlots(Svg, { ...svgProps },
|
|
54
32
|
withSlots(Defs, null,
|
|
55
33
|
withSlots(ClipPath, { id: "shimmerCuts" },
|
|
56
34
|
withSlots(Path, { d: props.clipPath, clipRule: "evenodd" }))),
|
|
57
35
|
withSlots(Rect, { width: "100%", height: "100%", fill: backgroundColor, clipPath: "url(#shimmerCuts)" })));
|
|
58
36
|
};
|
|
59
|
-
|
|
60
|
-
|
|
37
|
+
const wave = (props) => {
|
|
38
|
+
const { shimmerColor, shimmerColorOpacity, shimmerWaveColor, shimmerWaveColorOpacity, viewBoxHeight, viewBoxWidth } = props;
|
|
61
39
|
/**
|
|
62
40
|
* See the comment above for an explanation of preserveAspectRatio.
|
|
63
41
|
*/
|
|
64
|
-
|
|
42
|
+
const svgProps = {
|
|
65
43
|
style: { height: viewBoxHeight, width: viewBoxWidth },
|
|
66
44
|
viewBox: '0 0 ' + viewBoxWidth + ' ' + viewBoxHeight,
|
|
67
45
|
preserveAspectRatio: 'xMinYMin slice',
|
|
@@ -74,7 +52,7 @@ var wave = function (props) {
|
|
|
74
52
|
*/
|
|
75
53
|
if (typeof processColor(shimmerWaveColor) !== 'object' && typeof processColor(shimmerColor) !== 'object') {
|
|
76
54
|
// The typical path where the provided shimmer colors are not OpaqueColorValues.
|
|
77
|
-
return (withSlots(Svg,
|
|
55
|
+
return (withSlots(Svg, { ...svgProps },
|
|
78
56
|
withSlots(LinearGradient, { id: "gradient" },
|
|
79
57
|
withSlots(Stop, { stopColor: shimmerColor, stopOpacity: shimmerColorOpacity }),
|
|
80
58
|
withSlots(Stop, { offset: "20%", stopColor: shimmerWaveColor, stopOpacity: shimmerWaveColorOpacity }),
|
|
@@ -85,23 +63,27 @@ var wave = function (props) {
|
|
|
85
63
|
// The unexpected path where either of the provided shimmer colors are OpaqueColorValues.
|
|
86
64
|
// scaleX is used to mimic the gradient occupying 40% of the fill since we don't know the provided width of the
|
|
87
65
|
// shimmer wave.
|
|
88
|
-
return (withSlots(Svg,
|
|
66
|
+
return (withSlots(Svg, { ...svgProps },
|
|
89
67
|
withSlots(Rect, { width: props.shimmerWaveWidth, height: "100%", fill: shimmerWaveColor, fillOpacity: shimmerWaveColorOpacity, scaleX: "0.4" })));
|
|
90
68
|
}
|
|
91
69
|
};
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
return (withSlots(RCTNativeAnimatedShimmer,
|
|
70
|
+
const waveContainer = (props) => {
|
|
71
|
+
const { shimmerColor, viewBoxHeight, viewBoxWidth } = props;
|
|
72
|
+
return (withSlots(RCTNativeAnimatedShimmer, { ...{ ...props, style: { backgroundColor: shimmerColor, height: viewBoxHeight, width: viewBoxWidth, overflow: 'hidden' } } }));
|
|
95
73
|
};
|
|
96
|
-
export
|
|
74
|
+
export const Shimmer = compose({
|
|
75
|
+
displayName: shimmerName,
|
|
76
|
+
...stylingSettings,
|
|
77
|
+
slots: {
|
|
97
78
|
root: View,
|
|
98
79
|
clippingMask: clippingMask,
|
|
99
80
|
shimmerWave: wave,
|
|
100
81
|
shimmerWaveContainer: waveContainer,
|
|
101
|
-
},
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
82
|
+
},
|
|
83
|
+
useRender: (props, useSlots) => {
|
|
84
|
+
const Slots = useSlots(props);
|
|
85
|
+
return (rest) => {
|
|
86
|
+
const { elements, ...mergedProps } = mergeProps(props, rest);
|
|
105
87
|
/**
|
|
106
88
|
* Generate a clip path from the provided element shapes, with their path parameter strings generated from their corresponding properties.
|
|
107
89
|
* Ideally this would be better possible with functions from the shape elements themselves and not to rely on our own calculations.
|
|
@@ -112,22 +94,22 @@ export var Shimmer = compose(__assign(__assign({ displayName: shimmerName }, sty
|
|
|
112
94
|
* Since we're programmatically generating the visual, we can assert our viewBox is `0 0 xMax yMax` where xMax and yMax are the greatest
|
|
113
95
|
* X and Y points used by a shape.
|
|
114
96
|
*/
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
97
|
+
let clipPathsAsMask = [];
|
|
98
|
+
let xMax = 0;
|
|
99
|
+
let yMax = 0;
|
|
118
100
|
if (elements) {
|
|
119
|
-
elements.forEach(
|
|
101
|
+
elements.forEach((element) => {
|
|
120
102
|
if (element.type == 'circle') {
|
|
121
103
|
clipPathsAsMask = clipPathsAsMask.concat(convertCircleToSvgPath(element));
|
|
122
|
-
|
|
123
|
-
|
|
104
|
+
const xMaxCandidate = element.cx + element.radius;
|
|
105
|
+
const yMaxCandidate = element.cy + element.radius;
|
|
124
106
|
xMax = xMax >= xMaxCandidate ? xMax : xMaxCandidate;
|
|
125
107
|
yMax = yMax >= yMaxCandidate ? yMax : yMaxCandidate;
|
|
126
108
|
}
|
|
127
109
|
else if (element.type == 'rect') {
|
|
128
110
|
clipPathsAsMask = clipPathsAsMask.concat(convertRectToSvgPath(element));
|
|
129
|
-
|
|
130
|
-
|
|
111
|
+
const xMaxCandidate = element.x + element.width;
|
|
112
|
+
const yMaxCandidate = element.y + element.height;
|
|
131
113
|
xMax = xMax >= xMaxCandidate ? xMax : xMaxCandidate;
|
|
132
114
|
yMax = yMax >= yMaxCandidate ? yMax : yMaxCandidate;
|
|
133
115
|
}
|
|
@@ -142,11 +124,12 @@ export var Shimmer = compose(__assign(__assign({ displayName: shimmerName }, sty
|
|
|
142
124
|
* and drawing a rectangle around the entire svg viewBox, causing all inner elements to be "clipped out"
|
|
143
125
|
* instead of "clipped around," generating the visual we desire with the linear gradient below the mask.
|
|
144
126
|
*/
|
|
145
|
-
|
|
146
|
-
return (withSlots(Slots.root,
|
|
127
|
+
const mergedClipPath = clipPathsAsMask.join(' ').concat('M 0 0 h ' + xMax + ' v ' + yMax + ' h -' + xMax + ' z ');
|
|
128
|
+
return (withSlots(Slots.root, { ...mergedProps },
|
|
147
129
|
withSlots(Slots.shimmerWaveContainer, { viewBoxHeight: yMax, viewBoxWidth: xMax },
|
|
148
130
|
withSlots(Slots.shimmerWave, { viewBoxHeight: yMax, viewBoxWidth: xMax })),
|
|
149
131
|
withSlots(Slots.clippingMask, { clipPath: mergedClipPath, viewBoxHeight: yMax, viewBoxWidth: xMax })));
|
|
150
132
|
};
|
|
151
|
-
}
|
|
133
|
+
},
|
|
134
|
+
});
|
|
152
135
|
//# sourceMappingURL=Shimmer.win32.js.map
|