najwer23morsels 1.1.6 → 1.1.8
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.
|
@@ -3,7 +3,7 @@ interface NavigationTabsProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
3
3
|
style?: React.CSSProperties;
|
|
4
4
|
menuTopLeftColumn: React.ReactNode;
|
|
5
5
|
menuTopRightColumn: React.ReactNode;
|
|
6
|
-
menuMobile
|
|
6
|
+
menuMobile?: React.ReactNode;
|
|
7
7
|
menuBottomTabs?: React.ReactNode;
|
|
8
8
|
menuOnlyTop?: boolean;
|
|
9
9
|
}
|
package/lib/NavigationTabs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as a,Fragment as n}from"react/jsx-runtime";import{useRef as i}from"react";import{B as o}from"./Button-czA3IzD8.js";import{G as t}from"./Grid-BLgYM1CJ.js";import{T as l}from"./TextBox-CT8wp519.js";import{s as m}from"./style-inject.es-CrVRO2OA.js";import"./Loader-hxKQ6g7j.js";var r={n23mNavigationTabs:"NavigationTabs-module_n23mNavigationTabs__ZW-sA",navigationLine:"NavigationTabs-module_navigationLine__0GXrl",menuPlaceholder:"NavigationTabs-module_menuPlaceholder__4e0gb",menu:"NavigationTabs-module_menu__RyLBY",menuContent:"NavigationTabs-module_menuContent__bVzSY",menuAnimation:"NavigationTabs-module_menuAnimation__RvppI",menuOpen:"NavigationTabs-module_menuOpen__H7d5G",menuItemMobile:"NavigationTabs-module_menuItemMobile__xblea",navigationTabMenu:"NavigationTabs-module_navigationTabMenu__sH02E",menuItemDesktop:"NavigationTabs-module_menuItemDesktop__CgUIw"};m("@layer n23mNavigationTabs{.NavigationTabs-module_n23mNavigationTabs__ZW-sA{.NavigationTabs-module_navigationLogo__vRE2p{height:20px;width:20px}.NavigationTabs-module_navigationLine__0GXrl{background-color:#e1dfdf;height:2px;width:100%}.NavigationTabs-module_menuPlaceholder__4e0gb{position:fixed;right:calc(50% - clamp(0px, 100%, 1440px)/2 + 20px);top:14px;z-index:9999}.NavigationTabs-module_menu__RyLBY{-webkit-overflow-scrolling:touch;background-color:#e1dfdf;contain:strict;height:100dvh;left:0;overflow-y:auto;overscroll-behavior:contain;position:fixed;top:0;transform:scale(0);transform-origin:top right;transition:transform .25s ease-out;width:100vw;will-change:transform;z-index:9998;.NavigationTabs-module_menuContent__bVzSY{align-items:center;display:flex;flex-direction:column;gap:20px;padding:150px 0;a{-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:0;transition:opacity 0s ease-out;transition-delay:0s;user-select:none}.NavigationTabs-module_menuAnimation__RvppI{opacity:1;transition:opacity .2s ease-in!important;transition-delay:.3s!important}}}.NavigationTabs-module_menuOpen__H7d5G{transform:scale(1);transition:transform .25s ease-in;will-change:transform}.NavigationTabs-module_menuItemMobile__xblea{display:none}@media (max-width:767.98px){.NavigationTabs-module_menuItemDesktop__CgUIw,.NavigationTabs-module_navigationTabMenu__sH02E{display:none}.NavigationTabs-module_menuItemMobile__xblea{display:block}body:has(.NavigationTabs-module_menuItemMobile__xblea .NavigationTabs-module_menuOpen__H7d5G){overflow:hidden}}}}");const s=({children:m,className:s,style:u,menuTopLeftColumn:d=e(n,{children:"menuTopLeftColumn"}),menuTopRightColumn:c=e(n,{children:"menuTopRightColumn"}),menuMobile:p=e(n,{children:"menuMobile"}),menuBottomTabs:g=e(n,{children:"menuBottomTabs"}),menuOnlyTop:_=!1,...b})=>{const v=i(null),h=i(null),T=i(!1),x=i(null),N=()=>{T.current=!1,v.current?.classList.remove(r.menuOpen),h.current?.querySelectorAll("a").forEach(e=>{e.classList.remove(r.menuAnimation)})};return e("div",{className:[r.n23mNavigationTabs,"n23mNavigationTabs",s].filter(Boolean).join(" "),...b,children:a(t,{layout:"container",widthMax:"1600px",children:[e(t,{layout:"container",widthMax:"1400px",padding:"20px",margin:"auto",children:a(t,{layout:"columns",gap:{col:"20px",row:"20px"},col:{smallDesktop:2,desktop:2,mobile:2,tablet:2},children:[e("div",{children:d}),e("div",{className:r.menuItemDesktop,children:c})
|
|
1
|
+
import{jsx as e,jsxs as a,Fragment as n}from"react/jsx-runtime";import{useRef as i}from"react";import{B as o}from"./Button-czA3IzD8.js";import{G as t}from"./Grid-BLgYM1CJ.js";import{T as l}from"./TextBox-CT8wp519.js";import{s as m}from"./style-inject.es-CrVRO2OA.js";import"./Loader-hxKQ6g7j.js";var r={n23mNavigationTabs:"NavigationTabs-module_n23mNavigationTabs__ZW-sA",navigationLine:"NavigationTabs-module_navigationLine__0GXrl",menuPlaceholder:"NavigationTabs-module_menuPlaceholder__4e0gb",menu:"NavigationTabs-module_menu__RyLBY",menuContent:"NavigationTabs-module_menuContent__bVzSY",menuAnimation:"NavigationTabs-module_menuAnimation__RvppI",menuOpen:"NavigationTabs-module_menuOpen__H7d5G",menuItemMobile:"NavigationTabs-module_menuItemMobile__xblea",navigationTabMenu:"NavigationTabs-module_navigationTabMenu__sH02E",menuItemDesktop:"NavigationTabs-module_menuItemDesktop__CgUIw"};m("@layer n23mNavigationTabs{.NavigationTabs-module_n23mNavigationTabs__ZW-sA{.NavigationTabs-module_navigationLogo__vRE2p{height:20px;width:20px}.NavigationTabs-module_navigationLine__0GXrl{background-color:#e1dfdf;height:2px;width:100%}.NavigationTabs-module_menuPlaceholder__4e0gb{position:fixed;right:calc(50% - clamp(0px, 100%, 1440px)/2 + 20px);top:14px;z-index:9999}.NavigationTabs-module_menu__RyLBY{-webkit-overflow-scrolling:touch;background-color:#e1dfdf;contain:strict;height:100dvh;left:0;overflow-y:auto;overscroll-behavior:contain;position:fixed;top:0;transform:scale(0);transform-origin:top right;transition:transform .25s ease-out;width:100vw;will-change:transform;z-index:9998;.NavigationTabs-module_menuContent__bVzSY{align-items:center;display:flex;flex-direction:column;gap:20px;padding:150px 0;a{-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:0;transition:opacity 0s ease-out;transition-delay:0s;user-select:none}.NavigationTabs-module_menuAnimation__RvppI{opacity:1;transition:opacity .2s ease-in!important;transition-delay:.3s!important}}}.NavigationTabs-module_menuOpen__H7d5G{transform:scale(1);transition:transform .25s ease-in;will-change:transform}.NavigationTabs-module_menuItemMobile__xblea{display:none}@media (max-width:767.98px){.NavigationTabs-module_menuItemDesktop__CgUIw,.NavigationTabs-module_navigationTabMenu__sH02E{display:none}.NavigationTabs-module_menuItemMobile__xblea{display:block}body:has(.NavigationTabs-module_menuItemMobile__xblea .NavigationTabs-module_menuOpen__H7d5G){overflow:hidden}}}}");const s=({children:m,className:s,style:u,menuTopLeftColumn:d=e(n,{children:"menuTopLeftColumn"}),menuTopRightColumn:c=e(n,{children:"menuTopRightColumn"}),menuMobile:p=e(n,{children:"menuMobile"}),menuBottomTabs:g=e(n,{children:"menuBottomTabs"}),menuOnlyTop:_=!1,...b})=>{const v=i(null),h=i(null),T=i(!1),x=i(null),N=()=>{T.current=!1,v.current?.classList.remove(r.menuOpen),h.current?.querySelectorAll("a").forEach(e=>{e.classList.remove(r.menuAnimation)})};return e("div",{className:[r.n23mNavigationTabs,"n23mNavigationTabs",s].filter(Boolean).join(" "),...b,children:a(t,{layout:"container",widthMax:"1600px",children:[e(t,{layout:"container",widthMax:"1400px",padding:"20px",margin:"auto",children:a(t,{layout:"columns",gap:{col:"20px",row:"20px"},col:{smallDesktop:2,desktop:2,mobile:2,tablet:2},children:[e("div",{children:d}),e("div",{className:r.menuItemDesktop,children:c}),!_&&a("div",{className:r.menuItemMobile,children:[e("div",{className:r.menuPlaceholder,children:e(o,{height:"40px",width:"70px",padding:0,backgroundColor:"orangered",onClick:()=>{x.current&&cancelAnimationFrame(x.current),T.current?N():(T.current=!0,x.current=requestAnimationFrame(()=>{x.current=requestAnimationFrame(()=>{v.current?.classList.add(r.menuOpen),h.current?.querySelectorAll("a").forEach(e=>{e.classList.add(r.menuAnimation)})})}))},children:e(l,{tag:"span",desktopSize:20,mobileSize:20,fontWeight:400,color:"white",children:"Menu"})})}),e("div",{ref:v,className:r.menu,children:e("div",{ref:h,className:r.menuContent,onClick:e=>{e.target.closest("a")&&N()},children:p})})]})]})}),e("div",{className:r.navigationLine}),!_&&e(t,{layout:"container",widthMax:"1400px",padding:"20px",margin:"auto",className:r.navigationTabMenu,children:e(t,{layout:"flex",justifyContent:"center",widthMax:"1400px",gap:{col:"30px",row:"20px"},children:g})})]})})};s.displayName="NavigationTabs";export{s as NavigationTabs};
|
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-czA3IzD8.js";import{u}from"./useWindowSize-CAQRbyxi.js";import{I as d,a as g}from"./IconLocate-1fQEMRDH.js";import{s as m,g as f}from"./style-inject.es-CrVRO2OA.js";import"./Loader-hxKQ6g7j.js";import"./TextBox-CT8wp519.js";var h={n23mSliderScrollWrapper:"SliderScroll-module_n23mSliderScrollWrapper__qj8cS",n23mSliderScrollTrack:"SliderScroll-module_n23mSliderScrollTrack__y6G6v",dragging:"SliderScroll-module_dragging__gH9AX",n23mSliderScrollControls:"SliderScroll-module_n23mSliderScrollControls__TAnlc",n23mSliderScrollControlsButtons:"SliderScroll-module_n23mSliderScrollControlsButtons__-PK4Y"};m("@layer n23mSliderScroll{.SliderScroll-module_n23mSliderScrollWrapper__qj8cS{display:grid;position:relative}.SliderScroll-module_n23mSliderScrollTrack__y6G6v{-ms-overflow-style:none;-webkit-overflow-scrolling:touch;display:flex;flex-wrap:nowrap;gap:var(--sliderscroll-g);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__gH9AX,&.SliderScroll-module_dragging__gH9AX a{cursor:grabbing}}.SliderScroll-module_n23mSliderScrollControls__TAnlc{align-items:center;display:flex;justify-content:flex-end;margin-left:20px;margin-right:20px}.SliderScroll-module_n23mSliderScrollControlsButtons__-PK4Y{display:flex;gap:10px;margin-top:10px}}");const S=({children:m,className:S,gap:p="5px",isCircular:w=!1,autoPlay:b=!1,autoPlaySpeed:v=.5,style:L})=>{const _={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([])},F=t.toArray(m),x=F.length,y=w?F.map((r,e)=>n(r,{key:`cb-${e}`})):[],k=w?F.map((r,e)=>n(r,{key:`ca-${e}`})):[],A=w?[...y,...F,...k]:F,[C,D]=o([]),{width:j}=u();i(()=>{if(!_.carousel.current)return;const r=_.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(p.slice(0,-2))});D(r)},[m,j,p]);const M=c(()=>{const r=[];let e=0;for(const l of C)r.push(e),e+=l;return r},[C]);i(()=>{w&&_.carousel.current&&M.length&&(_.carousel.current.scrollLeft=(M[x]||0)-2*Number(p.slice(0,-2))),I()},[j,M,x,w]),i(()=>{N(!1)},[]),i(()=>{if(!w)return;if(!b)return void(_.animationFrameId.current&&(cancelAnimationFrame(_.animationFrameId.current),_.animationFrameId.current=null));let r;const e=()=>{if(!_.carousel.current)return;if(_.isSliding.current||_.isHovered.current)return void(_.animationFrameId.current=requestAnimationFrame(e));const r=_.carousel.current;let l=r.scrollLeft+v;if(w&&M.length&&C.length){const r=M[M.length-1]+(C[C.length-1]||0),e=M[x]||0,t=M[x+F.length]||r;l>t+C[0]/2&&(l-=t-e)}r.scrollLeft=l,I(),_.animationFrameId.current=requestAnimationFrame(e)};return r=setTimeout(()=>{_.animationFrameId.current=requestAnimationFrame(e)},500),()=>{r&&clearTimeout(r),_.animationFrameId.current&&(cancelAnimationFrame(_.animationFrameId.current),_.animationFrameId.current=null)}},[b,v,w,M,C,x,F.length]);const I=()=>{if(_.carousel.current){if(w)_.showArrowLeft.current=!0,_.showArrowRight.current=!0;else{const r=_.carousel.current.scrollLeft,e=_.carousel.current.scrollWidth-_.carousel.current.clientWidth;_.showArrowLeft.current=r>0,_.showArrowRight.current=r<e-1}N(_.isSliding.current)}},N=r=>{_.buttonLeft.current&&(_.buttonLeft.current.disabled=r||!_.showArrowLeft.current),_.buttonRight.current&&(_.buttonRight.current.disabled=r||!_.showArrowRight.current)},R=(r,e,l=300)=>{if(_.isSliding.current)return;_.isSliding.current=!0,N(!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):(_.isSliding.current=!1,N(!1),I())};requestAnimationFrame(i)},W=s(()=>{if(!_.carousel.current)return;if(!M.length||!C.length)return;const r=_.carousel.current,e=r.offsetWidth,l=r.scrollLeft;let t=M.findIndex((r,e)=>r>l);-1===t?t=M.length-1:t>0&&t--;let n,o=0,i=0;for(let r=t;r<M.length&&(o+=C[r],i++,!(o>=e));r++);const c=t+i-1;n=M[c]+C[c]>l+e+1?c:t+i;let s=M[n]-2*Number(p.slice(0,-2));if(s<0&&(s=0),w){s=(M[x]||0)+s-(M[x]||0)}R(_.carousel.current,s,400)},[M,C,p,x,w,F.length]),X=s(()=>{if(!_.carousel.current)return;if(!M.length||!C.length)return;const r=_.carousel.current,e=r.offsetWidth,l=r.scrollLeft;let t=0;for(let r=0;r<M.length;r++)if(M[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;w||(i=Math.max(o-1,i));let c=M[i]+C[i]-e;if(c<0&&(c=0),w){c=(M[x]||0)+c-(M[x]||0)+Number(p.slice(0,-2))}R(_.carousel.current,c,400)},[M,C,p,x,w]),B=()=>{_.carousel.current&&(_.drag.current.isDragging?_.carousel.current.classList.add(h.dragging):_.carousel.current.classList.remove(h.dragging))};return r("div",{className:["n23mSliderScroll",S].filter(Boolean).join(" "),style:{...f({"--sliderscroll-g":p,height:"calc(100% - 60px)"}),...L},onMouseEnter:()=>{_.isHovered.current=!0},onMouseLeave:()=>{_.isHovered.current=!1},children:[e("div",{className:[h.n23mSliderScrollWrapper,"n23mSliderScrollWrapper"].join(" "),children:e("div",{className:h.n23mSliderScrollTrack,ref:_.carousel,onClick:r=>{_.drag.current.isMove&&(r.preventDefault(),r.stopPropagation())},onScroll:()=>{if(_.carousel.current){if(w&&M.length&&C.length){const r=_.carousel.current.scrollLeft,e=M[M.length-1]+(C[C.length-1]||0),l=M[x]||0,t=M[x+F.length]||e;r<l-C[0]/2?_.carousel.current.scrollLeft=r+(M[F.length+x]-l):r>t+C[0]/2&&(_.carousel.current.scrollLeft=r-(t-l))}I()}},onMouseDown:r=>{_.drag.current.isDown=!0,_.drag.current.startX=r.pageX-(_.carousel.current?.offsetLeft||0),_.drag.current.scrollLeft=_.carousel.current?.scrollLeft||0,_.drag.current.isDragging=!0,B()},onMouseLeave:()=>{_.drag.current.isDown&&(_.drag.current.isDown=!1,_.drag.current.isDragging=!1,B())},onMouseUp:()=>{_.drag.current.isDown=!1,_.drag.current.isDragging=!1,B()},onMouseMove:r=>{if(!_.drag.current.isDown)return void(_.drag.current.isMove=!1);r.preventDefault();var e;const l=("pageX"in(e=r)?e.pageX:"touches"in e?e.touches[0].pageX:0)-(_.carousel.current?.offsetLeft||0)-_.drag.current.startX;Math.abs(l)>5&&(_.drag.current.isMove=!0),_.carousel.current&&(_.carousel.current.scrollLeft=_.drag.current.scrollLeft-l,I())},children:A.map((r,l)=>e("div",{ref:r=>{_.childRefs.current[l]=r},style:{display:"inline-block"},children:r},r.key||l))})}),e("div",{className:[h.n23mSliderScrollControls,"n23mSliderScrollControls"].join(" "),children:r("div",{className:[h.n23mSliderScrollControlsButtons,"n23mSliderScrollControlsButtons"].join(" "),children:[e(a,{ref:_.buttonLeft,height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Prev",onClick:X,borderColor:"black",backgroundColorDisabled:"#F2F0EF",children:e(d,{width:24,height:24})}),e(a,{ref:_.buttonRight,height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Next",onClick:W,borderColor:"black",backgroundColorDisabled:"#F2F0EF",children:e(g,{width:24,height:24})})]})})]})};S.displayName="SliderScroll";export{S as SliderScroll};
|
|
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-czA3IzD8.js";import{u}from"./useWindowSize-CAQRbyxi.js";import{I as d,a as g}from"./IconLocate-1fQEMRDH.js";import{s as m,g as f}from"./style-inject.es-CrVRO2OA.js";import"./Loader-hxKQ6g7j.js";import"./TextBox-CT8wp519.js";var h={n23mSliderScrollWrapper:"SliderScroll-module_n23mSliderScrollWrapper__qj8cS",n23mSliderScrollTrack:"SliderScroll-module_n23mSliderScrollTrack__y6G6v",dragging:"SliderScroll-module_dragging__gH9AX",n23mSliderScrollControls:"SliderScroll-module_n23mSliderScrollControls__TAnlc",n23mSliderScrollControlsButtons:"SliderScroll-module_n23mSliderScrollControlsButtons__-PK4Y"};m("@layer n23mSliderScroll{.SliderScroll-module_n23mSliderScrollWrapper__qj8cS{display:grid;position:relative}.SliderScroll-module_n23mSliderScrollTrack__y6G6v{-ms-overflow-style:none;-webkit-overflow-scrolling:touch;display:flex;flex-wrap:nowrap;gap:var(--sliderscroll-g);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__gH9AX,&.SliderScroll-module_dragging__gH9AX a{cursor:grabbing}}.SliderScroll-module_n23mSliderScrollControls__TAnlc{align-items:center;display:flex;justify-content:flex-end;margin-left:20px;margin-right:20px}.SliderScroll-module_n23mSliderScrollControlsButtons__-PK4Y{display:flex;gap:10px;margin-top:10px}}");const S=({children:m,className:S,gap:p="5px",isCircular:w=!1,autoPlay:b=!1,autoPlaySpeed:v=.5,style:L})=>{const _={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([])},F=t.toArray(m),x=F.length,y=w?F.map((r,e)=>n(r,{key:`cb-${e}`})):[],k=w?F.map((r,e)=>n(r,{key:`ca-${e}`})):[],A=w?[...y,...F,...k]:F,[C,D]=o([]),{width:j}=u();i(()=>{if(!_.carousel.current)return;const r=_.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(p.slice(0,-2))});D(r)},[m,j,p]);const M=c(()=>{const r=[];let e=0;for(const l of C)r.push(e),e+=l;return r},[C]);i(()=>{w&&_.carousel.current&&M.length&&(_.carousel.current.scrollLeft=(M[x]||0)-2*Number(p.slice(0,-2))),I()},[j,M,x,w]),i(()=>{N(!1)},[]),i(()=>{if(!w)return;if(!b)return void(_.animationFrameId.current&&(cancelAnimationFrame(_.animationFrameId.current),_.animationFrameId.current=null));let r;const e=()=>{if(!_.carousel.current)return;if(_.isSliding.current||_.isHovered.current)return void(_.animationFrameId.current=requestAnimationFrame(e));const r=_.carousel.current;let l=r.scrollLeft+v;if(w&&M.length&&C.length){const r=M[M.length-1]+(C[C.length-1]||0),e=M[x]||0,t=M[x+F.length]||r;l>t+C[0]/2&&(l-=t-e)}r.scrollLeft=l,I(),_.animationFrameId.current=requestAnimationFrame(e)};return r=setTimeout(()=>{_.animationFrameId.current=requestAnimationFrame(e)},500),()=>{r&&clearTimeout(r),_.animationFrameId.current&&(cancelAnimationFrame(_.animationFrameId.current),_.animationFrameId.current=null)}},[b,v,w,M,C,x,F.length]);const I=()=>{if(_.carousel.current){if(w)_.showArrowLeft.current=!0,_.showArrowRight.current=!0;else{const r=_.carousel.current.scrollLeft,e=_.carousel.current.scrollWidth-_.carousel.current.clientWidth;_.showArrowLeft.current=r>0,_.showArrowRight.current=r<e-1}N(_.isSliding.current)}},N=r=>{_.buttonLeft.current&&(_.buttonLeft.current.disabled=r||!_.showArrowLeft.current),_.buttonRight.current&&(_.buttonRight.current.disabled=r||!_.showArrowRight.current)},R=(r,e,l=300)=>{if(_.isSliding.current)return;_.isSliding.current=!0,N(!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):(_.isSliding.current=!1,N(!1),I())};requestAnimationFrame(i)},W=s(()=>{if(!_.carousel.current)return;if(!M.length||!C.length)return;const r=_.carousel.current,e=r.offsetWidth,l=r.scrollLeft;let t=M.findIndex((r,e)=>r>l);-1===t?t=M.length-1:t>0&&t--;let n,o=0,i=0;for(let r=t;r<M.length&&(o+=C[r],i++,!(o>=e));r++);const c=t+i-1;n=M[c]+C[c]>l+e+1?c:t+i;let s=M[n]-2*Number(p.slice(0,-2));if(s<0&&(s=0),w){s=(M[x]||0)+s-(M[x]||0)}R(_.carousel.current,s,400)},[M,C,p,x,w,F.length]),X=s(()=>{if(!_.carousel.current)return;if(!M.length||!C.length)return;const r=_.carousel.current,e=r.offsetWidth,l=r.scrollLeft;let t=0;for(let r=0;r<M.length;r++)if(M[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;w||(i=Math.max(o-1,i));let c=M[i]+C[i]-e+Number(p.slice(0,-2));if(c<0&&(c=0),w){c=(M[x]||0)+c-(M[x]||0)+Number(p.slice(0,-2))}R(_.carousel.current,c,400)},[M,C,p,x,w]),B=()=>{_.carousel.current&&(_.drag.current.isDragging?_.carousel.current.classList.add(h.dragging):_.carousel.current.classList.remove(h.dragging))};return r("div",{className:["n23mSliderScroll",S].filter(Boolean).join(" "),style:{...f({"--sliderscroll-g":p,height:"calc(100% - 60px)"}),...L},onMouseEnter:()=>{_.isHovered.current=!0},onMouseLeave:()=>{_.isHovered.current=!1},children:[e("div",{className:[h.n23mSliderScrollWrapper,"n23mSliderScrollWrapper"].join(" "),children:e("div",{className:h.n23mSliderScrollTrack,ref:_.carousel,onClick:r=>{_.drag.current.isMove&&(r.preventDefault(),r.stopPropagation())},onScroll:()=>{if(_.carousel.current){if(w&&M.length&&C.length){const r=_.carousel.current.scrollLeft,e=M[M.length-1]+(C[C.length-1]||0),l=M[x]||0,t=M[x+F.length]||e;r<l-C[0]/2?_.carousel.current.scrollLeft=r+(M[F.length+x]-l):r>t+C[0]/2&&(_.carousel.current.scrollLeft=r-(t-l))}I()}},onMouseDown:r=>{_.drag.current.isDown=!0,_.drag.current.startX=r.pageX-(_.carousel.current?.offsetLeft||0),_.drag.current.scrollLeft=_.carousel.current?.scrollLeft||0,_.drag.current.isDragging=!0,B()},onMouseLeave:()=>{_.drag.current.isDown&&(_.drag.current.isDown=!1,_.drag.current.isDragging=!1,B())},onMouseUp:()=>{_.drag.current.isDown=!1,_.drag.current.isDragging=!1,B()},onMouseMove:r=>{if(!_.drag.current.isDown)return void(_.drag.current.isMove=!1);r.preventDefault();var e;const l=("pageX"in(e=r)?e.pageX:"touches"in e?e.touches[0].pageX:0)-(_.carousel.current?.offsetLeft||0)-_.drag.current.startX;Math.abs(l)>5&&(_.drag.current.isMove=!0),_.carousel.current&&(_.carousel.current.scrollLeft=_.drag.current.scrollLeft-l,I())},children:A.map((r,l)=>e("div",{ref:r=>{_.childRefs.current[l]=r},style:{display:"inline-block"},children:r},r.key||l))})}),e("div",{className:[h.n23mSliderScrollControls,"n23mSliderScrollControls"].join(" "),children:r("div",{className:[h.n23mSliderScrollControlsButtons,"n23mSliderScrollControlsButtons"].join(" "),children:[e(a,{ref:_.buttonLeft,height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Prev",onClick:X,borderColor:"black",backgroundColorDisabled:"#F2F0EF",children:e(d,{width:24,height:24})}),e(a,{ref:_.buttonRight,height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Next",onClick:W,borderColor:"black",backgroundColorDisabled:"#F2F0EF",children:e(g,{width:24,height:24})})]})})]})};S.displayName="SliderScroll";export{S as SliderScroll};
|