UNPKG

@bothub-chat/ui

Version:

Bothub UI Components

2 lines (1 loc) 2.84 kB
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{forwardRef as t,useRef as o,useState as l,useCallback as s,useEffect as i,useImperativeHandle as n}from"react";import{ScrollbarContent as c,ScrollbarStyled as a,ScrollbarShadows as u}from"./styled.js";import{ScrollbarProvider as d}from"./context.js";export{ScrollbarContext,useScrollbar}from"./context.js";import"tslib";import"@react-spring/web";import"./shadow/styled.js";import"../../theme/index.js";export{ScrollbarStyle}from"./style/styled.js";const m=t(({className:t,scrollbarClassName:m,variant:h="primary",size:p=6,scrollShadows:v,scrollLocked:w,overflow:f="auto",disabled:b=!1,disableShadows:S=!1,children:T,onScroll:g,defaultStickyBottom:L=!1,withStickyBottom:x=!1,isHorizontalScrollbar:y=!1},z)=>{var j;const H=o(null),[E,M]=l(!1),[$,B]=l(!1),[N,k]=l(!1),[C,O]=l(!1),R=!!v,W=!!w,[D,Y]=l(L),[q,A]=l(0),F=null!==(j=null==v?void 0:v.size)&&void 0!==j?j:60,G=s(e=>{const{scrollTop:r,scrollHeight:t,clientHeight:o,scrollLeft:l,scrollWidth:s,clientWidth:i}=e,n=F>o,c=F>i,a=!n&&0!==r,u=!n&&Math.round(r)+1<t-o;k(a),O(u),M(!c&&0!==l),B(!c&&Math.round(l)+1<s-i);const d=q>e.scrollTop;if(A(e.scrollTop),x){const r=e.clientHeight-Math.ceil(e.scrollHeight-e.scrollTop);Math.abs(r)<20&&!d?Y(!0):d&&Y(!1)}b&&e.scrollTo(0,0),null==g||g({isTop:a,isBottom:u,previousScrollTop:q})},[H.current,b,q,x,F,g]);i(()=>{if(!y)return;const e=e=>{H.current&&(e.preventDefault(),H.current.scrollLeft+=e.deltaY)},r=H.current;return r&&r.addEventListener("wheel",e,{passive:!0}),()=>{r&&r.removeEventListener("wheel",e)}},[y,H.current]);const I=s(e=>{var r;const t=H.current;if(null!==t&&(W||void 0!==e)&&null!==t){const{side:o}=null!==(r=null!=e?e:w)&&void 0!==r?r:{side:"bottom"};if("bottom"===o)t.scrollTop=t.scrollHeight}},[W,w]);n(z,()=>({element:H.current,setScroll:I}),[H.current,I]),i(()=>{const e=H.current;if(null===e)return;G(e);let r=window.setTimeout(()=>{G(e)},500),t=null;D&&(t=new MutationObserver(()=>{G(e),D&&!W&&(e.scrollTop=e.scrollHeight)}),t.observe(e,{childList:!0,subtree:!0}));const o=()=>{window.clearTimeout(r),G(e),r=window.setTimeout(()=>{G(e)},500)};window.addEventListener("resize",o);let l=null;return H.current&&(l=new ResizeObserver(e=>{e.forEach(e=>{G(e.target)})}),l.observe(H.current)),()=>{clearTimeout(r),null==t||t.disconnect(),window.removeEventListener("resize",o),null==l||l.disconnect()}},[H.current,G,D]);const J=e(c,{$variant:h,$size:p,$disabled:b,$overflow:f,ref:H,className:t,onScroll:()=>{H.current&&G(H.current)},children:T});return R?e(d,{scrollbarSize:p,scrollShadows:v,setScroll:I,disabled:b,isLeft:E,isRight:$,isTop:N,isBottom:C,children:r(a,{$overflow:f,className:m,children:[J,!S&&r(u,{children:[v.left,v.right,v.top,v.bottom]})]})}):J});export{m as Scrollbar,c as ScrollbarContent,d as ScrollbarProvider,u as ScrollbarShadows,a as ScrollbarStyled};