@masumdev/rn-ui 0.1.3 → 0.1.5
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/components/Skeleton.js +19 -18
- package/lib/commonjs/components/Skeleton.js.map +1 -1
- package/lib/module/components/Skeleton.js +19 -18
- package/lib/module/components/Skeleton.js.map +1 -1
- package/lib/typescript/commonjs/components/Skeleton.d.ts +3 -1
- package/lib/typescript/commonjs/components/Skeleton.d.ts.map +1 -1
- package/lib/typescript/module/components/Skeleton.d.ts +3 -1
- package/lib/typescript/module/components/Skeleton.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.Skeleton =
|
|
6
|
+
exports.Skeleton = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
9
|
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
|
|
@@ -11,7 +11,8 @@ var _index = require("../theme/index.js");
|
|
|
11
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
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); }
|
|
13
13
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
|
-
|
|
14
|
+
const INITIAL_WIDTH = _reactNative.Dimensions.get("window").width || 300;
|
|
15
|
+
function SkeletonComponent({
|
|
15
16
|
animated = true,
|
|
16
17
|
radius = "md",
|
|
17
18
|
direction = "top-left-to-bottom-right",
|
|
@@ -23,11 +24,9 @@ function Skeleton({
|
|
|
23
24
|
colors,
|
|
24
25
|
radii
|
|
25
26
|
} = (0, _index.useTheme)();
|
|
26
|
-
const
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
});
|
|
30
|
-
const opacity = (0, _reactNativeReanimated.useSharedValue)(0.6);
|
|
27
|
+
const widthSV = (0, _reactNativeReanimated.useSharedValue)(INITIAL_WIDTH);
|
|
28
|
+
const heightSV = (0, _reactNativeReanimated.useSharedValue)(100);
|
|
29
|
+
const opacity = (0, _reactNativeReanimated.useSharedValue)(0.65);
|
|
31
30
|
const translateProgress = (0, _reactNativeReanimated.useSharedValue)(-1);
|
|
32
31
|
_react.default.useEffect(() => {
|
|
33
32
|
if (!animated) {
|
|
@@ -44,7 +43,7 @@ function Skeleton({
|
|
|
44
43
|
easing: _reactNativeReanimated.Easing.inOut(_reactNativeReanimated.Easing.ease)
|
|
45
44
|
}), -1, true);
|
|
46
45
|
|
|
47
|
-
// Continuous -1 to 1 loop on UI thread
|
|
46
|
+
// Continuous -1 to 1 loop on UI thread
|
|
48
47
|
const startProgress = direction === "top-right-to-bottom-left" ? 1 : -1;
|
|
49
48
|
const endProgress = direction === "top-right-to-bottom-left" ? -1 : 1;
|
|
50
49
|
translateProgress.value = startProgress;
|
|
@@ -56,17 +55,15 @@ function Skeleton({
|
|
|
56
55
|
(0, _reactNativeReanimated.cancelAnimation)(opacity);
|
|
57
56
|
(0, _reactNativeReanimated.cancelAnimation)(translateProgress);
|
|
58
57
|
};
|
|
59
|
-
}, [animated, direction
|
|
58
|
+
}, [animated, direction]);
|
|
60
59
|
const handleLayout = e => {
|
|
61
60
|
const {
|
|
62
61
|
width,
|
|
63
62
|
height
|
|
64
63
|
} = e.nativeEvent.layout;
|
|
65
|
-
if (width > 0
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
height
|
|
69
|
-
});
|
|
64
|
+
if (width > 0) {
|
|
65
|
+
widthSV.value = width;
|
|
66
|
+
heightSV.value = height;
|
|
70
67
|
}
|
|
71
68
|
onLayout?.(e);
|
|
72
69
|
};
|
|
@@ -74,19 +71,22 @@ function Skeleton({
|
|
|
74
71
|
opacity: opacity.value
|
|
75
72
|
}));
|
|
76
73
|
const shimmerAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
77
|
-
const w =
|
|
78
|
-
const h =
|
|
74
|
+
const w = widthSV.value || INITIAL_WIDTH;
|
|
75
|
+
const h = heightSV.value || 100;
|
|
79
76
|
const sweepDistance = (w + h) * 1.5;
|
|
80
77
|
const currentTranslate = translateProgress.value * sweepDistance;
|
|
78
|
+
const shimmerWidth = Math.max(40, Math.min(w * 0.3, 100));
|
|
81
79
|
switch (direction) {
|
|
82
80
|
case "top-to-bottom":
|
|
83
81
|
return {
|
|
82
|
+
width: shimmerWidth,
|
|
84
83
|
transform: [{
|
|
85
84
|
translateY: currentTranslate
|
|
86
85
|
}]
|
|
87
86
|
};
|
|
88
87
|
case "top-right-to-bottom-left":
|
|
89
88
|
return {
|
|
89
|
+
width: shimmerWidth,
|
|
90
90
|
transform: [{
|
|
91
91
|
translateX: currentTranslate
|
|
92
92
|
}, {
|
|
@@ -95,6 +95,7 @@ function Skeleton({
|
|
|
95
95
|
};
|
|
96
96
|
case "left-to-right":
|
|
97
97
|
return {
|
|
98
|
+
width: shimmerWidth,
|
|
98
99
|
transform: [{
|
|
99
100
|
translateX: currentTranslate
|
|
100
101
|
}]
|
|
@@ -102,6 +103,7 @@ function Skeleton({
|
|
|
102
103
|
case "top-left-to-bottom-right":
|
|
103
104
|
default:
|
|
104
105
|
return {
|
|
106
|
+
width: shimmerWidth,
|
|
105
107
|
transform: [{
|
|
106
108
|
translateX: currentTranslate
|
|
107
109
|
}, {
|
|
@@ -110,7 +112,6 @@ function Skeleton({
|
|
|
110
112
|
};
|
|
111
113
|
}
|
|
112
114
|
});
|
|
113
|
-
const shimmerWidth = Math.max(40, Math.min((layout.width || 200) * 0.3, 100));
|
|
114
115
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
|
|
115
116
|
style: [{
|
|
116
117
|
backgroundColor: colors.backgroundSubtle,
|
|
@@ -124,11 +125,11 @@ function Skeleton({
|
|
|
124
125
|
style: [_reactNative.StyleSheet.absoluteFill, {
|
|
125
126
|
top: -60,
|
|
126
127
|
bottom: -60,
|
|
127
|
-
width: shimmerWidth,
|
|
128
128
|
backgroundColor: colors.surface,
|
|
129
129
|
opacity: 0.25
|
|
130
130
|
}, shimmerAnimatedStyle]
|
|
131
131
|
})
|
|
132
132
|
});
|
|
133
133
|
}
|
|
134
|
+
const Skeleton = exports.Skeleton = /*#__PURE__*/_react.default.memo(SkeletonComponent);
|
|
134
135
|
//# sourceMappingURL=Skeleton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeReanimated","_interopRequireWildcard","_index","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeReanimated","_interopRequireWildcard","_index","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","INITIAL_WIDTH","Dimensions","width","SkeletonComponent","animated","radius","direction","style","onLayout","props","colors","radii","useTheme","widthSV","useSharedValue","heightSV","opacity","translateProgress","React","useEffect","cancelAnimation","value","withRepeat","withTiming","duration","easing","Easing","inOut","ease","startProgress","endProgress","linear","handleLayout","height","nativeEvent","layout","containerAnimatedStyle","useAnimatedStyle","shimmerAnimatedStyle","w","h","sweepDistance","currentTranslate","shimmerWidth","Math","max","min","transform","translateY","translateX","rotate","jsx","View","backgroundColor","backgroundSubtle","borderRadius","overflow","position","children","StyleSheet","absoluteFill","top","bottom","surface","Skeleton","exports","memo"],"sourceRoot":"../../../src","sources":["components/Skeleton.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import React from "react";
|
|
4
|
-
import { StyleSheet } from "react-native";
|
|
4
|
+
import { Dimensions, StyleSheet } from "react-native";
|
|
5
5
|
import Animated, { cancelAnimation, Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from "react-native-reanimated";
|
|
6
6
|
import { useTheme } from "../theme/index.js";
|
|
7
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
-
|
|
8
|
+
const INITIAL_WIDTH = Dimensions.get("window").width || 300;
|
|
9
|
+
function SkeletonComponent({
|
|
9
10
|
animated = true,
|
|
10
11
|
radius = "md",
|
|
11
12
|
direction = "top-left-to-bottom-right",
|
|
@@ -17,11 +18,9 @@ export function Skeleton({
|
|
|
17
18
|
colors,
|
|
18
19
|
radii
|
|
19
20
|
} = useTheme();
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
});
|
|
24
|
-
const opacity = useSharedValue(0.6);
|
|
21
|
+
const widthSV = useSharedValue(INITIAL_WIDTH);
|
|
22
|
+
const heightSV = useSharedValue(100);
|
|
23
|
+
const opacity = useSharedValue(0.65);
|
|
25
24
|
const translateProgress = useSharedValue(-1);
|
|
26
25
|
React.useEffect(() => {
|
|
27
26
|
if (!animated) {
|
|
@@ -38,7 +37,7 @@ export function Skeleton({
|
|
|
38
37
|
easing: Easing.inOut(Easing.ease)
|
|
39
38
|
}), -1, true);
|
|
40
39
|
|
|
41
|
-
// Continuous -1 to 1 loop on UI thread
|
|
40
|
+
// Continuous -1 to 1 loop on UI thread
|
|
42
41
|
const startProgress = direction === "top-right-to-bottom-left" ? 1 : -1;
|
|
43
42
|
const endProgress = direction === "top-right-to-bottom-left" ? -1 : 1;
|
|
44
43
|
translateProgress.value = startProgress;
|
|
@@ -50,17 +49,15 @@ export function Skeleton({
|
|
|
50
49
|
cancelAnimation(opacity);
|
|
51
50
|
cancelAnimation(translateProgress);
|
|
52
51
|
};
|
|
53
|
-
}, [animated, direction
|
|
52
|
+
}, [animated, direction]);
|
|
54
53
|
const handleLayout = e => {
|
|
55
54
|
const {
|
|
56
55
|
width,
|
|
57
56
|
height
|
|
58
57
|
} = e.nativeEvent.layout;
|
|
59
|
-
if (width > 0
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
height
|
|
63
|
-
});
|
|
58
|
+
if (width > 0) {
|
|
59
|
+
widthSV.value = width;
|
|
60
|
+
heightSV.value = height;
|
|
64
61
|
}
|
|
65
62
|
onLayout?.(e);
|
|
66
63
|
};
|
|
@@ -68,19 +65,22 @@ export function Skeleton({
|
|
|
68
65
|
opacity: opacity.value
|
|
69
66
|
}));
|
|
70
67
|
const shimmerAnimatedStyle = useAnimatedStyle(() => {
|
|
71
|
-
const w =
|
|
72
|
-
const h =
|
|
68
|
+
const w = widthSV.value || INITIAL_WIDTH;
|
|
69
|
+
const h = heightSV.value || 100;
|
|
73
70
|
const sweepDistance = (w + h) * 1.5;
|
|
74
71
|
const currentTranslate = translateProgress.value * sweepDistance;
|
|
72
|
+
const shimmerWidth = Math.max(40, Math.min(w * 0.3, 100));
|
|
75
73
|
switch (direction) {
|
|
76
74
|
case "top-to-bottom":
|
|
77
75
|
return {
|
|
76
|
+
width: shimmerWidth,
|
|
78
77
|
transform: [{
|
|
79
78
|
translateY: currentTranslate
|
|
80
79
|
}]
|
|
81
80
|
};
|
|
82
81
|
case "top-right-to-bottom-left":
|
|
83
82
|
return {
|
|
83
|
+
width: shimmerWidth,
|
|
84
84
|
transform: [{
|
|
85
85
|
translateX: currentTranslate
|
|
86
86
|
}, {
|
|
@@ -89,6 +89,7 @@ export function Skeleton({
|
|
|
89
89
|
};
|
|
90
90
|
case "left-to-right":
|
|
91
91
|
return {
|
|
92
|
+
width: shimmerWidth,
|
|
92
93
|
transform: [{
|
|
93
94
|
translateX: currentTranslate
|
|
94
95
|
}]
|
|
@@ -96,6 +97,7 @@ export function Skeleton({
|
|
|
96
97
|
case "top-left-to-bottom-right":
|
|
97
98
|
default:
|
|
98
99
|
return {
|
|
100
|
+
width: shimmerWidth,
|
|
99
101
|
transform: [{
|
|
100
102
|
translateX: currentTranslate
|
|
101
103
|
}, {
|
|
@@ -104,7 +106,6 @@ export function Skeleton({
|
|
|
104
106
|
};
|
|
105
107
|
}
|
|
106
108
|
});
|
|
107
|
-
const shimmerWidth = Math.max(40, Math.min((layout.width || 200) * 0.3, 100));
|
|
108
109
|
return /*#__PURE__*/_jsx(Animated.View, {
|
|
109
110
|
style: [{
|
|
110
111
|
backgroundColor: colors.backgroundSubtle,
|
|
@@ -118,11 +119,11 @@ export function Skeleton({
|
|
|
118
119
|
style: [StyleSheet.absoluteFill, {
|
|
119
120
|
top: -60,
|
|
120
121
|
bottom: -60,
|
|
121
|
-
width: shimmerWidth,
|
|
122
122
|
backgroundColor: colors.surface,
|
|
123
123
|
opacity: 0.25
|
|
124
124
|
}, shimmerAnimatedStyle]
|
|
125
125
|
})
|
|
126
126
|
});
|
|
127
127
|
}
|
|
128
|
+
export const Skeleton = /*#__PURE__*/React.memo(SkeletonComponent);
|
|
128
129
|
//# sourceMappingURL=Skeleton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","StyleSheet","Animated","cancelAnimation","Easing","useAnimatedStyle","useSharedValue","withRepeat","withTiming","useTheme","jsx","_jsx","
|
|
1
|
+
{"version":3,"names":["React","Dimensions","StyleSheet","Animated","cancelAnimation","Easing","useAnimatedStyle","useSharedValue","withRepeat","withTiming","useTheme","jsx","_jsx","INITIAL_WIDTH","get","width","SkeletonComponent","animated","radius","direction","style","onLayout","props","colors","radii","widthSV","heightSV","opacity","translateProgress","useEffect","value","duration","easing","inOut","ease","startProgress","endProgress","linear","handleLayout","e","height","nativeEvent","layout","containerAnimatedStyle","shimmerAnimatedStyle","w","h","sweepDistance","currentTranslate","shimmerWidth","Math","max","min","transform","translateY","translateX","rotate","View","backgroundColor","backgroundSubtle","borderRadius","overflow","position","children","absoluteFill","top","bottom","surface","Skeleton","memo"],"sourceRoot":"../../../src","sources":["components/Skeleton.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SACEC,UAAU,EACVC,UAAU,QAKL,cAAc;AACrB,OAAOC,QAAQ,IACbC,eAAe,EACfC,MAAM,EACNC,gBAAgB,EAChBC,cAAc,EACdC,UAAU,EACVC,UAAU,QACL,yBAAyB;AAEhC,SAASC,QAAQ,QAAQ,mBAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAepC,MAAMC,aAAa,GAAGZ,UAAU,CAACa,GAAG,CAAC,QAAQ,CAAC,CAACC,KAAK,IAAI,GAAG;AAE3D,SAASC,iBAAiBA,CAAC;EACzBC,QAAQ,GAAG,IAAI;EACfC,MAAM,GAAG,IAAI;EACbC,SAAS,GAAG,0BAA0B;EACtCC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACU,CAAC,EAAE;EAChB,MAAM;IAAEC,MAAM;IAAEC;EAAM,CAAC,GAAGd,QAAQ,CAAC,CAAC;EAEpC,MAAMe,OAAO,GAAGlB,cAAc,CAACM,aAAa,CAAC;EAC7C,MAAMa,QAAQ,GAAGnB,cAAc,CAAC,GAAG,CAAC;EACpC,MAAMoB,OAAO,GAAGpB,cAAc,CAAC,IAAI,CAAC;EACpC,MAAMqB,iBAAiB,GAAGrB,cAAc,CAAC,CAAC,CAAC,CAAC;EAE5CP,KAAK,CAAC6B,SAAS,CAAC,MAAM;IACpB,IAAI,CAACZ,QAAQ,EAAE;MACbb,eAAe,CAACuB,OAAO,CAAC;MACxBvB,eAAe,CAACwB,iBAAiB,CAAC;MAClCD,OAAO,CAACG,KAAK,GAAG,CAAC;MACjB;IACF;;IAEA;IACAH,OAAO,CAACG,KAAK,GAAG,IAAI;IACpBH,OAAO,CAACG,KAAK,GAAGtB,UAAU,CACxBC,UAAU,CAAC,CAAC,EAAE;MAAEsB,QAAQ,EAAE,IAAI;MAAEC,MAAM,EAAE3B,MAAM,CAAC4B,KAAK,CAAC5B,MAAM,CAAC6B,IAAI;IAAE,CAAC,CAAC,EACpE,CAAC,CAAC,EACF,IACF,CAAC;;IAED;IACA,MAAMC,aAAa,GAAGhB,SAAS,KAAK,0BAA0B,GAAG,CAAC,GAAG,CAAC,CAAC;IACvE,MAAMiB,WAAW,GAAGjB,SAAS,KAAK,0BAA0B,GAAG,CAAC,CAAC,GAAG,CAAC;IAErES,iBAAiB,CAACE,KAAK,GAAGK,aAAa;IACvCP,iBAAiB,CAACE,KAAK,GAAGtB,UAAU,CAClCC,UAAU,CAAC2B,WAAW,EAAE;MACtBL,QAAQ,EAAE,IAAI;MACdC,MAAM,EAAE3B,MAAM,CAACgC;IACjB,CAAC,CAAC,EACF,CAAC,CAAC,EACF,KACF,CAAC;IAED,OAAO,MAAM;MACXjC,eAAe,CAACuB,OAAO,CAAC;MACxBvB,eAAe,CAACwB,iBAAiB,CAAC;IACpC,CAAC;EACH,CAAC,EAAE,CAACX,QAAQ,EAAEE,SAAS,CAAC,CAAC;EAEzB,MAAMmB,YAAY,GAAIC,CAAoB,IAAK;IAC7C,MAAM;MAAExB,KAAK;MAAEyB;IAAO,CAAC,GAAGD,CAAC,CAACE,WAAW,CAACC,MAAM;IAC9C,IAAI3B,KAAK,GAAG,CAAC,EAAE;MACbU,OAAO,CAACK,KAAK,GAAGf,KAAK;MACrBW,QAAQ,CAACI,KAAK,GAAGU,MAAM;IACzB;IACAnB,QAAQ,GAAGkB,CAAC,CAAC;EACf,CAAC;EAED,MAAMI,sBAAsB,GAAGrC,gBAAgB,CAAC,OAAO;IACrDqB,OAAO,EAAEA,OAAO,CAACG;EACnB,CAAC,CAAC,CAAC;EAEH,MAAMc,oBAAoB,GAAGtC,gBAAgB,CAAC,MAAM;IAClD,MAAMuC,CAAC,GAAGpB,OAAO,CAACK,KAAK,IAAIjB,aAAa;IACxC,MAAMiC,CAAC,GAAGpB,QAAQ,CAACI,KAAK,IAAI,GAAG;IAC/B,MAAMiB,aAAa,GAAG,CAACF,CAAC,GAAGC,CAAC,IAAI,GAAG;IACnC,MAAME,gBAAgB,GAAGpB,iBAAiB,CAACE,KAAK,GAAGiB,aAAa;IAChE,MAAME,YAAY,GAAGC,IAAI,CAACC,GAAG,CAAC,EAAE,EAAED,IAAI,CAACE,GAAG,CAACP,CAAC,GAAG,GAAG,EAAE,GAAG,CAAC,CAAC;IAEzD,QAAQ1B,SAAS;MACf,KAAK,eAAe;QAClB,OAAO;UACLJ,KAAK,EAAEkC,YAAY;UACnBI,SAAS,EAAE,CAAC;YAAEC,UAAU,EAAEN;UAAiB,CAAC;QAC9C,CAAC;MACH,KAAK,0BAA0B;QAC7B,OAAO;UACLjC,KAAK,EAAEkC,YAAY;UACnBI,SAAS,EAAE,CAAC;YAAEE,UAAU,EAAEP;UAAiB,CAAC,EAAE;YAAEQ,MAAM,EAAE;UAAS,CAAC;QACpE,CAAC;MACH,KAAK,eAAe;QAClB,OAAO;UACLzC,KAAK,EAAEkC,YAAY;UACnBI,SAAS,EAAE,CAAC;YAAEE,UAAU,EAAEP;UAAiB,CAAC;QAC9C,CAAC;MACH,KAAK,0BAA0B;MAC/B;QACE,OAAO;UACLjC,KAAK,EAAEkC,YAAY;UACnBI,SAAS,EAAE,CAAC;YAAEE,UAAU,EAAEP;UAAiB,CAAC,EAAE;YAAEQ,MAAM,EAAE;UAAQ,CAAC;QACnE,CAAC;IACL;EACF,CAAC,CAAC;EAEF,oBACE5C,IAAA,CAACT,QAAQ,CAACsD,IAAI;IACZrC,KAAK,EAAE,CACL;MACEsC,eAAe,EAAEnC,MAAM,CAACoC,gBAAgB;MACxCC,YAAY,EAAEpC,KAAK,CAACN,MAAM,CAAC;MAC3B2C,QAAQ,EAAE,QAAQ;MAClBC,QAAQ,EAAE;IACZ,CAAC,EACD1C,KAAK,EACLuB,sBAAsB,CACtB;IACFtB,QAAQ,EAAEiB,YAAa;IAAA,GACnBhB,KAAK;IAAAyC,QAAA,EAER9C,QAAQ,iBACPL,IAAA,CAACT,QAAQ,CAACsD,IAAI;MACZrC,KAAK,EAAE,CACLlB,UAAU,CAAC8D,YAAY,EACvB;QACEC,GAAG,EAAE,CAAC,EAAE;QACRC,MAAM,EAAE,CAAC,EAAE;QACXR,eAAe,EAAEnC,MAAM,CAAC4C,OAAO;QAC/BxC,OAAO,EAAE;MACX,CAAC,EACDiB,oBAAoB;IACpB,CACH;EACF,CACY,CAAC;AAEpB;AAEA,OAAO,MAAMwB,QAAQ,gBAAGpE,KAAK,CAACqE,IAAI,CAACrD,iBAAiB,CAAC","ignoreList":[]}
|
|
@@ -8,5 +8,7 @@ export interface SkeletonProps extends ViewProps {
|
|
|
8
8
|
direction?: SkeletonShimmerDirection;
|
|
9
9
|
style?: StyleProp<ViewStyle>;
|
|
10
10
|
}
|
|
11
|
-
|
|
11
|
+
declare function SkeletonComponent({ animated, radius, direction, style, onLayout, ...props }: SkeletonProps): React.JSX.Element;
|
|
12
|
+
export declare const Skeleton: React.MemoExoticComponent<typeof SkeletonComponent>;
|
|
13
|
+
export {};
|
|
12
14
|
//# sourceMappingURL=Skeleton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,
|
|
1
|
+
{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAUtB,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,MAAM,MAAM,wBAAwB,GAChC,0BAA0B,GAC1B,eAAe,GACf,eAAe,GACf,0BAA0B,CAAC;AAE/B,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;IACpD,SAAS,CAAC,EAAE,wBAAwB,CAAC;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAID,iBAAS,iBAAiB,CAAC,EACzB,QAAe,EACf,MAAa,EACb,SAAsC,EACtC,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,aAAa,qBAwHf;AAED,eAAO,MAAM,QAAQ,qDAAgC,CAAC"}
|
|
@@ -8,5 +8,7 @@ export interface SkeletonProps extends ViewProps {
|
|
|
8
8
|
direction?: SkeletonShimmerDirection;
|
|
9
9
|
style?: StyleProp<ViewStyle>;
|
|
10
10
|
}
|
|
11
|
-
|
|
11
|
+
declare function SkeletonComponent({ animated, radius, direction, style, onLayout, ...props }: SkeletonProps): React.JSX.Element;
|
|
12
|
+
export declare const Skeleton: React.MemoExoticComponent<typeof SkeletonComponent>;
|
|
13
|
+
export {};
|
|
12
14
|
//# sourceMappingURL=Skeleton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,
|
|
1
|
+
{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAUtB,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAU,CAAC;AAEpC,MAAM,MAAM,wBAAwB,GAChC,0BAA0B,GAC1B,eAAe,GACf,eAAe,GACf,0BAA0B,CAAC;AAE/B,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;IACpD,SAAS,CAAC,EAAE,wBAAwB,CAAC;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAID,iBAAS,iBAAiB,CAAC,EACzB,QAAe,EACf,MAAa,EACb,SAAsC,EACtC,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,aAAa,qBAwHf;AAED,eAAO,MAAM,QAAQ,qDAAgC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@masumdev/rn-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"description": "A reusable React Native UI kit with typed theme tokens, light/dark mode, and composable core components.",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|