najwer23morsels 0.4.3 → 0.4.4
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}from"react/jsx-runtime";import
|
|
1
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import n,{useState as t,useRef as l,useEffect as o,useCallback as s}from"react";import{s as i}from"./style-inject.es-BnTDb6vU.js";var a={najwer23morselsSliderContainer:"Slider-module_najwer23morselsSliderContainer__1SbJN",najwer23morselsSlideWrapper:"Slider-module_najwer23morselsSlideWrapper__veeuJ",najwer23morselsSlide:"Slider-module_najwer23morselsSlide__KHKZW",najwer23morselsBtnControl:"Slider-module_najwer23morselsBtnControl__RHrxn",najwer23morselsBtn:"Slider-module_najwer23morselsBtn__10p8D"};i("@layer najwer23morselsSlider{.Slider-module_najwer23morselsSliderContainer__1SbJN{display:flex;flex-direction:column;gap:10px;height:100%;position:relative;user-select:none;width:100%}.Slider-module_najwer23morselsSlideWrapper__veeuJ{height:100%;overflow:hidden;position:relative;width:100%;will-change:transform}.Slider-module_najwer23morselsSlide__KHKZW{height:100%;overflow:hidden;position:absolute;top:0;will-change:transform;&>*{height:100%;width:100%}}.Slider-module_najwer23morselsBtnControl__RHrxn{align-items:center;display:flex;height:100%;left:0;padding:0 25px;pointer-events:none;position:absolute;right:0;z-index:100}.Slider-module_najwer23morselsBtn__10p8D{-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);background-color:var(--najwer23morselsSliderArrowsColorBackground,var(--abgc,#fff));border:1px solid var(--najwer23morselsSliderArrowsColorBorder,var(--abc,#000));border-radius:50%;color:var(--najwer23morselsSliderArrowsColor,var(--ac,#000));cursor:pointer;display:flex;left:50%;padding:10px;pointer-events:auto;transition:all .2s linear;transition:background-color .3s,box-shadow .3s;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;@media (hover:hover) and (pointer:fine){&:hover{box-shadow:0 4px 8px 0 rgba(0,0,0,.24),0 6px 20px 0 rgba(0,0,0,.19);filter:brightness(.95)}}}}");const d=(e,r,t=!1)=>(t?e.slice(0,r):e.slice(-r)).map((e,r)=>n.cloneElement(e,{key:`${t?"clone-first":"clone-last"}-${r}`,className:e.props.className})),c=({isCircular:i=!1,children:c,className:m,arrowsColor:u,arrowsColorBackground:h,arrowsColorBorder:w})=>{const p=n.Children.toArray(c).filter(n.isValidElement),[g,f]=t(i&&p.length>=2?2:0),[v,S]=t(!1),[j,_]=t(0),[b,x]=t(0),C=l(null),y=l([]),k=l(null),B=i&&p.length>=2?[...d(p,2,!1),...p.map((e,r)=>n.cloneElement(e,{key:e.key??r,className:e.props.className})),...d(p,2,!0)]:p.map((e,r)=>n.cloneElement(e,{key:e.key??r,className:e.props.className}));y.current.length!==B.length&&(y.current=Array(B.length).fill(null)),o(()=>{f(i&&p.length>=2?2:0)},[i,p.length]);const N=s(()=>{const e=C.current;if(!e)return;const r=y.current[0];if(!r)return;const n=window.getComputedStyle(r);_(r.offsetWidth+parseFloat(n.marginLeft)+parseFloat(n.marginRight)),x(e.offsetWidth)},[]);o(()=>{N();const e=()=>{null!==k.current&&clearTimeout(k.current),k.current=window.setTimeout(()=>{N(),S(!0)},150)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),null!==k.current&&clearTimeout(k.current)}},[N]),o(()=>{const e=j+10;y.current.forEach((r,n)=>{if(!r)return;const t=(n-g)*e+(b-j)/2;r.style.transition=v?"transform 0.4s cubic-bezier(.4,0,.2,1)":"none",r.style.transform=`translateX(${t}px)`,r.style.left=""})},[g,j,b,v,B.length,i]),o(()=>{if(!v||!i)return;const e=y.current.length,r=y.current[e-1];if(!r)return;let n;const t=()=>{let l=g;1===g?l=e-3:g===e-2&&(l=2),l!==g&&f(l),S(!1),r.removeEventListener("transitionend",t),clearTimeout(n)};return r.addEventListener("transitionend",t),n=window.setTimeout(()=>{S(!1),r.removeEventListener("transitionend",t)},500),()=>{r.removeEventListener("transitionend",t),clearTimeout(n)}},[g,i,v]),o(()=>{if(!v)return;const e=y.current[0];if(!e)return;let r;const n=()=>{S(!1),e.removeEventListener("transitionend",n),clearTimeout(r)};return e.addEventListener("transitionend",n),r=window.setTimeout(()=>{S(!1),e.removeEventListener("transitionend",n)},500),()=>{e.removeEventListener("transitionend",n),clearTimeout(r)}},[v]);return e("div",{className:[a.najwer23morselsSliderContainer,"MorselsSlider",m].filter(Boolean).join(" "),style:{"--ac":u,"--abgc":h,"--abc":w},children:[e("div",{className:[a.najwer23morselsBtnControl,"MorselsSliderControl",m].join(" "),style:{justifyContent:i?"space-between":0===g?"flex-end":g===p.length-1?"flex-start":"space-between"},children:[(i&&p.length>1||0!==g)&&r("button",{className:a.najwer23morselsBtn,onClick:()=>{v||(S(!0),f(i?e=>e-1:e=>Math.max(e-1,0)))},disabled:v,children:r("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512",width:"24",height:"24",fill:"currentColor",children:r("path",{d:"M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"})})}),(i&&p.length>1||g!==p.length-1)&&r("button",{className:a.najwer23morselsBtn,onClick:()=>{v||(S(!0),f(i?e=>e+1:e=>Math.min(e+1,B.length-1)))},disabled:v,children:r("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512",width:"24",height:"24",fill:"currentColor",children:r("path",{d:"M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"})})})]}),r("div",{className:[a.najwer23morselsSlideWrapper,"MorselsSliderWrapper",m].join(" "),ref:C,children:B.map((e,n)=>r("div",{ref:e=>{y.current[n]=e},className:`${a.najwer23morselsSlide}`,style:{width:p.length>1?"calc(100% - 100px)":"100%"},"aria-hidden":g!==n,children:e},e.key??n))})]})};c.displayName="Slider";export{c as Slider};
|