react-atom-trigger 1.0.8 → 1.0.10

package/README.md

@@ -63,7 +63,7 @@ For someone who wants everything out-of-the-box, `useWindowDimensions`, `useWind
 ## Examples
 It is sometimes better to tweak and see for yourself: [CodeSandbox examples](https://codesandbox.io/examples/package/react-atom-trigger).
 
- [**More detailed react-atom-trigger overview**](https://visiofutura.com/solving-scroll-into-view-problem-in-react-my-way-a8056a1bdc11) is available as Medium story.
+ [**More detailed react-atom-trigger overview with examples**](https://visiofutura.com/solving-scroll-into-view-problem-in-react-my-way-a8056a1bdc11)
 
 
 

package/lib/index.es.js

@@ -1 +1 @@
-import e from"react";var t=function(){return t=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},t.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var r=function(r){var n=r.scrollEvent,o=r.callback,i=r.getDebugInfo,u=r.triggerOnce,c=void 0!==u&&u,l=r.className,s=r.behavior,f=void 0===s?"default":s,a=r.dimensions,v=r.offset,d=void 0===v?[0,0,0,0]:v,p=e.useRef(null),w=e.useState(),g=w[0],m=w[1],E=e.useRef(),V=e.useState({leftViewport:0,enteredViewport:0}),h=V[0],L=V[1];return e.useLayoutEffect((function(){if(p.current&&a){var e=p.current.getBoundingClientRect(),t=d[0],r=d[1],n=d[2],o=d[3];e.top>t&&e.bottom<a.height-n&&e.left>o&&e.right<a.width-r?m("inViewport"):e.top>a.height-n?m("bottom"):m("top")}}),[p,n,a,d]),e.useLayoutEffect((function(){if(void 0===E.current&&void 0!==g&&(E.current=g),"inViewport"===g&&("bottom"===E.current||"top"===E.current)){if("enter"===f&&(!c||c&&h.enteredViewport)||"default"===f&&(!c||c&&(h.enteredViewport<1||h.leftViewport<1))){o&&o();var e=t(t({},h),{enteredViewport:h.enteredViewport+1});i&&i({timesTriggered:e,trigger:"entered"}),L(e)}E.current=g}if(("top"===g||"bottom"===g)&&"inViewport"===E.current&&(E.current=g,"leave"===f&&(!c||c&&0===h.leftViewport)||"default"===f&&(!c||c&&(h.leftViewport<1||h.enteredViewport<1)))){o&&o();e=t(t({},h),{leftViewport:h.leftViewport+1});i&&i({timesTriggered:e,trigger:"left"}),L(e)}}),[g,o,c,f,i]),e.createElement("div",{ref:p,style:{display:"table"},className:l})};function n(e,t){"development"===process.env.NODE_ENV&&(t=t?"background: ".concat(t,"; color: #fff"):"background:  #007700; color: #fff",console.group("%c log: "+e,t),console.groupEnd())}function o(){return{scrollX:window.scrollX,scrollY:window.scrollY}}function i(){return{width:window.innerWidth,height:window.innerHeight}}function u(t){var r=e.useState(null),n=r[0],o=r[1],u=e.useRef(null),c=e.useRef(!1),l=(null==t?void 0:t.eventListenerTimeoutMs)||15;return e.useEffect((function(){var e=i();function r(){u.current&&clearTimeout(u.current),u.current=setTimeout((function(){return o(i())}),l)}return o(e),window.addEventListener("resize",r,{passive:null==t?void 0:t.passiveEventListener}),c.current=!0,function(){c&&window.removeEventListener("resize",r)}}),[]),n}function c(t){var r=t.containerRef,n=t.options,i=e.useState(o()),u=i[0],c=i[1],l=e.useRef(null),s=e.useRef(!1);return e.useEffect((function(){var e=function(e){l.current&&clearTimeout(l.current),l.current=setTimeout((function(){c({scrollX:e.target.scrollLeft,scrollY:e.target.scrollTop})}),(null==n?void 0:n.eventListenerTimeoutMs)||15)},t=null==r?void 0:r.current;return t&&(t&&!1===s.current&&t.addEventListener("scroll",e,{passive:null==n?void 0:n.passiveEventListener}),s.current=!0),function(){s&&t&&t.removeEventListener("scroll",e)}}),[r]),u}function l(t){var r=e.useState(o()),n=r[0],i=r[1],u=e.useRef(null),c=e.useRef(!1);return e.useEffect((function(){var e=function(){u.current&&clearTimeout(u.current),u.current=setTimeout((function(){var e=o(),t=e.scrollX,r=e.scrollY;i({scrollX:t,scrollY:r})}),(null==t?void 0:t.eventListenerTimeoutMs)||20)};return window.addEventListener("scroll",e,{passive:null==t?void 0:t.passiveEventListener}),c.current=!0,function(){c&&window.removeEventListener("scroll",e)}}),[]),n}export{r as AtomTrigger,n as log,c as useContainerScroll,u as useWindowDimensions,l as useWindowScroll};
+import e from"react";const t=({scrollEvent:t,callback:r,getDebugInfo:n,triggerOnce:o=!1,className:s,behavior:i="default",dimensions:c,offset:u=[0,0,0,0]})=>{const l=e.useRef(null),[f,a]=e.useState(),d=e.useRef(),[p,v]=e.useState({leftViewport:0,enteredViewport:0});return e.useLayoutEffect((()=>{if(l.current&&c){const e=l.current.getBoundingClientRect(),[t,r,n,o]=u;e.top>t&&e.bottom<c.height-n&&e.left>o&&e.right<c.width-r?a("inViewport"):e.top>c.height-n?a("bottom"):a("top")}}),[l,t,c,u]),e.useLayoutEffect((()=>{if(void 0===d.current&&void 0!==f&&(d.current=f),"inViewport"===f&&("bottom"===d.current||"top"===d.current)){if("enter"===i&&(!o||o&&p.enteredViewport)||"default"===i&&(!o||o&&(p.enteredViewport<1||p.leftViewport<1))){r&&r();const e={...p,enteredViewport:p.enteredViewport+1};n&&n({timesTriggered:e,trigger:"entered"}),v(e)}d.current=f}if(("top"===f||"bottom"===f)&&"inViewport"===d.current&&(d.current=f,"leave"===i&&(!o||o&&0===p.leftViewport)||"default"===i&&(!o||o&&(p.leftViewport<1||p.enteredViewport<1)))){r&&r();const e={...p,leftViewport:p.leftViewport+1};n&&n({timesTriggered:e,trigger:"left"}),v(e)}}),[f,r,o,i,n]),e.createElement("div",{ref:l,style:{display:"table"},className:s})};function r(e,t){"development"===process.env.NODE_ENV&&(t=t?`background: ${t}; color: #fff`:"background:  #007700; color: #fff",console.group("%c log: "+e,t),console.groupEnd())}function n(){const{scrollX:e,scrollY:t}=window;return{scrollX:e,scrollY:t}}function o(){const{innerWidth:e,innerHeight:t}=window;return{width:e,height:t}}function s(t){const[r,n]=e.useState(null),s=e.useRef(null),i=e.useRef(!1),c=t?.eventListenerTimeoutMs||15;return e.useEffect((()=>{const e=o();function r(){s.current&&clearTimeout(s.current),s.current=setTimeout((()=>n(o())),c)}return n(e),window.addEventListener("resize",r,{passive:t?.passiveEventListener}),i.current=!0,()=>{i&&window.removeEventListener("resize",r)}}),[]),r}function i({containerRef:t,options:r}){const[o,s]=e.useState(n()),i=e.useRef(null),c=e.useRef(!1);return e.useEffect((()=>{const e=e=>{i.current&&clearTimeout(i.current),i.current=setTimeout((()=>{s({scrollX:e.target.scrollLeft,scrollY:e.target.scrollTop})}),r?.eventListenerTimeoutMs||15)},n=t?.current;return n&&(n&&!1===c.current&&n.addEventListener("scroll",e,{passive:r?.passiveEventListener}),c.current=!0),()=>{c&&n&&n.removeEventListener("scroll",e)}}),[t]),o}function c(t){const[r,o]=e.useState(n()),s=e.useRef(null),i=e.useRef(!1);return e.useEffect((()=>{const e=()=>{s.current&&clearTimeout(s.current),s.current=setTimeout((()=>{const{scrollX:e,scrollY:t}=n();o({scrollX:e,scrollY:t})}),t?.eventListenerTimeoutMs||20)};return window.addEventListener("scroll",e,{passive:t?.passiveEventListener}),i.current=!0,()=>{i&&window.removeEventListener("scroll",e)}}),[]),r}export{t as AtomTrigger,r as log,i as useContainerScroll,s as useWindowDimensions,c as useWindowScroll};

package/lib/index.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["react-atom-trigger"]={},e.React)}(this,(function(e,t){"use strict";var r=function(){return r=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},r.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;function n(){return{scrollX:window.scrollX,scrollY:window.scrollY}}function o(){return{width:window.innerWidth,height:window.innerHeight}}e.AtomTrigger=function(e){var n=e.scrollEvent,o=e.callback,i=e.getDebugInfo,u=e.triggerOnce,s=void 0!==u&&u,c=e.className,l=e.behavior,f=void 0===l?"default":l,a=e.dimensions,d=e.offset,v=void 0===d?[0,0,0,0]:d,p=t.useRef(null),w=t.useState(),g=w[0],m=w[1],E=t.useRef(),h=t.useState({leftViewport:0,enteredViewport:0}),V=h[0],b=h[1];return t.useLayoutEffect((function(){if(p.current&&a){var e=p.current.getBoundingClientRect(),t=v[0],r=v[1],n=v[2],o=v[3];e.top>t&&e.bottom<a.height-n&&e.left>o&&e.right<a.width-r?m("inViewport"):e.top>a.height-n?m("bottom"):m("top")}}),[p,n,a,v]),t.useLayoutEffect((function(){if(void 0===E.current&&void 0!==g&&(E.current=g),"inViewport"===g&&("bottom"===E.current||"top"===E.current)){if("enter"===f&&(!s||s&&V.enteredViewport)||"default"===f&&(!s||s&&(V.enteredViewport<1||V.leftViewport<1))){o&&o();var e=r(r({},V),{enteredViewport:V.enteredViewport+1});i&&i({timesTriggered:e,trigger:"entered"}),b(e)}E.current=g}if(("top"===g||"bottom"===g)&&"inViewport"===E.current&&(E.current=g,"leave"===f&&(!s||s&&0===V.leftViewport)||"default"===f&&(!s||s&&(V.leftViewport<1||V.enteredViewport<1)))){o&&o();e=r(r({},V),{leftViewport:V.leftViewport+1});i&&i({timesTriggered:e,trigger:"left"}),b(e)}}),[g,o,s,f,i]),t.createElement("div",{ref:p,style:{display:"table"},className:c})},e.log=function(e,t){"development"===process.env.NODE_ENV&&(t=t?"background: ".concat(t,"; color: #fff"):"background:  #007700; color: #fff",console.group("%c log: "+e,t),console.groupEnd())},e.useContainerScroll=function(e){var r=e.containerRef,o=e.options,i=t.useState(n()),u=i[0],s=i[1],c=t.useRef(null),l=t.useRef(!1);return t.useEffect((function(){var e=function(e){c.current&&clearTimeout(c.current),c.current=setTimeout((function(){s({scrollX:e.target.scrollLeft,scrollY:e.target.scrollTop})}),(null==o?void 0:o.eventListenerTimeoutMs)||15)},t=null==r?void 0:r.current;return t&&(t&&!1===l.current&&t.addEventListener("scroll",e,{passive:null==o?void 0:o.passiveEventListener}),l.current=!0),function(){l&&t&&t.removeEventListener("scroll",e)}}),[r]),u},e.useWindowDimensions=function(e){var r=t.useState(null),n=r[0],i=r[1],u=t.useRef(null),s=t.useRef(!1),c=(null==e?void 0:e.eventListenerTimeoutMs)||15;return t.useEffect((function(){var t=o();function r(){u.current&&clearTimeout(u.current),u.current=setTimeout((function(){return i(o())}),c)}return i(t),window.addEventListener("resize",r,{passive:null==e?void 0:e.passiveEventListener}),s.current=!0,function(){s&&window.removeEventListener("resize",r)}}),[]),n},e.useWindowScroll=function(e){var r=t.useState(n()),o=r[0],i=r[1],u=t.useRef(null),s=t.useRef(!1);return t.useEffect((function(){var t=function(){u.current&&clearTimeout(u.current),u.current=setTimeout((function(){var e=n(),t=e.scrollX,r=e.scrollY;i({scrollX:t,scrollY:r})}),(null==e?void 0:e.eventListenerTimeoutMs)||20)};return window.addEventListener("scroll",t,{passive:null==e?void 0:e.passiveEventListener}),s.current=!0,function(){s&&window.removeEventListener("scroll",t)}}),[]),o}}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["react-atom-trigger"]={},e.React)}(this,(function(e,t){"use strict";function r(){const{scrollX:e,scrollY:t}=window;return{scrollX:e,scrollY:t}}function n(){const{innerWidth:e,innerHeight:t}=window;return{width:e,height:t}}e.AtomTrigger=({scrollEvent:e,callback:r,getDebugInfo:n,triggerOnce:o=!1,className:i,behavior:s="default",dimensions:c,offset:u=[0,0,0,0]})=>{const l=t.useRef(null),[f,d]=t.useState(),a=t.useRef(),[p,g]=t.useState({leftViewport:0,enteredViewport:0});return t.useLayoutEffect((()=>{if(l.current&&c){const e=l.current.getBoundingClientRect(),[t,r,n,o]=u;e.top>t&&e.bottom<c.height-n&&e.left>o&&e.right<c.width-r?d("inViewport"):e.top>c.height-n?d("bottom"):d("top")}}),[l,e,c,u]),t.useLayoutEffect((()=>{if(void 0===a.current&&void 0!==f&&(a.current=f),"inViewport"===f&&("bottom"===a.current||"top"===a.current)){if("enter"===s&&(!o||o&&p.enteredViewport)||"default"===s&&(!o||o&&(p.enteredViewport<1||p.leftViewport<1))){r&&r();const e={...p,enteredViewport:p.enteredViewport+1};n&&n({timesTriggered:e,trigger:"entered"}),g(e)}a.current=f}if(("top"===f||"bottom"===f)&&"inViewport"===a.current&&(a.current=f,"leave"===s&&(!o||o&&0===p.leftViewport)||"default"===s&&(!o||o&&(p.leftViewport<1||p.enteredViewport<1)))){r&&r();const e={...p,leftViewport:p.leftViewport+1};n&&n({timesTriggered:e,trigger:"left"}),g(e)}}),[f,r,o,s,n]),t.createElement("div",{ref:l,style:{display:"table"},className:i})},e.log=function(e,t){"development"===process.env.NODE_ENV&&(t=t?`background: ${t}; color: #fff`:"background:  #007700; color: #fff",console.group("%c log: "+e,t),console.groupEnd())},e.useContainerScroll=function({containerRef:e,options:n}){const[o,i]=t.useState(r()),s=t.useRef(null),c=t.useRef(!1);return t.useEffect((()=>{const t=e=>{s.current&&clearTimeout(s.current),s.current=setTimeout((()=>{i({scrollX:e.target.scrollLeft,scrollY:e.target.scrollTop})}),n?.eventListenerTimeoutMs||15)},r=e?.current;return r&&(r&&!1===c.current&&r.addEventListener("scroll",t,{passive:n?.passiveEventListener}),c.current=!0),()=>{c&&r&&r.removeEventListener("scroll",t)}}),[e]),o},e.useWindowDimensions=function(e){const[r,o]=t.useState(null),i=t.useRef(null),s=t.useRef(!1),c=e?.eventListenerTimeoutMs||15;return t.useEffect((()=>{const t=n();function r(){i.current&&clearTimeout(i.current),i.current=setTimeout((()=>o(n())),c)}return o(t),window.addEventListener("resize",r,{passive:e?.passiveEventListener}),s.current=!0,()=>{s&&window.removeEventListener("resize",r)}}),[]),r},e.useWindowScroll=function(e){const[n,o]=t.useState(r()),i=t.useRef(null),s=t.useRef(!1);return t.useEffect((()=>{const t=()=>{i.current&&clearTimeout(i.current),i.current=setTimeout((()=>{const{scrollX:e,scrollY:t}=r();o({scrollX:e,scrollY:t})}),e?.eventListenerTimeoutMs||20)};return window.addEventListener("scroll",t,{passive:e?.passiveEventListener}),s.current=!0,()=>{s&&window.removeEventListener("scroll",t)}}),[]),n}}));

package/package.json

@@ -5,7 +5,7 @@
   "main": "lib/index.js",
   "module": "lib/index.es.js",
   "typings": "lib/index.d.ts",
-  "version": "1.0.8",  
+  "version": "1.0.10",
   "license": "MIT",
   "author": "innrVoice <innrvoice@icloud.com>",
   "repository": {
@@ -22,8 +22,8 @@
     "react": "^18.2.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.2",
-    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-node-resolve": "^15.3.0",
     "@types/node": "^16.11.9",
     "@types/react": "17.0.1",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
@@ -37,11 +37,12 @@
     "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
     "prettier": "^2.4.1",
     "rimraf": "^3.0.2",
-    "rollup": "^3.26.2",
+    "rollup": "^4.24.0",
+    "rollup-plugin-node-externals": "^7.1.3",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.35.0",
-    "tslib": "^2.6.0",
-    "typescript": "^5.1.6"
+    "rollup-plugin-typescript2": "^0.36.0",
+    "tslib": "^2.8.0",
+    "typescript": "^5.6.3"
   },
   "keywords": [
     "react",
@@ -54,6 +55,6 @@
     "lib"
   ],
   "volta": {
-    "node": "18.16.1"
+    "node": "18.20.4"
   }
 }