react-compare-slider - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

dist/react-compare-slider.cjs.development.js

@@ -131,6 +131,5 @@ 'use strict';
 /**
- * Bind resize observer to ref.
- * @param ref       - Ref to bind to
- * @param handler   - Callback for handling entry's bounding rect
- * @see https://tobbelindstrom.com/blog/resize-observer-hook/ https://codesandbox.io/s/zw8kylol8m
+ * Bind resize observer callback to element.
+ * @param ref       - Element to bind to.
+ * @param handler   - Callback for handling entry's bounding rect.
  */
@@ -141,17 +140,18 @@
     var entry = _ref2[0];
-    handler(entry.contentRect);
+    return handler(entry.contentRect);
   }));
-  var disconnect = React.useCallback(function () {
-    var current = observer.current;
-    current.disconnect();
-  }, []);
   var observe = React.useCallback(function () {
     ref.current && observer.current.observe(ref.current);
-  }, [ref]);
+  }, [ref]); // Bind/rebind observer when `handler` changes.
+
   useIsomorphicLayoutEffect(function () {
+    observer.current = new resizeObserver.ResizeObserver(function (_ref3) {
+      var entry = _ref3[0];
+      return handler(entry.contentRect);
+    });
     observe();
     return function () {
-      return disconnect();
+      return observer.current.disconnect();
     };
-  }, [disconnect, observe]);
+  }, [handler, observe]);
 };
@@ -158,0 +158,0 @@

dist/react-compare-slider.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,r=require("resize-observer");function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function i(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t.indexOf(n=i[r])>=0||(o[n]=e[n]);return o}var a=!("undefined"==typeof window||!window.document||!window.document.createElement),s=function(){return!a||"undefined"!=typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("object-fit","cover")},c=function(e){var t=void 0===e?{}:e,n=t.objectFit,r=t.objectPosition;return o({display:"block",width:"100%",height:"100%",maxWidth:"100%",objectFit:void 0===n?"cover":n,objectPosition:void 0===r?"center":r},i(t,["objectFit","objectPosition"]))},u=function(e,n,r,o){var i=t.useRef();t.useEffect((function(){i.current=n}),[n]),t.useEffect((function(){if(r&&r.addEventListener){var t=function(e){return i.current&&i.current(e)};return r.addEventListener(e,t,o),function(){r.removeEventListener(e,t,o)}}}),[e,r,o])},d=a?t.useLayoutEffect:t.useEffect,l=t.forwardRef((function(e,t){var r=e.portrait;return n.createElement("div",{style:{position:"absolute",top:0,width:"100%",height:"100%",pointerEvents:"none"},"data-rcs":"handle-container",ref:t},n.createElement("div",{style:{position:"absolute",width:r?"100%":void 0,height:r?void 0:"100%",transform:r?"translateY(-50%)":"translateX(-50%)",pointerEvents:"all"}},e.children))}));l.displayName="ReactCompareSliderHandleContainer";var f=function(e){var t=e.portrait,r=e.style,a=i(e,["portrait","style"]),s=o({height:t?4:"100%",width:t?"100%":4,backgroundColor:"#fff",boxShadow:"0 0 .2rem #000",cursor:t?"ns-resize":"ew-resize"},r);return n.createElement("div",Object.assign({},a,{style:s,"data-rcs":"handle-inner"}))},p=t.forwardRef((function(e,t){return n.createElement("div",Object.assign({},e,{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",willChange:"clip",userSelect:"none",KhtmlUserSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none"},"data-rcs":"clip-item",ref:t}))}));p.displayName="ReactCompareSliderClipContainer",exports.ReactCompareSlider=function(e){var a,s,c=e.handle,v=e.itemOne,h=e.itemTwo,g=e.onlyHandleDraggable,m=void 0!==g&&g,b=e.onPositionChange,w=e.portrait,E=void 0!==w&&w,y=e.position,C=void 0===y?50:y,S=e.boundsPadding,x=void 0===S?0:S,k=e.style,R=i(e,["handle","itemOne","itemTwo","onlyHandleDraggable","onPositionChange","portrait","position","boundsPadding","style"]),O=t.useRef(null),j=t.useRef(null),P=t.useRef(null),L=t.useRef(C),z=(s=t.useRef(a=C),t.useEffect((function(){s.current=a})),s.current),M=t.useState(!1),U=M[0],X=M[1],Y=t.useRef(!1),F=t.useState(),N=F[0],H=F[1];t.useEffect((function(){H(m?P.current:O.current)}),[m]);var D=t.useCallback((function(e){var t=e.x,n=e.y,r=e.isOffset,o=e.portrait,i=e.boundsPadding,a=O.current.getBoundingClientRect(),s=a.width,c=a.height;if(0!==s&&0!==c){var u=Math.min(Math.max(o?r?n-a.top-window.pageYOffset:n:r?t-a.left-window.pageXOffset:t,0),o?c:s),d=u/(o?c:s)*100;if(d!==L.current||0!==L.current&&100!==L.current||!(o?0===u||u===c:0===u||u===s)){L.current=d;var l=Math.min(Math.max(u,0+i),(o?c:s)-i);j.current.style.clip=o?"rect(auto,auto,"+l+"px,auto)":"rect(auto,"+l+"px,auto,auto)",P.current.style.transform=o?"translate3d(0,"+l+"px,0)":"translate3d("+l+"px,0,0)",b&&b(L.current)}}}),[b]);t.useEffect((function(){var e=O.current.getBoundingClientRect(),t=C===z?L.current:C;D({portrait:E,boundsPadding:x,x:e.width/100*t,y:e.height/100*t})}),[E,C,z,x,D]);var I=t.useCallback((function(e){e.preventDefault(),D({portrait:E,boundsPadding:x,isOffset:!0,x:e instanceof MouseEvent?e.pageX:e.touches[0].pageX,y:e instanceof MouseEvent?e.pageY:e.touches[0].pageY}),X(!0)}),[E,x,D]),W=t.useCallback((function(e){U&&D({portrait:E,boundsPadding:x,isOffset:!0,x:e instanceof MouseEvent?e.pageX:e.touches[0].pageX,y:e instanceof MouseEvent?e.pageY:e.touches[0].pageY})}),[E,U,x,D]),q=t.useCallback((function(){X(!1)}),[]),B=t.useCallback((function(e){D({portrait:E,boundsPadding:x,x:e.width/100*L.current,y:e.height/100*L.current})}),[E,x,D]);t.useEffect((function(){return U&&!Y.current&&(window.addEventListener("mousemove",W,{passive:!0}),window.addEventListener("mouseup",q,{passive:!0}),window.addEventListener("touchmove",W,{passive:!0}),window.addEventListener("touchend",q,{passive:!0}),Y.current=!0),function(){Y.current&&(window.removeEventListener("mousemove",W),window.removeEventListener("mouseup",q),window.removeEventListener("touchmove",W),window.removeEventListener("touchend",q),Y.current=!1)}}),[W,q,U]),function(e,n){var o=t.useRef(new r.ResizeObserver((function(e){n(e[0].contentRect)}))),i=t.useCallback((function(){o.current.disconnect()}),[]),a=t.useCallback((function(){e.current&&o.current.observe(e.current)}),[e]);d((function(){return a(),function(){return i()}}),[i,a])}(O,B),u("mousedown",I,N,{capture:!0,passive:!1}),u("touchstart",I,N,{capture:!0,passive:!1});var K=c||n.createElement(f,{portrait:E}),T=o({position:"relative",overflow:"hidden",cursor:U?E?"ns-resize":"ew-resize":void 0,userSelect:"none",KhtmlUserSelect:"none",msUserSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none"},k);return n.createElement("div",Object.assign({},R,{ref:O,style:T,"data-rcs":"root"}),h,n.createElement(p,{ref:j},v),n.createElement(l,{portrait:E,ref:P},K))},exports.ReactCompareSliderHandle=f,exports.ReactCompareSliderImage=function(e){var r=e.className,a=e.fallbackEnable,u=void 0===a||a,d=e.style,l=i(e,["className","fallbackEnable","style"]),f=t.useRef(s()),p=c(o({},d)),v={width:p.width,height:p.height,boxSizing:"border-box"};return!f.current&&u&&(v.backgroundImage=p.backgroundImage||"url("+l.src+")",v.backgroundSize=p.backgroundSize||"cover",v.backgroundPosition=p.backgroundPosition||"center",p.opacity=0),n.createElement("div",{className:r,style:v,"data-rcs":"image-root"},n.createElement("img",Object.assign({},l,{style:p,"data-rcs":"image-inner"})))},exports.styleFitContainer=c,exports.supportsCssObjectFit=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,r=require("resize-observer");function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function i(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t.indexOf(n=i[r])>=0||(o[n]=e[n]);return o}var a=!("undefined"==typeof window||!window.document||!window.document.createElement),s=function(){return!a||"undefined"!=typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("object-fit","cover")},c=function(e){var t=void 0===e?{}:e,n=t.objectFit,r=t.objectPosition;return o({display:"block",width:"100%",height:"100%",maxWidth:"100%",objectFit:void 0===n?"cover":n,objectPosition:void 0===r?"center":r},i(t,["objectFit","objectPosition"]))},u=function(e,n,r,o){var i=t.useRef();t.useEffect((function(){i.current=n}),[n]),t.useEffect((function(){if(r&&r.addEventListener){var t=function(e){return i.current&&i.current(e)};return r.addEventListener(e,t,o),function(){r.removeEventListener(e,t,o)}}}),[e,r,o])},d=a?t.useLayoutEffect:t.useEffect,l=t.forwardRef((function(e,t){var r=e.portrait;return n.createElement("div",{style:{position:"absolute",top:0,width:"100%",height:"100%",pointerEvents:"none"},"data-rcs":"handle-container",ref:t},n.createElement("div",{style:{position:"absolute",width:r?"100%":void 0,height:r?void 0:"100%",transform:r?"translateY(-50%)":"translateX(-50%)",pointerEvents:"all"}},e.children))}));l.displayName="ReactCompareSliderHandleContainer";var f=function(e){var t=e.portrait,r=e.style,a=i(e,["portrait","style"]),s=o({height:t?4:"100%",width:t?"100%":4,backgroundColor:"#fff",boxShadow:"0 0 .2rem #000",cursor:t?"ns-resize":"ew-resize"},r);return n.createElement("div",Object.assign({},a,{style:s,"data-rcs":"handle-inner"}))},p=t.forwardRef((function(e,t){return n.createElement("div",Object.assign({},e,{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",willChange:"clip",userSelect:"none",KhtmlUserSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none"},"data-rcs":"clip-item",ref:t}))}));p.displayName="ReactCompareSliderClipContainer",exports.ReactCompareSlider=function(e){var a,s,c=e.handle,v=e.itemOne,h=e.itemTwo,g=e.onlyHandleDraggable,m=void 0!==g&&g,b=e.onPositionChange,w=e.portrait,E=void 0!==w&&w,y=e.position,S=void 0===y?50:y,C=e.boundsPadding,x=void 0===C?0:C,R=e.style,O=i(e,["handle","itemOne","itemTwo","onlyHandleDraggable","onPositionChange","portrait","position","boundsPadding","style"]),k=t.useRef(null),j=t.useRef(null),P=t.useRef(null),z=t.useRef(S),L=(s=t.useRef(a=S),t.useEffect((function(){s.current=a})),s.current),M=t.useState(!1),U=M[0],X=M[1],Y=t.useRef(!1),F=t.useState(),N=F[0],H=F[1];t.useEffect((function(){H(m?P.current:k.current)}),[m]);var D=t.useCallback((function(e){var t=e.x,n=e.y,r=e.isOffset,o=e.portrait,i=e.boundsPadding,a=k.current.getBoundingClientRect(),s=a.width,c=a.height;if(0!==s&&0!==c){var u=Math.min(Math.max(o?r?n-a.top-window.pageYOffset:n:r?t-a.left-window.pageXOffset:t,0),o?c:s),d=u/(o?c:s)*100;if(d!==z.current||0!==z.current&&100!==z.current||!(o?0===u||u===c:0===u||u===s)){z.current=d;var l=Math.min(Math.max(u,0+i),(o?c:s)-i);j.current.style.clip=o?"rect(auto,auto,"+l+"px,auto)":"rect(auto,"+l+"px,auto,auto)",P.current.style.transform=o?"translate3d(0,"+l+"px,0)":"translate3d("+l+"px,0,0)",b&&b(z.current)}}}),[b]);t.useEffect((function(){var e=k.current.getBoundingClientRect(),t=S===L?z.current:S;D({portrait:E,boundsPadding:x,x:e.width/100*t,y:e.height/100*t})}),[E,S,L,x,D]);var I=t.useCallback((function(e){e.preventDefault(),D({portrait:E,boundsPadding:x,isOffset:!0,x:e instanceof MouseEvent?e.pageX:e.touches[0].pageX,y:e instanceof MouseEvent?e.pageY:e.touches[0].pageY}),X(!0)}),[E,x,D]),W=t.useCallback((function(e){U&&D({portrait:E,boundsPadding:x,isOffset:!0,x:e instanceof MouseEvent?e.pageX:e.touches[0].pageX,y:e instanceof MouseEvent?e.pageY:e.touches[0].pageY})}),[E,U,x,D]),q=t.useCallback((function(){X(!1)}),[]),B=t.useCallback((function(e){D({portrait:E,boundsPadding:x,x:e.width/100*z.current,y:e.height/100*z.current})}),[E,x,D]);t.useEffect((function(){return U&&!Y.current&&(window.addEventListener("mousemove",W,{passive:!0}),window.addEventListener("mouseup",q,{passive:!0}),window.addEventListener("touchmove",W,{passive:!0}),window.addEventListener("touchend",q,{passive:!0}),Y.current=!0),function(){Y.current&&(window.removeEventListener("mousemove",W),window.removeEventListener("mouseup",q),window.removeEventListener("touchmove",W),window.removeEventListener("touchend",q),Y.current=!1)}}),[W,q,U]),function(e,n){var o=t.useRef(new r.ResizeObserver((function(e){return n(e[0].contentRect)}))),i=t.useCallback((function(){e.current&&o.current.observe(e.current)}),[e]);d((function(){return o.current=new r.ResizeObserver((function(e){return n(e[0].contentRect)})),i(),function(){return o.current.disconnect()}}),[n,i])}(k,B),u("mousedown",I,N,{capture:!0,passive:!1}),u("touchstart",I,N,{capture:!0,passive:!1});var K=c||n.createElement(f,{portrait:E}),T=o({position:"relative",overflow:"hidden",cursor:U?E?"ns-resize":"ew-resize":void 0,userSelect:"none",KhtmlUserSelect:"none",msUserSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none"},R);return n.createElement("div",Object.assign({},O,{ref:k,style:T,"data-rcs":"root"}),h,n.createElement(p,{ref:j},v),n.createElement(l,{portrait:E,ref:P},K))},exports.ReactCompareSliderHandle=f,exports.ReactCompareSliderImage=function(e){var r=e.className,a=e.fallbackEnable,u=void 0===a||a,d=e.style,l=i(e,["className","fallbackEnable","style"]),f=t.useRef(s()),p=c(o({},d)),v={width:p.width,height:p.height,boxSizing:"border-box"};return!f.current&&u&&(v.backgroundImage=p.backgroundImage||"url("+l.src+")",v.backgroundSize=p.backgroundSize||"cover",v.backgroundPosition=p.backgroundPosition||"center",p.opacity=0),n.createElement("div",{className:r,style:v,"data-rcs":"image-root"},n.createElement("img",Object.assign({},l,{style:p,"data-rcs":"image-inner"})))},exports.styleFitContainer=c,exports.supportsCssObjectFit=s;
 //# sourceMappingURL=react-compare-slider.cjs.production.min.js.map

dist/react-compare-slider.esm.js

@@ -124,6 +124,5 @@ import React, { useRef, useEffect, useCallback, useLayoutEffect, useState, forwardRef } from 'react';
 /**
- * Bind resize observer to ref.
- * @param ref       - Ref to bind to
- * @param handler   - Callback for handling entry's bounding rect
- * @see https://tobbelindstrom.com/blog/resize-observer-hook/ https://codesandbox.io/s/zw8kylol8m
+ * Bind resize observer callback to element.
+ * @param ref       - Element to bind to.
+ * @param handler   - Callback for handling entry's bounding rect.
  */
@@ -134,17 +133,18 @@
     var entry = _ref2[0];
-    handler(entry.contentRect);
+    return handler(entry.contentRect);
   }));
-  var disconnect = useCallback(function () {
-    var current = observer.current;
-    current.disconnect();
-  }, []);
   var observe = useCallback(function () {
     ref.current && observer.current.observe(ref.current);
-  }, [ref]);
+  }, [ref]); // Bind/rebind observer when `handler` changes.
+
   useIsomorphicLayoutEffect(function () {
+    observer.current = new ResizeObserver(function (_ref3) {
+      var entry = _ref3[0];
+      return handler(entry.contentRect);
+    });
     observe();
     return function () {
-      return disconnect();
+      return observer.current.disconnect();
     };
-  }, [disconnect, observe]);
+  }, [handler, observe]);
 };
@@ -151,0 +151,0 @@

dist/utils.d.ts

@@ -25,7 +25,6 @@ import { RefObject } from 'react';
 /**
- * Bind resize observer to ref.
- * @param ref       - Ref to bind to
- * @param handler   - Callback for handling entry's bounding rect
- * @see https://tobbelindstrom.com/blog/resize-observer-hook/ https://codesandbox.io/s/zw8kylol8m
+ * Bind resize observer callback to element.
+ * @param ref       - Element to bind to.
+ * @param handler   - Callback for handling entry's bounding rect.
  */
 export declare const useResizeObserver: (ref: RefObject<Element>, handler: (entry: UseResizeObserverHandlerParams) => void) => void;

package.json

 {
   "name": "react-compare-slider",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "license": "MIT",
@@ -5,0 +5,0 @@ "repository": {

No alert changes

Worsened metrics

Total package byte prevSize

147832

decreased by-0.02%

Lines of code

950

decreased by-0.21%

No dependency changes