react-native-skelo 0.0.5 โ 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/README.md +76 -15
- package/lib/commonjs/components/Skeleton.js +19 -17
- 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/index.js +7 -0
- package/lib/commonjs/index.js.map +1 -1
- package/lib/module/components/Skeleton.js +19 -17
- 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/index.js +1 -0
- package/lib/module/index.js.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/index.d.ts +2 -0
- package/lib/typescript/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/Skeleton.tsx +19 -17
- package/src/components/SkeletonProvider.tsx +40 -0
- package/src/components/withSkeleton.tsx +1 -0
- package/src/index.ts +2 -0
package/README.md
CHANGED
|
@@ -1,24 +1,15 @@
|
|
|
1
|
-
|
|
1
|
+
# React Native Skelo
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/react-native-skelo)
|
|
4
|
+
[](https://www.npmjs.com/package/react-native-skelo)
|
|
5
|
+
[](./LICENSE)
|
|
4
6
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
[](https://www.npmjs.com/package/react-native-skelo)
|
|
8
|
-
[](https://www.npmjs.com/package/react-native-skelo)
|
|
9
|
-
[](./LICENSE)
|
|
10
|
-
[](https://github.com/shubhanshubb/react-native-skelo)
|
|
11
|
-
|
|
12
|
-
<br />
|
|
7
|
+
Automatic skeleton loading for React Native, built from the UI you already have. Skelo turns your components and lists into matching loading placeholders, with built-in shimmer and pulse animations. Theme support lets you share colors and animation settings across your app, with nested themes and per-view overrides through `SkeletonProvider`.
|
|
13
8
|
|
|
14
9
|
<img src="./assets/demo.gif" alt="Skelo skeleton demo" width="270" />
|
|
15
10
|
|
|
16
11
|
<img src="./assets/grid.gif" alt="Image-grid skeleton" width="270" />
|
|
17
12
|
|
|
18
|
-
</div>
|
|
19
|
-
|
|
20
|
-
<br />
|
|
21
|
-
|
|
22
13
|
**Stop building and maintaining a second copy of your UI just for loading states.** Wrap your components in `<Skeleton>` and Skelo generates a matching skeleton โ sized from the styles you already wrote.
|
|
23
14
|
|
|
24
15
|
```tsx
|
|
@@ -29,7 +20,7 @@
|
|
|
29
20
|
|
|
30
21
|
That's the whole API. No skeleton screens to hand-draw, no keeping two layouts in sync.
|
|
31
22
|
|
|
32
|
-
>
|
|
23
|
+
> **Stable release (`0.1.0`)** โ Skelo now follows semantic versioning for its public API.
|
|
33
24
|
|
|
34
25
|
---
|
|
35
26
|
|
|
@@ -39,6 +30,7 @@ That's the whole API. No skeleton screens to hand-draw, no keeping two layouts i
|
|
|
39
30
|
- ๐ง **Sees inside your components** โ introspects custom components automatically (no inlining).
|
|
40
31
|
- ๐ **Lists included** โ `FlatList` / `SectionList` render skeleton rows while data loads.
|
|
41
32
|
- ๐จ **Shimmer ยท Pulse ยท None** โ built-in animations on the native driver.
|
|
33
|
+
- ๐ **Theme support (new in 0.1.0)** โ use `SkeletonProvider` for shared colors and animation defaults, with nested themes and per-view overrides.
|
|
42
34
|
- ๐ชถ **No dependencies** โ no `reanimated`, no gradient library. Just `react` + `react-native`.
|
|
43
35
|
- ๐ **Style-aware** โ every skeleton is sized from your real element styles.
|
|
44
36
|
|
|
@@ -74,6 +66,75 @@ function Screen({ loading, user }) {
|
|
|
74
66
|
|
|
75
67
|
Skelo renders `ProfileCard`, reads its real `View`/`Text`/`Image` tree + styles, and draws a matching skeleton while `loading` is `true`. When it's `false`, your real UI renders.
|
|
76
68
|
|
|
69
|
+
### Theme support (new in 0.1.0)
|
|
70
|
+
|
|
71
|
+
Wrap your app or a group of views in `SkeletonProvider` to share colors and animation settings:
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
74
|
+
import { Skeleton, SkeletonProvider } from 'react-native-skelo';
|
|
75
|
+
|
|
76
|
+
<SkeletonProvider
|
|
77
|
+
baseColor="#2A3F4F"
|
|
78
|
+
highlightColor="#3A5364"
|
|
79
|
+
animation="pulse"
|
|
80
|
+
duration={1500}
|
|
81
|
+
>
|
|
82
|
+
<App />
|
|
83
|
+
</SkeletonProvider>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
Individual `Skeleton` props override the theme. Nested providers inherit settings
|
|
87
|
+
from their parent, so a section can override just its colors. Themes also apply to
|
|
88
|
+
`withSkeleton` and styles-driven skeletons. The provider accepts `animation`,
|
|
89
|
+
`duration`, `baseColor`, `highlightColor`, `borderRadius`, and `debug`; without a
|
|
90
|
+
provider, existing defaults are unchanged. Standalone primitives keep their own
|
|
91
|
+
explicit props and defaults.
|
|
92
|
+
|
|
93
|
+
#### Follow light and dark mode
|
|
94
|
+
|
|
95
|
+
Connect the provider to React Native's `useColorScheme` to update skeleton colors
|
|
96
|
+
when the system theme changes:
|
|
97
|
+
|
|
98
|
+
```tsx
|
|
99
|
+
import { useColorScheme } from 'react-native';
|
|
100
|
+
import { SkeletonProvider } from 'react-native-skelo';
|
|
101
|
+
|
|
102
|
+
function ThemedApp() {
|
|
103
|
+
const isDark = useColorScheme() === 'dark';
|
|
104
|
+
|
|
105
|
+
return (
|
|
106
|
+
<SkeletonProvider
|
|
107
|
+
baseColor={isDark ? '#2A3F4F' : '#E1E9EE'}
|
|
108
|
+
highlightColor={isDark ? '#3A5364' : '#F0F4F8'}
|
|
109
|
+
animation="shimmer"
|
|
110
|
+
>
|
|
111
|
+
<App />
|
|
112
|
+
</SkeletonProvider>
|
|
113
|
+
);
|
|
114
|
+
}
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
#### Override a view's theme
|
|
118
|
+
|
|
119
|
+
Nest a provider to customize one section, or pass props to a single skeleton:
|
|
120
|
+
|
|
121
|
+
```tsx
|
|
122
|
+
<SkeletonProvider animation="pulse" baseColor="#E1E9EE">
|
|
123
|
+
<Skeleton loading={loading}>
|
|
124
|
+
<ProfileCard user={user} />
|
|
125
|
+
</Skeleton>
|
|
126
|
+
|
|
127
|
+
<SkeletonProvider baseColor="#2A3F4F" highlightColor="#3A5364">
|
|
128
|
+
<Skeleton loading={loading} animation="none">
|
|
129
|
+
<StatsCard stats={stats} />
|
|
130
|
+
</Skeleton>
|
|
131
|
+
</SkeletonProvider>
|
|
132
|
+
</SkeletonProvider>
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
Here, the profile uses the shared pulse animation. The stats view uses the nested
|
|
136
|
+
dark colors and its own static animation.
|
|
137
|
+
|
|
77
138
|
### Lists
|
|
78
139
|
|
|
79
140
|
Wrap a `FlatList` โ Skelo fills it with skeleton rows while the data loads:
|
|
@@ -11,7 +11,7 @@ var _SkeletonIgnore = require("./SkeletonIgnore");
|
|
|
11
11
|
var _StyleSkeleton = require("../core/generator/StyleSkeleton");
|
|
12
12
|
var _deepRegistry = require("../core/deepRegistry");
|
|
13
13
|
var _expandLists = require("../core/parser/expandLists");
|
|
14
|
-
var
|
|
14
|
+
var _SkeletonProvider = require("./SkeletonProvider");
|
|
15
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); }
|
|
16
16
|
/**
|
|
17
17
|
* Main Skeleton component
|
|
@@ -41,22 +41,24 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
41
41
|
* </Skeleton>
|
|
42
42
|
* ```
|
|
43
43
|
*/
|
|
44
|
-
function Skeleton({
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
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;
|
|
60
62
|
// Parse component tree and generate skeleton.
|
|
61
63
|
// Hooks must run unconditionally (rules of hooks), but parsing stays lazy:
|
|
62
64
|
// we skip the work entirely when not loading or in styles-driven mode.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_parser","_SkeletonRenderer","_SkeletonIgnore","_StyleSkeleton","_deepRegistry","_expandLists","
|
|
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":[]}
|
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 () {
|
|
@@ -58,6 +64,7 @@ Object.defineProperty(exports, "withSkeleton", {
|
|
|
58
64
|
}
|
|
59
65
|
});
|
|
60
66
|
require("./deep");
|
|
67
|
+
var _SkeletonProvider = require("./components/SkeletonProvider");
|
|
61
68
|
var _Skeleton = require("./components/Skeleton");
|
|
62
69
|
var _SkeletonIgnore = require("./components/SkeletonIgnore");
|
|
63
70
|
var _withSkeleton = require("./components/withSkeleton");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["require","_Skeleton","_SkeletonIgnore","_withSkeleton","_StyleSkeleton","_Skelo","_primitives"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"
|
|
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":[]}
|
|
@@ -5,7 +5,7 @@ import { SkeletonIgnore } from './SkeletonIgnore';
|
|
|
5
5
|
import { StyleSkeleton } from '../core/generator/StyleSkeleton';
|
|
6
6
|
import { getDeepExpander } from '../core/deepRegistry';
|
|
7
7
|
import { expandListPlaceholders } from '../core/parser/expandLists';
|
|
8
|
-
import {
|
|
8
|
+
import { useSkeletonTheme } from './SkeletonProvider';
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
11
|
* Main Skeleton component
|
|
@@ -35,22 +35,24 @@ import { DEFAULT_CONFIG } from '../constants/defaults';
|
|
|
35
35
|
* </Skeleton>
|
|
36
36
|
* ```
|
|
37
37
|
*/
|
|
38
|
-
export function Skeleton({
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
38
|
+
export function Skeleton(props) {
|
|
39
|
+
const theme = useSkeletonTheme();
|
|
40
|
+
const {
|
|
41
|
+
loading,
|
|
42
|
+
children,
|
|
43
|
+
styles,
|
|
44
|
+
excludeStyles,
|
|
45
|
+
deep,
|
|
46
|
+
count = 6,
|
|
47
|
+
animation = theme.animation,
|
|
48
|
+
duration = theme.duration,
|
|
49
|
+
baseColor = theme.baseColor,
|
|
50
|
+
highlightColor = theme.highlightColor,
|
|
51
|
+
borderRadius = theme.borderRadius,
|
|
52
|
+
accessible = true,
|
|
53
|
+
accessibilityLabel = 'Loading content',
|
|
54
|
+
debug = theme.debug
|
|
55
|
+
} = props;
|
|
54
56
|
// Parse component tree and generate skeleton.
|
|
55
57
|
// Hooks must run unconditionally (rules of hooks), but parsing stays lazy:
|
|
56
58
|
// we skip the work entirely when not loading or in styles-driven mode.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useMemo","Parser","SkeletonRenderer","SkeletonIgnore","StyleSkeleton","getDeepExpander","expandListPlaceholders","
|
|
1
|
+
{"version":3,"names":["React","useMemo","Parser","SkeletonRenderer","SkeletonIgnore","StyleSkeleton","getDeepExpander","expandListPlaceholders","useSkeletonTheme","Skeleton","props","theme","loading","children","styles","excludeStyles","deep","count","animation","duration","baseColor","highlightColor","borderRadius","accessible","accessibilityLabel","debug","skeletonTree","__DEV__","console","log","prepared","expand","wantDeep","undefined","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":"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","ignoreList":[]}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React, { createContext, useContext, useMemo } from 'react';
|
|
2
|
+
import { DEFAULT_CONFIG } from '../constants/defaults';
|
|
3
|
+
const SkeletonThemeContext = /*#__PURE__*/createContext(DEFAULT_CONFIG);
|
|
4
|
+
/** App-wide skeleton defaults. Nested providers inherit unspecified values. */
|
|
5
|
+
export function SkeletonProvider({
|
|
6
|
+
children,
|
|
7
|
+
animation,
|
|
8
|
+
duration,
|
|
9
|
+
baseColor,
|
|
10
|
+
highlightColor,
|
|
11
|
+
borderRadius,
|
|
12
|
+
debug
|
|
13
|
+
}) {
|
|
14
|
+
const parent = useContext(SkeletonThemeContext);
|
|
15
|
+
const value = useMemo(() => ({
|
|
16
|
+
animation: animation ?? parent.animation,
|
|
17
|
+
duration: duration ?? parent.duration,
|
|
18
|
+
baseColor: baseColor ?? parent.baseColor,
|
|
19
|
+
highlightColor: highlightColor ?? parent.highlightColor,
|
|
20
|
+
borderRadius: borderRadius ?? parent.borderRadius,
|
|
21
|
+
debug: debug ?? parent.debug
|
|
22
|
+
}), [parent, animation, duration, baseColor, highlightColor, borderRadius, debug]);
|
|
23
|
+
return /*#__PURE__*/React.createElement(SkeletonThemeContext.Provider, {
|
|
24
|
+
value: value
|
|
25
|
+
}, children);
|
|
26
|
+
}
|
|
27
|
+
export function useSkeletonTheme() {
|
|
28
|
+
return useContext(SkeletonThemeContext);
|
|
29
|
+
}
|
|
30
|
+
//# sourceMappingURL=SkeletonProvider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","createContext","useContext","useMemo","DEFAULT_CONFIG","SkeletonThemeContext","SkeletonProvider","children","animation","duration","baseColor","highlightColor","borderRadius","debug","parent","value","createElement","Provider","useSkeletonTheme"],"sourceRoot":"../../../src","sources":["components/SkeletonProvider.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,aAAa,EAAEC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAGjE,SAASC,cAAc,QAAQ,uBAAuB;AAEtD,MAAMC,oBAAoB,gBAAGJ,aAAa,CAA2BG,cAAc,CAAC;AAMpF;AACA,OAAO,SAASE,gBAAgBA,CAAC;EAC/BC,QAAQ;EACRC,SAAS;EACTC,QAAQ;EACRC,SAAS;EACTC,cAAc;EACdC,YAAY;EACZC;AACqB,CAAC,EAAE;EACxB,MAAMC,MAAM,GAAGZ,UAAU,CAACG,oBAAoB,CAAC;EAC/C,MAAMU,KAAK,GAAGZ,OAAO,CACnB,OAAO;IACLK,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,oBAAOb,KAAA,CAAAgB,aAAA,CAACX,oBAAoB,CAACY,QAAQ;IAACF,KAAK,EAAEA;EAAM,GAAER,QAAwC,CAAC;AAChG;AAEA,OAAO,SAASW,gBAAgBA,CAAA,EAAG;EACjC,OAAOhB,UAAU,CAACG,oBAAoB,CAAC;AACzC","ignoreList":[]}
|
|
@@ -24,6 +24,7 @@ export function withSkeleton(Component, options = {}) {
|
|
|
24
24
|
loading: loading,
|
|
25
25
|
styles: options.styles,
|
|
26
26
|
excludeStyles: options.excludeStyles,
|
|
27
|
+
debug: options.debug,
|
|
27
28
|
animation: options.animation,
|
|
28
29
|
duration: options.duration,
|
|
29
30
|
baseColor: options.baseColor,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Skeleton","withSkeleton","Component","options","WithSkeleton","props","loading","componentProps","createElement","styles","excludeStyles","animation","duration","baseColor","highlightColor","borderRadius","name","displayName"],"sourceRoot":"../../../src","sources":["components/withSkeleton.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAIzB,SAASC,QAAQ,QAAQ,YAAY;AAgBrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,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,oBACEN,KAAA,CAAAS,aAAA,CAACR,QAAQ;MACPM,OAAO,EAAEA,OAAQ;MACjBG,MAAM,EAAEN,OAAO,CAACM,MAAO;MACvBC,aAAa,EAAEP,OAAO,CAACO,aAAc;MACrCC,
|
|
1
|
+
{"version":3,"names":["React","Skeleton","withSkeleton","Component","options","WithSkeleton","props","loading","componentProps","createElement","styles","excludeStyles","debug","animation","duration","baseColor","highlightColor","borderRadius","name","displayName"],"sourceRoot":"../../../src","sources":["components/withSkeleton.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAIzB,SAASC,QAAQ,QAAQ,YAAY;AAgBrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,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,oBACEN,KAAA,CAAAS,aAAA,CAACR,QAAQ;MACPM,OAAO,EAAEA,OAAQ;MACjBG,MAAM,EAAEN,OAAO,CAACM,MAAO;MACvBC,aAAa,EAAEP,OAAO,CAACO,aAAc;MACrCC,KAAK,EAAER,OAAO,CAACQ,KAAM;MACrBC,SAAS,EAAET,OAAO,CAACS,SAAU;MAC7BC,QAAQ,EAAEV,OAAO,CAACU,QAAS;MAC3BC,SAAS,EAAEX,OAAO,CAACW,SAAU;MAC7BC,cAAc,EAAEZ,OAAO,CAACY,cAAe;MACvCC,YAAY,EAAEb,OAAO,CAACa;IAAa,gBAEnCjB,KAAA,CAAAS,aAAA,CAACN,SAAS,EAAMK,cAAkC,CAC1C,CAAC;EAEf,CAAC;EAED,MAAMU,IAAI,GAAGf,SAAS,CAACgB,WAAW,IAAIhB,SAAS,CAACe,IAAI,IAAI,WAAW;EACnEb,YAAY,CAACc,WAAW,GAAG,gBAAgBD,IAAI,GAAG;EAElD,OAAOb,YAAY;AACrB","ignoreList":[]}
|
package/lib/module/index.js
CHANGED
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
import './deep';
|
|
12
12
|
|
|
13
13
|
// Main component
|
|
14
|
+
export { SkeletonProvider } from './components/SkeletonProvider';
|
|
14
15
|
export { Skeleton } from './components/Skeleton';
|
|
15
16
|
export { SkeletonIgnore } from './components/SkeletonIgnore';
|
|
16
17
|
export { withSkeleton } from './components/withSkeleton';
|
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;AACA,OAAO,QAAQ;;AAEf;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
|
+
{"version":3,"names":["SkeletonProvider","Skeleton","SkeletonIgnore","withSkeleton","StyleSkeleton","Skelo","SkeletonBox","SkeletonText","SkeletonImage","SkeletonCircle"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,OAAO,QAAQ;;AAEf;AACA,SAASA,gBAAgB,QAAQ,+BAA+B;AAEhE,SAASC,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":[]}
|
|
@@ -29,7 +29,7 @@ import { SkeletonIgnore } from './SkeletonIgnore';
|
|
|
29
29
|
* </Skeleton>
|
|
30
30
|
* ```
|
|
31
31
|
*/
|
|
32
|
-
export declare function Skeleton(
|
|
32
|
+
export declare function Skeleton(props: 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;AAMlD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,QAAQ,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;AAMlD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBA8G5C;yBA9Ge,QAAQ"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
3
|
+
import type { SkeletonConfig } from '../types';
|
|
4
|
+
export interface SkeletonProviderProps extends SkeletonConfig {
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
}
|
|
7
|
+
/** App-wide skeleton defaults. Nested providers inherit unspecified values. */
|
|
8
|
+
export declare function SkeletonProvider({ children, animation, duration, baseColor, highlightColor, borderRadius, debug, }: SkeletonProviderProps): React.JSX.Element;
|
|
9
|
+
export declare function useSkeletonTheme(): Required<SkeletonConfig>;
|
|
10
|
+
//# sourceMappingURL=SkeletonProvider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SkeletonProvider.d.ts","sourceRoot":"","sources":["../../../src/components/SkeletonProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAK/C,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC3D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,+EAA+E;AAC/E,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,cAAc,EACd,YAAY,EACZ,KAAK,GACN,EAAE,qBAAqB,qBAevB;AAED,wBAAgB,gBAAgB,6BAE/B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"withSkeleton.d.ts","sourceRoot":"","sources":["../../../src/components/withSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAGlE,MAAM,WAAW,mBAAoB,SAAQ,OAAO,CAAC,cAAc,CAAC;IAClE;;;;OAIG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,EAC3C,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,EAC3B,OAAO,GAAE,mBAAwB;YAEJ,CAAC,GAAG;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE;;
|
|
1
|
+
{"version":3,"file":"withSkeleton.d.ts","sourceRoot":"","sources":["../../../src/components/withSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAGlE,MAAM,WAAW,mBAAoB,SAAQ,OAAO,CAAC,cAAc,CAAC;IAClE;;;;OAIG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,EAC3C,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,EAC3B,OAAO,GAAE,mBAAwB;YAEJ,CAAC,GAAG;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE;;EAwBtD"}
|
|
@@ -6,6 +6,8 @@
|
|
|
6
6
|
* @packageDocumentation
|
|
7
7
|
*/
|
|
8
8
|
import './deep';
|
|
9
|
+
export { SkeletonProvider } from './components/SkeletonProvider';
|
|
10
|
+
export type { SkeletonProviderProps } from './components/SkeletonProvider';
|
|
9
11
|
export { Skeleton } from './components/Skeleton';
|
|
10
12
|
export { SkeletonIgnore } from './components/SkeletonIgnore';
|
|
11
13
|
export { withSkeleton } from './components/withSkeleton';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,QAAQ,CAAC;AAGhB,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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,QAAQ,CAAC;AAGhB,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,YAAY,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAC3E,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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-skelo",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.1.0",
|
|
4
4
|
"description": "Automatic skeleton loading for React Native. Write your UI once, Skelo builds the loading state automatically.",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -6,7 +6,7 @@ import { SkeletonIgnore } from './SkeletonIgnore';
|
|
|
6
6
|
import { StyleSkeleton } from '../core/generator/StyleSkeleton';
|
|
7
7
|
import { getDeepExpander } from '../core/deepRegistry';
|
|
8
8
|
import { expandListPlaceholders } from '../core/parser/expandLists';
|
|
9
|
-
import {
|
|
9
|
+
import { useSkeletonTheme } from './SkeletonProvider';
|
|
10
10
|
|
|
11
11
|
/**
|
|
12
12
|
* Main Skeleton component
|
|
@@ -36,22 +36,24 @@ import { DEFAULT_CONFIG } from '../constants/defaults';
|
|
|
36
36
|
* </Skeleton>
|
|
37
37
|
* ```
|
|
38
38
|
*/
|
|
39
|
-
export function Skeleton({
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
39
|
+
export function Skeleton(props: SkeletonProps) {
|
|
40
|
+
const theme = useSkeletonTheme();
|
|
41
|
+
const {
|
|
42
|
+
loading,
|
|
43
|
+
children,
|
|
44
|
+
styles,
|
|
45
|
+
excludeStyles,
|
|
46
|
+
deep,
|
|
47
|
+
count = 6,
|
|
48
|
+
animation = theme.animation,
|
|
49
|
+
duration = theme.duration,
|
|
50
|
+
baseColor = theme.baseColor,
|
|
51
|
+
highlightColor = theme.highlightColor,
|
|
52
|
+
borderRadius = theme.borderRadius,
|
|
53
|
+
accessible = true,
|
|
54
|
+
accessibilityLabel = 'Loading content',
|
|
55
|
+
debug = theme.debug,
|
|
56
|
+
} = props;
|
|
55
57
|
// Parse component tree and generate skeleton.
|
|
56
58
|
// Hooks must run unconditionally (rules of hooks), but parsing stays lazy:
|
|
57
59
|
// we skip the work entirely when not loading or in styles-driven mode.
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import React, { createContext, useContext, useMemo } from 'react';
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
3
|
+
import type { SkeletonConfig } from '../types';
|
|
4
|
+
import { DEFAULT_CONFIG } from '../constants/defaults';
|
|
5
|
+
|
|
6
|
+
const SkeletonThemeContext = createContext<Required<SkeletonConfig>>(DEFAULT_CONFIG);
|
|
7
|
+
|
|
8
|
+
export interface SkeletonProviderProps extends SkeletonConfig {
|
|
9
|
+
children: ReactNode;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
/** App-wide skeleton defaults. Nested providers inherit unspecified values. */
|
|
13
|
+
export function SkeletonProvider({
|
|
14
|
+
children,
|
|
15
|
+
animation,
|
|
16
|
+
duration,
|
|
17
|
+
baseColor,
|
|
18
|
+
highlightColor,
|
|
19
|
+
borderRadius,
|
|
20
|
+
debug,
|
|
21
|
+
}: SkeletonProviderProps) {
|
|
22
|
+
const parent = useContext(SkeletonThemeContext);
|
|
23
|
+
const value = useMemo(
|
|
24
|
+
() => ({
|
|
25
|
+
animation: animation ?? parent.animation,
|
|
26
|
+
duration: duration ?? parent.duration,
|
|
27
|
+
baseColor: baseColor ?? parent.baseColor,
|
|
28
|
+
highlightColor: highlightColor ?? parent.highlightColor,
|
|
29
|
+
borderRadius: borderRadius ?? parent.borderRadius,
|
|
30
|
+
debug: debug ?? parent.debug,
|
|
31
|
+
}),
|
|
32
|
+
[parent, animation, duration, baseColor, highlightColor, borderRadius, debug]
|
|
33
|
+
);
|
|
34
|
+
|
|
35
|
+
return <SkeletonThemeContext.Provider value={value}>{children}</SkeletonThemeContext.Provider>;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
export function useSkeletonTheme() {
|
|
39
|
+
return useContext(SkeletonThemeContext);
|
|
40
|
+
}
|
package/src/index.ts
CHANGED
|
@@ -11,6 +11,8 @@
|
|
|
11
11
|
import './deep';
|
|
12
12
|
|
|
13
13
|
// Main component
|
|
14
|
+
export { SkeletonProvider } from './components/SkeletonProvider';
|
|
15
|
+
export type { SkeletonProviderProps } from './components/SkeletonProvider';
|
|
14
16
|
export { Skeleton } from './components/Skeleton';
|
|
15
17
|
export { SkeletonIgnore } from './components/SkeletonIgnore';
|
|
16
18
|
export { withSkeleton } from './components/withSkeleton';
|