@rokku-x/react-hook-loading-spinner 0.1.12 → 0.2.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/dist/hooks/ssrLoading.d.ts +9 -2
- package/dist/hooks/useLoading.d.ts +9 -2
- package/dist/index.cjs.js +6 -6
- package/dist/index.d.ts +1 -1
- package/dist/index.esm.js +225 -198
- package/dist/store/loadingStore.d.ts +42 -0
- package/package.json +2 -2
- package/dist/mainLogic.d.ts +0 -19
|
@@ -1,2 +1,9 @@
|
|
|
1
|
-
export
|
|
2
|
-
|
|
1
|
+
export default function ssrLoading(): {
|
|
2
|
+
overrideLoading: (state: boolean | null) => void;
|
|
3
|
+
startLoading: () => void;
|
|
4
|
+
stopLoading: () => void;
|
|
5
|
+
readonly isLocalLoading: boolean;
|
|
6
|
+
asyncUseLoading: <R, _ extends any[]>(asyncFunction: Promise<R>) => Promise<R>;
|
|
7
|
+
readonly isLoading: boolean;
|
|
8
|
+
};
|
|
9
|
+
export * from '../store/loadingStore';
|
|
@@ -1,2 +1,9 @@
|
|
|
1
|
-
export
|
|
2
|
-
|
|
1
|
+
export default function useLoading(): {
|
|
2
|
+
overrideLoading: (state: boolean | null) => void;
|
|
3
|
+
startLoading: () => void;
|
|
4
|
+
stopLoading: () => void;
|
|
5
|
+
readonly isLocalLoading: boolean;
|
|
6
|
+
asyncUseLoading: <R, _ extends any[]>(asyncFunction: Promise<R>) => Promise<R>;
|
|
7
|
+
readonly isLoading: boolean;
|
|
8
|
+
};
|
|
9
|
+
export * from '../store/loadingStore';
|
package/dist/index.cjs.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
2
|
-
`),o=i.findIndex(
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),N=require("crypto"),C=require("react/jsx-runtime"),F=require("react-dom"),I=e=>{let t;const n=new Set,i=(g,r)=>{const c=typeof g=="function"?g(t):g;if(!Object.is(c,t)){const L=t;t=r??(typeof c!="object"||c===null)?c:Object.assign({},t,c),n.forEach(u=>u(t,L))}},o=()=>t,a={setState:i,getState:o,getInitialState:()=>v,subscribe:g=>(n.add(g),()=>n.delete(g))},v=t=e(i,o,a);return a},M=(e=>e?I(e):I),P=e=>e;function U(e,t=P){const n=y.useSyncExternalStore(e.subscribe,y.useCallback(()=>t(e.getState()),[e,t]),y.useCallback(()=>t(e.getInitialState()),[e,t]));return y.useDebugValue(n),n}const j=e=>{const t=M(e),n=i=>U(t,i);return Object.assign(n,t),n},$=(e=>e?j(e):j),T={BASE_URL:"/",DEV:!1,MODE:"production",PROD:!0,SSR:!1},E=new Map,w=e=>{const t=E.get(e);return t?Object.fromEntries(Object.entries(t.stores).map(([n,i])=>[n,i.getState()])):{}},J=(e,t,n)=>{if(e===void 0)return{type:"untracked",connection:t.connect(n)};const i=E.get(n.name);if(i)return{type:"tracked",store:e,...i};const o={connection:t.connect(n),stores:{}};return E.set(n.name,o),{type:"tracked",store:e,...o}},z=(e,t)=>{if(t===void 0)return;const n=E.get(e);n&&(delete n.stores[t],Object.keys(n.stores).length===0&&E.delete(e))},W=e=>{var t,n;if(!e)return;const i=e.split(`
|
|
2
|
+
`),o=i.findIndex(f=>f.includes("api.setState"));if(o<0)return;const s=((t=i[o+1])==null?void 0:t.trim())||"";return(n=/.+ (.+) .+/.exec(s))==null?void 0:n[1]},q=(e,t={})=>(n,i,o)=>{const{enabled:s,anonymousActionType:f,store:a,...v}=t;let g;try{g=(s??(T?"production":void 0)!=="production")&&window.__REDUX_DEVTOOLS_EXTENSION__}catch{}if(!g)return e(n,i,o);const{connection:r,...c}=J(a,g,v);let L=!0;o.setState=((d,p,l)=>{const S=n(d,p);if(!L)return S;const x=l===void 0?{type:f||W(new Error().stack)||"anonymous"}:typeof l=="string"?{type:l}:l;return a===void 0?(r?.send(x,i()),S):(r?.send({...x,type:`${a}/${x.type}`},{...w(v.name),[a]:o.getState()}),S)}),o.devtools={cleanup:()=>{r&&typeof r.unsubscribe=="function"&&r.unsubscribe(),z(v.name,a)}};const u=(...d)=>{const p=L;L=!1,n(...d),L=p},b=e(o.setState,i,o);if(c.type==="untracked"?r?.init(b):(c.stores[c.store]=o,r?.init(Object.fromEntries(Object.entries(c.stores).map(([d,p])=>[d,d===c.store?b:p.getState()])))),o.dispatchFromDevtools&&typeof o.dispatch=="function"){let d=!1;const p=o.dispatch;o.dispatch=(...l)=>{(T?"production":void 0)!=="production"&&l[0].type==="__setState"&&!d&&(console.warn('[zustand devtools middleware] "__setState" action type is reserved to set state from the devtools. Avoid using it.'),d=!0),p(...l)}}return r.subscribe(d=>{var p;switch(d.type){case"ACTION":if(typeof d.payload!="string"){console.error("[zustand devtools middleware] Unsupported action format");return}return O(d.payload,l=>{if(l.type==="__setState"){if(a===void 0){u(l.state);return}Object.keys(l.state).length!==1&&console.error(`
|
|
3
3
|
[zustand devtools middleware] Unsupported __setState action format.
|
|
4
4
|
When using 'store' option in devtools(), the 'state' should have only one key, which is a value of 'store' that was passed in devtools(),
|
|
5
5
|
and value of this only key should be a state object. Example: { "type": "__setState", "state": { "abc123Store": { "foo": "bar" } } }
|
|
6
|
-
`);const S=
|
|
7
|
-
dialog#${
|
|
6
|
+
`);const S=l.state[a];if(S==null)return;JSON.stringify(o.getState())!==JSON.stringify(S)&&u(S);return}o.dispatchFromDevtools&&typeof o.dispatch=="function"&&o.dispatch(l)});case"DISPATCH":switch(d.payload.type){case"RESET":return u(b),a===void 0?r?.init(o.getState()):r?.init(w(v.name));case"COMMIT":if(a===void 0){r?.init(o.getState());return}return r?.init(w(v.name));case"ROLLBACK":return O(d.state,l=>{if(a===void 0){u(l),r?.init(o.getState());return}u(l[a]),r?.init(w(v.name))});case"JUMP_TO_STATE":case"JUMP_TO_ACTION":return O(d.state,l=>{if(a===void 0){u(l);return}JSON.stringify(o.getState())!==JSON.stringify(l[a])&&u(l[a])});case"IMPORT_STATE":{const{nextLiftedState:l}=d.payload,S=(p=l.computedStates.slice(-1)[0])==null?void 0:p.state;if(!S)return;u(a===void 0?S:S[a]),r?.send(null,l);return}case"PAUSE_RECORDING":return L=!L}return}}),b},G=q,O=(e,t)=>{let n;try{n=JSON.parse(e)}catch(i){console.error("[zustand devtools middleware] Could not parse the received json",i)}n!==void 0&&t(n)};class R extends EventTarget{constructor(){super(...arguments),this.controller=new AbortController}on(t,n){return this.addEventListener(t,i=>n(i.detail),{signal:this.controller.signal}),this}once(t,n){return this.addEventListener(t,i=>n(i.detail),{signal:this.controller.signal,once:!0}),this}emit(t,n){return this.dispatchEvent(new CustomEvent(t,{detail:n}))}removeAllListeners(){this.controller.abort(),this.controller=new AbortController}}const h=new R,_=$()(G((e,t)=>({loadingCount:0,overrideState:null,localCounters:{},isLoading(){return t().overrideState??t().loadingCount>0},actions:{isGlobalLoading(){return t().isLoading()},startLoading:n=>{const i=t().isLoading();e(s=>({loadingCount:s.loadingCount+1})),n&&e(s=>({localCounters:{...s.localCounters,[n]:(s.localCounters[n]??0)+1}}));const o=t().isLoading();o&&!i&&h.emit("start",null),h.emit("change",{isLoading:o,isOverrideState:t().overrideState!==null})},stopLoading:n=>{const i=t().isLoading(),o=n?t().localCounters[n]??0:0;n&&o>0&&e(f=>({loadingCount:Math.max(0,f.loadingCount-1),localCounters:{...f.localCounters,[n]:Math.max(0,f.localCounters[n]-1)}}));const s=t().isLoading();!s&&i&&h.emit("stop",null),h.emit("change",{isLoading:s,isOverrideState:t().overrideState!==null})},overrideLoading:n=>{const i=t().isLoading();e({overrideState:n});const o=t().isLoading();o&&!i?h.emit("start",null):!o&&i&&h.emit("stop",null),h.emit("change",{isLoading:o,isOverrideState:n!==null})},getLocalCounter:n=>t().localCounters[n]??0,isLocalLoading:n=>(t().localCounters[n]??0)>0}})));function A(){const e=y.useId(),{actions:t}=_(s=>s),n=()=>{t.startLoading(e)},i=()=>{t.isLocalLoading(e)&&t.stopLoading(e)},o=async s=>{n();try{return await s}finally{i()}};return{overrideLoading:t.overrideLoading,startLoading:n,stopLoading:i,get isLocalLoading(){return t.isLocalLoading(e)},asyncUseLoading:o,get isLoading(){return t.isGlobalLoading()}}}function V(){const e=N.randomUUID(),{actions:t}=_(s=>s),n=()=>{t.startLoading(e)},i=()=>{t.isLocalLoading(e)&&t.stopLoading(e)},o=async s=>{n();try{return await s}finally{i()}};return{overrideLoading:t.overrideLoading,startLoading:n,stopLoading:i,get isLocalLoading(){return t.isLocalLoading(e)},asyncUseLoading:o,get isLoading(){return t.isGlobalLoading()}}}const m={Spin:"spin",FadeInOut:"fadeInOut",None:"none"},B=({scale:e=1,animationType:t=m.Spin,animationDuration:n,children:i,style:o,className:s,id:f,prefix:a})=>{const v=t,g=t===m.Spin?1:t===m.FadeInOut?2:0,r=n||g,c=t===m.Spin?"linear":t===m.FadeInOut?"ease-in-out":"linear",L=t===m.None?"none":`${a}-${v} ${r}s ${c} infinite`;return C.jsx("div",{style:{animation:L,...e!==1?{zoom:e}:{},...o},className:s,id:f,children:i})},k=e=>C.jsx("div",{id:"loading-circle",style:{width:"90px",height:"90px",border:"15px solid #f3f3f3",borderTop:"15px solid #009b4bff",borderRadius:"50%",boxSizing:"border-box"},...e}),D=e=>C.jsx("div",{style:{padding:"20px",fontSize:"25px",color:"#333",fontFamily:"system-ui, sans-serif"},...e,children:"Please wait..."});function X({loadingComponent:e,loadingComponentScale:t=1,animationType:n=m.Spin,animationDuration:i,wrapperStyle:o,wrapperClassName:s,wrapperId:f,animationWrapperStyle:a,animationWrapperClassName:v,animationWrapperId:g}){e=e||(n===m.Spin?k:D);const r=y.useRef(Math.random().toString(36).substring(2,6).replace(/[0-9]/g,"")),{loadingCount:c,overrideState:L}=_(p=>p),u=L??c>0,b=y.useRef(null);y.useEffect(()=>{u?(b.current?.showModal(),document.body.setAttribute("inert","")):(b.current?.close(),document.body.removeAttribute("inert"))},[u]);const d=f||"loading-wrapper-"+r.current;return u?F.createPortal(C.jsxs(C.Fragment,{children:[C.jsx("style",{children:`
|
|
7
|
+
dialog#${d}[open] {
|
|
8
8
|
display: flex !important;
|
|
9
9
|
justify-content: center;
|
|
10
10
|
align-items: center;
|
|
@@ -21,10 +21,10 @@
|
|
|
21
21
|
0%, 100% { opacity: 0.2; }
|
|
22
22
|
50% { opacity: 1; }
|
|
23
23
|
}
|
|
24
|
-
body:has(dialog#${
|
|
24
|
+
body:has(dialog#${d}[open]) {
|
|
25
25
|
overflow: hidden;
|
|
26
26
|
}
|
|
27
27
|
body {
|
|
28
28
|
scrollbar-gutter: stable;
|
|
29
29
|
}
|
|
30
|
-
`}),
|
|
30
|
+
`}),C.jsx("dialog",{ref:b,style:{border:"none",padding:0,backgroundColor:"rgba(0, 0, 0, 0.5)",backdropFilter:"blur(2px)",...o},className:s,id:d,children:C.jsx(B,{scale:t,animationType:n,animationDuration:i,style:a,className:v,id:g,prefix:r.current,children:y.isValidElement(e)?e:y.createElement(e)})})]}),document.body):null}function H({isLoading:e=!1}){const{startLoading:t,stopLoading:n}=A();return y.useEffect(()=>(e?t():n(),()=>{e&&n()}),[e]),null}exports.AnimationType=m;exports.EventEmitter=R;exports.Loading=H;exports.LoadingCircle=k;exports.LoadingPleaseWait=D;exports.LoadingRenderer=X;exports.loadingEventTarget=h;exports.ssrLoading=V;exports.useLoading=A;
|
package/dist/index.d.ts
CHANGED
|
@@ -5,4 +5,4 @@ export type { AnimationType as AnimationTypeType } from './components/LoadingRen
|
|
|
5
5
|
export { default as Loading } from './components/Loading';
|
|
6
6
|
export { default as LoadingRenderer } from './components/LoadingRenderer';
|
|
7
7
|
export { default as EventEmitter } from './utils/EventEmitter';
|
|
8
|
-
export { loadingEventTarget } from './
|
|
8
|
+
export { loadingEventTarget } from './store/loadingStore';
|
package/dist/index.esm.js
CHANGED
|
@@ -1,232 +1,233 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
5
|
-
|
|
2
|
+
import b, { useId as N, useRef as x, useEffect as A } from "react";
|
|
3
|
+
import { randomUUID as j } from "crypto";
|
|
4
|
+
import { jsx as C, jsxs as D, Fragment as F } from "react/jsx-runtime";
|
|
5
|
+
import { createPortal as M } from "react-dom";
|
|
6
|
+
const T = (e) => {
|
|
6
7
|
let t;
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
if (!Object.is(
|
|
10
|
-
const
|
|
11
|
-
t =
|
|
8
|
+
const n = /* @__PURE__ */ new Set(), i = (f, r) => {
|
|
9
|
+
const c = typeof f == "function" ? f(t) : f;
|
|
10
|
+
if (!Object.is(c, t)) {
|
|
11
|
+
const p = t;
|
|
12
|
+
t = r ?? (typeof c != "object" || c === null) ? c : Object.assign({}, t, c), n.forEach((u) => u(t, p));
|
|
12
13
|
}
|
|
13
|
-
}, o = () => t,
|
|
14
|
-
return
|
|
15
|
-
},
|
|
16
|
-
function P(
|
|
17
|
-
const
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
14
|
+
}, o = () => t, a = { setState: i, getState: o, getInitialState: () => v, subscribe: (f) => (n.add(f), () => n.delete(f)) }, v = t = e(i, o, a);
|
|
15
|
+
return a;
|
|
16
|
+
}, U = ((e) => e ? T(e) : T), $ = (e) => e;
|
|
17
|
+
function P(e, t = $) {
|
|
18
|
+
const n = b.useSyncExternalStore(
|
|
19
|
+
e.subscribe,
|
|
20
|
+
b.useCallback(() => t(e.getState()), [e, t]),
|
|
21
|
+
b.useCallback(() => t(e.getInitialState()), [e, t])
|
|
21
22
|
);
|
|
22
|
-
return
|
|
23
|
+
return b.useDebugValue(n), n;
|
|
23
24
|
}
|
|
24
|
-
const
|
|
25
|
-
const t =
|
|
26
|
-
return Object.assign(
|
|
27
|
-
}, J = ((
|
|
28
|
-
const t =
|
|
25
|
+
const R = (e) => {
|
|
26
|
+
const t = U(e), n = (i) => P(t, i);
|
|
27
|
+
return Object.assign(n, t), n;
|
|
28
|
+
}, J = ((e) => e ? R(e) : R), k = { BASE_URL: "/", DEV: !1, MODE: "production", PROD: !0, SSR: !1 }, w = /* @__PURE__ */ new Map(), _ = (e) => {
|
|
29
|
+
const t = w.get(e);
|
|
29
30
|
return t ? Object.fromEntries(
|
|
30
|
-
Object.entries(t.stores).map(([
|
|
31
|
+
Object.entries(t.stores).map(([n, i]) => [n, i.getState()])
|
|
31
32
|
) : {};
|
|
32
|
-
},
|
|
33
|
-
if (
|
|
33
|
+
}, z = (e, t, n) => {
|
|
34
|
+
if (e === void 0)
|
|
34
35
|
return {
|
|
35
36
|
type: "untracked",
|
|
36
|
-
connection: t.connect(
|
|
37
|
+
connection: t.connect(n)
|
|
37
38
|
};
|
|
38
|
-
const
|
|
39
|
-
if (
|
|
40
|
-
return { type: "tracked", store:
|
|
39
|
+
const i = w.get(n.name);
|
|
40
|
+
if (i)
|
|
41
|
+
return { type: "tracked", store: e, ...i };
|
|
41
42
|
const o = {
|
|
42
|
-
connection: t.connect(
|
|
43
|
+
connection: t.connect(n),
|
|
43
44
|
stores: {}
|
|
44
45
|
};
|
|
45
|
-
return
|
|
46
|
-
},
|
|
46
|
+
return w.set(n.name, o), { type: "tracked", store: e, ...o };
|
|
47
|
+
}, G = (e, t) => {
|
|
47
48
|
if (t === void 0) return;
|
|
48
|
-
const
|
|
49
|
-
|
|
50
|
-
}, V = (
|
|
51
|
-
var t,
|
|
52
|
-
if (!
|
|
53
|
-
const
|
|
54
|
-
`), o =
|
|
55
|
-
(
|
|
49
|
+
const n = w.get(e);
|
|
50
|
+
n && (delete n.stores[t], Object.keys(n.stores).length === 0 && w.delete(e));
|
|
51
|
+
}, V = (e) => {
|
|
52
|
+
var t, n;
|
|
53
|
+
if (!e) return;
|
|
54
|
+
const i = e.split(`
|
|
55
|
+
`), o = i.findIndex(
|
|
56
|
+
(g) => g.includes("api.setState")
|
|
56
57
|
);
|
|
57
58
|
if (o < 0) return;
|
|
58
|
-
const
|
|
59
|
-
return (
|
|
60
|
-
}, W = (
|
|
61
|
-
const { enabled:
|
|
59
|
+
const s = ((t = i[o + 1]) == null ? void 0 : t.trim()) || "";
|
|
60
|
+
return (n = /.+ (.+) .+/.exec(s)) == null ? void 0 : n[1];
|
|
61
|
+
}, W = (e, t = {}) => (n, i, o) => {
|
|
62
|
+
const { enabled: s, anonymousActionType: g, store: a, ...v } = t;
|
|
62
63
|
let f;
|
|
63
64
|
try {
|
|
64
|
-
f = (
|
|
65
|
+
f = (s ?? (k ? "production" : void 0) !== "production") && window.__REDUX_DEVTOOLS_EXTENSION__;
|
|
65
66
|
} catch {
|
|
66
67
|
}
|
|
67
68
|
if (!f)
|
|
68
|
-
return n
|
|
69
|
-
const { connection:
|
|
70
|
-
let
|
|
71
|
-
o.setState = ((
|
|
72
|
-
const
|
|
73
|
-
if (!
|
|
74
|
-
const O =
|
|
75
|
-
type:
|
|
76
|
-
} : typeof
|
|
77
|
-
return
|
|
69
|
+
return e(n, i, o);
|
|
70
|
+
const { connection: r, ...c } = z(a, f, v);
|
|
71
|
+
let p = !0;
|
|
72
|
+
o.setState = ((d, S, l) => {
|
|
73
|
+
const L = n(d, S);
|
|
74
|
+
if (!p) return L;
|
|
75
|
+
const O = l === void 0 ? {
|
|
76
|
+
type: g || V(new Error().stack) || "anonymous"
|
|
77
|
+
} : typeof l == "string" ? { type: l } : l;
|
|
78
|
+
return a === void 0 ? (r?.send(O, i()), L) : (r?.send(
|
|
78
79
|
{
|
|
79
80
|
...O,
|
|
80
|
-
type: `${
|
|
81
|
+
type: `${a}/${O.type}`
|
|
81
82
|
},
|
|
82
83
|
{
|
|
83
|
-
...
|
|
84
|
-
[
|
|
84
|
+
..._(v.name),
|
|
85
|
+
[a]: o.getState()
|
|
85
86
|
}
|
|
86
|
-
),
|
|
87
|
+
), L);
|
|
87
88
|
}), o.devtools = {
|
|
88
89
|
cleanup: () => {
|
|
89
|
-
|
|
90
|
+
r && typeof r.unsubscribe == "function" && r.unsubscribe(), G(v.name, a);
|
|
90
91
|
}
|
|
91
92
|
};
|
|
92
|
-
const u = (...
|
|
93
|
-
const
|
|
94
|
-
|
|
95
|
-
},
|
|
96
|
-
if (
|
|
93
|
+
const u = (...d) => {
|
|
94
|
+
const S = p;
|
|
95
|
+
p = !1, n(...d), p = S;
|
|
96
|
+
}, m = e(o.setState, i, o);
|
|
97
|
+
if (c.type === "untracked" ? r?.init(m) : (c.stores[c.store] = o, r?.init(
|
|
97
98
|
Object.fromEntries(
|
|
98
|
-
Object.entries(
|
|
99
|
-
|
|
100
|
-
|
|
99
|
+
Object.entries(c.stores).map(([d, S]) => [
|
|
100
|
+
d,
|
|
101
|
+
d === c.store ? m : S.getState()
|
|
101
102
|
])
|
|
102
103
|
)
|
|
103
104
|
)), o.dispatchFromDevtools && typeof o.dispatch == "function") {
|
|
104
|
-
let
|
|
105
|
-
const
|
|
106
|
-
o.dispatch = (...
|
|
107
|
-
(
|
|
105
|
+
let d = !1;
|
|
106
|
+
const S = o.dispatch;
|
|
107
|
+
o.dispatch = (...l) => {
|
|
108
|
+
(k ? "production" : void 0) !== "production" && l[0].type === "__setState" && !d && (console.warn(
|
|
108
109
|
'[zustand devtools middleware] "__setState" action type is reserved to set state from the devtools. Avoid using it.'
|
|
109
|
-
),
|
|
110
|
+
), d = !0), S(...l);
|
|
110
111
|
};
|
|
111
112
|
}
|
|
112
|
-
return
|
|
113
|
-
var
|
|
114
|
-
switch (
|
|
113
|
+
return r.subscribe((d) => {
|
|
114
|
+
var S;
|
|
115
|
+
switch (d.type) {
|
|
115
116
|
case "ACTION":
|
|
116
|
-
if (typeof
|
|
117
|
+
if (typeof d.payload != "string") {
|
|
117
118
|
console.error(
|
|
118
119
|
"[zustand devtools middleware] Unsupported action format"
|
|
119
120
|
);
|
|
120
121
|
return;
|
|
121
122
|
}
|
|
122
123
|
return E(
|
|
123
|
-
|
|
124
|
-
(
|
|
125
|
-
if (
|
|
126
|
-
if (
|
|
127
|
-
u(
|
|
124
|
+
d.payload,
|
|
125
|
+
(l) => {
|
|
126
|
+
if (l.type === "__setState") {
|
|
127
|
+
if (a === void 0) {
|
|
128
|
+
u(l.state);
|
|
128
129
|
return;
|
|
129
130
|
}
|
|
130
|
-
Object.keys(
|
|
131
|
+
Object.keys(l.state).length !== 1 && console.error(
|
|
131
132
|
`
|
|
132
133
|
[zustand devtools middleware] Unsupported __setState action format.
|
|
133
134
|
When using 'store' option in devtools(), the 'state' should have only one key, which is a value of 'store' that was passed in devtools(),
|
|
134
135
|
and value of this only key should be a state object. Example: { "type": "__setState", "state": { "abc123Store": { "foo": "bar" } } }
|
|
135
136
|
`
|
|
136
137
|
);
|
|
137
|
-
const
|
|
138
|
-
if (
|
|
138
|
+
const L = l.state[a];
|
|
139
|
+
if (L == null)
|
|
139
140
|
return;
|
|
140
|
-
JSON.stringify(o.getState()) !== JSON.stringify(
|
|
141
|
+
JSON.stringify(o.getState()) !== JSON.stringify(L) && u(L);
|
|
141
142
|
return;
|
|
142
143
|
}
|
|
143
|
-
o.dispatchFromDevtools && typeof o.dispatch == "function" && o.dispatch(
|
|
144
|
+
o.dispatchFromDevtools && typeof o.dispatch == "function" && o.dispatch(l);
|
|
144
145
|
}
|
|
145
146
|
);
|
|
146
147
|
case "DISPATCH":
|
|
147
|
-
switch (
|
|
148
|
+
switch (d.payload.type) {
|
|
148
149
|
case "RESET":
|
|
149
|
-
return u(
|
|
150
|
+
return u(m), a === void 0 ? r?.init(o.getState()) : r?.init(_(v.name));
|
|
150
151
|
case "COMMIT":
|
|
151
|
-
if (
|
|
152
|
-
|
|
152
|
+
if (a === void 0) {
|
|
153
|
+
r?.init(o.getState());
|
|
153
154
|
return;
|
|
154
155
|
}
|
|
155
|
-
return
|
|
156
|
+
return r?.init(_(v.name));
|
|
156
157
|
case "ROLLBACK":
|
|
157
|
-
return E(
|
|
158
|
-
if (
|
|
159
|
-
u(
|
|
158
|
+
return E(d.state, (l) => {
|
|
159
|
+
if (a === void 0) {
|
|
160
|
+
u(l), r?.init(o.getState());
|
|
160
161
|
return;
|
|
161
162
|
}
|
|
162
|
-
u(a
|
|
163
|
+
u(l[a]), r?.init(_(v.name));
|
|
163
164
|
});
|
|
164
165
|
case "JUMP_TO_STATE":
|
|
165
166
|
case "JUMP_TO_ACTION":
|
|
166
|
-
return E(
|
|
167
|
-
if (
|
|
168
|
-
u(
|
|
167
|
+
return E(d.state, (l) => {
|
|
168
|
+
if (a === void 0) {
|
|
169
|
+
u(l);
|
|
169
170
|
return;
|
|
170
171
|
}
|
|
171
|
-
JSON.stringify(o.getState()) !== JSON.stringify(a
|
|
172
|
+
JSON.stringify(o.getState()) !== JSON.stringify(l[a]) && u(l[a]);
|
|
172
173
|
});
|
|
173
174
|
case "IMPORT_STATE": {
|
|
174
|
-
const { nextLiftedState:
|
|
175
|
-
if (!
|
|
176
|
-
u(
|
|
175
|
+
const { nextLiftedState: l } = d.payload, L = (S = l.computedStates.slice(-1)[0]) == null ? void 0 : S.state;
|
|
176
|
+
if (!L) return;
|
|
177
|
+
u(a === void 0 ? L : L[a]), r?.send(
|
|
177
178
|
null,
|
|
178
179
|
// FIXME no-any
|
|
179
|
-
|
|
180
|
+
l
|
|
180
181
|
);
|
|
181
182
|
return;
|
|
182
183
|
}
|
|
183
184
|
case "PAUSE_RECORDING":
|
|
184
|
-
return
|
|
185
|
+
return p = !p;
|
|
185
186
|
}
|
|
186
187
|
return;
|
|
187
188
|
}
|
|
188
|
-
}),
|
|
189
|
-
}, B = W, E = (
|
|
190
|
-
let
|
|
189
|
+
}), m;
|
|
190
|
+
}, B = W, E = (e, t) => {
|
|
191
|
+
let n;
|
|
191
192
|
try {
|
|
192
|
-
|
|
193
|
-
} catch (
|
|
193
|
+
n = JSON.parse(e);
|
|
194
|
+
} catch (i) {
|
|
194
195
|
console.error(
|
|
195
196
|
"[zustand devtools middleware] Could not parse the received json",
|
|
196
|
-
|
|
197
|
+
i
|
|
197
198
|
);
|
|
198
199
|
}
|
|
199
|
-
|
|
200
|
+
n !== void 0 && t(n);
|
|
200
201
|
};
|
|
201
|
-
class
|
|
202
|
+
class X extends EventTarget {
|
|
202
203
|
constructor() {
|
|
203
204
|
super(...arguments), this.controller = new AbortController();
|
|
204
205
|
}
|
|
205
|
-
on(t,
|
|
206
|
+
on(t, n) {
|
|
206
207
|
return this.addEventListener(
|
|
207
208
|
t,
|
|
208
|
-
(
|
|
209
|
+
(i) => n(i.detail),
|
|
209
210
|
{ signal: this.controller.signal }
|
|
210
211
|
), this;
|
|
211
212
|
}
|
|
212
|
-
once(t,
|
|
213
|
+
once(t, n) {
|
|
213
214
|
return this.addEventListener(
|
|
214
215
|
t,
|
|
215
|
-
(
|
|
216
|
+
(i) => n(i.detail),
|
|
216
217
|
{
|
|
217
218
|
signal: this.controller.signal,
|
|
218
219
|
once: !0
|
|
219
220
|
}
|
|
220
221
|
), this;
|
|
221
222
|
}
|
|
222
|
-
emit(t,
|
|
223
|
-
return this.dispatchEvent(new CustomEvent(t, { detail:
|
|
223
|
+
emit(t, n) {
|
|
224
|
+
return this.dispatchEvent(new CustomEvent(t, { detail: n }));
|
|
224
225
|
}
|
|
225
226
|
removeAllListeners() {
|
|
226
227
|
this.controller.abort(), this.controller = new AbortController();
|
|
227
228
|
}
|
|
228
229
|
}
|
|
229
|
-
const
|
|
230
|
+
const h = new X(), I = J()(B((e, t) => ({
|
|
230
231
|
loadingCount: 0,
|
|
231
232
|
overrideState: null,
|
|
232
233
|
localCounters: {},
|
|
@@ -237,58 +238,58 @@ const b = new G(), X = J()(B((n, t) => ({
|
|
|
237
238
|
isGlobalLoading() {
|
|
238
239
|
return t().isLoading();
|
|
239
240
|
},
|
|
240
|
-
startLoading: (
|
|
241
|
-
const
|
|
242
|
-
|
|
241
|
+
startLoading: (n) => {
|
|
242
|
+
const i = t().isLoading();
|
|
243
|
+
e((s) => ({ loadingCount: s.loadingCount + 1 })), n && e((s) => ({
|
|
243
244
|
localCounters: {
|
|
244
|
-
...
|
|
245
|
-
[
|
|
245
|
+
...s.localCounters,
|
|
246
|
+
[n]: (s.localCounters[n] ?? 0) + 1
|
|
246
247
|
}
|
|
247
248
|
}));
|
|
248
249
|
const o = t().isLoading();
|
|
249
|
-
o && !
|
|
250
|
+
o && !i && h.emit("start", null), h.emit("change", { isLoading: o, isOverrideState: t().overrideState !== null });
|
|
250
251
|
},
|
|
251
|
-
stopLoading: (
|
|
252
|
-
const
|
|
253
|
-
|
|
254
|
-
loadingCount: Math.max(0,
|
|
252
|
+
stopLoading: (n) => {
|
|
253
|
+
const i = t().isLoading(), o = n ? t().localCounters[n] ?? 0 : 0;
|
|
254
|
+
n && o > 0 && e((g) => ({
|
|
255
|
+
loadingCount: Math.max(0, g.loadingCount - 1),
|
|
255
256
|
localCounters: {
|
|
256
|
-
...
|
|
257
|
-
[
|
|
257
|
+
...g.localCounters,
|
|
258
|
+
[n]: Math.max(0, g.localCounters[n] - 1)
|
|
258
259
|
}
|
|
259
260
|
}));
|
|
260
|
-
const
|
|
261
|
-
!
|
|
261
|
+
const s = t().isLoading();
|
|
262
|
+
!s && i && h.emit("stop", null), h.emit("change", { isLoading: s, isOverrideState: t().overrideState !== null });
|
|
262
263
|
},
|
|
263
|
-
overrideLoading: (
|
|
264
|
-
const
|
|
265
|
-
|
|
264
|
+
overrideLoading: (n) => {
|
|
265
|
+
const i = t().isLoading();
|
|
266
|
+
e({ overrideState: n });
|
|
266
267
|
const o = t().isLoading();
|
|
267
|
-
o && !
|
|
268
|
+
o && !i ? h.emit("start", null) : !o && i && h.emit("stop", null), h.emit("change", { isLoading: o, isOverrideState: n !== null });
|
|
268
269
|
},
|
|
269
|
-
getLocalCounter: (
|
|
270
|
-
isLocalLoading: (
|
|
270
|
+
getLocalCounter: (n) => t().localCounters[n] ?? 0,
|
|
271
|
+
isLocalLoading: (n) => (t().localCounters[n] ?? 0) > 0
|
|
271
272
|
}
|
|
272
273
|
})));
|
|
273
|
-
function
|
|
274
|
-
const
|
|
275
|
-
t.startLoading(
|
|
276
|
-
},
|
|
277
|
-
t.isLocalLoading(
|
|
278
|
-
}, o = async (
|
|
279
|
-
|
|
274
|
+
function H() {
|
|
275
|
+
const e = N(), { actions: t } = I((s) => s), n = () => {
|
|
276
|
+
t.startLoading(e);
|
|
277
|
+
}, i = () => {
|
|
278
|
+
t.isLocalLoading(e) && t.stopLoading(e);
|
|
279
|
+
}, o = async (s) => {
|
|
280
|
+
n();
|
|
280
281
|
try {
|
|
281
|
-
return await
|
|
282
|
+
return await s;
|
|
282
283
|
} finally {
|
|
283
|
-
|
|
284
|
+
i();
|
|
284
285
|
}
|
|
285
286
|
};
|
|
286
287
|
return {
|
|
287
288
|
overrideLoading: t.overrideLoading,
|
|
288
|
-
startLoading:
|
|
289
|
-
stopLoading:
|
|
289
|
+
startLoading: n,
|
|
290
|
+
stopLoading: i,
|
|
290
291
|
get isLocalLoading() {
|
|
291
|
-
return t.isLocalLoading(
|
|
292
|
+
return t.isLocalLoading(e);
|
|
292
293
|
},
|
|
293
294
|
asyncUseLoading: o,
|
|
294
295
|
get isLoading() {
|
|
@@ -296,36 +297,62 @@ function A() {
|
|
|
296
297
|
}
|
|
297
298
|
};
|
|
298
299
|
}
|
|
299
|
-
|
|
300
|
+
function nt() {
|
|
301
|
+
const e = j(), { actions: t } = I((s) => s), n = () => {
|
|
302
|
+
t.startLoading(e);
|
|
303
|
+
}, i = () => {
|
|
304
|
+
t.isLocalLoading(e) && t.stopLoading(e);
|
|
305
|
+
}, o = async (s) => {
|
|
306
|
+
n();
|
|
307
|
+
try {
|
|
308
|
+
return await s;
|
|
309
|
+
} finally {
|
|
310
|
+
i();
|
|
311
|
+
}
|
|
312
|
+
};
|
|
313
|
+
return {
|
|
314
|
+
overrideLoading: t.overrideLoading,
|
|
315
|
+
startLoading: n,
|
|
316
|
+
stopLoading: i,
|
|
317
|
+
get isLocalLoading() {
|
|
318
|
+
return t.isLocalLoading(e);
|
|
319
|
+
},
|
|
320
|
+
asyncUseLoading: o,
|
|
321
|
+
get isLoading() {
|
|
322
|
+
return t.isGlobalLoading();
|
|
323
|
+
}
|
|
324
|
+
};
|
|
325
|
+
}
|
|
326
|
+
const y = {
|
|
300
327
|
Spin: "spin",
|
|
301
328
|
FadeInOut: "fadeInOut",
|
|
302
329
|
None: "none"
|
|
303
|
-
},
|
|
304
|
-
const
|
|
305
|
-
return /* @__PURE__ */
|
|
306
|
-
},
|
|
307
|
-
function
|
|
308
|
-
loadingComponent:
|
|
330
|
+
}, K = ({ scale: e = 1, animationType: t = y.Spin, animationDuration: n, children: i, style: o, className: s, id: g, prefix: a }) => {
|
|
331
|
+
const v = t, f = t === y.Spin ? 1 : t === y.FadeInOut ? 2 : 0, r = n || f, c = t === y.Spin ? "linear" : t === y.FadeInOut ? "ease-in-out" : "linear", p = t === y.None ? "none" : `${a}-${v} ${r}s ${c} infinite`;
|
|
332
|
+
return /* @__PURE__ */ C("div", { style: { animation: p, ...e !== 1 ? { zoom: e } : {}, ...o }, className: s, id: g, children: i });
|
|
333
|
+
}, q = (e) => /* @__PURE__ */ C("div", { id: "loading-circle", style: { width: "90px", height: "90px", border: "15px solid #f3f3f3", borderTop: "15px solid #009b4bff", borderRadius: "50%", boxSizing: "border-box" }, ...e }), Q = (e) => /* @__PURE__ */ C("div", { style: { padding: "20px", fontSize: "25px", color: "#333", fontFamily: "system-ui, sans-serif" }, ...e, children: "Please wait..." });
|
|
334
|
+
function ot({
|
|
335
|
+
loadingComponent: e,
|
|
309
336
|
loadingComponentScale: t = 1,
|
|
310
|
-
animationType:
|
|
311
|
-
animationDuration:
|
|
337
|
+
animationType: n = y.Spin,
|
|
338
|
+
animationDuration: i,
|
|
312
339
|
wrapperStyle: o,
|
|
313
|
-
wrapperClassName:
|
|
314
|
-
wrapperId:
|
|
315
|
-
animationWrapperStyle:
|
|
316
|
-
animationWrapperClassName:
|
|
340
|
+
wrapperClassName: s,
|
|
341
|
+
wrapperId: g,
|
|
342
|
+
animationWrapperStyle: a,
|
|
343
|
+
animationWrapperClassName: v,
|
|
317
344
|
animationWrapperId: f
|
|
318
345
|
}) {
|
|
319
|
-
|
|
320
|
-
const
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
}, [
|
|
324
|
-
const
|
|
325
|
-
return
|
|
326
|
-
/* @__PURE__ */
|
|
327
|
-
/* @__PURE__ */
|
|
328
|
-
dialog#${
|
|
346
|
+
e = e || (n === y.Spin ? q : Q);
|
|
347
|
+
const r = x(Math.random().toString(36).substring(2, 6).replace(/[0-9]/g, "")), { loadingCount: c, overrideState: p } = I((S) => S), u = p ?? c > 0, m = x(null);
|
|
348
|
+
A(() => {
|
|
349
|
+
u ? (m.current?.showModal(), document.body.setAttribute("inert", "")) : (m.current?.close(), document.body.removeAttribute("inert"));
|
|
350
|
+
}, [u]);
|
|
351
|
+
const d = g || "loading-wrapper-" + r.current;
|
|
352
|
+
return u ? M(
|
|
353
|
+
/* @__PURE__ */ D(F, { children: [
|
|
354
|
+
/* @__PURE__ */ C("style", { children: `
|
|
355
|
+
dialog#${d}[open] {
|
|
329
356
|
display: flex !important;
|
|
330
357
|
justify-content: center;
|
|
331
358
|
align-items: center;
|
|
@@ -334,25 +361,25 @@ function tt({
|
|
|
334
361
|
max-width: 100%;
|
|
335
362
|
max-height: 100%;
|
|
336
363
|
}
|
|
337
|
-
@keyframes ${
|
|
364
|
+
@keyframes ${r.current}-spin {
|
|
338
365
|
0% { transform: rotate(0deg); }
|
|
339
366
|
100% { transform: rotate(360deg); }
|
|
340
367
|
}
|
|
341
|
-
@keyframes ${
|
|
368
|
+
@keyframes ${r.current}-fadeInOut {
|
|
342
369
|
0%, 100% { opacity: 0.2; }
|
|
343
370
|
50% { opacity: 1; }
|
|
344
371
|
}
|
|
345
|
-
body:has(dialog#${
|
|
372
|
+
body:has(dialog#${d}[open]) {
|
|
346
373
|
overflow: hidden;
|
|
347
374
|
}
|
|
348
375
|
body {
|
|
349
376
|
scrollbar-gutter: stable;
|
|
350
377
|
}
|
|
351
378
|
` }),
|
|
352
|
-
/* @__PURE__ */
|
|
379
|
+
/* @__PURE__ */ C(
|
|
353
380
|
"dialog",
|
|
354
381
|
{
|
|
355
|
-
ref:
|
|
382
|
+
ref: m,
|
|
356
383
|
style: {
|
|
357
384
|
border: "none",
|
|
358
385
|
padding: 0,
|
|
@@ -360,29 +387,29 @@ function tt({
|
|
|
360
387
|
backdropFilter: "blur(2px)",
|
|
361
388
|
...o
|
|
362
389
|
},
|
|
363
|
-
className:
|
|
364
|
-
id:
|
|
365
|
-
children: /* @__PURE__ */
|
|
390
|
+
className: s,
|
|
391
|
+
id: d,
|
|
392
|
+
children: /* @__PURE__ */ C(K, { scale: t, animationType: n, animationDuration: i, style: a, className: v, id: f, prefix: r.current, children: b.isValidElement(e) ? e : b.createElement(e) })
|
|
366
393
|
}
|
|
367
394
|
)
|
|
368
395
|
] }),
|
|
369
396
|
document.body
|
|
370
397
|
) : null;
|
|
371
398
|
}
|
|
372
|
-
function
|
|
373
|
-
const { startLoading: t, stopLoading:
|
|
374
|
-
return
|
|
375
|
-
|
|
376
|
-
}), [
|
|
399
|
+
function it({ isLoading: e = !1 }) {
|
|
400
|
+
const { startLoading: t, stopLoading: n } = H();
|
|
401
|
+
return A(() => (e ? t() : n(), () => {
|
|
402
|
+
e && n();
|
|
403
|
+
}), [e]), null;
|
|
377
404
|
}
|
|
378
405
|
export {
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
406
|
+
y as AnimationType,
|
|
407
|
+
X as EventEmitter,
|
|
408
|
+
it as Loading,
|
|
409
|
+
q as LoadingCircle,
|
|
410
|
+
Q as LoadingPleaseWait,
|
|
411
|
+
ot as LoadingRenderer,
|
|
412
|
+
h as loadingEventTarget,
|
|
413
|
+
nt as ssrLoading,
|
|
414
|
+
H as useLoading
|
|
388
415
|
};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { default as EventEmitter } from '../utils/EventEmitter';
|
|
2
|
+
type LoadingEvents = {
|
|
3
|
+
change: {
|
|
4
|
+
isLoading: boolean;
|
|
5
|
+
isOverrideState: boolean;
|
|
6
|
+
} | null;
|
|
7
|
+
start: null;
|
|
8
|
+
stop: null;
|
|
9
|
+
};
|
|
10
|
+
export declare const loadingEventTarget: EventEmitter<LoadingEvents>;
|
|
11
|
+
interface Store {
|
|
12
|
+
loadingCount: number;
|
|
13
|
+
overrideState: boolean | null;
|
|
14
|
+
localCounters: Record<string, number>;
|
|
15
|
+
isLoading: () => boolean;
|
|
16
|
+
actions: {
|
|
17
|
+
isGlobalLoading: () => boolean;
|
|
18
|
+
startLoading: (instanceId?: string) => void;
|
|
19
|
+
stopLoading: (instanceId?: string) => void;
|
|
20
|
+
overrideLoading: (state: boolean | null) => void;
|
|
21
|
+
getLocalCounter: (instanceId: string) => number;
|
|
22
|
+
isLocalLoading: (instanceId: string) => boolean;
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
export declare const loadingStore: import('zustand').UseBoundStore<Omit<import('zustand').StoreApi<Store>, "setState" | "devtools"> & {
|
|
26
|
+
setState(partial: Store | Partial<Store> | ((state: Store) => Store | Partial<Store>), replace?: false | undefined, action?: (string | {
|
|
27
|
+
[x: string]: unknown;
|
|
28
|
+
[x: number]: unknown;
|
|
29
|
+
[x: symbol]: unknown;
|
|
30
|
+
type: string;
|
|
31
|
+
}) | undefined): void;
|
|
32
|
+
setState(state: Store | ((state: Store) => Store), replace: true, action?: (string | {
|
|
33
|
+
[x: string]: unknown;
|
|
34
|
+
[x: number]: unknown;
|
|
35
|
+
[x: symbol]: unknown;
|
|
36
|
+
type: string;
|
|
37
|
+
}) | undefined): void;
|
|
38
|
+
devtools: {
|
|
39
|
+
cleanup: () => void;
|
|
40
|
+
};
|
|
41
|
+
}>;
|
|
42
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rokku-x/react-hook-loading-spinner",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "A lightweight and flexible React loading state hook library with built-in spinner components, global state management, and zero dependencies (except React and Zustand).",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -78,4 +78,4 @@
|
|
|
78
78
|
"dependencies": {
|
|
79
79
|
"zustand": "^5.0.10"
|
|
80
80
|
}
|
|
81
|
-
}
|
|
81
|
+
}
|
package/dist/mainLogic.d.ts
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { default as EventEmitter } from './utils/EventEmitter';
|
|
2
|
-
type LoadingEvents = {
|
|
3
|
-
change: {
|
|
4
|
-
isLoading: boolean;
|
|
5
|
-
isOverrideState: boolean;
|
|
6
|
-
} | null;
|
|
7
|
-
start: null;
|
|
8
|
-
stop: null;
|
|
9
|
-
};
|
|
10
|
-
export declare const loadingEventTarget: EventEmitter<LoadingEvents>;
|
|
11
|
-
export default function (): {
|
|
12
|
-
overrideLoading: (state: boolean | null) => void;
|
|
13
|
-
startLoading: () => void;
|
|
14
|
-
stopLoading: () => void;
|
|
15
|
-
readonly isLocalLoading: boolean;
|
|
16
|
-
asyncUseLoading: <R, _ extends any[]>(asyncFunction: Promise<R>) => Promise<R>;
|
|
17
|
-
readonly isLoading: boolean;
|
|
18
|
-
};
|
|
19
|
-
export {};
|