Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-compare-slider
Advanced tools
react-compare-slider - npm Package Compare versions
Comparing version 2.1.0 to 2.2.0
@@ -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
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by10.76%
165371
- Number of package files
- increased by6.25%
17
- Lines of code
- increased by6.04%
1018
No dependency changes