react-excel-lite 0.2.0 → 0.4.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 +147 -26
- package/dist/components/excel-grid.d.ts +1 -1
- package/dist/components/excel-grid.d.ts.map +1 -1
- package/dist/components/grid-cell.d.ts +1 -1
- package/dist/components/grid-cell.d.ts.map +1 -1
- package/dist/react-excel-lite.js +479 -474
- package/dist/react-excel-lite.umd.cjs +2 -2
- package/dist/types.d.ts +5 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(
|
|
2
|
-
`)}function L(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 oe(e,n){if(e.row===n.row&&e.col===n.col)return[];const t=Math.min(e.row,n.row),a=Math.max(e.row,n.row),u=Math.min(e.col,n.col),x=Math.max(e.col,n.col),f=[];for(let C=t;C<=a;C++)for(let d=u;d<=x;d++)C===e.row&&d===e.col||f.push({row:C,col:d});return f}function $({containerRef:e}){const[n,t]=r.useState({start:null,end:null}),[a,u]=r.useState(!1),x=r.useCallback(i=>{t({start:i,end:i}),u(!0)},[]),f=r.useCallback(i=>{a&&t(l=>({...l,end:i}))},[a]),C=r.useCallback(()=>{u(!1)},[]),d=r.useCallback(()=>{t({start:null,end:null}),u(!1)},[]),k=r.useCallback(i=>q(i,n),[n]);return r.useEffect(()=>{const i=()=>{a&&u(!1)};return window.addEventListener("mouseup",i),()=>window.removeEventListener("mouseup",i)},[a]),r.useEffect(()=>{const i=l=>{e.current&&!e.current.contains(l.target)&&d()};return document.addEventListener("mousedown",i),()=>document.removeEventListener("mousedown",i)},[e,d]),{selection:n,isSelecting:a,isCellSelected:k,handleCellMouseDown:x,handleCellMouseEnter:f,handleMouseUp:C,clearSelection:d,setSelection:t}}function J({selection:e,getValue:n,setValues:t,setSelection:a,rowCount:u,colCount:x}){const f=r.useCallback(()=>{const l=L(e);if(!l.start||!l.end)return[];const M=[];for(let w=l.start.row;w<=l.end.row;w++){const D=[];for(let s=l.start.col;s<=l.end.col;s++)D.push(n({row:w,col:s}));M.push(D)}return M},[e,n]),C=r.useCallback(async()=>{const l=f();if(l.length===0)return;const M=P(l);try{await navigator.clipboard.writeText(M)}catch(w){console.error("Clipboard copy failed:",w)}},[f]),d=r.useCallback(async()=>{if(e.start)try{const l=await navigator.clipboard.readText(),M=V(l);if(M.length===0)return;const w=e.start.row,D=e.start.col,s=[];M.forEach((y,h)=>{const p=w+h;p>=u||y.forEach((T,N)=>{const c=D+N;c>=x||s.push({coord:{row:p,col:c},value:T})})}),s.length>0&&t(s)}catch(l){console.error("Clipboard paste failed:",l)}},[e.start,t,u,x]),k=r.useCallback(()=>{const l=L(e);if(!l.start||!l.end)return;const M=[];for(let w=l.start.row;w<=l.end.row;w++)for(let D=l.start.col;D<=l.end.col;D++)M.push({coord:{row:w,col:D},value:""});M.length>0&&t(M)},[e,t]),i=r.useCallback(l=>{if(!(l.target instanceof HTMLInputElement&&!l.target.readOnly)){if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(l.key)){l.preventDefault();const w=L(e).start??{row:0,col:0};let D=w.row,s=w.col;switch(l.key){case"ArrowUp":D=Math.max(0,w.row-1);break;case"ArrowDown":D=Math.min(u-1,w.row+1);break;case"ArrowLeft":s=Math.max(0,w.col-1);break;case"ArrowRight":s=Math.min(x-1,w.col+1);break}a({start:{row:D,col:s},end:{row:D,col:s}});return}(l.ctrlKey||l.metaKey)&&l.key==="c"&&(l.preventDefault(),C()),(l.ctrlKey||l.metaKey)&&l.key==="v"&&(l.preventDefault(),d()),(l.key==="Backspace"||l.key==="Delete")&&(l.preventDefault(),k())}},[C,d,k,e,a,u,x]);return{handleCopy:C,handlePaste:d,handleKeyDown:i}}function ne(e){if(e.trim()==="")return null;const n=Number(e);return isNaN(n)?null:n}function X(e){if(e.length===0)return null;const n=e.map(ne);if(n.some(u=>u===null))return null;const t=n;if(t.length===1)return{numbers:t,diff:0};const a=t[1]-t[0];for(let u=2;u<t.length;u++)if(t[u]-t[u-1]!==a)return{numbers:t,diff:0};return{numbers:t,diff:a}}function _({selection:e,getValue:n,setValues:t}){const[a,u]=r.useState(null),[x,f]=r.useState([]),[C,d]=r.useState(!1),[k,i]=r.useState(null),l=r.useCallback(s=>{u(s),d(!0),f([]),i(null)},[]),M=r.useCallback(s=>{if(!C||!e.start)return;const y=L(e);if(!y.start||!y.end)return;i(s);const h={row:Math.min(y.start.row,s.row),col:Math.min(y.start.col,s.col)},p={row:Math.max(y.end.row,s.row),col:Math.max(y.end.col,s.col)},T=[];for(let N=h.row;N<=p.row;N++)for(let c=h.col;c<=p.col;c++)N>=y.start.row&&N<=y.end.row&&c>=y.start.col&&c<=y.end.col||T.push({row:N,col:c});f(T)},[C,e]),w=r.useCallback(()=>{if(!e.start||x.length===0||!k){u(null),f([]),d(!1),i(null);return}const s=L(e);if(!s.start||!s.end){u(null),f([]),d(!1),i(null);return}const y=[],h=s.start,p=s.end,T=p.row-h.row+1,N=p.col-h.col+1;x.forEach(c=>{let I,z;if(c.row<h.row){const F=h.row-c.row;I=p.row-(F-1)%T}else if(c.row>p.row){const F=c.row-p.row;I=h.row+(F-1)%T}else I=c.row;if(c.col<h.col){const F=h.col-c.col;z=p.col-(F-1)%N}else if(c.col>p.col){const F=c.col-p.col;z=h.col+(F-1)%N}else z=c.col;let H=n({row:I,col:z});if(c.row!==I&&c.col>=h.col&&c.col<=p.col){const F=[];for(let v=h.row;v<=p.row;v++)F.push(n({row:v,col:c.col}));const E=X(F);if(E&&E.diff!==0){if(c.row>p.row){const v=c.row-p.row;H=String(E.numbers[E.numbers.length-1]+E.diff*v)}else if(c.row<h.row){const v=h.row-c.row;H=String(E.numbers[0]-E.diff*v)}}}if(c.col!==z&&c.row>=h.row&&c.row<=p.row){const F=[];for(let v=h.col;v<=p.col;v++)F.push(n({row:c.row,col:v}));const E=X(F);if(E&&E.diff!==0){if(c.col>p.col){const v=c.col-p.col;H=String(E.numbers[E.numbers.length-1]+E.diff*v)}else if(c.col<h.col){const v=h.col-c.col;H=String(E.numbers[0]-E.diff*v)}}}y.push({coord:c,value:H})}),y.length>0&&t(y),u(null),f([]),d(!1),i(null)},[e,x,k,n,t]),D=r.useCallback(s=>x.some(y=>y.row===s.row&&y.col===s.col),[x]);return r.useEffect(()=>{const s=()=>{C&&w()};return window.addEventListener("mouseup",s),()=>window.removeEventListener("mouseup",s)},[C,w]),{fillSource:a,fillTargets:x,isDraggingFill:C,isFillTarget:D,handleFillHandleMouseDown:l,handleCellMouseEnterForFill:M,handleFillMouseUp:w}}const le={position:"relative",border:"1px solid #d1d5db",padding:0,height:"28px",minWidth:"80px"},te={width:"100%",height:"100%",padding:"4px",textAlign:"right",fontSize:"12px",boxSizing:"border-box",cursor:"cell",backgroundColor:"transparent",outline:"none",border:"none"},re={position:"absolute",bottom:"-2px",right:"-2px",width:"8px",height:"8px",cursor:"crosshair",zIndex:20,backgroundColor:"#3b82f6"},se={position:"absolute",top:0,left:0,minWidth:"100%",height:"100%",zIndex:30},ce={height:"100%",padding:"4px",textAlign:"right",fontSize:"12px",boxSizing:"border-box",backgroundColor:"#fff",border:"2px solid #3b82f6",outline:"none",minWidth:"100%"},ie={position:"absolute",visibility:"hidden",whiteSpace:"pre",fontSize:"12px",padding:"4px"},ae={backgroundColor:"#dbeafe",outline:"2px solid #3b82f6",outlineOffset:"-2px"},ue={backgroundColor:"#eff6ff"};function Q({coord:e,value:n,isSelected:t,isFillTarget:a,showFillHandle:u,onMouseDown:x,onMouseEnter:f,onChange:C,onFillHandleMouseDown:d,styles:k}){const[i,l]=r.useState(!1),[M,w]=r.useState(!1),[D,s]=r.useState(null),y=r.useRef(null),h=r.useRef(null),p=r.useRef(null),T=r.useRef(null);r.useLayoutEffect(()=>{if(i&&p.current&&T.current){const o=p.current.offsetWidth,m=T.current.offsetWidth;s(Math.max(o+16,m))}},[i,n]),r.useEffect(()=>{i&&h.current?(h.current.focus(),M&&(h.current.select(),w(!1))):t&&!i&&y.current&&y.current.focus()},[t,i,M]),r.useEffect(()=>{!t&&i&&(l(!1),s(null))},[t,i]);const N=o=>{C(e,o.target.value)},c=o=>{o.target.classList.contains("fill-handle")||x(e)},I=()=>{l(!0),w(!0)},z=()=>{l(!1)},H=o=>{i?(o.key==="Enter"||o.key==="Escape")&&l(!1):o.key==="Enter"?(o.preventDefault(),l(!0),w(!0)):o.key.length===1&&!o.ctrlKey&&!o.metaKey&&(o.preventDefault(),C(e,o.key),l(!0))},F=o=>{o.stopPropagation(),o.preventDefault(),d(e)},E=!!k?.selected,v=!!k?.fillTarget,B=!!k?.fillHandle,A={...le,...t&&!E?ae:{},...a&&!v?ue:{}},j={...re,...B?{backgroundColor:void 0}:{}},O={...te,overflow:"hidden",textOverflow:"ellipsis"};return b.jsxs("td",{ref:T,className:G(k?.cell,t&&k?.selected,a&&k?.fillTarget),style:A,onMouseDown:c,onMouseEnter:()=>f(e),onDoubleClick:I,children:[b.jsx("input",{ref:y,type:"text",value:n,readOnly:!0,onChange:N,onKeyDown:H,style:O,tabIndex:i?-1:0}),i&&b.jsx("div",{style:se,children:b.jsx("input",{ref:h,type:"text",value:n,onChange:N,onBlur:z,onKeyDown:H,style:{...ce,width:D??"100%"}})}),i&&b.jsx("span",{ref:p,style:ie,children:n}),u&&b.jsx("div",{className:G("fill-handle",k?.fillHandle),style:j,onMouseDown:F})]})}const fe={outline:"none",overflowX:"auto"},de={borderCollapse:"collapse",fontSize:"12px",userSelect:"none"},we={position:"sticky",left:0,zIndex:10,border:"1px solid #d1d5db",padding:"6px 8px",textAlign:"center",fontWeight:500},he={border:"1px solid #d1d5db",padding:"6px 4px",textAlign:"center",fontWeight:500},pe={border:"1px solid #d1d5db",padding:"4px",textAlign:"center",fontWeight:500,fontSize:"11px"},me={backgroundColor:"#f3f4f6"},be={backgroundColor:"#dbeafe",color:"#1d4ed8"},Ce={backgroundColor:"#f9fafb"};function ye({data:e,onChange:n,rowHeaders:t,colHeaders:a,className:u,rowHeaderTitle:x="",styles:f}){const C=r.useRef(null),d=e.length,k=r.useMemo(()=>a?a.reduce((o,m)=>o+m.headers.length,0):e[0]?.length??0,[a,e]),i=r.useMemo(()=>a?a.flatMap(o=>o.headers):[],[a]),l=r.useMemo(()=>{if(!t)return null;const o=[];return t.forEach((m,S)=>{m.headers.forEach((R,W)=>{o.push({groupIndex:S,isFirstInGroup:W===0,groupLabel:m.label,groupRowCount:m.headers.length,rowHeader:R,groupClassName:m.className,groupDescription:m.description})})}),o},[t]),M=r.useCallback(o=>o.row<0||o.row>=d||o.col<0||o.col>=k?"":e[o.row]?.[o.col]??"",[e,d,k]),w=r.useCallback((o,m)=>{const S=e.map((R,W)=>W===o.row?R.map((K,U)=>U===o.col?m:K):R);n(S)},[e,n]),D=r.useCallback(o=>{if(o.length===0)return;const m=e.map(S=>[...S]);o.forEach(({coord:S,value:R})=>{S.row>=0&&S.row<d&&S.col>=0&&S.col<k&&(m[S.row][S.col]=R)}),n(m)},[e,n,d,k]),{selection:s,isSelecting:y,isCellSelected:h,handleCellMouseDown:p,handleCellMouseEnter:T,setSelection:N}=$({containerRef:C}),{handleKeyDown:c}=J({selection:s,getValue:M,setValues:D,setSelection:N,rowCount:d,colCount:k}),{isDraggingFill:I,isFillTarget:z,handleFillHandleMouseDown:H,handleCellMouseEnterForFill:F}=_({selection:s,getValue:M,setValues:D}),E=r.useCallback(o=>{I?F(o):y&&T(o)},[I,y,F,T]),v=r.useCallback((o,m)=>{w(o,m)},[w]),B=r.useCallback(o=>{if(!s.start)return!1;const m=L(s);return!m.start||!m.end?!1:o.row===m.end.row&&o.col===m.end.col},[s]),A=o=>({...we,...!o&&!f?.rowHeader?me:{}}),j=o=>({...he,...!o&&!f?.colGroup?be:{}}),O=o=>({...pe,...!o&&!f?.colHeader?Ce:{}});return b.jsx("div",{ref:C,className:u,style:fe,tabIndex:0,onKeyDown:c,children:b.jsxs("table",{style:de,children:[b.jsxs("thead",{children:[a&&b.jsxs("tr",{children:[t&&b.jsx("th",{colSpan:2,className:f?.rowHeader,style:A(),children:x}),a.map((o,m)=>b.jsx("th",{colSpan:o.headers.length,className:G(f?.colGroup,o.className),style:j(o.className),title:o.description,children:o.label},m))]}),a&&b.jsxs("tr",{children:[t&&b.jsx("th",{colSpan:2,className:f?.rowHeader,style:A()}),i.map(o=>b.jsx("th",{className:G(f?.colHeader,o.className),style:O(o.className),title:o.description,children:o.label},o.key))]})]}),b.jsx("tbody",{children:e.map((o,m)=>{const S=l?.[m];return b.jsxs("tr",{children:[S&&b.jsxs(b.Fragment,{children:[S.isFirstInGroup&&b.jsx("td",{rowSpan:S.groupRowCount,className:G(f?.rowHeader,S.groupClassName),style:A(S.groupClassName),title:S.groupDescription,children:S.groupLabel}),b.jsx("td",{className:G(f?.rowHeader,S.rowHeader.className),style:A(S.rowHeader.className),title:S.rowHeader.description,children:S.rowHeader.label})]}),o.map((R,W)=>{const K={row:m,col:W},U=h(K),xe=z(K),ke=B(K);return b.jsx(Q,{coord:K,value:M(K),isSelected:U,isFillTarget:xe,showFillHandle:ke&&!I,onMouseDown:p,onMouseEnter:E,onChange:v,onFillHandleMouseDown:H,styles:f},W)})]},m)})})]})})}function Se(e){const n=typeof e=="string"?parseFloat(e.replace(/,/g,"")):e;return isNaN(n)?"0":new Intl.NumberFormat("ko-KR").format(n)}function ge(e){const n=parseInt(e.replace(/,/g,""),10);return isNaN(n)?0:n}g.ExcelGrid=ye,g.GridCell=Q,g.cn=G,g.coordToKey=Y,g.formatCurrency=Se,g.getCellsInRange=ee,g.getFillTargetCells=oe,g.isCellInRange=q,g.keyToCoord=Z,g.normalizeRange=L,g.parseCurrency=ge,g.parseTSV=V,g.toTSV=P,g.useGridClipboard=J,g.useGridDragFill=_,g.useGridSelection=$,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})}));
|
|
1
|
+
(function(k,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],p):(k=typeof globalThis<"u"?globalThis:k||self,p(k.ReactExcelLite={},k.ReactJsxRuntime,k.React))})(this,(function(k,p,r){"use strict";function K(...e){return e.filter(Boolean).join(" ")}function oe(e){return`${e.row}-${e.col}`}function ne(e){const[o,l]=e.split("-").map(Number);return{row:o,col:l}}function le(e,o){if(!e||!o)return e?[e]:[];const l=Math.min(e.row,o.row),i=Math.max(e.row,o.row),u=Math.min(e.col,o.col),S=Math.max(e.col,o.col),f=[];for(let b=l;b<=i;b++)for(let m=u;m<=S;m++)f.push({row:b,col:m});return f}function $(e,o){if(!o.start)return!1;const l=o.end||o.start,i=Math.min(o.start.row,l.row),u=Math.max(o.start.row,l.row),S=Math.min(o.start.col,l.col),f=Math.max(o.start.col,l.col);return e.row>=i&&e.row<=u&&e.col>=S&&e.col<=f}function J(e){return e.split(/\r?\n/).filter(o=>o.trim()).map(o=>o.split(" ").map(l=>l.trim()))}function X(e){return e.map(o=>o.join(" ")).join(`
|
|
2
|
+
`)}function A(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 te(e,o){if(e.row===o.row&&e.col===o.col)return[];const l=Math.min(e.row,o.row),i=Math.max(e.row,o.row),u=Math.min(e.col,o.col),S=Math.max(e.col,o.col),f=[];for(let b=l;b<=i;b++)for(let m=u;m<=S;m++)b===e.row&&m===e.col||f.push({row:b,col:m});return f}function _({containerRef:e}){const[o,l]=r.useState({start:null,end:null}),[i,u]=r.useState(!1),S=r.useCallback(w=>{l({start:w,end:w}),u(!0)},[]),f=r.useCallback(w=>{i&&l(n=>({...n,end:w}))},[i]),b=r.useCallback(()=>{u(!1)},[]),m=r.useCallback(()=>{l({start:null,end:null}),u(!1)},[]),M=r.useCallback(w=>$(w,o),[o]);return r.useEffect(()=>{const w=()=>{i&&u(!1)};return window.addEventListener("mouseup",w),()=>window.removeEventListener("mouseup",w)},[i]),r.useEffect(()=>{const w=n=>{e.current&&!e.current.contains(n.target)&&m()};return document.addEventListener("mousedown",w),()=>document.removeEventListener("mousedown",w)},[e,m]),{selection:o,isSelecting:i,isCellSelected:M,handleCellMouseDown:S,handleCellMouseEnter:f,handleMouseUp:b,clearSelection:m,setSelection:l}}function Q({selection:e,getValue:o,setValues:l,setSelection:i,rowCount:u,colCount:S}){const f=r.useCallback(()=>{const n=A(e);if(!n.start||!n.end)return[];const g=[];for(let d=n.start.row;d<=n.end.row;d++){const D=[];for(let c=n.start.col;c<=n.end.col;c++)D.push(o({row:d,col:c}));g.push(D)}return g},[e,o]),b=r.useCallback(async()=>{const n=f();if(n.length===0)return;const g=X(n);try{await navigator.clipboard.writeText(g)}catch(d){console.error("Clipboard copy failed:",d)}},[f]),m=r.useCallback(async()=>{if(e.start)try{const n=await navigator.clipboard.readText(),g=J(n);if(g.length===0)return;const d=e.start.row,D=e.start.col,c=[];g.forEach((C,h)=>{const a=d+h;a>=u||C.forEach((I,T)=>{const s=D+T;s>=S||c.push({coord:{row:a,col:s},value:I})})}),c.length>0&&l(c)}catch(n){console.error("Clipboard paste failed:",n)}},[e.start,l,u,S]),M=r.useCallback(()=>{const n=A(e);if(!n.start||!n.end)return;const g=[];for(let d=n.start.row;d<=n.end.row;d++)for(let D=n.start.col;D<=n.end.col;D++)g.push({coord:{row:d,col:D},value:""});g.length>0&&l(g)},[e,l]),w=r.useCallback(n=>{if(!(n.target instanceof HTMLInputElement&&!n.target.readOnly)){if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(n.key)){n.preventDefault();const d=A(e).start??{row:0,col:0};let D=d.row,c=d.col;switch(n.key){case"ArrowUp":D=Math.max(0,d.row-1);break;case"ArrowDown":D=Math.min(u-1,d.row+1);break;case"ArrowLeft":c=Math.max(0,d.col-1);break;case"ArrowRight":c=Math.min(S-1,d.col+1);break}i({start:{row:D,col:c},end:{row:D,col:c}});return}(n.ctrlKey||n.metaKey)&&n.key==="c"&&(n.preventDefault(),b()),(n.ctrlKey||n.metaKey)&&n.key==="v"&&(n.preventDefault(),m()),(n.key==="Backspace"||n.key==="Delete")&&(n.preventDefault(),M())}},[b,m,M,e,i,u,S]);return{handleCopy:b,handlePaste:m,handleKeyDown:w}}function re(e){if(e.trim()==="")return null;const o=Number(e);return isNaN(o)?null:o}function Y(e){if(e.length===0)return null;const o=e.map(re);if(o.some(u=>u===null))return null;const l=o;if(l.length===1)return{numbers:l,diff:0};const i=l[1]-l[0];for(let u=2;u<l.length;u++)if(l[u]-l[u-1]!==i)return{numbers:l,diff:0};return{numbers:l,diff:i}}function Z({selection:e,getValue:o,setValues:l}){const[i,u]=r.useState(null),[S,f]=r.useState([]),[b,m]=r.useState(!1),[M,w]=r.useState(null),n=r.useCallback(c=>{u(c),m(!0),f([]),w(null)},[]),g=r.useCallback(c=>{if(!b||!e.start)return;const C=A(e);if(!C.start||!C.end)return;w(c);const h={row:Math.min(C.start.row,c.row),col:Math.min(C.start.col,c.col)},a={row:Math.max(C.end.row,c.row),col:Math.max(C.end.col,c.col)},I=[];for(let T=h.row;T<=a.row;T++)for(let s=h.col;s<=a.col;s++)T>=C.start.row&&T<=C.end.row&&s>=C.start.col&&s<=C.end.col||I.push({row:T,col:s});f(I)},[b,e]),d=r.useCallback(()=>{if(!e.start||S.length===0||!M){u(null),f([]),m(!1),w(null);return}const c=A(e);if(!c.start||!c.end){u(null),f([]),m(!1),w(null);return}const C=[],h=c.start,a=c.end,I=a.row-h.row+1,T=a.col-h.col+1;S.forEach(s=>{let G,z;if(s.row<h.row){const E=h.row-s.row;G=a.row-(E-1)%I}else if(s.row>a.row){const E=s.row-a.row;G=h.row+(E-1)%I}else G=s.row;if(s.col<h.col){const E=h.col-s.col;z=a.col-(E-1)%T}else if(s.col>a.col){const E=s.col-a.col;z=h.col+(E-1)%T}else z=s.col;let L=o({row:G,col:z});if(s.row!==G&&s.col>=h.col&&s.col<=a.col){const E=[];for(let N=h.row;N<=a.row;N++)E.push(o({row:N,col:s.col}));const F=Y(E);if(F&&F.diff!==0){if(s.row>a.row){const N=s.row-a.row;L=String(F.numbers[F.numbers.length-1]+F.diff*N)}else if(s.row<h.row){const N=h.row-s.row;L=String(F.numbers[0]-F.diff*N)}}}if(s.col!==z&&s.row>=h.row&&s.row<=a.row){const E=[];for(let N=h.col;N<=a.col;N++)E.push(o({row:s.row,col:N}));const F=Y(E);if(F&&F.diff!==0){if(s.col>a.col){const N=s.col-a.col;L=String(F.numbers[F.numbers.length-1]+F.diff*N)}else if(s.col<h.col){const N=h.col-s.col;L=String(F.numbers[0]-F.diff*N)}}}C.push({coord:s,value:L})}),C.length>0&&l(C),u(null),f([]),m(!1),w(null)},[e,S,M,o,l]),D=r.useCallback(c=>S.some(C=>C.row===c.row&&C.col===c.col),[S]);return r.useEffect(()=>{const c=()=>{b&&d()};return window.addEventListener("mouseup",c),()=>window.removeEventListener("mouseup",c)},[b,d]),{fillSource:i,fillTargets:S,isDraggingFill:b,isFillTarget:D,handleFillHandleMouseDown:n,handleCellMouseEnterForFill:g,handleFillMouseUp:d}}const se={position:"relative",border:"1px solid #d1d5db",padding:0,height:"28px",minWidth:"80px"},ce={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"},ae={position:"absolute",top:0,left:0,minWidth:"100%",height:"100%",zIndex:30},ue={height:"100%",padding:"4px",textAlign:"right",fontSize:"12px",boxSizing:"border-box",backgroundColor:"#fff",border:"2px solid #3b82f6",outline:"none",minWidth:"100%"},fe={position:"absolute",visibility:"hidden",whiteSpace:"pre",fontSize:"12px",padding:"4px"},de={backgroundColor:"#dbeafe",outline:"2px solid #3b82f6",outlineOffset:"-2px"},we={backgroundColor:"#eff6ff"};function ee({coord:e,value:o,isSelected:l,isFillTarget:i,showFillHandle:u,onMouseDown:S,onMouseEnter:f,onChange:b,onFillHandleMouseDown:m,styles:M,cellClassName:w}){const[n,g]=r.useState(!1),[d,D]=r.useState(!1),[c,C]=r.useState(null),h=r.useRef(null),a=r.useRef(null),I=r.useRef(null),T=r.useRef(null);r.useLayoutEffect(()=>{if(n&&I.current&&T.current){const v=I.current.offsetWidth,V=T.current.offsetWidth;C(Math.max(v+16,V))}},[n,o]),r.useEffect(()=>{n&&a.current?(a.current.focus(),d&&(a.current.select(),D(!1))):l&&!n&&h.current&&h.current.focus()},[l,n,d]),r.useEffect(()=>{!l&&n&&(g(!1),C(null))},[l,n]);const s=v=>{b(e,v.target.value)},G=v=>{v.target.classList.contains("fill-handle")||S(e)},z=()=>{g(!0),D(!0)},L=()=>{g(!1)},E=v=>{n?(v.key==="Enter"||v.key==="Escape")&&g(!1):v.key==="Enter"?(v.preventDefault(),g(!0),D(!0)):v.key.length===1&&!v.ctrlKey&&!v.metaKey&&(v.preventDefault(),b(e,v.key),g(!0))},F=v=>{v.stopPropagation(),v.preventDefault(),m(e)},N=!!M?.selected,j=!!M?.fillTarget,O=!!M?.fillHandle,U={...se,...l&&!N?de:{},...i&&!j?we:{}},q={...ie,...O?{backgroundColor:void 0}:{}},W={...ce,overflow:"hidden",textOverflow:"ellipsis"};return p.jsxs("td",{ref:T,className:K(M?.cell,l&&M?.selected,i&&M?.fillTarget,w),style:U,onMouseDown:G,onMouseEnter:()=>f(e),onDoubleClick:z,children:[p.jsx("input",{ref:h,type:"text",value:o,readOnly:!0,onChange:s,onKeyDown:E,style:W,tabIndex:n?-1:0}),n&&p.jsx("div",{style:ae,children:p.jsx("input",{ref:a,type:"text",value:o,onChange:s,onBlur:L,onKeyDown:E,style:{...ue,width:c??"100%"}})}),n&&p.jsx("span",{ref:I,style:fe,children:o}),u&&p.jsx("div",{className:K("fill-handle",M?.fillHandle),style:q,onMouseDown:F})]})}const he={outline:"none",overflowX:"auto"},pe={borderCollapse:"collapse",fontSize:"12px",userSelect:"none"},me={position:"sticky",left:0,zIndex:10,border:"1px solid #d1d5db",padding:"6px 8px",textAlign:"center",fontWeight:500},be={border:"1px solid #d1d5db",padding:"6px 4px",textAlign:"center",fontWeight:500},Ce={border:"1px solid #d1d5db",padding:"4px",textAlign:"center",fontWeight:500,fontSize:"11px"},ye={backgroundColor:"#f3f4f6"},Se={backgroundColor:"#dbeafe",color:"#1d4ed8"},ge={backgroundColor:"#f9fafb"};function xe({data:e,onChange:o,rowHeaders:l,colHeaders:i,className:u,rowHeaderTitle:S="",styles:f,cellStyles:b}){const m=r.useRef(null),M=e.length,w=r.useMemo(()=>i?i.reduce((t,y)=>t+y.headers.length,0):e[0]?.length??0,[i,e]),n=r.useMemo(()=>i?i.flatMap(t=>t.headers):[],[i]),g=r.useMemo(()=>i?i.some(t=>t.label!==void 0):!1,[i]),d=r.useMemo(()=>l?l.some(t=>t.label!==void 0):!1,[l]),D=r.useMemo(()=>{if(!l)return null;const t=[];return l.forEach((y,x)=>{y.headers.forEach((H,B)=>{t.push({groupIndex:x,isFirstInGroup:B===0,groupLabel:y.label,groupRowCount:y.headers.length,rowHeader:H,groupClassName:y.className,groupDescription:y.description})})}),t},[l]),c=r.useCallback(t=>t.row<0||t.row>=M||t.col<0||t.col>=w?"":e[t.row]?.[t.col]??"",[e,M,w]),C=r.useCallback((t,y)=>{const x=e.map((H,B)=>B===t.row?H.map((R,P)=>P===t.col?y:R):H);o(x)},[e,o]),h=r.useCallback(t=>{if(t.length===0)return;const y=e.map(x=>[...x]);t.forEach(({coord:x,value:H})=>{x.row>=0&&x.row<M&&x.col>=0&&x.col<w&&(y[x.row][x.col]=H)}),o(y)},[e,o,M,w]),{selection:a,isSelecting:I,isCellSelected:T,handleCellMouseDown:s,handleCellMouseEnter:G,setSelection:z}=_({containerRef:m}),{handleKeyDown:L}=Q({selection:a,getValue:c,setValues:h,setSelection:z,rowCount:M,colCount:w}),{isDraggingFill:E,isFillTarget:F,handleFillHandleMouseDown:N,handleCellMouseEnterForFill:j}=Z({selection:a,getValue:c,setValues:h}),O=r.useCallback(t=>{E?j(t):I&&G(t)},[E,I,j,G]),U=r.useCallback((t,y)=>{C(t,y)},[C]),q=r.useCallback(t=>{if(!a.start)return!1;const y=A(a);return!y.start||!y.end?!1:t.row===y.end.row&&t.col===y.end.col},[a]),W=t=>({...me,...!t&&!f?.rowHeader?ye:{}}),v=t=>({...be,...!t&&!f?.colGroup?Se:{}}),V=t=>({...Ce,...!t&&!f?.colHeader?ge:{}});return p.jsx("div",{ref:m,className:u,style:he,tabIndex:0,onKeyDown:L,children:p.jsxs("table",{style:pe,children:[p.jsxs("thead",{children:[i&&g&&p.jsxs("tr",{children:[l&&p.jsx("th",{colSpan:d?2:1,className:f?.rowHeader,style:W(),children:S}),i.map((t,y)=>p.jsx("th",{colSpan:t.headers.length,className:K(f?.colGroup,t.className),style:v(t.className),title:t.description,children:t.label??""},y))]}),i&&p.jsxs("tr",{children:[l&&p.jsx("th",{colSpan:d?2:1,className:f?.rowHeader,style:W(),children:!g&&S}),n.map(t=>p.jsx("th",{className:K(f?.colHeader,t.className),style:V(t.className),title:t.description,children:t.label},t.key))]})]}),p.jsx("tbody",{children:e.map((t,y)=>{const x=D?.[y];return p.jsxs("tr",{children:[x&&p.jsxs(p.Fragment,{children:[d&&x.isFirstInGroup&&p.jsx("td",{rowSpan:x.groupRowCount,className:K(f?.rowHeader,x.groupClassName),style:W(x.groupClassName),title:x.groupDescription,children:x.groupLabel??""}),p.jsx("td",{className:K(f?.rowHeader,x.rowHeader.className),style:W(x.rowHeader.className),title:x.rowHeader.description,children:x.rowHeader.label})]}),t.map((H,B)=>{const R={row:y,col:B},P=T(R),De=F(R),Ee=q(R),ve=b?.(R);return p.jsx(ee,{coord:R,value:c(R),isSelected:P,isFillTarget:De,showFillHandle:Ee&&!E,onMouseDown:s,onMouseEnter:O,onChange:U,onFillHandleMouseDown:N,styles:f,cellClassName:ve},B)})]},y)})})]})})}function ke(e){const o=typeof e=="string"?parseFloat(e.replace(/,/g,"")):e;return isNaN(o)?"0":new Intl.NumberFormat("ko-KR").format(o)}function Me(e){const o=parseInt(e.replace(/,/g,""),10);return isNaN(o)?0:o}k.ExcelGrid=xe,k.GridCell=ee,k.cn=K,k.coordToKey=oe,k.formatCurrency=ke,k.getCellsInRange=le,k.getFillTargetCells=te,k.isCellInRange=$,k.keyToCoord=ne,k.normalizeRange=A,k.parseCurrency=Me,k.parseTSV=J,k.toTSV=X,k.useGridClipboard=Q,k.useGridDragFill=Z,k.useGridSelection=_,Object.defineProperty(k,Symbol.toStringTag,{value:"Module"})}));
|
package/dist/types.d.ts
CHANGED
|
@@ -26,7 +26,7 @@ export interface Header {
|
|
|
26
26
|
* Header group
|
|
27
27
|
*/
|
|
28
28
|
export interface HeaderGroup {
|
|
29
|
-
label
|
|
29
|
+
label?: string;
|
|
30
30
|
headers: Header[];
|
|
31
31
|
description?: string;
|
|
32
32
|
/** Custom class name for this group header */
|
|
@@ -70,6 +70,8 @@ export interface ExcelGridProps {
|
|
|
70
70
|
rowHeaderTitle?: string;
|
|
71
71
|
/** Style configuration */
|
|
72
72
|
styles?: GridStyles;
|
|
73
|
+
/** Function to apply custom className to specific cells */
|
|
74
|
+
cellStyles?: (coord: CellCoord) => string | undefined;
|
|
73
75
|
}
|
|
74
76
|
/**
|
|
75
77
|
* Cell component Props
|
|
@@ -86,5 +88,7 @@ export interface GridCellProps {
|
|
|
86
88
|
onFillHandleMouseDown: (coord: CellCoord) => void;
|
|
87
89
|
/** Cell styles */
|
|
88
90
|
styles?: Pick<GridStyles, "cell" | "selected" | "fillTarget" | "fillHandle">;
|
|
91
|
+
/** Custom className for this specific cell */
|
|
92
|
+
cellClassName?: string;
|
|
89
93
|
}
|
|
90
94
|
//# sourceMappingURL=types.d.ts.map
|
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,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,EAAE,MAAM,CAAC;
|
|
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;IACpB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,MAAM,GAAG,SAAS,CAAC;CACvD;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;IAC7E,8CAA8C;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-excel-lite",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.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",
|