@koine/react 2.0.0-beta.82 → 2.0.0-beta.84

package/useSpinDelay.cjs.js

@@ -4,7 +4,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
 
-let useSpinDelay=(u,c=500,i=200)=>{let[n,o]=react.useState(0),l=react.useRef();return react.useEffect(()=>{u&&0===n&&(clearTimeout(l.current),l.current=setTimeout(()=>{if(!u)return o(0);l.current=setTimeout(()=>{o(3);},i),o(2);},c),o(1)),u||2===n||(clearTimeout(l.current),o(0));},[u,n,c,i]),react.useEffect(()=>()=>clearTimeout(l.current),[]),2===n||3===n};
+/**
+ * Wraps your booleans only returning true after the `delay`, and for a minimum
+ * time of `minDuration`. This way you're sure that you don't show unnecessary
+ * or very short living spinners.
+ *
+ * @borrows [smeijer/spin-delay](https://github.com/smeijer/spin-delay)
+ *
+ * - Smaller footprint and options object as argument
+ *
+ * @param delay [500]
+ * @param minDuration [200]
+ */let useSpinDelay=(u,c=500,i=200)=>{let[n,o]=react.useState(0),l=react.useRef();return react.useEffect(()=>{u&&0===n&&(clearTimeout(l.current),l.current=setTimeout(()=>{if(!u)return o(0);l.current=setTimeout(()=>{o(3);},i),o(2);},c),o(1)),u||2===n||(clearTimeout(l.current),o(0));},[u,n,c,i]),react.useEffect(()=>()=>clearTimeout(l.current),[]),2===n||3===n};
 
 exports["default"] = useSpinDelay;
 exports.useSpinDelay = useSpinDelay;

package/useSpinDelay.esm.js

@@ -1,5 +1,16 @@
 import { useState, useRef, useEffect } from 'react';
 
-let useSpinDelay=(u,c=500,i=200)=>{let[n,o]=useState(0),l=useRef();return useEffect(()=>{u&&0===n&&(clearTimeout(l.current),l.current=setTimeout(()=>{if(!u)return o(0);l.current=setTimeout(()=>{o(3);},i),o(2);},c),o(1)),u||2===n||(clearTimeout(l.current),o(0));},[u,n,c,i]),useEffect(()=>()=>clearTimeout(l.current),[]),2===n||3===n};
+/**
+ * Wraps your booleans only returning true after the `delay`, and for a minimum
+ * time of `minDuration`. This way you're sure that you don't show unnecessary
+ * or very short living spinners.
+ *
+ * @borrows [smeijer/spin-delay](https://github.com/smeijer/spin-delay)
+ *
+ * - Smaller footprint and options object as argument
+ *
+ * @param delay [500]
+ * @param minDuration [200]
+ */let useSpinDelay=(u,c=500,i=200)=>{let[n,o]=useState(0),l=useRef();return useEffect(()=>{u&&0===n&&(clearTimeout(l.current),l.current=setTimeout(()=>{if(!u)return o(0);l.current=setTimeout(()=>{o(3);},i),o(2);},c),o(1)),u||2===n||(clearTimeout(l.current),o(0));},[u,n,c,i]),useEffect(()=>()=>clearTimeout(l.current),[]),2===n||3===n};
 
 export { useSpinDelay as default, useSpinDelay };

package/useTraceUpdate.cjs.js

@@ -4,7 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
 
-let useTraceUpdate=r=>{let c=react.useRef(r);react.useEffect(()=>{let e=Object.entries(r).reduce((e,[t,r])=>(c.current[t]!==r&&(e[t]=[c.current[t],r]),e),{});Object.keys(e).length>0&&console.info("[@koine/react:useTraceUpdate] changed props:",e),c.current=r;});};
+/**
+ * @see https://stackoverflow.com/a/51082563/9122820
+ */let useTraceUpdate=r=>{let c=react.useRef(r);react.useEffect(()=>{let e=Object.entries(r).reduce((e,[t,r])=>(c.current[t]!==r&&// @ts-expect-error Does not matter here...
+    (e[t]=[c.current[t],r]),e),{});Object.keys(e).length>0&&console.info("[@koine/react:useTraceUpdate] changed props:",e),c.current=r;});};
 
 exports["default"] = useTraceUpdate;
 exports.useTraceUpdate = useTraceUpdate;

package/useTraceUpdate.esm.js

@@ -1,5 +1,8 @@
 import { useRef, useEffect } from 'react';
 
-let useTraceUpdate=r=>{let c=useRef(r);useEffect(()=>{let e=Object.entries(r).reduce((e,[t,r])=>(c.current[t]!==r&&(e[t]=[c.current[t],r]),e),{});Object.keys(e).length>0&&console.info("[@koine/react:useTraceUpdate] changed props:",e),c.current=r;});};
+/**
+ * @see https://stackoverflow.com/a/51082563/9122820
+ */let useTraceUpdate=r=>{let c=useRef(r);useEffect(()=>{let e=Object.entries(r).reduce((e,[t,r])=>(c.current[t]!==r&&// @ts-expect-error Does not matter here...
+    (e[t]=[c.current[t],r]),e),{});Object.keys(e).length>0&&console.info("[@koine/react:useTraceUpdate] changed props:",e),c.current=r;});};
 
 export { useTraceUpdate as default, useTraceUpdate };

package/useUpdateEffect.cjs.js

@@ -5,7 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 var useFirstMountState = require('./useFirstMountState.cjs.js');
 
-let useUpdateEffect=(r,f)=>{let o=useFirstMountState.useFirstMountState();react.useEffect(()=>{if(!o)return r()},f);};
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useUpdateEffect.ts)
+ */let useUpdateEffect=(r,f)=>{let o=useFirstMountState.useFirstMountState();react.useEffect(()=>{if(!o)return r()},// eslint-disable-next-line react-hooks/exhaustive-deps
+f);};
 
 exports["default"] = useUpdateEffect;
 exports.useUpdateEffect = useUpdateEffect;

package/useUpdateEffect.esm.js

@@ -1,6 +1,9 @@
 import { useEffect } from 'react';
 import { useFirstMountState } from './useFirstMountState.esm.js';
 
-let useUpdateEffect=(r,f)=>{let o=useFirstMountState();useEffect(()=>{if(!o)return r()},f);};
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useUpdateEffect.ts)
+ */let useUpdateEffect=(r,f)=>{let o=useFirstMountState();useEffect(()=>{if(!o)return r()},// eslint-disable-next-line react-hooks/exhaustive-deps
+f);};
 
 export { useUpdateEffect as default, useUpdateEffect };

package/useWindowSize.cjs.js

@@ -5,7 +5,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 var dom = require('@koine/dom');
 
-let useWindowSize=(o,n)=>{let[d,w]=react.useState(0),[m,u]=react.useState(0);return react.useEffect(()=>{let e=()=>{w(window.innerWidth),u(window.innerHeight);},i=o?dom.listenResizeDebounced(0,e,o,n):dom.listenResize(e);return e(),i},[o,n]),[d,m]};
+/**
+ * # Use `window` size
+ *
+ * @param args Optionally pass {@link debounce} arguments (`wait` and `immediate`)
+ *
+ * @returns An array with:
+ * 1) _width_: using `window.innerWidth`
+ * 2) _height_: using `window.innerHeight`
+ */let useWindowSize=(o,n)=>{let[d,w]=react.useState(0),[m,u]=react.useState(0);return react.useEffect(()=>{let e=()=>{w(window.innerWidth),u(window.innerHeight);},i=o?dom.listenResizeDebounced(0,e,o,n):dom.listenResize(e);return e(),i},[o,n]),[d,m]};
 
 exports["default"] = useWindowSize;
 exports.useWindowSize = useWindowSize;

package/useWindowSize.esm.js

@@ -1,6 +1,14 @@
 import { useState, useEffect } from 'react';
 import { listenResizeDebounced, listenResize } from '@koine/dom';
 
-let useWindowSize=(o,n)=>{let[d,w]=useState(0),[m,u]=useState(0);return useEffect(()=>{let e=()=>{w(window.innerWidth),u(window.innerHeight);},i=o?listenResizeDebounced(0,e,o,n):listenResize(e);return e(),i},[o,n]),[d,m]};
+/**
+ * # Use `window` size
+ *
+ * @param args Optionally pass {@link debounce} arguments (`wait` and `immediate`)
+ *
+ * @returns An array with:
+ * 1) _width_: using `window.innerWidth`
+ * 2) _height_: using `window.innerHeight`
+ */let useWindowSize=(o,n)=>{let[d,w]=useState(0),[m,u]=useState(0);return useEffect(()=>{let e=()=>{w(window.innerWidth),u(window.innerHeight);},i=o?listenResizeDebounced(0,e,o,n):listenResize(e);return e(),i},[o,n]),[d,m]};
 
 export { useWindowSize as default, useWindowSize };