@fluentui-react-native/experimental-shimmer 0.10.1 → 0.10.3-testpatch.0
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 +43 -1
- package/CHANGELOG.md +20 -2
- package/lib/Shimmer.win32.d.ts.map +1 -1
- package/lib/Shimmer.win32.js +23 -7
- package/lib/Shimmer.win32.js.map +1 -1
- package/lib-commonjs/Shimmer.win32.d.ts.map +1 -1
- package/lib-commonjs/Shimmer.win32.js +22 -6
- package/lib-commonjs/Shimmer.win32.js.map +1 -1
- package/package.json +4 -4
- package/src/Shimmer.win32.tsx +29 -11
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,49 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/experimental-shimmer",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Sat, 08 Jul 2023 00:46:24 GMT",
|
|
6
|
+
"tag": "@fluentui-react-native/experimental-shimmer_v0.10.3-testpatch.0",
|
|
7
|
+
"version": "0.10.3-testpatch.0",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui-react-native/experimental-shimmer",
|
|
13
|
+
"comment": "Bump @fluentui-react-native/framework to v0.11.1-testpatch.0",
|
|
14
|
+
"commit": "691411a9f344ca7d52cd6b916f03742001227748"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui-react-native/experimental-shimmer",
|
|
19
|
+
"comment": "Bump @fluentui-react-native/tokens to v0.21.1-testpatch.0",
|
|
20
|
+
"commit": "691411a9f344ca7d52cd6b916f03742001227748"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui-react-native/experimental-shimmer",
|
|
25
|
+
"comment": "Bump @fluentui-react-native/theming-utils to v0.24.1-testpatch.0",
|
|
26
|
+
"commit": "691411a9f344ca7d52cd6b916f03742001227748"
|
|
27
|
+
}
|
|
28
|
+
]
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"date": "Fri, 07 Jul 2023 19:45:35 GMT",
|
|
33
|
+
"tag": "@fluentui-react-native/experimental-shimmer_v0.10.2",
|
|
34
|
+
"version": "0.10.2",
|
|
35
|
+
"comments": {
|
|
36
|
+
"patch": [
|
|
37
|
+
{
|
|
38
|
+
"author": "patboyd@microsoft.com",
|
|
39
|
+
"package": "@fluentui-react-native/experimental-shimmer",
|
|
40
|
+
"commit": "1cf1863fd9d1a93eb5c806331b9c2a589279ac3a",
|
|
41
|
+
"comment": "Add special handling for shimmer colors that use OpaqueColorValue such as PlatformColor"
|
|
42
|
+
}
|
|
43
|
+
]
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"date": "Wed, 21 Jun 2023 22:47:32 GMT",
|
|
6
48
|
"tag": "@fluentui-react-native/experimental-shimmer_v0.10.1",
|
|
7
49
|
"version": "0.10.1",
|
|
8
50
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,30 @@
|
|
|
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 Sat, 08 Jul 2023 00:46:24 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.10.3-testpatch.0
|
|
8
|
+
|
|
9
|
+
Sat, 08 Jul 2023 00:46:24 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- Bump @fluentui-react-native/framework to v0.11.1-testpatch.0
|
|
14
|
+
- Bump @fluentui-react-native/tokens to v0.21.1-testpatch.0
|
|
15
|
+
- Bump @fluentui-react-native/theming-utils to v0.24.1-testpatch.0
|
|
16
|
+
|
|
17
|
+
## 0.10.2
|
|
18
|
+
|
|
19
|
+
Fri, 07 Jul 2023 19:45:35 GMT
|
|
20
|
+
|
|
21
|
+
### Patches
|
|
22
|
+
|
|
23
|
+
- Add special handling for shimmer colors that use OpaqueColorValue such as PlatformColor (patboyd@microsoft.com)
|
|
24
|
+
|
|
7
25
|
## 0.10.1
|
|
8
26
|
|
|
9
|
-
Wed, 21 Jun 2023 22:47:
|
|
27
|
+
Wed, 21 Jun 2023 22:47:32 GMT
|
|
10
28
|
|
|
11
29
|
### Patches
|
|
12
30
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shimmer.win32.d.ts","sourceRoot":"","sources":["../src/Shimmer.win32.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAuB,YAAY,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC1H,YAAY,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"Shimmer.win32.d.ts","sourceRoot":"","sources":["../src/Shimmer.win32.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAuB,YAAY,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC1H,YAAY,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,CAAC;AAmFzD,eAAO,MAAM,OAAO,wLAwElB,CAAC"}
|
package/lib/Shimmer.win32.js
CHANGED
|
@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
22
22
|
};
|
|
23
23
|
/** @jsxRuntime classic */
|
|
24
24
|
/** @jsx withSlots */
|
|
25
|
-
import { View } from 'react-native';
|
|
25
|
+
import { processColor, View } from 'react-native';
|
|
26
26
|
import { compose, mergeProps } from '@fluentui-react-native/framework';
|
|
27
27
|
import { withSlots } from '@fluentui-react-native/framework';
|
|
28
28
|
import { assertNever } from 'assert-never';
|
|
@@ -61,12 +61,28 @@ var wave = function (props) {
|
|
|
61
61
|
viewBox: '0 0 ' + viewBoxWidth + ' ' + viewBoxHeight,
|
|
62
62
|
preserveAspectRatio: 'xMinYMin slice',
|
|
63
63
|
};
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
64
|
+
/**
|
|
65
|
+
* React-Native-SVG doesn't process opaque color values correctly for gradients, directly invoking `processColor`
|
|
66
|
+
* and squashing in the opacity value of the color stop. This handling scheme is incompatible with OpaqueColorValue type
|
|
67
|
+
* colors e.g. PlatformColor, and will show nothing. As a short-term solution, provide alternate non-gradient handling
|
|
68
|
+
* of the wave color as a solid color.
|
|
69
|
+
*/
|
|
70
|
+
if (typeof processColor(shimmerWaveColor) !== 'object' && typeof processColor(shimmerColor) !== 'object') {
|
|
71
|
+
// The typical path where the provided shimmer colors are not OpaqueColorValues.
|
|
72
|
+
return (withSlots(Svg, __assign({}, svgProps),
|
|
73
|
+
withSlots(LinearGradient, { id: "gradient" },
|
|
74
|
+
withSlots(Stop, { stopColor: shimmerColor, stopOpacity: shimmerColorOpacity }),
|
|
75
|
+
withSlots(Stop, { offset: "20%", stopColor: shimmerWaveColor, stopOpacity: shimmerWaveColorOpacity }),
|
|
76
|
+
withSlots(Stop, { offset: "40%", stopColor: shimmerColor, stopOpacity: shimmerColorOpacity })),
|
|
77
|
+
withSlots(Rect, { width: props.shimmerWaveWidth, height: "100%", fill: "url(#gradient)" })));
|
|
78
|
+
}
|
|
79
|
+
else {
|
|
80
|
+
// The unexpected path where either of the provided shimmer colors are OpaqueColorValues.
|
|
81
|
+
// scaleX is used to mimic the gradient occupying 40% of the fill since we don't know the provided width of the
|
|
82
|
+
// shimmer wave.
|
|
83
|
+
return (withSlots(Svg, __assign({}, svgProps),
|
|
84
|
+
withSlots(Rect, { width: props.shimmerWaveWidth, height: "100%", fill: shimmerWaveColor, fillOpacity: shimmerWaveColorOpacity, scaleX: "0.4" })));
|
|
85
|
+
}
|
|
70
86
|
};
|
|
71
87
|
var waveContainer = function (props) {
|
|
72
88
|
var shimmerColor = props.shimmerColor, viewBoxHeight = props.viewBoxHeight, viewBoxWidth = props.viewBoxWidth;
|
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,0BAA0B;AAC1B,qBAAqB;AACrB,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Shimmer.win32.js","sourceRoot":"","sources":["../src/Shimmer.win32.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shimmer.win32.d.ts","sourceRoot":"","sources":["../src/Shimmer.win32.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAuB,YAAY,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC1H,YAAY,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"Shimmer.win32.d.ts","sourceRoot":"","sources":["../src/Shimmer.win32.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAuB,YAAY,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC1H,YAAY,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,CAAC;AAmFzD,eAAO,MAAM,OAAO,wLAwElB,CAAC"}
|
|
@@ -64,12 +64,28 @@ var wave = function (props) {
|
|
|
64
64
|
viewBox: '0 0 ' + viewBoxWidth + ' ' + viewBoxHeight,
|
|
65
65
|
preserveAspectRatio: 'xMinYMin slice',
|
|
66
66
|
};
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
67
|
+
/**
|
|
68
|
+
* React-Native-SVG doesn't process opaque color values correctly for gradients, directly invoking `processColor`
|
|
69
|
+
* and squashing in the opacity value of the color stop. This handling scheme is incompatible with OpaqueColorValue type
|
|
70
|
+
* colors e.g. PlatformColor, and will show nothing. As a short-term solution, provide alternate non-gradient handling
|
|
71
|
+
* of the wave color as a solid color.
|
|
72
|
+
*/
|
|
73
|
+
if (typeof (0, react_native_1.processColor)(shimmerWaveColor) !== 'object' && typeof (0, react_native_1.processColor)(shimmerColor) !== 'object') {
|
|
74
|
+
// The typical path where the provided shimmer colors are not OpaqueColorValues.
|
|
75
|
+
return ((0, framework_2.withSlots)(react_native_svg_1.Svg, __assign({}, svgProps),
|
|
76
|
+
(0, framework_2.withSlots)(react_native_svg_1.LinearGradient, { id: "gradient" },
|
|
77
|
+
(0, framework_2.withSlots)(react_native_svg_1.Stop, { stopColor: shimmerColor, stopOpacity: shimmerColorOpacity }),
|
|
78
|
+
(0, framework_2.withSlots)(react_native_svg_1.Stop, { offset: "20%", stopColor: shimmerWaveColor, stopOpacity: shimmerWaveColorOpacity }),
|
|
79
|
+
(0, framework_2.withSlots)(react_native_svg_1.Stop, { offset: "40%", stopColor: shimmerColor, stopOpacity: shimmerColorOpacity })),
|
|
80
|
+
(0, framework_2.withSlots)(react_native_svg_1.Rect, { width: props.shimmerWaveWidth, height: "100%", fill: "url(#gradient)" })));
|
|
81
|
+
}
|
|
82
|
+
else {
|
|
83
|
+
// The unexpected path where either of the provided shimmer colors are OpaqueColorValues.
|
|
84
|
+
// scaleX is used to mimic the gradient occupying 40% of the fill since we don't know the provided width of the
|
|
85
|
+
// shimmer wave.
|
|
86
|
+
return ((0, framework_2.withSlots)(react_native_svg_1.Svg, __assign({}, svgProps),
|
|
87
|
+
(0, framework_2.withSlots)(react_native_svg_1.Rect, { width: props.shimmerWaveWidth, height: "100%", fill: shimmerWaveColor, fillOpacity: shimmerWaveColorOpacity, scaleX: "0.4" })));
|
|
88
|
+
}
|
|
73
89
|
};
|
|
74
90
|
var waveContainer = function (props) {
|
|
75
91
|
var shimmerColor = props.shimmerColor, viewBoxHeight = props.viewBoxHeight, viewBoxWidth = props.viewBoxWidth;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shimmer.win32.js","sourceRoot":"","sources":["../src/Shimmer.win32.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0BAA0B;AAC1B,qBAAqB;AACrB,
|
|
1
|
+
{"version":3,"file":"Shimmer.win32.js","sourceRoot":"","sources":["../src/Shimmer.win32.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/experimental-shimmer",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.3-testpatch.0",
|
|
4
4
|
"description": "A cross-platform Fluent Shimmer component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -22,9 +22,9 @@
|
|
|
22
22
|
"directory": "packages/experimental/Shimmer"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@fluentui-react-native/framework": "0.11.0",
|
|
26
|
-
"@fluentui-react-native/tokens": ">=0.21.0 <1.0.0",
|
|
27
|
-
"@fluentui-react-native/theming-utils": ">=0.24.0 <1.0.0",
|
|
25
|
+
"@fluentui-react-native/framework": "0.11.1-testpatch.0",
|
|
26
|
+
"@fluentui-react-native/tokens": ">=0.21.1-testpatch.0 <1.0.0",
|
|
27
|
+
"@fluentui-react-native/theming-utils": ">=0.24.1-testpatch.0 <1.0.0",
|
|
28
28
|
"@fluentui-react-native/component-cache": "^1.5.0",
|
|
29
29
|
"@fluentui-react-native/use-styling": "^0.11.0"
|
|
30
30
|
},
|
package/src/Shimmer.win32.tsx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/** @jsxRuntime classic */
|
|
2
2
|
/** @jsx withSlots */
|
|
3
|
-
import { View } from 'react-native';
|
|
3
|
+
import { processColor, View } from 'react-native';
|
|
4
4
|
|
|
5
5
|
import type { UseSlots } from '@fluentui-react-native/framework';
|
|
6
6
|
import { compose, mergeProps } from '@fluentui-react-native/framework';
|
|
@@ -56,16 +56,34 @@ const wave: React.FunctionComponent<ShimmerWaveProps> = (props: ShimmerWaveProps
|
|
|
56
56
|
preserveAspectRatio: 'xMinYMin slice',
|
|
57
57
|
};
|
|
58
58
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
59
|
+
/**
|
|
60
|
+
* React-Native-SVG doesn't process opaque color values correctly for gradients, directly invoking `processColor`
|
|
61
|
+
* and squashing in the opacity value of the color stop. This handling scheme is incompatible with OpaqueColorValue type
|
|
62
|
+
* colors e.g. PlatformColor, and will show nothing. As a short-term solution, provide alternate non-gradient handling
|
|
63
|
+
* of the wave color as a solid color.
|
|
64
|
+
*/
|
|
65
|
+
if (typeof processColor(shimmerWaveColor) !== 'object' && typeof processColor(shimmerColor) !== 'object') {
|
|
66
|
+
// The typical path where the provided shimmer colors are not OpaqueColorValues.
|
|
67
|
+
return (
|
|
68
|
+
<Svg {...svgProps}>
|
|
69
|
+
<LinearGradient id="gradient">
|
|
70
|
+
<Stop stopColor={shimmerColor} stopOpacity={shimmerColorOpacity} />
|
|
71
|
+
<Stop offset="20%" stopColor={shimmerWaveColor} stopOpacity={shimmerWaveColorOpacity} />
|
|
72
|
+
<Stop offset="40%" stopColor={shimmerColor} stopOpacity={shimmerColorOpacity} />
|
|
73
|
+
</LinearGradient>
|
|
74
|
+
<Rect width={props.shimmerWaveWidth} height="100%" fill="url(#gradient)" />
|
|
75
|
+
</Svg>
|
|
76
|
+
);
|
|
77
|
+
} else {
|
|
78
|
+
// The unexpected path where either of the provided shimmer colors are OpaqueColorValues.
|
|
79
|
+
// scaleX is used to mimic the gradient occupying 40% of the fill since we don't know the provided width of the
|
|
80
|
+
// shimmer wave.
|
|
81
|
+
return (
|
|
82
|
+
<Svg {...svgProps}>
|
|
83
|
+
<Rect width={props.shimmerWaveWidth} height="100%" fill={shimmerWaveColor} fillOpacity={shimmerWaveColorOpacity} scaleX="0.4" />
|
|
84
|
+
</Svg>
|
|
85
|
+
);
|
|
86
|
+
}
|
|
69
87
|
};
|
|
70
88
|
|
|
71
89
|
const waveContainer: React.FunctionComponent<ShimmerWaveProps> = (props: ShimmerWaveProps) => {
|