react-native-skelo 0.1.0-alpha.0 → 0.1.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 +147 -75
- package/lib/commonjs/animations/PulseAnimation.js +17 -42
- package/lib/commonjs/animations/PulseAnimation.js.map +1 -1
- package/lib/commonjs/animations/ShimmerAnimation.js +54 -65
- package/lib/commonjs/animations/ShimmerAnimation.js.map +1 -1
- package/lib/commonjs/components/Skeleton.js +37 -23
- package/lib/commonjs/components/Skeleton.js.map +1 -1
- package/lib/commonjs/components/SkeletonProvider.js +38 -0
- package/lib/commonjs/components/SkeletonProvider.js.map +1 -0
- package/lib/commonjs/components/withSkeleton.js +1 -0
- package/lib/commonjs/components/withSkeleton.js.map +1 -1
- package/lib/commonjs/core/deepRegistry.js +18 -0
- package/lib/commonjs/core/deepRegistry.js.map +1 -0
- package/lib/commonjs/core/parser/expandLists.js +67 -0
- package/lib/commonjs/core/parser/expandLists.js.map +1 -0
- package/lib/commonjs/deep.js +18 -0
- package/lib/commonjs/deep.js.map +1 -0
- package/lib/commonjs/index.js +8 -0
- package/lib/commonjs/index.js.map +1 -1
- package/lib/module/animations/PulseAnimation.js +18 -43
- package/lib/module/animations/PulseAnimation.js.map +1 -1
- package/lib/module/animations/ShimmerAnimation.js +55 -66
- package/lib/module/animations/ShimmerAnimation.js.map +1 -1
- package/lib/module/components/Skeleton.js +37 -23
- package/lib/module/components/Skeleton.js.map +1 -1
- package/lib/module/components/SkeletonProvider.js +30 -0
- package/lib/module/components/SkeletonProvider.js.map +1 -0
- package/lib/module/components/withSkeleton.js +1 -0
- package/lib/module/components/withSkeleton.js.map +1 -1
- package/lib/module/core/deepRegistry.js +11 -0
- package/lib/module/core/deepRegistry.js.map +1 -0
- package/lib/module/core/parser/expandLists.js +61 -0
- package/lib/module/core/parser/expandLists.js.map +1 -0
- package/lib/module/deep.js +11 -0
- package/lib/module/deep.js.map +1 -0
- package/lib/module/index.js +5 -0
- package/lib/module/index.js.map +1 -1
- package/lib/typescript/animations/PulseAnimation.d.ts +0 -44
- package/lib/typescript/animations/PulseAnimation.d.ts.map +1 -1
- package/lib/typescript/animations/ShimmerAnimation.d.ts +0 -44
- 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/components/SkeletonProvider.d.ts +10 -0
- package/lib/typescript/components/SkeletonProvider.d.ts.map +1 -0
- package/lib/typescript/components/withSkeleton.d.ts.map +1 -1
- package/lib/typescript/core/deepRegistry.d.ts +7 -0
- package/lib/typescript/core/deepRegistry.d.ts.map +1 -0
- package/lib/typescript/core/parser/expandLists.d.ts +3 -0
- package/lib/typescript/core/parser/expandLists.d.ts.map +1 -0
- package/lib/typescript/deep.d.ts +2 -0
- package/lib/typescript/deep.d.ts.map +1 -0
- package/lib/typescript/index.d.ts +3 -0
- package/lib/typescript/index.d.ts.map +1 -1
- package/lib/typescript/types/skeleton.d.ts +8 -0
- package/lib/typescript/types/skeleton.d.ts.map +1 -1
- package/package.json +23 -12
- package/src/animations/PulseAnimation.tsx +17 -89
- package/src/animations/ShimmerAnimation.tsx +39 -118
- package/src/components/Skeleton.tsx +39 -23
- package/src/components/SkeletonProvider.tsx +40 -0
- package/src/components/withSkeleton.tsx +1 -0
- package/src/core/deepRegistry.ts +16 -0
- package/src/core/parser/expandLists.tsx +77 -0
- package/src/deep.ts +12 -0
- package/src/index.ts +6 -0
- package/src/types/skeleton.ts +9 -0
|
@@ -9,8 +9,9 @@ var _parser = require("../core/parser");
|
|
|
9
9
|
var _SkeletonRenderer = require("./SkeletonRenderer");
|
|
10
10
|
var _SkeletonIgnore = require("./SkeletonIgnore");
|
|
11
11
|
var _StyleSkeleton = require("../core/generator/StyleSkeleton");
|
|
12
|
-
var
|
|
13
|
-
var
|
|
12
|
+
var _deepRegistry = require("../core/deepRegistry");
|
|
13
|
+
var _expandLists = require("../core/parser/expandLists");
|
|
14
|
+
var _SkeletonProvider = require("./SkeletonProvider");
|
|
14
15
|
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); }
|
|
15
16
|
/**
|
|
16
17
|
* Main Skeleton component
|
|
@@ -40,21 +41,24 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
40
41
|
* </Skeleton>
|
|
41
42
|
* ```
|
|
42
43
|
*/
|
|
43
|
-
function Skeleton({
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
44
|
+
function Skeleton(props) {
|
|
45
|
+
const theme = (0, _SkeletonProvider.useSkeletonTheme)();
|
|
46
|
+
const {
|
|
47
|
+
loading,
|
|
48
|
+
children,
|
|
49
|
+
styles,
|
|
50
|
+
excludeStyles,
|
|
51
|
+
deep,
|
|
52
|
+
count = 6,
|
|
53
|
+
animation = theme.animation,
|
|
54
|
+
duration = theme.duration,
|
|
55
|
+
baseColor = theme.baseColor,
|
|
56
|
+
highlightColor = theme.highlightColor,
|
|
57
|
+
borderRadius = theme.borderRadius,
|
|
58
|
+
accessible = true,
|
|
59
|
+
accessibilityLabel = 'Loading content',
|
|
60
|
+
debug = theme.debug
|
|
61
|
+
} = props;
|
|
58
62
|
// Parse component tree and generate skeleton.
|
|
59
63
|
// Hooks must run unconditionally (rules of hooks), but parsing stays lazy:
|
|
60
64
|
// we skip the work entirely when not loading or in styles-driven mode.
|
|
@@ -66,18 +70,28 @@ function Skeleton({
|
|
|
66
70
|
console.log('[Skelo] Parsing component tree...');
|
|
67
71
|
}
|
|
68
72
|
try {
|
|
69
|
-
//
|
|
70
|
-
//
|
|
71
|
-
|
|
72
|
-
|
|
73
|
+
// Turn FlatList/SectionList into placeholder rows so lists show a
|
|
74
|
+
// skeleton even though their data (and rows) don't exist yet.
|
|
75
|
+
const prepared = (0, _expandLists.expandListPlaceholders)(children, count);
|
|
76
|
+
|
|
77
|
+
// Deep mode: expand opaque components into their real host tree via the
|
|
78
|
+
// opt-in expander (registered by importing 'react-native-skelo/deep').
|
|
79
|
+
// When `deep` is not set explicitly, it's used automatically whenever the
|
|
80
|
+
// expander is available. Falls back to static parsing otherwise.
|
|
81
|
+
const expand = (0, _deepRegistry.getDeepExpander)();
|
|
82
|
+
const wantDeep = deep === undefined ? expand !== null : deep;
|
|
83
|
+
if (wantDeep && expand) {
|
|
84
|
+
const expanded = expand(/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, prepared));
|
|
73
85
|
if (expanded && expanded.length > 0) {
|
|
74
86
|
return expanded;
|
|
75
87
|
}
|
|
76
88
|
if (__DEV__) {
|
|
77
89
|
console.warn('[Skelo] deep expansion returned nothing; falling back to static parsing.');
|
|
78
90
|
}
|
|
91
|
+
} else if (deep === true && !expand && __DEV__) {
|
|
92
|
+
console.warn("[Skelo] `deep` requires react-reconciler. Install it and add `import 'react-native-skelo/deep';` in your app entry.");
|
|
79
93
|
}
|
|
80
|
-
const parsed = _parser.Parser.parse(
|
|
94
|
+
const parsed = _parser.Parser.parse(prepared);
|
|
81
95
|
if (__DEV__ && debug) {
|
|
82
96
|
// Log a lightweight summary: the raw nodes hold React elements
|
|
83
97
|
// (`element`) and arbitrary props that aren't safely serializable.
|
|
@@ -95,7 +109,7 @@ function Skeleton({
|
|
|
95
109
|
}
|
|
96
110
|
return [];
|
|
97
111
|
}
|
|
98
|
-
}, [loading, styles, deep, children, debug]);
|
|
112
|
+
}, [loading, styles, deep, count, children, debug]);
|
|
99
113
|
|
|
100
114
|
// Create skeleton config
|
|
101
115
|
const config = (0, _react.useMemo)(() => ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_parser","_SkeletonRenderer","_SkeletonIgnore","_StyleSkeleton","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_parser","_SkeletonRenderer","_SkeletonIgnore","_StyleSkeleton","_deepRegistry","_expandLists","_SkeletonProvider","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Skeleton","props","theme","useSkeletonTheme","loading","children","styles","excludeStyles","deep","count","animation","duration","baseColor","highlightColor","borderRadius","accessible","accessibilityLabel","debug","skeletonTree","useMemo","__DEV__","console","log","prepared","expandListPlaceholders","expand","getDeepExpander","wantDeep","undefined","expanded","createElement","Fragment","length","warn","parsed","Parser","parse","summarize","nodes","map","node","type","style","JSON","stringify","error","config","StyleSkeleton","exclude","SkeletonRenderer","tree","displayName","Ignore","SkeletonIgnore"],"sourceRoot":"../../../src","sources":["components/Skeleton.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.SkeletonProvider = SkeletonProvider;
|
|
7
|
+
exports.useSkeletonTheme = useSkeletonTheme;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _defaults = require("../constants/defaults");
|
|
10
|
+
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); }
|
|
11
|
+
const SkeletonThemeContext = /*#__PURE__*/(0, _react.createContext)(_defaults.DEFAULT_CONFIG);
|
|
12
|
+
/** App-wide skeleton defaults. Nested providers inherit unspecified values. */
|
|
13
|
+
function SkeletonProvider({
|
|
14
|
+
children,
|
|
15
|
+
animation,
|
|
16
|
+
duration,
|
|
17
|
+
baseColor,
|
|
18
|
+
highlightColor,
|
|
19
|
+
borderRadius,
|
|
20
|
+
debug
|
|
21
|
+
}) {
|
|
22
|
+
const parent = (0, _react.useContext)(SkeletonThemeContext);
|
|
23
|
+
const value = (0, _react.useMemo)(() => ({
|
|
24
|
+
animation: animation ?? parent.animation,
|
|
25
|
+
duration: duration ?? parent.duration,
|
|
26
|
+
baseColor: baseColor ?? parent.baseColor,
|
|
27
|
+
highlightColor: highlightColor ?? parent.highlightColor,
|
|
28
|
+
borderRadius: borderRadius ?? parent.borderRadius,
|
|
29
|
+
debug: debug ?? parent.debug
|
|
30
|
+
}), [parent, animation, duration, baseColor, highlightColor, borderRadius, debug]);
|
|
31
|
+
return /*#__PURE__*/_react.default.createElement(SkeletonThemeContext.Provider, {
|
|
32
|
+
value: value
|
|
33
|
+
}, children);
|
|
34
|
+
}
|
|
35
|
+
function useSkeletonTheme() {
|
|
36
|
+
return (0, _react.useContext)(SkeletonThemeContext);
|
|
37
|
+
}
|
|
38
|
+
//# sourceMappingURL=SkeletonProvider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_defaults","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SkeletonThemeContext","createContext","DEFAULT_CONFIG","SkeletonProvider","children","animation","duration","baseColor","highlightColor","borderRadius","debug","parent","useContext","value","useMemo","createElement","Provider","useSkeletonTheme"],"sourceRoot":"../../../src","sources":["components/SkeletonProvider.tsx"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAGA,IAAAC,SAAA,GAAAD,OAAA;AAAuD,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAEvD,MAAMkB,oBAAoB,gBAAG,IAAAC,oBAAa,EAA2BC,wBAAc,CAAC;AAMpF;AACO,SAASC,gBAAgBA,CAAC;EAC/BC,QAAQ;EACRC,SAAS;EACTC,QAAQ;EACRC,SAAS;EACTC,cAAc;EACdC,YAAY;EACZC;AACqB,CAAC,EAAE;EACxB,MAAMC,MAAM,GAAG,IAAAC,iBAAU,EAACZ,oBAAoB,CAAC;EAC/C,MAAMa,KAAK,GAAG,IAAAC,cAAO,EACnB,OAAO;IACLT,SAAS,EAAEA,SAAS,IAAIM,MAAM,CAACN,SAAS;IACxCC,QAAQ,EAAEA,QAAQ,IAAIK,MAAM,CAACL,QAAQ;IACrCC,SAAS,EAAEA,SAAS,IAAII,MAAM,CAACJ,SAAS;IACxCC,cAAc,EAAEA,cAAc,IAAIG,MAAM,CAACH,cAAc;IACvDC,YAAY,EAAEA,YAAY,IAAIE,MAAM,CAACF,YAAY;IACjDC,KAAK,EAAEA,KAAK,IAAIC,MAAM,CAACD;EACzB,CAAC,CAAC,EACF,CAACC,MAAM,EAAEN,SAAS,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,cAAc,EAAEC,YAAY,EAAEC,KAAK,CAC9E,CAAC;EAED,oBAAOjC,MAAA,CAAAc,OAAA,CAAAwB,aAAA,CAACf,oBAAoB,CAACgB,QAAQ;IAACH,KAAK,EAAEA;EAAM,GAAET,QAAwC,CAAC;AAChG;AAEO,SAASa,gBAAgBA,CAAA,EAAG;EACjC,OAAO,IAAAL,iBAAU,EAACZ,oBAAoB,CAAC;AACzC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_Skeleton","e","__esModule","default","withSkeleton","Component","options","WithSkeleton","props","loading","componentProps","createElement","Skeleton","styles","excludeStyles","animation","duration","baseColor","highlightColor","borderRadius","name","displayName"],"sourceRoot":"../../../src","sources":["components/withSkeleton.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAIA,IAAAC,SAAA,GAAAD,OAAA;AAAsC,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAgBtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASG,YAAYA,CAC1BC,SAA2B,EAC3BC,OAA4B,GAAG,CAAC,CAAC,EACjC;EACA,MAAMC,YAAY,GAAIC,KAA+B,IAAK;IACxD,MAAM;MAAEC,OAAO;MAAE,GAAGC;IAAe,CAAC,GAAGF,KAAK;IAE5C,oBACEX,MAAA,CAAAM,OAAA,CAAAQ,aAAA,CAACX,SAAA,CAAAY,QAAQ;MACPH,OAAO,EAAEA,OAAQ;MACjBI,MAAM,EAAEP,OAAO,CAACO,MAAO;MACvBC,aAAa,EAAER,OAAO,CAACQ,aAAc;MACrCC,
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_Skeleton","e","__esModule","default","withSkeleton","Component","options","WithSkeleton","props","loading","componentProps","createElement","Skeleton","styles","excludeStyles","debug","animation","duration","baseColor","highlightColor","borderRadius","name","displayName"],"sourceRoot":"../../../src","sources":["components/withSkeleton.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAIA,IAAAC,SAAA,GAAAD,OAAA;AAAsC,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAgBtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASG,YAAYA,CAC1BC,SAA2B,EAC3BC,OAA4B,GAAG,CAAC,CAAC,EACjC;EACA,MAAMC,YAAY,GAAIC,KAA+B,IAAK;IACxD,MAAM;MAAEC,OAAO;MAAE,GAAGC;IAAe,CAAC,GAAGF,KAAK;IAE5C,oBACEX,MAAA,CAAAM,OAAA,CAAAQ,aAAA,CAACX,SAAA,CAAAY,QAAQ;MACPH,OAAO,EAAEA,OAAQ;MACjBI,MAAM,EAAEP,OAAO,CAACO,MAAO;MACvBC,aAAa,EAAER,OAAO,CAACQ,aAAc;MACrCC,KAAK,EAAET,OAAO,CAACS,KAAM;MACrBC,SAAS,EAAEV,OAAO,CAACU,SAAU;MAC7BC,QAAQ,EAAEX,OAAO,CAACW,QAAS;MAC3BC,SAAS,EAAEZ,OAAO,CAACY,SAAU;MAC7BC,cAAc,EAAEb,OAAO,CAACa,cAAe;MACvCC,YAAY,EAAEd,OAAO,CAACc;IAAa,gBAEnCvB,MAAA,CAAAM,OAAA,CAAAQ,aAAA,CAACN,SAAS,EAAMK,cAAkC,CAC1C,CAAC;EAEf,CAAC;EAED,MAAMW,IAAI,GAAGhB,SAAS,CAACiB,WAAW,IAAIjB,SAAS,CAACgB,IAAI,IAAI,WAAW;EACnEd,YAAY,CAACe,WAAW,GAAG,gBAAgBD,IAAI,GAAG;EAElD,OAAOd,YAAY;AACrB","ignoreList":[]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getDeepExpander = getDeepExpander;
|
|
7
|
+
exports.setDeepExpander = setDeepExpander;
|
|
8
|
+
// Deep expansion is opt-in so the core bundle never depends on react-reconciler.
|
|
9
|
+
// `react-native-skelo/deep` registers the expander; Skeleton reads it here.
|
|
10
|
+
|
|
11
|
+
let expander = null;
|
|
12
|
+
function setDeepExpander(fn) {
|
|
13
|
+
expander = fn;
|
|
14
|
+
}
|
|
15
|
+
function getDeepExpander() {
|
|
16
|
+
return expander;
|
|
17
|
+
}
|
|
18
|
+
//# sourceMappingURL=deepRegistry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["expander","setDeepExpander","fn","getDeepExpander"],"sourceRoot":"../../../src","sources":["core/deepRegistry.ts"],"mappings":";;;;;;;AAGA;AACA;;AAGA,IAAIA,QAA6B,GAAG,IAAI;AAEjC,SAASC,eAAeA,CAACC,EAAgB,EAAQ;EACtDF,QAAQ,GAAGE,EAAE;AACf;AAEO,SAASC,eAAeA,CAAA,EAAwB;EACrD,OAAOH,QAAQ;AACjB","ignoreList":[]}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.expandListPlaceholders = expandListPlaceholders;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _componentUtils = require("../../utils/componentUtils");
|
|
10
|
+
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); }
|
|
11
|
+
// List components whose rows come from `renderItem` (not JSX children).
|
|
12
|
+
const LIST_TYPES = new Set(['FlatList', 'SectionList', 'VirtualizedList', 'FlashList']);
|
|
13
|
+
const NOOP_SEPARATORS = {
|
|
14
|
+
highlight: () => {},
|
|
15
|
+
unhighlight: () => {},
|
|
16
|
+
updateProps: () => {}
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
// Renders `count` sample rows from a list's `renderItem` so there's something
|
|
20
|
+
// to skeletonize while the real data is still loading (the rows don't exist in
|
|
21
|
+
// the tree yet). Rows that throw on placeholder data are skipped.
|
|
22
|
+
function renderSampleRows(list, count) {
|
|
23
|
+
const props = list.props || {};
|
|
24
|
+
const data = Array.isArray(props.data) ? props.data : [];
|
|
25
|
+
const sample = data.length > 0 ? data[0] : {};
|
|
26
|
+
const rows = [];
|
|
27
|
+
for (let i = 0; i < count; i++) {
|
|
28
|
+
try {
|
|
29
|
+
const row = props.renderItem?.({
|
|
30
|
+
item: sample,
|
|
31
|
+
index: i,
|
|
32
|
+
section: {},
|
|
33
|
+
separators: NOOP_SEPARATORS
|
|
34
|
+
});
|
|
35
|
+
if (row) {
|
|
36
|
+
rows.push(/*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
|
|
37
|
+
key: i
|
|
38
|
+
}, row));
|
|
39
|
+
}
|
|
40
|
+
} catch {
|
|
41
|
+
// Row couldn't render with placeholder data — skip it.
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
45
|
+
style: props.contentContainerStyle
|
|
46
|
+
}, rows);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// Walks a child tree and replaces FlatList/SectionList with sample rows so a
|
|
50
|
+
// plain `<Skeleton><FlatList/></Skeleton>` produces a skeleton while loading.
|
|
51
|
+
function expandListPlaceholders(children, count) {
|
|
52
|
+
return _react.default.Children.map(children, child => {
|
|
53
|
+
if (! /*#__PURE__*/(0, _react.isValidElement)(child)) {
|
|
54
|
+
return child;
|
|
55
|
+
}
|
|
56
|
+
const name = (0, _componentUtils.getComponentName)(child);
|
|
57
|
+
const props = child.props || {};
|
|
58
|
+
if (LIST_TYPES.has(name) && typeof props.renderItem === 'function') {
|
|
59
|
+
return renderSampleRows(child, count);
|
|
60
|
+
}
|
|
61
|
+
if (props.children) {
|
|
62
|
+
return /*#__PURE__*/_react.default.cloneElement(child, undefined, expandListPlaceholders(props.children, count));
|
|
63
|
+
}
|
|
64
|
+
return child;
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
//# sourceMappingURL=expandLists.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_componentUtils","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","LIST_TYPES","Set","NOOP_SEPARATORS","highlight","unhighlight","updateProps","renderSampleRows","list","count","props","data","Array","isArray","sample","length","rows","row","renderItem","item","index","section","separators","push","createElement","Fragment","key","View","style","contentContainerStyle","expandListPlaceholders","children","React","Children","map","child","isValidElement","name","getComponentName","cloneElement","undefined"],"sourceRoot":"../../../../src","sources":["core/parser/expandLists.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,eAAA,GAAAF,OAAA;AAA8D,SAAAD,wBAAAI,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAN,uBAAA,YAAAA,CAAAI,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAE9D;AACA,MAAMkB,UAAU,GAAG,IAAIC,GAAG,CAAC,CAAC,UAAU,EAAE,aAAa,EAAE,iBAAiB,EAAE,WAAW,CAAC,CAAC;AAEvF,MAAMC,eAAe,GAAG;EACtBC,SAAS,EAAEA,CAAA,KAAM,CAAC,CAAC;EACnBC,WAAW,EAAEA,CAAA,KAAM,CAAC,CAAC;EACrBC,WAAW,EAAEA,CAAA,KAAM,CAAC;AACtB,CAAC;;AAED;AACA;AACA;AACA,SAASC,gBAAgBA,CAACC,IAAkB,EAAEC,KAAa,EAAa;EACtE,MAAMC,KAAK,GAAIF,IAAI,CAACE,KAAK,IAAI,CAAC,CAS7B;EAED,MAAMC,IAAI,GAAGC,KAAK,CAACC,OAAO,CAACH,KAAK,CAACC,IAAI,CAAC,GAAGD,KAAK,CAACC,IAAI,GAAG,EAAE;EACxD,MAAMG,MAAM,GAAGH,IAAI,CAACI,MAAM,GAAG,CAAC,GAAGJ,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;EAE7C,MAAMK,IAAiB,GAAG,EAAE;EAC5B,KAAK,IAAI3B,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGoB,KAAK,EAAEpB,CAAC,EAAE,EAAE;IAC9B,IAAI;MACF,MAAM4B,GAAG,GAAGP,KAAK,CAACQ,UAAU,GAAG;QAC7BC,IAAI,EAAEL,MAAM;QACZM,KAAK,EAAE/B,CAAC;QACRgC,OAAO,EAAE,CAAC,CAAC;QACXC,UAAU,EAAEnB;MACd,CAAC,CAAC;MACF,IAAIc,GAAG,EAAE;QACPD,IAAI,CAACO,IAAI,cAAC9C,MAAA,CAAAe,OAAA,CAAAgC,aAAA,CAAC/C,MAAA,CAAAe,OAAK,CAACiC,QAAQ;UAACC,GAAG,EAAErC;QAAE,GAAE4B,GAAoB,CAAC,CAAC;MAC3D;IACF,CAAC,CAAC,MAAM;MACN;IAAA;EAEJ;EAEA,oBAAOxC,MAAA,CAAAe,OAAA,CAAAgC,aAAA,CAAC5C,YAAA,CAAA+C,IAAI;IAACC,KAAK,EAAElB,KAAK,CAACmB;EAA+B,GAAEb,IAAW,CAAC;AACzE;;AAEA;AACA;AACO,SAASc,sBAAsBA,CAACC,QAAmB,EAAEtB,KAAa,EAAa;EACpF,OAAOuB,cAAK,CAACC,QAAQ,CAACC,GAAG,CAACH,QAAQ,EAAEI,KAAK,IAAI;IAC3C,IAAI,eAAC,IAAAC,qBAAc,EAACD,KAAK,CAAC,EAAE;MAC1B,OAAOA,KAAK;IACd;IAEA,MAAME,IAAI,GAAG,IAAAC,gCAAgB,EAACH,KAAK,CAAC;IACpC,MAAMzB,KAAK,GAAIyB,KAAK,CAACzB,KAAK,IAAI,CAAC,CAA8B;IAE7D,IACET,UAAU,CAACR,GAAG,CAAC4C,IAAI,CAAC,IACpB,OAAQ3B,KAAK,CAA8BQ,UAAU,KAAK,UAAU,EACpE;MACA,OAAOX,gBAAgB,CAAC4B,KAAK,EAAE1B,KAAK,CAAC;IACvC;IAEA,IAAIC,KAAK,CAACqB,QAAQ,EAAE;MAClB,oBAAOC,cAAK,CAACO,YAAY,CAACJ,KAAK,EAAEK,SAAS,EAAEV,sBAAsB,CAACpB,KAAK,CAACqB,QAAQ,EAAEtB,KAAK,CAAC,CAAC;IAC5F;IAEA,OAAO0B,KAAK;EACd,CAAC,CAAC;AACJ","ignoreList":[]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.deepEnabled = void 0;
|
|
7
|
+
var _deepRegistry = require("./core/deepRegistry");
|
|
8
|
+
var _expandOffline = require("./core/parser/expandOffline");
|
|
9
|
+
// Opt-in deep mode. Import once in your app entry to enable `<Skeleton deep>`:
|
|
10
|
+
//
|
|
11
|
+
// import 'react-native-skelo/deep';
|
|
12
|
+
//
|
|
13
|
+
// This is the only module that pulls in react-reconciler, so apps that don't
|
|
14
|
+
// use deep mode never bundle it. Requires `react-reconciler` to be installed.
|
|
15
|
+
|
|
16
|
+
(0, _deepRegistry.setDeepExpander)(_expandOffline.expandToComponentNodes);
|
|
17
|
+
const deepEnabled = exports.deepEnabled = true;
|
|
18
|
+
//# sourceMappingURL=deep.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_deepRegistry","require","_expandOffline","setDeepExpander","expandToComponentNodes","deepEnabled","exports"],"sourceRoot":"../../src","sources":["deep.ts"],"mappings":";;;;;;AAMA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,cAAA,GAAAD,OAAA;AAPA;AACA;AACA;AACA;AACA;AACA;;AAIA,IAAAE,6BAAe,EAACC,qCAAsB,CAAC;AAEhC,MAAMC,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,IAAI","ignoreList":[]}
|
package/lib/commonjs/index.js
CHANGED
|
@@ -33,6 +33,12 @@ Object.defineProperty(exports, "SkeletonImage", {
|
|
|
33
33
|
return _primitives.SkeletonImage;
|
|
34
34
|
}
|
|
35
35
|
});
|
|
36
|
+
Object.defineProperty(exports, "SkeletonProvider", {
|
|
37
|
+
enumerable: true,
|
|
38
|
+
get: function () {
|
|
39
|
+
return _SkeletonProvider.SkeletonProvider;
|
|
40
|
+
}
|
|
41
|
+
});
|
|
36
42
|
Object.defineProperty(exports, "SkeletonText", {
|
|
37
43
|
enumerable: true,
|
|
38
44
|
get: function () {
|
|
@@ -57,6 +63,8 @@ Object.defineProperty(exports, "withSkeleton", {
|
|
|
57
63
|
return _withSkeleton.withSkeleton;
|
|
58
64
|
}
|
|
59
65
|
});
|
|
66
|
+
require("./deep");
|
|
67
|
+
var _SkeletonProvider = require("./components/SkeletonProvider");
|
|
60
68
|
var _Skeleton = require("./components/Skeleton");
|
|
61
69
|
var _SkeletonIgnore = require("./components/SkeletonIgnore");
|
|
62
70
|
var _withSkeleton = require("./components/withSkeleton");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["require","_SkeletonProvider","_Skeleton","_SkeletonIgnore","_withSkeleton","_StyleSkeleton","_Skelo","_primitives"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUAA,OAAA;AAGA,IAAAC,iBAAA,GAAAD,OAAA;AAEA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AAEA,IAAAK,cAAA,GAAAL,OAAA;AAIA,IAAAM,MAAA,GAAAN,OAAA;AAYA,IAAAO,WAAA,GAAAP,OAAA","ignoreList":[]}
|
|
@@ -1,23 +1,6 @@
|
|
|
1
|
-
import React, { useEffect } from 'react';
|
|
2
|
-
import { StyleSheet } from 'react-native';
|
|
3
|
-
|
|
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
|
-
*/
|
|
1
|
+
import React, { useEffect, useRef } from 'react';
|
|
2
|
+
import { Animated, Easing, StyleSheet } from 'react-native';
|
|
3
|
+
// Breathing opacity loop using React Native's built-in Animated (native driver).
|
|
21
4
|
export function PulseAnimation({
|
|
22
5
|
width,
|
|
23
6
|
height,
|
|
@@ -27,38 +10,30 @@ export function PulseAnimation({
|
|
|
27
10
|
style,
|
|
28
11
|
children
|
|
29
12
|
}) {
|
|
30
|
-
|
|
31
|
-
const opacity = useSharedValue(1);
|
|
13
|
+
const opacity = useRef(new Animated.Value(1)).current;
|
|
32
14
|
useEffect(() => {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
opacity.value = withRepeat(withSequence(withTiming(0.5, {
|
|
15
|
+
const loop = Animated.loop(Animated.sequence([Animated.timing(opacity, {
|
|
16
|
+
toValue: 0.5,
|
|
36
17
|
duration: duration / 2,
|
|
37
|
-
easing: Easing.inOut(Easing.ease)
|
|
38
|
-
|
|
18
|
+
easing: Easing.inOut(Easing.ease),
|
|
19
|
+
useNativeDriver: true
|
|
20
|
+
}), Animated.timing(opacity, {
|
|
21
|
+
toValue: 1,
|
|
39
22
|
duration: duration / 2,
|
|
40
|
-
easing: Easing.inOut(Easing.ease)
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
);
|
|
23
|
+
easing: Easing.inOut(Easing.ease),
|
|
24
|
+
useNativeDriver: true
|
|
25
|
+
})]));
|
|
26
|
+
loop.start();
|
|
27
|
+
return () => loop.stop();
|
|
45
28
|
}, [duration, opacity]);
|
|
46
|
-
|
|
47
|
-
// Animated style for pulse effect
|
|
48
|
-
const animatedStyle = useAnimatedStyle(() => {
|
|
49
|
-
'worklet';
|
|
50
|
-
|
|
51
|
-
return {
|
|
52
|
-
opacity: opacity.value
|
|
53
|
-
};
|
|
54
|
-
}, []);
|
|
55
29
|
return /*#__PURE__*/React.createElement(Animated.View, {
|
|
56
30
|
style: [styles.container, {
|
|
57
31
|
width,
|
|
58
32
|
height,
|
|
59
33
|
borderRadius,
|
|
60
|
-
backgroundColor: baseColor
|
|
61
|
-
|
|
34
|
+
backgroundColor: baseColor,
|
|
35
|
+
opacity
|
|
36
|
+
}, style]
|
|
62
37
|
}, children);
|
|
63
38
|
}
|
|
64
39
|
const styles = StyleSheet.create({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","
|
|
1
|
+
{"version":3,"names":["React","useEffect","useRef","Animated","Easing","StyleSheet","PulseAnimation","width","height","baseColor","duration","borderRadius","style","children","opacity","Value","current","loop","sequence","timing","toValue","easing","inOut","ease","useNativeDriver","start","stop","createElement","View","styles","container","backgroundColor","create","overflow"],"sourceRoot":"../../../src","sources":["animations/PulseAnimation.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEhD,SAASC,QAAQ,EAAEC,MAAM,EAAEC,UAAU,QAAQ,cAAc;AAa3D;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,MAAMC,OAAO,GAAGZ,MAAM,CAAC,IAAIC,QAAQ,CAACY,KAAK,CAAC,CAAC,CAAC,CAAC,CAACC,OAAO;EAErDf,SAAS,CAAC,MAAM;IACd,MAAMgB,IAAI,GAAGd,QAAQ,CAACc,IAAI,CACxBd,QAAQ,CAACe,QAAQ,CAAC,CAChBf,QAAQ,CAACgB,MAAM,CAACL,OAAO,EAAE;MACvBM,OAAO,EAAE,GAAG;MACZV,QAAQ,EAAEA,QAAQ,GAAG,CAAC;MACtBW,MAAM,EAAEjB,MAAM,CAACkB,KAAK,CAAClB,MAAM,CAACmB,IAAI,CAAC;MACjCC,eAAe,EAAE;IACnB,CAAC,CAAC,EACFrB,QAAQ,CAACgB,MAAM,CAACL,OAAO,EAAE;MACvBM,OAAO,EAAE,CAAC;MACVV,QAAQ,EAAEA,QAAQ,GAAG,CAAC;MACtBW,MAAM,EAAEjB,MAAM,CAACkB,KAAK,CAAClB,MAAM,CAACmB,IAAI,CAAC;MACjCC,eAAe,EAAE;IACnB,CAAC,CAAC,CACH,CACH,CAAC;IACDP,IAAI,CAACQ,KAAK,CAAC,CAAC;IACZ,OAAO,MAAMR,IAAI,CAACS,IAAI,CAAC,CAAC;EAC1B,CAAC,EAAE,CAAChB,QAAQ,EAAEI,OAAO,CAAC,CAAC;EAEvB,oBACEd,KAAA,CAAA2B,aAAA,CAACxB,QAAQ,CAACyB,IAAI;IACZhB,KAAK,EAAE,CACLiB,MAAM,CAACC,SAAS,EAChB;MAAEvB,KAAK;MAAEC,MAAM;MAAEG,YAAY;MAAEoB,eAAe,EAAEtB,SAAS;MAAEK;IAAQ,CAAC,EACpEF,KAAK;EACL,GAEDC,QACY,CAAC;AAEpB;AAEA,MAAMgB,MAAM,GAAGxB,UAAU,CAAC2B,MAAM,CAAC;EAC/BF,SAAS,EAAE;IACTG,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC","ignoreList":[]}
|
|
@@ -1,24 +1,8 @@
|
|
|
1
|
-
import React, { useEffect } from 'react';
|
|
2
|
-
import { StyleSheet, View } from 'react-native';
|
|
3
|
-
|
|
4
|
-
|
|
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
|
-
*/
|
|
1
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
2
|
+
import { Animated, Easing, StyleSheet, View } from 'react-native';
|
|
3
|
+
// Zero-dependency shimmer: a highlight band (dim/bright/dim segments to fake a
|
|
4
|
+
// soft gradient) sweeps across the base, driven by React Native's built-in
|
|
5
|
+
// Animated native driver. Plain Views only — guaranteed to render and animate.
|
|
22
6
|
export function ShimmerAnimation({
|
|
23
7
|
width,
|
|
24
8
|
height,
|
|
@@ -29,33 +13,30 @@ export function ShimmerAnimation({
|
|
|
29
13
|
style,
|
|
30
14
|
children
|
|
31
15
|
}) {
|
|
32
|
-
|
|
33
|
-
const
|
|
16
|
+
const progress = useRef(new Animated.Value(0)).current;
|
|
17
|
+
const [measuredWidth, setMeasuredWidth] = useState(0);
|
|
34
18
|
useEffect(() => {
|
|
35
|
-
|
|
36
|
-
|
|
19
|
+
const loop = Animated.loop(Animated.timing(progress, {
|
|
20
|
+
toValue: 1,
|
|
37
21
|
duration,
|
|
38
|
-
easing: Easing.linear
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
);
|
|
22
|
+
easing: Easing.linear,
|
|
23
|
+
useNativeDriver: true
|
|
24
|
+
}));
|
|
25
|
+
loop.start();
|
|
26
|
+
return () => loop.stop();
|
|
43
27
|
}, [duration, progress]);
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
translateX: translateX * (typeof width === 'number' ? width : 200)
|
|
55
|
-
}]
|
|
56
|
-
};
|
|
57
|
-
}, [width]);
|
|
28
|
+
const onLayout = event => {
|
|
29
|
+
const w = event.nativeEvent.layout.width;
|
|
30
|
+
setMeasuredWidth(prev => prev === w ? prev : w);
|
|
31
|
+
};
|
|
32
|
+
const containerWidth = typeof width === 'number' ? width : measuredWidth || 200;
|
|
33
|
+
const bandWidth = Math.max(containerWidth * 0.6, 80);
|
|
34
|
+
const translateX = progress.interpolate({
|
|
35
|
+
inputRange: [0, 1],
|
|
36
|
+
outputRange: [-bandWidth, containerWidth]
|
|
37
|
+
});
|
|
58
38
|
return /*#__PURE__*/React.createElement(View, {
|
|
39
|
+
onLayout: onLayout,
|
|
59
40
|
style: [styles.container, {
|
|
60
41
|
width,
|
|
61
42
|
height,
|
|
@@ -63,34 +44,42 @@ export function ShimmerAnimation({
|
|
|
63
44
|
backgroundColor: baseColor
|
|
64
45
|
}, style]
|
|
65
46
|
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
47
|
+
pointerEvents: "none",
|
|
48
|
+
style: [styles.band, {
|
|
49
|
+
width: bandWidth,
|
|
50
|
+
transform: [{
|
|
51
|
+
translateX
|
|
52
|
+
}]
|
|
69
53
|
}]
|
|
70
|
-
}, /*#__PURE__*/React.createElement(
|
|
71
|
-
style: [styles.
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
}
|
|
75
|
-
}, /*#__PURE__*/React.createElement(
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
}))), children);
|
|
54
|
+
}, /*#__PURE__*/React.createElement(View, {
|
|
55
|
+
style: [styles.segment, {
|
|
56
|
+
backgroundColor: highlightColor,
|
|
57
|
+
opacity: 0.25
|
|
58
|
+
}]
|
|
59
|
+
}), /*#__PURE__*/React.createElement(View, {
|
|
60
|
+
style: [styles.segment, {
|
|
61
|
+
backgroundColor: highlightColor,
|
|
62
|
+
opacity: 0.9
|
|
63
|
+
}]
|
|
64
|
+
}), /*#__PURE__*/React.createElement(View, {
|
|
65
|
+
style: [styles.segment, {
|
|
66
|
+
backgroundColor: highlightColor,
|
|
67
|
+
opacity: 0.25
|
|
68
|
+
}]
|
|
69
|
+
})), children);
|
|
87
70
|
}
|
|
88
71
|
const styles = StyleSheet.create({
|
|
89
72
|
container: {
|
|
90
73
|
overflow: 'hidden'
|
|
91
74
|
},
|
|
92
|
-
|
|
93
|
-
position: 'absolute'
|
|
75
|
+
band: {
|
|
76
|
+
position: 'absolute',
|
|
77
|
+
top: 0,
|
|
78
|
+
bottom: 0,
|
|
79
|
+
flexDirection: 'row'
|
|
80
|
+
},
|
|
81
|
+
segment: {
|
|
82
|
+
flex: 1
|
|
94
83
|
}
|
|
95
84
|
});
|
|
96
85
|
//# sourceMappingURL=ShimmerAnimation.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","
|
|
1
|
+
{"version":3,"names":["React","useEffect","useRef","useState","Animated","Easing","StyleSheet","View","ShimmerAnimation","width","height","baseColor","highlightColor","duration","borderRadius","style","children","progress","Value","current","measuredWidth","setMeasuredWidth","loop","timing","toValue","easing","linear","useNativeDriver","start","stop","onLayout","event","w","nativeEvent","layout","prev","containerWidth","bandWidth","Math","max","translateX","interpolate","inputRange","outputRange","createElement","styles","container","backgroundColor","pointerEvents","band","transform","segment","opacity","create","overflow","position","top","bottom","flexDirection","flex"],"sourceRoot":"../../../src","sources":["animations/ShimmerAnimation.tsx"],"mappings":"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","ignoreList":[]}
|