najwer23morsels 0.10.7 → 0.10.8

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 c,useMemo as i,useCallback as s}from"react";import{B as u}from"./Button-BdJvyN9u.js";import{s as a}from"./style-inject.es-BnTDb6vU.js";import{u as d}from"./useWindowSize-CAQRbyxi.js";import{a as m,I as g}from"./IconArrowRight-Bs6HQ5lc.js";import"./Loader-CL-mm0LT.js";import"./TextBox-B47QWA9m.js";var f={n23mSliderScrollWrapper:"SliderScroll-module_n23mSliderScrollWrapper__MqXIk",n23mSliderScrollTrack:"SliderScroll-module_n23mSliderScrollTrack__FcsTl",dragging:"SliderScroll-module_dragging__iE4mo",n23mSliderScrollControls:"SliderScroll-module_n23mSliderScrollControls__i64nM",n23mSliderScrollControlsButtons:"SliderScroll-module_n23mSliderScrollControlsButtons__W-5rb"};a("@layer n23mSliderScroll{.SliderScroll-module_n23mSliderScrollWrapper__MqXIk{display:grid;position:relative}.SliderScroll-module_n23mSliderScrollTrack__FcsTl{-ms-overflow-style:none;-webkit-overflow-scrolling:touch;display:flex;flex-wrap:nowrap;gap:var(--sliderscroll-gap);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__iE4mo,&.SliderScroll-module_dragging__iE4mo a{cursor:grabbing}}.SliderScroll-module_n23mSliderScrollControls__i64nM{align-items:center;display:flex;justify-content:flex-end;margin-left:20px;margin-right:20px}.SliderScroll-module_n23mSliderScrollControlsButtons__W-5rb{display:flex;gap:10px;margin-top:10px}}");const S=({children:a,className:S,gap:p="5px",isCircular:h=!1,autoPlay:_=!1,autoPlaySpeed:b=.5})=>{const v=l(null),w=l(null),k=l(null),x=l(!1),L=l(!1),F=l(!1),y=l(null),C=l(!1),M=t.toArray(a),D=M.length,j=h?M.map((r,e)=>n(r,{key:`cb-${e}`})):[],W=h?M.map((r,e)=>n(r,{key:`ca-${e}`})):[],N=l([]),A=h?[...j,...M,...W]:M,[B,X]=o([]),{width:E}=d();c(()=>{if(!v.current)return;const r=N.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))});X(r)},[a,E,p]);const q=i(()=>{const r=[];let e=0;for(const l of B)r.push(e),e+=l;return r},[B]);c(()=>{h&&v.current&&q.length&&(v.current.scrollLeft=(q[D]||0)-2*Number(p.slice(0,-2))),T()},[E,q,D,h]);const T=()=>{if(v.current){if(h)x.current=!0,L.current=!0;else{const r=v.current.scrollLeft,e=v.current.scrollWidth-v.current.clientWidth;x.current=r>0,L.current=r<e-1}I(F.current)}},I=r=>{w.current&&(w.current.disabled=r||!x.current),k.current&&(k.current.disabled=r||!L.current)},P=(r,e,l=300)=>{if(F.current)return;F.current=!0,I(!0);const t=r.scrollLeft,n=e-t,o=performance.now(),c=e=>{const i=e-o,s=Math.min(i/l,1);var u;r.scrollLeft=t+n*((u=s)<.5?4*u*u*u:1-Math.pow(-2*u+2,3)/2),s<1?requestAnimationFrame(c):(F.current=!1,I(!1),T())};requestAnimationFrame(c)},z=s(()=>{if(!v.current)return;if(!q.length||!B.length)return;const r=v.current,e=r.offsetWidth,l=r.scrollLeft;let t=q.findIndex((r,e)=>r>l);-1===t?t=q.length-1:t>0&&t--;let n,o=0,c=0;for(let r=t;r<q.length&&(o+=B[r],c++,!(o>=e));r++);const i=t+c-1;n=q[i]+B[i]>l+e+1?i:t+c;let s=q[n]-2*Number(p.slice(0,-2));if(s<0&&(s=0),h){s=(q[D]||0)+s-(q[D]||0)}P(v.current,s,400)},[q,B,p,D,h,M.length]),R=s(()=>{if(!v.current)return;if(!q.length||!B.length)return;const r=v.current,e=r.offsetWidth,l=r.scrollLeft;let t=0;for(let r=0;r<q.length;r++)if(q[r]>l){t=r-1;break}t<0&&(t=0);let n=0,o=0;for(let r=t;r>=0&&(n+=B[r],n<=e);r--)o++;let c=t;h||(c=Math.max(o-1,c));let i=q[c]+B[c]-e;if(i<0&&(i=0),h){i=(q[D]||0)+i-(q[D]||0)+Number(p.slice(0,-2))}P(v.current,i,400)},[q,B,p,D,h]),$=l({isDown:!1,startX:0,scrollLeft:0,isMove:!1,isDragging:!1}),U=()=>{v.current&&($.current.isDragging?v.current.classList.add(f.dragging):v.current.classList.remove(f.dragging))};c(()=>{I(!1)},[]);return c(()=>{if(!h)return;if(!_)return void(y.current&&(cancelAnimationFrame(y.current),y.current=null));const r=()=>{if(!v.current)return;if(F.current||C.current)return void(y.current=requestAnimationFrame(r));const e=v.current;let l=e.scrollLeft+b;if(h&&q.length&&B.length){const r=q[q.length-1]+(B[B.length-1]||0),e=q[D]||0,t=q[D+M.length]||r;l>t+B[0]/2&&(l-=t-e)}e.scrollLeft=l,T(),y.current=requestAnimationFrame(r)};return y.current=requestAnimationFrame(r),()=>{y.current&&(cancelAnimationFrame(y.current),y.current=null)}},[_,b,h,q,B,D,M.length]),r("div",{className:["n23mSliderScroll",S].filter(Boolean).join(" "),style:{"--sliderscroll-gap":p,height:"calc(100% - 60px)"},onMouseEnter:()=>{C.current=!0},onMouseLeave:()=>{C.current=!1},children:[e("div",{className:[f.n23mSliderScrollWrapper,"n23mSliderScrollWrapper"].join(" "),children:e("div",{className:f.n23mSliderScrollTrack,ref:v,onClick:r=>{$.current.isMove&&(r.preventDefault(),r.stopPropagation())},onScroll:()=>{if(v.current){if(h&&q.length&&B.length){const r=v.current.scrollLeft,e=q[q.length-1]+(B[B.length-1]||0),l=q[D]||0,t=q[D+M.length]||e;r<l-B[0]/2?v.current.scrollLeft=r+(q[M.length+D]-l):r>t+B[0]/2&&(v.current.scrollLeft=r-(t-l))}T()}},onMouseDown:r=>{$.current.isDown=!0,$.current.startX=r.pageX-(v.current?.offsetLeft||0),$.current.scrollLeft=v.current?.scrollLeft||0,$.current.isDragging=!0,U()},onMouseLeave:()=>{$.current.isDown&&($.current.isDown=!1,$.current.isDragging=!1,U())},onMouseUp:()=>{$.current.isDown=!1,$.current.isDragging=!1,U()},onMouseMove:r=>{if(!$.current.isDown)return void($.current.isMove=!1);r.preventDefault();var e;const l=("pageX"in(e=r)?e.pageX:"touches"in e?e.touches[0].pageX:0)-(v.current?.offsetLeft||0)-$.current.startX;Math.abs(l)>5&&($.current.isMove=!0),v.current&&(v.current.scrollLeft=$.current.scrollLeft-l,T())},style:{whiteSpace:"nowrap"},children:A.map((r,l)=>e("div",{ref:r=>{N.current[l]=r},style:{display:"inline-block"},children:r},r.key||l))})}),e("div",{className:[f.n23mSliderScrollControls,"n23mSliderScrollControls"].join(" "),children:r("div",{className:[f.n23mSliderScrollControlsButtons,"n23mSliderScrollControlsButtons"].join(" "),children:[e(u,{ref:w,height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Prev",onClick:R,borderColor:"black",backgroundColorDisabled:"#F2F0EF",children:e(m,{width:24,height:24})}),e(u,{ref:k,height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Next",onClick:z,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-BdJvyN9u.js";import{s as u}from"./style-inject.es-BnTDb6vU.js";import{u as d}from"./useWindowSize-CAQRbyxi.js";import{a as g,I as m}from"./IconArrowRight-Bs6HQ5lc.js";import"./Loader-CL-mm0LT.js";import"./TextBox-B47QWA9m.js";var f={n23mSliderScrollWrapper:"SliderScroll-module_n23mSliderScrollWrapper__MqXIk",n23mSliderScrollTrack:"SliderScroll-module_n23mSliderScrollTrack__FcsTl",dragging:"SliderScroll-module_dragging__iE4mo",n23mSliderScrollControls:"SliderScroll-module_n23mSliderScrollControls__i64nM",n23mSliderScrollControlsButtons:"SliderScroll-module_n23mSliderScrollControlsButtons__W-5rb"};u("@layer n23mSliderScroll{.SliderScroll-module_n23mSliderScrollWrapper__MqXIk{display:grid;position:relative}.SliderScroll-module_n23mSliderScrollTrack__FcsTl{-ms-overflow-style:none;-webkit-overflow-scrolling:touch;display:flex;flex-wrap:nowrap;gap:var(--sliderscroll-gap);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__iE4mo,&.SliderScroll-module_dragging__iE4mo a{cursor:grabbing}}.SliderScroll-module_n23mSliderScrollControls__i64nM{align-items:center;display:flex;justify-content:flex-end;margin-left:20px;margin-right:20px}.SliderScroll-module_n23mSliderScrollControlsButtons__W-5rb{display:flex;gap:10px;margin-top:10px}}");const h=({children:u,className:h,gap:S="5px",isCircular:p=!1,autoPlay:w=!1,autoPlaySpeed:b=.5})=>{const F={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([])},_=t.toArray(u),v=_.length,L=p?_.map((r,e)=>n(r,{key:`cb-${e}`})):[],k=p?_.map((r,e)=>n(r,{key:`ca-${e}`})):[],x=p?[...L,..._,...k]:_,[y,C]=o([]),{width:M}=d();i(()=>{if(!F.carousel.current)return;const r=F.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(S.slice(0,-2))});C(r)},[u,M,S]);const A=c(()=>{const r=[];let e=0;for(const l of y)r.push(e),e+=l;return r},[y]);i(()=>{p&&F.carousel.current&&A.length&&(F.carousel.current.scrollLeft=(A[v]||0)-2*Number(S.slice(0,-2))),D()},[M,A,v,p]),i(()=>{I(!1)},[]),i(()=>{if(!p)return;if(!w)return void(F.animationFrameId.current&&(cancelAnimationFrame(F.animationFrameId.current),F.animationFrameId.current=null));let r;const e=()=>{if(!F.carousel.current)return;if(F.isSliding.current||F.isHovered.current)return void(F.animationFrameId.current=requestAnimationFrame(e));const r=F.carousel.current;let l=r.scrollLeft+b;if(p&&A.length&&y.length){const r=A[A.length-1]+(y[y.length-1]||0),e=A[v]||0,t=A[v+_.length]||r;l>t+y[0]/2&&(l-=t-e)}r.scrollLeft=l,D(),F.animationFrameId.current=requestAnimationFrame(e)};return r=setTimeout(()=>{F.animationFrameId.current=requestAnimationFrame(e)},500),()=>{r&&clearTimeout(r),F.animationFrameId.current&&(cancelAnimationFrame(F.animationFrameId.current),F.animationFrameId.current=null)}},[w,b,p,A,y,v,_.length]);const D=()=>{if(F.carousel.current){if(p)F.showArrowLeft.current=!0,F.showArrowRight.current=!0;else{const r=F.carousel.current.scrollLeft,e=F.carousel.current.scrollWidth-F.carousel.current.clientWidth;F.showArrowLeft.current=r>0,F.showArrowRight.current=r<e-1}I(F.isSliding.current)}},I=r=>{F.buttonLeft.current&&(F.buttonLeft.current.disabled=r||!F.showArrowLeft.current),F.buttonRight.current&&(F.buttonRight.current.disabled=r||!F.showArrowRight.current)},j=(r,e,l=300)=>{if(F.isSliding.current)return;F.isSliding.current=!0,I(!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):(F.isSliding.current=!1,I(!1),D())};requestAnimationFrame(i)},R=s(()=>{if(!F.carousel.current)return;if(!A.length||!y.length)return;const r=F.carousel.current,e=r.offsetWidth,l=r.scrollLeft;let t=A.findIndex((r,e)=>r>l);-1===t?t=A.length-1:t>0&&t--;let n,o=0,i=0;for(let r=t;r<A.length&&(o+=y[r],i++,!(o>=e));r++);const c=t+i-1;n=A[c]+y[c]>l+e+1?c:t+i;let s=A[n]-2*Number(S.slice(0,-2));if(s<0&&(s=0),p){s=(A[v]||0)+s-(A[v]||0)}j(F.carousel.current,s,400)},[A,y,S,v,p,_.length]),W=s(()=>{if(!F.carousel.current)return;if(!A.length||!y.length)return;const r=F.carousel.current,e=r.offsetWidth,l=r.scrollLeft;let t=0;for(let r=0;r<A.length;r++)if(A[r]>l){t=r-1;break}t<0&&(t=0);let n=0,o=0;for(let r=t;r>=0&&(n+=y[r],n<=e);r--)o++;let i=t;p||(i=Math.max(o-1,i));let c=A[i]+y[i]-e;if(c<0&&(c=0),p){c=(A[v]||0)+c-(A[v]||0)+Number(S.slice(0,-2))}j(F.carousel.current,c,400)},[A,y,S,v,p]),N=()=>{F.carousel.current&&(F.drag.current.isDragging?F.carousel.current.classList.add(f.dragging):F.carousel.current.classList.remove(f.dragging))};return r("div",{className:["n23mSliderScroll",h].filter(Boolean).join(" "),style:{"--sliderscroll-gap":S,height:"calc(100% - 60px)"},onMouseEnter:()=>{F.isHovered.current=!0},onMouseLeave:()=>{F.isHovered.current=!1},children:[e("div",{className:[f.n23mSliderScrollWrapper,"n23mSliderScrollWrapper"].join(" "),children:e("div",{className:f.n23mSliderScrollTrack,ref:F.carousel,onClick:r=>{F.drag.current.isMove&&(r.preventDefault(),r.stopPropagation())},onScroll:()=>{if(F.carousel.current){if(p&&A.length&&y.length){const r=F.carousel.current.scrollLeft,e=A[A.length-1]+(y[y.length-1]||0),l=A[v]||0,t=A[v+_.length]||e;r<l-y[0]/2?F.carousel.current.scrollLeft=r+(A[_.length+v]-l):r>t+y[0]/2&&(F.carousel.current.scrollLeft=r-(t-l))}D()}},onMouseDown:r=>{F.drag.current.isDown=!0,F.drag.current.startX=r.pageX-(F.carousel.current?.offsetLeft||0),F.drag.current.scrollLeft=F.carousel.current?.scrollLeft||0,F.drag.current.isDragging=!0,N()},onMouseLeave:()=>{F.drag.current.isDown&&(F.drag.current.isDown=!1,F.drag.current.isDragging=!1,N())},onMouseUp:()=>{F.drag.current.isDown=!1,F.drag.current.isDragging=!1,N()},onMouseMove:r=>{if(!F.drag.current.isDown)return void(F.drag.current.isMove=!1);r.preventDefault();var e;const l=("pageX"in(e=r)?e.pageX:"touches"in e?e.touches[0].pageX:0)-(F.carousel.current?.offsetLeft||0)-F.drag.current.startX;Math.abs(l)>5&&(F.drag.current.isMove=!0),F.carousel.current&&(F.carousel.current.scrollLeft=F.drag.current.scrollLeft-l,D())},style:{whiteSpace:"nowrap"},children:x.map((r,l)=>e("div",{ref:r=>{F.childRefs.current[l]=r},style:{display:"inline-block"},children:r},r.key||l))})}),e("div",{className:[f.n23mSliderScrollControls,"n23mSliderScrollControls"].join(" "),children:r("div",{className:[f.n23mSliderScrollControlsButtons,"n23mSliderScrollControlsButtons"].join(" "),children:[e(a,{ref:F.buttonLeft,height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Prev",onClick:W,borderColor:"black",backgroundColorDisabled:"#F2F0EF",children:e(g,{width:24,height:24})}),e(a,{ref:F.buttonRight,height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Next",onClick:R,borderColor:"black",backgroundColorDisabled:"#F2F0EF",children:e(m,{width:24,height:24})})]})})]})};h.displayName="SliderScroll";export{h as SliderScroll};

package/package.json

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