@julio-soto/react-compare-slider/dist/react-compare-slider.cjs.production.min.js

A slider component to compare any two React components in landscape or portrait orientation. It supports custom images, videos... and everything else.

"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;
//# sourceMappingURL=react-compare-slider.cjs.production.min.js.map