@expofp/floorplan/dist/esm/ui/ScrollableRow/ScrollableRow.js

Interactive floor plan library for expos and events

import{jsx as c,jsxs as V}from"react/jsx-runtime";import"./ScrollableRow.scss";import m from"classnames";import{useCallback as s,useEffect as X,useRef as D,useState as h}from"react";import{ResizeObserver as Y}from"resize-observer";import{isInteractiveTarget as Z}from"../shared/interactive";const b=5,B=768,ee=({children:k,ariaLabel:y,leftAriaLabel:A,rightAriaLabel:H,className:F,scrollAmount:d=150,mobileBreakpoint:v=B,showArrowsOnMobile:M=!1,arrowPosition:N="inside",scrollBehavior:R="smooth",isRtl:a=!1,enableDragScroll:g=!0,dragScrollSensitivity:z=1,onScroll:L})=>{const S=D(null),t=D(null),i=D(null),[K,p]=h(!1),[P,_]=h(!1),[l,O]=h(!1),[T,U]=h(0),[C,$]=h(0),E=s(()=>window.innerWidth>v&&!("ontouchstart"in window||navigator.maxTouchPoints>0),[v]),W=s((e,n,r)=>{const o=n-r;return e<0?Math.abs(e):e>o/2?o-e:e},[]),f=s(()=>{const e=t.current;if(!e)return;if(window.innerWidth<=v&&!M){p(!1),_(!1);return}const{scrollLeft:r,scrollWidth:o,clientWidth:u}=e;if(!(o>u)){p(!1),_(!1);return}if(a){const Q=o-u,I=W(r,o,u);p(I>b),_(I<Q-b)}else p(r>b),_(r<o-u-b)},[v,M,W,a]),q=s(()=>{f(),L&&t.current&&L(t.current.scrollLeft)},[f,L]),j=s(e=>{const n=t.current;if(!n)return;const r=n.scrollLeft;let o;if(a){const u=-(n.scrollWidth-n.clientWidth);o=e==="left"?Math.min(0,r+d):Math.max(u,r-d)}else o=e==="left"?Math.max(0,r-d):r+d;n.scrollTo({left:o,behavior:R})},[d,R,a]),G=s(e=>{!g||!E()||!t.current||Z(e.target)||(O(!0),U(e.pageX-t.current.offsetLeft),$(t.current.scrollLeft),e.preventDefault())},[g,E]),x=s(e=>{if(!l||!t.current)return;e.preventDefault();const r=(e.pageX-t.current.offsetLeft-T)*z;t.current.scrollLeft=C-r},[l,T,C,z]),w=s(()=>{O(!1)},[]);X(()=>{if(l)return document.addEventListener("mousemove",x),document.addEventListener("mouseup",w),document.addEventListener("mouseleave",w),()=>{document.removeEventListener("mousemove",x),document.removeEventListener("mouseup",w),document.removeEventListener("mouseleave",w)}},[l,x,w]),X(()=>{f();const e=()=>f();return window.addEventListener("resize",e),S.current&&!i.current&&(i.current=new Y(f),i.current.observe(S.current)),()=>{window.removeEventListener("resize",e),i.current&&(i.current.disconnect(),i.current=null)}},[f]);const J=g&&E()?l?"grabbing":"grab":void 0;return c("div",{ref:S,className:m("efp-scrollable-row",F),role:"group","aria-label":y,children:V("div",{className:m("efp-scrollable-row__container",{[`efp-scrollable-row__container--${N}`]:N}),children:[K&&c("button",{type:"button",className:m("efp-scrollable-row__arrow","efp-scrollable-row__arrow--left",{"efp-scrollable-row__arrow--rtl":a}),onClick:()=>j("left"),"aria-label":A,children:c("i",{className:"icon-chevron-left"})}),c("div",{ref:t,className:m("efp-scrollable-row__scroll-wrapper",{"efp-scrollable-row__scroll-wrapper--dragging":l}),onScroll:q,onMouseDown:G,style:{cursor:J,userSelect:l?"none":void 0},children:c("div",{className:"efp-scrollable-row__content",children:k})}),P&&c("button",{type:"button",className:m("efp-scrollable-row__arrow","efp-scrollable-row__arrow--right",{"efp-scrollable-row__arrow--rtl":a}),onClick:()=>j("right"),"aria-label":H,children:c("i",{className:"icon-chevron-right"})})]})})};export default ee;