Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

fin-ui-grid

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

fin-ui-grid - npm Package Compare versions

Comparing version 0.1.9 to 0.1.10

8

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log

## [0.1.10](https://github.com/dtassone/fin-ui-demo/compare/v0.1.9...v0.1.10) (2020-04-23)
**Note:** Version bump only for package fin-ui-grid
## [0.1.9](https://github.com/dtassone/fin-ui-demo/compare/v0.1.8...v0.1.9) (2020-04-23)

@@ -8,0 +16,0 @@

1

dist/index-cjs.js

@@ -32,2 +32,3 @@ "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),r=e(t),n=e(require("styled-components")),o=require("events"),l=e(require("lodash-es/debounce")),i=e(require("lodash-es/isEqual")),s=e(require("react-virtualized-auto-sizer"));const c=r.memo(({value:e,field:t,width:n,children:o,showRightBorder:l})=>{let i="material-cell";return l&&(i+=" with-border"),r.createElement("div",{className:i,"data-value":e,"data-field":t,style:{minWidth:n,maxWidth:n}},null==e?o:e)});c.displayName="GridCell";const a=r.memo(({width:e})=>e?r.createElement(c,{key:"empty-col-left",width:e}):null);a.displayName="LeftEmptyCell";const u=r.memo(({width:e})=>e?r.createElement(c,{key:"empty-col-right",width:e}):null);u.displayName="RightEmptyCell";const d=r.forwardRef(({columns:e,hasScrollX:t},n)=>{const o="material-col-cell-wrapper "+(t?"scroll":"");return r.createElement("div",{ref:n,className:o,key:"columns"},e.map(e=>r.createElement("div",{className:"material-col-cell",key:e.field,style:{width:e.width,minWidth:e.width,maxWidth:e.width}},e.headerName||e.field)))});

`,f=(e,t)=>{const{className:n,children:o}=e,l=g(e,["className","children"]);return r.createElement(h,Object.assign({className:"overlay "+(n||"")},l),r.createElement("div",{className:"content"},o))};f.displayName="GridOverlay";const p=()=>r.createElement(f,null,"No Rows"),m=r.createContext(null),w=r.forwardRef(({height:e,width:t,children:n},o)=>r.createElement("div",{ref:o,className:"rendering-zone",style:{maxHeight:e,width:t}},n));w.displayName="RenderingZone";const b=r.memo(({selected:e,id:t,className:n,children:o})=>{const l=(e?"selected ":" ")+(n||"");return r.createElement("div",{key:t,"data-id":t,className:"material-row "+l},o)});b.displayName="Row";const x=r.memo(e=>{const{scrollSize:t,hasScroll:n,lastColIdx:o,firstColIdx:l,columns:i,row:s}=e,a=i.slice(l,o+1).map((o,a)=>{const u=l+a===i.length-1,d=u&&n.y&&n.x?o.width-t:o.width,g=u&&n.x&&!n.y,h=u?!g&&!e.extendRowFullWidth:e.showCellRightBorder;return r.createElement(c,{key:o.field,value:s.data[o.field],field:o.field,width:d,showRightBorder:h})});return r.createElement(r.Fragment,null,a)});x.displayName="RowCells";const v=r.memo(({height:e,width:t,children:n})=>r.createElement("div",{className:"viewport",style:{minWidth:t,maxWidth:t,minHeight:e,maxHeight:e}},n));v.displayName="StickyContainer";const R="production"!==process.env.NODE_ENV,y=()=>{},C={debug:y,info:y,warn:y,error:y};function E(e){return R?(e=>["debug","info","warn","error"].reduce((t,r)=>(t[r]=(...t)=>{const[n,...o]=t;console[r](`[${e}] - ${n}`,...o)},t),{}))(e):C}const S=r.forwardRef(({options:e,rows:n,visibleColumns:o,children:l},i)=>{const s=E("Viewport"),c=t.useContext(m);if(0===n.length)return null;return s.info("Rendering ViewPort"),r.createElement(v,Object.assign({},c.viewportSize),r.createElement(w,Object.assign({ref:i},c.renderingZone),n.slice(c.firstRowIdx,c.lastRowIdx+1).map((t,n)=>r.createElement(b,{className:(c.firstRowIdx+n)%2==0?"even":"odd",key:t.id,id:t.id,selected:t.selected},r.createElement(a,{key:"left-empty",width:c.left}),r.createElement(x,{columns:o,row:t,firstColIdx:c.firstColIdx,lastColIdx:c.lastColIdx,hasScroll:{y:c.hasScrollY,x:c.hasScrollX},scrollSize:c.scrollBarSize,showCellRightBorder:e.showCellRightBorder,extendRowFullWidth:e.extendRowFullWidth}),r.createElement(u,{key:"right-empty",width:c.rightEmptyWidth})))))});S.displayName="Viewport";function k(e,t,r){return l(e,t,r)}function O(e,t){return e.getAttribute("data-"+t)}const N=(e,r,n)=>{const[l,i]=t.useState(!1),[s,c]=t.useState(!1),a=E("useApi");t.useEffect(()=>{n&&(()=>{a.debug("Initialising grid api.");const e=new o.EventEmitter;n.current=e,i(!0)})()},[n]);const u=(e,...t)=>{n&&n.current&&l&&n.current.emit(e,...t)},d=e=>(...t)=>u(e,...t),g=e=>{if(null==e.target)return;const t=e.target;if(function(e){return e&&e.classList.contains("material-cell")}(t)){const e=t.parentElement,r=function(e){return O(e,"id")}(e),o=n.current.getRowFromId(r),l=n.current.getRowIndexFromId(r),i={element:t,field:O(t,"field"),value:O(t,"value"),data:o.data,rowIndex:l},s={element:e,rowModel:o,data:o.data,rowIndex:l};u("cellClicked",i),u("rowClicked",s)}else a.info("Missing header click!")};return t.useEffect(()=>{if(e&&e.current&&l){const t=d("keydown"),r=d("keyup"),o=d("keypress");return e.current.addEventListener("click",g,{capture:!0}),document.addEventListener("keydown",t),document.addEventListener("keyup",r),document.addEventListener("keypress",o),n.current.isInitialised=!0,c(!0),()=>{var l;a.info("Clearing all events listeners"),e.current.removeEventListener("click",g,{capture:!0}),document.removeEventListener("keydown",t),document.removeEventListener("keyup",r),document.removeEventListener("keypress",o),null===(l=n.current)||void 0===l||l.removeAllListeners()}}},[e,l]),t.useEffect(()=>{if(!n||!n.current)return;const e=[];return r.onCellClicked&&(n.current.on("cellClicked",r.onCellClicked),e.push(()=>n.current.removeListener("cellClicked",r.onCellClicked))),r.onRowClicked&&(n.current.on("rowClicked",r.onRowClicked),e.push(()=>n.current.removeListener("rowClicked",r.onRowClicked))),r.onRowSelected&&(n.current.on("rowSelected",r.onRowSelected),e.push(()=>n.current.removeListener("rowSelected",r.onRowSelected))),r.onSelectionChanged&&(n.current.on("selectionChanged",r.onSelectionChanged),e.push(()=>n.current.removeListener("selectionChanged",r.onSelectionChanged))),()=>{a.info("Clearing all subscribed options handlers"),e.forEach(e=>e())}},[r]),s},I={width:200,hide:!1},$={rowHeight:27,headerHeight:34,scrollbarSize:15,columnBuffer:8,enableMultipleSelection:!0,showCellRightBorder:!1,extendRowFullWidth:!0};function j(e){return{id:e.id,data:e,selected:!1}}function z(e){const r=E("useColumns"),n=t.useMemo(()=>(r.debug("Calculating visibleColumns"),e.filter(e=>null!=e.field&&!e.hide).map(e=>Object.assign(Object.assign({},I),e))),[e]),o=t.useMemo(()=>{r.debug("Calculating columnsMeta");let e=0;const t=[];return e=n.reduce((e,r)=>(t.push(e),e+r.width),0),{totalWidth:e,positions:t}},[e]),[l,i]=t.useState({all:e,visible:n,meta:o,hasColumns:e.length>0,hasVisibleColumns:n.length>0});return t.useEffect(()=>{r.debug("Effect columns!!!"),i({all:e,visible:n,meta:o,hasColumns:e.length>0,hasVisibleColumns:n.length>0})},[e]),l}const L=(e,r)=>{const n=E("useContainerProps"),o=t.useRef({width:0,height:0}),l=t.useMemo(()=>r.scrollbarSize,[r]);return t.useCallback((t,i)=>{if(!e||!e.current)return null;n.debug("Calculating container sizes.");const s=e.current.getBoundingClientRect();o.current={width:s.width,height:s.height},n.debug(`window Size - W: ${o.current.width} H: ${o.current.height} `);const c=r.rowHeight,a=o.current.height<i*c,u=t>o.current.width,d=Math.floor((o.current.height-l)/c)-1,g=2*d,h=Math.floor(i/d);n.debug(`windowPageSize: ${d} - PageSize: ${g} - MaxPage: ${h}`);const f=(g+1)*c+(u?l:0),p=t-(a?l:0);n.debug("columnsTotalWidth ",t);const m=h-1>0?h-1:0,w={pageSize:g,windowPageSize:d,hasScrollY:a,hasScrollX:u,scrollBarSize:l,totalWidth:p,totalHeight:(h>1?h*(f/2):i*c)||1,renderingZone:{width:p,height:f},windowSizes:o.current,viewportSize:{width:o.current.width-(a?l:0),height:o.current.height-(u?l:0)},lastPage:m};return n.debug("returning container props",w),w},[e])};function M(e){const r=E("useRafUpdate"),n=t.useRef(0);let o=e;return[(...e)=>{o&&(n.current>0&&(r.debug("Skipping another update"),cancelAnimationFrame(n.current)),n.current=requestAnimationFrame(()=>{o(...e)}))},e=>{o=e}]}function F(e,r=30,n=!0){const o=E("useRafDebouncedState"),[l,s]=t.useState(e),[c,a]=M(),u=t.useRef(l);a(e=>{(n?!i(e,u.current):e!==u.current)?(o.debug("+++++ FORCING RENDER +++++"),o.debug("resetting state "),u.current=e,s(e)):o.debug("Same state as current one")});const d=k(e=>c(e),r);return t.useEffect(()=>()=>{d.cancel()},[]),[l,d]}function W(e){const r=E("useScrollFn"),n=t.useRef(0),o=t.useRef(0),l=t.useRef(),[i]=M(()=>{e.current.style.pointerEvents="unset",o.current=0}),s=k(i,300),c=t.useCallback(t=>{var o;t.left===(null===(o=l.current)||void 0===o?void 0:o.left)&&t.top===l.current.top||e&&e.current&&(n.current=0,r.debug(`Moving ${e.current.className} to: ${t.top}`),"none"!==e.current.style.pointerEvents&&(e.current.style.pointerEvents="none"),e.current.style.transform=`translate(-${t.left}px, -${t.top}px)`,s(),l.current=t)},[e]),[a]=M(c);return t.useEffect(()=>()=>{s.cancel()},[]),a}const H=(e,r,n,o)=>{const l=E("useRows"),i=t.useMemo(()=>r.map(e=>j(e)),[r]),[s,c]=F(i,30,!1),[,a]=t.useState(),[u]=M(()=>a(e=>!e)),d=t.useRef({}),g=t.useRef(i),h=t.useRef(!1),f=e=>h.current=e,p=e=>{l.debug("updating all rows..."),d.current=e.reduce((e,t,r)=>(e[t.id]=r,e),{}),g.current=e,h.current||c(e)};t.useEffect(()=>{l.debug("Rows updated."),p(i)},[r]);const m=e=>d.current[e],w=e=>g.current[m(e)],b=e=>{l.debug("updating row models",e);const t=[];if(e.forEach(e=>{if(null==e.id)throw new Error("All rows need an id.");const r=w(e.id);if(!r)return void t.push(e);const n=Object.assign(Object.assign({},r),e),o=m(e.id);g.current[o]=n,i[o]=n,h.current||u()}),t.length>0){const e=[...g.current,...t];p(e)}},x=e=>{l.debug("updating rows data");const t=e.reduce((e,t)=>(e[t.id]=null!=e[t.id]?Object.assign(Object.assign({},e[t.id]),t):t,e),{}),r=Object.values(t).map(e=>{const t=w(e.id);return t?Object.assign(Object.assign({},t),{data:Object.assign(Object.assign({},t.data),e)}):j(e)});return b(r)};return t.useEffect(()=>{if(o&&o.current){l.debug("Adding row api to apiRef");const e={getRowIndexFromId:m,getRowFromId:w,updateRowModels:b,updateRowData:x,get hasRows(){return g.current.length>0}};o.current=Object.assign(o.current,e);const t=()=>f(!0),r=()=>f(!1);return o.current.on("scrolling:start",t),o.current.on("scrolling:stop",r),()=>{var e,n;null===(e=o.current)||void 0===e||e.removeListener("scrolling:start",t),null===(n=o.current)||void 0===n||n.removeListener("scrolling:stop",r)}}},[o]),s},P=["Meta","Control"],T=e=>P.indexOf(e)>-1,B=(e,r,n,o)=>{const l=E("useSelection"),i=t.useRef([]),s=t.useRef(!1),[,c]=t.useState(),a=()=>i.current.map(e=>o.current.getRowFromId(e)),u=e=>{if(!o||null==o.current)throw"ApiRef should be defined at this stage";if(!o.current.isInitialised)return void(i.current=[e.id]);l.debug("Selecting row "+e.id);const t=o.current.getRowIndexFromId(e.id),r=!s.current||!e.selected;if(s.current?r?i.current=-1===i.current.indexOf(e.id)?[...i.current,e.id]:i.current:i.current.splice(i.current.indexOf(e.id),1):(i.current.forEach(e=>{const t=o.current.getRowFromId(e);o.current.updateRowModels([Object.assign(Object.assign({},t),{selected:!1})])}),i.current=[e.id]),o.current.updateRowModels([Object.assign(Object.assign({},e),{selected:r})]),o&&null!=o.current){const n={data:e.data,isSelected:r,rowIndex:t},l={rows:a().map(e=>e.data)};o.current.emit("rowSelected",n),o.current.emit("selectionChanged",l)}c(e=>!e)},d=e=>{if(o&&o.current)return u(o.current.getRowFromId(e))},g=t=>{if(o&&o.current){if(!e.enableMultipleSelection&&t.length>1)throw new Error("Enable Options.enableMultipleSelection to select more than 1 item");s.current=!0,t.forEach(e=>d(e)),s.current=!1}},h=e=>{u(e.rowModel)},f=t=>{T(t.key)&&e.enableMultipleSelection&&(l.debug("Multiple Select key pressed"),s.current=!0)},p=t=>{T(t.key)&&e.enableMultipleSelection&&(l.debug("Multiple Select key released"),s.current=!1)};t.useEffect(()=>{if(o&&o.current&&n)return l.debug("Binding click event"),o.current.on("rowClicked",h),o.current.on("keydown",f),o.current.on("keyup",p),i.current.forEach(e=>d(e)),()=>{o.current.removeListener("rowClicked",h),o.current.removeListener("keydown",f),o.current.removeListener("keyup",p)}},[n]),t.useEffect(()=>{if(o&&o.current){l.debug("Adding row selection to api");const e={selectRow:d,getSelectedRows:a,selectRows:g};o.current=Object.assign(o.current,e)}},[o])},D=(e,r)=>{const n=E("useVirtualColumns"),o=t.useRef(null),l=t.useRef(0),i=t.useMemo(()=>[...e.meta.positions].reverse(),[e]),s=t.useCallback(t=>{if(!e.hasColumns)return-1;let r=i.findIndex(e=>t>=e);return r=e.meta.positions.length-1-r,r},[e]),c=t.useCallback(t=>e.hasColumns?e.visible[s(t)]:null,[e]);return t.useEffect(()=>{o.current=null},[e,r]),[o,(t,i)=>{var a,u,d,g;if(!t||!e.hasColumns)return!1;const h=t.windowSizes.width;l.current=i,n.debug("first column displayed: ",null===(a=c(i))||void 0===a?void 0:a.headerName),n.debug("last column displayed: ",null===(u=c(i+h))||void 0===u?void 0:u.headerName);const f=s(i),p=s(i+h),m=(null===(d=null==o?void 0:o.current)||void 0===d?void 0:d.firstColIdx)||0,w=(null===(g=null==o?void 0:o.current)||void 0===g?void 0:g.lastColIdx)||0,b=r.columnBuffer,x=Math.floor(b/2),v=Math.abs(f-x-m),R=Math.abs(p+x-w);n.debug(`Column buffer: ${b}, tolerance: ${x}`),n.debug(`Previous values => first: ${m}, last: ${w}`),n.debug(`Current displayed values => first: ${f}, last: ${p}`),n.debug("DIFF last => ",R),n.debug("DIFF first => ",v);const y=R>x||v>x;if(n.debug("RENDER NEW COL STATE ----\x3e ",y),o&&o.current&&!y)return!1;{const l={firstColIdx:f-b>=0?f-b:0,lastColIdx:p+b>=e.visible.length-1?e.visible.length-1:p+b,left:0,rightEmptyWidth:0};return l.left=e.meta.positions[l.firstColIdx],t.hasScrollX?l.rightEmptyWidth=e.meta.totalWidth-e.meta.positions[l.lastColIdx]-e.visible[l.lastColIdx].width:r.extendRowFullWidth&&(l.rightEmptyWidth=t.viewportSize.width-e.meta.totalWidth),o.current=l,n.debug("New columns state to ",l),!0}}]},A=(e,r,n,o,l,i,s)=>{const c=E("useVirtualRows"),a=t.useRef(0),u=t.useRef(0),d=t.useRef(null),g=t.useRef({left:0,top:0}),h=t.useRef(o.meta.totalWidth),f=W(n),p=W(e),m=L(r,i),[w,b]=F(null),[x,v]=D(o,i),R=()=>{const e=d.current,t=x.current,r=(e=>{if(null==d.current)return null;const t=d.current,r=e*t.windowPageSize;let n=r+t.pageSize;return n>u.current-1&&(n=u.current-1),{page:e,firstRowIdx:r,lastRowIdx:n}})(a.current);if(null==e)return null;const n=Object.assign(Object.assign(Object.assign({},e),t),r);return c.debug(":: getRenderCtxState - returning state ",n),n},y=()=>b(R()),C=()=>{if(r&&r.current&&d&&d.current){const e=d.current,{scrollLeft:t,scrollTop:n}=r.current;c.debug(`scrolling Left: ${t} Top: ${n}`);const o=e.renderingZone.height,l=e.renderingZone.width,i=e.windowSizes.height,s=e.windowSizes.width,u=o-i+e.scrollBarSize,h=l-s+e.scrollBarSize,m=n,w=t;c.debug("scrollTop: ",n);let b=m%u;c.debug("First calc rzScrollTop: ",b);const x=w;c.debug(`rzH: ${o} winH: ${i}, maxScrollTop: ${u}, maxScrollLeft: ${h}`),c.debug(`rzScrollLeft: ${x} `);let R=v(e,t);const C={left:x,top:b};let E=Math.floor(m/u),S=!1;if(E>e.lastPage){C.top=u,S=!0,c.debug(`not scrolling to rzScrollTop: ${b}, scrolling to max ${u}`);const e=m-b+u;c.debug("Patching height to ",e),d.current.totalHeight=e,R=!0}else if(E<e.lastPage){const t=(e.lastPage+2)*(e.renderingZone.height/2);c.debug("Patching back height to ",t),t!==d.current.totalHeight&&(d.current.totalHeight=t,R=!0)}const k=a.current;E=E>e.lastPage?e.lastPage:E,c.debug(`state pageNumber ${k}, current is ${E}`),k!==E?(k<E&&!S&&(b=b<=u?0:b%u,C.top=b,c.debug("Resetting rzScrollTop to",b)),a.current=E,R=!0):(f(C),p(Object.assign(Object.assign({},C),{top:0}))),g.current=C,R&&y(),c.debug(`rzScrollTop: ${b} `),c.debug("------------")}};t.useLayoutEffect(()=>{n&&n.current&&(c.debug("applying scrollTop ",g.current),f(g.current),p(Object.assign(Object.assign({},g.current),{top:0})))});const S=()=>{a.current=0,r&&r.current&&r.current.scrollTo(0,0),g.current={left:0,top:0},f({left:0,top:0})},k=()=>{h.current>0?(d.current=m(h.current,u.current),C(),y()):d.current=null},O=t.useRef(0),N=()=>{s&&s.current&&0===O.current&&s.current.emit("scrolling:start"),clearTimeout(O.current),O.current=setTimeout(()=>{O.current=0,s&&s.current&&s.current.emit("scrolling:stop")},300),C()};t.useEffect(()=>{if(S(),h.current=o.meta.totalWidth,k(),r&&r.current)return c.debug("Binding scroll event to window."),r.current.addEventListener("scroll",N),()=>{c.debug("Unbinding scroll event to window."),r.current.removeEventListener("scroll",N)}},[o]),t.useEffect(()=>{c.debug("+++ options or viewportRef changed "),S(),k()},[i,n]),t.useEffect(()=>{l.length!==u.current&&(c.debug("Row length changed to ",l.length),u.current=l.length,k())},[l]);return[w,()=>{c.debug("+++ onResize "),k()}]},G=r.forwardRef((e,t)=>{const{className:n,children:o}=e,l=g(e,["className","children"]);return r.createElement("div",Object.assign({ref:t,className:"columns-container "+(n||"")},l),o)});G.displayName="ColumnsContainer";const V=r.forwardRef((e,t)=>{const{className:n,children:o}=e,l=g(e,["className","children"]);return r.createElement("div",Object.assign({ref:t,className:"data-container "+(n||"")},l),o)});V.displayName="DataContainer";const q=n.div`
box-sizing: border-box;
* {

@@ -34,0 +35,0 @@ box-sizing: border-box;

5

dist/index-esm.js

@@ -31,3 +31,4 @@ import e,{useContext as t,useState as r,useEffect as n,useMemo as o,useRef as l,useCallback as i,useLayoutEffect as c}from"react";import s from"styled-components";import{EventEmitter as a}from"events";import d from"lodash-es/debounce";import u from"lodash-es/isEqual";import g from"react-virtualized-auto-sizer";const h=e.memo(({value:t,field:r,width:n,children:o,showRightBorder:l})=>{let i="material-cell";return l&&(i+=" with-border"),e.createElement("div",{className:i,"data-value":t,"data-field":r,style:{minWidth:n,maxWidth:n}},null==t?o:t)});h.displayName="GridCell";const m=e.memo(({width:t})=>t?e.createElement(h,{key:"empty-col-left",width:t}):null);m.displayName="LeftEmptyCell";const p=e.memo(({width:t})=>t?e.createElement(h,{key:"empty-col-right",width:t}):null);p.displayName="RightEmptyCell";const f=e.forwardRef(({columns:t,hasScrollX:r},n)=>{const o="material-col-cell-wrapper "+(r?"scroll":"");return e.createElement("div",{ref:n,className:o,key:"columns"},t.map(t=>e.createElement("div",{className:"material-col-cell",key:t.field,style:{width:t.width,minWidth:t.width,maxWidth:t.width}},t.headerName||t.field)))});

}
`,v=(t,r)=>{const{className:n,children:o}=t,l=w(t,["className","children"]);return e.createElement(b,Object.assign({className:"overlay "+(n||"")},l),e.createElement("div",{className:"content"},o))};v.displayName="GridOverlay";const x=()=>e.createElement(v,null,"No Rows"),y=e.createContext(null),C=e.forwardRef(({height:t,width:r,children:n},o)=>e.createElement("div",{ref:o,className:"rendering-zone",style:{maxHeight:t,width:r}},n));C.displayName="RenderingZone";const R=e.memo(({selected:t,id:r,className:n,children:o})=>{const l=(t?"selected ":" ")+(n||"");return e.createElement("div",{key:r,"data-id":r,className:"material-row "+l},o)});R.displayName="Row";const S=e.memo(t=>{const{scrollSize:r,hasScroll:n,lastColIdx:o,firstColIdx:l,columns:i,row:c}=t,s=i.slice(l,o+1).map((o,s)=>{const a=l+s===i.length-1,d=a&&n.y&&n.x?o.width-r:o.width,u=a&&n.x&&!n.y,g=a?!u&&!t.extendRowFullWidth:t.showCellRightBorder;return e.createElement(h,{key:o.field,value:c.data[o.field],field:o.field,width:d,showRightBorder:g})});return e.createElement(e.Fragment,null,s)});S.displayName="RowCells";const E=e.memo(({height:t,width:r,children:n})=>e.createElement("div",{className:"viewport",style:{minWidth:r,maxWidth:r,minHeight:t,maxHeight:t}},n));E.displayName="StickyContainer";const k="production"!==process.env.NODE_ENV,N=()=>{},O={debug:N,info:N,warn:N,error:N};function I(e){return k?(e=>["debug","info","warn","error"].reduce((t,r)=>(t[r]=(...t)=>{const[n,...o]=t;console[r](`[${e}] - ${n}`,...o)},t),{}))(e):O}const $=e.forwardRef(({options:r,rows:n,visibleColumns:o,children:l},i)=>{const c=I("Viewport"),s=t(y);if(0===n.length)return null;return c.info("Rendering ViewPort"),e.createElement(E,Object.assign({},s.viewportSize),e.createElement(C,Object.assign({ref:i},s.renderingZone),n.slice(s.firstRowIdx,s.lastRowIdx+1).map((t,n)=>e.createElement(R,{className:(s.firstRowIdx+n)%2==0?"even":"odd",key:t.id,id:t.id,selected:t.selected},e.createElement(m,{key:"left-empty",width:s.left}),e.createElement(S,{columns:o,row:t,firstColIdx:s.firstColIdx,lastColIdx:s.lastColIdx,hasScroll:{y:s.hasScrollY,x:s.hasScrollX},scrollSize:s.scrollBarSize,showCellRightBorder:r.showCellRightBorder,extendRowFullWidth:r.extendRowFullWidth}),e.createElement(p,{key:"right-empty",width:s.rightEmptyWidth})))))});$.displayName="Viewport";function j(e,t,r){return d(e,t,r)}function z(e,t){return e.getAttribute("data-"+t)}const L=(e,t,o)=>{const[l,i]=r(!1),[c,s]=r(!1),d=I("useApi");n(()=>{o&&(()=>{d.debug("Initialising grid api.");const e=new a;o.current=e,i(!0)})()},[o]);const u=(e,...t)=>{o&&o.current&&l&&o.current.emit(e,...t)},g=e=>(...t)=>u(e,...t),h=e=>{if(null==e.target)return;const t=e.target;if(function(e){return e&&e.classList.contains("material-cell")}(t)){const e=t.parentElement,r=function(e){return z(e,"id")}(e),n=o.current.getRowFromId(r),l=o.current.getRowIndexFromId(r),i={element:t,field:z(t,"field"),value:z(t,"value"),data:n.data,rowIndex:l},c={element:e,rowModel:n,data:n.data,rowIndex:l};u("cellClicked",i),u("rowClicked",c)}else d.info("Missing header click!")};return n(()=>{if(e&&e.current&&l){const t=g("keydown"),r=g("keyup"),n=g("keypress");return e.current.addEventListener("click",h,{capture:!0}),document.addEventListener("keydown",t),document.addEventListener("keyup",r),document.addEventListener("keypress",n),o.current.isInitialised=!0,s(!0),()=>{var l;d.info("Clearing all events listeners"),e.current.removeEventListener("click",h,{capture:!0}),document.removeEventListener("keydown",t),document.removeEventListener("keyup",r),document.removeEventListener("keypress",n),null===(l=o.current)||void 0===l||l.removeAllListeners()}}},[e,l]),n(()=>{if(!o||!o.current)return;const e=[];return t.onCellClicked&&(o.current.on("cellClicked",t.onCellClicked),e.push(()=>o.current.removeListener("cellClicked",t.onCellClicked))),t.onRowClicked&&(o.current.on("rowClicked",t.onRowClicked),e.push(()=>o.current.removeListener("rowClicked",t.onRowClicked))),t.onRowSelected&&(o.current.on("rowSelected",t.onRowSelected),e.push(()=>o.current.removeListener("rowSelected",t.onRowSelected))),t.onSelectionChanged&&(o.current.on("selectionChanged",t.onSelectionChanged),e.push(()=>o.current.removeListener("selectionChanged",t.onSelectionChanged))),()=>{d.info("Clearing all subscribed options handlers"),e.forEach(e=>e())}},[t]),c},W={width:200,hide:!1},H={rowHeight:27,headerHeight:34,scrollbarSize:15,columnBuffer:8,enableMultipleSelection:!0,showCellRightBorder:!1,extendRowFullWidth:!0};function F(e){return{id:e.id,data:e,selected:!1}}function M(e){const t=I("useColumns"),l=o(()=>(t.debug("Calculating visibleColumns"),e.filter(e=>null!=e.field&&!e.hide).map(e=>Object.assign(Object.assign({},W),e))),[e]),i=o(()=>{t.debug("Calculating columnsMeta");let e=0;const r=[];return e=l.reduce((e,t)=>(r.push(e),e+t.width),0),{totalWidth:e,positions:r}},[e]),[c,s]=r({all:e,visible:l,meta:i,hasColumns:e.length>0,hasVisibleColumns:l.length>0});return n(()=>{t.debug("Effect columns!!!"),s({all:e,visible:l,meta:i,hasColumns:e.length>0,hasVisibleColumns:l.length>0})},[e]),c}const P=(e,t)=>{const r=I("useContainerProps"),n=l({width:0,height:0}),c=o(()=>t.scrollbarSize,[t]);return i((o,l)=>{if(!e||!e.current)return null;r.debug("Calculating container sizes.");const i=e.current.getBoundingClientRect();n.current={width:i.width,height:i.height},r.debug(`window Size - W: ${n.current.width} H: ${n.current.height} `);const s=t.rowHeight,a=n.current.height<l*s,d=o>n.current.width,u=Math.floor((n.current.height-c)/s)-1,g=2*u,h=Math.floor(l/u);r.debug(`windowPageSize: ${u} - PageSize: ${g} - MaxPage: ${h}`);const m=(g+1)*s+(d?c:0),p=o-(a?c:0);r.debug("columnsTotalWidth ",o);const f=h-1>0?h-1:0,w={pageSize:g,windowPageSize:u,hasScrollY:a,hasScrollX:d,scrollBarSize:c,totalWidth:p,totalHeight:(h>1?h*(m/2):l*s)||1,renderingZone:{width:p,height:m},windowSizes:n.current,viewportSize:{width:n.current.width-(a?c:0),height:n.current.height-(d?c:0)},lastPage:f};return r.debug("returning container props",w),w},[e])};function B(e){const t=I("useRafUpdate"),r=l(0);let n=e;return[(...e)=>{n&&(r.current>0&&(t.debug("Skipping another update"),cancelAnimationFrame(r.current)),r.current=requestAnimationFrame(()=>{n(...e)}))},e=>{n=e}]}function T(e,t=30,o=!0){const i=I("useRafDebouncedState"),[c,s]=r(e),[a,d]=B(),g=l(c);d(e=>{(o?!u(e,g.current):e!==g.current)?(i.debug("+++++ FORCING RENDER +++++"),i.debug("resetting state "),g.current=e,s(e)):i.debug("Same state as current one")});const h=j(e=>a(e),t);return n(()=>()=>{h.cancel()},[]),[c,h]}function A(e){const t=I("useScrollFn"),r=l(0),o=l(0),c=l(),[s]=B(()=>{e.current.style.pointerEvents="unset",o.current=0}),a=j(s,300),d=i(n=>{var o;n.left===(null===(o=c.current)||void 0===o?void 0:o.left)&&n.top===c.current.top||e&&e.current&&(r.current=0,t.debug(`Moving ${e.current.className} to: ${n.top}`),"none"!==e.current.style.pointerEvents&&(e.current.style.pointerEvents="none"),e.current.style.transform=`translate(-${n.left}px, -${n.top}px)`,a(),c.current=n)},[e]),[u]=B(d);return n(()=>()=>{a.cancel()},[]),u}const D=(e,t,i,c)=>{const s=I("useRows"),a=o(()=>t.map(e=>F(e)),[t]),[d,u]=T(a,30,!1),[,g]=r(),[h]=B(()=>g(e=>!e)),m=l({}),p=l(a),f=l(!1),w=e=>f.current=e,b=e=>{s.debug("updating all rows..."),m.current=e.reduce((e,t,r)=>(e[t.id]=r,e),{}),p.current=e,f.current||u(e)};n(()=>{s.debug("Rows updated."),b(a)},[t]);const v=e=>m.current[e],x=e=>p.current[v(e)],y=e=>{s.debug("updating row models",e);const t=[];if(e.forEach(e=>{if(null==e.id)throw new Error("All rows need an id.");const r=x(e.id);if(!r)return void t.push(e);const n=Object.assign(Object.assign({},r),e),o=v(e.id);p.current[o]=n,a[o]=n,f.current||h()}),t.length>0){const e=[...p.current,...t];b(e)}},C=e=>{s.debug("updating rows data");const t=e.reduce((e,t)=>(e[t.id]=null!=e[t.id]?Object.assign(Object.assign({},e[t.id]),t):t,e),{}),r=Object.values(t).map(e=>{const t=x(e.id);return t?Object.assign(Object.assign({},t),{data:Object.assign(Object.assign({},t.data),e)}):F(e)});return y(r)};return n(()=>{if(c&&c.current){s.debug("Adding row api to apiRef");const e={getRowIndexFromId:v,getRowFromId:x,updateRowModels:y,updateRowData:C,get hasRows(){return p.current.length>0}};c.current=Object.assign(c.current,e);const t=()=>w(!0),r=()=>w(!1);return c.current.on("scrolling:start",t),c.current.on("scrolling:stop",r),()=>{var e,n;null===(e=c.current)||void 0===e||e.removeListener("scrolling:start",t),null===(n=c.current)||void 0===n||n.removeListener("scrolling:stop",r)}}},[c]),d},V=["Meta","Control"],G=e=>V.indexOf(e)>-1,X=(e,t,o,i)=>{const c=I("useSelection"),s=l([]),a=l(!1),[,d]=r(),u=()=>s.current.map(e=>i.current.getRowFromId(e)),g=e=>{if(!i||null==i.current)throw"ApiRef should be defined at this stage";if(!i.current.isInitialised)return void(s.current=[e.id]);c.debug("Selecting row "+e.id);const t=i.current.getRowIndexFromId(e.id),r=!a.current||!e.selected;if(a.current?r?s.current=-1===s.current.indexOf(e.id)?[...s.current,e.id]:s.current:s.current.splice(s.current.indexOf(e.id),1):(s.current.forEach(e=>{const t=i.current.getRowFromId(e);i.current.updateRowModels([Object.assign(Object.assign({},t),{selected:!1})])}),s.current=[e.id]),i.current.updateRowModels([Object.assign(Object.assign({},e),{selected:r})]),i&&null!=i.current){const n={data:e.data,isSelected:r,rowIndex:t},o={rows:u().map(e=>e.data)};i.current.emit("rowSelected",n),i.current.emit("selectionChanged",o)}d(e=>!e)},h=e=>{if(i&&i.current)return g(i.current.getRowFromId(e))},m=t=>{if(i&&i.current){if(!e.enableMultipleSelection&&t.length>1)throw new Error("Enable Options.enableMultipleSelection to select more than 1 item");a.current=!0,t.forEach(e=>h(e)),a.current=!1}},p=e=>{g(e.rowModel)},f=t=>{G(t.key)&&e.enableMultipleSelection&&(c.debug("Multiple Select key pressed"),a.current=!0)},w=t=>{G(t.key)&&e.enableMultipleSelection&&(c.debug("Multiple Select key released"),a.current=!1)};n(()=>{if(i&&i.current&&o)return c.debug("Binding click event"),i.current.on("rowClicked",p),i.current.on("keydown",f),i.current.on("keyup",w),s.current.forEach(e=>h(e)),()=>{i.current.removeListener("rowClicked",p),i.current.removeListener("keydown",f),i.current.removeListener("keyup",w)}},[o]),n(()=>{if(i&&i.current){c.debug("Adding row selection to api");const e={selectRow:h,getSelectedRows:u,selectRows:m};i.current=Object.assign(i.current,e)}},[i])},Z=(e,t)=>{const r=I("useVirtualColumns"),c=l(null),s=l(0),a=o(()=>[...e.meta.positions].reverse(),[e]),d=i(t=>{if(!e.hasColumns)return-1;let r=a.findIndex(e=>t>=e);return r=e.meta.positions.length-1-r,r},[e]),u=i(t=>e.hasColumns?e.visible[d(t)]:null,[e]);return n(()=>{c.current=null},[e,t]),[c,(n,o)=>{var l,i,a,g;if(!n||!e.hasColumns)return!1;const h=n.windowSizes.width;s.current=o,r.debug("first column displayed: ",null===(l=u(o))||void 0===l?void 0:l.headerName),r.debug("last column displayed: ",null===(i=u(o+h))||void 0===i?void 0:i.headerName);const m=d(o),p=d(o+h),f=(null===(a=null==c?void 0:c.current)||void 0===a?void 0:a.firstColIdx)||0,w=(null===(g=null==c?void 0:c.current)||void 0===g?void 0:g.lastColIdx)||0,b=t.columnBuffer,v=Math.floor(b/2),x=Math.abs(m-v-f),y=Math.abs(p+v-w);r.debug(`Column buffer: ${b}, tolerance: ${v}`),r.debug(`Previous values => first: ${f}, last: ${w}`),r.debug(`Current displayed values => first: ${m}, last: ${p}`),r.debug("DIFF last => ",y),r.debug("DIFF first => ",x);const C=y>v||x>v;if(r.debug("RENDER NEW COL STATE ----\x3e ",C),c&&c.current&&!C)return!1;{const o={firstColIdx:m-b>=0?m-b:0,lastColIdx:p+b>=e.visible.length-1?e.visible.length-1:p+b,left:0,rightEmptyWidth:0};return o.left=e.meta.positions[o.firstColIdx],n.hasScrollX?o.rightEmptyWidth=e.meta.totalWidth-e.meta.positions[o.lastColIdx]-e.visible[o.lastColIdx].width:t.extendRowFullWidth&&(o.rightEmptyWidth=n.viewportSize.width-e.meta.totalWidth),c.current=o,r.debug("New columns state to ",o),!0}}]},U=(e,t,r,o,i,s,a)=>{const d=I("useVirtualRows"),u=l(0),g=l(0),h=l(null),m=l({left:0,top:0}),p=l(o.meta.totalWidth),f=A(r),w=A(e),b=P(t,s),[v,x]=T(null),[y,C]=Z(o,s),R=()=>{const e=h.current,t=y.current,r=(e=>{if(null==h.current)return null;const t=h.current,r=e*t.windowPageSize;let n=r+t.pageSize;return n>g.current-1&&(n=g.current-1),{page:e,firstRowIdx:r,lastRowIdx:n}})(u.current);if(null==e)return null;const n=Object.assign(Object.assign(Object.assign({},e),t),r);return d.debug(":: getRenderCtxState - returning state ",n),n},S=()=>x(R()),E=()=>{if(t&&t.current&&h&&h.current){const e=h.current,{scrollLeft:r,scrollTop:n}=t.current;d.debug(`scrolling Left: ${r} Top: ${n}`);const o=e.renderingZone.height,l=e.renderingZone.width,i=e.windowSizes.height,c=e.windowSizes.width,s=o-i+e.scrollBarSize,a=l-c+e.scrollBarSize,g=n,p=r;d.debug("scrollTop: ",n);let b=g%s;d.debug("First calc rzScrollTop: ",b);const v=p;d.debug(`rzH: ${o} winH: ${i}, maxScrollTop: ${s}, maxScrollLeft: ${a}`),d.debug(`rzScrollLeft: ${v} `);let x=C(e,r);const y={left:v,top:b};let R=Math.floor(g/s),E=!1;if(R>e.lastPage){y.top=s,E=!0,d.debug(`not scrolling to rzScrollTop: ${b}, scrolling to max ${s}`);const e=g-b+s;d.debug("Patching height to ",e),h.current.totalHeight=e,x=!0}else if(R<e.lastPage){const t=(e.lastPage+2)*(e.renderingZone.height/2);d.debug("Patching back height to ",t),t!==h.current.totalHeight&&(h.current.totalHeight=t,x=!0)}const k=u.current;R=R>e.lastPage?e.lastPage:R,d.debug(`state pageNumber ${k}, current is ${R}`),k!==R?(k<R&&!E&&(b=b<=s?0:b%s,y.top=b,d.debug("Resetting rzScrollTop to",b)),u.current=R,x=!0):(f(y),w(Object.assign(Object.assign({},y),{top:0}))),m.current=y,x&&S(),d.debug(`rzScrollTop: ${b} `),d.debug("------------")}};c(()=>{r&&r.current&&(d.debug("applying scrollTop ",m.current),f(m.current),w(Object.assign(Object.assign({},m.current),{top:0})))});const k=()=>{u.current=0,t&&t.current&&t.current.scrollTo(0,0),m.current={left:0,top:0},f({left:0,top:0})},N=()=>{p.current>0?(h.current=b(p.current,g.current),E(),S()):h.current=null},O=l(0),$=()=>{a&&a.current&&0===O.current&&a.current.emit("scrolling:start"),clearTimeout(O.current),O.current=setTimeout(()=>{O.current=0,a&&a.current&&a.current.emit("scrolling:stop")},300),E()};n(()=>{if(k(),p.current=o.meta.totalWidth,N(),t&&t.current)return d.debug("Binding scroll event to window."),t.current.addEventListener("scroll",$),()=>{d.debug("Unbinding scroll event to window."),t.current.removeEventListener("scroll",$)}},[o]),n(()=>{d.debug("+++ options or viewportRef changed "),k(),N()},[s,r]),n(()=>{i.length!==g.current&&(d.debug("Row length changed to ",i.length),g.current=i.length,N())},[i]);return[v,()=>{d.debug("+++ onResize "),N()}]},q=e.forwardRef((t,r)=>{const{className:n,children:o}=t,l=w(t,["className","children"]);return e.createElement("div",Object.assign({ref:r,className:"columns-container "+(n||"")},l),o)});q.displayName="ColumnsContainer";const Y=e.forwardRef((t,r)=>{const{className:n,children:o}=t,l=w(t,["className","children"]);return e.createElement("div",Object.assign({ref:r,className:"data-container "+(n||"")},l),o)});Y.displayName="DataContainer";const _=s.div`
`,v=(t,r)=>{const{className:n,children:o}=t,l=w(t,["className","children"]);return e.createElement(b,Object.assign({className:"overlay "+(n||"")},l),e.createElement("div",{className:"content"},o))};v.displayName="GridOverlay";const x=()=>e.createElement(v,null,"No Rows"),y=e.createContext(null),C=e.forwardRef(({height:t,width:r,children:n},o)=>e.createElement("div",{ref:o,className:"rendering-zone",style:{maxHeight:t,width:r}},n));C.displayName="RenderingZone";const R=e.memo(({selected:t,id:r,className:n,children:o})=>{const l=(t?"selected ":" ")+(n||"");return e.createElement("div",{key:r,"data-id":r,className:"material-row "+l},o)});R.displayName="Row";const S=e.memo(t=>{const{scrollSize:r,hasScroll:n,lastColIdx:o,firstColIdx:l,columns:i,row:c}=t,s=i.slice(l,o+1).map((o,s)=>{const a=l+s===i.length-1,d=a&&n.y&&n.x?o.width-r:o.width,u=a&&n.x&&!n.y,g=a?!u&&!t.extendRowFullWidth:t.showCellRightBorder;return e.createElement(h,{key:o.field,value:c.data[o.field],field:o.field,width:d,showRightBorder:g})});return e.createElement(e.Fragment,null,s)});S.displayName="RowCells";const E=e.memo(({height:t,width:r,children:n})=>e.createElement("div",{className:"viewport",style:{minWidth:r,maxWidth:r,minHeight:t,maxHeight:t}},n));E.displayName="StickyContainer";const k="production"!==process.env.NODE_ENV,N=()=>{},O={debug:N,info:N,warn:N,error:N};function I(e){return k?(e=>["debug","info","warn","error"].reduce((t,r)=>(t[r]=(...t)=>{const[n,...o]=t;console[r](`[${e}] - ${n}`,...o)},t),{}))(e):O}const $=e.forwardRef(({options:r,rows:n,visibleColumns:o,children:l},i)=>{const c=I("Viewport"),s=t(y);if(0===n.length)return null;return c.info("Rendering ViewPort"),e.createElement(E,Object.assign({},s.viewportSize),e.createElement(C,Object.assign({ref:i},s.renderingZone),n.slice(s.firstRowIdx,s.lastRowIdx+1).map((t,n)=>e.createElement(R,{className:(s.firstRowIdx+n)%2==0?"even":"odd",key:t.id,id:t.id,selected:t.selected},e.createElement(m,{key:"left-empty",width:s.left}),e.createElement(S,{columns:o,row:t,firstColIdx:s.firstColIdx,lastColIdx:s.lastColIdx,hasScroll:{y:s.hasScrollY,x:s.hasScrollX},scrollSize:s.scrollBarSize,showCellRightBorder:r.showCellRightBorder,extendRowFullWidth:r.extendRowFullWidth}),e.createElement(p,{key:"right-empty",width:s.rightEmptyWidth})))))});$.displayName="Viewport";function z(e,t,r){return d(e,t,r)}function j(e,t){return e.getAttribute("data-"+t)}const L=(e,t,o)=>{const[l,i]=r(!1),[c,s]=r(!1),d=I("useApi");n(()=>{o&&(()=>{d.debug("Initialising grid api.");const e=new a;o.current=e,i(!0)})()},[o]);const u=(e,...t)=>{o&&o.current&&l&&o.current.emit(e,...t)},g=e=>(...t)=>u(e,...t),h=e=>{if(null==e.target)return;const t=e.target;if(function(e){return e&&e.classList.contains("material-cell")}(t)){const e=t.parentElement,r=function(e){return j(e,"id")}(e),n=o.current.getRowFromId(r),l=o.current.getRowIndexFromId(r),i={element:t,field:j(t,"field"),value:j(t,"value"),data:n.data,rowIndex:l},c={element:e,rowModel:n,data:n.data,rowIndex:l};u("cellClicked",i),u("rowClicked",c)}else d.info("Missing header click!")};return n(()=>{if(e&&e.current&&l){const t=g("keydown"),r=g("keyup"),n=g("keypress");return e.current.addEventListener("click",h,{capture:!0}),document.addEventListener("keydown",t),document.addEventListener("keyup",r),document.addEventListener("keypress",n),o.current.isInitialised=!0,s(!0),()=>{var l;d.info("Clearing all events listeners"),e.current.removeEventListener("click",h,{capture:!0}),document.removeEventListener("keydown",t),document.removeEventListener("keyup",r),document.removeEventListener("keypress",n),null===(l=o.current)||void 0===l||l.removeAllListeners()}}},[e,l]),n(()=>{if(!o||!o.current)return;const e=[];return t.onCellClicked&&(o.current.on("cellClicked",t.onCellClicked),e.push(()=>o.current.removeListener("cellClicked",t.onCellClicked))),t.onRowClicked&&(o.current.on("rowClicked",t.onRowClicked),e.push(()=>o.current.removeListener("rowClicked",t.onRowClicked))),t.onRowSelected&&(o.current.on("rowSelected",t.onRowSelected),e.push(()=>o.current.removeListener("rowSelected",t.onRowSelected))),t.onSelectionChanged&&(o.current.on("selectionChanged",t.onSelectionChanged),e.push(()=>o.current.removeListener("selectionChanged",t.onSelectionChanged))),()=>{d.info("Clearing all subscribed options handlers"),e.forEach(e=>e())}},[t]),c},W={width:200,hide:!1},H={rowHeight:27,headerHeight:34,scrollbarSize:15,columnBuffer:8,enableMultipleSelection:!0,showCellRightBorder:!1,extendRowFullWidth:!0};function F(e){return{id:e.id,data:e,selected:!1}}function M(e){const t=I("useColumns"),l=o(()=>(t.debug("Calculating visibleColumns"),e.filter(e=>null!=e.field&&!e.hide).map(e=>Object.assign(Object.assign({},W),e))),[e]),i=o(()=>{t.debug("Calculating columnsMeta");let e=0;const r=[];return e=l.reduce((e,t)=>(r.push(e),e+t.width),0),{totalWidth:e,positions:r}},[e]),[c,s]=r({all:e,visible:l,meta:i,hasColumns:e.length>0,hasVisibleColumns:l.length>0});return n(()=>{t.debug("Effect columns!!!"),s({all:e,visible:l,meta:i,hasColumns:e.length>0,hasVisibleColumns:l.length>0})},[e]),c}const P=(e,t)=>{const r=I("useContainerProps"),n=l({width:0,height:0}),c=o(()=>t.scrollbarSize,[t]);return i((o,l)=>{if(!e||!e.current)return null;r.debug("Calculating container sizes.");const i=e.current.getBoundingClientRect();n.current={width:i.width,height:i.height},r.debug(`window Size - W: ${n.current.width} H: ${n.current.height} `);const s=t.rowHeight,a=n.current.height<l*s,d=o>n.current.width,u=Math.floor((n.current.height-c)/s)-1,g=2*u,h=Math.floor(l/u);r.debug(`windowPageSize: ${u} - PageSize: ${g} - MaxPage: ${h}`);const m=(g+1)*s+(d?c:0),p=o-(a?c:0);r.debug("columnsTotalWidth ",o);const f=h-1>0?h-1:0,w={pageSize:g,windowPageSize:u,hasScrollY:a,hasScrollX:d,scrollBarSize:c,totalWidth:p,totalHeight:(h>1?h*(m/2):l*s)||1,renderingZone:{width:p,height:m},windowSizes:n.current,viewportSize:{width:n.current.width-(a?c:0),height:n.current.height-(d?c:0)},lastPage:f};return r.debug("returning container props",w),w},[e])};function B(e){const t=I("useRafUpdate"),r=l(0);let n=e;return[(...e)=>{n&&(r.current>0&&(t.debug("Skipping another update"),cancelAnimationFrame(r.current)),r.current=requestAnimationFrame(()=>{n(...e)}))},e=>{n=e}]}function T(e,t=30,o=!0){const i=I("useRafDebouncedState"),[c,s]=r(e),[a,d]=B(),g=l(c);d(e=>{(o?!u(e,g.current):e!==g.current)?(i.debug("+++++ FORCING RENDER +++++"),i.debug("resetting state "),g.current=e,s(e)):i.debug("Same state as current one")});const h=z(e=>a(e),t);return n(()=>()=>{h.cancel()},[]),[c,h]}function A(e){const t=I("useScrollFn"),r=l(0),o=l(0),c=l(),[s]=B(()=>{e.current.style.pointerEvents="unset",o.current=0}),a=z(s,300),d=i(n=>{var o;n.left===(null===(o=c.current)||void 0===o?void 0:o.left)&&n.top===c.current.top||e&&e.current&&(r.current=0,t.debug(`Moving ${e.current.className} to: ${n.top}`),"none"!==e.current.style.pointerEvents&&(e.current.style.pointerEvents="none"),e.current.style.transform=`translate(-${n.left}px, -${n.top}px)`,a(),c.current=n)},[e]),[u]=B(d);return n(()=>()=>{a.cancel()},[]),u}const D=(e,t,i,c)=>{const s=I("useRows"),a=o(()=>t.map(e=>F(e)),[t]),[d,u]=T(a,30,!1),[,g]=r(),[h]=B(()=>g(e=>!e)),m=l({}),p=l(a),f=l(!1),w=e=>f.current=e,b=e=>{s.debug("updating all rows..."),m.current=e.reduce((e,t,r)=>(e[t.id]=r,e),{}),p.current=e,f.current||u(e)};n(()=>{s.debug("Rows updated."),b(a)},[t]);const v=e=>m.current[e],x=e=>p.current[v(e)],y=e=>{s.debug("updating row models",e);const t=[];if(e.forEach(e=>{if(null==e.id)throw new Error("All rows need an id.");const r=x(e.id);if(!r)return void t.push(e);const n=Object.assign(Object.assign({},r),e),o=v(e.id);p.current[o]=n,a[o]=n,f.current||h()}),t.length>0){const e=[...p.current,...t];b(e)}},C=e=>{s.debug("updating rows data");const t=e.reduce((e,t)=>(e[t.id]=null!=e[t.id]?Object.assign(Object.assign({},e[t.id]),t):t,e),{}),r=Object.values(t).map(e=>{const t=x(e.id);return t?Object.assign(Object.assign({},t),{data:Object.assign(Object.assign({},t.data),e)}):F(e)});return y(r)};return n(()=>{if(c&&c.current){s.debug("Adding row api to apiRef");const e={getRowIndexFromId:v,getRowFromId:x,updateRowModels:y,updateRowData:C,get hasRows(){return p.current.length>0}};c.current=Object.assign(c.current,e);const t=()=>w(!0),r=()=>w(!1);return c.current.on("scrolling:start",t),c.current.on("scrolling:stop",r),()=>{var e,n;null===(e=c.current)||void 0===e||e.removeListener("scrolling:start",t),null===(n=c.current)||void 0===n||n.removeListener("scrolling:stop",r)}}},[c]),d},V=["Meta","Control"],G=e=>V.indexOf(e)>-1,X=(e,t,o,i)=>{const c=I("useSelection"),s=l([]),a=l(!1),[,d]=r(),u=()=>s.current.map(e=>i.current.getRowFromId(e)),g=e=>{if(!i||null==i.current)throw"ApiRef should be defined at this stage";if(!i.current.isInitialised)return void(s.current=[e.id]);c.debug("Selecting row "+e.id);const t=i.current.getRowIndexFromId(e.id),r=!a.current||!e.selected;if(a.current?r?s.current=-1===s.current.indexOf(e.id)?[...s.current,e.id]:s.current:s.current.splice(s.current.indexOf(e.id),1):(s.current.forEach(e=>{const t=i.current.getRowFromId(e);i.current.updateRowModels([Object.assign(Object.assign({},t),{selected:!1})])}),s.current=[e.id]),i.current.updateRowModels([Object.assign(Object.assign({},e),{selected:r})]),i&&null!=i.current){const n={data:e.data,isSelected:r,rowIndex:t},o={rows:u().map(e=>e.data)};i.current.emit("rowSelected",n),i.current.emit("selectionChanged",o)}d(e=>!e)},h=e=>{if(i&&i.current)return g(i.current.getRowFromId(e))},m=t=>{if(i&&i.current){if(!e.enableMultipleSelection&&t.length>1)throw new Error("Enable Options.enableMultipleSelection to select more than 1 item");a.current=!0,t.forEach(e=>h(e)),a.current=!1}},p=e=>{g(e.rowModel)},f=t=>{G(t.key)&&e.enableMultipleSelection&&(c.debug("Multiple Select key pressed"),a.current=!0)},w=t=>{G(t.key)&&e.enableMultipleSelection&&(c.debug("Multiple Select key released"),a.current=!1)};n(()=>{if(i&&i.current&&o)return c.debug("Binding click event"),i.current.on("rowClicked",p),i.current.on("keydown",f),i.current.on("keyup",w),s.current.forEach(e=>h(e)),()=>{i.current.removeListener("rowClicked",p),i.current.removeListener("keydown",f),i.current.removeListener("keyup",w)}},[o]),n(()=>{if(i&&i.current){c.debug("Adding row selection to api");const e={selectRow:h,getSelectedRows:u,selectRows:m};i.current=Object.assign(i.current,e)}},[i])},Z=(e,t)=>{const r=I("useVirtualColumns"),c=l(null),s=l(0),a=o(()=>[...e.meta.positions].reverse(),[e]),d=i(t=>{if(!e.hasColumns)return-1;let r=a.findIndex(e=>t>=e);return r=e.meta.positions.length-1-r,r},[e]),u=i(t=>e.hasColumns?e.visible[d(t)]:null,[e]);return n(()=>{c.current=null},[e,t]),[c,(n,o)=>{var l,i,a,g;if(!n||!e.hasColumns)return!1;const h=n.windowSizes.width;s.current=o,r.debug("first column displayed: ",null===(l=u(o))||void 0===l?void 0:l.headerName),r.debug("last column displayed: ",null===(i=u(o+h))||void 0===i?void 0:i.headerName);const m=d(o),p=d(o+h),f=(null===(a=null==c?void 0:c.current)||void 0===a?void 0:a.firstColIdx)||0,w=(null===(g=null==c?void 0:c.current)||void 0===g?void 0:g.lastColIdx)||0,b=t.columnBuffer,v=Math.floor(b/2),x=Math.abs(m-v-f),y=Math.abs(p+v-w);r.debug(`Column buffer: ${b}, tolerance: ${v}`),r.debug(`Previous values => first: ${f}, last: ${w}`),r.debug(`Current displayed values => first: ${m}, last: ${p}`),r.debug("DIFF last => ",y),r.debug("DIFF first => ",x);const C=y>v||x>v;if(r.debug("RENDER NEW COL STATE ----\x3e ",C),c&&c.current&&!C)return!1;{const o={firstColIdx:m-b>=0?m-b:0,lastColIdx:p+b>=e.visible.length-1?e.visible.length-1:p+b,left:0,rightEmptyWidth:0};return o.left=e.meta.positions[o.firstColIdx],n.hasScrollX?o.rightEmptyWidth=e.meta.totalWidth-e.meta.positions[o.lastColIdx]-e.visible[o.lastColIdx].width:t.extendRowFullWidth&&(o.rightEmptyWidth=n.viewportSize.width-e.meta.totalWidth),c.current=o,r.debug("New columns state to ",o),!0}}]},U=(e,t,r,o,i,s,a)=>{const d=I("useVirtualRows"),u=l(0),g=l(0),h=l(null),m=l({left:0,top:0}),p=l(o.meta.totalWidth),f=A(r),w=A(e),b=P(t,s),[v,x]=T(null),[y,C]=Z(o,s),R=()=>{const e=h.current,t=y.current,r=(e=>{if(null==h.current)return null;const t=h.current,r=e*t.windowPageSize;let n=r+t.pageSize;return n>g.current-1&&(n=g.current-1),{page:e,firstRowIdx:r,lastRowIdx:n}})(u.current);if(null==e)return null;const n=Object.assign(Object.assign(Object.assign({},e),t),r);return d.debug(":: getRenderCtxState - returning state ",n),n},S=()=>x(R()),E=()=>{if(t&&t.current&&h&&h.current){const e=h.current,{scrollLeft:r,scrollTop:n}=t.current;d.debug(`scrolling Left: ${r} Top: ${n}`);const o=e.renderingZone.height,l=e.renderingZone.width,i=e.windowSizes.height,c=e.windowSizes.width,s=o-i+e.scrollBarSize,a=l-c+e.scrollBarSize,g=n,p=r;d.debug("scrollTop: ",n);let b=g%s;d.debug("First calc rzScrollTop: ",b);const v=p;d.debug(`rzH: ${o} winH: ${i}, maxScrollTop: ${s}, maxScrollLeft: ${a}`),d.debug(`rzScrollLeft: ${v} `);let x=C(e,r);const y={left:v,top:b};let R=Math.floor(g/s),E=!1;if(R>e.lastPage){y.top=s,E=!0,d.debug(`not scrolling to rzScrollTop: ${b}, scrolling to max ${s}`);const e=g-b+s;d.debug("Patching height to ",e),h.current.totalHeight=e,x=!0}else if(R<e.lastPage){const t=(e.lastPage+2)*(e.renderingZone.height/2);d.debug("Patching back height to ",t),t!==h.current.totalHeight&&(h.current.totalHeight=t,x=!0)}const k=u.current;R=R>e.lastPage?e.lastPage:R,d.debug(`state pageNumber ${k}, current is ${R}`),k!==R?(k<R&&!E&&(b=b<=s?0:b%s,y.top=b,d.debug("Resetting rzScrollTop to",b)),u.current=R,x=!0):(f(y),w(Object.assign(Object.assign({},y),{top:0}))),m.current=y,x&&S(),d.debug(`rzScrollTop: ${b} `),d.debug("------------")}};c(()=>{r&&r.current&&(d.debug("applying scrollTop ",m.current),f(m.current),w(Object.assign(Object.assign({},m.current),{top:0})))});const k=()=>{u.current=0,t&&t.current&&t.current.scrollTo(0,0),m.current={left:0,top:0},f({left:0,top:0})},N=()=>{p.current>0?(h.current=b(p.current,g.current),E(),S()):h.current=null},O=l(0),$=()=>{a&&a.current&&0===O.current&&a.current.emit("scrolling:start"),clearTimeout(O.current),O.current=setTimeout(()=>{O.current=0,a&&a.current&&a.current.emit("scrolling:stop")},300),E()};n(()=>{if(k(),p.current=o.meta.totalWidth,N(),t&&t.current)return d.debug("Binding scroll event to window."),t.current.addEventListener("scroll",$),()=>{d.debug("Unbinding scroll event to window."),t.current.removeEventListener("scroll",$)}},[o]),n(()=>{d.debug("+++ options or viewportRef changed "),k(),N()},[s,r]),n(()=>{i.length!==g.current&&(d.debug("Row length changed to ",i.length),g.current=i.length,N())},[i]);return[v,()=>{d.debug("+++ onResize "),N()}]},q=e.forwardRef((t,r)=>{const{className:n,children:o}=t,l=w(t,["className","children"]);return e.createElement("div",Object.assign({ref:r,className:"columns-container "+(n||"")},l),o)});q.displayName="ColumnsContainer";const Y=e.forwardRef((t,r)=>{const{className:n,children:o}=t,l=w(t,["className","children"]);return e.createElement("div",Object.assign({ref:r,className:"data-container "+(n||"")},l),o)});Y.displayName="DataContainer";const _=s.div`
box-sizing: border-box;
* {

@@ -144,3 +145,3 @@ box-sizing: border-box;

}
`;_.displayName="RootStyle";const J=e.forwardRef((t,r)=>{const{options:n,children:o,className:l}=t,i=w(t,["options","children","className"]);return e.createElement(_,Object.assign({ref:r,className:"material-grid grid-root "+(l||""),options:n},i),o)});J.displayName="GridRoot";const K=e.forwardRef((t,r)=>{const{className:n,children:o}=t,l=w(t,["className","children"]);return e.createElement("div",Object.assign({ref:r,className:"window "+(n||"")},l),o)});K.displayName="Window";const Q=e.memo(({rows:t,columns:o,options:i,apiRef:c})=>{const s=I("Grid"),a=l(null),d=l(null),u=l(null),h=l(null),m=l(null),p=l(),[w,b]=r(Object.assign(Object.assign({},H),i));c||(c=p);const v=L(a,w,c),C=M(o),R=D(0,t,0,c);X(w,0,v,c);const[S,E]=U(d,u,m,C,R,w,c);n(()=>{b(Object.assign(Object.assign({},H),i))},[i]);const k=j(e=>{s.info("resized...",e),E()},100);return n(()=>(s.info("canceling resize..."),()=>k.cancel()),[]),s.info(`Rendering, page: ${null==S?void 0:S.page}, col: ${null==S?void 0:S.firstColIdx}-${null==S?void 0:S.lastColIdx}, row: ${null==S?void 0:S.firstRowIdx}-${null==S?void 0:S.lastRowIdx}`),e.createElement(g,{onResize:k},t=>e.createElement(J,{ref:a,options:w,style:{width:t.width,height:t.height}},e.createElement(q,null,e.createElement(f,{ref:d,columns:C.visible||[],hasScrollX:!!(null==S?void 0:S.hasScrollX)})),0===R.length&&e.createElement(x,null),e.createElement(K,{ref:u},e.createElement(Y,{ref:h,style:{minHeight:null==S?void 0:S.totalHeight,minWidth:null==S?void 0:S.totalWidth}},null!=S&&e.createElement(y.Provider,{value:S},e.createElement($,{ref:m,options:w,rows:R,visibleColumns:C.visible}))))))});Q.displayName="Grid";export{h as Cell,q as ColumnsContainer,f as ColumnsHeader,W as DEFAULT_COL_DEF,H as DEFAULT_GRID_OPTIONS,Y as DataContainer,Q as Grid,v as GridOverlay,J as GridRoot,m as LeftEmptyCell,x as NoRowMessage,b as Overlay,y as RenderContext,C as RenderingZone,p as RightEmptyCell,_ as RootStyle,R as Row,S as RowCells,E as StickyContainer,$ as Viewport,K as Window,F as createRow,L as useApi,M as useColumns,P as useContainerProps,I as useLogger,T as useRafDebouncedState,B as useRafUpdate,D as useRows,A as useScrollFn,X as useSelection,Z as useVirtualColumns,U as useVirtualRows};
`;_.displayName="RootStyle";const J=e.forwardRef((t,r)=>{const{options:n,children:o,className:l}=t,i=w(t,["options","children","className"]);return e.createElement(_,Object.assign({ref:r,className:"material-grid grid-root "+(l||""),options:n},i),o)});J.displayName="GridRoot";const K=e.forwardRef((t,r)=>{const{className:n,children:o}=t,l=w(t,["className","children"]);return e.createElement("div",Object.assign({ref:r,className:"window "+(n||"")},l),o)});K.displayName="Window";const Q=e.memo(({rows:t,columns:o,options:i,apiRef:c})=>{const s=I("Grid"),a=l(null),d=l(null),u=l(null),h=l(null),m=l(null),p=l(),[w,b]=r(Object.assign(Object.assign({},H),i));c||(c=p);const v=L(a,w,c),C=M(o),R=D(0,t,0,c);X(w,0,v,c);const[S,E]=U(d,u,m,C,R,w,c);n(()=>{b(Object.assign(Object.assign({},H),i))},[i]);const k=z(e=>{s.info("resized...",e),E()},100);return n(()=>(s.info("canceling resize..."),()=>k.cancel()),[]),s.info(`Rendering, page: ${null==S?void 0:S.page}, col: ${null==S?void 0:S.firstColIdx}-${null==S?void 0:S.lastColIdx}, row: ${null==S?void 0:S.firstRowIdx}-${null==S?void 0:S.lastRowIdx}`),e.createElement(g,{onResize:k},t=>e.createElement(J,{ref:a,options:w,style:{width:t.width,height:t.height}},e.createElement(q,null,e.createElement(f,{ref:d,columns:C.visible||[],hasScrollX:!!(null==S?void 0:S.hasScrollX)})),0===R.length&&e.createElement(x,null),e.createElement(K,{ref:u},e.createElement(Y,{ref:h,style:{minHeight:null==S?void 0:S.totalHeight,minWidth:null==S?void 0:S.totalWidth}},null!=S&&e.createElement(y.Provider,{value:S},e.createElement($,{ref:m,options:w,rows:R,visibleColumns:C.visible}))))))});Q.displayName="Grid";export{h as Cell,q as ColumnsContainer,f as ColumnsHeader,W as DEFAULT_COL_DEF,H as DEFAULT_GRID_OPTIONS,Y as DataContainer,Q as Grid,v as GridOverlay,J as GridRoot,m as LeftEmptyCell,x as NoRowMessage,b as Overlay,y as RenderContext,C as RenderingZone,p as RightEmptyCell,_ as RootStyle,R as Row,S as RowCells,E as StickyContainer,$ as Viewport,K as Window,F as createRow,L as useApi,M as useColumns,P as useContainerProps,I as useLogger,T as useRafDebouncedState,B as useRafUpdate,D as useRows,A as useScrollFn,X as useSelection,Z as useVirtualColumns,U as useVirtualRows};
//# sourceMappingURL=index-esm.js.map

4

package.json
{
"name": "fin-ui-grid",
"version": "0.1.9",
"version": "0.1.10",
"main": "dist/index-cjs.js",

@@ -37,3 +37,3 @@ "module": "dist/index-esm.js",

],
"gitHead": "25ca24cacbf308453a7e2fdc9a3873aa1c5726d1"
"gitHead": "6b8998a11cca411e899627407aa083bfbdf1df98"
}
dist/index-cjs.js.map

Sorry, the diff of this file is not supported yet

dist/index-esm.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc