@oxyhq/bloom 0.6.3 → 0.6.4
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/lib/commonjs/loading/Loading.js +26 -85
- package/lib/commonjs/loading/Loading.js.map +1 -1
- package/lib/commonjs/loading/SpinnerIcon.js +20 -27
- package/lib/commonjs/loading/SpinnerIcon.js.map +1 -1
- package/lib/module/loading/Loading.js +15 -74
- package/lib/module/loading/Loading.js.map +1 -1
- package/lib/module/loading/SpinnerIcon.js +15 -22
- package/lib/module/loading/SpinnerIcon.js.map +1 -1
- package/lib/typescript/commonjs/loading/Loading.d.ts.map +1 -1
- package/lib/typescript/commonjs/loading/SpinnerIcon.d.ts +2 -2
- package/lib/typescript/commonjs/loading/SpinnerIcon.d.ts.map +1 -1
- package/lib/typescript/module/loading/Loading.d.ts.map +1 -1
- package/lib/typescript/module/loading/SpinnerIcon.d.ts +2 -2
- package/lib/typescript/module/loading/SpinnerIcon.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/loading/Loading.tsx +19 -74
- package/src/loading/SpinnerIcon.tsx +19 -22
|
@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.Loading = void 0;
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
|
+
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
9
10
|
var _useTheme = require("../theme/use-theme.js");
|
|
10
11
|
var _tokens = require("../styles/tokens.js");
|
|
11
|
-
var _lazyRequire = require("../utils/lazy-require.js");
|
|
12
12
|
var _SpinnerIcon = require("./SpinnerIcon.js");
|
|
13
13
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
14
14
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
@@ -26,10 +26,6 @@ const SIZE_CONFIG = {
|
|
|
26
26
|
text: 16
|
|
27
27
|
}
|
|
28
28
|
};
|
|
29
|
-
|
|
30
|
-
// Lazy-loaded reanimated for the top variant
|
|
31
|
-
|
|
32
|
-
const getReanimated = (0, _lazyRequire.lazyRequire)('react-native-reanimated');
|
|
33
29
|
const SpinnerLoading = ({
|
|
34
30
|
size = 'medium',
|
|
35
31
|
color,
|
|
@@ -64,58 +60,49 @@ const SpinnerLoading = ({
|
|
|
64
60
|
})]
|
|
65
61
|
});
|
|
66
62
|
};
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
* Extracted to a dedicated component so all hooks are called unconditionally,
|
|
71
|
-
* satisfying the Rules of Hooks and React Compiler requirements.
|
|
72
|
-
*/
|
|
73
|
-
|
|
74
|
-
const AnimatedTopLoading = ({
|
|
75
|
-
showLoading,
|
|
76
|
-
targetHeight,
|
|
77
|
-
effectiveIconSize,
|
|
78
|
-
spinnerColor,
|
|
79
|
-
spinnerIcon,
|
|
63
|
+
const TopLoading = ({
|
|
64
|
+
size = 'medium',
|
|
65
|
+
color,
|
|
80
66
|
style,
|
|
81
|
-
|
|
82
|
-
|
|
67
|
+
showLoading = true,
|
|
68
|
+
iconSize,
|
|
69
|
+
heightOffset = 0,
|
|
70
|
+
spinnerIcon,
|
|
71
|
+
testID
|
|
83
72
|
}) => {
|
|
84
|
-
const
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
const
|
|
92
|
-
const opacity = useSharedValue(showLoading ? 1 : 0);
|
|
93
|
-
const translateY = useSharedValue(showLoading ? 0 : -targetHeight);
|
|
73
|
+
const theme = (0, _useTheme.useTheme)();
|
|
74
|
+
const sizeConfig = SIZE_CONFIG[size];
|
|
75
|
+
const effectiveIconSize = iconSize ?? sizeConfig.spinner;
|
|
76
|
+
const targetHeight = Math.max(0, effectiveIconSize + sizeConfig.spinner + heightOffset);
|
|
77
|
+
const spinnerColor = color ?? theme.colors.primary;
|
|
78
|
+
const height = (0, _reactNativeReanimated.useSharedValue)(showLoading ? targetHeight : 0);
|
|
79
|
+
const opacity = (0, _reactNativeReanimated.useSharedValue)(showLoading ? 1 : 0);
|
|
80
|
+
const translateY = (0, _reactNativeReanimated.useSharedValue)(showLoading ? 0 : -targetHeight);
|
|
94
81
|
(0, _react.useEffect)(() => {
|
|
95
82
|
const timingConfig = {
|
|
96
83
|
duration: _tokens.animation.duration.slow,
|
|
97
|
-
easing: Easing.out(Easing.cubic)
|
|
84
|
+
easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.cubic)
|
|
98
85
|
};
|
|
99
|
-
height.value = withTiming(showLoading ? targetHeight : 0, timingConfig);
|
|
100
|
-
opacity.value = withTiming(showLoading ? 1 : 0, timingConfig);
|
|
101
|
-
translateY.value = withTiming(showLoading ? 0 : -targetHeight, timingConfig);
|
|
102
|
-
// Easing, withTiming: module-level constants from
|
|
86
|
+
height.value = (0, _reactNativeReanimated.withTiming)(showLoading ? targetHeight : 0, timingConfig);
|
|
87
|
+
opacity.value = (0, _reactNativeReanimated.withTiming)(showLoading ? 1 : 0, timingConfig);
|
|
88
|
+
translateY.value = (0, _reactNativeReanimated.withTiming)(showLoading ? 0 : -targetHeight, timingConfig);
|
|
89
|
+
// Easing, withTiming: module-level constants from a static import, stable.
|
|
103
90
|
// height/opacity/translateY: shared value objects, stable references.
|
|
104
91
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
105
92
|
}, [showLoading, targetHeight]);
|
|
106
|
-
const containerAnimated = useAnimatedStyle(() => ({
|
|
93
|
+
const containerAnimated = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
|
|
107
94
|
height: height.value
|
|
108
95
|
}));
|
|
109
|
-
const innerAnimated = useAnimatedStyle(() => ({
|
|
96
|
+
const innerAnimated = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
|
|
110
97
|
opacity: opacity.value,
|
|
111
98
|
transform: [{
|
|
112
99
|
translateY: translateY.value
|
|
113
100
|
}]
|
|
114
101
|
}));
|
|
115
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
102
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
|
|
116
103
|
style: [styles.topContainer, containerAnimated],
|
|
117
104
|
testID: testID,
|
|
118
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
105
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
|
|
119
106
|
style: [styles.topLoadingView, {
|
|
120
107
|
height: targetHeight
|
|
121
108
|
}, innerAnimated, style],
|
|
@@ -126,52 +113,6 @@ const AnimatedTopLoading = ({
|
|
|
126
113
|
})
|
|
127
114
|
});
|
|
128
115
|
};
|
|
129
|
-
const TopLoading = ({
|
|
130
|
-
size = 'medium',
|
|
131
|
-
color,
|
|
132
|
-
style,
|
|
133
|
-
showLoading = true,
|
|
134
|
-
iconSize,
|
|
135
|
-
heightOffset = 0,
|
|
136
|
-
spinnerIcon,
|
|
137
|
-
testID
|
|
138
|
-
}) => {
|
|
139
|
-
const theme = (0, _useTheme.useTheme)();
|
|
140
|
-
const sizeConfig = SIZE_CONFIG[size];
|
|
141
|
-
const effectiveIconSize = iconSize ?? sizeConfig.spinner;
|
|
142
|
-
const targetHeight = Math.max(0, effectiveIconSize + sizeConfig.spinner + heightOffset);
|
|
143
|
-
const spinnerColor = color ?? theme.colors.primary;
|
|
144
|
-
const reanimated = getReanimated();
|
|
145
|
-
if (!reanimated) {
|
|
146
|
-
// Non-animated fallback when reanimated is not available
|
|
147
|
-
if (!showLoading) return null;
|
|
148
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
149
|
-
style: [styles.topContainer, {
|
|
150
|
-
height: targetHeight
|
|
151
|
-
}, style],
|
|
152
|
-
testID: testID,
|
|
153
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
154
|
-
style: [styles.topLoadingView, {
|
|
155
|
-
height: targetHeight
|
|
156
|
-
}],
|
|
157
|
-
children: spinnerIcon ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerIcon.SpinnerIcon, {
|
|
158
|
-
size: effectiveIconSize,
|
|
159
|
-
color: spinnerColor
|
|
160
|
-
})
|
|
161
|
-
})
|
|
162
|
-
});
|
|
163
|
-
}
|
|
164
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedTopLoading, {
|
|
165
|
-
showLoading: showLoading,
|
|
166
|
-
targetHeight: targetHeight,
|
|
167
|
-
effectiveIconSize: effectiveIconSize,
|
|
168
|
-
spinnerColor: spinnerColor,
|
|
169
|
-
spinnerIcon: spinnerIcon,
|
|
170
|
-
style: style,
|
|
171
|
-
testID: testID,
|
|
172
|
-
reanimated: reanimated
|
|
173
|
-
});
|
|
174
|
-
};
|
|
175
116
|
const SkeletonLoading = ({
|
|
176
117
|
lines = 3,
|
|
177
118
|
width = '100%',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_useTheme","_tokens","_SpinnerIcon","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SIZE_CONFIG","small","spinner","text","medium","large","SpinnerLoading","size","color","className","textStyle","style","showText","iconSize","spinnerIcon","testID","theme","useTheme","sizeConfig","effectiveIconSize","spinnerColor","colors","primary","textColor","textSecondary","jsxs","View","styles","container","children","jsx","SpinnerIcon","Text","fontSize","marginTop","TopLoading","showLoading","heightOffset","targetHeight","Math","max","height","useSharedValue","opacity","translateY","useEffect","timingConfig","duration","animation","slow","easing","Easing","out","cubic","value","withTiming","containerAnimated","useAnimatedStyle","innerAnimated","transform","topContainer","topLoadingView","SkeletonLoading","lines","width","lineHeight","skeletonColor","backgroundSecondary","skeletonLines","useMemo","Array","from","length","_","index","skeletonLine","backgroundColor","marginBottom","skeletonContainer","InlineLoading","inlineContainer","marginLeft","LoadingComponent","props","variant","Loading","exports","memo","displayName","StyleSheet","create","alignItems","justifyContent","padding","textAlign","position","overflow","top","left","borderRadius","flexDirection"],"sourceRoot":"../../../src","sources":["loading/Loading.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -6,54 +6,49 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.SpinnerIcon = void 0;
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
|
+
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
9
10
|
var _lazyRequire = require("../utils/lazy-require.js");
|
|
10
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
12
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
12
|
-
//
|
|
13
|
-
//
|
|
13
|
+
// react-native-svg is loaded lazily so the loading module can fall back to
|
|
14
|
+
// ActivityIndicator when the host app doesn't ship SVG support. Reanimated,
|
|
15
|
+
// by contrast, MUST be statically imported: the worklets Babel plugin
|
|
16
|
+
// performs build-time closure analysis (`__closure` metadata) that fails on
|
|
17
|
+
// runtime requires, which would crash the UI thread with
|
|
18
|
+
// "Tried to synchronously call a non-worklet function `addListener`".
|
|
14
19
|
|
|
15
20
|
const getSvgModule = (0, _lazyRequire.lazyRequire)('react-native-svg');
|
|
16
|
-
const getReanimated = (0, _lazyRequire.lazyRequire)('react-native-reanimated');
|
|
17
21
|
/**
|
|
18
22
|
* Inner component that unconditionally calls Reanimated hooks.
|
|
19
|
-
* Only rendered when
|
|
23
|
+
* Only rendered when react-native-svg is available.
|
|
20
24
|
*/
|
|
21
25
|
const AnimatedSpinner = ({
|
|
22
26
|
color = 'currentColor',
|
|
23
27
|
size = 26,
|
|
24
28
|
className,
|
|
25
29
|
style,
|
|
26
|
-
svg
|
|
27
|
-
reanimated
|
|
30
|
+
svg
|
|
28
31
|
}) => {
|
|
29
32
|
const {
|
|
30
33
|
default: Svg,
|
|
31
34
|
Rect
|
|
32
35
|
} = svg;
|
|
33
|
-
const
|
|
34
|
-
default: Animated,
|
|
35
|
-
useAnimatedStyle,
|
|
36
|
-
useSharedValue,
|
|
37
|
-
withRepeat,
|
|
38
|
-
withTiming,
|
|
39
|
-
Easing
|
|
40
|
-
} = reanimated;
|
|
41
|
-
const rotation = useSharedValue(0);
|
|
36
|
+
const rotation = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
42
37
|
(0, _react.useEffect)(() => {
|
|
43
|
-
rotation.value = withRepeat(withTiming(360, {
|
|
38
|
+
rotation.value = (0, _reactNativeReanimated.withRepeat)((0, _reactNativeReanimated.withTiming)(360, {
|
|
44
39
|
duration: 400,
|
|
45
|
-
easing: Easing.linear
|
|
40
|
+
easing: _reactNativeReanimated.Easing.linear
|
|
46
41
|
}), -1, false);
|
|
47
|
-
//
|
|
48
|
-
// are module-level
|
|
42
|
+
// rotation is a stable shared value reference; withRepeat/withTiming/Easing
|
|
43
|
+
// are module-level constants from a static import and are stable too.
|
|
49
44
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
50
45
|
}, []);
|
|
51
|
-
const animatedStyle = useAnimatedStyle(() => ({
|
|
46
|
+
const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
|
|
52
47
|
transform: [{
|
|
53
48
|
rotate: `${rotation.value}deg`
|
|
54
49
|
}]
|
|
55
50
|
}));
|
|
56
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
51
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
|
|
57
52
|
style: [{
|
|
58
53
|
width: size,
|
|
59
54
|
height: size,
|
|
@@ -154,8 +149,8 @@ const AnimatedSpinner = ({
|
|
|
154
149
|
|
|
155
150
|
/**
|
|
156
151
|
* iOS-style SVG spinner with 8 rotating rectangles and an opacity gradient trail.
|
|
157
|
-
* Requires react-native-svg and react-native-reanimated
|
|
158
|
-
* Falls back to ActivityIndicator if
|
|
152
|
+
* Requires react-native-svg (lazy) and react-native-reanimated (static).
|
|
153
|
+
* Falls back to ActivityIndicator if react-native-svg is missing.
|
|
159
154
|
*/
|
|
160
155
|
const SpinnerIcon = ({
|
|
161
156
|
color = 'currentColor',
|
|
@@ -164,8 +159,7 @@ const SpinnerIcon = ({
|
|
|
164
159
|
style
|
|
165
160
|
}) => {
|
|
166
161
|
const svg = getSvgModule();
|
|
167
|
-
|
|
168
|
-
if (!svg || !reanimated) {
|
|
162
|
+
if (!svg) {
|
|
169
163
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
|
|
170
164
|
size: size > 30 ? 'large' : 'small',
|
|
171
165
|
color: color
|
|
@@ -176,8 +170,7 @@ const SpinnerIcon = ({
|
|
|
176
170
|
size: size,
|
|
177
171
|
className: className,
|
|
178
172
|
style: style,
|
|
179
|
-
svg: svg
|
|
180
|
-
reanimated: reanimated
|
|
173
|
+
svg: svg
|
|
181
174
|
});
|
|
182
175
|
};
|
|
183
176
|
exports.SpinnerIcon = SpinnerIcon;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_lazyRequire","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","getSvgModule","lazyRequire","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_lazyRequire","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","getSvgModule","lazyRequire","AnimatedSpinner","color","size","className","style","svg","Svg","Rect","rotation","useSharedValue","useEffect","value","withRepeat","withTiming","duration","easing","Easing","linear","animatedStyle","useAnimatedStyle","transform","rotate","jsx","View","width","height","alignItems","justifyContent","children","jsxs","viewBox","fill","opacity","rx","ry","x","y","SpinnerIcon","ActivityIndicator","exports","displayName"],"sourceRoot":"../../../src","sources":["loading/SpinnerIcon.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
import React, { memo, useEffect, useMemo } from 'react';
|
|
4
4
|
import { View, Text, StyleSheet } from 'react-native';
|
|
5
|
+
import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
|
|
5
6
|
import { useTheme } from "../theme/use-theme.js";
|
|
6
7
|
import { animation } from "../styles/tokens.js";
|
|
7
|
-
import { lazyRequire } from "../utils/lazy-require.js";
|
|
8
8
|
import { SpinnerIcon } from "./SpinnerIcon.js";
|
|
9
9
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
10
|
const SIZE_CONFIG = {
|
|
@@ -21,10 +21,6 @@ const SIZE_CONFIG = {
|
|
|
21
21
|
text: 16
|
|
22
22
|
}
|
|
23
23
|
};
|
|
24
|
-
|
|
25
|
-
// Lazy-loaded reanimated for the top variant
|
|
26
|
-
|
|
27
|
-
const getReanimated = lazyRequire('react-native-reanimated');
|
|
28
24
|
const SpinnerLoading = ({
|
|
29
25
|
size = 'medium',
|
|
30
26
|
color,
|
|
@@ -59,30 +55,21 @@ const SpinnerLoading = ({
|
|
|
59
55
|
})]
|
|
60
56
|
});
|
|
61
57
|
};
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
* Extracted to a dedicated component so all hooks are called unconditionally,
|
|
66
|
-
* satisfying the Rules of Hooks and React Compiler requirements.
|
|
67
|
-
*/
|
|
68
|
-
|
|
69
|
-
const AnimatedTopLoading = ({
|
|
70
|
-
showLoading,
|
|
71
|
-
targetHeight,
|
|
72
|
-
effectiveIconSize,
|
|
73
|
-
spinnerColor,
|
|
74
|
-
spinnerIcon,
|
|
58
|
+
const TopLoading = ({
|
|
59
|
+
size = 'medium',
|
|
60
|
+
color,
|
|
75
61
|
style,
|
|
76
|
-
|
|
77
|
-
|
|
62
|
+
showLoading = true,
|
|
63
|
+
iconSize,
|
|
64
|
+
heightOffset = 0,
|
|
65
|
+
spinnerIcon,
|
|
66
|
+
testID
|
|
78
67
|
}) => {
|
|
79
|
-
const
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
Easing
|
|
85
|
-
} = reanimated;
|
|
68
|
+
const theme = useTheme();
|
|
69
|
+
const sizeConfig = SIZE_CONFIG[size];
|
|
70
|
+
const effectiveIconSize = iconSize ?? sizeConfig.spinner;
|
|
71
|
+
const targetHeight = Math.max(0, effectiveIconSize + sizeConfig.spinner + heightOffset);
|
|
72
|
+
const spinnerColor = color ?? theme.colors.primary;
|
|
86
73
|
const height = useSharedValue(showLoading ? targetHeight : 0);
|
|
87
74
|
const opacity = useSharedValue(showLoading ? 1 : 0);
|
|
88
75
|
const translateY = useSharedValue(showLoading ? 0 : -targetHeight);
|
|
@@ -94,7 +81,7 @@ const AnimatedTopLoading = ({
|
|
|
94
81
|
height.value = withTiming(showLoading ? targetHeight : 0, timingConfig);
|
|
95
82
|
opacity.value = withTiming(showLoading ? 1 : 0, timingConfig);
|
|
96
83
|
translateY.value = withTiming(showLoading ? 0 : -targetHeight, timingConfig);
|
|
97
|
-
// Easing, withTiming: module-level constants from
|
|
84
|
+
// Easing, withTiming: module-level constants from a static import, stable.
|
|
98
85
|
// height/opacity/translateY: shared value objects, stable references.
|
|
99
86
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
100
87
|
}, [showLoading, targetHeight]);
|
|
@@ -121,52 +108,6 @@ const AnimatedTopLoading = ({
|
|
|
121
108
|
})
|
|
122
109
|
});
|
|
123
110
|
};
|
|
124
|
-
const TopLoading = ({
|
|
125
|
-
size = 'medium',
|
|
126
|
-
color,
|
|
127
|
-
style,
|
|
128
|
-
showLoading = true,
|
|
129
|
-
iconSize,
|
|
130
|
-
heightOffset = 0,
|
|
131
|
-
spinnerIcon,
|
|
132
|
-
testID
|
|
133
|
-
}) => {
|
|
134
|
-
const theme = useTheme();
|
|
135
|
-
const sizeConfig = SIZE_CONFIG[size];
|
|
136
|
-
const effectiveIconSize = iconSize ?? sizeConfig.spinner;
|
|
137
|
-
const targetHeight = Math.max(0, effectiveIconSize + sizeConfig.spinner + heightOffset);
|
|
138
|
-
const spinnerColor = color ?? theme.colors.primary;
|
|
139
|
-
const reanimated = getReanimated();
|
|
140
|
-
if (!reanimated) {
|
|
141
|
-
// Non-animated fallback when reanimated is not available
|
|
142
|
-
if (!showLoading) return null;
|
|
143
|
-
return /*#__PURE__*/_jsx(View, {
|
|
144
|
-
style: [styles.topContainer, {
|
|
145
|
-
height: targetHeight
|
|
146
|
-
}, style],
|
|
147
|
-
testID: testID,
|
|
148
|
-
children: /*#__PURE__*/_jsx(View, {
|
|
149
|
-
style: [styles.topLoadingView, {
|
|
150
|
-
height: targetHeight
|
|
151
|
-
}],
|
|
152
|
-
children: spinnerIcon ?? /*#__PURE__*/_jsx(SpinnerIcon, {
|
|
153
|
-
size: effectiveIconSize,
|
|
154
|
-
color: spinnerColor
|
|
155
|
-
})
|
|
156
|
-
})
|
|
157
|
-
});
|
|
158
|
-
}
|
|
159
|
-
return /*#__PURE__*/_jsx(AnimatedTopLoading, {
|
|
160
|
-
showLoading: showLoading,
|
|
161
|
-
targetHeight: targetHeight,
|
|
162
|
-
effectiveIconSize: effectiveIconSize,
|
|
163
|
-
spinnerColor: spinnerColor,
|
|
164
|
-
spinnerIcon: spinnerIcon,
|
|
165
|
-
style: style,
|
|
166
|
-
testID: testID,
|
|
167
|
-
reanimated: reanimated
|
|
168
|
-
});
|
|
169
|
-
};
|
|
170
111
|
const SkeletonLoading = ({
|
|
171
112
|
lines = 3,
|
|
172
113
|
width = '100%',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","memo","useEffect","useMemo","View","Text","StyleSheet","
|
|
1
|
+
{"version":3,"names":["React","memo","useEffect","useMemo","View","Text","StyleSheet","Animated","Easing","useAnimatedStyle","useSharedValue","withTiming","useTheme","animation","SpinnerIcon","jsx","_jsx","jsxs","_jsxs","SIZE_CONFIG","small","spinner","text","medium","large","SpinnerLoading","size","color","className","textStyle","style","showText","iconSize","spinnerIcon","testID","theme","sizeConfig","effectiveIconSize","spinnerColor","colors","primary","textColor","textSecondary","styles","container","children","fontSize","marginTop","TopLoading","showLoading","heightOffset","targetHeight","Math","max","height","opacity","translateY","timingConfig","duration","slow","easing","out","cubic","value","containerAnimated","innerAnimated","transform","topContainer","topLoadingView","SkeletonLoading","lines","width","lineHeight","skeletonColor","backgroundSecondary","skeletonLines","Array","from","length","_","index","skeletonLine","backgroundColor","marginBottom","skeletonContainer","InlineLoading","inlineContainer","marginLeft","LoadingComponent","props","variant","Loading","displayName","create","alignItems","justifyContent","padding","textAlign","position","overflow","top","left","borderRadius","flexDirection"],"sourceRoot":"../../../src","sources":["loading/Loading.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -2,45 +2,40 @@
|
|
|
2
2
|
|
|
3
3
|
import React, { useEffect } from 'react';
|
|
4
4
|
import { ActivityIndicator } from 'react-native';
|
|
5
|
+
import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
|
|
5
6
|
import { lazyRequire } from "../utils/lazy-require.js";
|
|
6
7
|
|
|
7
|
-
//
|
|
8
|
-
//
|
|
8
|
+
// react-native-svg is loaded lazily so the loading module can fall back to
|
|
9
|
+
// ActivityIndicator when the host app doesn't ship SVG support. Reanimated,
|
|
10
|
+
// by contrast, MUST be statically imported: the worklets Babel plugin
|
|
11
|
+
// performs build-time closure analysis (`__closure` metadata) that fails on
|
|
12
|
+
// runtime requires, which would crash the UI thread with
|
|
13
|
+
// "Tried to synchronously call a non-worklet function `addListener`".
|
|
9
14
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
15
|
const getSvgModule = lazyRequire('react-native-svg');
|
|
11
|
-
const getReanimated = lazyRequire('react-native-reanimated');
|
|
12
16
|
/**
|
|
13
17
|
* Inner component that unconditionally calls Reanimated hooks.
|
|
14
|
-
* Only rendered when
|
|
18
|
+
* Only rendered when react-native-svg is available.
|
|
15
19
|
*/
|
|
16
20
|
const AnimatedSpinner = ({
|
|
17
21
|
color = 'currentColor',
|
|
18
22
|
size = 26,
|
|
19
23
|
className,
|
|
20
24
|
style,
|
|
21
|
-
svg
|
|
22
|
-
reanimated
|
|
25
|
+
svg
|
|
23
26
|
}) => {
|
|
24
27
|
const {
|
|
25
28
|
default: Svg,
|
|
26
29
|
Rect
|
|
27
30
|
} = svg;
|
|
28
|
-
const {
|
|
29
|
-
default: Animated,
|
|
30
|
-
useAnimatedStyle,
|
|
31
|
-
useSharedValue,
|
|
32
|
-
withRepeat,
|
|
33
|
-
withTiming,
|
|
34
|
-
Easing
|
|
35
|
-
} = reanimated;
|
|
36
31
|
const rotation = useSharedValue(0);
|
|
37
32
|
useEffect(() => {
|
|
38
33
|
rotation.value = withRepeat(withTiming(360, {
|
|
39
34
|
duration: 400,
|
|
40
35
|
easing: Easing.linear
|
|
41
36
|
}), -1, false);
|
|
42
|
-
//
|
|
43
|
-
// are module-level
|
|
37
|
+
// rotation is a stable shared value reference; withRepeat/withTiming/Easing
|
|
38
|
+
// are module-level constants from a static import and are stable too.
|
|
44
39
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
45
40
|
}, []);
|
|
46
41
|
const animatedStyle = useAnimatedStyle(() => ({
|
|
@@ -149,8 +144,8 @@ const AnimatedSpinner = ({
|
|
|
149
144
|
|
|
150
145
|
/**
|
|
151
146
|
* iOS-style SVG spinner with 8 rotating rectangles and an opacity gradient trail.
|
|
152
|
-
* Requires react-native-svg and react-native-reanimated
|
|
153
|
-
* Falls back to ActivityIndicator if
|
|
147
|
+
* Requires react-native-svg (lazy) and react-native-reanimated (static).
|
|
148
|
+
* Falls back to ActivityIndicator if react-native-svg is missing.
|
|
154
149
|
*/
|
|
155
150
|
export const SpinnerIcon = ({
|
|
156
151
|
color = 'currentColor',
|
|
@@ -159,8 +154,7 @@ export const SpinnerIcon = ({
|
|
|
159
154
|
style
|
|
160
155
|
}) => {
|
|
161
156
|
const svg = getSvgModule();
|
|
162
|
-
|
|
163
|
-
if (!svg || !reanimated) {
|
|
157
|
+
if (!svg) {
|
|
164
158
|
return /*#__PURE__*/_jsx(ActivityIndicator, {
|
|
165
159
|
size: size > 30 ? 'large' : 'small',
|
|
166
160
|
color: color
|
|
@@ -171,8 +165,7 @@ export const SpinnerIcon = ({
|
|
|
171
165
|
size: size,
|
|
172
166
|
className: className,
|
|
173
167
|
style: style,
|
|
174
|
-
svg: svg
|
|
175
|
-
reanimated: reanimated
|
|
168
|
+
svg: svg
|
|
176
169
|
});
|
|
177
170
|
};
|
|
178
171
|
SpinnerIcon.displayName = 'SpinnerIcon';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","ActivityIndicator","
|
|
1
|
+
{"version":3,"names":["React","useEffect","ActivityIndicator","Animated","Easing","useAnimatedStyle","useSharedValue","withRepeat","withTiming","lazyRequire","jsx","_jsx","jsxs","_jsxs","getSvgModule","AnimatedSpinner","color","size","className","style","svg","default","Svg","Rect","rotation","value","duration","easing","linear","animatedStyle","transform","rotate","View","width","height","alignItems","justifyContent","children","viewBox","fill","opacity","rx","ry","x","y","SpinnerIcon","displayName"],"sourceRoot":"../../../src","sources":["loading/SpinnerIcon.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAASC,iBAAiB,QAAwB,cAAc;AAChE,OAAOC,QAAQ,IACbC,MAAM,EACNC,gBAAgB,EAChBC,cAAc,EACdC,UAAU,EACVC,UAAU,QACL,yBAAyB;AAEhC,SAASC,WAAW,QAAQ,0BAAuB;;AAEnD;AACA;AACA;AACA;AACA;AACA;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGA,MAAMC,YAAY,GAAGL,WAAW,CAAgB,kBAAkB,CAAC;AAcnE;AACA;AACA;AACA;AACA,MAAMM,eAA+C,GAAGA,CAAC;EACvDC,KAAK,GAAG,cAAc;EACtBC,IAAI,GAAG,EAAE;EACTC,SAAS;EACTC,KAAK;EACLC;AACF,CAAC,KAAK;EACJ,MAAM;IAAEC,OAAO,EAAEC,GAAG;IAAEC;EAAK,CAAC,GAAGH,GAAG;EAElC,MAAMI,QAAQ,GAAGlB,cAAc,CAAC,CAAC,CAAC;EAElCL,SAAS,CAAC,MAAM;IACduB,QAAQ,CAACC,KAAK,GAAGlB,UAAU,CACzBC,UAAU,CAAC,GAAG,EAAE;MAAEkB,QAAQ,EAAE,GAAG;MAAEC,MAAM,EAAEvB,MAAM,CAACwB;IAAO,CAAC,CAAC,EACzD,CAAC,CAAC,EACF,KACF,CAAC;IACD;IACA;IACA;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,aAAa,GAAGxB,gBAAgB,CAAC,OAAO;IAC5CyB,SAAS,EAAE,CAAC;MAAEC,MAAM,EAAE,GAAGP,QAAQ,CAACC,KAAK;IAAM,CAAC;EAChD,CAAC,CAAC,CAAC;EAEH,oBACEd,IAAA,CAACR,QAAQ,CAAC6B,IAAI;IACZb,KAAK,EAAE,CACL;MACEc,KAAK,EAAEhB,IAAI;MACXiB,MAAM,EAAEjB,IAAI;MACZkB,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE;IAClB,CAAC,EACDP,aAAa,EACbV,KAAK,CACL;IAAAkB,QAAA,eAEFxB,KAAA,CAACS,GAAG;MACFgB,OAAO,EAAC,aAAa;MACrBL,KAAK,EAAEhB,IAAK;MACZiB,MAAM,EAAEjB,IAAK;MAAA,IACRC,SAAS,GAAI;QAAEA;MAAU,CAAC,GAA8B,CAAC,CAAC;MAAAmB,QAAA,gBAE/D1B,IAAA,CAACY,IAAI;QAACgB,IAAI,EAAEvB,KAAM;QAACkB,MAAM,EAAC,IAAI;QAACM,OAAO,EAAC,GAAG;QAACC,EAAE,EAAC,GAAG;QAACC,EAAE,EAAC,GAAG;QAACZ,SAAS,EAAC,mBAAmB;QAACG,KAAK,EAAC,IAAI;QAACU,CAAC,EAAC,IAAI;QAACC,CAAC,EAAC;MAAI,CAAE,CAAC,eAClHjC,IAAA,CAACY,IAAI;QAACgB,IAAI,EAAEvB,KAAM;QAACkB,MAAM,EAAC,IAAI;QAACM,OAAO,EAAC,OAAO;QAACC,EAAE,EAAC,GAAG;QAACC,EAAE,EAAC,GAAG;QAACZ,SAAS,EAAC,mBAAmB;QAACG,KAAK,EAAC,IAAI;QAACU,CAAC,EAAC,IAAI;QAACC,CAAC,EAAC;MAAI,CAAE,CAAC,eACtHjC,IAAA,CAACY,IAAI;QAACgB,IAAI,EAAEvB,KAAM;QAACkB,MAAM,EAAC,IAAI;QAACM,OAAO,EAAC,MAAM;QAACC,EAAE,EAAC,GAAG;QAACC,EAAE,EAAC,GAAG;QAACZ,SAAS,EAAC,iBAAiB;QAACG,KAAK,EAAC,IAAI;QAACU,CAAC,EAAC,IAAI;QAACC,CAAC,EAAC;MAAI,CAAE,CAAC,eACnHjC,IAAA,CAACY,IAAI;QAACgB,IAAI,EAAEvB,KAAM;QAACkB,MAAM,EAAC,IAAI;QAACM,OAAO,EAAC,OAAO;QAACC,EAAE,EAAC,GAAG;QAACC,EAAE,EAAC,GAAG;QAACZ,SAAS,EAAC,kBAAkB;QAACG,KAAK,EAAC,IAAI;QAACU,CAAC,EAAC,IAAI;QAACC,CAAC,EAAC;MAAI,CAAE,CAAC,eACrHjC,IAAA,CAACY,IAAI;QAACgB,IAAI,EAAEvB,KAAM;QAACkB,MAAM,EAAC,IAAI;QAACM,OAAO,EAAC,KAAK;QAACC,EAAE,EAAC,GAAG;QAACC,EAAE,EAAC,GAAG;QAACZ,SAAS,EAAC,kBAAkB;QAACG,KAAK,EAAC,IAAI;QAACU,CAAC,EAAC,IAAI;QAACC,CAAC,EAAC;MAAI,CAAE,CAAC,eACnHjC,IAAA,CAACY,IAAI;QAACgB,IAAI,EAAEvB,KAAM;QAACkB,MAAM,EAAC,IAAI;QAACM,OAAO,EAAC,OAAO;QAACC,EAAE,EAAC,GAAG;QAACC,EAAE,EAAC,GAAG;QAACZ,SAAS,EAAC,mBAAmB;QAACG,KAAK,EAAC,IAAI;QAACU,CAAC,EAAC,IAAI;QAACC,CAAC,EAAC;MAAI,CAAE,CAAC,eACtHjC,IAAA,CAACY,IAAI;QAACgB,IAAI,EAAEvB,KAAM;QAACkB,MAAM,EAAC,IAAI;QAACM,OAAO,EAAC,MAAM;QAACC,EAAE,EAAC,GAAG;QAACC,EAAE,EAAC,GAAG;QAACZ,SAAS,EAAC,mBAAmB;QAACG,KAAK,EAAC,IAAI;QAACU,CAAC,EAAC,IAAI;QAACC,CAAC,EAAC;MAAI,CAAE,CAAC,eACrHjC,IAAA,CAACY,IAAI;QAACgB,IAAI,EAAEvB,KAAM;QAACkB,MAAM,EAAC,IAAI;QAACM,OAAO,EAAC,OAAO;QAACC,EAAE,EAAC,GAAG;QAACC,EAAE,EAAC,GAAG;QAACZ,SAAS,EAAC,mBAAmB;QAACG,KAAK,EAAC,IAAI;QAACU,CAAC,EAAC,IAAI;QAACC,CAAC,EAAC;MAAI,CAAE,CAAC;IAAA,CACnH;EAAC,CACO,CAAC;AAEpB,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,WAAuC,GAAGA,CAAC;EACtD7B,KAAK,GAAG,cAAc;EACtBC,IAAI,GAAG,EAAE;EACTC,SAAS;EACTC;AACF,CAAC,KAAK;EACJ,MAAMC,GAAG,GAAGN,YAAY,CAAC,CAAC;EAE1B,IAAI,CAACM,GAAG,EAAE;IACR,oBAAOT,IAAA,CAACT,iBAAiB;MAACe,IAAI,EAAEA,IAAI,GAAG,EAAE,GAAG,OAAO,GAAG,OAAQ;MAACD,KAAK,EAAEA;IAAM,CAAE,CAAC;EACjF;EAEA,oBACEL,IAAA,CAACI,eAAe;IACdC,KAAK,EAAEA,KAAM;IACbC,IAAI,EAAEA,IAAK;IACXC,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAM;IACbC,GAAG,EAAEA;EAAI,CACV,CAAC;AAEN,CAAC;AAEDyB,WAAW,CAACC,WAAW,GAAG,aAAa","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Loading.d.ts","sourceRoot":"","sources":["../../../../src/loading/Loading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Loading.d.ts","sourceRoot":"","sources":["../../../../src/loading/Loading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAYxD,OAAO,KAAK,EACV,YAAY,EAKb,MAAM,SAAS,CAAC;AA+KjB,eAAO,MAAM,OAAO,0CAAyB,CAAC"}
|
|
@@ -8,8 +8,8 @@ interface SpinnerIconProps {
|
|
|
8
8
|
}
|
|
9
9
|
/**
|
|
10
10
|
* iOS-style SVG spinner with 8 rotating rectangles and an opacity gradient trail.
|
|
11
|
-
* Requires react-native-svg and react-native-reanimated
|
|
12
|
-
* Falls back to ActivityIndicator if
|
|
11
|
+
* Requires react-native-svg (lazy) and react-native-reanimated (static).
|
|
12
|
+
* Falls back to ActivityIndicator if react-native-svg is missing.
|
|
13
13
|
*/
|
|
14
14
|
export declare const SpinnerIcon: React.FC<SpinnerIconProps>;
|
|
15
15
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SpinnerIcon.d.ts","sourceRoot":"","sources":["../../../../src/loading/SpinnerIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"SpinnerIcon.d.ts","sourceRoot":"","sources":["../../../../src/loading/SpinnerIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAqBjE,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAqED;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqBlD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Loading.d.ts","sourceRoot":"","sources":["../../../../src/loading/Loading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Loading.d.ts","sourceRoot":"","sources":["../../../../src/loading/Loading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAYxD,OAAO,KAAK,EACV,YAAY,EAKb,MAAM,SAAS,CAAC;AA+KjB,eAAO,MAAM,OAAO,0CAAyB,CAAC"}
|
|
@@ -8,8 +8,8 @@ interface SpinnerIconProps {
|
|
|
8
8
|
}
|
|
9
9
|
/**
|
|
10
10
|
* iOS-style SVG spinner with 8 rotating rectangles and an opacity gradient trail.
|
|
11
|
-
* Requires react-native-svg and react-native-reanimated
|
|
12
|
-
* Falls back to ActivityIndicator if
|
|
11
|
+
* Requires react-native-svg (lazy) and react-native-reanimated (static).
|
|
12
|
+
* Falls back to ActivityIndicator if react-native-svg is missing.
|
|
13
13
|
*/
|
|
14
14
|
export declare const SpinnerIcon: React.FC<SpinnerIconProps>;
|
|
15
15
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SpinnerIcon.d.ts","sourceRoot":"","sources":["../../../../src/loading/SpinnerIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"SpinnerIcon.d.ts","sourceRoot":"","sources":["../../../../src/loading/SpinnerIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAqBjE,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAqED;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqBlD,CAAC"}
|
package/package.json
CHANGED
package/src/loading/Loading.tsx
CHANGED
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
import React, { memo, useEffect, useMemo } from 'react';
|
|
2
2
|
import { View, Text, StyleSheet, type DimensionValue } from 'react-native';
|
|
3
|
+
import Animated, {
|
|
4
|
+
Easing,
|
|
5
|
+
useAnimatedStyle,
|
|
6
|
+
useSharedValue,
|
|
7
|
+
withTiming,
|
|
8
|
+
} from 'react-native-reanimated';
|
|
3
9
|
|
|
4
10
|
import { useTheme } from '../theme/use-theme';
|
|
5
11
|
import { animation } from '../styles/tokens';
|
|
6
|
-
import { lazyRequire } from '../utils/lazy-require';
|
|
7
12
|
import { SpinnerIcon } from './SpinnerIcon';
|
|
8
13
|
import type {
|
|
9
14
|
LoadingProps,
|
|
@@ -19,10 +24,6 @@ const SIZE_CONFIG = {
|
|
|
19
24
|
large: { spinner: 44, text: 16 },
|
|
20
25
|
} as const;
|
|
21
26
|
|
|
22
|
-
// Lazy-loaded reanimated for the top variant
|
|
23
|
-
type ReanimatedType = typeof import('react-native-reanimated');
|
|
24
|
-
const getReanimated = lazyRequire<ReanimatedType>('react-native-reanimated');
|
|
25
|
-
|
|
26
27
|
const SpinnerLoading: React.FC<SpinnerLoadingProps> = ({
|
|
27
28
|
size = 'medium',
|
|
28
29
|
color,
|
|
@@ -59,33 +60,21 @@ const SpinnerLoading: React.FC<SpinnerLoadingProps> = ({
|
|
|
59
60
|
);
|
|
60
61
|
};
|
|
61
62
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
* satisfying the Rules of Hooks and React Compiler requirements.
|
|
66
|
-
*/
|
|
67
|
-
type AnimatedTopLoadingProps = {
|
|
68
|
-
showLoading: boolean;
|
|
69
|
-
targetHeight: number;
|
|
70
|
-
effectiveIconSize: number;
|
|
71
|
-
spinnerColor: string;
|
|
72
|
-
spinnerIcon: React.ReactNode | undefined;
|
|
73
|
-
style: TopLoadingProps['style'];
|
|
74
|
-
testID: string | undefined;
|
|
75
|
-
reanimated: NonNullable<ReturnType<typeof getReanimated>>;
|
|
76
|
-
};
|
|
77
|
-
|
|
78
|
-
const AnimatedTopLoading: React.FC<AnimatedTopLoadingProps> = ({
|
|
79
|
-
showLoading,
|
|
80
|
-
targetHeight,
|
|
81
|
-
effectiveIconSize,
|
|
82
|
-
spinnerColor,
|
|
83
|
-
spinnerIcon,
|
|
63
|
+
const TopLoading: React.FC<TopLoadingProps> = ({
|
|
64
|
+
size = 'medium',
|
|
65
|
+
color,
|
|
84
66
|
style,
|
|
67
|
+
showLoading = true,
|
|
68
|
+
iconSize,
|
|
69
|
+
heightOffset = 0,
|
|
70
|
+
spinnerIcon,
|
|
85
71
|
testID,
|
|
86
|
-
reanimated,
|
|
87
72
|
}) => {
|
|
88
|
-
const
|
|
73
|
+
const theme = useTheme();
|
|
74
|
+
const sizeConfig = SIZE_CONFIG[size];
|
|
75
|
+
const effectiveIconSize = iconSize ?? sizeConfig.spinner;
|
|
76
|
+
const targetHeight = Math.max(0, effectiveIconSize + sizeConfig.spinner + heightOffset);
|
|
77
|
+
const spinnerColor = color ?? theme.colors.primary;
|
|
89
78
|
|
|
90
79
|
const height = useSharedValue(showLoading ? targetHeight : 0);
|
|
91
80
|
const opacity = useSharedValue(showLoading ? 1 : 0);
|
|
@@ -96,7 +85,7 @@ const AnimatedTopLoading: React.FC<AnimatedTopLoadingProps> = ({
|
|
|
96
85
|
height.value = withTiming(showLoading ? targetHeight : 0, timingConfig);
|
|
97
86
|
opacity.value = withTiming(showLoading ? 1 : 0, timingConfig);
|
|
98
87
|
translateY.value = withTiming(showLoading ? 0 : -targetHeight, timingConfig);
|
|
99
|
-
// Easing, withTiming: module-level constants from
|
|
88
|
+
// Easing, withTiming: module-level constants from a static import, stable.
|
|
100
89
|
// height/opacity/translateY: shared value objects, stable references.
|
|
101
90
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
102
91
|
}, [showLoading, targetHeight]);
|
|
@@ -119,50 +108,6 @@ const AnimatedTopLoading: React.FC<AnimatedTopLoadingProps> = ({
|
|
|
119
108
|
);
|
|
120
109
|
};
|
|
121
110
|
|
|
122
|
-
const TopLoading: React.FC<TopLoadingProps> = ({
|
|
123
|
-
size = 'medium',
|
|
124
|
-
color,
|
|
125
|
-
style,
|
|
126
|
-
showLoading = true,
|
|
127
|
-
iconSize,
|
|
128
|
-
heightOffset = 0,
|
|
129
|
-
spinnerIcon,
|
|
130
|
-
testID,
|
|
131
|
-
}) => {
|
|
132
|
-
const theme = useTheme();
|
|
133
|
-
const sizeConfig = SIZE_CONFIG[size];
|
|
134
|
-
const effectiveIconSize = iconSize ?? sizeConfig.spinner;
|
|
135
|
-
const targetHeight = Math.max(0, effectiveIconSize + sizeConfig.spinner + heightOffset);
|
|
136
|
-
const spinnerColor = color ?? theme.colors.primary;
|
|
137
|
-
|
|
138
|
-
const reanimated = getReanimated();
|
|
139
|
-
|
|
140
|
-
if (!reanimated) {
|
|
141
|
-
// Non-animated fallback when reanimated is not available
|
|
142
|
-
if (!showLoading) return null;
|
|
143
|
-
return (
|
|
144
|
-
<View style={[styles.topContainer, { height: targetHeight }, style]} testID={testID}>
|
|
145
|
-
<View style={[styles.topLoadingView, { height: targetHeight }]}>
|
|
146
|
-
{spinnerIcon ?? <SpinnerIcon size={effectiveIconSize} color={spinnerColor} />}
|
|
147
|
-
</View>
|
|
148
|
-
</View>
|
|
149
|
-
);
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
return (
|
|
153
|
-
<AnimatedTopLoading
|
|
154
|
-
showLoading={showLoading}
|
|
155
|
-
targetHeight={targetHeight}
|
|
156
|
-
effectiveIconSize={effectiveIconSize}
|
|
157
|
-
spinnerColor={spinnerColor}
|
|
158
|
-
spinnerIcon={spinnerIcon}
|
|
159
|
-
style={style}
|
|
160
|
-
testID={testID}
|
|
161
|
-
reanimated={reanimated}
|
|
162
|
-
/>
|
|
163
|
-
);
|
|
164
|
-
};
|
|
165
|
-
|
|
166
111
|
const SkeletonLoading: React.FC<SkeletonLoadingProps> = ({
|
|
167
112
|
lines = 3,
|
|
168
113
|
width = '100%',
|
|
@@ -1,15 +1,24 @@
|
|
|
1
1
|
import React, { useEffect } from 'react';
|
|
2
2
|
import { ActivityIndicator, type ViewStyle } from 'react-native';
|
|
3
|
+
import Animated, {
|
|
4
|
+
Easing,
|
|
5
|
+
useAnimatedStyle,
|
|
6
|
+
useSharedValue,
|
|
7
|
+
withRepeat,
|
|
8
|
+
withTiming,
|
|
9
|
+
} from 'react-native-reanimated';
|
|
3
10
|
|
|
4
11
|
import { lazyRequire } from '../utils/lazy-require';
|
|
5
12
|
|
|
6
|
-
//
|
|
7
|
-
//
|
|
13
|
+
// react-native-svg is loaded lazily so the loading module can fall back to
|
|
14
|
+
// ActivityIndicator when the host app doesn't ship SVG support. Reanimated,
|
|
15
|
+
// by contrast, MUST be statically imported: the worklets Babel plugin
|
|
16
|
+
// performs build-time closure analysis (`__closure` metadata) that fails on
|
|
17
|
+
// runtime requires, which would crash the UI thread with
|
|
18
|
+
// "Tried to synchronously call a non-worklet function `addListener`".
|
|
8
19
|
type SvgModuleType = typeof import('react-native-svg');
|
|
9
|
-
type ReanimatedType = typeof import('react-native-reanimated');
|
|
10
20
|
|
|
11
21
|
const getSvgModule = lazyRequire<SvgModuleType>('react-native-svg');
|
|
12
|
-
const getReanimated = lazyRequire<ReanimatedType>('react-native-reanimated');
|
|
13
22
|
|
|
14
23
|
interface SpinnerIconProps {
|
|
15
24
|
size?: number;
|
|
@@ -21,12 +30,11 @@ interface SpinnerIconProps {
|
|
|
21
30
|
type AnimatedSpinnerProps = Omit<SpinnerIconProps, 'className'> & {
|
|
22
31
|
className?: string;
|
|
23
32
|
svg: NonNullable<SvgModuleType>;
|
|
24
|
-
reanimated: NonNullable<ReanimatedType>;
|
|
25
33
|
};
|
|
26
34
|
|
|
27
35
|
/**
|
|
28
36
|
* Inner component that unconditionally calls Reanimated hooks.
|
|
29
|
-
* Only rendered when
|
|
37
|
+
* Only rendered when react-native-svg is available.
|
|
30
38
|
*/
|
|
31
39
|
const AnimatedSpinner: React.FC<AnimatedSpinnerProps> = ({
|
|
32
40
|
color = 'currentColor',
|
|
@@ -34,17 +42,8 @@ const AnimatedSpinner: React.FC<AnimatedSpinnerProps> = ({
|
|
|
34
42
|
className,
|
|
35
43
|
style,
|
|
36
44
|
svg,
|
|
37
|
-
reanimated,
|
|
38
45
|
}) => {
|
|
39
46
|
const { default: Svg, Rect } = svg;
|
|
40
|
-
const {
|
|
41
|
-
default: Animated,
|
|
42
|
-
useAnimatedStyle,
|
|
43
|
-
useSharedValue,
|
|
44
|
-
withRepeat,
|
|
45
|
-
withTiming,
|
|
46
|
-
Easing,
|
|
47
|
-
} = reanimated;
|
|
48
47
|
|
|
49
48
|
const rotation = useSharedValue(0);
|
|
50
49
|
|
|
@@ -54,8 +53,8 @@ const AnimatedSpinner: React.FC<AnimatedSpinnerProps> = ({
|
|
|
54
53
|
-1,
|
|
55
54
|
false,
|
|
56
55
|
);
|
|
57
|
-
//
|
|
58
|
-
// are module-level
|
|
56
|
+
// rotation is a stable shared value reference; withRepeat/withTiming/Easing
|
|
57
|
+
// are module-level constants from a static import and are stable too.
|
|
59
58
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
60
59
|
}, []);
|
|
61
60
|
|
|
@@ -97,8 +96,8 @@ const AnimatedSpinner: React.FC<AnimatedSpinnerProps> = ({
|
|
|
97
96
|
|
|
98
97
|
/**
|
|
99
98
|
* iOS-style SVG spinner with 8 rotating rectangles and an opacity gradient trail.
|
|
100
|
-
* Requires react-native-svg and react-native-reanimated
|
|
101
|
-
* Falls back to ActivityIndicator if
|
|
99
|
+
* Requires react-native-svg (lazy) and react-native-reanimated (static).
|
|
100
|
+
* Falls back to ActivityIndicator if react-native-svg is missing.
|
|
102
101
|
*/
|
|
103
102
|
export const SpinnerIcon: React.FC<SpinnerIconProps> = ({
|
|
104
103
|
color = 'currentColor',
|
|
@@ -107,9 +106,8 @@ export const SpinnerIcon: React.FC<SpinnerIconProps> = ({
|
|
|
107
106
|
style,
|
|
108
107
|
}) => {
|
|
109
108
|
const svg = getSvgModule();
|
|
110
|
-
const reanimated = getReanimated();
|
|
111
109
|
|
|
112
|
-
if (!svg
|
|
110
|
+
if (!svg) {
|
|
113
111
|
return <ActivityIndicator size={size > 30 ? 'large' : 'small'} color={color} />;
|
|
114
112
|
}
|
|
115
113
|
|
|
@@ -120,7 +118,6 @@ export const SpinnerIcon: React.FC<SpinnerIconProps> = ({
|
|
|
120
118
|
className={className}
|
|
121
119
|
style={style}
|
|
122
120
|
svg={svg}
|
|
123
|
-
reanimated={reanimated}
|
|
124
121
|
/>
|
|
125
122
|
);
|
|
126
123
|
};
|