react-usespinner 1.0.5 → 1.0.6

package/dist/README.md

@@ -0,0 +1,79 @@
+# useSpinner
+
+Wraps action calls that can be grouped together to display a spinner while 1 or more is active. By default an action will be marked as complete after 10 seconds. 
+
+Any item that may require an indication of processing may be considered an action. For example a fetch call, or a long running process.
+
+Typically before a fetch is started, an action would be started for the fetch. Once the fetch rresolves or is in error then the action can be ended
+
+```javascript
+start("slowapi") // start action
+console.log("Starting slowapi action")
+fetch("https://flash-the-slow-api.herokuapp.com/delay/3000")
+.then(res => res.text())
+.then(data => console.log(data))
+.finally(() => {
+    console.log("Ending slowapi action")
+    end("slowapi") // finally end action
+})
+```
+
+## Usage
+
+```javascript
+import useSpinner from './hooks/usespinner';
+
+const { start, end, clear, busy, SpinnerContainer } = useSpinner();
+
+// To start a new action
+start("10 Second timer")
+
+// To end an existing action
+end("10 Second timer")
+
+// clear all actions
+clear();
+
+// Check if any actions currently running
+if (busy()) {
+    console.log("There are actions running")
+}
+
+// Display a spinner (if any actions are running) 
+<SpinnerContainer>
+    LOADING
+</SpinnerContainer>
+```
+
+## Configuration
+
+A global timeout can be configured, by default this is 10 seconds
+
+```javascript
+// to set a global delay of 1 second
+const { start, end, clear, SpinnerContainer } = useSpinner({ delay: 1000 });
+```
+
+Each action can also be configurred with a configurable timeout
+```javascript
+// To start a new action that may take up to 60 seconds
+start("10 Second timer", { delay: 60000 })
+```
+
+The action will be kept active based on (in order), action delay, global delay, 10 seconds
+
+## ending actions
+
+calling the end action method will immediatly close all actions with the given name, irrespective to when they were started, if mutiple actions with the same name are to be started each must be uniquely identified by name
+
+```javascript
+start("genericname", { delay: 10000})
+start("genericname", { delay: 20000})
+start("genericname", { delay: 30000})
+
+end("genericname"); // will mark all three actions as complete as they have the same name
+```
+
+## Custom fetch
+
+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/{index.ts → hooks/index.d.ts}

@@ -1,5 +1,2 @@
 import useSpinner from "./usespinner";
-
-export {
-    useSpinner
-}
+export { useSpinner };

package/dist/hooks/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSpinner = void 0;
+var usespinner_1 = require("./usespinner");
+exports.useSpinner = usespinner_1.default;
+//# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":";;;AAAA,2CAAsC;AAGlC,qBAHG,oBAAU,CAGH"}

package/dist/hooks/usespinner.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+interface Options {
+    delay: number;
+}
+interface SpinnerProps {
+    children: React.ReactNode;
+}
+declare const useSpinner: (globalOptions?: Options) => {
+    start: (name: string, options?: Options) => void;
+    end: (name: string) => void;
+    clear: () => void;
+    busy: () => boolean;
+    fetch: (...params: any) => Promise<unknown>;
+    SpinnerContainer: ({ children }: SpinnerProps) => JSX.Element | null;
+};
+export default useSpinner;

package/dist/hooks/usespinner.js

@@ -0,0 +1,97 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var useSpinner = function (globalOptions) {
+    // store a list of actions
+    var _a = (0, react_1.useState)([]), actions = _a[0], setActions = _a[1];
+    // set a timer that every second checks if any actions can be closed
+    (0, react_1.useEffect)(function () {
+        var timer = setTimeout(function () {
+            if (actions) {
+                setActions(function (prev) { return prev.filter(function (item) { return item.endtime > Date.now(); }); });
+            }
+        }, 1000);
+        return function () { return clearTimeout(timer); };
+    }, [actions]);
+    // Allow the start of a new Action to be tracked
+    var start = function (name, options) {
+        var delay = (options === null || options === void 0 ? void 0 : options.delay) || (globalOptions === null || globalOptions === void 0 ? void 0 : globalOptions.delay) || 10000;
+        var currentAction = { name: name, endtime: Date.now() + delay };
+        setActions(function (prev) { return __spreadArray(__spreadArray([], prev, true), [currentAction], false); });
+    };
+    // remove any action that has the selected name
+    var end = function (name) {
+        if (actions) {
+            setActions(function (prev) { return prev.filter(function (item) { return item.name !== name; }); });
+        }
+    };
+    // clear all current actions
+    var clear = function () {
+        setActions([]);
+    };
+    var busy = function () {
+        return actions && actions.length > 0;
+    };
+    var createUUID = function () {
+        // https://www.arungudelli.com/tutorial/javascript/how-to-create-uuid-guid-in-javascript-with-examples/
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+            var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
+            return v.toString(16);
+        });
+    };
+    var fetch = function () {
+        var params = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            params[_i] = arguments[_i];
+        }
+        var id = createUUID();
+        start(id);
+        return new Promise(function (resolve, reject) {
+            var config = params[1] || {};
+            fetch(params[0], config)
+                .then(function (res) {
+                resolve(res);
+            })
+                .catch(function (err) {
+                reject(err);
+            })
+                .finally(function () {
+                end(id);
+            });
+        });
+    };
+    // JSX component used to wrap spinner of choice
+    var SpinnerContainer = function (_a) {
+        var children = _a.children;
+        // If no active Actions then dont display anything
+        if (actions && actions.length === 0) {
+            return null;
+        }
+        return (0, jsx_runtime_1.jsx)("div", __assign({ className: "useSpinner" }, { children: children }));
+    };
+    // return hook values
+    return { start: start, end: end, clear: clear, busy: busy, fetch: fetch, SpinnerContainer: SpinnerContainer };
+};
+exports.default = useSpinner;
+//# sourceMappingURL=usespinner.js.map

package/dist/hooks/usespinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usespinner.js","sourceRoot":"","sources":["../../src/hooks/usespinner.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-usespinner",
-  "version": "1.0.5",
-  "description": "track actions in progress to know if a spinner should be display. Actions expire within 10 seconds if not expired in code",
+  "version": "1.0.6",
+  "description": "Track actions in progress to know if a spinner should be display. Actions expire within 10 seconds if not expired in code",
   "private": false,
   "license": "MIT",
   "main": "dist/index.ts",
@@ -52,7 +52,7 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "clean": "rimraf dist",
-    "compile": "npm run clean && cross-env NODE_ENV=production babel src/hooks --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,stories.js,__snapshots__"
+    "compile": "npm run clean && cross-env NODE_ENV=production npx tsc && cross-env copy ./README.md ./dist/README.md"
   },
   "eslintConfig": {
     "extends": [

package/dist/usespinner.tsx

@@ -1,89 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-
-interface Options {
-  delay: number;
-}
-interface SpinnerProps {
-  children: React.ReactNode;
-}
-type Action = {
-  name: string;
-  endtime: number;
-};
-
-const useSpinner = (globalOptions?: Options) => {
-  // store a list of actions
-  const [actions, setActions] = useState<Action[]>([]);
-
-  // set a timer that every second checks if any actions can be closed
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      if (actions) {
-        setActions((prev) => prev.filter((item) => item.endtime > Date.now()));
-      }
-    }, 1000);
-    return () => clearTimeout(timer);
-  }, [actions]);
-
-  // Allow the start of a new Action to be tracked
-  const start = (name: string, options?: Options) => {
-    const delay: number = options?.delay || globalOptions?.delay || 10000;
-    const currentAction: Action = { name: name, endtime: Date.now() + delay };
-    setActions((prev) => [...prev, currentAction]);
-  };
-
-  // remove any action that has the selected name
-  const end = (name: string) => {
-    if (actions) {
-      setActions((prev) => prev.filter((item) => item.name !== name));
-    }
-  };
-  // clear all current actions
-  const clear = () => {
-    setActions([]);
-  };
-
-  const busy = () => {
-      return actions && actions.length > 0
-  }
-
-  const createUUID = () => {
-    // https://www.arungudelli.com/tutorial/javascript/how-to-create-uuid-guid-in-javascript-with-examples/
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-      var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
-      return v.toString(16);
-    });
-  }
-  const fetch = (...params: any) => {
-    const id = createUUID();
-    start(id)
-    return new Promise((resolve, reject) => {
-      let config = params[1] || {};
-      fetch(params[0], config)
-        .then((res) => {
-          resolve(res);
-        })
-        .catch((err) => {
-          reject(err);
-        })
-        .finally(()=>{
-          end(id);
-        });
-    });
-  };
-
-  // JSX component used to wrap spinner of choice
-  const SpinnerContainer = ({ children }: SpinnerProps) => {
-    // If no active Actions then dont display anything
-    if (actions && actions.length === 0) {
-      return null;
-    }
-
-    return <div className="useSpinner">{children}</div>;
-  };
-
-  // return hook values
-  return { start, end, clear, busy, fetch, SpinnerContainer };
-};
-
-export default useSpinner;