@wenghongtian/react-virtual-list
Version:
2 lines (1 loc) • 6.51 kB
JavaScript
(function(t,i){typeof exports=="object"&&typeof module<"u"?module.exports=i(require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["react/jsx-runtime","react"],i):(t=typeof globalThis<"u"?globalThis:t||self,t["react-virtual-list"]=i(t.jsxRuntime,t.react))})(this,function(t,i){"use strict";const Y="";var b=(c=>(c[c.eq=0]="eq",c[c.lt=1]="lt",c[c.gt=2]="gt",c))(b||{});function E(c,s,l){let o=0,u=c.length;for(;o<u;){const d=o+u>>1;switch(l(c[d],s)){case 0:return d;case 2:u=d-1;break;case 1:o=d+1}}return o}function H(c){const{offsetTop:s,onUpdate:l}=c,o=i.useRef(null);return i.useLayoutEffect(()=>{const u={childList:!0,attributes:!0,characterData:!0,subtree:!0,attributeFilter:["class","style"],attributeOldValue:!0,characterDataOldValue:!0},d=new MutationObserver(function(y){y.forEach(function(m){if(m.type==="attributes"&&m.attributeName==="style"){const{height:v}=o.current.getBoundingClientRect();l(v)}})});d.observe(o.current,u);const{height:g}=o.current.getBoundingClientRect();return l(g),()=>{d.disconnect()}},[]),t.jsx("div",{className:"rvl-item",ref:o,style:{transform:`translate3d(0,${s}px, 0)`},"data-index":c.index,children:c.children})}function L(c,s){const l=i.useRef(!1),o=i.useRef();return{run:(...g)=>{l.current&&(clearTimeout(o.current),o.current=setTimeout(()=>{c(...g),l.current=!1},s==null?void 0:s.wait)),l.current=!0,o.current=setTimeout(()=>{c(...g),l.current=!1},s==null?void 0:s.wait)},cancel:()=>{clearTimeout(o.current)}}}const U=()=>t.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",width:30,height:30,fill:"#1677ff",children:[t.jsx("circle",{cx:"16",cy:"3",r:"0",children:t.jsx("animate",{attributeName:"r",values:"0;3;0;0",dur:"1s",repeatCount:"indefinite",begin:"0",keySplines:"0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",calcMode:"spline"})}),t.jsx("circle",{transform:"rotate(45 16 16)",cx:"16",cy:"3",r:"0",children:t.jsx("animate",{attributeName:"r",values:"0;3;0;0",dur:"1s",repeatCount:"indefinite",begin:"0.125s",keySplines:"0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",calcMode:"spline"})}),t.jsx("circle",{transform:"rotate(90 16 16)",cx:"16",cy:"3",r:"0",children:t.jsx("animate",{attributeName:"r",values:"0;3;0;0",dur:"1s",repeatCount:"indefinite",begin:"0.25s",keySplines:"0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",calcMode:"spline"})}),t.jsx("circle",{transform:"rotate(135 16 16)",cx:"16",cy:"3",r:"0",children:t.jsx("animate",{attributeName:"r",values:"0;3;0;0",dur:"1s",repeatCount:"indefinite",begin:"0.375s",keySplines:"0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",calcMode:"spline"})}),t.jsx("circle",{transform:"rotate(180 16 16)",cx:"16",cy:"3",r:"0",children:t.jsx("animate",{attributeName:"r",values:"0;3;0;0",dur:"1s",repeatCount:"indefinite",begin:"0.5s",keySplines:"0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",calcMode:"spline"})}),t.jsx("circle",{transform:"rotate(225 16 16)",cx:"16",cy:"3",r:"0",children:t.jsx("animate",{attributeName:"r",values:"0;3;0;0",dur:"1s",repeatCount:"indefinite",begin:"0.625s",keySplines:"0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",calcMode:"spline"})}),t.jsx("circle",{transform:"rotate(270 16 16)",cx:"16",cy:"3",r:"0",children:t.jsx("animate",{attributeName:"r",values:"0;3;0;0",dur:"1s",repeatCount:"indefinite",begin:"0.75s",keySplines:"0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",calcMode:"spline"})}),t.jsx("circle",{transform:"rotate(315 16 16)",cx:"16",cy:"3",r:"0",children:t.jsx("animate",{attributeName:"r",values:"0;3;0;0",dur:"1s",repeatCount:"indefinite",begin:"0.875s",keySplines:"0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",calcMode:"spline"})}),t.jsx("circle",{transform:"rotate(180 16 16)",cx:"16",cy:"3",r:"0",children:t.jsx("animate",{attributeName:"r",values:"0;3;0;0",dur:"1s",repeatCount:"indefinite",begin:"0.5s",keySplines:"0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",calcMode:"spline"})})]});function j(c){var q;const{estimateHeight:s=100,empty:l="暂无数据~",bufferSize:o=5,itemOffset:u=10,renderItem:d,rowKey:g,pagination:{current:y=1,pageSize:m=20}={},request:v,noMoreRender:B="---我也是有底线的---",loadingRender:O=t.jsxs(t.Fragment,{children:[t.jsx(U,{}),t.jsx("span",{children:"正在加载"})]})}=c,[S,F]=i.useState(window.innerHeight),[M]=i.useState(()=>new Map),[N,k]=i.useState(!1),[f,P]=i.useState([]),x=i.useRef({pageSize:m,current:y,noMore:!1});async function C(){const n=x.current;k(!0);const{list:e,noMore:r}=await v({current:n.current,pageSize:n.pageSize});return k(!1),P(f.concat(e)),n.current++,n.pageSize++,n.noMore=r,p.current.endIndex=Math.min(w+p.current.startIndex,e.length+p.current.startIndex),{list:e,noMore:r}}i.useEffect(()=>{C()},[]);const[,V]=i.useReducer(n=>n+1,0);i.useLayoutEffect(()=>{const{height:n}=I.current.getBoundingClientRect();F(n)},[]);const w=i.useMemo(()=>S/s|0,[S]),[A,K]=i.useState(0),h=i.useMemo(()=>{const n=new Array(f.length);for(let e=0;e<f.length;e++){const r=f[e];if(M.has(r)){n[e]=M.get(r);continue}e==0?n[e]={index:e,top:0,bottom:s,height:s}:n[e]={index:e,top:n[e-1].bottom+u,bottom:n[e-1].bottom+u+s,height:s},M.set(r,n[e])}return n},[f]);i.useEffect(()=>{T(h)},[h]);const p=i.useRef({startIndex:0,originIndex:0,endIndex:Math.min(f.length,w+o)});function $(n){const e=E(h,n,(r,a)=>r.top===a?b.eq:r.top>a?b.gt:b.lt);return h[e].top===n?e:e+1}const I=i.useRef(null),G=n=>{var z,D;if(n.target!==I.current)return;const e=n.target.scrollTop,r=$(e);p.current.originIndex=r,p.current.startIndex=Math.max(0,r-o),p.current.endIndex=Math.min(f.length,r+w+o),K(e),(z=c.onScroll)==null||z.call(c,n);const a=((D=h.at(-1))==null?void 0:D.bottom)||0;e>A&&e==a-S&&!x.current.noMore&&!N&&C()},{run:J}=L(T);function T(n){for(let e=1;e<n.length;e++){const r=n[e],a=n[e-1];r.top=a.bottom+u,r.bottom=r.top+r.height}V()}function Q(n,e){const r=h[n];r.height=e,r.bottom=r.top+e,J(h)}function W(n,e){const r=h[e];return t.jsx(H,{offsetTop:r.top,onUpdate:a=>Q(e,a),index:e,children:d(n,e)},g?n[g]+"":e)}function X(){const n=[],{startIndex:e,endIndex:r}=p.current;for(let a=e;a<r;a++)n.push(W(f[a],a));return n}return t.jsxs("div",{className:"rvl-container",onScroll:G,ref:I,children:[t.jsxs("div",{children:[t.jsx("div",{className:"rvl-placeholder",style:{height:((q=h.at(-1))==null?void 0:q.bottom)||0}}),x.current.noMore&&!!f.length&&t.jsx("div",{className:"rvl-no-more",children:B}),!f.length&&x.current.noMore&&t.jsx("div",{className:"rvl-empty",children:l}),N&&t.jsx("div",{className:"rvl-loading",children:O})]}),X()]})}return j});