najwer23morsels 0.10.5 → 0.10.6

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 o,useLayoutEffect as n,useEffect as c}from"react";import{B as i}from"./Button-BdJvyN9u.js";import{s}from"./style-inject.es-BnTDb6vU.js";import{u as a}from"./useWindowSize-CAQRbyxi.js";import{a as u,I as d}from"./IconArrowRight-Bs6HQ5lc.js";import"./Loader-CL-mm0LT.js";import"./TextBox-B47QWA9m.js";var m={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"};s("@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 f=({children:s,className:f,gap:S="5px",isCircular:p=!1})=>{const g=l(null),h=l(null),_=l(null),w=l(!1),x=l(!1),M=l(!1),b=l(!1),v=t.toArray(s),C=v.length,k=p?v.map((r,e)=>o(r,{key:`clone-before-${e}`})):[],L=p?v.map((r,e)=>o(r,{key:`clone-after-${e}`})):[],F=()=>{if(!g.current||!g.current.firstElementChild)return 0;const r=g.current.firstElementChild,e=getComputedStyle(r);return r.offsetWidth+parseInt(e.marginLeft||"0")+parseInt(e.marginRight||"0")+Number(S.slice(0,-2))},y=()=>{if(g.current){if(p)w.current=!0,x.current=!0;else{const r=g.current.scrollLeft,e=g.current.scrollWidth-g.current.clientWidth;w.current=r>0,x.current=r<e}W(M.current)}},W=r=>{h.current&&(h.current.disabled=r||!w.current),_.current&&(_.current.disabled=r||!x.current)},{width:j}=a();n(()=>{if(p){const r=F();g.current&&r&&(g.current.scrollLeft=r*C-(parseInt(S,10)+10))}y()},[j,C,S,s,p]);const D=(r,e,l=300)=>{if(M.current)return;M.current=!0,W(!0);const t=r.scrollLeft,o=e-t,n=performance.now(),c=e=>{const i=e-n,s=Math.min(i/l,1);var a;r.scrollLeft=t+o*((a=s)<.5?4*a*a*a:1-Math.pow(-2*a+2,3)/2),s<1?requestAnimationFrame(c):(M.current=!1,W(!1),y())};requestAnimationFrame(c)},B=l({isDown:!1,startX:0,scrollLeft:0,isMove:!1}),E=()=>{g.current&&(b.current?g.current.classList.add(m.dragging):g.current.classList.remove(m.dragging))};return c(()=>{W(!1)},[]),r("div",{className:["n23mSliderScroll",f].filter(Boolean).join(" "),style:{"--sliderscroll-gap":S,height:"calc(100% - 60px)"},children:[e("div",{className:[m.n23mSliderScrollWrapper,"n23mSliderScrollWrapper"].join(" "),children:r("div",{className:m.n23mSliderScrollTrack,ref:g,onClick:r=>{B.current.isMove&&(r.preventDefault(),r.stopPropagation())},onScroll:()=>{if(g.current){if(p){const r=F();if(!r)return;const e=r*(C+v.length),l=r*C,t=g.current.scrollLeft;t<l-r/2?g.current.scrollLeft=t+r*v.length:t>e+r/2&&(g.current.scrollLeft=t-r*v.length)}y()}},onMouseDown:r=>{B.current.isDown=!0,B.current.startX=r.pageX-(g.current?.offsetLeft||0),B.current.scrollLeft=g.current?.scrollLeft||0,b.current=!0,E()},onMouseLeave:()=>{B.current.isDown&&(B.current.isDown=!1,b.current=!1,E())},onMouseUp:()=>{B.current.isDown=!1,b.current=!1,E()},onMouseMove:r=>{if(!B.current.isDown)return void(B.current.isMove=!1);r.preventDefault();var e;const l=("pageX"in(e=r)?e.pageX:"touches"in e?e.touches[0].pageX:0)-(g.current?.offsetLeft||0)-B.current.startX;Math.abs(l)>5&&(B.current.isMove=!0),g.current&&(g.current.scrollLeft=B.current.scrollLeft-l,y())},children:[p&&k,v,p&&L]})}),e("div",{className:[m.n23mSliderScrollControls,"n23mSliderScrollControls"].join(" "),children:r("div",{className:[m.n23mSliderScrollControlsButtons,"n23mSliderScrollControlsButtons"].join(" "),children:[e(i,{ref:h,height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Prev",onClick:()=>{if(!g.current)return;const r=F();if(!r)return;const e=g.current,l=e.offsetWidth,t=Math.floor(l/r),o=e.scrollLeft/r;let n;o%1>.01?n=Math.floor(o):(n=Math.floor(o)-1,n=Math.max(t-1,n)),p||(n=Math.max(t-1,n)),(r=>{if(!g.current)return;const e=F(),l=g.current.offsetWidth,t=Math.max(0,(r+1)*e-l+10);D(g.current,t,400)})(n)},borderColor:"black",backgroundColorDisabled:"#F2F0EF",children:e(u,{width:24,height:24})}),e(i,{ref:_,height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Next",onClick:()=>{if(!g.current)return;const r=F();if(!r)return;const e=g.current,l=e.offsetWidth,t=Math.floor(l/r),o=e.scrollLeft,n=Math.round(o/r),c=n+t-1;let i;i=(c+1)*r>o+l+1?c:n+t,p||(i=Math.min(v.length-t,i)),(r=>{if(!g.current)return;const e=r*F()-(parseInt(S,10)+10);D(g.current,e,400)})(i)},borderColor:"black",backgroundColorDisabled:"#F2F0EF",children:e(d,{width:24,height:24})})]})})]})};f.displayName="SliderScroll";export{f 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}from"react";import{B as s}from"./Button-BdJvyN9u.js";import{s as a}from"./style-inject.es-BnTDb6vU.js";import{u}from"./useWindowSize-CAQRbyxi.js";import{a as d,I as g}from"./IconArrowRight-Bs6HQ5lc.js";import"./Loader-CL-mm0LT.js";import"./TextBox-B47QWA9m.js";var m={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 f=({children:a,className:f,gap:S="5px",isCircular:p=!1})=>{const h=l(null),_=l(null),b=l(null),w=l(!1),v=l(!1),k=l(!1),x=t.toArray(a),C=x.length,L=p?x.map((r,e)=>n(r,{key:`clone-before-${e}`})):[],y=p?x.map((r,e)=>n(r,{key:`clone-after-${e}`})):[],F=l([]),M=p?[...L,...x,...y]:x,[D,j]=o([]),{width:W}=u();i(()=>{if(!h.current)return;const r=F.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))});j(r)},[a,W,S]);const N=c(()=>{const r=[];let e=0;for(const l of D)r.push(e),e+=l;return r},[D]);i(()=>{p&&h.current&&N.length&&(h.current.scrollLeft=(N[C]||0)-2*Number(S.slice(0,-2))),B()},[W,N,C,p]);const B=()=>{if(h.current){if(p)w.current=!0,v.current=!0;else{const r=h.current.scrollLeft,e=h.current.scrollWidth-h.current.clientWidth;w.current=r>0,v.current=r<e-1}X(k.current)}},X=r=>{_.current&&(_.current.disabled=r||!w.current),b.current&&(b.current.disabled=r||!v.current)},E=(r,e,l=300)=>{if(k.current)return;k.current=!0,X(!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):(k.current=!1,X(!1),B())};requestAnimationFrame(i)},T=l({isDown:!1,startX:0,scrollLeft:0,isMove:!1,isDragging:!1}),I=()=>{h.current&&(T.current.isDragging?h.current.classList.add(m.dragging):h.current.classList.remove(m.dragging))};return i(()=>{X(!1)},[]),r("div",{className:["n23mSliderScroll",f].filter(Boolean).join(" "),style:{"--sliderscroll-gap":S,height:"calc(100% - 60px)"},children:[e("div",{className:[m.n23mSliderScrollWrapper,"n23mSliderScrollWrapper"].join(" "),children:e("div",{className:m.n23mSliderScrollTrack,ref:h,onClick:r=>{T.current.isMove&&(r.preventDefault(),r.stopPropagation())},onScroll:()=>{if(h.current){if(p&&N.length&&D.length){const r=h.current.scrollLeft,e=N[N.length-1]+(D[D.length-1]||0),l=N[C]||0,t=N[C+x.length]||e;r<l-D[0]/2?h.current.scrollLeft=r+(N[x.length+C]-l):r>t+D[0]/2&&(h.current.scrollLeft=r-(t-l))}B()}},onMouseDown:r=>{T.current.isDown=!0,T.current.startX=r.pageX-(h.current?.offsetLeft||0),T.current.scrollLeft=h.current?.scrollLeft||0,T.current.isDragging=!0,I()},onMouseLeave:()=>{T.current.isDown&&(T.current.isDown=!1,T.current.isDragging=!1,I())},onMouseUp:()=>{T.current.isDown=!1,T.current.isDragging=!1,I()},onMouseMove:r=>{if(!T.current.isDown)return void(T.current.isMove=!1);r.preventDefault();var e;const l=("pageX"in(e=r)?e.pageX:"touches"in e?e.touches[0].pageX:0)-(h.current?.offsetLeft||0)-T.current.startX;Math.abs(l)>5&&(T.current.isMove=!0),h.current&&(h.current.scrollLeft=T.current.scrollLeft-l,B())},style:{whiteSpace:"nowrap"},children:M.map((r,l)=>e("div",{ref:r=>{F.current[l]=r},style:{display:"inline-block"},children:r},r.key||l))})}),e("div",{className:[m.n23mSliderScrollControls,"n23mSliderScrollControls"].join(" "),children:r("div",{className:[m.n23mSliderScrollControlsButtons,"n23mSliderScrollControlsButtons"].join(" "),children:[e(s,{ref:_,height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Prev",onClick:()=>{if(!h.current)return;if(!N.length||!D.length)return;const r=h.current,e=r.offsetWidth,l=r.scrollLeft;let t=0;for(let r=0;r<N.length;r++)if(N[r]>l){t=r-1;break}t<0&&(t=0);let n=0,o=0;for(let r=t;r>=0&&(n+=D[r],n<=e);r--)o++;let i=t;p||(i=Math.max(o-1,i));let c=N[i]+D[i]-e;if(c<0&&(c=0),p){c=(N[C]||0)+c-(N[C]||0)+Number(S.slice(0,-2))}E(h.current,c,400)},borderColor:"black",backgroundColorDisabled:"#F2F0EF",children:e(d,{width:24,height:24})}),e(s,{ref:b,height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Next",onClick:()=>{if(!h.current)return;if(!N.length||!D.length)return;const r=h.current,e=r.offsetWidth,l=r.scrollLeft;let t=N.findIndex((r,e)=>r>l);-1===t?t=N.length-1:t>0&&t--;let n,o=0,i=0;for(let r=t;r<N.length&&(o+=D[r],i++,!(o>=e));r++);const c=t+i-1;n=N[c]+D[c]>l+e+1?c:t+i,p||(n=Math.min(x.length-i,n));let s=N[n]-2*Number(S.slice(0,-2));if(s<0&&(s=0),p){s=(N[C]||0)+s-(N[C]||0)}E(h.current,s,400)},borderColor:"black",backgroundColorDisabled:"#F2F0EF",children:e(g,{width:24,height:24})})]})})]})};f.displayName="SliderScroll";export{f as SliderScroll};

package/package.json

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