react-window
Version:
<img src="https://react-window.vercel.app/og.svg" alt="react-window logo" width="400" height="210" />
3 lines (2 loc) • 12.9 kB
JavaScript
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("react/jsx-runtime"),o=require("react");function ce(e){let t=e;for(;t;){if(t.dir)return t.dir==="rtl";t=t.parentElement}return!1}function ae(e,t){const[s,r]=o.useState(t==="rtl");return o.useLayoutEffect(()=>{e&&(t||r(ce(e)))},[t,e]),s}const _=typeof window<"u"?o.useLayoutEffect:o.useEffect;function ee(e){if(e!==void 0)switch(typeof e){case"number":return e;case"string":{if(e.endsWith("px"))return parseFloat(e);break}}}function ue({box:e,defaultHeight:t,defaultWidth:s,disabled:r,element:n,mode:i,style:l}){const{styleHeight:f,styleWidth:c}=o.useMemo(()=>({styleHeight:ee(l?.height),styleWidth:ee(l?.width)}),[l?.height,l?.width]),[u,d]=o.useState({height:t,width:s}),a=r||i==="only-height"&&f!==void 0||i==="only-width"&&c!==void 0||f!==void 0&&c!==void 0;return _(()=>{if(n===null||a)return;const g=new ResizeObserver(p=>{for(const I of p){const{contentRect:h,target:w}=I;n===w&&d(y=>y.height===h.height&&y.width===h.width?y:{height:h.height,width:h.width})}});return g.observe(n,{box:e}),()=>{g?.unobserve(n)}},[e,a,n,f,c]),o.useMemo(()=>({height:f??u.height,width:c??u.width}),[u,f,c])}function te(e){const t=o.useRef(()=>{throw new Error("Cannot call during render.")});return _(()=>{t.current=e},[e]),o.useCallback(s=>t.current?.(s),[t])}let D=null;function fe(e=!1){if(D===null||e){const t=document.createElement("div"),s=t.style;s.width="50px",s.height="50px",s.overflow="scroll",s.direction="rtl";const r=document.createElement("div"),n=r.style;return n.width="100px",n.height="100px",t.appendChild(r),document.body.appendChild(t),t.scrollLeft>0?D="positive-descending":(t.scrollLeft=1,t.scrollLeft===0?D="negative":D="positive-ascending"),document.body.removeChild(t),D}return D}function N({containerElement:e,direction:t,isRtl:s,scrollOffset:r}){if(t==="horizontal"&&s)switch(fe()){case"negative":return-r;case"positive-descending":{if(e){const{clientWidth:n,scrollLeft:i,scrollWidth:l}=e;return l-n-i}break}}return r}function V(e,t="Assertion error"){if(!e)throw console.error(t),Error(t)}function F(e,t){if(e===t)return!0;if(!!e!=!!t||(V(e!==void 0),V(t!==void 0),Object.keys(e).length!==Object.keys(t).length))return!1;for(const s in e)if(!Object.is(t[s],e[s]))return!1;return!0}function se({cachedBounds:e,itemCount:t,itemSize:s}){if(t===0)return 0;if(typeof s=="number")return t*s;{const r=e.get(e.size===0?0:e.size-1);V(r!==void 0,"Unexpected bounds cache miss");const n=(r.scrollOffset+r.size)/e.size;return t*n}}function de({align:e,cachedBounds:t,index:s,itemCount:r,itemSize:n,containerScrollOffset:i,containerSize:l}){if(s<0||s>=r)throw RangeError(`Invalid index specified: ${s}`,{cause:`Index ${s} is not within the range of 0 - ${r-1}`});const f=se({cachedBounds:t,itemCount:r,itemSize:n}),c=t.get(s),u=Math.max(0,Math.min(f-l,c.scrollOffset)),d=Math.max(0,c.scrollOffset-l+c.size);switch(e==="smart"&&(i>=d&&i<=u?e="auto":e="center"),e){case"start":return u;case"end":return d;case"center":return c.scrollOffset<=l/2?0:c.scrollOffset+c.size/2>=f-l/2?f-l:c.scrollOffset+c.size/2-l/2;case"auto":default:return i>=d&&i<=u?i:i<d?d:u}}function Y({cachedBounds:e,containerScrollOffset:t,containerSize:s,itemCount:r,overscanCount:n}){const i=r-1;let l=0,f=-1,c=0,u=-1,d=0;for(;d<i;){const a=e.get(d);if(a.scrollOffset+a.size>t)break;d++}for(l=d,c=Math.max(0,l-n);d<i;){const a=e.get(d);if(a.scrollOffset+a.size>=t+s)break;d++}return f=Math.min(i,d),u=Math.min(r-1,f+n),l<0&&(l=0,f=-1,c=0,u=-1),{startIndexVisible:l,stopIndexVisible:f,startIndexOverscan:c,stopIndexOverscan:u}}function he({itemCount:e,itemProps:t,itemSize:s}){const r=new Map;return{get(n){for(V(n<e,`Invalid index ${n}`);r.size-1<n;){const l=r.size;let f;switch(typeof s){case"function":{f=s(l,t);break}case"number":{f=s;break}}if(l===0)r.set(l,{size:f,scrollOffset:0});else{const c=r.get(l-1);V(c!==void 0,`Unexpected bounds cache miss for index ${n}`),r.set(l,{scrollOffset:c.scrollOffset+c.size,size:f})}}const i=r.get(n);return V(i!==void 0,`Unexpected bounds cache miss for index ${n}`),i},set(n,i){r.set(n,i)},get size(){return r.size}}}function ge({itemCount:e,itemProps:t,itemSize:s}){return o.useMemo(()=>he({itemCount:e,itemProps:t,itemSize:s}),[e,t,s])}function pe({containerSize:e,itemSize:t}){let s;switch(typeof t){case"string":{V(t.endsWith("%"),`Invalid item size: "${t}"; string values must be percentages (e.g. "100%")`),V(e!==void 0,"Container size must be defined if a percentage item size is specified"),s=e*parseInt(t)/100;break}default:{s=t;break}}return s}function K({containerElement:e,containerStyle:t,defaultContainerSize:s=0,direction:r,isRtl:n=!1,itemCount:i,itemProps:l,itemSize:f,onResize:c,overscanCount:u}){const{height:d=s,width:a=s}=ue({defaultHeight:r==="vertical"?s:void 0,defaultWidth:r==="horizontal"?s:void 0,element:e,mode:r==="vertical"?"only-height":"only-width",style:t}),g=o.useRef({height:0,width:0}),p=r==="vertical"?d:a,I=pe({containerSize:p,itemSize:f});o.useLayoutEffect(()=>{if(typeof c=="function"){const x=g.current;(x.height!==d||x.width!==a)&&(c({height:d,width:a},{...x}),x.height=d,x.width=a)}},[d,c,a]);const h=ge({itemCount:i,itemProps:l,itemSize:I}),w=o.useCallback(x=>h.get(x),[h]),[y,O]=o.useState(()=>Y({cachedBounds:h,containerScrollOffset:0,containerSize:p,itemCount:i,overscanCount:u})),{startIndexVisible:B,startIndexOverscan:b,stopIndexVisible:G,stopIndexOverscan:M}={startIndexVisible:Math.min(i-1,y.startIndexVisible),startIndexOverscan:Math.min(i-1,y.startIndexOverscan),stopIndexVisible:Math.min(i-1,y.stopIndexVisible),stopIndexOverscan:Math.min(i-1,y.stopIndexOverscan)},z=o.useCallback(()=>se({cachedBounds:h,itemCount:i,itemSize:I}),[h,i,I]),A=o.useCallback(x=>{const T=N({containerElement:e,direction:r,isRtl:n,scrollOffset:x});return Y({cachedBounds:h,containerScrollOffset:T,containerSize:p,itemCount:i,overscanCount:u})},[h,e,p,r,n,i,u]);_(()=>{const x=(r==="vertical"?e?.scrollTop:e?.scrollLeft)??0;O(A(x))},[e,r,A]),_(()=>{if(!e)return;const x=()=>{O(T=>{const{scrollLeft:R,scrollTop:v}=e,m=N({containerElement:e,direction:r,isRtl:n,scrollOffset:r==="vertical"?v:R}),k=Y({cachedBounds:h,containerScrollOffset:m,containerSize:p,itemCount:i,overscanCount:u});return F(k,T)?T:k})};return e.addEventListener("scroll",x),()=>{e.removeEventListener("scroll",x)}},[h,e,p,r,i,u]);const S=te(({align:x="auto",containerScrollOffset:T,index:R})=>{let v=de({align:x,cachedBounds:h,containerScrollOffset:T,containerSize:p,index:R,itemCount:i,itemSize:I});if(e){if(v=N({containerElement:e,direction:r,isRtl:n,scrollOffset:v}),typeof e.scrollTo!="function"){const m=A(v);F(y,m)||O(m)}return v}});return{getCellBounds:w,getEstimatedSize:z,scrollToIndex:S,startIndexOverscan:b,startIndexVisible:B,stopIndexOverscan:M,stopIndexVisible:G}}function re(e){return o.useMemo(()=>e,Object.values(e))}function ne(e,t){const{ariaAttributes:s,style:r,...n}=e,{ariaAttributes:i,style:l,...f}=t;return F(s,i)&&F(r,l)&&F(n,f)}function xe({cellComponent:e,cellProps:t,children:s,className:r,columnCount:n,columnWidth:i,defaultHeight:l=0,defaultWidth:f=0,dir:c,gridRef:u,onCellsRendered:d,onResize:a,overscanCount:g=3,rowCount:p,rowHeight:I,style:h,tagName:w="div",...y}){const O=re(t),B=o.useMemo(()=>o.memo(e,ne),[e]),[b,G]=o.useState(null),M=ae(b,c),{getCellBounds:z,getEstimatedSize:A,startIndexOverscan:S,startIndexVisible:x,scrollToIndex:T,stopIndexOverscan:R,stopIndexVisible:v}=K({containerElement:b,containerStyle:h,defaultContainerSize:f,direction:"horizontal",isRtl:M,itemCount:n,itemProps:O,itemSize:i,onResize:a,overscanCount:g}),{getCellBounds:m,getEstimatedSize:k,startIndexOverscan:L,startIndexVisible:Z,scrollToIndex:C,stopIndexOverscan:U,stopIndexVisible:P}=K({containerElement:b,containerStyle:h,defaultContainerSize:l,direction:"vertical",itemCount:p,itemProps:O,itemSize:I,onResize:a,overscanCount:g});o.useImperativeHandle(u,()=>({get element(){return b},scrollToCell({behavior:$="auto",columnAlign:E="auto",columnIndex:H,rowAlign:j="auto",rowIndex:W}){const q=T({align:E,containerScrollOffset:b?.scrollLeft??0,index:H}),le=C({align:j,containerScrollOffset:b?.scrollTop??0,index:W});typeof b?.scrollTo=="function"&&b.scrollTo({behavior:$,left:q,top:le})},scrollToColumn({align:$="auto",behavior:E="auto",index:H}){const j=T({align:$,containerScrollOffset:b?.scrollLeft??0,index:H});typeof b?.scrollTo=="function"&&b.scrollTo({behavior:E,left:j})},scrollToRow({align:$="auto",behavior:E="auto",index:H}){const j=C({align:$,containerScrollOffset:b?.scrollTop??0,index:H});typeof b?.scrollTo=="function"&&b.scrollTo({behavior:E,top:j})}}),[b,T,C]),o.useEffect(()=>{S>=0&&R>=0&&L>=0&&U>=0&&d&&d({columnStartIndex:x,columnStopIndex:v,rowStartIndex:Z,rowStopIndex:P},{columnStartIndex:S,columnStopIndex:R,rowStartIndex:L,rowStopIndex:U})},[d,S,x,R,v,L,Z,U,P]);const oe=o.useMemo(()=>{const $=[];if(n>0&&p>0)for(let E=L;E<=U;E++){const H=m(E),j=[];for(let W=S;W<=R;W++){const q=z(W);j.push(o.createElement(B,{...O,ariaAttributes:{"aria-colindex":W+1,role:"gridcell"},columnIndex:W,key:W,rowIndex:E,style:{position:"absolute",left:M?void 0:0,right:M?0:void 0,transform:`translate(${M?-q.scrollOffset:q.scrollOffset}px, ${H.scrollOffset}px)`,height:H.size,width:q.size}}))}$.push(J.jsx("div",{role:"row","aria-rowindex":E+1,children:j},E))}return $},[B,O,n,S,R,z,m,M,p,L,U]),ie=J.jsx("div",{"aria-hidden":!0,style:{height:k(),width:A(),zIndex:-1}});return o.createElement(w,{"aria-colcount":n,"aria-rowcount":p,role:"grid",...y,className:r,dir:c,ref:G,style:{position:"relative",maxHeight:"100%",maxWidth:"100%",flexGrow:1,overflow:"auto",...h}},oe,s,ie)}const be=o.useState,me=o.useRef;function ve(e){return e!=null&&typeof e=="object"&&"getAverageRowHeight"in e&&typeof e.getAverageRowHeight=="function"}const Q="data-react-window-index";function Ie({children:e,className:t,defaultHeight:s=0,listRef:r,onResize:n,onRowsRendered:i,overscanCount:l=3,rowComponent:f,rowCount:c,rowHeight:u,rowProps:d,tagName:a="div",style:g,...p}){const I=re(d),h=o.useMemo(()=>o.memo(f,ne),[f]),[w,y]=o.useState(null),O=ve(u),B=o.useMemo(()=>O?v=>u.getRowHeight(v)??u.getAverageRowHeight():u,[O,u]),{getCellBounds:b,getEstimatedSize:G,scrollToIndex:M,startIndexOverscan:z,startIndexVisible:A,stopIndexOverscan:S,stopIndexVisible:x}=K({containerElement:w,containerStyle:g,defaultContainerSize:s,direction:"vertical",itemCount:c,itemProps:I,itemSize:B,onResize:n,overscanCount:l});o.useImperativeHandle(r,()=>({get element(){return w},scrollToRow({align:v="auto",behavior:m="auto",index:k}){const L=M({align:v,containerScrollOffset:w?.scrollTop??0,index:k});typeof w?.scrollTo=="function"&&w.scrollTo({behavior:m,top:L})}}),[w,M]),_(()=>{if(!w)return;const v=Array.from(w.children).filter((m,k)=>{if(m.hasAttribute("aria-hidden"))return!1;const L=`${z+k}`;return m.setAttribute(Q,L),!0});if(O)return u.observeRowElements(v)},[w,O,u,z,S]),o.useEffect(()=>{z>=0&&S>=0&&i&&i({startIndex:A,stopIndex:x},{startIndex:z,stopIndex:S})},[i,z,A,S,x]);const T=o.useMemo(()=>{const v=[];if(c>0)for(let m=z;m<=S;m++){const k=b(m);v.push(o.createElement(h,{...I,ariaAttributes:{"aria-posinset":m+1,"aria-setsize":c,role:"listitem"},key:m,index:m,style:{position:"absolute",left:0,transform:`translateY(${k.scrollOffset}px)`,height:O?void 0:k.size,width:"100%"}}))}return v},[h,b,O,c,I,z,S]),R=J.jsx("div",{"aria-hidden":!0,style:{height:G(),width:"100%",zIndex:-1}});return o.createElement(a,{role:"list",...p,className:t,ref:y,style:{position:"relative",maxHeight:"100%",flexGrow:1,overflowY:"auto",...g}},T,e,R)}function we({defaultRowHeight:e,key:t}){const[s,r]=o.useState({key:t,map:new Map});s.key!==t&&r({key:t,map:new Map});const{map:n}=s,i=o.useCallback(()=>{let a=0;return n.forEach(g=>{a+=g}),a===0?e:a/n.size},[e,n]),l=o.useCallback(a=>{const g=n.get(a);return g!==void 0?g:(n.set(a,e),e)},[e,n]),f=o.useCallback((a,g)=>{r(p=>{if(p.map.get(a)===g)return p;const I=new Map(p.map);return I.set(a,g),{...p,map:I}})},[]),c=te(a=>{a.length!==0&&a.forEach(g=>{const{borderBoxSize:p,target:I}=g,h=I.getAttribute(Q);V(h!==null,`Invalid ${Q} attribute value`);const w=parseInt(h),{blockSize:y}=p[0];y&&f(w,y)})}),[u]=o.useState(()=>new ResizeObserver(c));o.useEffect(()=>()=>{u.disconnect()},[u]);const d=o.useCallback(a=>(a.forEach(g=>u.observe(g)),()=>{a.forEach(g=>u.unobserve(g))}),[u]);return o.useMemo(()=>({getAverageRowHeight:i,getRowHeight:l,setRowHeight:f,observeRowElements:d}),[i,l,f,d])}const ye=o.useState,Oe=o.useRef;let X=-1;function Se(e=!1){if(X===-1||e){const t=document.createElement("div"),s=t.style;s.width="50px",s.height="50px",s.overflow="scroll",document.body.appendChild(t),X=t.offsetWidth-t.clientWidth,document.body.removeChild(t)}return X}exports.Grid=xe;exports.List=Ie;exports.getScrollbarSize=Se;exports.useDynamicRowHeight=we;exports.useGridCallbackRef=be;exports.useGridRef=me;exports.useListCallbackRef=ye;exports.useListRef=Oe;
//# sourceMappingURL=react-window.cjs.map