@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
|
@@ -22,46 +22,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
22
22
|
__setModuleDefault(result, mod);
|
|
23
23
|
return result;
|
|
24
24
|
};
|
|
25
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
26
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
27
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
28
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
29
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
30
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
31
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
32
|
-
});
|
|
33
|
-
};
|
|
34
|
-
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
35
|
-
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
36
|
-
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
37
|
-
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
38
|
-
function step(op) {
|
|
39
|
-
if (f) throw new TypeError("Generator is already executing.");
|
|
40
|
-
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
41
|
-
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;
|
|
42
|
-
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
43
|
-
switch (op[0]) {
|
|
44
|
-
case 0: case 1: t = op; break;
|
|
45
|
-
case 4: _.label++; return { value: op[1], done: false };
|
|
46
|
-
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
47
|
-
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
48
|
-
default:
|
|
49
|
-
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
50
|
-
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
51
|
-
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
52
|
-
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
53
|
-
if (t[2]) _.ops.pop();
|
|
54
|
-
_.trys.pop(); continue;
|
|
55
|
-
}
|
|
56
|
-
op = body.call(thisArg, _);
|
|
57
|
-
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
58
|
-
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
59
|
-
}
|
|
60
|
-
};
|
|
61
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
26
|
+
const React = __importStar(require("react"));
|
|
27
|
+
const renderer = __importStar(require("react-test-renderer"));
|
|
28
|
+
const Shimmer_1 = require("./Shimmer");
|
|
65
29
|
function shimmerRects() {
|
|
66
30
|
return [
|
|
67
31
|
{
|
|
@@ -93,44 +57,22 @@ function shimmerRects() {
|
|
|
93
57
|
},
|
|
94
58
|
];
|
|
95
59
|
}
|
|
96
|
-
|
|
97
|
-
describe('Shimmer component tests',
|
|
98
|
-
beforeAll(
|
|
60
|
+
const style = { width: 300, height: 100 };
|
|
61
|
+
describe('Shimmer component tests', () => {
|
|
62
|
+
beforeAll(() => {
|
|
99
63
|
// mocks out setTimeout and other timer functions with mock functions, test will fail without this as we're using Animated API
|
|
100
64
|
jest.useFakeTimers();
|
|
101
65
|
jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
|
|
102
66
|
});
|
|
103
|
-
it('Shimmer default',
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
case 1:
|
|
114
|
-
_a.sent();
|
|
115
|
-
return [2 /*return*/];
|
|
116
|
-
}
|
|
117
|
-
});
|
|
118
|
-
}); });
|
|
119
|
-
it('Shimmer with style prop', function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
120
|
-
var tree;
|
|
121
|
-
return __generator(this, function (_a) {
|
|
122
|
-
switch (_a.label) {
|
|
123
|
-
case 0:
|
|
124
|
-
tree = renderer.create(React.createElement(Shimmer_1.Shimmer, { elements: shimmerRects(), style: style })).toJSON();
|
|
125
|
-
expect(tree).toMatchSnapshot();
|
|
126
|
-
return [4 /*yield*/, renderer.act(function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
|
|
127
|
-
return [2 /*return*/, null];
|
|
128
|
-
}); }); })];
|
|
129
|
-
case 1:
|
|
130
|
-
_a.sent();
|
|
131
|
-
return [2 /*return*/];
|
|
132
|
-
}
|
|
133
|
-
});
|
|
134
|
-
}); });
|
|
67
|
+
it('Shimmer default', async () => {
|
|
68
|
+
const tree = renderer.create(React.createElement(Shimmer_1.Shimmer, { elements: shimmerRects() })).toJSON();
|
|
69
|
+
expect(tree).toMatchSnapshot();
|
|
70
|
+
await renderer.act(async () => null);
|
|
71
|
+
});
|
|
72
|
+
it('Shimmer with style prop', async () => {
|
|
73
|
+
const tree = renderer.create(React.createElement(Shimmer_1.Shimmer, { elements: shimmerRects(), style: style })).toJSON();
|
|
74
|
+
expect(tree).toMatchSnapshot();
|
|
75
|
+
await renderer.act(async () => null);
|
|
76
|
+
});
|
|
135
77
|
});
|
|
136
78
|
//# sourceMappingURL=Shimmer.test.js.map
|
|
@@ -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,6CAA+B;AAE/B,8DAAgD;AAEhD,uCAAoC;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,iBAAO,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,iBAAO,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"}
|
|
@@ -4,28 +4,6 @@
|
|
|
4
4
|
* Licensed under the MIT License.
|
|
5
5
|
* @format
|
|
6
6
|
*/
|
|
7
|
-
var __assign = (this && this.__assign) || function () {
|
|
8
|
-
__assign = Object.assign || function(t) {
|
|
9
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
10
|
-
s = arguments[i];
|
|
11
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
12
|
-
t[p] = s[p];
|
|
13
|
-
}
|
|
14
|
-
return t;
|
|
15
|
-
};
|
|
16
|
-
return __assign.apply(this, arguments);
|
|
17
|
-
};
|
|
18
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
19
|
-
var t = {};
|
|
20
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
21
|
-
t[p] = s[p];
|
|
22
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
23
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
24
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
25
|
-
t[p[i]] = s[p[i]];
|
|
26
|
-
}
|
|
27
|
-
return t;
|
|
28
|
-
};
|
|
29
7
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
30
8
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
31
9
|
};
|
|
@@ -33,16 +11,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
33
11
|
exports.Shimmer = void 0;
|
|
34
12
|
/** @jsxRuntime classic */
|
|
35
13
|
/** @jsx withSlots */
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
14
|
+
const react_native_1 = require("react-native");
|
|
15
|
+
const framework_1 = require("@fluentui-react-native/framework");
|
|
16
|
+
const framework_2 = require("@fluentui-react-native/framework");
|
|
17
|
+
const assert_never_1 = require("assert-never");
|
|
18
|
+
const react_native_svg_1 = require("react-native-svg");
|
|
19
|
+
const Shimmer_styling_win32_1 = require("./Shimmer.styling.win32");
|
|
20
|
+
const Shimmer_types_shared_1 = require("./Shimmer.types.shared");
|
|
21
|
+
const SvgShapeToPath_1 = require("./SvgShapeToPath");
|
|
22
|
+
const Win32ShimmerNativeComponent_1 = __importDefault(require("./Win32ShimmerNativeComponent"));
|
|
23
|
+
const clippingMask = (props) => {
|
|
46
24
|
/**
|
|
47
25
|
* Absolute positioning is used to overlay the clipping mask on top of the shimmer wave.
|
|
48
26
|
*
|
|
@@ -50,24 +28,24 @@ var clippingMask = function (props) {
|
|
|
50
28
|
* viewPort, starting from the origin of the viewPort and minimum coordinates of the viewBox.
|
|
51
29
|
* 'slice' removes the unnecessary remainder.
|
|
52
30
|
*/
|
|
53
|
-
|
|
54
|
-
|
|
31
|
+
const { backgroundColor, viewBoxHeight, viewBoxWidth } = props;
|
|
32
|
+
const svgProps = {
|
|
55
33
|
style: { position: 'absolute', height: viewBoxHeight, width: viewBoxWidth },
|
|
56
34
|
viewBox: '0 0 ' + viewBoxWidth + ' ' + viewBoxHeight,
|
|
57
35
|
preserveAspectRatio: 'xMinYMin slice',
|
|
58
36
|
};
|
|
59
|
-
return ((0, framework_2.withSlots)(react_native_svg_1.Svg,
|
|
37
|
+
return ((0, framework_2.withSlots)(react_native_svg_1.Svg, { ...svgProps },
|
|
60
38
|
(0, framework_2.withSlots)(react_native_svg_1.Defs, null,
|
|
61
39
|
(0, framework_2.withSlots)(react_native_svg_1.ClipPath, { id: "shimmerCuts" },
|
|
62
40
|
(0, framework_2.withSlots)(react_native_svg_1.Path, { d: props.clipPath, clipRule: "evenodd" }))),
|
|
63
41
|
(0, framework_2.withSlots)(react_native_svg_1.Rect, { width: "100%", height: "100%", fill: backgroundColor, clipPath: "url(#shimmerCuts)" })));
|
|
64
42
|
};
|
|
65
|
-
|
|
66
|
-
|
|
43
|
+
const wave = (props) => {
|
|
44
|
+
const { shimmerColor, shimmerColorOpacity, shimmerWaveColor, shimmerWaveColorOpacity, viewBoxHeight, viewBoxWidth } = props;
|
|
67
45
|
/**
|
|
68
46
|
* See the comment above for an explanation of preserveAspectRatio.
|
|
69
47
|
*/
|
|
70
|
-
|
|
48
|
+
const svgProps = {
|
|
71
49
|
style: { height: viewBoxHeight, width: viewBoxWidth },
|
|
72
50
|
viewBox: '0 0 ' + viewBoxWidth + ' ' + viewBoxHeight,
|
|
73
51
|
preserveAspectRatio: 'xMinYMin slice',
|
|
@@ -80,7 +58,7 @@ var wave = function (props) {
|
|
|
80
58
|
*/
|
|
81
59
|
if (typeof (0, react_native_1.processColor)(shimmerWaveColor) !== 'object' && typeof (0, react_native_1.processColor)(shimmerColor) !== 'object') {
|
|
82
60
|
// The typical path where the provided shimmer colors are not OpaqueColorValues.
|
|
83
|
-
return ((0, framework_2.withSlots)(react_native_svg_1.Svg,
|
|
61
|
+
return ((0, framework_2.withSlots)(react_native_svg_1.Svg, { ...svgProps },
|
|
84
62
|
(0, framework_2.withSlots)(react_native_svg_1.LinearGradient, { id: "gradient" },
|
|
85
63
|
(0, framework_2.withSlots)(react_native_svg_1.Stop, { stopColor: shimmerColor, stopOpacity: shimmerColorOpacity }),
|
|
86
64
|
(0, framework_2.withSlots)(react_native_svg_1.Stop, { offset: "20%", stopColor: shimmerWaveColor, stopOpacity: shimmerWaveColorOpacity }),
|
|
@@ -91,23 +69,27 @@ var wave = function (props) {
|
|
|
91
69
|
// The unexpected path where either of the provided shimmer colors are OpaqueColorValues.
|
|
92
70
|
// scaleX is used to mimic the gradient occupying 40% of the fill since we don't know the provided width of the
|
|
93
71
|
// shimmer wave.
|
|
94
|
-
return ((0, framework_2.withSlots)(react_native_svg_1.Svg,
|
|
72
|
+
return ((0, framework_2.withSlots)(react_native_svg_1.Svg, { ...svgProps },
|
|
95
73
|
(0, framework_2.withSlots)(react_native_svg_1.Rect, { width: props.shimmerWaveWidth, height: "100%", fill: shimmerWaveColor, fillOpacity: shimmerWaveColorOpacity, scaleX: "0.4" })));
|
|
96
74
|
}
|
|
97
75
|
};
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
return ((0, framework_2.withSlots)(Win32ShimmerNativeComponent_1.default,
|
|
76
|
+
const waveContainer = (props) => {
|
|
77
|
+
const { shimmerColor, viewBoxHeight, viewBoxWidth } = props;
|
|
78
|
+
return ((0, framework_2.withSlots)(Win32ShimmerNativeComponent_1.default, { ...{ ...props, style: { backgroundColor: shimmerColor, height: viewBoxHeight, width: viewBoxWidth, overflow: 'hidden' } } }));
|
|
101
79
|
};
|
|
102
|
-
exports.Shimmer = (0, framework_1.compose)(
|
|
80
|
+
exports.Shimmer = (0, framework_1.compose)({
|
|
81
|
+
displayName: Shimmer_types_shared_1.shimmerName,
|
|
82
|
+
...Shimmer_styling_win32_1.stylingSettings,
|
|
83
|
+
slots: {
|
|
103
84
|
root: react_native_1.View,
|
|
104
85
|
clippingMask: clippingMask,
|
|
105
86
|
shimmerWave: wave,
|
|
106
87
|
shimmerWaveContainer: waveContainer,
|
|
107
|
-
},
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
88
|
+
},
|
|
89
|
+
useRender: (props, useSlots) => {
|
|
90
|
+
const Slots = useSlots(props);
|
|
91
|
+
return (rest) => {
|
|
92
|
+
const { elements, ...mergedProps } = (0, framework_1.mergeProps)(props, rest);
|
|
111
93
|
/**
|
|
112
94
|
* Generate a clip path from the provided element shapes, with their path parameter strings generated from their corresponding properties.
|
|
113
95
|
* Ideally this would be better possible with functions from the shape elements themselves and not to rely on our own calculations.
|
|
@@ -118,22 +100,22 @@ exports.Shimmer = (0, framework_1.compose)(__assign(__assign({ displayName: Shim
|
|
|
118
100
|
* Since we're programmatically generating the visual, we can assert our viewBox is `0 0 xMax yMax` where xMax and yMax are the greatest
|
|
119
101
|
* X and Y points used by a shape.
|
|
120
102
|
*/
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
103
|
+
let clipPathsAsMask = [];
|
|
104
|
+
let xMax = 0;
|
|
105
|
+
let yMax = 0;
|
|
124
106
|
if (elements) {
|
|
125
|
-
elements.forEach(
|
|
107
|
+
elements.forEach((element) => {
|
|
126
108
|
if (element.type == 'circle') {
|
|
127
109
|
clipPathsAsMask = clipPathsAsMask.concat((0, SvgShapeToPath_1.convertCircleToSvgPath)(element));
|
|
128
|
-
|
|
129
|
-
|
|
110
|
+
const xMaxCandidate = element.cx + element.radius;
|
|
111
|
+
const yMaxCandidate = element.cy + element.radius;
|
|
130
112
|
xMax = xMax >= xMaxCandidate ? xMax : xMaxCandidate;
|
|
131
113
|
yMax = yMax >= yMaxCandidate ? yMax : yMaxCandidate;
|
|
132
114
|
}
|
|
133
115
|
else if (element.type == 'rect') {
|
|
134
116
|
clipPathsAsMask = clipPathsAsMask.concat((0, SvgShapeToPath_1.convertRectToSvgPath)(element));
|
|
135
|
-
|
|
136
|
-
|
|
117
|
+
const xMaxCandidate = element.x + element.width;
|
|
118
|
+
const yMaxCandidate = element.y + element.height;
|
|
137
119
|
xMax = xMax >= xMaxCandidate ? xMax : xMaxCandidate;
|
|
138
120
|
yMax = yMax >= yMaxCandidate ? yMax : yMaxCandidate;
|
|
139
121
|
}
|
|
@@ -148,11 +130,12 @@ exports.Shimmer = (0, framework_1.compose)(__assign(__assign({ displayName: Shim
|
|
|
148
130
|
* and drawing a rectangle around the entire svg viewBox, causing all inner elements to be "clipped out"
|
|
149
131
|
* instead of "clipped around," generating the visual we desire with the linear gradient below the mask.
|
|
150
132
|
*/
|
|
151
|
-
|
|
152
|
-
return ((0, framework_2.withSlots)(Slots.root,
|
|
133
|
+
const mergedClipPath = clipPathsAsMask.join(' ').concat('M 0 0 h ' + xMax + ' v ' + yMax + ' h -' + xMax + ' z ');
|
|
134
|
+
return ((0, framework_2.withSlots)(Slots.root, { ...mergedProps },
|
|
153
135
|
(0, framework_2.withSlots)(Slots.shimmerWaveContainer, { viewBoxHeight: yMax, viewBoxWidth: xMax },
|
|
154
136
|
(0, framework_2.withSlots)(Slots.shimmerWave, { viewBoxHeight: yMax, viewBoxWidth: xMax })),
|
|
155
137
|
(0, framework_2.withSlots)(Slots.clippingMask, { clipPath: mergedClipPath, viewBoxHeight: yMax, viewBoxWidth: xMax })));
|
|
156
138
|
};
|
|
157
|
-
}
|
|
139
|
+
},
|
|
140
|
+
});
|
|
158
141
|
//# sourceMappingURL=Shimmer.win32.js.map
|
|
@@ -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,17 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.defaultShimmerTokens = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
});
|
|
15
|
-
};
|
|
4
|
+
const consts_1 = require("./consts");
|
|
5
|
+
const defaultShimmerTokens = (theme) => ({
|
|
6
|
+
angle: consts_1.shimmerDefaultAngle,
|
|
7
|
+
delay: consts_1.shimmerDefaultDelay,
|
|
8
|
+
duration: consts_1.shimmerDefaultDuration,
|
|
9
|
+
shimmerColor: theme.colors.neutralStencil1,
|
|
10
|
+
shimmerColorOpacity: 1,
|
|
11
|
+
shimmerWaveColor: theme.colors.neutralStencil2,
|
|
12
|
+
shimmerWaveColorOpacity: 1,
|
|
13
|
+
});
|
|
16
14
|
exports.defaultShimmerTokens = defaultShimmerTokens;
|
|
17
15
|
//# sourceMappingURL=ShimmerTokens.android.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShimmerTokens.android.js","sourceRoot":"","sources":["../src/ShimmerTokens.android.ts"],"names":[],"mappings":";;;AAGA,
|
|
1
|
+
{"version":3,"file":"ShimmerTokens.android.js","sourceRoot":"","sources":["../src/ShimmerTokens.android.ts"],"names":[],"mappings":";;;AAGA,qCAA4F;AAGrF,MAAM,oBAAoB,GAAwC,CAAC,KAAY,EAAE,EAAE,CACxF,CAAC;IACC,KAAK,EAAE,4BAAmB;IAC1B,KAAK,EAAE,4BAAmB;IAC1B,QAAQ,EAAE,+BAAsB;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;AATT,QAAA,oBAAoB,wBASX"}
|
|
@@ -1,17 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.defaultShimmerTokens = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
});
|
|
15
|
-
};
|
|
4
|
+
const consts_1 = require("./consts");
|
|
5
|
+
const defaultShimmerTokens = (theme) => ({
|
|
6
|
+
angle: consts_1.shimmerDefaultAngle,
|
|
7
|
+
delay: consts_1.shimmerDefaultDelay,
|
|
8
|
+
duration: consts_1.shimmerDefaultDuration,
|
|
9
|
+
shimmerColor: theme.colors.neutralStencil1,
|
|
10
|
+
shimmerColorOpacity: 1,
|
|
11
|
+
shimmerWaveColor: theme.colors.neutralStencil2,
|
|
12
|
+
shimmerWaveColorOpacity: 1,
|
|
13
|
+
});
|
|
16
14
|
exports.defaultShimmerTokens = defaultShimmerTokens;
|
|
17
15
|
//# sourceMappingURL=ShimmerTokens.ios.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShimmerTokens.ios.js","sourceRoot":"","sources":["../src/ShimmerTokens.ios.ts"],"names":[],"mappings":";;;AAGA,
|
|
1
|
+
{"version":3,"file":"ShimmerTokens.ios.js","sourceRoot":"","sources":["../src/ShimmerTokens.ios.ts"],"names":[],"mappings":";;;AAGA,qCAA4F;AAGrF,MAAM,oBAAoB,GAAwC,CAAC,KAAY,EAAE,EAAE,CACxF,CAAC;IACC,KAAK,EAAE,4BAAmB;IAC1B,KAAK,EAAE,4BAAmB;IAC1B,QAAQ,EAAE,+BAAsB;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;AATT,QAAA,oBAAoB,wBASX"}
|
|
@@ -1,19 +1,17 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.defaultShimmerTokens = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
});
|
|
17
|
-
};
|
|
4
|
+
const theming_utils_1 = require("@fluentui-react-native/theming-utils");
|
|
5
|
+
const consts_1 = require("./consts");
|
|
6
|
+
const defaultShimmerTokens = (theme) => ({
|
|
7
|
+
angle: consts_1.shimmerDefaultAngle,
|
|
8
|
+
backgroundColor: theme.colors.transparentBackground,
|
|
9
|
+
delay: consts_1.shimmerDefaultDelay,
|
|
10
|
+
duration: consts_1.shimmerDefaultDuration,
|
|
11
|
+
shimmerColor: (0, theming_utils_1.getCurrentAppearance)(theme.host.appearance, 'light') === 'light' ? '#E1E1E1' : '#404040',
|
|
12
|
+
shimmerColorOpacity: 1,
|
|
13
|
+
shimmerWaveColor: (0, theming_utils_1.getCurrentAppearance)(theme.host.appearance, 'light') === 'light' ? 'white' : 'black',
|
|
14
|
+
shimmerWaveColorOpacity: 1,
|
|
15
|
+
});
|
|
18
16
|
exports.defaultShimmerTokens = defaultShimmerTokens;
|
|
19
17
|
//# sourceMappingURL=ShimmerTokens.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShimmerTokens.js","sourceRoot":"","sources":["../src/ShimmerTokens.ts"],"names":[],"mappings":";;;AACA,
|
|
1
|
+
{"version":3,"file":"ShimmerTokens.js","sourceRoot":"","sources":["../src/ShimmerTokens.ts"],"names":[],"mappings":";;;AACA,wEAA4E;AAG5E,qCAA4F;AAGrF,MAAM,oBAAoB,GAAwC,CAAC,KAAY,EAAE,EAAE,CACxF,CAAC;IACC,KAAK,EAAE,4BAAmB;IAC1B,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,qBAAqB;IACnD,KAAK,EAAE,4BAAmB;IAC1B,QAAQ,EAAE,+BAAsB;IAChC,YAAY,EAAE,IAAA,oCAAoB,EAAC,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,IAAA,oCAAoB,EAAC,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;AAVT,QAAA,oBAAoB,wBAUX"}
|
|
@@ -1,19 +1,17 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.defaultShimmerTokens = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
});
|
|
17
|
-
};
|
|
4
|
+
const consts_1 = require("./consts");
|
|
5
|
+
const defaultShimmerTokens = (theme) => ({
|
|
6
|
+
angle: consts_1.shimmerDefaultAngle,
|
|
7
|
+
backgroundColor: theme.colors.background,
|
|
8
|
+
delay: consts_1.shimmerDefaultDelay,
|
|
9
|
+
duration: consts_1.shimmerDefaultDuration,
|
|
10
|
+
shimmerColor: theme.colors.bodyFrameDivider,
|
|
11
|
+
shimmerColorOpacity: 1,
|
|
12
|
+
shimmerWaveColor: '#E1E1E1',
|
|
13
|
+
shimmerWaveColorOpacity: 1,
|
|
14
|
+
shimmerWaveWidth: '100%',
|
|
15
|
+
});
|
|
18
16
|
exports.defaultShimmerTokens = defaultShimmerTokens;
|
|
19
17
|
//# sourceMappingURL=ShimmerTokens.win32.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShimmerTokens.win32.js","sourceRoot":"","sources":["../src/ShimmerTokens.win32.ts"],"names":[],"mappings":";;;AAGA,
|
|
1
|
+
{"version":3,"file":"ShimmerTokens.win32.js","sourceRoot":"","sources":["../src/ShimmerTokens.win32.ts"],"names":[],"mappings":";;;AAGA,qCAA4F;AAGrF,MAAM,oBAAoB,GAAwC,CAAC,KAAY,EAAE,EAAE,CACxF,CAAC;IACC,KAAK,EAAE,4BAAmB;IAC1B,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;IACxC,KAAK,EAAE,4BAAmB;IAC1B,QAAQ,EAAE,+BAAsB;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;AAXT,QAAA,oBAAoB,wBAWX"}
|
|
@@ -27,11 +27,11 @@ function convertRoundedRectToSvgPath(x, y, borderRadiusX, borderRadiusY, width,
|
|
|
27
27
|
if (borderRadiusY * 2 > height) {
|
|
28
28
|
borderRadiusY = height / 2;
|
|
29
29
|
}
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
30
|
+
const horizontalEdgeLength = width - borderRadiusX * 2;
|
|
31
|
+
const verticalEdgeLength = height - borderRadiusY * 2;
|
|
32
|
+
const xAxisRotation = 0;
|
|
33
|
+
const largeArcFlag = 0;
|
|
34
|
+
const sweepArcFlag = 1;
|
|
35
35
|
/**
|
|
36
36
|
* The general manner in which we will draw our rounded rect is in the following
|
|
37
37
|
* order of points.
|
|
@@ -81,7 +81,7 @@ function convertRoundedRectToSvgPath(x, y, borderRadiusX, borderRadiusY, width,
|
|
|
81
81
|
*/
|
|
82
82
|
// We start at the left-most point of the top edge.
|
|
83
83
|
// M: lift and move the pen to [x] [y] coordinates -- does not draw.
|
|
84
|
-
|
|
84
|
+
let path = ['M', x + borderRadiusX, y];
|
|
85
85
|
// draw to the right-most point of the top edge.
|
|
86
86
|
// h: horizontally draw a line [n] units relative to the current pen position.
|
|
87
87
|
path = path.concat(['h', horizontalEdgeLength]);
|
|
@@ -142,7 +142,7 @@ function convertRectToSvgPath(rectShape) {
|
|
|
142
142
|
}
|
|
143
143
|
exports.convertRectToSvgPath = convertRectToSvgPath;
|
|
144
144
|
function convertCircleToSvgPath(circleShape) {
|
|
145
|
-
|
|
145
|
+
const radius = circleShape.radius ? circleShape.radius : 12;
|
|
146
146
|
return convertRoundedRectToSvgPath(circleShape.cx ? circleShape.cx - circleShape.radius : 12, circleShape.cy ? circleShape.cy - circleShape.radius : 12, radius, radius, radius * 2, radius * 2);
|
|
147
147
|
}
|
|
148
148
|
exports.convertCircleToSvgPath = convertCircleToSvgPath;
|
|
@@ -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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"}
|
|
@@ -1,13 +1 @@
|
|
|
1
|
-
"
|
|
2
|
-
/**
|
|
3
|
-
* Copyright (c) Microsoft Corporation.
|
|
4
|
-
* Licensed under the MIT License.
|
|
5
|
-
* @format
|
|
6
|
-
*/
|
|
7
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
8
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
9
|
-
};
|
|
10
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
11
|
-
var codegenNativeComponent_1 = __importDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));
|
|
12
|
-
exports.default = (0, codegenNativeComponent_1.default)('RCTNativeAnimatedShimmer');
|
|
13
|
-
//# sourceMappingURL=Win32ShimmerNativeComponent.js.map
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports.__INTERNAL_VIEW_CONFIG=void 0;var _codegenNativeComponent=_interopRequireDefault(require("react-native/Libraries/Utilities/codegenNativeComponent"));var NativeComponentRegistry=require('react-native/Libraries/NativeComponent/NativeComponentRegistry');var nativeComponentName='RCTNativeAnimatedShimmer';var __INTERNAL_VIEW_CONFIG=exports.__INTERNAL_VIEW_CONFIG={uiViewClassName:'RCTNativeAnimatedShimmer',validAttributes:{delay:true,duration:true}};var _default=exports.default=NativeComponentRegistry.get(nativeComponentName,function(){return __INTERNAL_VIEW_CONFIG;});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Win32ShimmerNativeComponent.js","sourceRoot":"","sources":["../src/Win32ShimmerNativeComponent.ts"],"names":[],"mappings":";AAAA;;;;GAIG;;;;;AAKH,
|
|
1
|
+
{"version":3,"file":"Win32ShimmerNativeComponent.js","sourceRoot":"","sources":["../src/Win32ShimmerNativeComponent.ts"],"names":[],"mappings":";AAAA;;;;GAIG;;;;;AAKH,qHAA6F;AAO7F,kBAAe,IAAA,gCAAsB,EAAc,0BAA0B,CAA+B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/experimental-shimmer",
|
|
3
|
-
"version": "0.13.
|
|
3
|
+
"version": "0.13.8",
|
|
4
4
|
"description": "A cross-platform Fluent Shimmer component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"import": "./lib/index.js",
|
|
10
|
+
"require": "./lib-commonjs/index.js",
|
|
11
|
+
"types": "./lib/index.d.ts"
|
|
12
|
+
}
|
|
13
|
+
},
|
|
7
14
|
"typings": "lib/index.d.ts",
|
|
8
15
|
"scripts": {
|
|
9
16
|
"build": "fluentui-scripts build",
|
|
@@ -22,10 +29,10 @@
|
|
|
22
29
|
"directory": "packages/experimental/Shimmer"
|
|
23
30
|
},
|
|
24
31
|
"dependencies": {
|
|
25
|
-
"@fluentui-react-native/framework": "0.14.
|
|
26
|
-
"@fluentui-react-native/theming-utils": "0.26.
|
|
27
|
-
"@fluentui-react-native/tokens": "0.23.
|
|
28
|
-
"@fluentui-react-native/use-styling": "0.13.
|
|
32
|
+
"@fluentui-react-native/framework": "0.14.5",
|
|
33
|
+
"@fluentui-react-native/theming-utils": "0.26.4",
|
|
34
|
+
"@fluentui-react-native/tokens": "0.23.4",
|
|
35
|
+
"@fluentui-react-native/use-styling": "0.13.5",
|
|
29
36
|
"assert-never": "^1.2.1"
|
|
30
37
|
},
|
|
31
38
|
"devDependencies": {
|
|
@@ -37,7 +44,9 @@
|
|
|
37
44
|
"@types/react": "~18.2.0",
|
|
38
45
|
"react": "18.2.0",
|
|
39
46
|
"react-native": "^0.74.0",
|
|
40
|
-
"react-native-
|
|
47
|
+
"react-native-macos": "^0.74.0",
|
|
48
|
+
"react-native-svg": "^15.4.0",
|
|
49
|
+
"react-native-windows": "^0.74.0"
|
|
41
50
|
},
|
|
42
51
|
"peerDependencies": {
|
|
43
52
|
"@office-iss/react-native-win32": "^0.74.0",
|
|
@@ -64,9 +73,12 @@
|
|
|
64
73
|
]
|
|
65
74
|
},
|
|
66
75
|
"capabilities": [
|
|
76
|
+
"babel-preset-react-native",
|
|
67
77
|
"core",
|
|
68
78
|
"core-android",
|
|
69
79
|
"core-ios",
|
|
80
|
+
"core-macos",
|
|
81
|
+
"core-windows",
|
|
70
82
|
"svg"
|
|
71
83
|
]
|
|
72
84
|
}
|
package/.eslintrc.js
DELETED