react-excel-lite 0.1.0 → 0.3.0
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 +73 -39
- package/dist/components/excel-grid.d.ts.map +1 -1
- package/dist/components/grid-cell.d.ts.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/react-excel-lite.js +479 -429
- package/dist/react-excel-lite.umd.cjs +2 -2
- package/dist/types.d.ts +8 -28
- package/dist/types.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(
|
|
2
|
-
`)}function z(e){return!e.start||!e.end?e:{start:{row:Math.min(e.start.row,e.end.row),col:Math.min(e.start.col,e.end.col)},end:{row:Math.max(e.start.row,e.end.row),col:Math.max(e.start.col,e.end.col)}}}function Y(e,o){if(e.row===o.row&&e.col===o.col)return[];const n=Math.min(e.row,o.row),i=Math.max(e.row,o.row),u=Math.min(e.col,o.col),M=Math.max(e.col,o.col),f=[];for(let p=n;p<=i;p++)for(let d=u;d<=M;d++)p===e.row&&d===e.col||f.push({row:p,col:d});return f}function V({containerRef:e}){const[o,n]=c.useState({start:null,end:null}),[i,u]=c.useState(!1),M=c.useCallback(w=>{n({start:w,end:w}),u(!0)},[]),f=c.useCallback(w=>{i&&n(l=>({...l,end:w}))},[i]),p=c.useCallback(()=>{u(!1)},[]),d=c.useCallback(()=>{n({start:null,end:null}),u(!1)},[]),D=c.useCallback(w=>U(w,o),[o]);return c.useEffect(()=>{const w=()=>{i&&u(!1)};return window.addEventListener("mouseup",w),()=>window.removeEventListener("mouseup",w)},[i]),c.useEffect(()=>{const w=l=>{e.current&&!e.current.contains(l.target)&&d()};return document.addEventListener("mousedown",w),()=>document.removeEventListener("mousedown",w)},[e,d]),{selection:o,isSelecting:i,isCellSelected:D,handleCellMouseDown:M,handleCellMouseEnter:f,handleMouseUp:p,clearSelection:d,setSelection:n}}function W({selection:e,getValue:o,setValues:n,setSelection:i,rowCount:u,colCount:M}){const f=c.useCallback(()=>{const l=z(e);if(!l.start||!l.end)return[];const E=[];for(let h=l.start.row;h<=l.end.row;h++){const x=[];for(let s=l.start.col;s<=l.end.col;s++)x.push(o({row:h,col:s}));E.push(x)}return E},[e,o]),p=c.useCallback(async()=>{const l=f();if(l.length===0)return;const E=O(l);try{await navigator.clipboard.writeText(E)}catch(h){console.error("Clipboard copy failed:",h)}},[f]),d=c.useCallback(async()=>{if(e.start)try{const l=await navigator.clipboard.readText(),E=q(l);if(E.length===0)return;const h=e.start.row,x=e.start.col,s=[];E.forEach((y,b)=>{const m=h+b;m>=u||y.forEach((T,v)=>{const r=x+v;r>=M||s.push({coord:{row:m,col:r},value:T})})}),s.length>0&&n(s)}catch(l){console.error("Clipboard paste failed:",l)}},[e.start,n,u,M]),D=c.useCallback(()=>{const l=z(e);if(!l.start||!l.end)return;const E=[];for(let h=l.start.row;h<=l.end.row;h++)for(let x=l.start.col;x<=l.end.col;x++)E.push({coord:{row:h,col:x},value:""});E.length>0&&n(E)},[e,n]),w=c.useCallback(l=>{if(!(l.target instanceof HTMLInputElement&&!l.target.readOnly)){if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(l.key)){l.preventDefault();const h=z(e).start??{row:0,col:0};let x=h.row,s=h.col;switch(l.key){case"ArrowUp":x=Math.max(0,h.row-1);break;case"ArrowDown":x=Math.min(u-1,h.row+1);break;case"ArrowLeft":s=Math.max(0,h.col-1);break;case"ArrowRight":s=Math.min(M-1,h.col+1);break}i({start:{row:x,col:s},end:{row:x,col:s}});return}(l.ctrlKey||l.metaKey)&&l.key==="c"&&(l.preventDefault(),p()),(l.ctrlKey||l.metaKey)&&l.key==="v"&&(l.preventDefault(),d()),(l.key==="Backspace"||l.key==="Delete")&&(l.preventDefault(),D())}},[p,d,D,e,i,u,M]);return{handleCopy:p,handlePaste:d,handleKeyDown:w}}function Z(e){if(e.trim()==="")return null;const o=Number(e);return isNaN(o)?null:o}function P(e){if(e.length===0)return null;const o=e.map(Z);if(o.some(u=>u===null))return null;const n=o;if(n.length===1)return{numbers:n,diff:0};const i=n[1]-n[0];for(let u=2;u<n.length;u++)if(n[u]-n[u-1]!==i)return{numbers:n,diff:0};return{numbers:n,diff:i}}function $({selection:e,getValue:o,setValues:n}){const[i,u]=c.useState(null),[M,f]=c.useState([]),[p,d]=c.useState(!1),[D,w]=c.useState(null),l=c.useCallback(s=>{u(s),d(!0),f([]),w(null)},[]),E=c.useCallback(s=>{if(!p||!e.start)return;const y=z(e);if(!y.start||!y.end)return;w(s);const b={row:Math.min(y.start.row,s.row),col:Math.min(y.start.col,s.col)},m={row:Math.max(y.end.row,s.row),col:Math.max(y.end.col,s.col)},T=[];for(let v=b.row;v<=m.row;v++)for(let r=b.col;r<=m.col;r++)v>=y.start.row&&v<=y.end.row&&r>=y.start.col&&r<=y.end.col||T.push({row:v,col:r});f(T)},[p,e]),h=c.useCallback(()=>{if(!e.start||M.length===0||!D){u(null),f([]),d(!1),w(null);return}const s=z(e);if(!s.start||!s.end){u(null),f([]),d(!1),w(null);return}const y=[],b=s.start,m=s.end,T=m.row-b.row+1,v=m.col-b.col+1;M.forEach(r=>{let H,G;if(r.row<b.row){const F=b.row-r.row;H=m.row-(F-1)%T}else if(r.row>m.row){const F=r.row-m.row;H=b.row+(F-1)%T}else H=r.row;if(r.col<b.col){const F=b.col-r.col;G=m.col-(F-1)%v}else if(r.col>m.col){const F=r.col-m.col;G=b.col+(F-1)%v}else G=r.col;let I=o({row:H,col:G});if(r.row!==H&&r.col>=b.col&&r.col<=m.col){const F=[];for(let N=b.row;N<=m.row;N++)F.push(o({row:N,col:r.col}));const a=P(F);if(a&&a.diff!==0){if(r.row>m.row){const N=r.row-m.row;I=String(a.numbers[a.numbers.length-1]+a.diff*N)}else if(r.row<b.row){const N=b.row-r.row;I=String(a.numbers[0]-a.diff*N)}}}if(r.col!==G&&r.row>=b.row&&r.row<=m.row){const F=[];for(let N=b.col;N<=m.col;N++)F.push(o({row:r.row,col:N}));const a=P(F);if(a&&a.diff!==0){if(r.col>m.col){const N=r.col-m.col;I=String(a.numbers[a.numbers.length-1]+a.diff*N)}else if(r.col<b.col){const N=b.col-r.col;I=String(a.numbers[0]-a.diff*N)}}}y.push({coord:r,value:I})}),y.length>0&&n(y),u(null),f([]),d(!1),w(null)},[e,M,D,o,n]),x=c.useCallback(s=>M.some(y=>y.row===s.row&&y.col===s.col),[M]);return c.useEffect(()=>{const s=()=>{p&&h()};return window.addEventListener("mouseup",s),()=>window.removeEventListener("mouseup",s)},[p,h]),{fillSource:i,fillTargets:M,isDraggingFill:p,isFillTarget:x,handleFillHandleMouseDown:l,handleCellMouseEnterForFill:E,handleFillMouseUp:h}}const ee={position:"relative",border:"1px solid #d1d5db",padding:0,height:"28px",minWidth:"80px"},oe={width:"100%",height:"100%",padding:"4px",textAlign:"right",fontSize:"12px",boxSizing:"border-box",cursor:"cell",backgroundColor:"transparent",outline:"none",border:"none"},le={position:"absolute",bottom:"-2px",right:"-2px",width:"8px",height:"8px",cursor:"crosshair",zIndex:20,backgroundColor:"#3b82f6"},ne={backgroundColor:"#dbeafe",outline:"2px solid #3b82f6",outlineOffset:"-2px"},te={backgroundColor:"#eff6ff"};function J({coord:e,value:o,isSelected:n,isFillTarget:i,showFillHandle:u,onMouseDown:M,onMouseEnter:f,onChange:p,onFillHandleMouseDown:d,styles:D}){const[w,l]=c.useState(!1),[E,h]=c.useState(!1),x=c.useRef(null);c.useEffect(()=>{n&&x.current&&(x.current.focus(),w&&E&&(x.current.select(),h(!1)))},[n,w,E]),c.useEffect(()=>{!n&&w&&l(!1)},[n,w]);const s=a=>{p(e,a.target.value)},y=a=>{a.target.classList.contains("fill-handle")||M(e)},b=()=>{l(!0),h(!0)},m=()=>{l(!1)},T=a=>{w?(a.key==="Enter"||a.key==="Escape")&&l(!1):a.key==="Enter"?(a.preventDefault(),l(!0),h(!0)):a.key.length===1&&!a.ctrlKey&&!a.metaKey&&(a.preventDefault(),p(e,a.key),l(!0))},v=a=>{a.stopPropagation(),a.preventDefault(),d(e)},r=!!D?.selected,H=!!D?.fillTarget,G=!!D?.fillHandle,I={...ee,...n&&!r?ne:{},...i&&!H?te:{}},F={...le,...G?{backgroundColor:void 0}:{}};return k.jsxs("td",{className:L(D?.cell,n&&D?.selected,i&&D?.fillTarget),style:I,onMouseDown:y,onMouseEnter:()=>f(e),onDoubleClick:b,children:[k.jsx("input",{ref:x,type:"text",value:o,readOnly:!w,onChange:s,onBlur:m,onKeyDown:T,style:oe}),u&&k.jsx("div",{className:L("fill-handle",D?.fillHandle),style:F,onMouseDown:v})]})}const re={outline:"none",overflowX:"auto"},se={borderCollapse:"collapse",fontSize:"12px",userSelect:"none"},ce={position:"sticky",left:0,zIndex:10,border:"1px solid #d1d5db",padding:"6px 8px",textAlign:"center",fontWeight:500},ae={border:"1px solid #d1d5db",padding:"6px 4px",textAlign:"center",fontWeight:500},ie={border:"1px solid #d1d5db",padding:"4px",textAlign:"center",fontWeight:500,fontSize:"11px"},ue={backgroundColor:"#f3f4f6"},fe={backgroundColor:"#dbeafe",color:"#1d4ed8"},de={backgroundColor:"#f9fafb"};function we({data:e,onChange:o,rowHeaders:n,colHeaders:i,className:u,rowHeaderTitle:M="",styles:f}){const p=c.useRef(null),d=e.length,D=c.useMemo(()=>i?i.reduce((t,C)=>t+C.headers.length,0):e[0]?.length??0,[i,e]),w=c.useMemo(()=>i?i.flatMap(t=>t.headers):[],[i]),l=c.useMemo(()=>{if(!n)return null;const t=[];return n.forEach((C,S)=>{C.headers.forEach((K,A)=>{t.push({groupIndex:S,isFirstInGroup:A===0,groupLabel:C.label,groupRowCount:C.headers.length,rowHeader:K,groupClassName:C.className,groupDescription:C.description})})}),t},[n]),E=c.useCallback(t=>t.row<0||t.row>=d||t.col<0||t.col>=D?"":e[t.row]?.[t.col]??"",[e,d,D]),h=c.useCallback((t,C)=>{const S=e.map((K,A)=>A===t.row?K.map((R,j)=>j===t.col?C:R):K);o(S)},[e,o]),x=c.useCallback(t=>{if(t.length===0)return;const C=e.map(S=>[...S]);t.forEach(({coord:S,value:K})=>{S.row>=0&&S.row<d&&S.col>=0&&S.col<D&&(C[S.row][S.col]=K)}),o(C)},[e,o,d,D]),{selection:s,isSelecting:y,isCellSelected:b,handleCellMouseDown:m,handleCellMouseEnter:T,setSelection:v}=V({containerRef:p}),{handleKeyDown:r}=W({selection:s,getValue:E,setValues:x,setSelection:v,rowCount:d,colCount:D}),{isDraggingFill:H,isFillTarget:G,handleFillHandleMouseDown:I,handleCellMouseEnterForFill:F}=$({selection:s,getValue:E,setValues:x}),a=c.useCallback(t=>{H?F(t):y&&T(t)},[H,y,F,T]),N=c.useCallback((t,C)=>{h(t,C)},[h]),me=c.useCallback(t=>{if(!s.start)return!1;const C=z(s);return!C.start||!C.end?!1:t.row===C.end.row&&t.col===C.end.col},[s]),B=t=>({...ce,...!t&&!f?.rowHeader?ue:{}}),be=t=>({...ae,...!t&&!f?.colGroup?fe:{}}),Ce=t=>({...ie,...!t&&!f?.colHeader?de:{}});return k.jsx("div",{ref:p,className:u,style:re,tabIndex:0,onKeyDown:r,children:k.jsxs("table",{style:se,children:[k.jsxs("thead",{children:[i&&k.jsxs("tr",{children:[n&&k.jsx("th",{colSpan:2,className:f?.rowHeader,style:B(),children:M}),i.map((t,C)=>k.jsx("th",{colSpan:t.headers.length,className:L(f?.colGroup,t.className),style:be(t.className),title:t.description,children:t.label},C))]}),i&&k.jsxs("tr",{children:[n&&k.jsx("th",{colSpan:2,className:f?.rowHeader,style:B()}),w.map(t=>k.jsx("th",{className:L(f?.colHeader,t.className),style:Ce(t.className),title:t.description,children:t.label},t.key))]})]}),k.jsx("tbody",{children:e.map((t,C)=>{const S=l?.[C];return k.jsxs("tr",{children:[S&&k.jsxs(k.Fragment,{children:[S.isFirstInGroup&&k.jsx("td",{rowSpan:S.groupRowCount,className:L(f?.rowHeader,S.groupClassName),style:B(S.groupClassName),title:S.groupDescription,children:S.groupLabel}),k.jsx("td",{className:L(f?.rowHeader,S.rowHeader.className),style:B(S.rowHeader.className),title:S.rowHeader.description,children:S.rowHeader.label})]}),t.map((K,A)=>{const R={row:C,col:A},j=b(R),ye=G(R),Se=me(R);return k.jsx(J,{coord:R,value:E(R),isSelected:j,isFillTarget:ye,showFillHandle:Se&&!H,onMouseDown:m,onMouseEnter:a,onChange:N,onFillHandleMouseDown:I,styles:f},A)})]},C)})})]})})}function he(e){const o=typeof e=="string"?parseFloat(e.replace(/,/g,"")):e;return isNaN(o)?"0":new Intl.NumberFormat("ko-KR").format(o)}function pe(e){const o=parseInt(e.replace(/,/g,""),10);return isNaN(o)?0:o}g.ExcelGrid=we,g.GridCell=J,g.cn=L,g.coordToKey=X,g.formatCurrency=he,g.getCellsInRange=Q,g.getFillTargetCells=Y,g.isCellInRange=U,g.keyToCoord=_,g.normalizeRange=z,g.parseCurrency=pe,g.parseTSV=q,g.toTSV=O,g.useGridClipboard=W,g.useGridDragFill=$,g.useGridSelection=V,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})}));
|
|
1
|
+
(function(x,m){typeof exports=="object"&&typeof module<"u"?m(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],m):(x=typeof globalThis<"u"?globalThis:x||self,m(x.ReactExcelLite={},x.ReactJsxRuntime,x.React))})(this,(function(x,m,r){"use strict";function R(...e){return e.filter(Boolean).join(" ")}function ee(e){return`${e.row}-${e.col}`}function oe(e){const[o,l]=e.split("-").map(Number);return{row:o,col:l}}function ne(e,o){if(!e||!o)return e?[e]:[];const l=Math.min(e.row,o.row),c=Math.max(e.row,o.row),f=Math.min(e.col,o.col),S=Math.max(e.col,o.col),d=[];for(let b=l;b<=c;b++)for(let w=f;w<=S;w++)d.push({row:b,col:w});return d}function P(e,o){if(!o.start)return!1;const l=o.end||o.start,c=Math.min(o.start.row,l.row),f=Math.max(o.start.row,l.row),S=Math.min(o.start.col,l.col),d=Math.max(o.start.col,l.col);return e.row>=c&&e.row<=f&&e.col>=S&&e.col<=d}function $(e){return e.split(/\r?\n/).filter(o=>o.trim()).map(o=>o.split(" ").map(l=>l.trim()))}function J(e){return e.map(o=>o.join(" ")).join(`
|
|
2
|
+
`)}function K(e){return!e.start||!e.end?e:{start:{row:Math.min(e.start.row,e.end.row),col:Math.min(e.start.col,e.end.col)},end:{row:Math.max(e.start.row,e.end.row),col:Math.max(e.start.col,e.end.col)}}}function le(e,o){if(e.row===o.row&&e.col===o.col)return[];const l=Math.min(e.row,o.row),c=Math.max(e.row,o.row),f=Math.min(e.col,o.col),S=Math.max(e.col,o.col),d=[];for(let b=l;b<=c;b++)for(let w=f;w<=S;w++)b===e.row&&w===e.col||d.push({row:b,col:w});return d}function X({containerRef:e}){const[o,l]=r.useState({start:null,end:null}),[c,f]=r.useState(!1),S=r.useCallback(a=>{l({start:a,end:a}),f(!0)},[]),d=r.useCallback(a=>{c&&l(n=>({...n,end:a}))},[c]),b=r.useCallback(()=>{f(!1)},[]),w=r.useCallback(()=>{l({start:null,end:null}),f(!1)},[]),k=r.useCallback(a=>P(a,o),[o]);return r.useEffect(()=>{const a=()=>{c&&f(!1)};return window.addEventListener("mouseup",a),()=>window.removeEventListener("mouseup",a)},[c]),r.useEffect(()=>{const a=n=>{e.current&&!e.current.contains(n.target)&&w()};return document.addEventListener("mousedown",a),()=>document.removeEventListener("mousedown",a)},[e,w]),{selection:o,isSelecting:c,isCellSelected:k,handleCellMouseDown:S,handleCellMouseEnter:d,handleMouseUp:b,clearSelection:w,setSelection:l}}function _({selection:e,getValue:o,setValues:l,setSelection:c,rowCount:f,colCount:S}){const d=r.useCallback(()=>{const n=K(e);if(!n.start||!n.end)return[];const M=[];for(let p=n.start.row;p<=n.end.row;p++){const D=[];for(let i=n.start.col;i<=n.end.col;i++)D.push(o({row:p,col:i}));M.push(D)}return M},[e,o]),b=r.useCallback(async()=>{const n=d();if(n.length===0)return;const M=J(n);try{await navigator.clipboard.writeText(M)}catch(p){console.error("Clipboard copy failed:",p)}},[d]),w=r.useCallback(async()=>{if(e.start)try{const n=await navigator.clipboard.readText(),M=$(n);if(M.length===0)return;const p=e.start.row,D=e.start.col,i=[];M.forEach((C,u)=>{const h=p+u;h>=f||C.forEach((I,T)=>{const s=D+T;s>=S||i.push({coord:{row:h,col:s},value:I})})}),i.length>0&&l(i)}catch(n){console.error("Clipboard paste failed:",n)}},[e.start,l,f,S]),k=r.useCallback(()=>{const n=K(e);if(!n.start||!n.end)return;const M=[];for(let p=n.start.row;p<=n.end.row;p++)for(let D=n.start.col;D<=n.end.col;D++)M.push({coord:{row:p,col:D},value:""});M.length>0&&l(M)},[e,l]),a=r.useCallback(n=>{if(!(n.target instanceof HTMLInputElement&&!n.target.readOnly)){if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(n.key)){n.preventDefault();const p=K(e).start??{row:0,col:0};let D=p.row,i=p.col;switch(n.key){case"ArrowUp":D=Math.max(0,p.row-1);break;case"ArrowDown":D=Math.min(f-1,p.row+1);break;case"ArrowLeft":i=Math.max(0,p.col-1);break;case"ArrowRight":i=Math.min(S-1,p.col+1);break}c({start:{row:D,col:i},end:{row:D,col:i}});return}(n.ctrlKey||n.metaKey)&&n.key==="c"&&(n.preventDefault(),b()),(n.ctrlKey||n.metaKey)&&n.key==="v"&&(n.preventDefault(),w()),(n.key==="Backspace"||n.key==="Delete")&&(n.preventDefault(),k())}},[b,w,k,e,c,f,S]);return{handleCopy:b,handlePaste:w,handleKeyDown:a}}function te(e){if(e.trim()==="")return null;const o=Number(e);return isNaN(o)?null:o}function Q(e){if(e.length===0)return null;const o=e.map(te);if(o.some(f=>f===null))return null;const l=o;if(l.length===1)return{numbers:l,diff:0};const c=l[1]-l[0];for(let f=2;f<l.length;f++)if(l[f]-l[f-1]!==c)return{numbers:l,diff:0};return{numbers:l,diff:c}}function Y({selection:e,getValue:o,setValues:l}){const[c,f]=r.useState(null),[S,d]=r.useState([]),[b,w]=r.useState(!1),[k,a]=r.useState(null),n=r.useCallback(i=>{f(i),w(!0),d([]),a(null)},[]),M=r.useCallback(i=>{if(!b||!e.start)return;const C=K(e);if(!C.start||!C.end)return;a(i);const u={row:Math.min(C.start.row,i.row),col:Math.min(C.start.col,i.col)},h={row:Math.max(C.end.row,i.row),col:Math.max(C.end.col,i.col)},I=[];for(let T=u.row;T<=h.row;T++)for(let s=u.col;s<=h.col;s++)T>=C.start.row&&T<=C.end.row&&s>=C.start.col&&s<=C.end.col||I.push({row:T,col:s});d(I)},[b,e]),p=r.useCallback(()=>{if(!e.start||S.length===0||!k){f(null),d([]),w(!1),a(null);return}const i=K(e);if(!i.start||!i.end){f(null),d([]),w(!1),a(null);return}const C=[],u=i.start,h=i.end,I=h.row-u.row+1,T=h.col-u.col+1;S.forEach(s=>{let z,L;if(s.row<u.row){const N=u.row-s.row;z=h.row-(N-1)%I}else if(s.row>h.row){const N=s.row-h.row;z=u.row+(N-1)%I}else z=s.row;if(s.col<u.col){const N=u.col-s.col;L=h.col-(N-1)%T}else if(s.col>h.col){const N=s.col-h.col;L=u.col+(N-1)%T}else L=s.col;let G=o({row:z,col:L});if(s.row!==z&&s.col>=u.col&&s.col<=h.col){const N=[];for(let E=u.row;E<=h.row;E++)N.push(o({row:E,col:s.col}));const F=Q(N);if(F&&F.diff!==0){if(s.row>h.row){const E=s.row-h.row;G=String(F.numbers[F.numbers.length-1]+F.diff*E)}else if(s.row<u.row){const E=u.row-s.row;G=String(F.numbers[0]-F.diff*E)}}}if(s.col!==L&&s.row>=u.row&&s.row<=h.row){const N=[];for(let E=u.col;E<=h.col;E++)N.push(o({row:s.row,col:E}));const F=Q(N);if(F&&F.diff!==0){if(s.col>h.col){const E=s.col-h.col;G=String(F.numbers[F.numbers.length-1]+F.diff*E)}else if(s.col<u.col){const E=u.col-s.col;G=String(F.numbers[0]-F.diff*E)}}}C.push({coord:s,value:G})}),C.length>0&&l(C),f(null),d([]),w(!1),a(null)},[e,S,k,o,l]),D=r.useCallback(i=>S.some(C=>C.row===i.row&&C.col===i.col),[S]);return r.useEffect(()=>{const i=()=>{b&&p()};return window.addEventListener("mouseup",i),()=>window.removeEventListener("mouseup",i)},[b,p]),{fillSource:c,fillTargets:S,isDraggingFill:b,isFillTarget:D,handleFillHandleMouseDown:n,handleCellMouseEnterForFill:M,handleFillMouseUp:p}}const re={position:"relative",border:"1px solid #d1d5db",padding:0,height:"28px",minWidth:"80px"},se={width:"100%",height:"100%",padding:"4px",textAlign:"right",fontSize:"12px",boxSizing:"border-box",cursor:"cell",backgroundColor:"transparent",outline:"none",border:"none"},ie={position:"absolute",bottom:"-2px",right:"-2px",width:"8px",height:"8px",cursor:"crosshair",zIndex:20,backgroundColor:"#3b82f6"},ce={position:"absolute",top:0,left:0,minWidth:"100%",height:"100%",zIndex:30},ae={height:"100%",padding:"4px",textAlign:"right",fontSize:"12px",boxSizing:"border-box",backgroundColor:"#fff",border:"2px solid #3b82f6",outline:"none",minWidth:"100%"},ue={position:"absolute",visibility:"hidden",whiteSpace:"pre",fontSize:"12px",padding:"4px"},fe={backgroundColor:"#dbeafe",outline:"2px solid #3b82f6",outlineOffset:"-2px"},de={backgroundColor:"#eff6ff"};function Z({coord:e,value:o,isSelected:l,isFillTarget:c,showFillHandle:f,onMouseDown:S,onMouseEnter:d,onChange:b,onFillHandleMouseDown:w,styles:k}){const[a,n]=r.useState(!1),[M,p]=r.useState(!1),[D,i]=r.useState(null),C=r.useRef(null),u=r.useRef(null),h=r.useRef(null),I=r.useRef(null);r.useLayoutEffect(()=>{if(a&&h.current&&I.current){const v=h.current.offsetWidth,q=I.current.offsetWidth;i(Math.max(v+16,q))}},[a,o]),r.useEffect(()=>{a&&u.current?(u.current.focus(),M&&(u.current.select(),p(!1))):l&&!a&&C.current&&C.current.focus()},[l,a,M]),r.useEffect(()=>{!l&&a&&(n(!1),i(null))},[l,a]);const T=v=>{b(e,v.target.value)},s=v=>{v.target.classList.contains("fill-handle")||S(e)},z=()=>{n(!0),p(!0)},L=()=>{n(!1)},G=v=>{a?(v.key==="Enter"||v.key==="Escape")&&n(!1):v.key==="Enter"?(v.preventDefault(),n(!0),p(!0)):v.key.length===1&&!v.ctrlKey&&!v.metaKey&&(v.preventDefault(),b(e,v.key),n(!0))},N=v=>{v.stopPropagation(),v.preventDefault(),w(e)},F=!!k?.selected,E=!!k?.fillTarget,j=!!k?.fillHandle,O={...re,...l&&!F?fe:{},...c&&!E?de:{}},U={...ie,...j?{backgroundColor:void 0}:{}},W={...se,overflow:"hidden",textOverflow:"ellipsis"};return m.jsxs("td",{ref:I,className:R(k?.cell,l&&k?.selected,c&&k?.fillTarget),style:O,onMouseDown:s,onMouseEnter:()=>d(e),onDoubleClick:z,children:[m.jsx("input",{ref:C,type:"text",value:o,readOnly:!0,onChange:T,onKeyDown:G,style:W,tabIndex:a?-1:0}),a&&m.jsx("div",{style:ce,children:m.jsx("input",{ref:u,type:"text",value:o,onChange:T,onBlur:L,onKeyDown:G,style:{...ae,width:D??"100%"}})}),a&&m.jsx("span",{ref:h,style:ue,children:o}),f&&m.jsx("div",{className:R("fill-handle",k?.fillHandle),style:U,onMouseDown:N})]})}const we={outline:"none",overflowX:"auto"},he={borderCollapse:"collapse",fontSize:"12px",userSelect:"none"},pe={position:"sticky",left:0,zIndex:10,border:"1px solid #d1d5db",padding:"6px 8px",textAlign:"center",fontWeight:500},me={border:"1px solid #d1d5db",padding:"6px 4px",textAlign:"center",fontWeight:500},be={border:"1px solid #d1d5db",padding:"4px",textAlign:"center",fontWeight:500,fontSize:"11px"},Ce={backgroundColor:"#f3f4f6"},ye={backgroundColor:"#dbeafe",color:"#1d4ed8"},Se={backgroundColor:"#f9fafb"};function ge({data:e,onChange:o,rowHeaders:l,colHeaders:c,className:f,rowHeaderTitle:S="",styles:d}){const b=r.useRef(null),w=e.length,k=r.useMemo(()=>c?c.reduce((t,y)=>t+y.headers.length,0):e[0]?.length??0,[c,e]),a=r.useMemo(()=>c?c.flatMap(t=>t.headers):[],[c]),n=r.useMemo(()=>c?c.some(t=>t.label!==void 0):!1,[c]),M=r.useMemo(()=>l?l.some(t=>t.label!==void 0):!1,[l]),p=r.useMemo(()=>{if(!l)return null;const t=[];return l.forEach((y,g)=>{y.headers.forEach((A,B)=>{t.push({groupIndex:g,isFirstInGroup:B===0,groupLabel:y.label,groupRowCount:y.headers.length,rowHeader:A,groupClassName:y.className,groupDescription:y.description})})}),t},[l]),D=r.useCallback(t=>t.row<0||t.row>=w||t.col<0||t.col>=k?"":e[t.row]?.[t.col]??"",[e,w,k]),i=r.useCallback((t,y)=>{const g=e.map((A,B)=>B===t.row?A.map((H,V)=>V===t.col?y:H):A);o(g)},[e,o]),C=r.useCallback(t=>{if(t.length===0)return;const y=e.map(g=>[...g]);t.forEach(({coord:g,value:A})=>{g.row>=0&&g.row<w&&g.col>=0&&g.col<k&&(y[g.row][g.col]=A)}),o(y)},[e,o,w,k]),{selection:u,isSelecting:h,isCellSelected:I,handleCellMouseDown:T,handleCellMouseEnter:s,setSelection:z}=X({containerRef:b}),{handleKeyDown:L}=_({selection:u,getValue:D,setValues:C,setSelection:z,rowCount:w,colCount:k}),{isDraggingFill:G,isFillTarget:N,handleFillHandleMouseDown:F,handleCellMouseEnterForFill:E}=Y({selection:u,getValue:D,setValues:C}),j=r.useCallback(t=>{G?E(t):h&&s(t)},[G,h,E,s]),O=r.useCallback((t,y)=>{i(t,y)},[i]),U=r.useCallback(t=>{if(!u.start)return!1;const y=K(u);return!y.start||!y.end?!1:t.row===y.end.row&&t.col===y.end.col},[u]),W=t=>({...pe,...!t&&!d?.rowHeader?Ce:{}}),v=t=>({...me,...!t&&!d?.colGroup?ye:{}}),q=t=>({...be,...!t&&!d?.colHeader?Se:{}});return m.jsx("div",{ref:b,className:f,style:we,tabIndex:0,onKeyDown:L,children:m.jsxs("table",{style:he,children:[m.jsxs("thead",{children:[c&&n&&m.jsxs("tr",{children:[l&&m.jsx("th",{colSpan:M?2:1,className:d?.rowHeader,style:W(),children:S}),c.map((t,y)=>m.jsx("th",{colSpan:t.headers.length,className:R(d?.colGroup,t.className),style:v(t.className),title:t.description,children:t.label??""},y))]}),c&&m.jsxs("tr",{children:[l&&m.jsx("th",{colSpan:M?2:1,className:d?.rowHeader,style:W(),children:!n&&S}),a.map(t=>m.jsx("th",{className:R(d?.colHeader,t.className),style:q(t.className),title:t.description,children:t.label},t.key))]})]}),m.jsx("tbody",{children:e.map((t,y)=>{const g=p?.[y];return m.jsxs("tr",{children:[g&&m.jsxs(m.Fragment,{children:[M&&g.isFirstInGroup&&m.jsx("td",{rowSpan:g.groupRowCount,className:R(d?.rowHeader,g.groupClassName),style:W(g.groupClassName),title:g.groupDescription,children:g.groupLabel??""}),m.jsx("td",{className:R(d?.rowHeader,g.rowHeader.className),style:W(g.rowHeader.className),title:g.rowHeader.description,children:g.rowHeader.label})]}),t.map((A,B)=>{const H={row:y,col:B},V=I(H),Me=N(H),De=U(H);return m.jsx(Z,{coord:H,value:D(H),isSelected:V,isFillTarget:Me,showFillHandle:De&&!G,onMouseDown:T,onMouseEnter:j,onChange:O,onFillHandleMouseDown:F,styles:d},B)})]},y)})})]})})}function xe(e){const o=typeof e=="string"?parseFloat(e.replace(/,/g,"")):e;return isNaN(o)?"0":new Intl.NumberFormat("ko-KR").format(o)}function ke(e){const o=parseInt(e.replace(/,/g,""),10);return isNaN(o)?0:o}x.ExcelGrid=ge,x.GridCell=Z,x.cn=R,x.coordToKey=ee,x.formatCurrency=xe,x.getCellsInRange=ne,x.getFillTargetCells=le,x.isCellInRange=P,x.keyToCoord=oe,x.normalizeRange=K,x.parseCurrency=ke,x.parseTSV=$,x.toTSV=J,x.useGridClipboard=_,x.useGridDragFill=Y,x.useGridSelection=X,Object.defineProperty(x,Symbol.toStringTag,{value:"Module"})}));
|
package/dist/types.d.ts
CHANGED
|
@@ -13,9 +13,9 @@ export interface SelectionRange {
|
|
|
13
13
|
end: CellCoord | null;
|
|
14
14
|
}
|
|
15
15
|
/**
|
|
16
|
-
*
|
|
16
|
+
* Header definition
|
|
17
17
|
*/
|
|
18
|
-
export interface
|
|
18
|
+
export interface Header {
|
|
19
19
|
key: string;
|
|
20
20
|
label: string;
|
|
21
21
|
description?: string;
|
|
@@ -23,31 +23,11 @@ export interface ColHeader {
|
|
|
23
23
|
className?: string;
|
|
24
24
|
}
|
|
25
25
|
/**
|
|
26
|
-
*
|
|
26
|
+
* Header group
|
|
27
27
|
*/
|
|
28
|
-
export interface
|
|
29
|
-
label
|
|
30
|
-
headers:
|
|
31
|
-
description?: string;
|
|
32
|
-
/** Custom class name for this group header */
|
|
33
|
-
className?: string;
|
|
34
|
-
}
|
|
35
|
-
/**
|
|
36
|
-
* Row header definition
|
|
37
|
-
*/
|
|
38
|
-
export interface RowHeader {
|
|
39
|
-
key: string;
|
|
40
|
-
label: string;
|
|
41
|
-
description?: string;
|
|
42
|
-
/** Custom class name for this header cell */
|
|
43
|
-
className?: string;
|
|
44
|
-
}
|
|
45
|
-
/**
|
|
46
|
-
* Row header group
|
|
47
|
-
*/
|
|
48
|
-
export interface RowHeaderGroup {
|
|
49
|
-
label: string;
|
|
50
|
-
headers: RowHeader[];
|
|
28
|
+
export interface HeaderGroup {
|
|
29
|
+
label?: string;
|
|
30
|
+
headers: Header[];
|
|
51
31
|
description?: string;
|
|
52
32
|
/** Custom class name for this group header */
|
|
53
33
|
className?: string;
|
|
@@ -81,9 +61,9 @@ export interface ExcelGridProps {
|
|
|
81
61
|
/** Data change callback */
|
|
82
62
|
onChange: (data: string[][]) => void;
|
|
83
63
|
/** Row header group definitions */
|
|
84
|
-
rowHeaders?:
|
|
64
|
+
rowHeaders?: HeaderGroup[];
|
|
85
65
|
/** Column header group definitions */
|
|
86
|
-
colHeaders?:
|
|
66
|
+
colHeaders?: HeaderGroup[];
|
|
87
67
|
/** Additional class name for container */
|
|
88
68
|
className?: string;
|
|
89
69
|
/** Row header column title */
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,GAAG,EAAE,SAAS,GAAG,IAAI,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,GAAG,EAAE,SAAS,GAAG,IAAI,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,MAAM;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,WAAW,UAAU;IACzB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+FAA+F;IAC/F,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uFAAuF;IACvF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,2BAA2B;IAC3B,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC;IACjB,2BAA2B;IAC3B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,KAAK,IAAI,CAAC;IACrC,mCAAmC;IACnC,UAAU,CAAC,EAAE,WAAW,EAAE,CAAC;IAC3B,sCAAsC;IACtC,UAAU,CAAC,EAAE,WAAW,EAAE,CAAC;IAC3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,qBAAqB,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAClD,kBAAkB;IAClB,MAAM,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,YAAY,CAAC,CAAC;CAC9E"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-excel-lite",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "A lightweight, Excel-like editable grid component for React with cell selection, copy/paste, auto-fill with arithmetic sequence detection, and customizable styling.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|