react-native-skelo 0.0.5 → 0.1.0-alpha.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/LICENSE +1 -1
- package/README.md +77 -88
- package/lib/commonjs/animations/PulseAnimation.js +42 -17
- package/lib/commonjs/animations/PulseAnimation.js.map +1 -1
- package/lib/commonjs/animations/ShimmerAnimation.js +65 -54
- package/lib/commonjs/animations/ShimmerAnimation.js.map +1 -1
- package/lib/commonjs/components/Skeleton.js +8 -20
- package/lib/commonjs/components/Skeleton.js.map +1 -1
- package/lib/commonjs/index.js +0 -1
- package/lib/commonjs/index.js.map +1 -1
- package/lib/module/animations/PulseAnimation.js +43 -18
- package/lib/module/animations/PulseAnimation.js.map +1 -1
- package/lib/module/animations/ShimmerAnimation.js +66 -55
- package/lib/module/animations/ShimmerAnimation.js.map +1 -1
- package/lib/module/components/Skeleton.js +8 -20
- package/lib/module/components/Skeleton.js.map +1 -1
- package/lib/module/index.js +0 -4
- package/lib/module/index.js.map +1 -1
- package/lib/typescript/animations/PulseAnimation.d.ts +44 -0
- package/lib/typescript/animations/PulseAnimation.d.ts.map +1 -1
- package/lib/typescript/animations/ShimmerAnimation.d.ts +44 -0
- package/lib/typescript/animations/ShimmerAnimation.d.ts.map +1 -1
- package/lib/typescript/components/Skeleton.d.ts +1 -1
- package/lib/typescript/components/Skeleton.d.ts.map +1 -1
- package/lib/typescript/index.d.ts +0 -1
- package/lib/typescript/index.d.ts.map +1 -1
- package/lib/typescript/types/skeleton.d.ts +0 -8
- package/lib/typescript/types/skeleton.d.ts.map +1 -1
- package/package.json +12 -23
- package/src/animations/PulseAnimation.tsx +89 -17
- package/src/animations/ShimmerAnimation.tsx +118 -39
- package/src/components/Skeleton.tsx +8 -22
- package/src/index.ts +0 -4
- package/src/types/skeleton.ts +0 -9
- package/lib/commonjs/core/deepRegistry.js +0 -18
- package/lib/commonjs/core/deepRegistry.js.map +0 -1
- package/lib/commonjs/core/parser/expandLists.js +0 -67
- package/lib/commonjs/core/parser/expandLists.js.map +0 -1
- package/lib/commonjs/deep.js +0 -18
- package/lib/commonjs/deep.js.map +0 -1
- package/lib/module/core/deepRegistry.js +0 -11
- package/lib/module/core/deepRegistry.js.map +0 -1
- package/lib/module/core/parser/expandLists.js +0 -61
- package/lib/module/core/parser/expandLists.js.map +0 -1
- package/lib/module/deep.js +0 -11
- package/lib/module/deep.js.map +0 -1
- package/lib/typescript/core/deepRegistry.d.ts +0 -7
- package/lib/typescript/core/deepRegistry.d.ts.map +0 -1
- package/lib/typescript/core/parser/expandLists.d.ts +0 -3
- package/lib/typescript/core/parser/expandLists.d.ts.map +0 -1
- package/lib/typescript/deep.d.ts +0 -2
- package/lib/typescript/deep.d.ts.map +0 -1
- package/src/core/deepRegistry.ts +0 -16
- package/src/core/parser/expandLists.tsx +0 -77
- package/src/deep.ts +0 -12
package/lib/commonjs/index.js
CHANGED
|
@@ -57,7 +57,6 @@ Object.defineProperty(exports, "withSkeleton", {
|
|
|
57
57
|
return _withSkeleton.withSkeleton;
|
|
58
58
|
}
|
|
59
59
|
});
|
|
60
|
-
require("./deep");
|
|
61
60
|
var _Skeleton = require("./components/Skeleton");
|
|
62
61
|
var _SkeletonIgnore = require("./components/SkeletonIgnore");
|
|
63
62
|
var _withSkeleton = require("./components/withSkeleton");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["_Skeleton","require","_SkeletonIgnore","_withSkeleton","_StyleSkeleton","_Skelo","_primitives"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AAEA,IAAAG,cAAA,GAAAH,OAAA;AAIA,IAAAI,MAAA,GAAAJ,OAAA;AAYA,IAAAK,WAAA,GAAAL,OAAA","ignoreList":[]}
|
|
@@ -1,6 +1,23 @@
|
|
|
1
|
-
import React, { useEffect
|
|
2
|
-
import {
|
|
3
|
-
|
|
1
|
+
import React, { useEffect } from 'react';
|
|
2
|
+
import { StyleSheet } from 'react-native';
|
|
3
|
+
import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withSequence, withTiming, Easing } from 'react-native-reanimated';
|
|
4
|
+
/**
|
|
5
|
+
* Pulse animation component using Reanimated 3
|
|
6
|
+
*
|
|
7
|
+
* Creates a subtle breathing/pulsing effect using:
|
|
8
|
+
* - Shared values for performance
|
|
9
|
+
* - Worklets for 60 FPS on UI thread
|
|
10
|
+
* - Opacity animation for pulse effect
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```tsx
|
|
14
|
+
* <PulseAnimation
|
|
15
|
+
* width={200}
|
|
16
|
+
* height={20}
|
|
17
|
+
* borderRadius={4}
|
|
18
|
+
* />
|
|
19
|
+
* ```
|
|
20
|
+
*/
|
|
4
21
|
export function PulseAnimation({
|
|
5
22
|
width,
|
|
6
23
|
height,
|
|
@@ -10,30 +27,38 @@ export function PulseAnimation({
|
|
|
10
27
|
style,
|
|
11
28
|
children
|
|
12
29
|
}) {
|
|
13
|
-
|
|
30
|
+
// Shared value for opacity (0 to 1)
|
|
31
|
+
const opacity = useSharedValue(1);
|
|
14
32
|
useEffect(() => {
|
|
15
|
-
|
|
16
|
-
|
|
33
|
+
// Start infinite pulse animation
|
|
34
|
+
// Sequence: fade out -> fade in
|
|
35
|
+
opacity.value = withRepeat(withSequence(withTiming(0.5, {
|
|
17
36
|
duration: duration / 2,
|
|
18
|
-
easing: Easing.inOut(Easing.ease)
|
|
19
|
-
|
|
20
|
-
}), Animated.timing(opacity, {
|
|
21
|
-
toValue: 1,
|
|
37
|
+
easing: Easing.inOut(Easing.ease)
|
|
38
|
+
}), withTiming(1, {
|
|
22
39
|
duration: duration / 2,
|
|
23
|
-
easing: Easing.inOut(Easing.ease)
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
40
|
+
easing: Easing.inOut(Easing.ease)
|
|
41
|
+
})), -1,
|
|
42
|
+
// Infinite repeat
|
|
43
|
+
false // Don't reverse
|
|
44
|
+
);
|
|
28
45
|
}, [duration, opacity]);
|
|
46
|
+
|
|
47
|
+
// Animated style for pulse effect
|
|
48
|
+
const animatedStyle = useAnimatedStyle(() => {
|
|
49
|
+
'worklet';
|
|
50
|
+
|
|
51
|
+
return {
|
|
52
|
+
opacity: opacity.value
|
|
53
|
+
};
|
|
54
|
+
}, []);
|
|
29
55
|
return /*#__PURE__*/React.createElement(Animated.View, {
|
|
30
56
|
style: [styles.container, {
|
|
31
57
|
width,
|
|
32
58
|
height,
|
|
33
59
|
borderRadius,
|
|
34
|
-
backgroundColor: baseColor
|
|
35
|
-
|
|
36
|
-
}, style]
|
|
60
|
+
backgroundColor: baseColor
|
|
61
|
+
}, animatedStyle, style]
|
|
37
62
|
}, children);
|
|
38
63
|
}
|
|
39
64
|
const styles = StyleSheet.create({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","
|
|
1
|
+
{"version":3,"names":["React","useEffect","StyleSheet","Animated","useSharedValue","useAnimatedStyle","withRepeat","withSequence","withTiming","Easing","PulseAnimation","width","height","baseColor","duration","borderRadius","style","children","opacity","value","easing","inOut","ease","animatedStyle","createElement","View","styles","container","backgroundColor","create","overflow"],"sourceRoot":"../../../src","sources":["animations/PulseAnimation.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AAExC,SAASC,UAAU,QAAQ,cAAc;AACzC,OAAOC,QAAQ,IACbC,cAAc,EACdC,gBAAgB,EAChBC,UAAU,EACVC,YAAY,EACZC,UAAU,EACVC,MAAM,QACD,yBAAyB;AA+ChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAcA,CAAC;EAC7BC,KAAK;EACLC,MAAM;EACNC,SAAS,GAAG,SAAS;EACrBC,QAAQ,GAAG,IAAI;EACfC,YAAY,GAAG,CAAC;EAChBC,KAAK;EACLC;AACU,CAAC,EAAE;EACb;EACA,MAAMC,OAAO,GAAGd,cAAc,CAAC,CAAC,CAAC;EAEjCH,SAAS,CAAC,MAAM;IACd;IACA;IACAiB,OAAO,CAACC,KAAK,GAAGb,UAAU,CACxBC,YAAY,CACVC,UAAU,CAAC,GAAG,EAAE;MACdM,QAAQ,EAAEA,QAAQ,GAAG,CAAC;MACtBM,MAAM,EAAEX,MAAM,CAACY,KAAK,CAACZ,MAAM,CAACa,IAAI;IAClC,CAAC,CAAC,EACFd,UAAU,CAAC,CAAC,EAAE;MACZM,QAAQ,EAAEA,QAAQ,GAAG,CAAC;MACtBM,MAAM,EAAEX,MAAM,CAACY,KAAK,CAACZ,MAAM,CAACa,IAAI;IAClC,CAAC,CACH,CAAC,EACD,CAAC,CAAC;IAAE;IACJ,KAAK,CAAC;IACR,CAAC;EACH,CAAC,EAAE,CAACR,QAAQ,EAAEI,OAAO,CAAC,CAAC;;EAEvB;EACA,MAAMK,aAAa,GAAGlB,gBAAgB,CAAC,MAAM;IAC3C,SAAS;;IAET,OAAO;MACLa,OAAO,EAAEA,OAAO,CAACC;IACnB,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,oBACEnB,KAAA,CAAAwB,aAAA,CAACrB,QAAQ,CAACsB,IAAI;IACZT,KAAK,EAAE,CACLU,MAAM,CAACC,SAAS,EAChB;MACEhB,KAAK;MACLC,MAAM;MACNG,YAAY;MACZa,eAAe,EAAEf;IACnB,CAAC,EACDU,aAAa,EACbP,KAAK;EACL,GAEDC,QACY,CAAC;AAEpB;AAEA,MAAMS,MAAM,GAAGxB,UAAU,CAAC2B,MAAM,CAAC;EAC/BF,SAAS,EAAE;IACTG,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC","ignoreList":[]}
|
|
@@ -1,8 +1,24 @@
|
|
|
1
|
-
import React, { useEffect
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import React, { useEffect } from 'react';
|
|
2
|
+
import { StyleSheet, View } from 'react-native';
|
|
3
|
+
import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, interpolate, Easing } from 'react-native-reanimated';
|
|
4
|
+
import { LinearGradient } from 'react-native-linear-gradient';
|
|
5
|
+
/**
|
|
6
|
+
* Shimmer animation component using Reanimated 3
|
|
7
|
+
*
|
|
8
|
+
* Creates a smooth left-to-right shimmer effect using:
|
|
9
|
+
* - Shared values for performance
|
|
10
|
+
* - Worklets for 60 FPS on UI thread
|
|
11
|
+
* - Linear gradient for shimmer effect
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```tsx
|
|
15
|
+
* <ShimmerAnimation
|
|
16
|
+
* width={200}
|
|
17
|
+
* height={20}
|
|
18
|
+
* borderRadius={4}
|
|
19
|
+
* />
|
|
20
|
+
* ```
|
|
21
|
+
*/
|
|
6
22
|
export function ShimmerAnimation({
|
|
7
23
|
width,
|
|
8
24
|
height,
|
|
@@ -13,30 +29,33 @@ export function ShimmerAnimation({
|
|
|
13
29
|
style,
|
|
14
30
|
children
|
|
15
31
|
}) {
|
|
16
|
-
|
|
17
|
-
const
|
|
32
|
+
// Shared value for animation progress (0 to 1)
|
|
33
|
+
const progress = useSharedValue(0);
|
|
18
34
|
useEffect(() => {
|
|
19
|
-
|
|
20
|
-
|
|
35
|
+
// Start infinite shimmer animation
|
|
36
|
+
progress.value = withRepeat(withTiming(1, {
|
|
21
37
|
duration,
|
|
22
|
-
easing: Easing.linear
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
38
|
+
easing: Easing.linear
|
|
39
|
+
}), -1,
|
|
40
|
+
// Infinite repeat
|
|
41
|
+
false // Don't reverse
|
|
42
|
+
);
|
|
27
43
|
}, [duration, progress]);
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
44
|
+
|
|
45
|
+
// Animated style for shimmer overlay
|
|
46
|
+
const animatedStyle = useAnimatedStyle(() => {
|
|
47
|
+
'worklet';
|
|
48
|
+
|
|
49
|
+
// Calculate shimmer position
|
|
50
|
+
// Interpolate from -100% to 100% to create left-to-right sweep
|
|
51
|
+
const translateX = interpolate(progress.value, [0, 1], [-1, 1]);
|
|
52
|
+
return {
|
|
53
|
+
transform: [{
|
|
54
|
+
translateX: translateX * (typeof width === 'number' ? width : 200)
|
|
55
|
+
}]
|
|
56
|
+
};
|
|
57
|
+
}, [width]);
|
|
38
58
|
return /*#__PURE__*/React.createElement(View, {
|
|
39
|
-
onLayout: onLayout,
|
|
40
59
|
style: [styles.container, {
|
|
41
60
|
width,
|
|
42
61
|
height,
|
|
@@ -44,42 +63,34 @@ export function ShimmerAnimation({
|
|
|
44
63
|
backgroundColor: baseColor
|
|
45
64
|
}, style]
|
|
46
65
|
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
transform: [{
|
|
51
|
-
translateX
|
|
52
|
-
}]
|
|
53
|
-
}]
|
|
54
|
-
}, /*#__PURE__*/React.createElement(View, {
|
|
55
|
-
style: [styles.segment, {
|
|
56
|
-
backgroundColor: highlightColor,
|
|
57
|
-
opacity: 0.25
|
|
66
|
+
style: [StyleSheet.absoluteFill, {
|
|
67
|
+
overflow: 'hidden',
|
|
68
|
+
borderRadius
|
|
58
69
|
}]
|
|
59
|
-
}
|
|
60
|
-
style: [styles.
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
}]
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
+
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
71
|
+
style: [styles.shimmer, {
|
|
72
|
+
width: typeof width === 'number' ? width : '100%',
|
|
73
|
+
height: '100%'
|
|
74
|
+
}, animatedStyle]
|
|
75
|
+
}, /*#__PURE__*/React.createElement(LinearGradient, {
|
|
76
|
+
colors: [baseColor, highlightColor, highlightColor, baseColor],
|
|
77
|
+
start: {
|
|
78
|
+
x: 0,
|
|
79
|
+
y: 0
|
|
80
|
+
},
|
|
81
|
+
end: {
|
|
82
|
+
x: 1,
|
|
83
|
+
y: 0
|
|
84
|
+
},
|
|
85
|
+
style: StyleSheet.absoluteFill
|
|
86
|
+
}))), children);
|
|
70
87
|
}
|
|
71
88
|
const styles = StyleSheet.create({
|
|
72
89
|
container: {
|
|
73
90
|
overflow: 'hidden'
|
|
74
91
|
},
|
|
75
|
-
|
|
76
|
-
position: 'absolute'
|
|
77
|
-
top: 0,
|
|
78
|
-
bottom: 0,
|
|
79
|
-
flexDirection: 'row'
|
|
80
|
-
},
|
|
81
|
-
segment: {
|
|
82
|
-
flex: 1
|
|
92
|
+
shimmer: {
|
|
93
|
+
position: 'absolute'
|
|
83
94
|
}
|
|
84
95
|
});
|
|
85
96
|
//# sourceMappingURL=ShimmerAnimation.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","
|
|
1
|
+
{"version":3,"names":["React","useEffect","StyleSheet","View","Animated","useSharedValue","useAnimatedStyle","withRepeat","withTiming","interpolate","Easing","LinearGradient","ShimmerAnimation","width","height","baseColor","highlightColor","duration","borderRadius","style","children","progress","value","easing","linear","animatedStyle","translateX","transform","createElement","styles","container","backgroundColor","absoluteFill","overflow","shimmer","colors","start","x","y","end","create","position"],"sourceRoot":"../../../src","sources":["animations/ShimmerAnimation.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AAExC,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,OAAOC,QAAQ,IACbC,cAAc,EACdC,gBAAgB,EAChBC,UAAU,EACVC,UAAU,EACVC,WAAW,EACXC,MAAM,QACD,yBAAyB;AAChC,SAASC,cAAc,QAAQ,8BAA8B;AA+C7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAAC;EAC/BC,KAAK;EACLC,MAAM;EACNC,SAAS,GAAG,SAAS;EACrBC,cAAc,GAAG,SAAS;EAC1BC,QAAQ,GAAG,IAAI;EACfC,YAAY,GAAG,CAAC;EAChBC,KAAK;EACLC;AACY,CAAC,EAAE;EACf;EACA,MAAMC,QAAQ,GAAGhB,cAAc,CAAC,CAAC,CAAC;EAElCJ,SAAS,CAAC,MAAM;IACd;IACAoB,QAAQ,CAACC,KAAK,GAAGf,UAAU,CACzBC,UAAU,CAAC,CAAC,EAAE;MACZS,QAAQ;MACRM,MAAM,EAAEb,MAAM,CAACc;IACjB,CAAC,CAAC,EACF,CAAC,CAAC;IAAE;IACJ,KAAK,CAAC;IACR,CAAC;EACH,CAAC,EAAE,CAACP,QAAQ,EAAEI,QAAQ,CAAC,CAAC;;EAExB;EACA,MAAMI,aAAa,GAAGnB,gBAAgB,CAAC,MAAM;IAC3C,SAAS;;IAET;IACA;IACA,MAAMoB,UAAU,GAAGjB,WAAW,CAACY,QAAQ,CAACC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAE/D,OAAO;MACLK,SAAS,EAAE,CAAC;QAAED,UAAU,EAAEA,UAAU,IAAI,OAAOb,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAG,GAAG;MAAE,CAAC;IACpF,CAAC;EACH,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,oBACEb,KAAA,CAAA4B,aAAA,CAACzB,IAAI;IACHgB,KAAK,EAAE,CACLU,MAAM,CAACC,SAAS,EAChB;MACEjB,KAAK;MACLC,MAAM;MACNI,YAAY;MACZa,eAAe,EAAEhB;IACnB,CAAC,EACDI,KAAK;EACL,gBAGFnB,KAAA,CAAA4B,aAAA,CAACxB,QAAQ,CAACD,IAAI;IACZgB,KAAK,EAAE,CACLjB,UAAU,CAAC8B,YAAY,EACvB;MACEC,QAAQ,EAAE,QAAQ;MAClBf;IACF,CAAC;EACD,gBAEFlB,KAAA,CAAA4B,aAAA,CAACxB,QAAQ,CAACD,IAAI;IACZgB,KAAK,EAAE,CACLU,MAAM,CAACK,OAAO,EACd;MACErB,KAAK,EAAE,OAAOA,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAG,MAAM;MACjDC,MAAM,EAAE;IACV,CAAC,EACDW,aAAa;EACb,gBAEFzB,KAAA,CAAA4B,aAAA,CAACjB,cAAc;IACbwB,MAAM,EAAE,CAACpB,SAAS,EAAEC,cAAc,EAAEA,cAAc,EAAED,SAAS,CAAE;IAC/DqB,KAAK,EAAE;MAAEC,CAAC,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IACtBC,GAAG,EAAE;MAAEF,CAAC,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IACpBnB,KAAK,EAAEjB,UAAU,CAAC8B;EAAa,CAChC,CACY,CACF,CAAC,EAGfZ,QACG,CAAC;AAEX;AAEA,MAAMS,MAAM,GAAG3B,UAAU,CAACsC,MAAM,CAAC;EAC/BV,SAAS,EAAE;IACTG,QAAQ,EAAE;EACZ,CAAC;EACDC,OAAO,EAAE;IACPO,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC","ignoreList":[]}
|
|
@@ -3,8 +3,7 @@ import { Parser } from '../core/parser';
|
|
|
3
3
|
import { SkeletonRenderer } from './SkeletonRenderer';
|
|
4
4
|
import { SkeletonIgnore } from './SkeletonIgnore';
|
|
5
5
|
import { StyleSkeleton } from '../core/generator/StyleSkeleton';
|
|
6
|
-
import {
|
|
7
|
-
import { expandListPlaceholders } from '../core/parser/expandLists';
|
|
6
|
+
import { expandToComponentNodes } from '../core/parser/expandOffline';
|
|
8
7
|
import { DEFAULT_CONFIG } from '../constants/defaults';
|
|
9
8
|
|
|
10
9
|
/**
|
|
@@ -40,8 +39,7 @@ export function Skeleton({
|
|
|
40
39
|
children,
|
|
41
40
|
styles,
|
|
42
41
|
excludeStyles,
|
|
43
|
-
deep,
|
|
44
|
-
count = 6,
|
|
42
|
+
deep = false,
|
|
45
43
|
animation = DEFAULT_CONFIG.animation,
|
|
46
44
|
duration = DEFAULT_CONFIG.duration,
|
|
47
45
|
baseColor = DEFAULT_CONFIG.baseColor,
|
|
@@ -62,28 +60,18 @@ export function Skeleton({
|
|
|
62
60
|
console.log('[Skelo] Parsing component tree...');
|
|
63
61
|
}
|
|
64
62
|
try {
|
|
65
|
-
//
|
|
66
|
-
//
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
// Deep mode: expand opaque components into their real host tree via the
|
|
70
|
-
// opt-in expander (registered by importing 'react-native-skelo/deep').
|
|
71
|
-
// When `deep` is not set explicitly, it's used automatically whenever the
|
|
72
|
-
// expander is available. Falls back to static parsing otherwise.
|
|
73
|
-
const expand = getDeepExpander();
|
|
74
|
-
const wantDeep = deep === undefined ? expand !== null : deep;
|
|
75
|
-
if (wantDeep && expand) {
|
|
76
|
-
const expanded = expand(/*#__PURE__*/React.createElement(React.Fragment, null, prepared));
|
|
63
|
+
// Deep mode: expand opaque components into their real host tree by
|
|
64
|
+
// rendering them offline. Falls back to static parsing on failure.
|
|
65
|
+
if (deep) {
|
|
66
|
+
const expanded = expandToComponentNodes(/*#__PURE__*/React.createElement(React.Fragment, null, children));
|
|
77
67
|
if (expanded && expanded.length > 0) {
|
|
78
68
|
return expanded;
|
|
79
69
|
}
|
|
80
70
|
if (__DEV__) {
|
|
81
71
|
console.warn('[Skelo] deep expansion returned nothing; falling back to static parsing.');
|
|
82
72
|
}
|
|
83
|
-
} else if (deep === true && !expand && __DEV__) {
|
|
84
|
-
console.warn("[Skelo] `deep` requires react-reconciler. Install it and add `import 'react-native-skelo/deep';` in your app entry.");
|
|
85
73
|
}
|
|
86
|
-
const parsed = Parser.parse(
|
|
74
|
+
const parsed = Parser.parse(children);
|
|
87
75
|
if (__DEV__ && debug) {
|
|
88
76
|
// Log a lightweight summary: the raw nodes hold React elements
|
|
89
77
|
// (`element`) and arbitrary props that aren't safely serializable.
|
|
@@ -101,7 +89,7 @@ export function Skeleton({
|
|
|
101
89
|
}
|
|
102
90
|
return [];
|
|
103
91
|
}
|
|
104
|
-
}, [loading, styles, deep,
|
|
92
|
+
}, [loading, styles, deep, children, debug]);
|
|
105
93
|
|
|
106
94
|
// Create skeleton config
|
|
107
95
|
const config = useMemo(() => ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useMemo","Parser","SkeletonRenderer","SkeletonIgnore","StyleSkeleton","
|
|
1
|
+
{"version":3,"names":["React","useMemo","Parser","SkeletonRenderer","SkeletonIgnore","StyleSkeleton","expandToComponentNodes","DEFAULT_CONFIG","Skeleton","loading","children","styles","excludeStyles","deep","animation","duration","baseColor","highlightColor","borderRadius","accessible","accessibilityLabel","debug","skeletonTree","__DEV__","console","log","expanded","createElement","Fragment","length","warn","parsed","parse","summarize","nodes","map","node","type","style","JSON","stringify","error","config","exclude","tree","displayName","Ignore"],"sourceRoot":"../../../src","sources":["components/Skeleton.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAEtC,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,sBAAsB,QAAQ,8BAA8B;AACrE,SAASC,cAAc,QAAQ,uBAAuB;;AAEtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,QAAQA,CAAC;EACvBC,OAAO;EACPC,QAAQ;EACRC,MAAM;EACNC,aAAa;EACbC,IAAI,GAAG,KAAK;EACZC,SAAS,GAAGP,cAAc,CAACO,SAAS;EACpCC,QAAQ,GAAGR,cAAc,CAACQ,QAAQ;EAClCC,SAAS,GAAGT,cAAc,CAACS,SAAS;EACpCC,cAAc,GAAGV,cAAc,CAACU,cAAc;EAC9CC,YAAY,GAAGX,cAAc,CAACW,YAAY;EAC1CC,UAAU,GAAG,IAAI;EACjBC,kBAAkB,GAAG,iBAAiB;EACtCC,KAAK,GAAG;AACK,CAAC,EAAE;EAChB;EACA;EACA;EACA,MAAMC,YAAY,GAAGrB,OAAO,CAAC,MAAM;IACjC,IAAI,CAACQ,OAAO,IAAIE,MAAM,EAAE;MACtB,OAAO,EAAE;IACX;IAEA,IAAIY,OAAO,IAAIF,KAAK,EAAE;MACpBG,OAAO,CAACC,GAAG,CAAC,mCAAmC,CAAC;IAClD;IAEA,IAAI;MACF;MACA;MACA,IAAIZ,IAAI,EAAE;QACR,MAAMa,QAAQ,GAAGpB,sBAAsB,cAACN,KAAA,CAAA2B,aAAA,CAAA3B,KAAA,CAAA4B,QAAA,QAAGlB,QAAW,CAAC,CAAC;QACxD,IAAIgB,QAAQ,IAAIA,QAAQ,CAACG,MAAM,GAAG,CAAC,EAAE;UACnC,OAAOH,QAAQ;QACjB;QACA,IAAIH,OAAO,EAAE;UACXC,OAAO,CAACM,IAAI,CAAC,0EAA0E,CAAC;QAC1F;MACF;MAEA,MAAMC,MAAM,GAAG7B,MAAM,CAAC8B,KAAK,CAACtB,QAAQ,CAAC;MAErC,IAAIa,OAAO,IAAIF,KAAK,EAAE;QACpB;QACA;QACA,MAAMY,SAAS,GAAIC,KAAoB,IACrCA,KAAK,CAACC,GAAG,CAACC,IAAI,KAAK;UACjBC,IAAI,EAAED,IAAI,CAACC,IAAI;UACfC,KAAK,EAAEF,IAAI,CAACE,KAAK;UACjB5B,QAAQ,EAAEuB,SAAS,CAACG,IAAI,CAAC1B,QAAQ;QACnC,CAAC,CAAC,CAAC;QACLc,OAAO,CAACC,GAAG,CAAC,sBAAsB,EAAEc,IAAI,CAACC,SAAS,CAACP,SAAS,CAACF,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MACjF;MAEA,OAAOA,MAAM;IACf,CAAC,CAAC,OAAOU,KAAK,EAAE;MACd,IAAIlB,OAAO,EAAE;QACXC,OAAO,CAACiB,KAAK,CAAC,yCAAyC,EAAEA,KAAK,CAAC;MACjE;MACA,OAAO,EAAE;IACX;EACF,CAAC,EAAE,CAAChC,OAAO,EAAEE,MAAM,EAAEE,IAAI,EAAEH,QAAQ,EAAEW,KAAK,CAAC,CAAC;;EAE5C;EACA,MAAMqB,MAAM,GAAGzC,OAAO,CACpB,OAAO;IACLa,SAAS;IACTC,QAAQ;IACRC,SAAS;IACTC,cAAc;IACdC;EACF,CAAC,CAAC,EACF,CAACJ,SAAS,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,cAAc,EAAEC,YAAY,CAC/D,CAAC;;EAED;EACA,IAAI,CAACT,OAAO,EAAE;IACZ,oBAAOT,KAAA,CAAA2B,aAAA,CAAA3B,KAAA,CAAA4B,QAAA,QAAGlB,QAAW,CAAC;EACxB;;EAEA;EACA;EACA,IAAIC,MAAM,EAAE;IACV,oBAAOX,KAAA,CAAA2B,aAAA,CAACtB,aAAa;MAACM,MAAM,EAAEA,MAAO;MAAC+B,MAAM,EAAEA,MAAO;MAACC,OAAO,EAAE/B;IAAc,CAAE,CAAC;EAClF;EAEA,oBACEZ,KAAA,CAAA2B,aAAA,CAACxB,gBAAgB;IACfyC,IAAI,EAAEtB,YAAa;IACnBoB,MAAM,EAAEA,MAAO;IACfvB,UAAU,EAAEA,UAAW;IACvBC,kBAAkB,EAAEA,kBAAmB;IACvCC,KAAK,EAAEA;EAAM,CACd,CAAC;AAEN;AAEAb,QAAQ,CAACqC,WAAW,GAAG,UAAU;;AAEjC;AACA;AACA;AACA;AACArC,QAAQ,CAACsC,MAAM,GAAG1C,cAAc","ignoreList":[]}
|
package/lib/module/index.js
CHANGED
|
@@ -6,10 +6,6 @@
|
|
|
6
6
|
* @packageDocumentation
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
// Auto-register deep expansion (react-reconciler ships as a dependency), so
|
|
10
|
-
// `<Skeleton deep>` / opaque components work with zero setup.
|
|
11
|
-
import './deep';
|
|
12
|
-
|
|
13
9
|
// Main component
|
|
14
10
|
export { Skeleton } from './components/Skeleton';
|
|
15
11
|
export { SkeletonIgnore } from './components/SkeletonIgnore';
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Skeleton","SkeletonIgnore","withSkeleton","StyleSkeleton","Skelo","SkeletonBox","SkeletonText","SkeletonImage","SkeletonCircle"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA
|
|
1
|
+
{"version":3,"names":["Skeleton","SkeletonIgnore","withSkeleton","StyleSkeleton","Skelo","SkeletonBox","SkeletonText","SkeletonImage","SkeletonCircle"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,SAASA,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,YAAY,QAAQ,2BAA2B;AAExD,SAASC,aAAa,QAAQ,gCAAgC;AAG9D;AACA,SAASC,KAAK,QAAQ,SAAS;;AAE/B;;AASA;AACA,SAASC,WAAW,EAAEC,YAAY,EAAEC,aAAa,EAAEC,cAAc,QAAQ,yBAAyB","ignoreList":[]}
|
|
@@ -1,15 +1,59 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { DimensionValue, StyleProp, ViewStyle } from 'react-native';
|
|
3
3
|
interface PulseProps {
|
|
4
|
+
/**
|
|
5
|
+
* Width of the pulse container
|
|
6
|
+
*/
|
|
4
7
|
width?: DimensionValue;
|
|
8
|
+
/**
|
|
9
|
+
* Height of the pulse container
|
|
10
|
+
*/
|
|
5
11
|
height?: DimensionValue;
|
|
12
|
+
/**
|
|
13
|
+
* Base color of the skeleton
|
|
14
|
+
* @default '#E1E9EE'
|
|
15
|
+
*/
|
|
6
16
|
baseColor?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Highlight color for pulse
|
|
19
|
+
* @default '#F2F8FC'
|
|
20
|
+
*/
|
|
7
21
|
highlightColor?: string;
|
|
22
|
+
/**
|
|
23
|
+
* Animation duration in milliseconds
|
|
24
|
+
* @default 1000
|
|
25
|
+
*/
|
|
8
26
|
duration?: number;
|
|
27
|
+
/**
|
|
28
|
+
* Border radius
|
|
29
|
+
*/
|
|
9
30
|
borderRadius?: number;
|
|
31
|
+
/**
|
|
32
|
+
* Additional styles
|
|
33
|
+
*/
|
|
10
34
|
style?: StyleProp<ViewStyle>;
|
|
35
|
+
/**
|
|
36
|
+
* Child content (rendered inside pulse)
|
|
37
|
+
*/
|
|
11
38
|
children?: React.ReactNode;
|
|
12
39
|
}
|
|
40
|
+
/**
|
|
41
|
+
* Pulse animation component using Reanimated 3
|
|
42
|
+
*
|
|
43
|
+
* Creates a subtle breathing/pulsing effect using:
|
|
44
|
+
* - Shared values for performance
|
|
45
|
+
* - Worklets for 60 FPS on UI thread
|
|
46
|
+
* - Opacity animation for pulse effect
|
|
47
|
+
*
|
|
48
|
+
* @example
|
|
49
|
+
* ```tsx
|
|
50
|
+
* <PulseAnimation
|
|
51
|
+
* width={200}
|
|
52
|
+
* height={20}
|
|
53
|
+
* borderRadius={4}
|
|
54
|
+
* />
|
|
55
|
+
* ```
|
|
56
|
+
*/
|
|
13
57
|
export declare function PulseAnimation({ width, height, baseColor, duration, borderRadius, style, children, }: PulseProps): React.JSX.Element;
|
|
14
58
|
export {};
|
|
15
59
|
//# sourceMappingURL=PulseAnimation.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PulseAnimation.d.ts","sourceRoot":"","sources":["../../../src/animations/PulseAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"PulseAnimation.d.ts","sourceRoot":"","sources":["../../../src/animations/PulseAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAWzE,UAAU,UAAU;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;OAEG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,MAAM,EACN,SAAqB,EACrB,QAAe,EACf,YAAgB,EAChB,KAAK,EACL,QAAQ,GACT,EAAE,UAAU,qBAiDZ"}
|
|
@@ -1,15 +1,59 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { DimensionValue, StyleProp, ViewStyle } from 'react-native';
|
|
3
3
|
interface ShimmerProps {
|
|
4
|
+
/**
|
|
5
|
+
* Width of the shimmer container
|
|
6
|
+
*/
|
|
4
7
|
width?: DimensionValue;
|
|
8
|
+
/**
|
|
9
|
+
* Height of the shimmer container
|
|
10
|
+
*/
|
|
5
11
|
height?: DimensionValue;
|
|
12
|
+
/**
|
|
13
|
+
* Base color of the skeleton
|
|
14
|
+
* @default '#E1E9EE'
|
|
15
|
+
*/
|
|
6
16
|
baseColor?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Highlight color that shimmers across
|
|
19
|
+
* @default '#F2F8FC'
|
|
20
|
+
*/
|
|
7
21
|
highlightColor?: string;
|
|
22
|
+
/**
|
|
23
|
+
* Animation duration in milliseconds
|
|
24
|
+
* @default 1500
|
|
25
|
+
*/
|
|
8
26
|
duration?: number;
|
|
27
|
+
/**
|
|
28
|
+
* Border radius
|
|
29
|
+
*/
|
|
9
30
|
borderRadius?: number;
|
|
31
|
+
/**
|
|
32
|
+
* Additional styles
|
|
33
|
+
*/
|
|
10
34
|
style?: StyleProp<ViewStyle>;
|
|
35
|
+
/**
|
|
36
|
+
* Child content (rendered on top of shimmer)
|
|
37
|
+
*/
|
|
11
38
|
children?: React.ReactNode;
|
|
12
39
|
}
|
|
40
|
+
/**
|
|
41
|
+
* Shimmer animation component using Reanimated 3
|
|
42
|
+
*
|
|
43
|
+
* Creates a smooth left-to-right shimmer effect using:
|
|
44
|
+
* - Shared values for performance
|
|
45
|
+
* - Worklets for 60 FPS on UI thread
|
|
46
|
+
* - Linear gradient for shimmer effect
|
|
47
|
+
*
|
|
48
|
+
* @example
|
|
49
|
+
* ```tsx
|
|
50
|
+
* <ShimmerAnimation
|
|
51
|
+
* width={200}
|
|
52
|
+
* height={20}
|
|
53
|
+
* borderRadius={4}
|
|
54
|
+
* />
|
|
55
|
+
* ```
|
|
56
|
+
*/
|
|
13
57
|
export declare function ShimmerAnimation({ width, height, baseColor, highlightColor, duration, borderRadius, style, children, }: ShimmerProps): React.JSX.Element;
|
|
14
58
|
export {};
|
|
15
59
|
//# sourceMappingURL=ShimmerAnimation.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShimmerAnimation.d.ts","sourceRoot":"","sources":["../../../src/animations/ShimmerAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ShimmerAnimation.d.ts","sourceRoot":"","sources":["../../../src/animations/ShimmerAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAYzE,UAAU,YAAY;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;OAEG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,MAAM,EACN,SAAqB,EACrB,cAA0B,EAC1B,QAAe,EACf,YAAgB,EAChB,KAAK,EACL,QAAQ,GACT,EAAE,YAAY,qBA2Ed"}
|
|
@@ -29,7 +29,7 @@ import { SkeletonIgnore } from './SkeletonIgnore';
|
|
|
29
29
|
* </Skeleton>
|
|
30
30
|
* ```
|
|
31
31
|
*/
|
|
32
|
-
export declare function Skeleton({ loading, children, styles, excludeStyles, deep,
|
|
32
|
+
export declare function Skeleton({ loading, children, styles, excludeStyles, deep, animation, duration, baseColor, highlightColor, borderRadius, accessible, accessibilityLabel, debug, }: SkeletonProps): React.JSX.Element;
|
|
33
33
|
export declare namespace Skeleton {
|
|
34
34
|
var displayName: string;
|
|
35
35
|
var Ignore: typeof SkeletonIgnore;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAKlD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,aAAa,EACb,IAAY,EACZ,SAAoC,EACpC,QAAkC,EAClC,SAAoC,EACpC,cAA8C,EAC9C,YAA0C,EAC1C,UAAiB,EACjB,kBAAsC,EACtC,KAAa,GACd,EAAE,aAAa,qBAiFf;yBA/Fe,QAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,YAAY,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,YAAY,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAGjE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,YAAY,EACV,aAAa,EACb,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,eAAe,GAChB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC"}
|
|
@@ -69,14 +69,6 @@ export interface SkeletonProps {
|
|
|
69
69
|
* When using `styles`, style keys to skip (e.g. layout containers).
|
|
70
70
|
*/
|
|
71
71
|
excludeStyles?: string[];
|
|
72
|
-
/**
|
|
73
|
-
* Number of placeholder rows to render for a `FlatList` / `SectionList`
|
|
74
|
-
* while its data is still loading (its rows don't exist yet, so Skelo calls
|
|
75
|
-
* `renderItem` with a placeholder and repeats it `count` times).
|
|
76
|
-
*
|
|
77
|
-
* @default 6
|
|
78
|
-
*/
|
|
79
|
-
count?: number;
|
|
80
72
|
/**
|
|
81
73
|
* Deep mode: expand opaque (custom) child components into their real
|
|
82
74
|
* host-element tree via offline rendering, producing a structured skeleton
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/types/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElE;;;;;;;;;GASG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IAEjB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAEzC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,EAAE,CAAC;IAE7C;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IAEzB
|
|
1
|
+
{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/types/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElE;;;;;;;;;GASG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IAEjB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAEzC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,EAAE,CAAC;IAE7C;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IAEzB;;;;;;;;;;;;;OAaG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAEzC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACjC,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,cAAc,CAAC,EACb,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,eAAe,GAAG,cAAc,GAAG,cAAc,CAAC;CAC5F;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB"}
|