react-compare-slider - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

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

@@ -67,2 +67,3 @@ 'use strict';
     backdropFilter: 'blur(7px)',
+    WebkitBackdropFilter: 'blur(7px)',
     boxShadow: '0 0 7px rgba(0,0,0,.35)',
@@ -243,11 +244,11 @@ transform: portrait ? 'rotate(90deg)' : undefined,
 }) => {
-  /** Reference to root container. */
+  /** DOM node of the root element. */
   const rootContainerRef = React.useRef(null);
-  /** Reference to clip container. */
+  /** DOM node of the item that is clipped. */
 
   const clipContainerRef = React.useRef(null);
-  /** Reference to handle container. */
+  /** DOM node of the handle container. */
 
   const handleContainerRef = React.useRef(null);
-  /** Reference to current position as a percentage value. */
+  /** Current position as a percentage value (initially negative to sync bounds on mount). */
 
@@ -266,4 +267,7 @@ const internalPositionPc = React.useRef(position);
 
-  const [interactiveTarget, setInteractiveTarget] = React.useState(); // Set target container for pointer events.
+  const [interactiveTarget, setInteractiveTarget] = React.useState();
+  /** Whether the bounds of the container element have been synchronised. */
 
+  const [didSyncBounds, setDidSyncBounds] = React.useState(false); // Set target container for pointer events.
+
   React.useEffect(() => {
@@ -289,5 +293,8 @@ setInteractiveTarget(onlyHandleDraggable ? handleContainerRef.current : rootContainerRef.current);
 
-    if (width === 0 || height === 0) return; // Clamp pixel position to always be within the container's bounds.
-    // This does *not* take `boundsPadding` into account because we need
-    // the real coords to correctly position the handle.
+    if (width === 0 || height === 0) return;
+    /**
+     * Pixel position clamped within the container's bounds.
+     * @NOTE This does *not* take `boundsPadding` into account because we need
+     *       the full coords to correctly position the handle.
+     */
 
@@ -305,3 +312,3 @@ const positionPx = Math.min(Math.max( // Determine bounds based on orientation
     const nextInternalPositionPc = positionPx / (_portrait ? height : width) * 100;
-    /** Determine if the current pixel position meets the min/max bounds. */
+    /** Whether the current pixel position meets the min/max bounds. */
 
@@ -313,4 +320,6 @@ const positionMeetsBounds = _portrait ? positionPx === 0 || positionPx === height : positionPx === 0 || positionPx === width;
 
-    if (canSkipPositionPc && positionMeetsBounds) {
+    if (didSyncBounds && canSkipPositionPc && positionMeetsBounds) {
       return;
+    } else {
+      setDidSyncBounds(true);
     } // Set new internal position.
@@ -330,3 +339,3 @@
     if (onPositionChange) onPositionChange(internalPositionPc.current);
-  }, [onPositionChange]); // Update internal position when other user controllable props change.
+  }, [didSyncBounds, onPositionChange]); // Update internal position when other user controllable props change.
 
@@ -333,0 +342,0 @@ React.useEffect(() => {

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;const r=({flip:e})=>n.createElement("div",{style:{width:0,height:0,borderTop:"8px solid transparent",borderRight:"10px solid",borderBottom:"8px solid transparent",transform:e?"rotate(180deg)":void 0}}),o=({portrait:e,buttonStyle:t,linesStyle:o,style:s,...i})=>{const a={display:"flex",flexDirection:e?"row":"column",placeItems:"center",height:"100%",cursor:e?"ns-resize":"ew-resize",pointerEvents:"none",color:"#fff",...s},c={flexGrow:1,height:e?2:"100%",width:e?"100%":2,backgroundColor:"currentColor",pointerEvents:"auto",boxShadow:"0 0 7px rgba(0,0,0,.35)",...o},l={display:"grid",gridAutoFlow:"column",gap:8,placeContent:"center",flexShrink:0,width:56,height:56,borderRadius:"50%",borderStyle:"solid",borderWidth:2,pointerEvents:"auto",backdropFilter:"blur(7px)",boxShadow:"0 0 7px rgba(0,0,0,.35)",transform:e?"rotate(90deg)":void 0,...t};return n.createElement("div",Object.assign({className:"__rcs-handle-root"},i,{style:a}),n.createElement("div",{className:"__rcs-handle-line",style:c}),n.createElement("div",{className:"__rcs-handle-button",style:l},n.createElement(r,null),n.createElement(r,{flip:!0})),n.createElement("div",{className:"__rcs-handle-line",style:c}))},s=({boxSizing:e="border-box",objectFit:t="cover",objectPosition:n="center",...r}={})=>({display:"block",width:"100%",height:"100%",maxWidth:"100%",boxSizing:e,objectFit:t,objectPosition:n,...r}),i=(e,n,r,o)=>{const s=t.useRef();t.useEffect(()=>{s.current=n},[n]),t.useEffect(()=>{if(!r||!r.addEventListener)return;const t=e=>s.current&&s.current(e);return r.addEventListener(e,t,o),()=>{r.removeEventListener(e,t,o)}},[e,r,o])},a="undefined"!=typeof window&&window.document&&window.document.createElement?t.useLayoutEffect:t.useEffect,c=t.forwardRef((e,t)=>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})));c.displayName="ThisClipContainer";const l=t.forwardRef(({children:e,portrait:t},r)=>n.createElement("div",{style:{position:"absolute",top:0,width:"100%",height:"100%",pointerEvents:"none"},"data-rcs":"handle-container",ref:r},n.createElement("div",{style:{position:"absolute",width:t?"100%":void 0,height:t?void 0:"100%",transform:t?"translateY(-50%)":"translateX(-50%)",pointerEvents:"all"}},e)));l.displayName="ThisHandleContainer";const u={passive:!0},d={capture:!0,passive:!1};exports.ReactCompareSlider=({handle:e,itemOne:r,itemTwo:s,onlyHandleDraggable:p=!1,onPositionChange:f,portrait:h=!1,position:m=50,boundsPadding:g=0,style:v,...b})=>{const w=t.useRef(null),E=t.useRef(null),y=t.useRef(null),x=t.useRef(m),S=(e=>{const n=t.useRef(e);return t.useEffect(()=>{n.current=e}),n.current})(m),[C,R]=t.useState(!1),k=t.useRef(!1),[L,O]=t.useState();t.useEffect(()=>{O(p?y.current:w.current)},[p]);const M=t.useCallback((function({x:e,y:t,isOffset:n,portrait:r,boundsPadding:o}){const{top:s,left:i,width:a,height:c}=w.current.getBoundingClientRect();if(0===a||0===c)return;const l=Math.min(Math.max(r?n?t-s-window.pageYOffset:t:n?e-i-window.pageXOffset:e,0),r?c:a),u=l/(r?c:a)*100;if(u===x.current&&(0===x.current||100===x.current)&&(r?0===l||l===c:0===l||l===a))return;x.current=u;const d=Math.min(Math.max(l,0+o),(r?c:a)-o);E.current.style.clip=r?`rect(auto,auto,${d}px,auto)`:`rect(auto,${d}px,auto,auto)`,y.current.style.transform=r?`translate3d(0,${d}px,0)`:`translate3d(${d}px,0,0)`,f&&f(x.current)}),[f]);t.useEffect(()=>{const{width:e,height:t}=w.current.getBoundingClientRect(),n=m===S?x.current:m;M({portrait:h,boundsPadding:g,x:e/100*n,y:t/100*n})},[h,m,S,g,M]);const j=t.useCallback(e=>{e.preventDefault(),M({portrait:h,boundsPadding:g,isOffset:!0,x:e instanceof MouseEvent?e.pageX:e.touches[0].pageX,y:e instanceof MouseEvent?e.pageY:e.touches[0].pageY}),R(!0)},[h,g,M]),P=t.useCallback((function(e){M({portrait:h,boundsPadding:g,isOffset:!0,x:e instanceof MouseEvent?e.pageX:e.touches[0].pageX,y:e instanceof MouseEvent?e.pageY:e.touches[0].pageY})}),[h,g,M]),_=t.useCallback(()=>{R(!1)},[]),z=t.useCallback(({width:e,height:t})=>{M({portrait:h,boundsPadding:g,x:e/100*x.current,y:t/100*x.current})},[h,g,M]);t.useEffect(()=>(C&&!k.current&&(window.addEventListener("mousemove",P,u),window.addEventListener("mouseup",_,u),window.addEventListener("touchmove",P,u),window.addEventListener("touchend",_,u),k.current=!0),()=>{k.current&&(window.removeEventListener("mousemove",P),window.removeEventListener("mouseup",_),window.removeEventListener("touchmove",P),window.removeEventListener("touchend",_),k.current=!1)}),[P,_,C]),((e,n)=>{const r=t.useRef(),o=t.useCallback(()=>{e.current&&r.current&&r.current.observe(e.current)},[e]);a(()=>(r.current=new ResizeObserver(([e])=>n(e.contentRect)),o(),()=>{r.current&&r.current.disconnect()}),[n,o])})(w,z),i("mousedown",j,L,d),i("touchstart",j,L,d);const U=e||n.createElement(o,{portrait:h}),N={position:"relative",overflow:"hidden",cursor:C?h?"ns-resize":"ew-resize":void 0,userSelect:"none",KhtmlUserSelect:"none",msUserSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none",...v};return n.createElement("div",Object.assign({},b,{ref:w,style:N,"data-rcs":"root"}),s,n.createElement(c,{ref:E},r),n.createElement(l,{portrait:h,ref:y},U))},exports.ReactCompareSliderHandle=o,exports.ReactCompareSliderImage=({style:e,...t})=>{const r=s(e);return n.createElement("img",Object.assign({},t,{style:r,"data-rcs":"image"}))},exports.styleFitContainer=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;const r=({flip:e})=>n.createElement("div",{style:{width:0,height:0,borderTop:"8px solid transparent",borderRight:"10px solid",borderBottom:"8px solid transparent",transform:e?"rotate(180deg)":void 0}}),o=({portrait:e,buttonStyle:t,linesStyle:o,style:s,...i})=>{const a={display:"flex",flexDirection:e?"row":"column",placeItems:"center",height:"100%",cursor:e?"ns-resize":"ew-resize",pointerEvents:"none",color:"#fff",...s},c={flexGrow:1,height:e?2:"100%",width:e?"100%":2,backgroundColor:"currentColor",pointerEvents:"auto",boxShadow:"0 0 7px rgba(0,0,0,.35)",...o},l={display:"grid",gridAutoFlow:"column",gap:8,placeContent:"center",flexShrink:0,width:56,height:56,borderRadius:"50%",borderStyle:"solid",borderWidth:2,pointerEvents:"auto",backdropFilter:"blur(7px)",WebkitBackdropFilter:"blur(7px)",boxShadow:"0 0 7px rgba(0,0,0,.35)",transform:e?"rotate(90deg)":void 0,...t};return n.createElement("div",Object.assign({className:"__rcs-handle-root"},i,{style:a}),n.createElement("div",{className:"__rcs-handle-line",style:c}),n.createElement("div",{className:"__rcs-handle-button",style:l},n.createElement(r,null),n.createElement(r,{flip:!0})),n.createElement("div",{className:"__rcs-handle-line",style:c}))},s=({boxSizing:e="border-box",objectFit:t="cover",objectPosition:n="center",...r}={})=>({display:"block",width:"100%",height:"100%",maxWidth:"100%",boxSizing:e,objectFit:t,objectPosition:n,...r}),i=(e,n,r,o)=>{const s=t.useRef();t.useEffect(()=>{s.current=n},[n]),t.useEffect(()=>{if(!r||!r.addEventListener)return;const t=e=>s.current&&s.current(e);return r.addEventListener(e,t,o),()=>{r.removeEventListener(e,t,o)}},[e,r,o])},a="undefined"!=typeof window&&window.document&&window.document.createElement?t.useLayoutEffect:t.useEffect,c=t.forwardRef((e,t)=>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})));c.displayName="ThisClipContainer";const l=t.forwardRef(({children:e,portrait:t},r)=>n.createElement("div",{style:{position:"absolute",top:0,width:"100%",height:"100%",pointerEvents:"none"},"data-rcs":"handle-container",ref:r},n.createElement("div",{style:{position:"absolute",width:t?"100%":void 0,height:t?void 0:"100%",transform:t?"translateY(-50%)":"translateX(-50%)",pointerEvents:"all"}},e)));l.displayName="ThisHandleContainer";const u={passive:!0},d={capture:!0,passive:!1};exports.ReactCompareSlider=({handle:e,itemOne:r,itemTwo:s,onlyHandleDraggable:p=!1,onPositionChange:f,portrait:h=!1,position:m=50,boundsPadding:g=0,style:v,...b})=>{const w=t.useRef(null),E=t.useRef(null),y=t.useRef(null),x=t.useRef(m),S=(e=>{const n=t.useRef(e);return t.useEffect(()=>{n.current=e}),n.current})(m),[C,R]=t.useState(!1),k=t.useRef(!1),[L,O]=t.useState(),[M,j]=t.useState(!1);t.useEffect(()=>{O(p?y.current:w.current)},[p]);const P=t.useCallback((function({x:e,y:t,isOffset:n,portrait:r,boundsPadding:o}){const{top:s,left:i,width:a,height:c}=w.current.getBoundingClientRect();if(0===a||0===c)return;const l=Math.min(Math.max(r?n?t-s-window.pageYOffset:t:n?e-i-window.pageXOffset:e,0),r?c:a),u=l/(r?c:a)*100;if(M&&u===x.current&&(0===x.current||100===x.current)&&(r?0===l||l===c:0===l||l===a))return;j(!0),x.current=u;const d=Math.min(Math.max(l,0+o),(r?c:a)-o);E.current.style.clip=r?`rect(auto,auto,${d}px,auto)`:`rect(auto,${d}px,auto,auto)`,y.current.style.transform=r?`translate3d(0,${d}px,0)`:`translate3d(${d}px,0,0)`,f&&f(x.current)}),[M,f]);t.useEffect(()=>{const{width:e,height:t}=w.current.getBoundingClientRect(),n=m===S?x.current:m;P({portrait:h,boundsPadding:g,x:e/100*n,y:t/100*n})},[h,m,S,g,P]);const _=t.useCallback(e=>{e.preventDefault(),P({portrait:h,boundsPadding:g,isOffset:!0,x:e instanceof MouseEvent?e.pageX:e.touches[0].pageX,y:e instanceof MouseEvent?e.pageY:e.touches[0].pageY}),R(!0)},[h,g,P]),z=t.useCallback((function(e){P({portrait:h,boundsPadding:g,isOffset:!0,x:e instanceof MouseEvent?e.pageX:e.touches[0].pageX,y:e instanceof MouseEvent?e.pageY:e.touches[0].pageY})}),[h,g,P]),U=t.useCallback(()=>{R(!1)},[]),F=t.useCallback(({width:e,height:t})=>{P({portrait:h,boundsPadding:g,x:e/100*x.current,y:t/100*x.current})},[h,g,P]);t.useEffect(()=>(C&&!k.current&&(window.addEventListener("mousemove",z,u),window.addEventListener("mouseup",U,u),window.addEventListener("touchmove",z,u),window.addEventListener("touchend",U,u),k.current=!0),()=>{k.current&&(window.removeEventListener("mousemove",z),window.removeEventListener("mouseup",U),window.removeEventListener("touchmove",z),window.removeEventListener("touchend",U),k.current=!1)}),[z,U,C]),((e,n)=>{const r=t.useRef(),o=t.useCallback(()=>{e.current&&r.current&&r.current.observe(e.current)},[e]);a(()=>(r.current=new ResizeObserver(([e])=>n(e.contentRect)),o(),()=>{r.current&&r.current.disconnect()}),[n,o])})(w,F),i("mousedown",_,L,d),i("touchstart",_,L,d);const N=e||n.createElement(o,{portrait:h}),X={position:"relative",overflow:"hidden",cursor:C?h?"ns-resize":"ew-resize":void 0,userSelect:"none",KhtmlUserSelect:"none",msUserSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none",...v};return n.createElement("div",Object.assign({},b,{ref:w,style:X,"data-rcs":"root"}),s,n.createElement(c,{ref:E},r),n.createElement(l,{portrait:h,ref:y},N))},exports.ReactCompareSliderHandle=o,exports.ReactCompareSliderImage=({style:e,...t})=>{const r=s(e);return n.createElement("img",Object.assign({},t,{style:r,"data-rcs":"image"}))},exports.styleFitContainer=s;
 //# sourceMappingURL=react-compare-slider.cjs.production.min.js.map

dist/react-compare-slider.esm.js

@@ -60,2 +60,3 @@ import React, { useRef, useEffect, useCallback, useLayoutEffect, useState, forwardRef } from 'react';
     backdropFilter: 'blur(7px)',
+    WebkitBackdropFilter: 'blur(7px)',
     boxShadow: '0 0 7px rgba(0,0,0,.35)',
@@ -236,11 +237,11 @@ transform: portrait ? 'rotate(90deg)' : undefined,
 }) => {
-  /** Reference to root container. */
+  /** DOM node of the root element. */
   const rootContainerRef = useRef(null);
-  /** Reference to clip container. */
+  /** DOM node of the item that is clipped. */
 
   const clipContainerRef = useRef(null);
-  /** Reference to handle container. */
+  /** DOM node of the handle container. */
 
   const handleContainerRef = useRef(null);
-  /** Reference to current position as a percentage value. */
+  /** Current position as a percentage value (initially negative to sync bounds on mount). */
 
@@ -259,4 +260,7 @@ const internalPositionPc = useRef(position);
 
-  const [interactiveTarget, setInteractiveTarget] = useState(); // Set target container for pointer events.
+  const [interactiveTarget, setInteractiveTarget] = useState();
+  /** Whether the bounds of the container element have been synchronised. */
 
+  const [didSyncBounds, setDidSyncBounds] = useState(false); // Set target container for pointer events.
+
   useEffect(() => {
@@ -282,5 +286,8 @@ setInteractiveTarget(onlyHandleDraggable ? handleContainerRef.current : rootContainerRef.current);
 
-    if (width === 0 || height === 0) return; // Clamp pixel position to always be within the container's bounds.
-    // This does *not* take `boundsPadding` into account because we need
-    // the real coords to correctly position the handle.
+    if (width === 0 || height === 0) return;
+    /**
+     * Pixel position clamped within the container's bounds.
+     * @NOTE This does *not* take `boundsPadding` into account because we need
+     *       the full coords to correctly position the handle.
+     */
 
@@ -298,3 +305,3 @@ const positionPx = Math.min(Math.max( // Determine bounds based on orientation
     const nextInternalPositionPc = positionPx / (_portrait ? height : width) * 100;
-    /** Determine if the current pixel position meets the min/max bounds. */
+    /** Whether the current pixel position meets the min/max bounds. */
 
@@ -306,4 +313,6 @@ const positionMeetsBounds = _portrait ? positionPx === 0 || positionPx === height : positionPx === 0 || positionPx === width;
 
-    if (canSkipPositionPc && positionMeetsBounds) {
+    if (didSyncBounds && canSkipPositionPc && positionMeetsBounds) {
       return;
+    } else {
+      setDidSyncBounds(true);
     } // Set new internal position.
@@ -323,3 +332,3 @@
     if (onPositionChange) onPositionChange(internalPositionPc.current);
-  }, [onPositionChange]); // Update internal position when other user controllable props change.
+  }, [didSyncBounds, onPositionChange]); // Update internal position when other user controllable props change.
 
@@ -326,0 +335,0 @@ useEffect(() => {

package.json

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

README.md

@@ -14,3 +14,3 @@ <div align="center">
 <a href="https://bundlephobia.com/result?p=react-compare-slider">
-  <img src="https://img.shields.io/bundlephobia/minzip/react-compare-slider.svg" alt="Bundle size" />
+  <img src="https://img.shields.io/bundlephobia/minzip/react-compare-slider.svg?color=brightgreen" alt="Bundle size" />
 </a>
@@ -110,2 +110,3 @@ <br/>
 - React 16.8+
+- The [latest two versions of each major browser](./package.json#L49) are officially supported &ndash; try [version 1.2.1](https://www.npmjs.com/package/react-compare-slider/v/1.2.1) if you need to support IE11
 
@@ -112,0 +113,0 @@ ## Notes

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

143184

increased by1.82%

Lines of code

925

increased by1.87%

Number of lines in readme file

114

increased by0.88%

No dependency changes