@ehfuse/mui-virtual-data-table 1.1.9 → 1.1.11
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/README.md +28 -27
- package/dist/index.esm.js +2 -2
- package/dist/index.esm.js.map +3 -3
- package/dist/index.js +2 -2
- package/dist/index.js.map +3 -3
- package/dist/types.d.ts +12 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,33 +6,33 @@ React와 Material-UI를 위한 고성능 가상화 데이터 테이블 컴포넌
|
|
|
6
6
|
|
|
7
7
|
## Features
|
|
8
8
|
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
13
|
-
-
|
|
14
|
-
-
|
|
15
|
-
-
|
|
16
|
-
-
|
|
17
|
-
-
|
|
18
|
-
-
|
|
19
|
-
-
|
|
20
|
-
-
|
|
9
|
+
- 🚀 **High Performance**: Virtualized rendering with react-virtuoso for smooth scrolling with large datasets
|
|
10
|
+
- ♾️ **Infinite Scroll**: Built-in infinite scroll with automatic loading indicator
|
|
11
|
+
- ⌨️ **Keyboard Navigation**: Full keyboard support (Arrow keys, PageUp/Down, Home/End)
|
|
12
|
+
- 🎨 **Material-UI Integration**: Seamless integration with MUI components
|
|
13
|
+
- 🦓 **Zebra Striping**: Optional alternating row colors with custom color support
|
|
14
|
+
- 🔧 **TypeScript Support**: Full TypeScript support with comprehensive type definitions
|
|
15
|
+
- 🔄 **Sorting**: Built-in column sorting functionality
|
|
16
|
+
- 🎯 **Customizable**: Highly customizable columns, styling, and scrollbar options
|
|
17
|
+
- 📊 **Empty State**: Built-in empty state handling with custom message
|
|
18
|
+
- 🔍 **Loading State**: Smooth loading transitions with fade-out animation
|
|
19
|
+
- 📏 **Grouped Headers**: Support for grouped column headers with dynamic height calculation
|
|
20
|
+
- 🎨 **Custom Scrollbar**: Beautiful custom scrollbar with full customization options
|
|
21
21
|
|
|
22
22
|
## 주요 기능
|
|
23
23
|
|
|
24
|
-
-
|
|
25
|
-
-
|
|
26
|
-
-
|
|
27
|
-
-
|
|
28
|
-
-
|
|
29
|
-
-
|
|
30
|
-
-
|
|
31
|
-
-
|
|
32
|
-
-
|
|
33
|
-
-
|
|
34
|
-
-
|
|
35
|
-
-
|
|
24
|
+
- 🚀 **고성능**: react-virtuoso를 사용한 가상화 렌더링으로 대용량 데이터셋에서도 부드러운 스크롤
|
|
25
|
+
- ♾️ **무한 스크롤**: 자동 로딩 인디케이터가 포함된 무한 스크롤 기능
|
|
26
|
+
- ⌨️ **키보드 탐색**: 완전한 키보드 지원 (방향키, PageUp/Down, Home/End)
|
|
27
|
+
- 🎨 **Material-UI 통합**: MUI 컴포넌트와의 완벽한 통합
|
|
28
|
+
- 🦓 **얼룩말 줄무늬**: 사용자 지정 색상을 지원하는 선택적 행 교차 색상
|
|
29
|
+
- 🔧 **TypeScript 지원**: 포괄적인 타입 정의가 포함된 완전한 TypeScript 지원
|
|
30
|
+
- 🔄 **정렬**: 내장된 컬럼 정렬 기능
|
|
31
|
+
- 🎯 **커스터마이징**: 컬럼, 스타일링, 스크롤바 옵션의 높은 커스터마이징
|
|
32
|
+
- 📊 **빈 상태**: 커스텀 메시지를 지원하는 내장된 빈 상태 처리
|
|
33
|
+
- 🔍 **로딩 상태**: 페이드아웃 애니메이션이 적용된 부드러운 로딩 전환
|
|
34
|
+
- 📏 **그룹 헤더**: 동적 높이 계산을 지원하는 그룹화된 컬럼 헤더
|
|
35
|
+
- 🎨 **커스텀 스크롤바**: 완전한 커스터마이징 옵션을 갖춘 아름다운 커스텀 스크롤바
|
|
36
36
|
|
|
37
37
|
## Installation
|
|
38
38
|
|
|
@@ -52,9 +52,9 @@ npm install react react-dom @mui/material react-virtuoso
|
|
|
52
52
|
|
|
53
53
|
For detailed API reference and usage examples:
|
|
54
54
|
|
|
55
|
-
-
|
|
56
|
-
-
|
|
57
|
-
-
|
|
55
|
+
- **[한국어 시작하기](./docs/ko/getting-started.md)** - API 설명 및 가이드
|
|
56
|
+
- **[한국어 예제 코드](./docs/ko/example.md)** - 다양한 사용 예제
|
|
57
|
+
- **[Getting Started (English)](./docs/en/getting-started.md)** - API reference and guide _(coming soon)_
|
|
58
58
|
|
|
59
59
|
## Quick Start
|
|
60
60
|
|
|
@@ -112,6 +112,7 @@ function App() {
|
|
|
112
112
|
paddingBottom={string | number} // Bottom padding (default: 0)
|
|
113
113
|
rowHoverColor={string} // Row hover background color (default: "#000000", auto-inverted brightness in dark mode)
|
|
114
114
|
rowHoverOpacity={number} // Row hover opacity 0-1 (default: 0.06)
|
|
115
|
+
viewportBuffer={number | { top, bottom }} // Viewport outside pre-render buffer in px (default: rowHeight-based auto buffer)
|
|
115
116
|
|
|
116
117
|
// Optional - Infinite Scroll
|
|
117
118
|
loading={boolean} // Loading state (default: false)
|
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{forwardRef as tt,useCallback as ye,useMemo as rt,useRef as A,useEffect as $e,memo as Lt,useState as ct}from"react";import{Box as ve,Table as Dt,TableBody as Et,TableCell as Ye,TableContainer as Ht,TableHead as It,TableRow as Fe,TableSortLabel as nt,Paper as Rt,Typography as $t}from"@mui/material";import{TableVirtuoso as Ot}from"react-virtuoso";import{jsx as et}from"react/jsx-runtime";import{useRef as ot,useState as pt,useEffect as ft}from"react";import{Box as mt,CircularProgress as ht}from"@mui/material";var ze=function(){return ze=Object.assign||function(p){for(var f,g=1,w=arguments.length;g<w;g++){f=arguments[g];for(var T in f)Object.prototype.hasOwnProperty.call(f,T)&&(p[T]=f[T])}return p},ze.apply(this,arguments)};function it(s){var p=s.visible,f=s.onComplete,g=s.fadeoutDuration,w=g===void 0?200:g,T=s.exitDelay,b=T===void 0?0:T,O=s.size,S=O===void 0?40:O,Y=s.className,Q=s.style,B=s.sx,q=s.indicator,C=s.background,W=C===void 0?{show:!0,color:"255, 255, 255",opacity:.9}:C,pe=ot(void 0),l=ot(null),V=pt(p),fe=V[0],xe=V[1],E=W.show,we=E===void 0?!0:E,v=W.color,k=v===void 0?"255, 255, 255":v,me=W.opacity,ee=me===void 0?.9:me;if(ft(function(){var Ne=pe.current;if(Ne===!0&&p===!1&&l.current){var oe=l.current;oe.style.opacity="0",setTimeout(function(){xe(!1),f?.()},w+b)}else p===!0&&(xe(!0),l.current&&(l.current.style.opacity="1"));pe.current=p},[p,f,w,b]),!fe)return null;var De=function(){return typeof q=="string"?et("img",{src:q,alt:"Loading",style:{width:S,height:S}}):q||et(ht,{size:S})},he=function(){return we?k.startsWith("rgba")?{backgroundColor:k}:/^\d+,\s*\d+,\s*\d+$/.test(k)?{backgroundColor:"rgba(".concat(k,", ").concat(ee,")")}:ee!==1?{backgroundColor:k,"&::before":{content:'""',position:"absolute",top:0,left:0,right:0,bottom:0,backgroundColor:k,opacity:ee,zIndex:-1}}:{backgroundColor:k}:{backgroundColor:"transparent"}};return et(mt,{ref:l,className:Y,style:ze({},Q),sx:ze(ze({position:"absolute",top:0,left:0,right:0,bottom:0,display:"flex",alignItems:"center",justifyContent:"center",zIndex:1e3,opacity:p?1:0,transition:"opacity ".concat(w,"ms ease-out")},he()),B),children:De()})}import{useRef as Z,useEffect as de,useState as z,useCallback as D,useMemo as Ae,forwardRef as gt,useImperativeHandle as bt,useLayoutEffect as yt}from"react";import{jsx as Re,jsxs as at}from"react/jsx-runtime";var vt=["editor","textarea","input","select","textfield","form-control","contenteditable","MuiInputBase-input","MuiSelect-select","MuiOutlinedInput-input","MuiFilledInput-input","MuiInput-input","MuiFormControl-root","MuiTextField-root","MuiSelect-root","MuiOutlinedInput-root","MuiFilledInput-root","MuiInput-root","MuiAutocomplete-input","MuiDatePicker-input","MuiSlider-thumb","MuiSlider-rail","MuiSlider-track","MuiSlider-mark","MuiSlider-markLabel","MuiSlider-root","MuiSlider-colorPrimary","MuiSlider-sizeMedium","MuiIconButton-root","MuiButton-root","MuiButtonBase-root","MuiTouchRipple-root","MuiCheckbox-root","MuiRadio-root","MuiSwitch-root","PrivateSwitchBase-root","ant-input","ant-input-affix-wrapper","ant-input-group-addon","ant-input-number","ant-input-number-handler","ant-select","ant-select-selector","ant-select-selection-search","ant-select-dropdown","ant-cascader","ant-cascader-input","ant-picker","ant-picker-input","ant-time-picker","ant-calendar-picker","ant-slider","ant-slider-track","ant-slider-handle","ant-switch","ant-checkbox","ant-checkbox-wrapper","ant-radio","ant-radio-wrapper","ant-rate","ant-upload","ant-upload-drag","ant-form-item","ant-form-item-control","ant-btn","ant-dropdown","ant-dropdown-trigger","ant-menu","ant-menu-item","ant-tooltip","ant-popover","ant-modal","ant-drawer","ant-tree-select","ant-auto-complete","ant-mentions","ant-transfer","ui-input","ui-textarea","ui-select","ui-select-trigger","ui-select-content","ui-select-item","ui-button","ui-checkbox","ui-radio-group","ui-switch","ui-slider","ui-range-slider","ui-calendar","ui-date-picker","ui-combobox","ui-command","ui-command-input","ui-popover","ui-dialog","ui-sheet","ui-dropdown-menu","ui-context-menu","ui-menubar","ui-navigation-menu","ui-form","ui-form-control","ui-form-item","ui-form-field","ui-label","radix-ui","radix-select","radix-dropdown","radix-dialog","radix-popover","radix-accordion","radix-tabs","radix-slider","radix-switch","radix-checkbox","radix-radio","ql-editor","ql-container","ql-toolbar","ql-picker","ql-picker-label","ql-picker-options","ql-formats","ql-snow","ql-bubble","quill","quilleditor","monaco-editor","monaco-editor-background","view-lines","decorationsOverviewRuler","monaco-scrollable-element","CodeMirror","CodeMirror-code","CodeMirror-lines","CodeMirror-scroll","CodeMirror-sizer","cm-editor","cm-focused","cm-content","tox-editor-container","tox-editor-header","tox-edit-area","tox-tinymce","mce-content-body","ck-editor","ck-content","ck-toolbar","ck-editor__editable","ck-widget","slate-editor","slate-content","DraftEditor-root","DraftEditor-editorContainer","public-DraftEditor-content","ehfuse-editor","ehfuse-editor-wrapper","ehfuse-editor-content","ehfuse-toolbar","ehfuse-toolbar-group","ehfuse-cursor","text-editor","rich-text-editor","wysiwyg","ace_editor","ace_content"],lt=(s,p)=>{let f=s.tagName.toLowerCase(),g=["text","password","email","number","search","tel","url","checkbox","radio"];if(f==="input"){let w=s.type;return g.includes(w)}if(["textarea","select","button"].includes(f)||["svg","path","circle","rect","line","polygon","polyline"].includes(f)||s.getAttribute("contenteditable")==="true")return!0;if(p?.excludeSelectors){for(let w of p.excludeSelectors)if(s.matches(w))return!0}return xt(s,p)},xt=(s,p)=>{let f=[...vt,...p?.excludeClasses||[]],g=s,w=0,T=5;for(;g&&w<=T;){if(f.some(b=>g.classList.contains(b)))return!0;if(g.classList.contains("MuiDialogContent-root"))break;g=g.parentElement,w++}return!1},wt={},Mt={},Tt={},St={},Ct={},kt=gt(({className:s="",style:p={},containerStyle:f={},contentStyle:g={},children:w,onScroll:T,thumb:b=wt,track:O=Mt,arrows:S=Tt,dragScroll:Y=St,autoHide:Q=Ct,showScrollbar:B=!0,detectInnerScroll:q=!1},C)=>{let W=Z({});de(()=>{W.current={children:w,onScroll:T,showScrollbar:B,thumb:b,track:O,arrows:S,dragScroll:Y,autoHide:Q}});let pe=Z(null),l=Z(null),V=Z(null),fe=Z(null),xe=Z(null),E=Z(null),[we,v]=z(!1),[k,me]=z(!1),[ee,De]=z(!1),[he,Ne]=z({y:0,scrollTop:0}),[oe,qe]=z(0),[Ge,Ue]=z(0),[Me,Ee]=z(!1),[H,ie]=z(!1),[Te,We]=z({x:0,y:0,scrollTop:0,scrollLeft:0}),[Xe,Pe]=z(null),[le,ge]=z(null),[ut,Ke]=z(!1),ae=Z(null),[He,Se]=z(!1),Ce=Z(null),se=Z(null),ce=Z(null),I=Ae(()=>{let e=b.color??"#606060";return{width:b.width??8,minHeight:b.minHeight??50,radius:b.radius??(b.width??8)/2,color:e,opacity:b.opacity??.6,hoverColor:b.hoverColor??e,hoverOpacity:b.hoverOpacity??1}},[b]),h=Ae(()=>({width:O.width??16,color:O.color??"rgba(128, 128, 128, 0.1)",visible:O.visible??!0,alignment:O.alignment??"center",radius:O.radius??I.radius??4,margin:O.margin??4}),[O,I.radius]),j=Ae(()=>{let e=S.color??"#808080";return{visible:S.visible??!1,step:S.step??50,color:e,opacity:S.opacity??.6,hoverColor:S.hoverColor??e,hoverOpacity:S.hoverOpacity??1}},[S]),i=Ae(()=>({enabled:Y.enabled??!0,excludeClasses:Y.excludeClasses??[],excludeSelectors:Y.excludeSelectors??[]}),[Y]),r=Ae(()=>({enabled:Q.enabled??!0,delay:Q.delay??1500,delayOnWheel:Q.delayOnWheel??700}),[Q]),c=I.width,N=h.width,_=I.minHeight,t=j.visible,P=j.step,G=D(()=>{if(!l.current)return;let e=document.activeElement;e&&l.current.contains(e)&&e!==l.current||l.current.focus()},[]);bt(C,()=>({getScrollContainer:()=>l.current,scrollTo:e=>{l.current&&l.current.scrollTo(e)},get scrollTop(){return l.current?.scrollTop||0},get scrollHeight(){return l.current?.scrollHeight||0},get clientHeight(){return l.current?.clientHeight||0}}),[]);let x=D(()=>{if(E.current){let o=E.current;if(document.contains(o)&&o.scrollHeight>o.clientHeight+2)return o;E.current=null}if(!l.current)return null;if(V.current&&V.current.scrollHeight>l.current.clientHeight+2)return E.current=l.current,l.current;if(!q)return null;let e=l.current.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]');for(let o of e){let n=o;if(n!==l.current&&n.classList.contains("overlay-scrollbar-container"))continue;let a=n.parentElement,u=!1;for(;a&&a!==l.current;){if(a.classList.contains("overlay-scrollbar-container")&&a!==l.current){u=!0;break}a=a.parentElement}if(!u&&n.scrollHeight>n.clientHeight+2)return E.current=n,n}return null},[]),te=D(()=>x()!==null,[x]),L=D(()=>{Ce.current&&(clearTimeout(Ce.current),Ce.current=null)},[]),Je=D(()=>{se.current&&(clearTimeout(se.current),se.current=null)},[]),F=D(()=>{ce.current&&(clearTimeout(ce.current),ce.current=null)},[]),M=D(e=>{r.enabled&&(L(),Ce.current=setTimeout(()=>{v(!1),Ce.current=null},e))},[L,r.enabled]),m=D(()=>{let e=x();if(!e){v(!1),Ee(!1),L();return}if(Ee(!0),!fe.current)return;r.enabled||(v(!0),L());let o=e.clientHeight,n=e.scrollHeight,a=e.scrollTop,u=0;if(pe.current){let Ve=window.getComputedStyle(pe.current),Qe=parseFloat(Ve.paddingTop)||0,dt=parseFloat(Ve.paddingBottom)||0;u=Qe+dt}let y=t?c*2+h.margin*4:h.margin*2,R=o-y+u,$=o/n,Le=Math.max(R*$,_),je=n-o,J=R-Le,Ze=je>0?a/je*J:0;qe(Le),Ue(Ze)},[x,L,t,c,_,r.enabled]),Ie=D(e=>{e.preventDefault(),e.stopPropagation();let o=x();o&&(me(!0),Ne({y:e.clientY,scrollTop:o.scrollTop}),L(),v(!0),G())},[x,L,G]),Be=D(e=>{if(!k)return;let o=x();if(!o)return;let n=o.clientHeight,a=o.scrollHeight-n,u=e.clientY-he.y,y=n-oe,R=u/y*a,$=Math.max(0,Math.min(a,he.scrollTop+R));o.scrollTop=$,m()},[k,he,oe,m,x]),ke=D(()=>{me(!1),te()&&M(r.delay)},[te,M,r.delay]),re=D(e=>{if(!fe.current)return;let o=fe.current.getBoundingClientRect(),n=e.clientY-o.top,a=x();if(!a)return;let u=a.clientHeight,y=a.scrollHeight,R=n/u*(y-u);a.scrollTop=Math.max(0,Math.min(y-u,R)),m(),v(!0),M(r.delay),G()},[m,M,r.delay,x,G]),U=D(e=>{if(e.preventDefault(),e.stopPropagation(),!l.current)return;let o=Math.max(0,l.current.scrollTop-P);l.current.scrollTop=o,m(),v(!0),M(r.delay),G()},[m,M,P,r.delay,G]),X=D(e=>{if(e.preventDefault(),e.stopPropagation(),!l.current||!V.current)return;let o=l.current,n=V.current.scrollHeight-o.clientHeight,a=Math.min(n,o.scrollTop+P);o.scrollTop=a,m(),v(!0),M(r.delay),G()},[m,M,P,r.delay,G]),be=D(e=>{if(!i.enabled)return;let o=e.target;if(lt(o,i)||e.button!==0)return;let n=x();n&&(n.scrollHeight<=n.clientHeight||(e.preventDefault(),ie(!0),We({x:e.clientX,y:e.clientY,scrollTop:n.scrollTop,scrollLeft:n.scrollLeft||0}),L()))},[i,lt,x,L]),ue=D(e=>{if(!H)return;let o=x();if(!o)return;let n=Te.x-e.clientX,a=Te.y-e.clientY;if(Math.abs(a)<3&&Math.abs(n)<3)return;v(!0);let u=Math.max(0,Math.min(o.scrollHeight-o.clientHeight,Te.scrollTop+a));o.scrollTop=u,m()},[H,Te,x,m]),ne=D(()=>{ie(!1),te()&&M(r.delay)},[te,M,r.delay]);de(()=>{let e=y=>{m(),L(),v(!0);let R=He?r.delayOnWheel:r.delay;M(R),T&&T(y)},o=()=>{Se(!0),ae.current&&clearTimeout(ae.current),ae.current=setTimeout(()=>{Se(!1)},300),L(),F(),ce.current=setTimeout(()=>{v(!0),ce.current=null},50)},n=[],a=x();a&&n.push(a);let u=l.current;return u&&!a&&(n.push(u),u.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]').forEach(y=>{let R=y;if(R!==u&&R.classList.contains("overlay-scrollbar-container"))return;let $=R.parentElement;for(;$&&$!==u;){if($.classList.contains("overlay-scrollbar-container")&&$!==u)return;$=$.parentElement}n.push(R)})),n.forEach(y=>{y.addEventListener("scroll",e,{passive:!0}),y.addEventListener("wheel",o,{passive:!0})}),()=>{n.forEach(y=>{y.removeEventListener("scroll",e),y.removeEventListener("wheel",o)}),ae.current&&clearTimeout(ae.current),ce.current&&clearTimeout(ce.current)}},[x,m,T,L,M,r,He]),de(()=>{let e=n=>{let a=x();if(!a)return;let{key:u}=n,{scrollTop:y,scrollHeight:R,clientHeight:$}=a,Le=R-$,je=50,J=null;switch(u){case"ArrowUp":n.preventDefault(),J=Math.max(0,y-je);break;case"ArrowDown":n.preventDefault(),J=Math.min(Le,y+je);break;case"PageUp":n.preventDefault(),J=Math.max(0,y-$);break;case"PageDown":n.preventDefault(),J=Math.min(Le,y+$);break;case"Home":n.preventDefault(),J=0;break;case"End":n.preventDefault(),J=Le;break;default:return}if(J!==null){let Ze=J/Le,Ve=t?c*2+h.margin*4:h.margin*2,Qe=($-Ve-oe)*Ze;Ue(Qe),a.scrollTop=J,L(),v(!0),M(r.delay)}},o=l.current;if(o)return o.addEventListener("keydown",e),()=>{o.removeEventListener("keydown",e)}},[x,t,c,h.margin,oe,L,M,r.delay]),de(()=>{if(H)return document.addEventListener("mousemove",ue),document.addEventListener("mouseup",ne),()=>{document.removeEventListener("mousemove",ue),document.removeEventListener("mouseup",ne)}},[H,ue,ne]),de(()=>{if(k)return document.addEventListener("mousemove",Be),document.addEventListener("mouseup",ke),()=>{document.removeEventListener("mousemove",Be),document.removeEventListener("mouseup",ke)}},[k,Be,ke]),de(()=>{m();let e=setTimeout(()=>{m()},100);return()=>clearTimeout(e)},[m]),yt(()=>{Ke(!0),m(),!r.enabled&&te()&&v(!0)},[te,m,r.enabled]),de(()=>{let e=new ResizeObserver(()=>{m()}),o=[];return l.current&&o.push(l.current),V.current&&o.push(V.current),E.current&&document.contains(E.current)&&o.push(E.current),o.forEach(n=>{e.observe(n)}),()=>e.disconnect()},[m]),de(()=>{if(!l.current)return;let e=new MutationObserver(()=>{E.current=null,m()});return e.observe(l.current,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style"]}),()=>e.disconnect()},[m]);let K=Math.max(N,c);return de(()=>{let e="overlay-scrollbar-webkit-hide",o=document.getElementById(e);o&&o.remove();let n=document.createElement("style");return n.id=e,n.textContent=`
|
|
1
|
+
import{forwardRef as rt,useCallback as ge,useMemo as nt,useRef as W,useEffect as Ee,memo as Lt,useState as dt}from"react";import{Box as be,Table as Dt,TableBody as Et,TableCell as qe,TableContainer as Ht,TableHead as It,TableRow as _e,TableSortLabel as ot,Paper as Rt,Typography as Ot}from"@mui/material";import{TableVirtuoso as $t}from"react-virtuoso";import{jsx as tt}from"react/jsx-runtime";import{useRef as at,useState as pt,useEffect as ft}from"react";import{Box as mt,CircularProgress as ht}from"@mui/material";var Ae=function(){return Ae=Object.assign||function(p){for(var b,y=1,L=arguments.length;y<L;y++){b=arguments[y];for(var H in b)Object.prototype.hasOwnProperty.call(b,H)&&(p[H]=b[H])}return p},Ae.apply(this,arguments)};function lt(s){var p=s.visible,b=s.onComplete,y=s.fadeoutDuration,L=y===void 0?200:y,H=s.exitDelay,x=H===void 0?0:H,D=s.size,I=D===void 0?40:D,F=s.className,J=s.style,A=s.sx,_=s.indicator,R=s.background,G=R===void 0?{show:!0,color:"255, 255, 255",opacity:.9}:R,de=at(void 0),l=at(null),U=pt(p),pe=U[0],ye=U[1],P=G.show,X=P===void 0?!0:P,M=G.color,$=M===void 0?"255, 255, 255":M,oe=G.opacity,ie=oe===void 0?.9:oe;if(ft(function(){var Ie=de.current;if(Ie===!0&&p===!1&&l.current){var ae=l.current;ae.style.opacity="0",setTimeout(function(){ye(!1),b?.()},L+x)}else p===!0&&(ye(!0),l.current&&(l.current.style.opacity="1"));de.current=p},[p,b,L,x]),!pe)return null;var Te=function(){return typeof _=="string"?tt("img",{src:_,alt:"Loading",style:{width:I,height:I}}):_||tt(ht,{size:I})},ve=function(){return X?$.startsWith("rgba")?{backgroundColor:$}:/^\d+,\s*\d+,\s*\d+$/.test($)?{backgroundColor:"rgba(".concat($,", ").concat(ie,")")}:ie!==1?{backgroundColor:$,"&::before":{content:'""',position:"absolute",top:0,left:0,right:0,bottom:0,backgroundColor:$,opacity:ie,zIndex:-1}}:{backgroundColor:$}:{backgroundColor:"transparent"}};return tt(mt,{ref:l,className:F,style:Ae({},J),sx:Ae(Ae({position:"absolute",top:0,left:0,right:0,bottom:0,display:"flex",alignItems:"center",justifyContent:"center",zIndex:1e3,opacity:p?1:0,transition:"opacity ".concat(L,"ms ease-out")},ve()),A),children:Te()})}import{useRef as re,useEffect as ue,useState as V,useCallback as N,useMemo as Ye,forwardRef as gt,useImperativeHandle as bt,useLayoutEffect as yt}from"react";import{jsx as De,jsxs as ct}from"react/jsx-runtime";var vt=["editor","textarea","input","select","textfield","form-control","contenteditable","MuiInputBase-input","MuiSelect-select","MuiOutlinedInput-input","MuiFilledInput-input","MuiInput-input","MuiFormControl-root","MuiTextField-root","MuiSelect-root","MuiOutlinedInput-root","MuiFilledInput-root","MuiInput-root","MuiAutocomplete-input","MuiDatePicker-input","MuiSlider-thumb","MuiSlider-rail","MuiSlider-track","MuiSlider-mark","MuiSlider-markLabel","MuiSlider-root","MuiSlider-colorPrimary","MuiSlider-sizeMedium","MuiIconButton-root","MuiButton-root","MuiButtonBase-root","MuiTouchRipple-root","MuiCheckbox-root","MuiRadio-root","MuiSwitch-root","PrivateSwitchBase-root","ant-input","ant-input-affix-wrapper","ant-input-group-addon","ant-input-number","ant-input-number-handler","ant-select","ant-select-selector","ant-select-selection-search","ant-select-dropdown","ant-cascader","ant-cascader-input","ant-picker","ant-picker-input","ant-time-picker","ant-calendar-picker","ant-slider","ant-slider-track","ant-slider-handle","ant-switch","ant-checkbox","ant-checkbox-wrapper","ant-radio","ant-radio-wrapper","ant-rate","ant-upload","ant-upload-drag","ant-form-item","ant-form-item-control","ant-btn","ant-dropdown","ant-dropdown-trigger","ant-menu","ant-menu-item","ant-tooltip","ant-popover","ant-modal","ant-drawer","ant-tree-select","ant-auto-complete","ant-mentions","ant-transfer","ui-input","ui-textarea","ui-select","ui-select-trigger","ui-select-content","ui-select-item","ui-button","ui-checkbox","ui-radio-group","ui-switch","ui-slider","ui-range-slider","ui-calendar","ui-date-picker","ui-combobox","ui-command","ui-command-input","ui-popover","ui-dialog","ui-sheet","ui-dropdown-menu","ui-context-menu","ui-menubar","ui-navigation-menu","ui-form","ui-form-control","ui-form-item","ui-form-field","ui-label","radix-ui","radix-select","radix-dropdown","radix-dialog","radix-popover","radix-accordion","radix-tabs","radix-slider","radix-switch","radix-checkbox","radix-radio","ql-editor","ql-container","ql-toolbar","ql-picker","ql-picker-label","ql-picker-options","ql-formats","ql-snow","ql-bubble","quill","quilleditor","monaco-editor","monaco-editor-background","view-lines","decorationsOverviewRuler","monaco-scrollable-element","CodeMirror","CodeMirror-code","CodeMirror-lines","CodeMirror-scroll","CodeMirror-sizer","cm-editor","cm-focused","cm-content","tox-editor-container","tox-editor-header","tox-edit-area","tox-tinymce","mce-content-body","ck-editor","ck-content","ck-toolbar","ck-editor__editable","ck-widget","slate-editor","slate-content","DraftEditor-root","DraftEditor-editorContainer","public-DraftEditor-content","ehfuse-editor","ehfuse-editor-wrapper","ehfuse-editor-content","ehfuse-toolbar","ehfuse-toolbar-group","ehfuse-cursor","text-editor","rich-text-editor","wysiwyg","ace_editor","ace_content"],st=(s,p)=>{let b=s.tagName.toLowerCase(),y=["text","password","email","number","search","tel","url","checkbox","radio"];if(b==="input"){let L=s.type;return y.includes(L)}if(["textarea","select","button"].includes(b)||["svg","path","circle","rect","line","polygon","polyline"].includes(b)||s.getAttribute("contenteditable")==="true")return!0;if(p?.excludeSelectors){for(let L of p.excludeSelectors)if(s.matches(L))return!0}return xt(s,p)},xt=(s,p)=>{let b=[...vt,...p?.excludeClasses||[]],y=s,L=0,H=5;for(;y&&L<=H;){if(b.some(x=>y.classList.contains(x)))return!0;if(y.classList.contains("MuiDialogContent-root"))break;y=y.parentElement,L++}return!1},Mt={},wt={},Tt={},St={},Ct={},kt=gt(({className:s="",style:p={},containerStyle:b={},contentStyle:y={},children:L,onScroll:H,thumb:x=Mt,track:D=wt,arrows:I=Tt,dragScroll:F=St,autoHide:J=Ct,showScrollbar:A=!0,detectInnerScroll:_=!1},R)=>{let G=re({});ue(()=>{G.current={children:L,onScroll:H,showScrollbar:A,thumb:x,track:D,arrows:I,dragScroll:F,autoHide:J}});let de=re(null),l=re(null),U=re(null),pe=re(null),ye=re(null),P=re(null),[X,M]=V(!1),[$,oe]=V(!1),[ie,Te]=V(!1),[ve,Ie]=V({y:0,scrollTop:0}),[ae,Ue]=V(0),[Xe,Ve]=V(0),[Re,Oe]=V(!1),[le,We]=V(!1),[xe,Ke]=V({x:0,y:0,scrollTop:0,scrollLeft:0}),[it,Je]=V(null),[Se,$e]=V(null),[Fe,Ne]=V(!1),B=re(null),[se,Pe]=V(!1),fe=re(null),me=re(null),K=re(null),O=Ye(()=>{let e=x.color??"#606060";return{width:x.width??8,minHeight:x.minHeight??50,radius:x.radius??(x.width??8)/2,color:e,opacity:x.opacity??.6,hoverColor:x.hoverColor??e,hoverOpacity:x.hoverOpacity??1}},[x]),g=Ye(()=>({width:D.width??16,color:D.color??"rgba(128, 128, 128, 0.1)",visible:D.visible??!0,alignment:D.alignment??"center",radius:D.radius??O.radius??4,margin:D.margin??4}),[D,O.radius]),Z=Ye(()=>{let e=I.color??"#808080";return{visible:I.visible??!1,step:I.step??50,color:e,opacity:I.opacity??.6,hoverColor:I.hoverColor??e,hoverOpacity:I.hoverOpacity??1}},[I]),Be=Ye(()=>({enabled:F.enabled??!0,excludeClasses:F.excludeClasses??[],excludeSelectors:F.excludeSelectors??[]}),[F]),h=Ye(()=>({enabled:J.enabled??!0,delay:J.delay??1500,delayOnWheel:J.delayOnWheel??700}),[J]),C=O.width,Ce=g.width,je=O.minHeight,Y=Z.visible,ke=Z.step,ne=N(()=>{if(!l.current)return;let e=document.activeElement;e&&l.current.contains(e)&&e!==l.current||l.current.focus()},[]);bt(R,()=>({getScrollContainer:()=>l.current,scrollTo:e=>{l.current&&l.current.scrollTo(e)},get scrollTop(){return l.current?.scrollTop||0},get scrollHeight(){return l.current?.scrollHeight||0},get clientHeight(){return l.current?.clientHeight||0}}),[]);let k=N(()=>{if(P.current){let n=P.current;if(document.contains(n)&&n.scrollHeight>n.clientHeight+2)return n;P.current=null}if(!l.current)return null;if(U.current&&U.current.scrollHeight>l.current.clientHeight+2)return P.current=l.current,l.current;if(!_)return null;let e=l.current.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]');for(let n of e){let o=n;if(o!==l.current&&o.classList.contains("overlay-scrollbar-container"))continue;let a=o.parentElement,c=!1;for(;a&&a!==l.current;){if(a.classList.contains("overlay-scrollbar-container")&&a!==l.current){c=!0;break}a=a.parentElement}if(!c&&o.scrollHeight>o.clientHeight+2)return P.current=o,o}return null},[]),ce=N(()=>k()!==null,[k]),r=N(()=>{fe.current&&(clearTimeout(fe.current),fe.current=null)},[]),i=N(()=>{me.current&&(clearTimeout(me.current),me.current=null)},[]),E=N(()=>{K.current&&(clearTimeout(K.current),K.current=null)},[]),m=N(e=>{h.enabled&&(r(),fe.current=setTimeout(()=>{M(!1),fe.current=null},e))},[r,h.enabled]),f=N(()=>{let e=k();if(!e){M(!1),Oe(!1),r();return}if(Oe(!0),!pe.current)return;h.enabled||(M(!0),r());let n=e.clientHeight,o=e.scrollHeight,a=e.scrollTop,c=0;if(de.current){let S=window.getComputedStyle(de.current),ee=parseFloat(S.paddingTop)||0,te=parseFloat(S.paddingBottom)||0;c=ee+te}let u=Y?C*2+g.margin*4:g.margin*2,v=n-u+c,w=n/o,z=Math.max(v*w,je),Q=o-n,T=v-z,we=Q>0?a/Q*T:0;Ue(z),Ve(we)},[k,r,Y,C,je,h.enabled]),t=N(e=>{e.preventDefault(),e.stopPropagation();let n=k();n&&(oe(!0),Ie({y:e.clientY,scrollTop:n.scrollTop}),r(),M(!0),ne())},[k,r,ne]),q=N(e=>{if(!$)return;let n=k();if(!n)return;let o=n.clientHeight,a=n.scrollHeight-o,c=e.clientY-ve.y,u=o-ae,v=c/u*a,w=Math.max(0,Math.min(a,ve.scrollTop+v));n.scrollTop=w,f()},[$,ve,ae,f,k]),Le=N(()=>{oe(!1),ce()&&m(h.delay)},[ce,m,h.delay]),Ze=N(e=>{if(!pe.current)return;let n=pe.current.getBoundingClientRect(),o=e.clientY-n.top,a=k();if(!a)return;let c=a.clientHeight,u=a.scrollHeight,v=o/c*(u-c);a.scrollTop=Math.max(0,Math.min(u-c,v)),f(),M(!0),m(h.delay),ne()},[f,m,h.delay,k,ne]),ze=N(e=>{if(e.preventDefault(),e.stopPropagation(),!l.current)return;let n=Math.max(0,l.current.scrollTop-ke);l.current.scrollTop=n,f(),M(!0),m(h.delay),ne()},[f,m,ke,h.delay,ne]),Qe=N(e=>{if(e.preventDefault(),e.stopPropagation(),!l.current||!U.current)return;let n=l.current,o=U.current.scrollHeight-n.clientHeight,a=Math.min(o,n.scrollTop+ke);n.scrollTop=a,f(),M(!0),m(h.delay),ne()},[f,m,ke,h.delay,ne]),et=N(e=>{if(!Be.enabled)return;let n=e.target;if(st(n,Be)||e.button!==0)return;let o=k();o&&(o.scrollHeight<=o.clientHeight||(e.preventDefault(),We(!0),Ke({x:e.clientX,y:e.clientY,scrollTop:o.scrollTop,scrollLeft:o.scrollLeft||0}),r()))},[Be,st,k,r]),j=N(e=>{if(!le)return;let n=k();if(!n)return;let o=xe.x-e.clientX,a=xe.y-e.clientY;if(Math.abs(a)<3&&Math.abs(o)<3)return;M(!0);let c=Math.max(0,Math.min(n.scrollHeight-n.clientHeight,xe.scrollTop+a));n.scrollTop=c,f()},[le,xe,k,f]),Me=N(()=>{We(!1),ce()&&m(h.delay)},[ce,m,h.delay]);ue(()=>{let e=u=>{f(),r(),M(!0);let v=se?h.delayOnWheel:h.delay;m(v),H&&H(u)},n=()=>{Pe(!0),B.current&&clearTimeout(B.current),B.current=setTimeout(()=>{Pe(!1)},300),r(),E(),K.current=setTimeout(()=>{M(!0),K.current=null},50)},o=[],a=k();a&&o.push(a);let c=l.current;return c&&!a&&(o.push(c),c.querySelectorAll('[data-virtuoso-scroller], [style*="overflow"], .virtuoso-scroller, [style*="overflow: auto"], [style*="overflow:auto"]').forEach(u=>{let v=u;if(v!==c&&v.classList.contains("overlay-scrollbar-container"))return;let w=v.parentElement;for(;w&&w!==c;){if(w.classList.contains("overlay-scrollbar-container")&&w!==c)return;w=w.parentElement}o.push(v)})),o.forEach(u=>{u.addEventListener("scroll",e,{passive:!0}),u.addEventListener("wheel",n,{passive:!0})}),()=>{o.forEach(u=>{u.removeEventListener("scroll",e),u.removeEventListener("wheel",n)}),B.current&&clearTimeout(B.current),K.current&&clearTimeout(K.current)}},[k,f,H,r,m,h,se]),ue(()=>{let e=o=>{let a=k();if(!a)return;let{key:c}=o,{scrollTop:u,scrollHeight:v,clientHeight:w}=a,z=v-w,Q=50,T=null;switch(c){case"ArrowUp":o.preventDefault(),T=Math.max(0,u-Q);break;case"ArrowDown":o.preventDefault(),T=Math.min(z,u+Q);break;case"PageUp":o.preventDefault(),T=Math.max(0,u-w);break;case"PageDown":o.preventDefault(),T=Math.min(z,u+w);break;case"Home":o.preventDefault(),T=0;break;case"End":o.preventDefault(),T=z;break;default:return}if(T!==null){let we=T/z,S=Y?C*2+g.margin*4:g.margin*2,ee=(w-S-ae)*we;Ve(ee),a.scrollTop=T,r(),M(!0),m(h.delay)}},n=l.current;if(n)return n.addEventListener("keydown",e),()=>{n.removeEventListener("keydown",e)}},[k,Y,C,g.margin,ae,r,m,h.delay]),ue(()=>{if(le)return document.addEventListener("mousemove",j),document.addEventListener("mouseup",Me),()=>{document.removeEventListener("mousemove",j),document.removeEventListener("mouseup",Me)}},[le,j,Me]),ue(()=>{if($)return document.addEventListener("mousemove",q),document.addEventListener("mouseup",Le),()=>{document.removeEventListener("mousemove",q),document.removeEventListener("mouseup",Le)}},[$,q,Le]),ue(()=>{f();let e=setTimeout(()=>{f()},100);return()=>clearTimeout(e)},[f]),yt(()=>{Ne(!0),f(),!h.enabled&&ce()&&M(!0)},[ce,f,h.enabled]),ue(()=>{let e=new ResizeObserver(()=>{f()}),n=[];return l.current&&n.push(l.current),U.current&&n.push(U.current),P.current&&document.contains(P.current)&&n.push(P.current),n.forEach(o=>{e.observe(o)}),()=>e.disconnect()},[f]),ue(()=>{if(!l.current)return;let e=new MutationObserver(()=>{P.current=null,f()});return e.observe(l.current,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style"]}),()=>e.disconnect()},[f]);let he=Math.max(Ce,C);return ue(()=>{let e="overlay-scrollbar-webkit-hide",n=document.getElementById(e);n&&n.remove();let o=document.createElement("style");return o.id=e,o.textContent=`
|
|
2
2
|
.overlay-scrollbar-container::-webkit-scrollbar {
|
|
3
3
|
display: none !important;
|
|
4
4
|
width: 0 !important;
|
|
@@ -18,7 +18,7 @@ import{forwardRef as tt,useCallback as ye,useMemo as rt,useRef as A,useEffect as
|
|
|
18
18
|
outline: 2px solid rgba(0, 123, 255, 0.5);
|
|
19
19
|
outline-offset: -2px;
|
|
20
20
|
}
|
|
21
|
-
`,document.head.appendChild(n),()=>{let a=document.getElementById(e);a&&a.remove()}},[]),at("div",{ref:pe,className:`overlay-scrollbar-wrapper ${s}`,style:{display:"flex",flexDirection:"column",position:"relative",minHeight:0,height:"100%",flex:"1 1 0%",...p},children:[Re("div",{ref:l,className:"overlay-scrollbar-container",tabIndex:-1,onMouseDown:be,style:{display:"flex",width:"100%",flex:"1 1 auto",minHeight:0,overflow:"auto",scrollbarWidth:"none",msOverflowStyle:"none",outline:"none",userSelect:H?"none":"auto",...f},children:Re("div",{ref:V,className:"overlay-scrollbar-content",style:{flex:"1 1 0%",minHeight:0,display:"flex",flexDirection:"column",...g},children:w})}),B&&Me&&at("div",{ref:fe,className:"overlay-scrollbar-track",onMouseEnter:()=>{L(),se.current=setTimeout(()=>{v(!0),se.current=null},100)},onMouseLeave:()=>{Je(),k||M(r.delay)},style:{position:"absolute",top:0,right:0,width:`${K}px`,height:"100%",opacity:we?1:0,transition:"opacity 0.2s ease-in-out",cursor:"pointer",zIndex:1e3,pointerEvents:"auto"},children:[h.visible&&Re("div",{className:"overlay-scrollbar-track-background",onClick:e=>{e.preventDefault(),e.stopPropagation(),re(e)},style:{position:"absolute",top:t?`${I.width+h.margin*2}px`:`${h.margin}px`,right:h.alignment==="right"?"0px":`${(K-I.width)/2}px`,width:`${I.width}px`,height:t?`calc(100% - ${I.width*2+h.margin*4}px)`:`calc(100% - ${h.margin*2}px)`,backgroundColor:h.color,borderRadius:`${h.radius}px`,cursor:"pointer"}}),Re("div",{ref:xe,className:"overlay-scrollbar-thumb",onMouseDown:Ie,onMouseEnter:()=>De(!0),onMouseLeave:()=>De(!1),style:{position:"absolute",top:`${(t?c+h.margin*2:h.margin)+Ge}px`,right:h.alignment==="right"?"0px":`${(K-c)/2}px`,width:`${c}px`,height:`${Math.max(oe,_)}px`,backgroundColor:ee||k?I.hoverColor:I.color,opacity:ee||k?I.hoverOpacity:I.opacity,borderRadius:`${I.radius}px`,cursor:"pointer",transition:"background-color 0.2s ease-in-out, opacity 0.2s ease-in-out"}})]}),B&&Me&&t&&Re("div",{className:"overlay-scrollbar-up-arrow",onClick:U,onMouseEnter:()=>ge("up"),onMouseLeave:()=>ge(null),style:{position:"absolute",top:`${h.margin}px`,right:h.alignment==="right"?"0px":`${(K-c)/2}px`,width:`${c}px`,height:`${c}px`,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:`${Math.max(c*.75,8)}px`,color:le==="up"?j.hoverColor:j.color,userSelect:"none",zIndex:1001,opacity:we?le==="up"?j.hoverOpacity:j.opacity:0,transition:"opacity 0.2s ease-in-out, color 0.15s ease-in-out"},children:"\u25B2"}),B&&Me&&t&&Re("div",{className:"overlay-scrollbar-down-arrow",onClick:X,onMouseEnter:()=>ge("down"),onMouseLeave:()=>ge(null),style:{position:"absolute",bottom:`${h.margin}px`,right:h.alignment==="right"?"0px":`${(K-c)/2}px`,width:`${c}px`,height:`${c}px`,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:`${Math.max(c*.75,8)}px`,color:le==="down"?j.hoverColor:j.color,userSelect:"none",zIndex:1001,opacity:we?le==="down"?j.hoverOpacity:j.opacity:0,transition:"opacity 0.2s ease-in-out, color 0.15s ease-in-out"},children:"\u25BC"})]})}),st=kt;import{Fragment as _e,jsx as d,jsxs as Oe}from"react/jsx-runtime";var Nt={alignment:"right",margin:0,radius:0};function Pt({data:s,loading:p=!1,columns:f,onRowClick:g,getRowId:w,selectedRowId:T,selectedRowSx:b,rowHeight:O=50,columnHeight:S=56,striped:Y,rowDivider:Q=!0,onSort:B,onLoadMore:q,sortBy:C,sortDirection:W,showPaper:pe=!0,paddingX:l="1rem",paddingTop:V=0,paddingBottom:fe=0,rowHoverColor:xe,rowHoverOpacity:E,scrollbars:we,emptyMessage:v="NO DATA",LoadingComponent:k}){let me=rt(()=>tt((i,r)=>{let c=A(null);return d(st,{detectInnerScroll:!0,track:Nt,...we,children:d(Ht,{component:ve,...i,ref:N=>{c.current=N,typeof r=="function"?r(N):r&&(r.current=N)},sx:{userSelect:"auto",WebkitUserSelect:"auto",position:"relative",width:"100%",height:"100%",overflow:"auto",display:"flex",flexDirection:"column",scrollbarWidth:"none",msOverflowStyle:"none",transform:"translateZ(0)",backfaceVisibility:"hidden",willChange:"scroll-position","&::-webkit-scrollbar":{display:"none"},"& .MuiTable-root":{paddingRight:l,paddingTop:V,paddingBottom:fe}}})})}),[]),ee=rt(()=>{if(Y===!0)return"#f5f5f5";if(typeof Y=="string")return Y},[Y]),[De,he]=ct(p),[Ne,oe]=ct(0);$e(()=>{p&&he(!0)},[p]);let qe=ye(()=>{he(!1)},[]),Ge=De,Ue=p&&s.length>0,Me=A(!1),Ee=A(null),H=A(null),ie=A(!1),Te=A({x:0,y:0,scrollTop:0}),We=A(!1),Xe=A(0),Pe=A(0),le=A(!1),ge=A({x:0,y:0}),ut=A(null),Ke=ye(i=>{},[]),ae=ye(i=>{if(!We.current||!H.current)return;let r=i.clientY-Te.current.y;if(!ie.current&&Math.abs(r)>5&&(ie.current=!0,H.current&&(H.current.style.userSelect="none")),ie.current){let N=r*2;Pe.current+=-N;let _=H.current,t=Math.max(0,Xe.current+Pe.current);_.scrollTop=t,Te.current.y=i.clientY,i.preventDefault()}},[]),He=ye(()=>{if(We.current=!1,ie.current&&H.current){let i=Math.max(0,Xe.current+Pe.current),r=()=>{H.current&&(H.current.scrollTop=i)};r(),setTimeout(r,1),setTimeout(r,5),setTimeout(r,10)}ie.current=!1,Pe.current=0,H.current&&(H.current.style.userSelect="auto")},[]);$e(()=>{let i=document.querySelector('[data-testid="virtuoso-scroller"]');i&&i.querySelectorAll(".MuiTableSortLabel-root").forEach(c=>{let N=new MouseEvent("mouseleave",{bubbles:!0,cancelable:!0});c.dispatchEvent(N)})},[C]);let Se=ye(i=>{if(!B)return;B(i,C===i&&W==="asc"?"desc":"asc")},[B,C,W]),Ce=ye(i=>{if(!q||p&&s.length===0)return;let r=Date.now(),c=window.lastRangeChangeTime||0;if(r-c<100)return;window.lastRangeChangeTime=r;let N=Math.max(10,Math.floor(s.length*.1)),_=i.endIndex>=s.length-N,t=s.length>=30;if(_&&t&&q&&!Me.current){Me.current=!0;let P=s.length;q(P,50)}},[s.length,p,q]);$e(()=>{p||(Me.current=!1)},[p]),$e(()=>{s.length===0&&oe(i=>i+1)},[s.length]);let se=A(s.length);$e(()=>{let i=se.current,r=s.length;if(r>i&&i>0){se.current=r;return}Ee.current&&r>0&&r<=i&&Ee.current.scrollToIndex({index:0,align:"start",behavior:"auto"}),se.current=r},[s]),$e(()=>(document.addEventListener("mousemove",ae),document.addEventListener("mouseup",He),()=>{document.removeEventListener("mousemove",ae),document.removeEventListener("mouseup",He)}),[ae,He]);let ce=ye(()=>{let i={},r=[];if(f.forEach(t=>{t.group?(i[t.group]||(i[t.group]=[]),i[t.group].push(t)):r.push(t)}),!(Object.keys(i).length>0))return d(Fe,{children:f.map(t=>d(Ye,{align:t.align||"left",style:{width:t.width,minWidth:t.width,...t.style,fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px"},children:t.sortable?d("div",{style:{display:"flex",alignItems:"center",justifyContent:t.align==="center"?"center":t.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:Oe(ve,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>Se(String(t.id)),children:[t.text,d(nt,{active:C===t.id,direction:C===t.id?W:"desc",sx:{position:"absolute",left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft:"4px",minWidth:"auto",width:"16px",height:"16px",cursor:"default",opacity:C===t.id?1:0,transition:"opacity 0.2s ease","& .MuiTableSortLabel-icon":{position:"relative",marginLeft:0,marginRight:0,opacity:1,transition:"color 0.2s ease"},"& .MuiTableSortLabel-iconDirectionAsc":{transform:"rotate(180deg)"},"& .MuiTableSortLabel-iconDirectionDesc":{transform:"rotate(0deg)"}}})]})}):t.text},String(t.id)))});let N=[...r.map(t=>d(Ye,{rowSpan:2,align:t.align||"left",style:{width:t.width,minWidth:t.width,...t.style,fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px"},children:t.sortable&&B?d("div",{style:{display:"flex",alignItems:"center",justifyContent:t.align==="center"?"center":t.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:Oe(ve,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>Se(String(t.id)),children:[t.text,d(nt,{active:C===t.id,direction:C===t.id?W:"desc",sx:{position:"absolute",left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft:"4px",minWidth:"auto",width:"16px",height:"16px",cursor:"default",opacity:C===t.id?1:0,transition:"opacity 0.2s ease","&:hover":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}},"& .MuiTableSortLabel-icon":{position:"relative",marginLeft:0,marginRight:0,opacity:1,transition:"color 0.2s ease"},"& .MuiTableSortLabel-iconDirectionAsc":{transform:"rotate(180deg)"},"& .MuiTableSortLabel-iconDirectionDesc":{transform:"rotate(0deg)"}}})]})}):t.text},String(t.id))),...Object.entries(i).map(([t,P])=>d(Ye,{align:"center",colSpan:P.length,style:{fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px"},children:t},t))],_=[...Object.values(i).flat().map(t=>d(Ye,{align:t.align||"left",style:{width:t.width,minWidth:t.width,...t.style,fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px"},children:t.sortable&&B?d("div",{style:{display:"flex",alignItems:"center",justifyContent:t.align==="center"?"center":t.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:Oe(ve,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>Se(String(t.id)),children:[t.text,d(nt,{active:C===t.id,direction:C===t.id?W:"desc",sx:{position:"absolute",left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft:"4px",minWidth:"auto",width:"16px",height:"16px",cursor:"default",opacity:C===t.id?1:0,transition:"opacity 0.2s ease","&:hover":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}},"& .MuiTableSortLabel-icon":{position:"relative",marginLeft:0,marginRight:0,opacity:1,transition:"color 0.2s ease"},"& .MuiTableSortLabel-iconDirectionAsc":{transform:"rotate(0deg)"},"& .MuiTableSortLabel-iconDirectionDesc":{transform:"rotate(180deg)"}}})]})}):t.text},String(t.id)))];return Oe(_e,{children:[d(Fe,{children:N}),d(Fe,{children:_})]})},[f,C,W,Se,B,S]),I=ye((i,r)=>r?d(_e,{children:f.map(c=>d(Ye,{align:c.align||"left",style:{width:c.width,minWidth:c.width,...c.style,padding:"8px 16px"},children:c.render?c.render(r,i):String(r[c.id]||"")},String(c.id)))}):(console.log("rowContent - \uC544\uC774\uD15C \uC5C6\uC74C, \uC778\uB371\uC2A4:",i),null),[f]),h=rt(()=>({Scroller:me,Table:i=>d(Dt,{...i,sx:{borderCollapse:"separate",tableLayout:"fixed",marginRight:"16px"}}),TableHead:tt((i,r)=>d(It,{...i,ref:r,sx:{userSelect:"none","& tr":{height:S,"& th":{padding:"16px",position:"sticky",top:0,zIndex:2,fontWeight:"bold"}}}})),TableRow:i=>{let{item:r,selected:c,"aria-selected":N,className:_,...t}=i,P=t["data-index"]??0,G=P%2===1,x=r&&w?w(r,P):P,te=T!=null&&x===T,L=te&&b?typeof b=="function"?b(r,P):b:void 0,Je=String(_??"").split(/\s+/).filter(F=>F!=="Mui-selected"&&F!=="Mui-focusVisible").join(" ");return d(Fe,{...t,className:Je||void 0,selected:te,onMouseDown:F=>{le.current=!1,ge.current={x:F.clientX,y:F.clientY}},onMouseMove:F=>{let M=Math.abs(F.clientX-ge.current.x),m=Math.abs(F.clientY-ge.current.y),Ie=5;(M>Ie||m>Ie)&&(le.current=!0)},onClick:()=>{!le.current&&!ie.current&&r&&g&&g(r,P),le.current=!1},sx:[{userSelect:"none",height:O,backgroundColor:G&&ee?ee:"transparent","& td":{padding:"8px 16px",borderBottom:Q?"1px solid rgba(224, 224, 224, 1)":"none"},"& th":{padding:"8px 16px",borderBottom:"none"},"&:hover":g&&!te?{backgroundColor:F=>{let M=F.palette.mode==="dark",Ie=xe??"#000000",Be=E??.06,ke=Ie.replace("#",""),re=parseInt(ke.substring(0,2),16)/255,U=parseInt(ke.substring(2,4),16)/255,X=parseInt(ke.substring(4,6),16)/255;if(M){let be=Math.max(re,U,X),ue=Math.min(re,U,X),ne=0,K=0,e=(be+ue)/2;if(be!==ue){let n=be-ue;switch(K=e>.5?n/(2-be-ue):n/(be+ue),be){case re:ne=((U-X)/n+(U<X?6:0))/6;break;case U:ne=((X-re)/n+2)/6;break;case X:ne=((re-U)/n+4)/6;break}}e=1-e;let o=(n,a,u)=>(u<0&&(u+=1),u>1&&(u-=1),u<1/6?n+(a-n)*6*u:u<1/2?a:u<2/3?n+(a-n)*(2/3-u)*6:n);if(K===0)re=U=X=e;else{let n=e<.5?e*(1+K):e+K-e*K,a=2*e-n;re=o(a,n,ne+1/3),U=o(a,n,ne),X=o(a,n,ne-1/3)}}return`rgba(${Math.round(re*255)}, ${Math.round(U*255)}, ${Math.round(X*255)}, ${Be})`}}:void 0,cursor:g?"pointer":void 0},L]})},TableBody:tt((i,r)=>d(Et,{...i,ref:r}))}),[g,w,T,b,O,Ke,ee,Q,S,xe,E,me]),j=Oe(ve,{sx:{position:"relative",height:"100%",width:"100%","& .MuiTableHead-root":{backgroundColor:i=>i.palette.mode==="dark"?"#1e1e1e !important":"#ffffff !important"}},children:[d(Ot,{ref:Ee,data:s,totalCount:q?s.length+1:s.length,fixedHeaderContent:ce,itemContent:I,rangeChanged:Ce,components:h,style:{height:"100%"},increaseViewportBy:{top:100,bottom:300},overscan:5,followOutput:!1},Ne),s.length===0&&!p&&d(ve,{sx:{position:"absolute",top:0,left:0,right:0,bottom:0,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:2},children:typeof v=="string"?Oe(_e,{children:[d(ve,{sx:{width:48,height:48,display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"50%",backgroundColor:"#f5f5f5",color:"#999"},children:"\u{1F4C4}"}),d($t,{variant:"body1",sx:{color:"text.secondary"},children:v})]}):v}),Ge&&d(_e,{children:k?d(k,{visible:p,onComplete:qe}):d(it,{visible:p,onComplete:qe,size:40,sx:{top:`${f.some(i=>i.group)?S*2:S}px`},background:{show:s.length===0,opacity:.8}})})]});return pe?d(Rt,{className:"grow",elevation:1,sx:{padding:0,paddingLeft:l,height:"100%",minHeight:0,flex:1,display:"flex",flexDirection:"column"},children:j}):d(ve,{className:"grow",style:{padding:0,paddingLeft:l,height:"100%",minHeight:0,flex:1,display:"flex",flexDirection:"column"},children:j})}var Bt=Lt(Pt);export{Bt as VirtualDataTable};
|
|
21
|
+
`,document.head.appendChild(o),()=>{let a=document.getElementById(e);a&&a.remove()}},[]),ct("div",{ref:de,className:`overlay-scrollbar-wrapper ${s}`,style:{display:"flex",flexDirection:"column",position:"relative",minHeight:0,height:"100%",flex:"1 1 0%",...p},children:[De("div",{ref:l,className:"overlay-scrollbar-container",tabIndex:-1,onMouseDown:et,style:{display:"flex",width:"100%",flex:"1 1 auto",minHeight:0,overflow:"auto",scrollbarWidth:"none",msOverflowStyle:"none",outline:"none",userSelect:le?"none":"auto",...b},children:De("div",{ref:U,className:"overlay-scrollbar-content",style:{flex:"1 1 0%",minHeight:0,display:"flex",flexDirection:"column",...y},children:L})}),A&&Re&&ct("div",{ref:pe,className:"overlay-scrollbar-track",onMouseEnter:()=>{r(),me.current=setTimeout(()=>{M(!0),me.current=null},100)},onMouseLeave:()=>{i(),$||m(h.delay)},style:{position:"absolute",top:0,right:0,width:`${he}px`,height:"100%",opacity:X?1:0,transition:"opacity 0.2s ease-in-out",cursor:"pointer",zIndex:1e3,pointerEvents:"auto"},children:[g.visible&&De("div",{className:"overlay-scrollbar-track-background",onClick:e=>{e.preventDefault(),e.stopPropagation(),Ze(e)},style:{position:"absolute",top:Y?`${O.width+g.margin*2}px`:`${g.margin}px`,right:g.alignment==="right"?"0px":`${(he-O.width)/2}px`,width:`${O.width}px`,height:Y?`calc(100% - ${O.width*2+g.margin*4}px)`:`calc(100% - ${g.margin*2}px)`,backgroundColor:g.color,borderRadius:`${g.radius}px`,cursor:"pointer"}}),De("div",{ref:ye,className:"overlay-scrollbar-thumb",onMouseDown:t,onMouseEnter:()=>Te(!0),onMouseLeave:()=>Te(!1),style:{position:"absolute",top:`${(Y?C+g.margin*2:g.margin)+Xe}px`,right:g.alignment==="right"?"0px":`${(he-C)/2}px`,width:`${C}px`,height:`${Math.max(ae,je)}px`,backgroundColor:ie||$?O.hoverColor:O.color,opacity:ie||$?O.hoverOpacity:O.opacity,borderRadius:`${O.radius}px`,cursor:"pointer",transition:"background-color 0.2s ease-in-out, opacity 0.2s ease-in-out"}})]}),A&&Re&&Y&&De("div",{className:"overlay-scrollbar-up-arrow",onClick:ze,onMouseEnter:()=>$e("up"),onMouseLeave:()=>$e(null),style:{position:"absolute",top:`${g.margin}px`,right:g.alignment==="right"?"0px":`${(he-C)/2}px`,width:`${C}px`,height:`${C}px`,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:`${Math.max(C*.75,8)}px`,color:Se==="up"?Z.hoverColor:Z.color,userSelect:"none",zIndex:1001,opacity:X?Se==="up"?Z.hoverOpacity:Z.opacity:0,transition:"opacity 0.2s ease-in-out, color 0.15s ease-in-out"},children:"\u25B2"}),A&&Re&&Y&&De("div",{className:"overlay-scrollbar-down-arrow",onClick:Qe,onMouseEnter:()=>$e("down"),onMouseLeave:()=>$e(null),style:{position:"absolute",bottom:`${g.margin}px`,right:g.alignment==="right"?"0px":`${(he-C)/2}px`,width:`${C}px`,height:`${C}px`,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:`${Math.max(C*.75,8)}px`,color:Se==="down"?Z.hoverColor:Z.color,userSelect:"none",zIndex:1001,opacity:X?Se==="down"?Z.hoverOpacity:Z.opacity:0,transition:"opacity 0.2s ease-in-out, color 0.15s ease-in-out"},children:"\u25BC"})]})}),ut=kt;import{Fragment as Ge,jsx as d,jsxs as He}from"react/jsx-runtime";var Nt={alignment:"right",margin:0,radius:0};function Pt({data:s,loading:p=!1,columns:b,onRowClick:y,getRowId:L,selectedRowId:H,selectedRowSx:x,rowHeight:D=50,columnHeight:I=56,striped:F,rowDivider:J=!0,onSort:A,onLoadMore:_,sortBy:R,sortDirection:G,showPaper:de=!0,paddingX:l="1rem",paddingTop:U=0,paddingBottom:pe=0,rowHoverColor:ye,rowHoverOpacity:P,viewportBuffer:X,overscan:M,scrollbars:$,emptyMessage:oe="NO DATA",LoadingComponent:ie}){let Te=Math.max(D*20,900),ve=Math.max(D*20,900),Ie=typeof X=="number"?X:X?.top??Te,ae=typeof X=="number"?X:X?.bottom??ve,Ue=Math.max(D*15,800),Xe=Math.max(D*20,1e3),Ve=typeof M=="number"?M:{main:M?.main??Ue,reverse:M?.reverse??Xe},Re=D+(J?1:0),Oe=nt(()=>rt((r,i)=>{let E=W(null);return d(ut,{detectInnerScroll:!0,track:Nt,...$,children:d(Ht,{component:be,...r,ref:m=>{E.current=m,typeof i=="function"?i(m):i&&(i.current=m)},sx:{userSelect:"auto",WebkitUserSelect:"auto",position:"relative",width:"100%",height:"100%",overflow:"auto",display:"flex",flexDirection:"column",scrollbarWidth:"none",msOverflowStyle:"none",transform:"translateZ(0)",backfaceVisibility:"hidden",willChange:"scroll-position","&::-webkit-scrollbar":{display:"none"},"& .MuiTable-root":{paddingRight:l,paddingTop:U,paddingBottom:pe}}})})}),[]),le=nt(()=>{if(F===!0)return"#f5f5f5";if(typeof F=="string")return F},[F]),[We,xe]=dt(p),[Ke,it]=dt(0);Ee(()=>{p&&xe(!0)},[p]);let Je=ge(()=>{xe(!1)},[]),Se=We,$e=p&&s.length>0,Fe=W(!1),Ne=W(null),B=W(null),se=W(!1),Pe=W({x:0,y:0,scrollTop:0}),fe=W(!1),me=W(0),K=W(0),O=W(!1),g=W({x:0,y:0}),Z=W(null),Be=ge(r=>{},[]),h=ge(r=>{if(!fe.current||!B.current)return;let i=r.clientY-Pe.current.y;if(!se.current&&Math.abs(i)>5&&(se.current=!0,B.current&&(B.current.style.userSelect="none")),se.current){let m=i*2;K.current+=-m;let f=B.current,t=Math.max(0,me.current+K.current);f.scrollTop=t,Pe.current.y=r.clientY,r.preventDefault()}},[]),C=ge(()=>{if(fe.current=!1,se.current&&B.current){let r=Math.max(0,me.current+K.current),i=()=>{B.current&&(B.current.scrollTop=r)};i(),setTimeout(i,1),setTimeout(i,5),setTimeout(i,10)}se.current=!1,K.current=0,B.current&&(B.current.style.userSelect="auto")},[]);Ee(()=>{let r=document.querySelector('[data-testid="virtuoso-scroller"]');r&&r.querySelectorAll(".MuiTableSortLabel-root").forEach(E=>{let m=new MouseEvent("mouseleave",{bubbles:!0,cancelable:!0});E.dispatchEvent(m)})},[R]);let Ce=ge(r=>{if(!A)return;A(r,R===r&&G==="asc"?"desc":"asc")},[A,R,G]),je=ge(r=>{if(!_||p&&s.length===0)return;let i=Date.now(),E=window.lastRangeChangeTime||0;if(i-E<100)return;window.lastRangeChangeTime=i;let m=Math.max(10,Math.floor(s.length*.1)),f=r.endIndex>=s.length-m,t=s.length>=30;if(f&&t&&_&&!Fe.current){Fe.current=!0;let q=s.length;_(q,50)}},[s.length,p,_]);Ee(()=>{p||(Fe.current=!1)},[p]),Ee(()=>{s.length===0&&it(r=>r+1)},[s.length]);let Y=W(s.length);Ee(()=>{let r=Y.current,i=s.length;if(i>r&&r>0){Y.current=i;return}Ne.current&&i>0&&i<=r&&Ne.current.scrollToIndex({index:0,align:"start",behavior:"auto"}),Y.current=i},[s]),Ee(()=>(document.addEventListener("mousemove",h),document.addEventListener("mouseup",C),()=>{document.removeEventListener("mousemove",h),document.removeEventListener("mouseup",C)}),[h,C]);let ke=ge(()=>{let r={},i=[];if(b.forEach(t=>{t.group?(r[t.group]||(r[t.group]=[]),r[t.group].push(t)):i.push(t)}),!(Object.keys(r).length>0))return d(_e,{children:b.map(t=>d(qe,{align:t.align||"left",style:{width:t.width,minWidth:t.width,...t.style,fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px"},children:t.sortable?d("div",{style:{display:"flex",alignItems:"center",justifyContent:t.align==="center"?"center":t.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:He(be,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>Ce(String(t.id)),children:[t.text,d(ot,{active:R===t.id,direction:R===t.id?G:"desc",sx:{position:"absolute",left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft:"4px",minWidth:"auto",width:"16px",height:"16px",cursor:"default",opacity:R===t.id?1:0,transition:"opacity 0.2s ease","& .MuiTableSortLabel-icon":{position:"relative",marginLeft:0,marginRight:0,opacity:1,transition:"color 0.2s ease"},"& .MuiTableSortLabel-iconDirectionAsc":{transform:"rotate(180deg)"},"& .MuiTableSortLabel-iconDirectionDesc":{transform:"rotate(0deg)"}}})]})}):t.text},String(t.id)))});let m=[...i.map(t=>d(qe,{rowSpan:2,align:t.align||"left",style:{width:t.width,minWidth:t.width,...t.style,fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px"},children:t.sortable&&A?d("div",{style:{display:"flex",alignItems:"center",justifyContent:t.align==="center"?"center":t.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:He(be,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>Ce(String(t.id)),children:[t.text,d(ot,{active:R===t.id,direction:R===t.id?G:"desc",sx:{position:"absolute",left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft:"4px",minWidth:"auto",width:"16px",height:"16px",cursor:"default",opacity:R===t.id?1:0,transition:"opacity 0.2s ease","&:hover":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}},"& .MuiTableSortLabel-icon":{position:"relative",marginLeft:0,marginRight:0,opacity:1,transition:"color 0.2s ease"},"& .MuiTableSortLabel-iconDirectionAsc":{transform:"rotate(180deg)"},"& .MuiTableSortLabel-iconDirectionDesc":{transform:"rotate(0deg)"}}})]})}):t.text},String(t.id))),...Object.entries(r).map(([t,q])=>d(qe,{align:"center",colSpan:q.length,style:{fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px"},children:t},t))],f=[...Object.values(r).flat().map(t=>d(qe,{align:t.align||"left",style:{width:t.width,minWidth:t.width,...t.style,fontWeight:"bold",position:"sticky",top:0,zIndex:2,padding:"16px"},children:t.sortable&&A?d("div",{style:{display:"flex",alignItems:"center",justifyContent:t.align==="center"?"center":t.align==="right"?"flex-end":"flex-start",position:"relative",width:"100%"},children:He(be,{sx:{position:"relative",cursor:"default","&:hover .MuiTableSortLabel-root":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}}},onClick:()=>Ce(String(t.id)),children:[t.text,d(ot,{active:R===t.id,direction:R===t.id?G:"desc",sx:{position:"absolute",left:"100%",top:"50%",transform:"translateY(-50%)",marginLeft:"4px",minWidth:"auto",width:"16px",height:"16px",cursor:"default",opacity:R===t.id?1:0,transition:"opacity 0.2s ease","&:hover":{opacity:"1 !important","& .MuiSvgIcon-root":{color:"#000",opacity:"1 !important"}},"& .MuiTableSortLabel-icon":{position:"relative",marginLeft:0,marginRight:0,opacity:1,transition:"color 0.2s ease"},"& .MuiTableSortLabel-iconDirectionAsc":{transform:"rotate(0deg)"},"& .MuiTableSortLabel-iconDirectionDesc":{transform:"rotate(180deg)"}}})]})}):t.text},String(t.id)))];return He(Ge,{children:[d(_e,{children:m}),d(_e,{children:f})]})},[b,R,G,Ce,A,I]),ne=ge((r,i)=>i?d(Ge,{children:b.map(E=>d(qe,{align:E.align||"left",style:{width:E.width,minWidth:E.width,...E.style,padding:"8px 16px"},children:E.render?E.render(i,r):String(i[E.id]||"")},String(E.id)))}):(console.log("rowContent - \uC544\uC774\uD15C \uC5C6\uC74C, \uC778\uB371\uC2A4:",r),null),[b]),k=nt(()=>({Scroller:Oe,Table:r=>d(Dt,{...r,sx:{borderCollapse:"separate",tableLayout:"fixed",marginRight:"16px"}}),TableHead:rt((r,i)=>d(It,{...r,ref:i,sx:{userSelect:"none","& tr":{height:I,"& th":{padding:"16px",position:"sticky",top:0,zIndex:2,fontWeight:"bold"}}}})),TableRow:r=>{let{item:i,selected:E,"aria-selected":m,className:f,...t}=r,q=t["data-index"]??0,Le=q%2===1,Ze=i&&L?L(i,q):q,ze=H!=null&&Ze===H,Qe=ze&&x?typeof x=="function"?x(i,q):x:void 0,et=String(f??"").split(/\s+/).filter(j=>j!=="Mui-selected"&&j!=="Mui-focusVisible").join(" ");return d(_e,{...t,className:et||void 0,selected:ze,onMouseDown:j=>{O.current=!1,g.current={x:j.clientX,y:j.clientY}},onMouseMove:j=>{let Me=Math.abs(j.clientX-g.current.x),he=Math.abs(j.clientY-g.current.y),e=5;(Me>e||he>e)&&(O.current=!0)},onClick:()=>{!O.current&&!se.current&&i&&y&&y(i,q),O.current=!1},sx:[{userSelect:"none",height:D,backgroundColor:Le&&le?le:"transparent","& td":{padding:"8px 16px",borderBottom:J?"1px solid rgba(224, 224, 224, 1)":"none"},"& th":{padding:"8px 16px",borderBottom:"none"},"&:hover":y&&!ze?{backgroundColor:j=>{let Me=j.palette.mode==="dark",e=ye??"#000000",n=P??.06,o=e.replace("#",""),a=parseInt(o.substring(0,2),16)/255,c=parseInt(o.substring(2,4),16)/255,u=parseInt(o.substring(4,6),16)/255;if(Me){let v=Math.max(a,c,u),w=Math.min(a,c,u),z=0,Q=0,T=(v+w)/2;if(v!==w){let S=v-w;switch(Q=T>.5?S/(2-v-w):S/(v+w),v){case a:z=((c-u)/S+(c<u?6:0))/6;break;case c:z=((u-a)/S+2)/6;break;case u:z=((a-c)/S+4)/6;break}}T=1-T;let we=(S,ee,te)=>(te<0&&(te+=1),te>1&&(te-=1),te<1/6?S+(ee-S)*6*te:te<1/2?ee:te<2/3?S+(ee-S)*(2/3-te)*6:S);if(Q===0)a=c=u=T;else{let S=T<.5?T*(1+Q):T+Q-T*Q,ee=2*T-S;a=we(ee,S,z+1/3),c=we(ee,S,z),u=we(ee,S,z-1/3)}}return`rgba(${Math.round(a*255)}, ${Math.round(c*255)}, ${Math.round(u*255)}, ${n})`}}:void 0,cursor:y?"pointer":void 0},Qe]})},TableBody:rt((r,i)=>d(Et,{...r,ref:i}))}),[y,L,H,x,D,Be,le,J,I,ye,P,Oe]),ce=He(be,{sx:{position:"relative",height:"100%",width:"100%","& .MuiTableHead-root":{backgroundColor:r=>r.palette.mode==="dark"?"#1e1e1e !important":"#ffffff !important"}},children:[d($t,{ref:Ne,data:s,totalCount:_?s.length+1:s.length,defaultItemHeight:Re,fixedHeaderContent:ke,itemContent:ne,rangeChanged:je,components:k,style:{height:"100%"},increaseViewportBy:{top:Ie,bottom:ae},overscan:Ve,followOutput:!1},Ke),s.length===0&&!p&&d(be,{sx:{position:"absolute",top:0,left:0,right:0,bottom:0,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:2},children:typeof oe=="string"?He(Ge,{children:[d(be,{sx:{width:48,height:48,display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"50%",backgroundColor:"#f5f5f5",color:"#999"},children:"\u{1F4C4}"}),d(Ot,{variant:"body1",sx:{color:"text.secondary"},children:oe})]}):oe}),Se&&d(Ge,{children:ie?d(ie,{visible:p,onComplete:Je}):d(lt,{visible:p,onComplete:Je,size:40,sx:{top:`${b.some(r=>r.group)?I*2:I}px`},background:{show:s.length===0,opacity:.8}})})]});return de?d(Rt,{className:"grow",elevation:1,sx:{padding:0,paddingLeft:l,height:"100%",minHeight:0,flex:1,display:"flex",flexDirection:"column"},children:ce}):d(be,{className:"grow",style:{padding:0,paddingLeft:l,height:"100%",minHeight:0,flex:1,display:"flex",flexDirection:"column"},children:ce})}var Bt=Lt(Pt);export{Bt as VirtualDataTable};
|
|
22
22
|
/**
|
|
23
23
|
* Virtual Data Table - A high-performance virtual data table component for React
|
|
24
24
|
*
|