najwer23morsels 0.10.18 → 0.10.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/Slider.js +1 -1
- package/lib/Sliderscroll.js +1 -1
- package/package.json +1 -1
package/lib/Slider.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as
|
|
1
|
+
import{jsxs as e,jsx as r,Fragment as l}from"react/jsx-runtime";import i,{useState as n,useRef as t,useLayoutEffect as o}from"react";import{B as d}from"./Button-CWlClUJB.js";import{u as s}from"./useWindowSize-CAQRbyxi.js";import{a,I as c}from"./IconArrowRight-Bs6HQ5lc.js";import{L as m}from"./Loader-NzjKMGGE.js";import{T as u}from"./TextBox-DOs5bB5n.js";import{s as h}from"./style-inject.es-BnTDb6vU.js";var g={n23mSlider:"Slider-module_n23mSlider__YOEan",dragging:"Slider-module_dragging__F3UtX",n23mSliderContainerSlider:"Slider-module_n23mSliderContainerSlider__-1M4s",n23mSliderSlideWrapper:"Slider-module_n23mSliderSlideWrapper__hbDsw",n23mSliderSlide:"Slider-module_n23mSliderSlide__Hv6uj",n23mSliderControls:"Slider-module_n23mSliderControls__DLrdZ",n23mSliderControlsButtons:"Slider-module_n23mSliderControlsButtons__C1ypH",n23mSliderCounter:"Slider-module_n23mSliderCounter__UJLZw"};h("@layer n23mSlider{.Slider-module_n23mSlider__YOEan{width:100%;&.Slider-module_dragging__F3UtX,&.Slider-module_dragging__F3UtX a{cursor:grabbing}}.Slider-module_n23mSliderContainerSlider__-1M4s{display:flex;flex-direction:column;gap:10px;height:100%;position:relative;user-select:none;width:100%}.Slider-module_n23mSliderSlideWrapper__hbDsw{height:100%;overflow:hidden;position:relative;width:100%;will-change:transform}.Slider-module_n23mSliderSlide__Hv6uj{height:100%;overflow:hidden;position:absolute;top:0;will-change:transform;&>*{height:100%;width:100%}}.Slider-module_n23mSliderControls__DLrdZ{align-items:center;display:flex;margin-left:20px;margin-right:20px}.Slider-module_n23mSliderControlsButtons__C1ypH{display:flex;gap:10px;margin-top:10px}.Slider-module_n23mSliderCounter__UJLZw{align-items:center;align-items:flex-start;display:flex;height:50px;justify-content:center}}");const S=(e,r,l=!1,n)=>(l?e.slice(0,r):e.slice(-r)).map((e,r)=>i.cloneElement(e,{key:`${l?"clone-first":"clone-last"}-${r} ${n}`,className:e.props.className})),p=({isCircular:h=!1,children:p,className:_,loading:f=!1,loaderColor:x="black",slidesConfig:b={mobile:{items:1,slidesToScroll:1},tablet:{items:2,slidesToScroll:2},desktop:{items:3,slidesToScroll:3}},slideSpacingPx:C=10})=>{const w=i.Children.toArray(p).filter(i.isValidElement),{width:v}=s(),[y,E]=n(0),j=t(null),T=t(null),[k,L]=n(h?2*w.length:0),[F,$]=n(!1),N=t([]),[B,z]=n(null),[X,D]=n(0),M=t(!1);let W,U,H,Z;v<767.98?(W=b.mobile.items,U=b.mobile.slidesToScroll,H="transform 0.4s cubic-bezier(.4,0,.2,1)",Z=450):v<1199.98?(W=b.tablet.items,U=b.tablet.slidesToScroll,H="transform 0.4s cubic-bezier(.4,0,.2,1)",Z=450):(W=b.desktop.items,U=b.desktop.slidesToScroll,H="transform 0.4s cubic-bezier(.4,0,.2,1)",Z=450),o(()=>{let e;const r=()=>{j.current&&E(j.current.offsetWidth),L(h?2*w.length:0)},l=()=>{clearTimeout(e),e=window.setTimeout(r,0),$(!1)};return r(),window.addEventListener("resize",l),()=>{clearTimeout(e),window.removeEventListener("resize",l)}},[f,h,W,w.length]);const A=(y-C*(W-1))/W;let I=h?[...S(w,w.length,!1,1),...S(w,w.length,!1,2),...w,...S(w,w.length,!0,3),...S(w,w.length,!0,4)]:w;o(()=>{N.current.forEach((e,r)=>{if(!e)return;let l=0,i=0;1===W&&1!==w.length?(l=40,i=40):2===W?(l=20,i=20):4===W?(l=10,i=10):3===W&&(l=12.5,i=12.5);const n=(r-k)*(A+C-i)+(y-(A-l)*W-C*(W-1))/2;e.style.transition=F?H:"none",e.style.transform=`translateX(${n}px)`})},[k,y,F,I.length,W,A,C,f]),o(()=>{if(!F)return;let e;const r=()=>{let l=k;k<2*W&&h?l=k+2*w.length:k>=2*w.length+W&&h&&(l=k-w.length),l!==k&&h&&L(l),$(!1),N.current.forEach(e=>{e&&e.removeEventListener("transitionend",r)}),clearTimeout(e)};return N.current.forEach(e=>{e&&e.addEventListener("transitionend",r)}),e=window.setTimeout(()=>{$(!1),N.current.forEach(e=>{e&&e.removeEventListener("transitionend",r)})},Z),()=>{N.current.forEach(e=>{e&&e.removeEventListener("transitionend",r)}),clearTimeout(e)}},[k,h,F,w.length,W,I.length,f]);const J=()=>{F||($(!0),L(e=>e+U))},O=()=>{F||($(!0),L(e=>e-U))};return e("div",{ref:T,className:[g.n23mSlider,"n23mSlider",_].filter(Boolean).join(" "),style:{height:f?"calc(100% - 2px)":"calc(100% - 60px)"},children:[f&&r(m,{loaderColor:x}),!f&&e(l,{children:[r("div",{className:[g.n23mSliderContainerSlider].filter(Boolean).join(" "),onTouchStart:e=>{1===e.touches.length&&(z(e.touches[0].clientX),D(0),M.current=!0,T.current&&T.current.classList.add(g.dragging))},onTouchMove:e=>{null!==B&&D(e.touches[0].clientX-B)},onTouchEnd:()=>{X>50&&!F&&(h||0!==k)?O():X<-50&&!(F||!h&&k+W>=w.length)&&J(),z(null),D(0),M.current=!1,T.current&&T.current.classList.remove(g.dragging)},onMouseDown:e=>{z(e.clientX),D(0),M.current=!0,T.current&&T.current.classList.add(g.dragging)},onMouseMove:e=>{null!==B&&D(e.clientX-B)},onMouseUp:()=>{X>50&&!F&&(h||0!==k)?O():X<-50&&!(F||!h&&k+W>=w.length)&&J(),z(null),D(0),M.current=!1,T.current&&T.current.classList.remove(g.dragging)},children:r("div",{className:[g.n23mSliderSlideWrapper,"n23mSliderSlideWrapper"].join(" "),ref:j,style:{display:"flex",gap:`${C}px`,overflow:"hidden",width:"100%",boxSizing:"border-box"},children:I.map((e,l)=>r("div",{ref:e=>{N.current[l]=e},className:g.n23mSliderSlide,style:{width:1===W&&1===w.length?"100%":1===W?`calc(${A}px - 40px)`:2===W?`calc(${A}px - 20px)`:3===W?`calc(${A}px - 12.5px)`:4===W?`calc(${A}px - 10px)`:`${A}px`},"aria-hidden":l<k||l>=k+W,children:e},e.key??l))})}),e("div",{className:[g.n23mSliderControls,"n23mSliderControls"].join(" "),style:{justifyContent:1===W?"space-between":"flex-end"},children:[1===W&&r("div",{className:[g.n23mSliderCounter,"n23mSliderCounter"].join(" "),children:r(u,{mobileSize:16,desktopSize:16,color:"black",children:h?`${(()=>{if(!h)return k;const e=w.length;return e<1?0:(k+e)%e})()+1} / ${w.length}`:`${k+1} / ${w.length}`})}),e("div",{className:[g.n23mSliderControlsButtons,"n23mSliderControlsButtons"].join(" "),children:[r(d,{height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Prev",onClick:O,borderColor:"black",backgroundColorDisabled:"#F2F0EF",disabled:F||!h&&0===k,children:r(a,{width:24,height:24})}),r(d,{height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Next",borderColor:"black",backgroundColorDisabled:"#F2F0EF",onClick:J,disabled:F||!h&&k+W>=w.length,children:r(c,{width:24,height:24})})]})]})]})]})};p.displayName="Slider";export{p as Slider};
|
package/lib/Sliderscroll.js
CHANGED
|
@@ -1 +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-CWlClUJB.js";import{u}from"./useWindowSize-CAQRbyxi.js";import{a as d,I as g}from"./IconArrowRight-Bs6HQ5lc.js";import{s as m}from"./style-inject.es-BnTDb6vU.js";import"./Loader-NzjKMGGE.js";import"./TextBox-DOs5bB5n.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"};m("@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:m,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(m),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
|
|
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-CWlClUJB.js";import{u}from"./useWindowSize-CAQRbyxi.js";import{a as d,I as g}from"./IconArrowRight-Bs6HQ5lc.js";import{s as m}from"./style-inject.es-BnTDb6vU.js";import"./Loader-NzjKMGGE.js";import"./TextBox-DOs5bB5n.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"};m("@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:m,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(m),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]:_,[C,y]=o([]),{width:M}=u();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))});y(r)},[m,M,S]);const A=c(()=>{const r=[];let e=0;for(const l of C)r.push(e),e+=l;return r},[C]);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&&C.length){const r=A[A.length-1]+(C[C.length-1]||0),e=A[v]||0,t=A[v+_.length]||r;l>t+C[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,C,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||!C.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+=C[r],i++,!(o>=e));r++);const c=t+i-1;n=A[c]+C[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,C,S,v,p,_.length]),W=s(()=>{if(!F.carousel.current)return;if(!A.length||!C.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+=C[r],n<=e);r--)o++;let i=t;p||(i=Math.max(o-1,i));let c=A[i]+C[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,C,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&&C.length){const r=F.carousel.current.scrollLeft,e=A[A.length-1]+(C[C.length-1]||0),l=A[v]||0,t=A[v+_.length]||e;r<l-C[0]/2?F.carousel.current.scrollLeft=r+(A[_.length+v]-l):r>t+C[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())},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(d,{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(g,{width:24,height:24})})]})})]})};h.displayName="SliderScroll";export{h as SliderScroll};
|