@fluentui-react-native/experimental-shimmer 0.13.5 → 0.13.7
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 +66 -1
- package/CHANGELOG.md +18 -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 +36 -17
- package/.eslintrc.js +0 -3
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
|
package/lib/Shimmer.win32.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shimmer.win32.js","sourceRoot":"","sources":["../src/Shimmer.win32.tsx"],"names":[],"mappings":"AAAA;;;;GAIG
|
|
1
|
+
{"version":3,"file":"Shimmer.win32.js","sourceRoot":"","sources":["../src/Shimmer.win32.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
import { shimmerDefaultAngle, shimmerDefaultDelay, shimmerDefaultDuration } from './consts';
|
|
2
|
-
export
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
});
|
|
12
|
-
};
|
|
2
|
+
export const defaultShimmerTokens = (theme) => ({
|
|
3
|
+
angle: shimmerDefaultAngle,
|
|
4
|
+
delay: shimmerDefaultDelay,
|
|
5
|
+
duration: shimmerDefaultDuration,
|
|
6
|
+
shimmerColor: theme.colors.neutralStencil1,
|
|
7
|
+
shimmerColorOpacity: 1,
|
|
8
|
+
shimmerWaveColor: theme.colors.neutralStencil2,
|
|
9
|
+
shimmerWaveColorOpacity: 1,
|
|
10
|
+
});
|
|
13
11
|
//# sourceMappingURL=ShimmerTokens.android.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShimmerTokens.android.js","sourceRoot":"","sources":["../src/ShimmerTokens.android.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAG5F,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"ShimmerTokens.android.js","sourceRoot":"","sources":["../src/ShimmerTokens.android.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAG5F,MAAM,CAAC,MAAM,oBAAoB,GAAwC,CAAC,KAAY,EAAE,EAAE,CACxF,CAAC;IACC,KAAK,EAAE,mBAAmB;IAC1B,KAAK,EAAE,mBAAmB;IAC1B,QAAQ,EAAE,sBAAsB;IAChC,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,eAAe;IAC1C,mBAAmB,EAAE,CAAC;IACtB,gBAAgB,EAAE,KAAK,CAAC,MAAM,CAAC,eAAe;IAC9C,uBAAuB,EAAE,CAAC;CACT,CAAA,CAAC"}
|
package/lib/ShimmerTokens.ios.js
CHANGED
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
import { shimmerDefaultAngle, shimmerDefaultDelay, shimmerDefaultDuration } from './consts';
|
|
2
|
-
export
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
});
|
|
12
|
-
};
|
|
2
|
+
export const defaultShimmerTokens = (theme) => ({
|
|
3
|
+
angle: shimmerDefaultAngle,
|
|
4
|
+
delay: shimmerDefaultDelay,
|
|
5
|
+
duration: shimmerDefaultDuration,
|
|
6
|
+
shimmerColor: theme.colors.neutralStencil1,
|
|
7
|
+
shimmerColorOpacity: 1,
|
|
8
|
+
shimmerWaveColor: theme.colors.neutralStencil2,
|
|
9
|
+
shimmerWaveColorOpacity: 1,
|
|
10
|
+
});
|
|
13
11
|
//# sourceMappingURL=ShimmerTokens.ios.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShimmerTokens.ios.js","sourceRoot":"","sources":["../src/ShimmerTokens.ios.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAG5F,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"ShimmerTokens.ios.js","sourceRoot":"","sources":["../src/ShimmerTokens.ios.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAG5F,MAAM,CAAC,MAAM,oBAAoB,GAAwC,CAAC,KAAY,EAAE,EAAE,CACxF,CAAC;IACC,KAAK,EAAE,mBAAmB;IAC1B,KAAK,EAAE,mBAAmB;IAC1B,QAAQ,EAAE,sBAAsB;IAChC,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,eAAe;IAC1C,mBAAmB,EAAE,CAAC;IACtB,gBAAgB,EAAE,KAAK,CAAC,MAAM,CAAC,eAAe;IAC9C,uBAAuB,EAAE,CAAC;CACT,CAAA,CAAC"}
|
package/lib/ShimmerTokens.js
CHANGED
|
@@ -1,15 +1,13 @@
|
|
|
1
1
|
import { getCurrentAppearance } from '@fluentui-react-native/theming-utils';
|
|
2
2
|
import { shimmerDefaultAngle, shimmerDefaultDelay, shimmerDefaultDuration } from './consts';
|
|
3
|
-
export
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
});
|
|
14
|
-
};
|
|
3
|
+
export const defaultShimmerTokens = (theme) => ({
|
|
4
|
+
angle: shimmerDefaultAngle,
|
|
5
|
+
backgroundColor: theme.colors.transparentBackground,
|
|
6
|
+
delay: shimmerDefaultDelay,
|
|
7
|
+
duration: shimmerDefaultDuration,
|
|
8
|
+
shimmerColor: getCurrentAppearance(theme.host.appearance, 'light') === 'light' ? '#E1E1E1' : '#404040',
|
|
9
|
+
shimmerColorOpacity: 1,
|
|
10
|
+
shimmerWaveColor: getCurrentAppearance(theme.host.appearance, 'light') === 'light' ? 'white' : 'black',
|
|
11
|
+
shimmerWaveColorOpacity: 1,
|
|
12
|
+
});
|
|
15
13
|
//# sourceMappingURL=ShimmerTokens.js.map
|
package/lib/ShimmerTokens.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShimmerTokens.js","sourceRoot":"","sources":["../src/ShimmerTokens.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAG5E,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAG5F,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"ShimmerTokens.js","sourceRoot":"","sources":["../src/ShimmerTokens.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAG5E,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAG5F,MAAM,CAAC,MAAM,oBAAoB,GAAwC,CAAC,KAAY,EAAE,EAAE,CACxF,CAAC;IACC,KAAK,EAAE,mBAAmB;IAC1B,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,qBAAqB;IACnD,KAAK,EAAE,mBAAmB;IAC1B,QAAQ,EAAE,sBAAsB;IAChC,YAAY,EAAE,oBAAoB,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;IACtG,mBAAmB,EAAE,CAAC;IACtB,gBAAgB,EAAE,oBAAoB,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO;IACtG,uBAAuB,EAAE,CAAC;CACT,CAAA,CAAC"}
|
|
@@ -1,15 +1,13 @@
|
|
|
1
1
|
import { shimmerDefaultAngle, shimmerDefaultDelay, shimmerDefaultDuration } from './consts';
|
|
2
|
-
export
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
});
|
|
14
|
-
};
|
|
2
|
+
export const defaultShimmerTokens = (theme) => ({
|
|
3
|
+
angle: shimmerDefaultAngle,
|
|
4
|
+
backgroundColor: theme.colors.background,
|
|
5
|
+
delay: shimmerDefaultDelay,
|
|
6
|
+
duration: shimmerDefaultDuration,
|
|
7
|
+
shimmerColor: theme.colors.bodyFrameDivider,
|
|
8
|
+
shimmerColorOpacity: 1,
|
|
9
|
+
shimmerWaveColor: '#E1E1E1',
|
|
10
|
+
shimmerWaveColorOpacity: 1,
|
|
11
|
+
shimmerWaveWidth: '100%',
|
|
12
|
+
});
|
|
15
13
|
//# sourceMappingURL=ShimmerTokens.win32.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShimmerTokens.win32.js","sourceRoot":"","sources":["../src/ShimmerTokens.win32.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAG5F,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"ShimmerTokens.win32.js","sourceRoot":"","sources":["../src/ShimmerTokens.win32.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAG5F,MAAM,CAAC,MAAM,oBAAoB,GAAwC,CAAC,KAAY,EAAE,EAAE,CACxF,CAAC;IACC,KAAK,EAAE,mBAAmB;IAC1B,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;IACxC,KAAK,EAAE,mBAAmB;IAC1B,QAAQ,EAAE,sBAAsB;IAChC,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,gBAAgB;IAC3C,mBAAmB,EAAE,CAAC;IACtB,gBAAgB,EAAE,SAAS;IAC3B,uBAAuB,EAAE,CAAC;IAC1B,gBAAgB,EAAE,MAAM;CACP,CAAA,CAAC"}
|
package/lib/SvgShapeToPath.js
CHANGED
|
@@ -24,11 +24,11 @@ function convertRoundedRectToSvgPath(x, y, borderRadiusX, borderRadiusY, width,
|
|
|
24
24
|
if (borderRadiusY * 2 > height) {
|
|
25
25
|
borderRadiusY = height / 2;
|
|
26
26
|
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
27
|
+
const horizontalEdgeLength = width - borderRadiusX * 2;
|
|
28
|
+
const verticalEdgeLength = height - borderRadiusY * 2;
|
|
29
|
+
const xAxisRotation = 0;
|
|
30
|
+
const largeArcFlag = 0;
|
|
31
|
+
const sweepArcFlag = 1;
|
|
32
32
|
/**
|
|
33
33
|
* The general manner in which we will draw our rounded rect is in the following
|
|
34
34
|
* order of points.
|
|
@@ -78,7 +78,7 @@ function convertRoundedRectToSvgPath(x, y, borderRadiusX, borderRadiusY, width,
|
|
|
78
78
|
*/
|
|
79
79
|
// We start at the left-most point of the top edge.
|
|
80
80
|
// M: lift and move the pen to [x] [y] coordinates -- does not draw.
|
|
81
|
-
|
|
81
|
+
let path = ['M', x + borderRadiusX, y];
|
|
82
82
|
// draw to the right-most point of the top edge.
|
|
83
83
|
// h: horizontally draw a line [n] units relative to the current pen position.
|
|
84
84
|
path = path.concat(['h', horizontalEdgeLength]);
|
|
@@ -138,7 +138,7 @@ export function convertRectToSvgPath(rectShape) {
|
|
|
138
138
|
return convertRoundedRectToSvgPath(rectShape.x ? rectShape.x : 0, rectShape.y ? rectShape.y : 0, rectShape.borderRadiusX ? rectShape.borderRadiusX : 0, rectShape.borderRadiusX ? rectShape.borderRadiusY : 0, rectShape.width ? rectShape.width : 100, rectShape.height ? rectShape.height : 16);
|
|
139
139
|
}
|
|
140
140
|
export function convertCircleToSvgPath(circleShape) {
|
|
141
|
-
|
|
141
|
+
const radius = circleShape.radius ? circleShape.radius : 12;
|
|
142
142
|
return convertRoundedRectToSvgPath(circleShape.cx ? circleShape.cx - circleShape.radius : 12, circleShape.cy ? circleShape.cy - circleShape.radius : 12, radius, radius, radius * 2, radius * 2);
|
|
143
143
|
}
|
|
144
144
|
//# sourceMappingURL=SvgShapeToPath.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SvgShapeToPath.js","sourceRoot":"","sources":["../src/SvgShapeToPath.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAIH,uGAAuG;AACvG,6DAA6D;AAE7D,6GAA6G;AAC7G,qFAAqF;AACrF,SAAS,2BAA2B,CAClC,CAAS,EACT,CAAS,EACT,aAAqB,EACrB,aAAqB,EACrB,KAAa,EACb,MAAc;IAEd,6CAA6C;IAC7C,IAAI,aAAa,GAAG,CAAC,GAAG,KAAK,EAAE;QAC7B,aAAa,GAAG,KAAK,GAAG,CAAC,CAAC;KAC3B;IACD,IAAI,aAAa,GAAG,CAAC,GAAG,MAAM,EAAE;QAC9B,aAAa,GAAG,MAAM,GAAG,CAAC,CAAC;KAC5B;IAED,
|
|
1
|
+
{"version":3,"file":"SvgShapeToPath.js","sourceRoot":"","sources":["../src/SvgShapeToPath.ts"],"names":[],"mappings":"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"}
|
package/lib/consts.android.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export
|
|
1
|
+
export const shimmerDefaultAngle = 45;
|
|
2
|
+
export const shimmerDefaultDelay = 0;
|
|
3
|
+
export const shimmerDefaultDuration = 1000;
|
|
4
4
|
//# sourceMappingURL=consts.android.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"consts.android.js","sourceRoot":"","sources":["../src/consts.android.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"consts.android.js","sourceRoot":"","sources":["../src/consts.android.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,mBAAmB,GAAG,EAAE,CAAC;AACtC,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,CAAC;AACrC,MAAM,CAAC,MAAM,sBAAsB,GAAG,IAAI,CAAC"}
|
package/lib/consts.ios.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export
|
|
1
|
+
export const shimmerDefaultAngle = 0;
|
|
2
|
+
export const shimmerDefaultDelay = 0;
|
|
3
|
+
export const shimmerDefaultDuration = 1000;
|
|
4
4
|
//# sourceMappingURL=consts.ios.js.map
|
package/lib/consts.ios.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"consts.ios.js","sourceRoot":"","sources":["../src/consts.ios.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"consts.ios.js","sourceRoot":"","sources":["../src/consts.ios.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,CAAC;AACrC,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,CAAC;AACrC,MAAM,CAAC,MAAM,sBAAsB,GAAG,IAAI,CAAC"}
|
package/lib/consts.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export
|
|
1
|
+
export const shimmerDefaultAngle = 0;
|
|
2
|
+
export const shimmerDefaultDelay = 0;
|
|
3
|
+
export const shimmerDefaultDuration = 7000;
|
|
4
4
|
//# sourceMappingURL=consts.js.map
|
package/lib/consts.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"consts.js","sourceRoot":"","sources":["../src/consts.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"consts.js","sourceRoot":"","sources":["../src/consts.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,CAAC;AACrC,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,CAAC;AACrC,MAAM,CAAC,MAAM,sBAAsB,GAAG,IAAI,CAAC"}
|
package/lib/consts.win32.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export
|
|
1
|
+
export const shimmerDefaultAngle = 0;
|
|
2
|
+
export const shimmerDefaultDelay = 500;
|
|
3
|
+
export const shimmerDefaultDuration = 2000;
|
|
4
4
|
//# sourceMappingURL=consts.win32.js.map
|
package/lib/consts.win32.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"consts.win32.js","sourceRoot":"","sources":["../src/consts.win32.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"consts.win32.js","sourceRoot":"","sources":["../src/consts.win32.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,CAAC;AACrC,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAC;AACvC,MAAM,CAAC,MAAM,sBAAsB,GAAG,IAAI,CAAC"}
|
package/lib-commonjs/Shimmer.js
CHANGED
|
@@ -1,26 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
-
var t = {};
|
|
15
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
-
t[p] = s[p];
|
|
17
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
-
t[p[i]] = s[p[i]];
|
|
21
|
-
}
|
|
22
|
-
return t;
|
|
23
|
-
};
|
|
24
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
4
|
};
|
|
@@ -28,37 +6,38 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
28
6
|
exports.Shimmer = void 0;
|
|
29
7
|
/** @jsxRuntime classic */
|
|
30
8
|
/** @jsx withSlots */
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
exports.Shimmer = (0, framework_1.compose)(
|
|
9
|
+
const react_1 = require("react");
|
|
10
|
+
const react_native_1 = require("react-native");
|
|
11
|
+
const framework_1 = require("@fluentui-react-native/framework");
|
|
12
|
+
const assert_never_1 = __importDefault(require("assert-never"));
|
|
13
|
+
const react_native_svg_1 = require("react-native-svg");
|
|
14
|
+
const Shimmer_styling_1 = require("./Shimmer.styling");
|
|
15
|
+
const Shimmer_types_1 = require("./Shimmer.types");
|
|
16
|
+
const useStyling = (0, framework_1.buildUseStyling)(Shimmer_styling_1.stylingSettings);
|
|
17
|
+
exports.Shimmer = (0, framework_1.compose)({
|
|
18
|
+
displayName: Shimmer_types_1.shimmerName,
|
|
19
|
+
...Shimmer_styling_1.stylingSettings,
|
|
20
|
+
slots: {
|
|
40
21
|
root: react_native_svg_1.Svg,
|
|
41
|
-
},
|
|
42
|
-
|
|
22
|
+
},
|
|
23
|
+
useRender: (props, useSlots) => {
|
|
24
|
+
const Slots = useSlots(props);
|
|
43
25
|
props = (0, framework_1.mergeProps)(props, Slots.root({}).props);
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
shimmerWaveColorOpacity: tokens['shimmerWaveColorOpacity'],
|
|
60
|
-
});
|
|
61
|
-
}, [
|
|
26
|
+
const AnimatedLinearGradient = react_native_1.Animated.createAnimatedComponent(react_native_svg_1.LinearGradient);
|
|
27
|
+
const tokens = useStyling(props).root;
|
|
28
|
+
const memoizedShimmerData = (0, react_1.useMemo)(() => ({
|
|
29
|
+
angle: props.angle ? props.angle : tokens['angle'],
|
|
30
|
+
backgroundColor: props?.style?.['backgroundColor'] ? props?.style['backgroundColor'] : tokens['backgroundColor'] ?? 'transparent',
|
|
31
|
+
containerBorderRadius: props?.style?.['borderRadius'] ? props?.style['borderRadius'] : 0,
|
|
32
|
+
containerWidth: props?.style?.['width'] ? props?.style['width'] : '100%',
|
|
33
|
+
containerHeight: props?.style?.['height'] ? props?.style['height'] : '100%',
|
|
34
|
+
delay: props.delay ? props.delay : tokens['delay'],
|
|
35
|
+
duration: props.duration ? props.duration : tokens['duration'],
|
|
36
|
+
shimmerColor: props.shimmerColor ? props.shimmerColor : tokens['shimmerColor'],
|
|
37
|
+
shimmerColorOpacity: tokens['shimmerColorOpacity'],
|
|
38
|
+
shimmerWaveColor: props.shimmerWaveColor ? props.shimmerWaveColor : tokens['shimmerWaveColor'],
|
|
39
|
+
shimmerWaveColorOpacity: tokens['shimmerWaveColorOpacity'],
|
|
40
|
+
}), [
|
|
62
41
|
props.angle,
|
|
63
42
|
props.backgroundColor,
|
|
64
43
|
props.delay,
|
|
@@ -75,10 +54,10 @@ exports.Shimmer = (0, framework_1.compose)(__assign(__assign({ displayName: Shim
|
|
|
75
54
|
* Similarly the endValue is set to 3 to make sure the gradient animation exits the entire screen for any angle.
|
|
76
55
|
* In RTL, startValue and endValue are flipped to ensure that the animation moves from right to left.
|
|
77
56
|
*/
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
57
|
+
const startValue = react_native_1.I18nManager.isRTL ? 3 : -2;
|
|
58
|
+
const endValue = react_native_1.I18nManager.isRTL ? -2 : 3;
|
|
59
|
+
const x1 = (0, react_1.useRef)(new react_native_1.Animated.Value(startValue)).current;
|
|
60
|
+
const shimmerAnimation = (0, react_1.useCallback)(() => {
|
|
82
61
|
react_native_1.Animated.loop(react_native_1.Animated.timing(x1, {
|
|
83
62
|
toValue: endValue,
|
|
84
63
|
duration: memoizedShimmerData.duration,
|
|
@@ -86,15 +65,15 @@ exports.Shimmer = (0, framework_1.compose)(__assign(__assign({ displayName: Shim
|
|
|
86
65
|
useNativeDriver: true,
|
|
87
66
|
})).start();
|
|
88
67
|
}, [memoizedShimmerData.delay, memoizedShimmerData.duration]);
|
|
89
|
-
(0, react_1.useEffect)(
|
|
68
|
+
(0, react_1.useEffect)(() => {
|
|
90
69
|
shimmerAnimation();
|
|
91
70
|
});
|
|
92
|
-
return
|
|
93
|
-
|
|
94
|
-
|
|
71
|
+
return (rest) => {
|
|
72
|
+
const { elements, ...mergedProps } = (0, framework_1.mergeProps)(props, rest);
|
|
73
|
+
const rows = [];
|
|
95
74
|
if (elements) {
|
|
96
|
-
for (
|
|
97
|
-
|
|
75
|
+
for (let i = 0; i < elements.length; i++) {
|
|
76
|
+
const element = elements[i];
|
|
98
77
|
if (element.type == 'rect') {
|
|
99
78
|
rows.push((0, framework_1.withSlots)(react_native_svg_1.Rect, { key: i, width: element.width, height: element.height, x: element.x, y: element.y, rx: element.borderRadiusX, ry: element.borderRadiusY }));
|
|
100
79
|
}
|
|
@@ -107,12 +86,12 @@ exports.Shimmer = (0, framework_1.compose)(__assign(__assign({ displayName: Shim
|
|
|
107
86
|
}
|
|
108
87
|
}
|
|
109
88
|
// Flip the SVG if we are running in RTL
|
|
110
|
-
|
|
89
|
+
const rtlTransfrom = react_native_1.I18nManager.isRTL
|
|
111
90
|
? { translateX: memoizedShimmerData.containerWidth, scaleX: -1 }
|
|
112
91
|
: { translateX: undefined, scaleX: undefined };
|
|
113
|
-
return ((0, framework_1.withSlots)(Slots.root,
|
|
92
|
+
return ((0, framework_1.withSlots)(Slots.root, { ...mergedProps },
|
|
114
93
|
(0, framework_1.withSlots)(react_native_svg_1.Defs, null,
|
|
115
|
-
(0, framework_1.withSlots)(AnimatedLinearGradient, { id: "gradient", x1: x1, x2: "-1", gradientTransform:
|
|
94
|
+
(0, framework_1.withSlots)(AnimatedLinearGradient, { id: "gradient", x1: x1, x2: "-1", gradientTransform: `rotate(${memoizedShimmerData.angle})` },
|
|
116
95
|
(0, framework_1.withSlots)(react_native_svg_1.Stop, { offset: "10%", stopColor: memoizedShimmerData.shimmerColor, stopOpacity: memoizedShimmerData.shimmerColorOpacity }),
|
|
117
96
|
(0, framework_1.withSlots)(react_native_svg_1.Stop, { offset: "20%", stopColor: memoizedShimmerData.shimmerWaveColor, stopOpacity: memoizedShimmerData.shimmerWaveColorOpacity }),
|
|
118
97
|
(0, framework_1.withSlots)(react_native_svg_1.Stop, { offset: "30%", stopColor: memoizedShimmerData.shimmerColor, stopOpacity: memoizedShimmerData.shimmerColorOpacity })),
|
|
@@ -121,5 +100,6 @@ exports.Shimmer = (0, framework_1.compose)(__assign(__assign({ displayName: Shim
|
|
|
121
100
|
(0, framework_1.withSlots)(react_native_svg_1.Rect, { x: "0", y: "0", width: memoizedShimmerData.containerWidth, height: memoizedShimmerData.containerHeight, fill: memoizedShimmerData.backgroundColor, rx: memoizedShimmerData.containerBorderRadius }),
|
|
122
101
|
(0, framework_1.withSlots)(react_native_svg_1.Rect, { x: "0", y: "0", width: memoizedShimmerData.containerWidth, height: memoizedShimmerData.containerHeight, fill: "url(#gradient)", rx: memoizedShimmerData.containerBorderRadius, clipPath: "url(#shimmerView)" }))));
|
|
123
102
|
};
|
|
124
|
-
}
|
|
103
|
+
},
|
|
104
|
+
});
|
|
125
105
|
//# sourceMappingURL=Shimmer.js.map
|