🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

react-compare-slider

Package Overview
Dependencies
Maintainers
1
Versions
30
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-compare-slider - npm Package Compare versions

Comparing version

to
2.2.0

dist/Container.d.ts

140

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

@@ -10,2 +10,54 @@ 'use strict';

/** Container for clipped item. */
const ContainerClip = /*#__PURE__*/React.forwardRef((props, ref) => {
const style = {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
willChange: 'clip',
userSelect: 'none',
KhtmlUserSelect: 'none',
MozUserSelect: 'none',
WebkitUserSelect: 'none'
};
return React__default.createElement("div", Object.assign({}, props, {
style: style,
"data-rcs": "clip-item",
ref: ref
}));
});
ContainerClip.displayName = 'ContainerClip';
/** Container to control the handle's position. */
const ContainerHandle = /*#__PURE__*/React.forwardRef(({
children,
portrait
}, ref) => {
const style = {
position: 'absolute',
top: 0,
width: '100%',
height: '100%',
pointerEvents: 'none'
};
const innerStyle = {
position: 'absolute',
width: portrait ? '100%' : undefined,
height: portrait ? undefined : '100%',
transform: portrait ? 'translateY(-50%)' : 'translateX(-50%)',
pointerEvents: 'all'
};
return React__default.createElement("div", {
style: style,
"data-rcs": "handle-container",
ref: ref
}, React__default.createElement("div", {
style: innerStyle
}, children));
});
ContainerHandle.displayName = 'ThisHandleContainer';
const ThisArrow = ({

@@ -172,53 +224,2 @@ flip

/** Container for clipped item. */
const ThisClipContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
const style = {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
willChange: 'clip',
userSelect: 'none',
KhtmlUserSelect: 'none',
MozUserSelect: 'none',
WebkitUserSelect: 'none'
};
return React__default.createElement("div", Object.assign({}, props, {
style: style,
"data-rcs": "clip-item",
ref: ref
}));
});
ThisClipContainer.displayName = 'ThisClipContainer';
/** Handle container to control position. */
const ThisHandleContainer = /*#__PURE__*/React.forwardRef(({
children,
portrait
}, ref) => {
const style = {
position: 'absolute',
top: 0,
width: '100%',
height: '100%',
pointerEvents: 'none'
};
const innerStyle = {
position: 'absolute',
width: portrait ? '100%' : undefined,
height: portrait ? undefined : '100%',
transform: portrait ? 'translateY(-50%)' : 'translateX(-50%)',
pointerEvents: 'all'
};
return React__default.createElement("div", {
style: style,
"data-rcs": "handle-container",
ref: ref
}, React__default.createElement("div", {
style: innerStyle
}, children));
});
ThisHandleContainer.displayName = 'ThisHandleContainer';
const EVENT_PASSIVE_PARAMS = {

@@ -304,2 +305,8 @@ passive: true

_portrait ? height : width);
/** Width or height with CSS scaling accounted for. */
const zoomScale = _portrait ? height / (rootContainerRef.current.offsetHeight || 1) : width / (rootContainerRef.current.offsetWidth || 1);
const adjustedPosition = positionPx / zoomScale;
const adjustedWidth = width / zoomScale;
const adjustedHeight = height / zoomScale;
/**

@@ -311,6 +318,6 @@ * Internal position percentage *without* bounds.

const nextInternalPositionPc = positionPx / (_portrait ? height : width) * 100;
const nextInternalPositionPc = adjustedPosition / (_portrait ? adjustedHeight : adjustedWidth) * 100;
/** Whether the current pixel position meets the min/max bounds. */
const positionMeetsBounds = _portrait ? positionPx === 0 || positionPx === height : positionPx === 0 || positionPx === width;
const positionMeetsBounds = _portrait ? adjustedPosition === 0 || adjustedPosition === adjustedHeight : adjustedPosition === 0 || adjustedPosition === adjustedWidth;
const canSkipPositionPc = nextInternalPositionPc === internalPositionPc.current && (internalPositionPc.current === 0 || internalPositionPc.current === 100); // Early out if pixel and percentage positions are already at the min/max

@@ -331,7 +338,5 @@ // to prevent update spamming when the user is sliding outside of the

const clampedPx = Math.min( // Get largest from pixel position *or* bounds padding.
Math.max(positionPx, 0 + _boundsPadding), // Use height *or* width based on orientation.
(_portrait ? height : width) - _boundsPadding); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
clipContainerRef.current.style.clip = _portrait ? `rect(auto,auto,${clampedPx}px,auto)` : `rect(auto,${clampedPx}px,auto,auto)`; // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
Math.max(adjustedPosition, 0 + _boundsPadding), // Use height *or* width based on orientation.
(_portrait ? adjustedHeight : adjustedWidth) - _boundsPadding);
clipContainerRef.current.style.clip = _portrait ? `rect(auto,auto,${clampedPx}px,auto)` : `rect(auto,${clampedPx}px,auto,auto)`;
handleContainerRef.current.style.transform = _portrait ? `translate3d(0,${clampedPx}px,0)` : `translate3d(${clampedPx}px,0,0)`;

@@ -342,3 +347,2 @@ if (onPositionChange) onPositionChange(internalPositionPc.current);

React.useEffect(() => {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const {

@@ -392,7 +396,11 @@ width,

}) => {
const {
width: scaledWidth,
height: scaledHeight
} = rootContainerRef.current.getBoundingClientRect();
updateInternalPosition({
portrait,
boundsPadding,
x: width / 100 * internalPositionPc.current,
y: height / 100 * internalPositionPc.current
x: width / 100 * internalPositionPc.current * scaledWidth / width,
y: height / 100 * internalPositionPc.current * scaledHeight / height
});

@@ -441,6 +449,4 @@ }, [portrait, boundsPadding, updateInternalPosition]); // Allow drag outside of container while pointer is still down.

}, [changePositionOnHover, handlePointerMove, handlePointerUp, isDragging]);
useEventListener('mousedown', handlePointerDown, // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
interactiveTarget, EVENT_CAPTURE_PARAMS);
useEventListener('touchstart', handlePointerDown, // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
interactiveTarget, EVENT_CAPTURE_PARAMS); // Use custom handle if requested.
useEventListener('mousedown', handlePointerDown, interactiveTarget, EVENT_CAPTURE_PARAMS);
useEventListener('touchstart', handlePointerDown, interactiveTarget, EVENT_CAPTURE_PARAMS); // Use custom handle if requested.

@@ -465,5 +471,5 @@ const Handle = handle || React__default.createElement(ReactCompareSliderHandle, {

"data-rcs": "root"
}), itemTwo, React__default.createElement(ThisClipContainer, {
}), itemTwo, React__default.createElement(ContainerClip, {
ref: clipContainerRef
}, itemOne), React__default.createElement(ThisHandleContainer, {
}, itemOne), React__default.createElement(ContainerHandle, {
portrait: portrait,

@@ -470,0 +476,0 @@ ref: handleContainerRef

@@ -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)",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:m=!1,position:h=50,boundsPadding:v=0,changePositionOnHover:g=!1,style:b,...w})=>{const E=t.useRef(null),y=t.useRef(null),x=t.useRef(null),S=t.useRef(h),C=(e=>{const n=t.useRef(e);return t.useEffect(()=>{n.current=e}),n.current})(h),[R,L]=t.useState(!1),k=t.useRef(!1),[O,M]=t.useState(),[P,j]=t.useState(!1);t.useEffect(()=>{M(p?x.current:E.current)},[p]);const _=t.useCallback((function({x:e,y:t,isOffset:n,portrait:r,boundsPadding:o}){const{top:s,left:i,width:a,height:c}=E.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(P&&u===S.current&&(0===S.current||100===S.current)&&(r?0===l||l===c:0===l||l===a))return;j(!0),S.current=u;const d=Math.min(Math.max(l,0+o),(r?c:a)-o);y.current.style.clip=r?`rect(auto,auto,${d}px,auto)`:`rect(auto,${d}px,auto,auto)`,x.current.style.transform=r?`translate3d(0,${d}px,0)`:`translate3d(${d}px,0,0)`,f&&f(S.current)}),[P,f]);t.useEffect(()=>{const{width:e,height:t}=E.current.getBoundingClientRect(),n=h===C?S.current:h;_({portrait:m,boundsPadding:v,x:e/100*n,y:t/100*n})},[m,h,C,v,_]);const z=t.useCallback(e=>{e.preventDefault(),_({portrait:m,boundsPadding:v,isOffset:!0,x:e instanceof MouseEvent?e.pageX:e.touches[0].pageX,y:e instanceof MouseEvent?e.pageY:e.touches[0].pageY}),L(!0)},[m,v,_]),U=t.useCallback((function(e){_({portrait:m,boundsPadding:v,isOffset:!0,x:e instanceof MouseEvent?e.pageX:e.touches[0].pageX,y:e instanceof MouseEvent?e.pageY:e.touches[0].pageY})}),[m,v,_]),F=t.useCallback(()=>{L(!1)},[]),N=t.useCallback(({width:e,height:t})=>{_({portrait:m,boundsPadding:v,x:e/100*S.current,y:t/100*S.current})},[m,v,_]);t.useEffect(()=>(R&&!k.current&&(window.addEventListener("mousemove",U,u),window.addEventListener("mouseup",F,u),window.addEventListener("touchmove",U,u),window.addEventListener("touchend",F,u),k.current=!0),()=>{k.current&&(window.removeEventListener("mousemove",U),window.removeEventListener("mouseup",F),window.removeEventListener("touchmove",U),window.removeEventListener("touchend",F),k.current=!1)}),[U,F,R]),((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])})(E,N),t.useEffect(()=>{const e=E.current,t=()=>{R||F()};return g&&(e.addEventListener("mousemove",U,u),e.addEventListener("mouseleave",t,u)),()=>{e.removeEventListener("mousemove",U),e.removeEventListener("mouseleave",t)}},[g,U,F,R]),i("mousedown",z,O,d),i("touchstart",z,O,d);const X=e||n.createElement(o,{portrait:m}),Y={position:"relative",overflow:"hidden",cursor:R?m?"ns-resize":"ew-resize":void 0,userSelect:"none",KhtmlUserSelect:"none",msUserSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none",...b};return n.createElement("div",Object.assign({},w,{ref:E,style:Y,"data-rcs":"root"}),s,n.createElement(c,{ref:y},r),n.createElement(l,{portrait:m,ref:x},X))},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=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})));r.displayName="ContainerClip";const o=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)));o.displayName="ThisHandleContainer";const s=({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}}),i=({portrait:e,buttonStyle:t,linesStyle:r,style:o,...i})=>{const a={display:"flex",flexDirection:e?"row":"column",placeItems:"center",height:"100%",cursor:e?"ns-resize":"ew-resize",pointerEvents:"none",color:"#fff",...o},c={flexGrow:1,height:e?2:"100%",width:e?"100%":2,backgroundColor:"currentColor",pointerEvents:"auto",boxShadow:"0 0 7px rgba(0,0,0,.35)",...r},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(s,null),n.createElement(s,{flip:!0})),n.createElement("div",{className:"__rcs-handle-line",style:c}))},a=({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}),c=(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])},l="undefined"!=typeof window&&window.document&&window.document.createElement?t.useLayoutEffect:t.useEffect,u={passive:!0},d={capture:!0,passive:!1};exports.ReactCompareSlider=({handle:e,itemOne:s,itemTwo:a,onlyHandleDraggable:f=!1,onPositionChange:p,portrait:m=!1,position:h=50,boundsPadding:v=0,changePositionOnHover:g=!1,style:b,...w})=>{const E=t.useRef(null),y=t.useRef(null),x=t.useRef(null),S=t.useRef(h),C=(e=>{const n=t.useRef(e);return t.useEffect(()=>{n.current=e}),n.current})(h),[R,L]=t.useState(!1),k=t.useRef(!1),[O,M]=t.useState(),[P,j]=t.useState(!1);t.useEffect(()=>{M(f?x.current:E.current)},[f]);const _=t.useCallback((function({x:e,y:t,isOffset:n,portrait:r,boundsPadding:o}){const{top:s,left:i,width:a,height:c}=E.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=r?c/(E.current.offsetHeight||1):a/(E.current.offsetWidth||1),d=l/u,f=a/u,m=c/u,h=d/(r?m:f)*100;if(P&&h===S.current&&(0===S.current||100===S.current)&&(r?0===d||d===m:0===d||d===f))return;j(!0),S.current=h;const v=Math.min(Math.max(d,0+o),(r?m:f)-o);y.current.style.clip=r?`rect(auto,auto,${v}px,auto)`:`rect(auto,${v}px,auto,auto)`,x.current.style.transform=r?`translate3d(0,${v}px,0)`:`translate3d(${v}px,0,0)`,p&&p(S.current)}),[P,p]);t.useEffect(()=>{const{width:e,height:t}=E.current.getBoundingClientRect(),n=h===C?S.current:h;_({portrait:m,boundsPadding:v,x:e/100*n,y:t/100*n})},[m,h,C,v,_]);const z=t.useCallback(e=>{e.preventDefault(),_({portrait:m,boundsPadding:v,isOffset:!0,x:e instanceof MouseEvent?e.pageX:e.touches[0].pageX,y:e instanceof MouseEvent?e.pageY:e.touches[0].pageY}),L(!0)},[m,v,_]),U=t.useCallback((function(e){_({portrait:m,boundsPadding:v,isOffset:!0,x:e instanceof MouseEvent?e.pageX:e.touches[0].pageX,y:e instanceof MouseEvent?e.pageY:e.touches[0].pageY})}),[m,v,_]),F=t.useCallback(()=>{L(!1)},[]),N=t.useCallback(({width:e,height:t})=>{const{width:n,height:r}=E.current.getBoundingClientRect();_({portrait:m,boundsPadding:v,x:e/100*S.current*n/e,y:t/100*S.current*r/t})},[m,v,_]);t.useEffect(()=>(R&&!k.current&&(window.addEventListener("mousemove",U,u),window.addEventListener("mouseup",F,u),window.addEventListener("touchmove",U,u),window.addEventListener("touchend",F,u),k.current=!0),()=>{k.current&&(window.removeEventListener("mousemove",U),window.removeEventListener("mouseup",F),window.removeEventListener("touchmove",U),window.removeEventListener("touchend",F),k.current=!1)}),[U,F,R]),((e,n)=>{const r=t.useRef(),o=t.useCallback(()=>{e.current&&r.current&&r.current.observe(e.current)},[e]);l(()=>(r.current=new ResizeObserver(([e])=>n(e.contentRect)),o(),()=>{r.current&&r.current.disconnect()}),[n,o])})(E,N),t.useEffect(()=>{const e=E.current,t=()=>{R||F()};return g&&(e.addEventListener("mousemove",U,u),e.addEventListener("mouseleave",t,u)),()=>{e.removeEventListener("mousemove",U),e.removeEventListener("mouseleave",t)}},[g,U,F,R]),c("mousedown",z,O,d),c("touchstart",z,O,d);const W=e||n.createElement(i,{portrait:m}),X={position:"relative",overflow:"hidden",cursor:R?m?"ns-resize":"ew-resize":void 0,userSelect:"none",KhtmlUserSelect:"none",msUserSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none",...b};return n.createElement("div",Object.assign({},w,{ref:E,style:X,"data-rcs":"root"}),a,n.createElement(r,{ref:y},s),n.createElement(o,{portrait:m,ref:x},W))},exports.ReactCompareSliderHandle=i,exports.ReactCompareSliderImage=({style:e,...t})=>{const r=a(e);return n.createElement("img",Object.assign({},t,{style:r,"data-rcs":"image"}))},exports.styleFitContainer=a;
//# sourceMappingURL=react-compare-slider.cjs.production.min.js.map

@@ -1,3 +0,55 @@

import React, { useRef, useEffect, useCallback, useLayoutEffect, useState, forwardRef } from 'react';
import React, { forwardRef, useRef, useEffect, useCallback, useLayoutEffect, useState } from 'react';
/** Container for clipped item. */
const ContainerClip = /*#__PURE__*/forwardRef((props, ref) => {
const style = {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
willChange: 'clip',
userSelect: 'none',
KhtmlUserSelect: 'none',
MozUserSelect: 'none',
WebkitUserSelect: 'none'
};
return React.createElement("div", Object.assign({}, props, {
style: style,
"data-rcs": "clip-item",
ref: ref
}));
});
ContainerClip.displayName = 'ContainerClip';
/** Container to control the handle's position. */
const ContainerHandle = /*#__PURE__*/forwardRef(({
children,
portrait
}, ref) => {
const style = {
position: 'absolute',
top: 0,
width: '100%',
height: '100%',
pointerEvents: 'none'
};
const innerStyle = {
position: 'absolute',
width: portrait ? '100%' : undefined,
height: portrait ? undefined : '100%',
transform: portrait ? 'translateY(-50%)' : 'translateX(-50%)',
pointerEvents: 'all'
};
return React.createElement("div", {
style: style,
"data-rcs": "handle-container",
ref: ref
}, React.createElement("div", {
style: innerStyle
}, children));
});
ContainerHandle.displayName = 'ThisHandleContainer';
const ThisArrow = ({

@@ -164,53 +216,2 @@ flip

/** Container for clipped item. */
const ThisClipContainer = /*#__PURE__*/forwardRef((props, ref) => {
const style = {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
willChange: 'clip',
userSelect: 'none',
KhtmlUserSelect: 'none',
MozUserSelect: 'none',
WebkitUserSelect: 'none'
};
return React.createElement("div", Object.assign({}, props, {
style: style,
"data-rcs": "clip-item",
ref: ref
}));
});
ThisClipContainer.displayName = 'ThisClipContainer';
/** Handle container to control position. */
const ThisHandleContainer = /*#__PURE__*/forwardRef(({
children,
portrait
}, ref) => {
const style = {
position: 'absolute',
top: 0,
width: '100%',
height: '100%',
pointerEvents: 'none'
};
const innerStyle = {
position: 'absolute',
width: portrait ? '100%' : undefined,
height: portrait ? undefined : '100%',
transform: portrait ? 'translateY(-50%)' : 'translateX(-50%)',
pointerEvents: 'all'
};
return React.createElement("div", {
style: style,
"data-rcs": "handle-container",
ref: ref
}, React.createElement("div", {
style: innerStyle
}, children));
});
ThisHandleContainer.displayName = 'ThisHandleContainer';
const EVENT_PASSIVE_PARAMS = {

@@ -296,2 +297,8 @@ passive: true

_portrait ? height : width);
/** Width or height with CSS scaling accounted for. */
const zoomScale = _portrait ? height / (rootContainerRef.current.offsetHeight || 1) : width / (rootContainerRef.current.offsetWidth || 1);
const adjustedPosition = positionPx / zoomScale;
const adjustedWidth = width / zoomScale;
const adjustedHeight = height / zoomScale;
/**

@@ -303,6 +310,6 @@ * Internal position percentage *without* bounds.

const nextInternalPositionPc = positionPx / (_portrait ? height : width) * 100;
const nextInternalPositionPc = adjustedPosition / (_portrait ? adjustedHeight : adjustedWidth) * 100;
/** Whether the current pixel position meets the min/max bounds. */
const positionMeetsBounds = _portrait ? positionPx === 0 || positionPx === height : positionPx === 0 || positionPx === width;
const positionMeetsBounds = _portrait ? adjustedPosition === 0 || adjustedPosition === adjustedHeight : adjustedPosition === 0 || adjustedPosition === adjustedWidth;
const canSkipPositionPc = nextInternalPositionPc === internalPositionPc.current && (internalPositionPc.current === 0 || internalPositionPc.current === 100); // Early out if pixel and percentage positions are already at the min/max

@@ -323,7 +330,5 @@ // to prevent update spamming when the user is sliding outside of the

const clampedPx = Math.min( // Get largest from pixel position *or* bounds padding.
Math.max(positionPx, 0 + _boundsPadding), // Use height *or* width based on orientation.
(_portrait ? height : width) - _boundsPadding); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
clipContainerRef.current.style.clip = _portrait ? `rect(auto,auto,${clampedPx}px,auto)` : `rect(auto,${clampedPx}px,auto,auto)`; // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
Math.max(adjustedPosition, 0 + _boundsPadding), // Use height *or* width based on orientation.
(_portrait ? adjustedHeight : adjustedWidth) - _boundsPadding);
clipContainerRef.current.style.clip = _portrait ? `rect(auto,auto,${clampedPx}px,auto)` : `rect(auto,${clampedPx}px,auto,auto)`;
handleContainerRef.current.style.transform = _portrait ? `translate3d(0,${clampedPx}px,0)` : `translate3d(${clampedPx}px,0,0)`;

@@ -334,3 +339,2 @@ if (onPositionChange) onPositionChange(internalPositionPc.current);

useEffect(() => {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const {

@@ -384,7 +388,11 @@ width,

}) => {
const {
width: scaledWidth,
height: scaledHeight
} = rootContainerRef.current.getBoundingClientRect();
updateInternalPosition({
portrait,
boundsPadding,
x: width / 100 * internalPositionPc.current,
y: height / 100 * internalPositionPc.current
x: width / 100 * internalPositionPc.current * scaledWidth / width,
y: height / 100 * internalPositionPc.current * scaledHeight / height
});

@@ -433,6 +441,4 @@ }, [portrait, boundsPadding, updateInternalPosition]); // Allow drag outside of container while pointer is still down.

}, [changePositionOnHover, handlePointerMove, handlePointerUp, isDragging]);
useEventListener('mousedown', handlePointerDown, // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
interactiveTarget, EVENT_CAPTURE_PARAMS);
useEventListener('touchstart', handlePointerDown, // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
interactiveTarget, EVENT_CAPTURE_PARAMS); // Use custom handle if requested.
useEventListener('mousedown', handlePointerDown, interactiveTarget, EVENT_CAPTURE_PARAMS);
useEventListener('touchstart', handlePointerDown, interactiveTarget, EVENT_CAPTURE_PARAMS); // Use custom handle if requested.

@@ -457,5 +463,5 @@ const Handle = handle || React.createElement(ReactCompareSliderHandle, {

"data-rcs": "root"
}), itemTwo, React.createElement(ThisClipContainer, {
}), itemTwo, React.createElement(ContainerClip, {
ref: clipContainerRef
}, itemOne), React.createElement(ThisHandleContainer, {
}, itemOne), React.createElement(ContainerHandle, {
portrait: portrait,

@@ -462,0 +468,0 @@ ref: handleContainerRef

{
"name": "react-compare-slider",
"version": "2.1.0",
"version": "2.2.0",
"license": "MIT",

@@ -5,0 +5,0 @@ "repository": {

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet