react-usespinner 1.0.2 → 1.0.4
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +5 -1
- package/dist/{index.ts → index.js} +2 -5
- package/dist/usespinner.tsx +26 -1
- package/package.json +1 -1
package/README.md
CHANGED
@@ -72,4 +72,8 @@ start("genericname", { delay: 20000})
|
|
72
72
|
start("genericname", { delay: 30000})
|
73
73
|
|
74
74
|
end("genericname"); // will mark all three actions as complete as they have the same name
|
75
|
-
```
|
75
|
+
```
|
76
|
+
|
77
|
+
## Custom fetch
|
78
|
+
|
79
|
+
useSpinner also exports it's own fetch method. This method is compatible with a normal browser fetch but creates a unique action id that is tracked by the useSpinner actions
|
package/dist/usespinner.tsx
CHANGED
@@ -47,6 +47,31 @@ const useSpinner = (globalOptions?: Options) => {
|
|
47
47
|
return actions && actions.length > 0
|
48
48
|
}
|
49
49
|
|
50
|
+
const createUUID = () => {
|
51
|
+
// https://www.arungudelli.com/tutorial/javascript/how-to-create-uuid-guid-in-javascript-with-examples/
|
52
|
+
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
53
|
+
var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
|
54
|
+
return v.toString(16);
|
55
|
+
});
|
56
|
+
}
|
57
|
+
const fetch = (...params: any) => {
|
58
|
+
const id = createUUID();
|
59
|
+
start(id)
|
60
|
+
return new Promise((resolve, reject) => {
|
61
|
+
let config = params[1] || {};
|
62
|
+
fetch(params[0], config)
|
63
|
+
.then((res) => {
|
64
|
+
resolve(res);
|
65
|
+
})
|
66
|
+
.catch((err) => {
|
67
|
+
reject(err);
|
68
|
+
})
|
69
|
+
.finally(()=>{
|
70
|
+
end(id);
|
71
|
+
});
|
72
|
+
});
|
73
|
+
};
|
74
|
+
|
50
75
|
// JSX component used to wrap spinner of choice
|
51
76
|
const SpinnerContainer = ({ children }: SpinnerProps) => {
|
52
77
|
// If no active Actions then dont display anything
|
@@ -58,7 +83,7 @@ const useSpinner = (globalOptions?: Options) => {
|
|
58
83
|
};
|
59
84
|
|
60
85
|
// return hook values
|
61
|
-
return { start, end, clear, busy, SpinnerContainer };
|
86
|
+
return { start, end, clear, busy, fetch, SpinnerContainer };
|
62
87
|
};
|
63
88
|
|
64
89
|
export default useSpinner;
|
package/package.json
CHANGED