window-table/dist/window-table.cjs.production.min.js

Windowing Table for React based on React Window

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=require("react-window"),i=(e=require("lodash.debounce"))&&"object"==typeof e&&"default"in e?e.default:e;function n(){return(n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var i in r)Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i])}return e}).apply(this,arguments)}function a(e,t){if(null==e)return{};var r,i,n={},a=Object.keys(e);for(i=0;i<a.length;i++)t.indexOf(r=a[i])>=0||(n[r]=e[r]);return n}var s=function(e){var r,i;function n(){var t;return(t=e.apply(this,arguments)||this).state={height:0,width:0},t._onResize=function(){var e=t.props.onResize;if(t._parentNode){var r=t._parentNode.offsetHeight||0,i=t._parentNode.offsetWidth||0,n=window.getComputedStyle(t._parentNode)||{},a=parseInt(n.paddingLeft,10)||0,s=parseInt(n.paddingRight,10)||0,o=parseInt(n.paddingTop,10)||0,l=parseInt(n.paddingBottom,10)||0;t.state.height===r-o-l&&t.state.width===i-a-s||(t.setState({height:r-o-l,width:i-a-s}),e({height:r,width:i}))}},t._setRef=function(e){t._autoSizer=e},t}i=e,(r=n).prototype=Object.create(i.prototype),r.prototype.constructor=r,r.__proto__=i;var a=n.prototype;return a.componentDidMount=function(){var e,t,r;this._autoSizer&&this._autoSizer.parentNode&&this._autoSizer.parentNode.ownerDocument&&this._autoSizer.parentNode.ownerDocument.defaultView&&this._autoSizer.parentNode instanceof this._autoSizer.parentNode.ownerDocument.defaultView.HTMLElement&&(this._parentNode=this._autoSizer.parentNode,this._detectElementResize=(e="undefined"!=typeof window?window:global,t=function(e){var t=e.__resizeTriggers__,r=t.firstElementChild,i=t.lastElementChild,n=r.firstElementChild;i.scrollLeft=i.scrollWidth,i.scrollTop=i.scrollHeight,n.style.width=r.offsetWidth+1+"px",n.style.height=r.offsetHeight+1+"px",r.scrollLeft=r.scrollWidth,r.scrollTop=r.scrollHeight},r=function(r){var i=this;r.target.className.indexOf("contract-trigger")<0&&r.target.className.indexOf("expand-trigger")<0||(t(this),this.__resizeRAF__&&(e.cancelAnimationFrame||e.clearTimeout)(this.__resizeRAF__),this.__resizeRAF__=(e.requestAnimationFrame||function(t){return e.setTimeout(t,20)})((function(){var e;((e=i).offsetWidth!==e.__resizeLast__.width||e.offsetHeight!==e.__resizeLast__.height)&&(i.__resizeLast__.width=i.offsetWidth,i.__resizeLast__.height=i.offsetHeight,i.__resizeListeners__.forEach((function(e){e.call(i,r)})))})))},{addResizeListener:function(i,n){if(!i.__resizeTriggers__){var a=i.ownerDocument,s=e.getComputedStyle(i);s&&"static"===s.position&&(i.style.position="relative"),function(e){if(!e.getElementById("detectElementResize")){var t='\n        .resize-triggers {\n          visibility: hidden;\n        }\n        .resize-triggers, .resize-triggers > div,\n        .contract-trigger:before {\n          content: " ";\n          display: block;\n          position: absolute;\n          top: 0;\n          left: 0;\n          height: 100%;\n          width: 100%;\n          overflow:\n          hidden; z-index: -1;\n        }\n        .resize-triggers > div {\n          background: #eee;\n          overflow: auto;\n        }\n        .contract-trigger:before {\n          width: 200%;\n          height: 200%;\n        }\n        ',r=e.head||e.getElementsByTagName("head")[0],i=e.createElement("style");i.id="detectElementResize",i.type="text/css",i.setAttribute("nonce",""),i.styleSheet?i.styleSheet.cssText=t:i.appendChild(e.createTextNode(t)),r.appendChild(i)}}(a),i.__resizeLast__={},i.__resizeListeners__=[],(i.__resizeTriggers__=a.createElement("div")).className="resize-triggers",i.__resizeTriggers__.innerHTML='<div class="expand-trigger"><div></div></div><div class="contract-trigger"></div>',i.appendChild(i.__resizeTriggers__),t(i),i.addEventListener("scroll",r,!0)}i.__resizeListeners__.push(n)},removeResizeListener:function(e,t){if(e.__resizeListeners__.splice(e.__resizeListeners__.indexOf(t),1),!e.__resizeListeners__.length){e.removeEventListener("scroll",r,!0),e.__resizeTriggers__.__animationListener__&&(e.__resizeTriggers__.__animationListener__=null);try{e.__resizeTriggers__=!e.removeChild(e.__resizeTriggers__)}catch(e){}}}}),this._detectElementResize.addResizeListener(this._parentNode,this._onResize),this._onResize())},a.componentWillUnmount=function(){this._detectElementResize&&this._parentNode&&this._detectElementResize.removeResizeListener(this._parentNode,this._onResize)},a.render=function(){return t.createElement(this.props.innerElementType||"div",{ref:this._setRef,style:{overflow:"visible",height:0,width:0}})},n}(t.PureComponent);s.defaultProps={onResize:function(){}};var o=t.useMemo,l=t.useReducer,d={header:[0,0],row:[0,0],table:[0,0]},c=function(e,t){var r,i=t.entity;return i&&(d=n({},d,((r={})[i]=t.dimensions,r)),JSON.stringify(e[i])!==JSON.stringify(d[i]))?d:e},u=function(e){var r=e.measure,n=e.entity,a=e.debounceWait,l=e.innerElementType,d=void 0===l?"div":l,c=o((function(){return i(r,a,{leading:!0})}),[r,a]),u=a>0?c:r;return t.createElement(s,{innerElementType:d,onResize:function(e){u({dimensions:[e.height,e.width],entity:n})}})},f=["style","sampleRow"],h=["columns","data","rowHeight","height","width","className","rowClassName","classNamePrefix"];function m(e,t){return!!f.every((function(r){return JSON.stringify(e[r])===JSON.stringify(t[r])}))&&h.every((function(r){return e[r]===t[r]}))}var _=t.createContext({columns:[],data:[],Cell:"div",Row:"div",Table:"div",Body:"div",classNamePrefix:"",tableClassName:"",rowClassName:"",rowWidthOffset:0,setSize:function(){return{}},variableSizeRows:!1}),g=function(e){var r=e.classNamePrefix,i=e.datum,n=e.Cell,a=e.index,s=void 0===a?0:a,o=e.setSize;return t.createElement(t.Fragment,null,e.columns.map((function(e,a){var l=e.key,d=e.width,c=e.Component,u=void 0===c?"div":c;return t.createElement(n,{key:a,style:{width:d+"px",flexGrow:d,display:"inline-block",boxSizing:"border-box"},className:r+"table-cell",row:i,column:e,index:s},t.createElement(u,Object.assign({},"string"==typeof u?{}:{row:i,column:e,index:s,setSize:o||function(){}}),i[l]))})))},v=function(e){var r=e.index,i=e.style,a=t.useContext(_),s=a.columns,o=a.data,l=a.Cell,d=a.classNamePrefix,c=a.Row,u=a.rowClassName,f=a.setSize,h=a.variableSizeRows,m=t.useMemo((function(){return"function"==typeof u?u(r):u}),[r,u]),v=t.useRef(f),p=t.useCallback((function(){if(h||0===r){var e=document.querySelector("#window-table-row-ref-"+r);e&&e.scrollHeight>e.getBoundingClientRect().height&&v.current(r,(null==e?void 0:e.scrollHeight)+1||0)}}),[r,h]);return t.useEffect((function(){setTimeout((function(){p()}),0)}),[r,i.height,p]),t.createElement(c,{id:"window-table-row-ref-"+r,style:n({},i,{display:"flex",overflow:"auto"}),className:""+d+m+" "+d+m+"-"+r,index:r,row:o[r]},t.createElement(g,{datum:o[r],Cell:l,classNamePrefix:d,columns:s,index:r,setSize:p}))},p=t.memo(v,r.areEqual),w=function(e){var r=e.Header,i=e.HeaderRow,n=e.HeaderCell,a=e.children,s=t.useContext(_),o=s.columns,l=s.classNamePrefix,d=s.rowWidthOffset,c=t.useRef(null),u=c&&c.current&&c.current.firstChild&&getComputedStyle(c.current.firstChild).backgroundColor;return t.createElement(r,{id:"window-table-header-ref",className:l+"table-header",style:{backgroundColor:u}},t.createElement(i,{style:{display:"flex",width:"calc(100% - "+d+"px)"},className:l+"table-header-row",ref:c},a,o.map((function(e){var r=e.width,i=e.HeaderCell;return t.createElement(void 0===i?n:i,{key:"header"+e.key,style:{width:r+"px",display:"inline-block",flexGrow:r},className:l+"table-header-cell",column:e},e.title)}))))},y=function(e){var r=e.children,i=a(e,["children"]),n=t.useContext(_),s=n.classNamePrefix,o=n.Body;return t.createElement(n.Table,Object.assign({},i,{className:n.tableClassName}),t.createElement(o,{className:s+"table-body"},r))},b=t.forwardRef((function(e,i){var s=e.columns,o=e.data,f=e.rowHeight,h=void 0===f?40:f,m=e.height,g=e.width,v=e.overscanCount,b=void 0===v?1:v,z=e.disableHeader,x=void 0!==z&&z,C=e.style,N=void 0===C?{}:C,E=e.Cell,R=void 0===E?"div":E,S=e.HeaderCell,T=void 0===S?"div":S,H=e.Table,L=void 0===H?"div":H,O=e.Header,W=void 0===O?"div":O,P=e.HeaderRow,k=void 0===P?"div":P,j=e.Row,B=void 0===j?"div":j,I=e.Body,M=void 0===I?"div":I,A=e.className,F=void 0===A?"":A,q=e.rowClassName,D=void 0===q?"table-row":q,J=e.classNamePrefix,V=void 0===J?"":J,G=e.debounceWait,U=void 0===G?0:G,K=e.variableSizeRows,Q=void 0!==K&&K,X=e.tableOuterRef,Y=e.tableOuterElementType,Z=a(e,["columns","data","rowHeight","height","width","overscanCount","disableHeader","style","Cell","HeaderCell","Table","Header","HeaderRow","Row","Body","className","rowClassName","classNamePrefix","debounceWait","headerCellInnerElementType","tableCellInnerElementType","variableSizeRows","tableOuterRef","tableOuterElementType"]),$=t.useRef();i=i||$;var ee=t.useState(0),te=ee[0],re=ee[1],ie=t.useRef(null),ne=V+"table "+F,ae=s.reduce((function(e,t){return e+t.width}),0),se=l(c,d),oe=se[1],le=se[0].table,de=le[1],ce=(m||le[0])-te,ue=g||Math.max(ae,de),fe=de-(ie.current&&ie.current.clientWidth||de),he=t.useState({}),me=he[0],_e=he[1],ge={columns:s,data:o,Cell:R,Row:B,Table:L,Body:M,classNamePrefix:V,tableClassName:ne,rowClassName:D,rowWidthOffset:fe,variableSizeRows:Q,setSize:function(e,t){var r,a;t&&(_e((function(r){var i;return n({},r,((i={})[e]=Math.max(t,r[e]||0),i))})),null==(r=i)||null==(a=r.current)||null==a.resetAfterIndex||a.resetAfterIndex(e))}};return t.useEffect((function(){var e;re((null==(e=document.querySelector("#window-table-header-ref"))?void 0:e.scrollHeight)||0)}),[me[0]]),t.createElement("div",Object.assign({style:n({height:m?m+"px":"100%",width:g?g+"px":"100%",overflow:"auto",maxHeight:"100vh",minHeight:"200px"},N)},Z),t.createElement(_.Provider,{value:ge},t.createElement("div",null,!x&&de>0&&t.createElement(L,{style:{width:ue+"px",marginBottom:0},className:ne},t.createElement(w,{Header:W,HeaderRow:k,HeaderCell:T})),!!o.length&&t.createElement(r.VariableSizeList,{ref:i,height:ce,itemCount:o.length,itemSize:function(e){return Q?me[e]||h:me[0]||h},width:ue,innerElementType:y,overscanCount:b,outerRef:X,outerElementType:Y},p))),(!m||!g)&&t.createElement(u,{measure:oe,entity:"table",debounceWait:U}))})),z=t.memo(b,m),x=function(e){return void 0===e&&(e=""),function(r){return t.createElement("thead",Object.assign({},r,{className:e+" "+r.className}))}},C=t.useState,N=t.useMemo;exports.Html5Table=function(e){var r=e.headerClassName,i=a(e,["headerClassName"]);return t.createElement(z,Object.assign({Cell:"td",HeaderCell:"th",Header:x(r),HeaderRow:"tr",Row:"tr",Body:"tbody",Table:"table",headerCellInnerElementType:"th",tableCellInnerElementType:"td"},i))},exports.WindowTable=z,exports.createFilter=function(e){return function(t,r){return t.filter((function(t){return e.some((function(e){var i=t[e]?String(t[e]):"";return!(!r||!i.toLowerCase().includes(r.trim().toLowerCase()))}))}))}},exports.default=z,exports.useDebouncedState=function(e,t){void 0===t&&(t=100);var r=C(e),n=r[0],a=r[1],s=C(e),o=s[0],l=s[1],d=N((function(){return i(l,t)}),[t]);return[n,o,function(e){d.cancel(),a(e),d(e)}]},exports.useFilter=function(e,t,r){return N((function(){return r.length?e(t,r):t}),[t,e,r])};
//# sourceMappingURL=window-table.cjs.production.min.js.map