najwer23morsels 0.9.4 → 0.9.6
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/package.json +1 -1
package/lib/Slider.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as l,Fragment as r}from"react/jsx-runtime";import i,{useState as n,useRef as t,useLayoutEffect as o}from"react";import{s as d}from"./style-inject.es-BnTDb6vU.js";import{L as s}from"./Loader-CL-mm0LT.js";import{a,I as c}from"./IconArrowRight-Bs6HQ5lc.js";import{B as m}from"./Button-DP1hmI08.js";import{u as h}from"./useWindowSize-CAQRbyxi.js";import{T as u}from"./TextBox-B47QWA9m.js";var S={n23mSlider:"Slider-module_n23mSlider__YOEan",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"};d("@layer n23mSlider{.Slider-module_n23mSlider__YOEan{width:100%}.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 p=(e,l,r=!1,n)=>(r?e.slice(0,l):e.slice(-l)).map((e,l)=>i.cloneElement(e,{key:`${r?"clone-first":"clone-last"}-${l} ${n}`,className:e.props.className})),g=({isCircular:d=!1,children:g,className:f,loading:_=!1,loaderColor:x="black",slidesConfig:C={mobile:{items:1,slidesToScroll:1},tablet:{items:2,slidesToScroll:2},desktop:{items:3,slidesToScroll:3}},slideSpacingPx:b=10})=>{const w=i.Children.toArray(g).filter(i.isValidElement),{width:v}=h(),[y,E]=n(0),j=t(null),[T,k]=n(d?2*w.length:0),[$,F]=n(!1),L=t([]),[N,B]=n(null),[z,W]=n(0);let D,H,Z,A;v<767.98?(D=C.mobile.items,H=C.mobile.slidesToScroll,Z="transform 0.4s cubic-bezier(.4,0,.2,1)",A=450):v<1199.98?(D=C.tablet.items,H=C.tablet.slidesToScroll,Z="transform 0.85s cubic-bezier(0.645, 0.045, 0.355, 1)",A=900):(D=C.desktop.items,H=C.desktop.slidesToScroll,Z="transform 0.85s cubic-bezier(0.645, 0.045, 0.355, 1)",A=900),o(()=>{let e;const l=()=>{j.current&&E(j.current.offsetWidth),k(d?2*w.length:0)},r=()=>{clearTimeout(e),e=window.setTimeout(l,150)};return l(),window.addEventListener("resize",r),()=>{clearTimeout(e),window.removeEventListener("resize",r)}},[_,d,D,w.length]);const M=D>0?(y-b*(D-1))/D:0;let X=d?[...p(w,w.length,!1,1),...p(w,w.length,!1,2),...w,...p(w,w.length,!0,3),...p(w,w.length,!0,4)]:w;o(()=>{L.current.forEach((e,l)=>{if(!e)return;let r=0,i=0;1==D?(r=35,i=35):2==D?(r=20,i=20):4==D?(r=10,i=10):3==D&&(r=15,i=15);const n=(l-T)*(M+b-i)+(y-(M-r)*D-b*(D-1))/2;e.style.transition=$?Z:"none",e.style.transform=`translateX(${n}px)`})},[T,y,$,X.length,D,M,b,_]),o(()=>{if(!$)return;let e;const l=()=>{let r=T;T<2*D&&d?r=T+2*w.length:T>=2*w.length+D&&d&&(r=T-2*w.length),r!==T&&d&&k(r),F(!1),L.current.forEach(e=>{e&&e.removeEventListener("transitionend",l)}),clearTimeout(e)};return L.current.forEach(e=>{e&&e.addEventListener("transitionend",l)}),e=window.setTimeout(()=>{F(!1),L.current.forEach(e=>{e&&e.removeEventListener("transitionend",l)})},A),()=>{L.current.forEach(e=>{e&&e.removeEventListener("transitionend",l)}),clearTimeout(e)}},[T,d,$,w.length,D,X.length,_]);const I=()=>{$||(F(!0),k(e=>e+H))},J=()=>{$||(F(!0),k(e=>e-H))};L.current.length!==X.length&&(L.current=Array(X.length).fill(null));return e("div",{className:[S.n23mSlider,"n23mSlider",f].filter(Boolean).join(" "),style:{height:_?"calc(100% - 2px)":"calc(100% - 60px)"},onTouchStart:e=>{1===e.touches.length&&(B(e.touches[0].clientX),W(0))},onTouchMove:e=>{null!==N&&W(e.touches[0].clientX-N)},onTouchEnd:()=>{z>50&&!$&&(d||0!==T)?J():z<-50&&!($||!d&&T+D>=w.length)&&I(),B(null),W(0)},children:[_&&l(s,{loaderColor:x}),!_&&e(r,{children:[l("div",{className:[S.n23mSliderContainerSlider].filter(Boolean).join(" "),children:l("div",{className:[S.n23mSliderSlideWrapper,"n23mSliderSlideWrapper"].join(" "),ref:j,style:{display:"flex",gap:`${b}px`,overflow:"hidden",width:"100%",boxSizing:"border-box"},children:X.map((e,r)=>l("div",{ref:e=>{L.current[r]=e},className:S.n23mSliderSlide,style:{width:1==D?`calc(${M}px - 35px)`:2==D?`calc(${M}px - 20px)`:3==D?`calc(${M}px - 15px)`:4==D?`calc(${M}px - 10px)`:`${M}px`},"aria-hidden":r<T||r>=T+D,children:e},e.key??r))})}),e("div",{className:[S.n23mSliderControls,"n23mSliderControls"].join(" "),style:{justifyContent:1==D?"space-between":"flex-end"},children:[1==D&&
|
|
1
|
+
import{jsxs as e,jsx as l,Fragment as r}from"react/jsx-runtime";import i,{useState as n,useRef as t,useLayoutEffect as o}from"react";import{s as d}from"./style-inject.es-BnTDb6vU.js";import{L as s}from"./Loader-CL-mm0LT.js";import{a,I as c}from"./IconArrowRight-Bs6HQ5lc.js";import{B as m}from"./Button-DP1hmI08.js";import{u as h}from"./useWindowSize-CAQRbyxi.js";import{T as u}from"./TextBox-B47QWA9m.js";var S={n23mSlider:"Slider-module_n23mSlider__YOEan",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"};d("@layer n23mSlider{.Slider-module_n23mSlider__YOEan{width:100%}.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 p=(e,l,r=!1,n)=>(r?e.slice(0,l):e.slice(-l)).map((e,l)=>i.cloneElement(e,{key:`${r?"clone-first":"clone-last"}-${l} ${n}`,className:e.props.className})),g=({isCircular:d=!1,children:g,className:f,loading:_=!1,loaderColor:x="black",slidesConfig:C={mobile:{items:1,slidesToScroll:1},tablet:{items:2,slidesToScroll:2},desktop:{items:3,slidesToScroll:3}},slideSpacingPx:b=10})=>{const w=i.Children.toArray(g).filter(i.isValidElement),{width:v}=h(),[y,E]=n(0),j=t(null),[T,k]=n(d?2*w.length:0),[$,F]=n(!1),L=t([]),[N,B]=n(null),[z,W]=n(0);let D,H,Z,A;v<767.98?(D=C.mobile.items,H=C.mobile.slidesToScroll,Z="transform 0.4s cubic-bezier(.4,0,.2,1)",A=450):v<1199.98?(D=C.tablet.items,H=C.tablet.slidesToScroll,Z="transform 0.85s cubic-bezier(0.645, 0.045, 0.355, 1)",A=900):(D=C.desktop.items,H=C.desktop.slidesToScroll,Z="transform 0.85s cubic-bezier(0.645, 0.045, 0.355, 1)",A=900),o(()=>{let e;const l=()=>{j.current&&E(j.current.offsetWidth),k(d?2*w.length:0)},r=()=>{clearTimeout(e),e=window.setTimeout(l,150),F(!0)};return l(),window.addEventListener("resize",r),()=>{clearTimeout(e),window.removeEventListener("resize",r)}},[_,d,D,w.length]);const M=D>0?(y-b*(D-1))/D:0;let X=d?[...p(w,w.length,!1,1),...p(w,w.length,!1,2),...w,...p(w,w.length,!0,3),...p(w,w.length,!0,4)]:w;o(()=>{L.current.forEach((e,l)=>{if(!e)return;let r=0,i=0;1==D&&1!=w.length?(r=35,i=35):2==D?(r=20,i=20):4==D?(r=10,i=10):3==D&&(r=15,i=15);const n=(l-T)*(M+b-i)+(y-(M-r)*D-b*(D-1))/2;e.style.transition=$?Z:"none",e.style.transform=`translateX(${n}px)`})},[T,y,$,X.length,D,M,b,_]),o(()=>{if(!$)return;let e;const l=()=>{let r=T;T<2*D&&d?r=T+2*w.length:T>=2*w.length+D&&d&&(r=T-2*w.length),r!==T&&d&&k(r),F(!1),L.current.forEach(e=>{e&&e.removeEventListener("transitionend",l)}),clearTimeout(e)};return L.current.forEach(e=>{e&&e.addEventListener("transitionend",l)}),e=window.setTimeout(()=>{F(!1),L.current.forEach(e=>{e&&e.removeEventListener("transitionend",l)})},A),()=>{L.current.forEach(e=>{e&&e.removeEventListener("transitionend",l)}),clearTimeout(e)}},[T,d,$,w.length,D,X.length,_]);const I=()=>{$||(F(!0),k(e=>e+H))},J=()=>{$||(F(!0),k(e=>e-H))};L.current.length!==X.length&&(L.current=Array(X.length).fill(null));return e("div",{className:[S.n23mSlider,"n23mSlider",f].filter(Boolean).join(" "),style:{height:_?"calc(100% - 2px)":"calc(100% - 60px)"},onTouchStart:e=>{1===e.touches.length&&(B(e.touches[0].clientX),W(0))},onTouchMove:e=>{null!==N&&W(e.touches[0].clientX-N)},onTouchEnd:()=>{z>50&&!$&&(d||0!==T)?J():z<-50&&!($||!d&&T+D>=w.length)&&I(),B(null),W(0)},children:[_&&l(s,{loaderColor:x}),!_&&e(r,{children:[l("div",{className:[S.n23mSliderContainerSlider].filter(Boolean).join(" "),children:l("div",{className:[S.n23mSliderSlideWrapper,"n23mSliderSlideWrapper"].join(" "),ref:j,style:{display:"flex",gap:`${b}px`,overflow:"hidden",width:"100%",boxSizing:"border-box"},children:X.map((e,r)=>l("div",{ref:e=>{L.current[r]=e},className:S.n23mSliderSlide,style:{width:1==D&&1==w.length?"100%":1==D?`calc(${M}px - 35px)`:2==D?`calc(${M}px - 20px)`:3==D?`calc(${M}px - 15px)`:4==D?`calc(${M}px - 10px)`:`${M}px`},"aria-hidden":r<T||r>=T+D,children:e},e.key??r))})}),e("div",{className:[S.n23mSliderControls,"n23mSliderControls"].join(" "),style:{justifyContent:1==D?"space-between":"flex-end"},children:[1==D&&l("div",{className:[S.n23mSliderCounter,"n23mSliderCounter"].join(" "),children:l(u,{mobileSize:16,desktopSize:16,color:"black",children:d?`${(()=>{if(!d)return T;const e=w.length;return e<1?0:(T+e)%e})()+1} / ${w.length}`:`${T+1} / ${w.length}`})}),e("div",{className:[S.n23mSliderControlsButtons,"n23mSliderControlsButtons"].join(" "),children:[l(m,{height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Prev",onClick:J,borderColor:"black",backgroundColorDisabled:"#F2F0EF",disabled:$||!d&&0===T,children:l(a,{width:24,height:24})}),l(m,{height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Next",borderColor:"black",backgroundColorDisabled:"#F2F0EF",onClick:I,disabled:$||!d&&T+D>=w.length,children:l(c,{width:24,height:24})})]})]})]})]})};g.displayName="Slider";export{g as Slider};
|