najwer23morsels 1.1.6 → 1.1.7

package/lib/SliderScroll.js

@@ -1 +1 @@
-import{jsxs as r,jsx as e}from"react/jsx-runtime";import{useRef as l,Children as t,cloneElement as n,useState as o,useEffect as i,useMemo as c,useCallback as s}from"react";import{B as a}from"./Button-czA3IzD8.js";import{u}from"./useWindowSize-CAQRbyxi.js";import{I as d,a as g}from"./IconLocate-1fQEMRDH.js";import{s as m,g as f}from"./style-inject.es-CrVRO2OA.js";import"./Loader-hxKQ6g7j.js";import"./TextBox-CT8wp519.js";var h={n23mSliderScrollWrapper:"SliderScroll-module_n23mSliderScrollWrapper__qj8cS",n23mSliderScrollTrack:"SliderScroll-module_n23mSliderScrollTrack__y6G6v",dragging:"SliderScroll-module_dragging__gH9AX",n23mSliderScrollControls:"SliderScroll-module_n23mSliderScrollControls__TAnlc",n23mSliderScrollControlsButtons:"SliderScroll-module_n23mSliderScrollControlsButtons__-PK4Y"};m("@layer n23mSliderScroll{.SliderScroll-module_n23mSliderScrollWrapper__qj8cS{display:grid;position:relative}.SliderScroll-module_n23mSliderScrollTrack__y6G6v{-ms-overflow-style:none;-webkit-overflow-scrolling:touch;display:flex;flex-wrap:nowrap;gap:var(--sliderscroll-g);overflow-x:scroll;scrollbar-width:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;will-change:scroll-position;&::-webkit-scrollbar{display:none}&>*{flex-shrink:0}&.SliderScroll-module_dragging__gH9AX,&.SliderScroll-module_dragging__gH9AX a{cursor:grabbing}}.SliderScroll-module_n23mSliderScrollControls__TAnlc{align-items:center;display:flex;justify-content:flex-end;margin-left:20px;margin-right:20px}.SliderScroll-module_n23mSliderScrollControlsButtons__-PK4Y{display:flex;gap:10px;margin-top:10px}}");const S=({children:m,className:S,gap:p="5px",isCircular:w=!1,autoPlay:b=!1,autoPlaySpeed:v=.5,style:L})=>{const _={carousel:l(null),buttonLeft:l(null),buttonRight:l(null),showArrowLeft:l(!1),showArrowRight:l(!1),isSliding:l(!1),animationFrameId:l(null),isHovered:l(!1),drag:l({isDown:!1,startX:0,scrollLeft:0,isMove:!1,isDragging:!1}),childRefs:l([])},F=t.toArray(m),x=F.length,y=w?F.map((r,e)=>n(r,{key:`cb-${e}`})):[],k=w?F.map((r,e)=>n(r,{key:`ca-${e}`})):[],A=w?[...y,...F,...k]:F,[C,D]=o([]),{width:j}=u();i(()=>{if(!_.carousel.current)return;const r=_.childRefs.current.map(r=>{if(!r)return 0;const e=getComputedStyle(r),l=parseFloat(e.marginLeft)||0,t=parseFloat(e.marginRight)||0;return r.offsetWidth+l+t+Number(p.slice(0,-2))});D(r)},[m,j,p]);const M=c(()=>{const r=[];let e=0;for(const l of C)r.push(e),e+=l;return r},[C]);i(()=>{w&&_.carousel.current&&M.length&&(_.carousel.current.scrollLeft=(M[x]||0)-2*Number(p.slice(0,-2))),I()},[j,M,x,w]),i(()=>{N(!1)},[]),i(()=>{if(!w)return;if(!b)return void(_.animationFrameId.current&&(cancelAnimationFrame(_.animationFrameId.current),_.animationFrameId.current=null));let r;const e=()=>{if(!_.carousel.current)return;if(_.isSliding.current||_.isHovered.current)return void(_.animationFrameId.current=requestAnimationFrame(e));const r=_.carousel.current;let l=r.scrollLeft+v;if(w&&M.length&&C.length){const r=M[M.length-1]+(C[C.length-1]||0),e=M[x]||0,t=M[x+F.length]||r;l>t+C[0]/2&&(l-=t-e)}r.scrollLeft=l,I(),_.animationFrameId.current=requestAnimationFrame(e)};return r=setTimeout(()=>{_.animationFrameId.current=requestAnimationFrame(e)},500),()=>{r&&clearTimeout(r),_.animationFrameId.current&&(cancelAnimationFrame(_.animationFrameId.current),_.animationFrameId.current=null)}},[b,v,w,M,C,x,F.length]);const I=()=>{if(_.carousel.current){if(w)_.showArrowLeft.current=!0,_.showArrowRight.current=!0;else{const r=_.carousel.current.scrollLeft,e=_.carousel.current.scrollWidth-_.carousel.current.clientWidth;_.showArrowLeft.current=r>0,_.showArrowRight.current=r<e-1}N(_.isSliding.current)}},N=r=>{_.buttonLeft.current&&(_.buttonLeft.current.disabled=r||!_.showArrowLeft.current),_.buttonRight.current&&(_.buttonRight.current.disabled=r||!_.showArrowRight.current)},R=(r,e,l=300)=>{if(_.isSliding.current)return;_.isSliding.current=!0,N(!0);const t=r.scrollLeft,n=e-t,o=performance.now(),i=e=>{const c=e-o,s=Math.min(c/l,1);var a;r.scrollLeft=t+n*((a=s)<.5?4*a*a*a:1-Math.pow(-2*a+2,3)/2),s<1?requestAnimationFrame(i):(_.isSliding.current=!1,N(!1),I())};requestAnimationFrame(i)},W=s(()=>{if(!_.carousel.current)return;if(!M.length||!C.length)return;const r=_.carousel.current,e=r.offsetWidth,l=r.scrollLeft;let t=M.findIndex((r,e)=>r>l);-1===t?t=M.length-1:t>0&&t--;let n,o=0,i=0;for(let r=t;r<M.length&&(o+=C[r],i++,!(o>=e));r++);const c=t+i-1;n=M[c]+C[c]>l+e+1?c:t+i;let s=M[n]-2*Number(p.slice(0,-2));if(s<0&&(s=0),w){s=(M[x]||0)+s-(M[x]||0)}R(_.carousel.current,s,400)},[M,C,p,x,w,F.length]),X=s(()=>{if(!_.carousel.current)return;if(!M.length||!C.length)return;const r=_.carousel.current,e=r.offsetWidth,l=r.scrollLeft;let t=0;for(let r=0;r<M.length;r++)if(M[r]>l){t=r-1;break}t<0&&(t=0);let n=0,o=0;for(let r=t;r>=0&&(n+=C[r],n<=e);r--)o++;let i=t;w||(i=Math.max(o-1,i));let c=M[i]+C[i]-e;if(c<0&&(c=0),w){c=(M[x]||0)+c-(M[x]||0)+Number(p.slice(0,-2))}R(_.carousel.current,c,400)},[M,C,p,x,w]),B=()=>{_.carousel.current&&(_.drag.current.isDragging?_.carousel.current.classList.add(h.dragging):_.carousel.current.classList.remove(h.dragging))};return r("div",{className:["n23mSliderScroll",S].filter(Boolean).join(" "),style:{...f({"--sliderscroll-g":p,height:"calc(100% - 60px)"}),...L},onMouseEnter:()=>{_.isHovered.current=!0},onMouseLeave:()=>{_.isHovered.current=!1},children:[e("div",{className:[h.n23mSliderScrollWrapper,"n23mSliderScrollWrapper"].join(" "),children:e("div",{className:h.n23mSliderScrollTrack,ref:_.carousel,onClick:r=>{_.drag.current.isMove&&(r.preventDefault(),r.stopPropagation())},onScroll:()=>{if(_.carousel.current){if(w&&M.length&&C.length){const r=_.carousel.current.scrollLeft,e=M[M.length-1]+(C[C.length-1]||0),l=M[x]||0,t=M[x+F.length]||e;r<l-C[0]/2?_.carousel.current.scrollLeft=r+(M[F.length+x]-l):r>t+C[0]/2&&(_.carousel.current.scrollLeft=r-(t-l))}I()}},onMouseDown:r=>{_.drag.current.isDown=!0,_.drag.current.startX=r.pageX-(_.carousel.current?.offsetLeft||0),_.drag.current.scrollLeft=_.carousel.current?.scrollLeft||0,_.drag.current.isDragging=!0,B()},onMouseLeave:()=>{_.drag.current.isDown&&(_.drag.current.isDown=!1,_.drag.current.isDragging=!1,B())},onMouseUp:()=>{_.drag.current.isDown=!1,_.drag.current.isDragging=!1,B()},onMouseMove:r=>{if(!_.drag.current.isDown)return void(_.drag.current.isMove=!1);r.preventDefault();var e;const l=("pageX"in(e=r)?e.pageX:"touches"in e?e.touches[0].pageX:0)-(_.carousel.current?.offsetLeft||0)-_.drag.current.startX;Math.abs(l)>5&&(_.drag.current.isMove=!0),_.carousel.current&&(_.carousel.current.scrollLeft=_.drag.current.scrollLeft-l,I())},children:A.map((r,l)=>e("div",{ref:r=>{_.childRefs.current[l]=r},style:{display:"inline-block"},children:r},r.key||l))})}),e("div",{className:[h.n23mSliderScrollControls,"n23mSliderScrollControls"].join(" "),children:r("div",{className:[h.n23mSliderScrollControlsButtons,"n23mSliderScrollControlsButtons"].join(" "),children:[e(a,{ref:_.buttonLeft,height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Prev",onClick:X,borderColor:"black",backgroundColorDisabled:"#F2F0EF",children:e(d,{width:24,height:24})}),e(a,{ref:_.buttonRight,height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Next",onClick:W,borderColor:"black",backgroundColorDisabled:"#F2F0EF",children:e(g,{width:24,height:24})})]})})]})};S.displayName="SliderScroll";export{S as SliderScroll};
+import{jsxs as r,jsx as e}from"react/jsx-runtime";import{useRef as l,Children as t,cloneElement as n,useState as o,useEffect as i,useMemo as c,useCallback as s}from"react";import{B as a}from"./Button-czA3IzD8.js";import{u}from"./useWindowSize-CAQRbyxi.js";import{I as d,a as g}from"./IconLocate-1fQEMRDH.js";import{s as m,g as f}from"./style-inject.es-CrVRO2OA.js";import"./Loader-hxKQ6g7j.js";import"./TextBox-CT8wp519.js";var h={n23mSliderScrollWrapper:"SliderScroll-module_n23mSliderScrollWrapper__qj8cS",n23mSliderScrollTrack:"SliderScroll-module_n23mSliderScrollTrack__y6G6v",dragging:"SliderScroll-module_dragging__gH9AX",n23mSliderScrollControls:"SliderScroll-module_n23mSliderScrollControls__TAnlc",n23mSliderScrollControlsButtons:"SliderScroll-module_n23mSliderScrollControlsButtons__-PK4Y"};m("@layer n23mSliderScroll{.SliderScroll-module_n23mSliderScrollWrapper__qj8cS{display:grid;position:relative}.SliderScroll-module_n23mSliderScrollTrack__y6G6v{-ms-overflow-style:none;-webkit-overflow-scrolling:touch;display:flex;flex-wrap:nowrap;gap:var(--sliderscroll-g);overflow-x:scroll;scrollbar-width:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;will-change:scroll-position;&::-webkit-scrollbar{display:none}&>*{flex-shrink:0}&.SliderScroll-module_dragging__gH9AX,&.SliderScroll-module_dragging__gH9AX a{cursor:grabbing}}.SliderScroll-module_n23mSliderScrollControls__TAnlc{align-items:center;display:flex;justify-content:flex-end;margin-left:20px;margin-right:20px}.SliderScroll-module_n23mSliderScrollControlsButtons__-PK4Y{display:flex;gap:10px;margin-top:10px}}");const S=({children:m,className:S,gap:p="5px",isCircular:w=!1,autoPlay:b=!1,autoPlaySpeed:v=.5,style:L})=>{const _={carousel:l(null),buttonLeft:l(null),buttonRight:l(null),showArrowLeft:l(!1),showArrowRight:l(!1),isSliding:l(!1),animationFrameId:l(null),isHovered:l(!1),drag:l({isDown:!1,startX:0,scrollLeft:0,isMove:!1,isDragging:!1}),childRefs:l([])},F=t.toArray(m),x=F.length,y=w?F.map((r,e)=>n(r,{key:`cb-${e}`})):[],k=w?F.map((r,e)=>n(r,{key:`ca-${e}`})):[],A=w?[...y,...F,...k]:F,[C,D]=o([]),{width:j}=u();i(()=>{if(!_.carousel.current)return;const r=_.childRefs.current.map(r=>{if(!r)return 0;const e=getComputedStyle(r),l=parseFloat(e.marginLeft)||0,t=parseFloat(e.marginRight)||0;return r.offsetWidth+l+t+Number(p.slice(0,-2))});D(r)},[m,j,p]);const M=c(()=>{const r=[];let e=0;for(const l of C)r.push(e),e+=l;return r},[C]);i(()=>{w&&_.carousel.current&&M.length&&(_.carousel.current.scrollLeft=(M[x]||0)-2*Number(p.slice(0,-2))),I()},[j,M,x,w]),i(()=>{N(!1)},[]),i(()=>{if(!w)return;if(!b)return void(_.animationFrameId.current&&(cancelAnimationFrame(_.animationFrameId.current),_.animationFrameId.current=null));let r;const e=()=>{if(!_.carousel.current)return;if(_.isSliding.current||_.isHovered.current)return void(_.animationFrameId.current=requestAnimationFrame(e));const r=_.carousel.current;let l=r.scrollLeft+v;if(w&&M.length&&C.length){const r=M[M.length-1]+(C[C.length-1]||0),e=M[x]||0,t=M[x+F.length]||r;l>t+C[0]/2&&(l-=t-e)}r.scrollLeft=l,I(),_.animationFrameId.current=requestAnimationFrame(e)};return r=setTimeout(()=>{_.animationFrameId.current=requestAnimationFrame(e)},500),()=>{r&&clearTimeout(r),_.animationFrameId.current&&(cancelAnimationFrame(_.animationFrameId.current),_.animationFrameId.current=null)}},[b,v,w,M,C,x,F.length]);const I=()=>{if(_.carousel.current){if(w)_.showArrowLeft.current=!0,_.showArrowRight.current=!0;else{const r=_.carousel.current.scrollLeft,e=_.carousel.current.scrollWidth-_.carousel.current.clientWidth;_.showArrowLeft.current=r>0,_.showArrowRight.current=r<e-1}N(_.isSliding.current)}},N=r=>{_.buttonLeft.current&&(_.buttonLeft.current.disabled=r||!_.showArrowLeft.current),_.buttonRight.current&&(_.buttonRight.current.disabled=r||!_.showArrowRight.current)},R=(r,e,l=300)=>{if(_.isSliding.current)return;_.isSliding.current=!0,N(!0);const t=r.scrollLeft,n=e-t,o=performance.now(),i=e=>{const c=e-o,s=Math.min(c/l,1);var a;r.scrollLeft=t+n*((a=s)<.5?4*a*a*a:1-Math.pow(-2*a+2,3)/2),s<1?requestAnimationFrame(i):(_.isSliding.current=!1,N(!1),I())};requestAnimationFrame(i)},W=s(()=>{if(!_.carousel.current)return;if(!M.length||!C.length)return;const r=_.carousel.current,e=r.offsetWidth,l=r.scrollLeft;let t=M.findIndex((r,e)=>r>l);-1===t?t=M.length-1:t>0&&t--;let n,o=0,i=0;for(let r=t;r<M.length&&(o+=C[r],i++,!(o>=e));r++);const c=t+i-1;n=M[c]+C[c]>l+e+1?c:t+i;let s=M[n]-2*Number(p.slice(0,-2));if(s<0&&(s=0),w){s=(M[x]||0)+s-(M[x]||0)}R(_.carousel.current,s,400)},[M,C,p,x,w,F.length]),X=s(()=>{if(!_.carousel.current)return;if(!M.length||!C.length)return;const r=_.carousel.current,e=r.offsetWidth,l=r.scrollLeft;let t=0;for(let r=0;r<M.length;r++)if(M[r]>l){t=r-1;break}t<0&&(t=0);let n=0,o=0;for(let r=t;r>=0&&(n+=C[r],n<=e);r--)o++;let i=t;w||(i=Math.max(o-1,i));let c=M[i]+C[i]-e+Number(p.slice(0,-2));if(c<0&&(c=0),w){c=(M[x]||0)+c-(M[x]||0)+Number(p.slice(0,-2))}R(_.carousel.current,c,400)},[M,C,p,x,w]),B=()=>{_.carousel.current&&(_.drag.current.isDragging?_.carousel.current.classList.add(h.dragging):_.carousel.current.classList.remove(h.dragging))};return r("div",{className:["n23mSliderScroll",S].filter(Boolean).join(" "),style:{...f({"--sliderscroll-g":p,height:"calc(100% - 60px)"}),...L},onMouseEnter:()=>{_.isHovered.current=!0},onMouseLeave:()=>{_.isHovered.current=!1},children:[e("div",{className:[h.n23mSliderScrollWrapper,"n23mSliderScrollWrapper"].join(" "),children:e("div",{className:h.n23mSliderScrollTrack,ref:_.carousel,onClick:r=>{_.drag.current.isMove&&(r.preventDefault(),r.stopPropagation())},onScroll:()=>{if(_.carousel.current){if(w&&M.length&&C.length){const r=_.carousel.current.scrollLeft,e=M[M.length-1]+(C[C.length-1]||0),l=M[x]||0,t=M[x+F.length]||e;r<l-C[0]/2?_.carousel.current.scrollLeft=r+(M[F.length+x]-l):r>t+C[0]/2&&(_.carousel.current.scrollLeft=r-(t-l))}I()}},onMouseDown:r=>{_.drag.current.isDown=!0,_.drag.current.startX=r.pageX-(_.carousel.current?.offsetLeft||0),_.drag.current.scrollLeft=_.carousel.current?.scrollLeft||0,_.drag.current.isDragging=!0,B()},onMouseLeave:()=>{_.drag.current.isDown&&(_.drag.current.isDown=!1,_.drag.current.isDragging=!1,B())},onMouseUp:()=>{_.drag.current.isDown=!1,_.drag.current.isDragging=!1,B()},onMouseMove:r=>{if(!_.drag.current.isDown)return void(_.drag.current.isMove=!1);r.preventDefault();var e;const l=("pageX"in(e=r)?e.pageX:"touches"in e?e.touches[0].pageX:0)-(_.carousel.current?.offsetLeft||0)-_.drag.current.startX;Math.abs(l)>5&&(_.drag.current.isMove=!0),_.carousel.current&&(_.carousel.current.scrollLeft=_.drag.current.scrollLeft-l,I())},children:A.map((r,l)=>e("div",{ref:r=>{_.childRefs.current[l]=r},style:{display:"inline-block"},children:r},r.key||l))})}),e("div",{className:[h.n23mSliderScrollControls,"n23mSliderScrollControls"].join(" "),children:r("div",{className:[h.n23mSliderScrollControlsButtons,"n23mSliderScrollControlsButtons"].join(" "),children:[e(a,{ref:_.buttonLeft,height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Prev",onClick:X,borderColor:"black",backgroundColorDisabled:"#F2F0EF",children:e(d,{width:24,height:24})}),e(a,{ref:_.buttonRight,height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Next",onClick:W,borderColor:"black",backgroundColorDisabled:"#F2F0EF",children:e(g,{width:24,height:24})})]})})]})};S.displayName="SliderScroll";export{S as SliderScroll};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najwer23morsels",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "main": "./lib/index.js",
   "module": "./lib/index.mjs",
   "types": "./lib/index.d.ts",