najwer23morsels 0.14.1 → 0.14.2
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 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-DTuQbzsZ.js";import{u as s}from"./useWindowSize-CAQRbyxi.js";import{a,I as c}from"./IconArrowRight-Bs6HQ5lc.js";import{L as m}from"./Loader-D18j8aqL.js";import{T as u}from"./TextBox-dHL75Jj9.js";import{s as h}from"./style-inject.es-BnTDb6vU.js";import"./getCssVariableStyle-CBKDTT0s.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{box-sizing:border-box;display:flex;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 v=i.Children.toArray(p).filter(i.isValidElement),{width:w}=s(),[y,j]=n(0),E=t(null),k=t(null),[F,L]=n(h?2*v.length:0),[T,$]=n(!1),N=t([]),[B,X]=n(null),[z,D]=n(0),M=t(!1);let W,U,H,Z;w<767.98?(W=b.mobile.items,U=b.mobile.slidesToScroll,H="transform 0.4s cubic-bezier(.4,0,.2,1)",Z=450):w<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(()=>{E.current&&j(E.current.offsetWidth),L(h?2*v.length:0)},[f,h,W,v.length,w]);const A=(y-C*(W-1))/W;let I=h?[...S(v,v.length,!1,1),...S(v,v.length,!1,2),...
|
|
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-DTuQbzsZ.js";import{u as s}from"./useWindowSize-CAQRbyxi.js";import{a,I as c}from"./IconArrowRight-Bs6HQ5lc.js";import{L as m}from"./Loader-D18j8aqL.js";import{T as u}from"./TextBox-dHL75Jj9.js";import{s as h}from"./style-inject.es-BnTDb6vU.js";import"./getCssVariableStyle-CBKDTT0s.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{box-sizing:border-box;display:flex;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 v=i.Children.toArray(p).filter(i.isValidElement),{width:w}=s(),[y,j]=n(0),E=t(null),k=t(null),[F,L]=n(h?2*v.length:0),[T,$]=n(!1),N=t([]),[B,X]=n(null),[z,D]=n(0),M=t(!1);let W,U,H,Z;w<767.98?(W=b.mobile.items,U=b.mobile.slidesToScroll,H="transform 0.4s cubic-bezier(.4,0,.2,1)",Z=450):w<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(()=>{E.current&&j(E.current.offsetWidth),L(h?2*v.length:0)},[f,h,W,v.length,w]);const A=(y-C*(W-1))/W;let I=h?[...S(v,v.length,!1,1),...v,...S(v,v.length,!1,2),...S(v,v.length,!0,3),...S(v,v.length,!0,4)]:v;o(()=>{N.current.forEach((e,r)=>{if(!e)return;let l=0,i=0;1===W&&1!==v.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-F)*(A+C-i)+(y-(A-l)*W-C*(W-1))/2;e.style.transition=T?H:"none",e.style.transform=`translateX(${n}px)`})},[F,y,T,I.length,W,A,C,f]),o(()=>{if(!T)return;let e;const r=()=>{let l=F;F<2*W&&h?l=F+2*v.length:F>=2*v.length+W&&h&&(l=F-v.length),l!==F&&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)}},[F,h,T,v.length,W,I.length,f]);const J=()=>{T||($(!0),L(e=>e+U))},O=()=>{T||($(!0),L(e=>e-U))};return e("div",{ref:k,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&&(X(e.touches[0].clientX),D(0),M.current=!0,k.current&&k.current.classList.add(g.dragging))},onTouchMove:e=>{null!==B&&D(e.touches[0].clientX-B)},onTouchEnd:()=>{z>50&&!T&&(h||0!==F)?O():z<-50&&!(T||!h&&F+W>=v.length)&&J(),X(null),D(0),M.current=!1,k.current&&k.current.classList.remove(g.dragging)},onMouseDown:e=>{X(e.clientX),D(0),M.current=!0,k.current&&k.current.classList.add(g.dragging)},onMouseMove:e=>{null!==B&&D(e.clientX-B)},onMouseUp:()=>{z>50&&!T&&(h||0!==F)?O():z<-50&&!(T||!h&&F+W>=v.length)&&J(),X(null),D(0),M.current=!1,k.current&&k.current.classList.remove(g.dragging)},children:r("div",{className:[g.n23mSliderSlideWrapper,"n23mSliderSlideWrapper"].join(" "),ref:E,style:{gap:`${C}px`},children:I.map((e,l)=>r("div",{ref:e=>{N.current[l]=e},className:g.n23mSliderSlide,style:{width:1===W&&1===v.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<F||l>=F+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 F;const e=v.length;return e<1?0:(F+e)%e})()+1} / ${v.length}`:`${F+1} / ${v.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:T||!h&&0===F,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:T||!h&&F+W>=v.length,children:r(c,{width:24,height:24})})]})]})]})]})};p.displayName="Slider";export{p as Slider};
|