@hpcc-js/dgrid2 2.3.8 → 2.3.9
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/dist/index.es6.js +1188 -1418
- package/dist/index.es6.js.map +1 -1
- package/dist/index.js +1188 -1418
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +6 -6
- package/src/__package__.ts +2 -2
- package/src/reactTable.tsx +3 -3
- package/types/__package__.d.ts +2 -2
- package/types/reactTable.d.ts +1 -1
- package/types/reactTable.d.ts.map +1 -1
- package/types/table.d.ts +1 -1
- package/types/table.d.ts.map +1 -1
- package/types-3.4/__package__.d.ts +2 -2
- package/types-3.4/reactTable.d.ts +1 -1
- package/types-3.4/table.d.ts +1 -1
package/dist/index.es6.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { format, timeParse, timeFormat, publish, HTMLWidget } from '@hpcc-js/common';
|
|
2
2
|
|
|
3
3
|
var PKG_NAME = "@hpcc-js/dgrid2";
|
|
4
|
-
var PKG_VERSION = "2.3.
|
|
5
|
-
var BUILD_VERSION = "2.104.
|
|
4
|
+
var PKG_VERSION = "2.3.9";
|
|
5
|
+
var BUILD_VERSION = "2.104.20";
|
|
6
6
|
|
|
7
7
|
/******************************************************************************
|
|
8
8
|
Copyright (c) Microsoft Corporation.
|
|
@@ -67,255 +67,21 @@ function __spreadArray(to, from, pack) {
|
|
|
67
67
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
68
68
|
}
|
|
69
69
|
|
|
70
|
-
var n,l$1,u$1,t$1,o$2,r$2,f$1={},e$1=[],c$1=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function s$1(n,l){for(var u in l)n[u]=l[u];return n}function a$1(n){var l=n.parentNode;l&&l.removeChild(n);}function h$1(l,u,i){var t,o,r,f={};for(r in u)"key"==r?t=u[r]:"ref"==r?o=u[r]:f[r]=u[r];if(arguments.length>2&&(f.children=arguments.length>3?n.call(arguments,2):i),"function"==typeof l&&null!=l.defaultProps)for(r in l.defaultProps)void 0===f[r]&&(f[r]=l.defaultProps[r]);return v$1(l,f,t,o,null)}function v$1(n,i,t,o,r){var f={type:n,props:i,key:t,ref:o,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:null==r?++u$1:r};return null==r&&null!=l$1.vnode&&l$1.vnode(f),f}function p$1(n){return n.children}function d$1(n,l){this.props=n,this.context=l;}function _$2(n,l){if(null==l)return n.__?_$2(n.__,n.__.__k.indexOf(n)+1):null;for(var u;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e)return u.__e;return "function"==typeof n.type?_$2(n):null}function k$1(n){var l,u;if(null!=(n=n.__)&&null!=n.__c){for(n.__e=n.__c.base=null,l=0;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e){n.__e=n.__c.base=u.__e;break}return k$1(n)}}function b$1(n){(!n.__d&&(n.__d=!0)&&t$1.push(n)&&!g$2.__r++||o$2!==l$1.debounceRendering)&&((o$2=l$1.debounceRendering)||setTimeout)(g$2);}function g$2(){for(var n;g$2.__r=t$1.length;)n=t$1.sort(function(n,l){return n.__v.__b-l.__v.__b}),t$1=[],n.some(function(n){var l,u,i,t,o,r;n.__d&&(o=(t=(l=n).__v).__e,(r=l.__P)&&(u=[],(i=s$1({},t)).__v=t.__v+1,j$2(r,t,i,l.__n,void 0!==r.ownerSVGElement,null!=t.__h?[o]:null,u,null==o?_$2(t):o,t.__h),z$2(u,t),t.__e!=o&&k$1(t)));});}function w$2(n,l,u,i,t,o,r,c,s,a){var h,y,d,k,b,g,w,x=i&&i.__k||e$1,C=x.length;for(u.__k=[],h=0;h<l.length;h++)if(null!=(k=u.__k[h]=null==(k=l[h])||"boolean"==typeof k?null:"string"==typeof k||"number"==typeof k||"bigint"==typeof k?v$1(null,k,null,null,k):Array.isArray(k)?v$1(p$1,{children:k},null,null,null):k.__b>0?v$1(k.type,k.props,k.key,k.ref?k.ref:null,k.__v):k)){if(k.__=u,k.__b=u.__b+1,null===(d=x[h])||d&&k.key==d.key&&k.type===d.type)x[h]=void 0;else for(y=0;y<C;y++){if((d=x[y])&&k.key==d.key&&k.type===d.type){x[y]=void 0;break}d=null;}j$2(n,k,d=d||f$1,t,o,r,c,s,a),b=k.__e,(y=k.ref)&&d.ref!=y&&(w||(w=[]),d.ref&&w.push(d.ref,null,k),w.push(y,k.__c||b,k)),null!=b?(null==g&&(g=b),"function"==typeof k.type&&k.__k===d.__k?k.__d=s=m$1(k,s,n):s=A$1(n,k,d,x,b,s),"function"==typeof u.type&&(u.__d=s)):s&&d.__e==s&&s.parentNode!=n&&(s=_$2(d));}for(u.__e=g,h=C;h--;)null!=x[h]&&N$1(x[h],x[h]);if(w)for(h=0;h<w.length;h++)M$1(w[h],w[++h],w[++h]);}function m$1(n,l,u){for(var i,t=n.__k,o=0;t&&o<t.length;o++)(i=t[o])&&(i.__=n,l="function"==typeof i.type?m$1(i,l,u):A$1(u,i,i,t,i.__e,l));return l}function x$1(n,l){return l=l||[],null==n||"boolean"==typeof n||(Array.isArray(n)?n.some(function(n){x$1(n,l);}):l.push(n)),l}function A$1(n,l,u,i,t,o){var r,f,e;if(void 0!==l.__d)r=l.__d,l.__d=void 0;else if(null==u||t!=o||null==t.parentNode)n:if(null==o||o.parentNode!==n)n.appendChild(t),r=null;else {for(f=o,e=0;(f=f.nextSibling)&&e<i.length;e+=2)if(f==t)break n;n.insertBefore(t,o),r=o;}return void 0!==r?r:t.nextSibling}function C$1(n,l,u,i,t){var o;for(o in u)"children"===o||"key"===o||o in l||H$1(n,o,null,u[o],i);for(o in l)t&&"function"!=typeof l[o]||"children"===o||"key"===o||"value"===o||"checked"===o||u[o]===l[o]||H$1(n,o,l[o],u[o],i);}function $(n,l,u){"-"===l[0]?n.setProperty(l,u):n[l]=null==u?"":"number"!=typeof u||c$1.test(l)?u:u+"px";}function H$1(n,l,u,i,t){var o;n:if("style"===l)if("string"==typeof u)n.style.cssText=u;else {if("string"==typeof i&&(n.style.cssText=i=""),i)for(l in i)u&&l in u||$(n.style,l,"");if(u)for(l in u)i&&u[l]===i[l]||$(n.style,l,u[l]);}else if("o"===l[0]&&"n"===l[1])o=l!==(l=l.replace(/Capture$/,"")),l=l.toLowerCase()in n?l.toLowerCase().slice(2):l.slice(2),n.l||(n.l={}),n.l[l+o]=u,u?i||n.addEventListener(l,o?T$2:I$1,o):n.removeEventListener(l,o?T$2:I$1,o);else if("dangerouslySetInnerHTML"!==l){if(t)l=l.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if("href"!==l&&"list"!==l&&"form"!==l&&"tabIndex"!==l&&"download"!==l&&l in n)try{n[l]=null==u?"":u;break n}catch(n){}"function"==typeof u||(null==u||!1===u&&-1==l.indexOf("-")?n.removeAttribute(l):n.setAttribute(l,u));}}function I$1(n){this.l[n.type+!1](l$1.event?l$1.event(n):n);}function T$2(n){this.l[n.type+!0](l$1.event?l$1.event(n):n);}function j$2(n,u,i,t,o,r,f,e,c){var a,h,v,y,_,k,b,g,m,x,A,C,$,H,I,T=u.type;if(void 0!==u.constructor)return null;null!=i.__h&&(c=i.__h,e=u.__e=i.__e,u.__h=null,r=[e]),(a=l$1.__b)&&a(u);try{n:if("function"==typeof T){if(g=u.props,m=(a=T.contextType)&&t[a.__c],x=a?m?m.props.value:a.__:t,i.__c?b=(h=u.__c=i.__c).__=h.__E:("prototype"in T&&T.prototype.render?u.__c=h=new T(g,x):(u.__c=h=new d$1(g,x),h.constructor=T,h.render=O$1),m&&m.sub(h),h.props=g,h.state||(h.state={}),h.context=x,h.__n=t,v=h.__d=!0,h.__h=[],h._sb=[]),null==h.__s&&(h.__s=h.state),null!=T.getDerivedStateFromProps&&(h.__s==h.state&&(h.__s=s$1({},h.__s)),s$1(h.__s,T.getDerivedStateFromProps(g,h.__s))),y=h.props,_=h.state,v)null==T.getDerivedStateFromProps&&null!=h.componentWillMount&&h.componentWillMount(),null!=h.componentDidMount&&h.__h.push(h.componentDidMount);else {if(null==T.getDerivedStateFromProps&&g!==y&&null!=h.componentWillReceiveProps&&h.componentWillReceiveProps(g,x),!h.__e&&null!=h.shouldComponentUpdate&&!1===h.shouldComponentUpdate(g,h.__s,x)||u.__v===i.__v){for(h.props=g,h.state=h.__s,u.__v!==i.__v&&(h.__d=!1),h.__v=u,u.__e=i.__e,u.__k=i.__k,u.__k.forEach(function(n){n&&(n.__=u);}),A=0;A<h._sb.length;A++)h.__h.push(h._sb[A]);h._sb=[],h.__h.length&&f.push(h);break n}null!=h.componentWillUpdate&&h.componentWillUpdate(g,h.__s,x),null!=h.componentDidUpdate&&h.__h.push(function(){h.componentDidUpdate(y,_,k);});}if(h.context=x,h.props=g,h.__v=u,h.__P=n,C=l$1.__r,$=0,"prototype"in T&&T.prototype.render){for(h.state=h.__s,h.__d=!1,C&&C(u),a=h.render(h.props,h.state,h.context),H=0;H<h._sb.length;H++)h.__h.push(h._sb[H]);h._sb=[];}else do{h.__d=!1,C&&C(u),a=h.render(h.props,h.state,h.context),h.state=h.__s;}while(h.__d&&++$<25);h.state=h.__s,null!=h.getChildContext&&(t=s$1(s$1({},t),h.getChildContext())),v||null==h.getSnapshotBeforeUpdate||(k=h.getSnapshotBeforeUpdate(y,_)),I=null!=a&&a.type===p$1&&null==a.key?a.props.children:a,w$2(n,Array.isArray(I)?I:[I],u,i,t,o,r,f,e,c),h.base=u.__e,u.__h=null,h.__h.length&&f.push(h),b&&(h.__E=h.__=null),h.__e=!1;}else null==r&&u.__v===i.__v?(u.__k=i.__k,u.__e=i.__e):u.__e=L$1(i.__e,u,i,t,o,r,f,c);(a=l$1.diffed)&&a(u);}catch(n){u.__v=null,(c||null!=r)&&(u.__e=e,u.__h=!!c,r[r.indexOf(e)]=null),l$1.__e(n,u,i);}}function z$2(n,u){l$1.__c&&l$1.__c(u,n),n.some(function(u){try{n=u.__h,u.__h=[],n.some(function(n){n.call(u);});}catch(n){l$1.__e(n,u.__v);}});}function L$1(l,u,i,t,o,r,e,c){var s,h,v,y=i.props,p=u.props,d=u.type,k=0;if("svg"===d&&(o=!0),null!=r)for(;k<r.length;k++)if((s=r[k])&&"setAttribute"in s==!!d&&(d?s.localName===d:3===s.nodeType)){l=s,r[k]=null;break}if(null==l){if(null===d)return document.createTextNode(p);l=o?document.createElementNS("http://www.w3.org/2000/svg",d):document.createElement(d,p.is&&p),r=null,c=!1;}if(null===d)y===p||c&&l.data===p||(l.data=p);else {if(r=r&&n.call(l.childNodes),h=(y=i.props||f$1).dangerouslySetInnerHTML,v=p.dangerouslySetInnerHTML,!c){if(null!=r)for(y={},k=0;k<l.attributes.length;k++)y[l.attributes[k].name]=l.attributes[k].value;(v||h)&&(v&&(h&&v.__html==h.__html||v.__html===l.innerHTML)||(l.innerHTML=v&&v.__html||""));}if(C$1(l,p,y,o,c),v)u.__k=[];else if(k=u.props.children,w$2(l,Array.isArray(k)?k:[k],u,i,t,o&&"foreignObject"!==d,r,e,r?r[0]:i.__k&&_$2(i,0),c),null!=r)for(k=r.length;k--;)null!=r[k]&&a$1(r[k]);c||("value"in p&&void 0!==(k=p.value)&&(k!==l.value||"progress"===d&&!k||"option"===d&&k!==y.value)&&H$1(l,"value",k,y.value,!1),"checked"in p&&void 0!==(k=p.checked)&&k!==l.checked&&H$1(l,"checked",k,y.checked,!1));}return l}function M$1(n,u,i){try{"function"==typeof n?n(u):n.current=u;}catch(n){l$1.__e(n,i);}}function N$1(n,u,i){var t,o;if(l$1.unmount&&l$1.unmount(n),(t=n.ref)&&(t.current&&t.current!==n.__e||M$1(t,null,u)),null!=(t=n.__c)){if(t.componentWillUnmount)try{t.componentWillUnmount();}catch(n){l$1.__e(n,u);}t.base=t.__P=null,n.__c=void 0;}if(t=n.__k)for(o=0;o<t.length;o++)t[o]&&N$1(t[o],u,i||"function"!=typeof n.type);i||null==n.__e||a$1(n.__e),n.__=n.__e=n.__d=void 0;}function O$1(n,l,u){return this.constructor(n,u)}function P(u,i,t){var o,r,e;l$1.__&&l$1.__(u,i),r=(o="function"==typeof t)?null:t&&t.__k||i.__k,e=[],j$2(i,u=(!o&&t||i).__k=h$1(p$1,null,[u]),r||f$1,f$1,void 0!==i.ownerSVGElement,!o&&t?[t]:r?null:i.firstChild?n.call(i.childNodes):null,e,!o&&t?t:r?r.__e:i.firstChild,o),z$2(e,u);}function B$2(n,l){var u={__c:l="__cC"+r$2++,__:n,Consumer:function(n,l){return n.children(l)},Provider:function(n){var u,i;return this.getChildContext||(u=[],(i={})[l]=this,this.getChildContext=function(){return i},this.shouldComponentUpdate=function(n){this.props.value!==n.value&&u.some(b$1);},this.sub=function(n){u.push(n);var l=n.componentWillUnmount;n.componentWillUnmount=function(){u.splice(u.indexOf(n),1),l&&l.call(n);};}),n.children}};return u.Provider.__=u.Consumer.contextType=u}n=e$1.slice,l$1={__e:function(n,l,u,i){for(var t,o,r;l=l.__;)if((t=l.__c)&&!t.__)try{if((o=t.constructor)&&null!=o.getDerivedStateFromError&&(t.setState(o.getDerivedStateFromError(n)),r=t.__d),null!=t.componentDidCatch&&(t.componentDidCatch(n,i||{}),r=t.__d),r)return t.__E=t}catch(l){n=l;}throw n}},u$1=0,d$1.prototype.setState=function(n,l){var u;u=null!=this.__s&&this.__s!==this.state?this.__s:this.__s=s$1({},this.state),"function"==typeof n&&(n=n(s$1({},u),this.props)),n&&s$1(u,n),null!=n&&this.__v&&(l&&this._sb.push(l),b$1(this));},d$1.prototype.forceUpdate=function(n){this.__v&&(this.__e=!0,n&&this.__h.push(n),b$1(this));},d$1.prototype.render=p$1,t$1=[],g$2.__r=0,r$2=0;
|
|
70
|
+
var n,l$1,u$1,t$1,o$2,r$2,f$1,e$1,c$1={},s$1=[],a$1=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,v$1=Array.isArray;function h$1(n,l){for(var u in l)n[u]=l[u];return n}function p$1(n){var l=n.parentNode;l&&l.removeChild(n);}function y$1(l,u,i){var t,o,r,f={};for(r in u)"key"==r?t=u[r]:"ref"==r?o=u[r]:f[r]=u[r];if(arguments.length>2&&(f.children=arguments.length>3?n.call(arguments,2):i),"function"==typeof l&&null!=l.defaultProps)for(r in l.defaultProps)void 0===f[r]&&(f[r]=l.defaultProps[r]);return d$1(l,f,t,o,null)}function d$1(n,i,t,o,r){var f={type:n,props:i,key:t,ref:o,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:null==r?++u$1:r};return null==r&&null!=l$1.vnode&&l$1.vnode(f),f}function k$2(n){return n.children}function b$1(n,l){this.props=n,this.context=l;}function g$2(n,l){if(null==l)return n.__?g$2(n.__,n.__.__k.indexOf(n)+1):null;for(var u;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e)return u.__e;return "function"==typeof n.type?g$2(n):null}function m$1(n){var l,u;if(null!=(n=n.__)&&null!=n.__c){for(n.__e=n.__c.base=null,l=0;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e){n.__e=n.__c.base=u.__e;break}return m$1(n)}}function w$2(n){(!n.__d&&(n.__d=!0)&&t$1.push(n)&&!x$1.__r++||o$2!==l$1.debounceRendering)&&((o$2=l$1.debounceRendering)||r$2)(x$1);}function x$1(){var n,l,u,i,o,r,e,c;for(t$1.sort(f$1);n=t$1.shift();)n.__d&&(l=t$1.length,i=void 0,o=void 0,e=(r=(u=n).__v).__e,(c=u.__P)&&(i=[],(o=h$1({},r)).__v=r.__v+1,L$1(c,r,o,u.__n,void 0!==c.ownerSVGElement,null!=r.__h?[e]:null,i,null==e?g$2(r):e,r.__h),M(i,r),r.__e!=e&&m$1(r)),t$1.length>l&&t$1.sort(f$1));x$1.__r=0;}function P(n,l,u,i,t,o,r,f,e,a){var h,p,y,_,b,m,w,x=i&&i.__k||s$1,P=x.length;for(u.__k=[],h=0;h<l.length;h++)if(null!=(_=u.__k[h]=null==(_=l[h])||"boolean"==typeof _||"function"==typeof _?null:"string"==typeof _||"number"==typeof _||"bigint"==typeof _?d$1(null,_,null,null,_):v$1(_)?d$1(k$2,{children:_},null,null,null):_.__b>0?d$1(_.type,_.props,_.key,_.ref?_.ref:null,_.__v):_)){if(_.__=u,_.__b=u.__b+1,null===(y=x[h])||y&&_.key==y.key&&_.type===y.type)x[h]=void 0;else for(p=0;p<P;p++){if((y=x[p])&&_.key==y.key&&_.type===y.type){x[p]=void 0;break}y=null;}L$1(n,_,y=y||c$1,t,o,r,f,e,a),b=_.__e,(p=_.ref)&&y.ref!=p&&(w||(w=[]),y.ref&&w.push(y.ref,null,_),w.push(p,_.__c||b,_)),null!=b?(null==m&&(m=b),"function"==typeof _.type&&_.__k===y.__k?_.__d=e=C$1(_,e,n):e=$$1(n,_,y,x,b,e),"function"==typeof u.type&&(u.__d=e)):e&&y.__e==e&&e.parentNode!=n&&(e=g$2(y));}for(u.__e=m,h=P;h--;)null!=x[h]&&("function"==typeof u.type&&null!=x[h].__e&&x[h].__e==u.__d&&(u.__d=A$1(i).nextSibling),q$2(x[h],x[h]));if(w)for(h=0;h<w.length;h++)O(w[h],w[++h],w[++h]);}function C$1(n,l,u){for(var i,t=n.__k,o=0;t&&o<t.length;o++)(i=t[o])&&(i.__=n,l="function"==typeof i.type?C$1(i,l,u):$$1(u,i,i,t,i.__e,l));return l}function S(n,l){return l=l||[],null==n||"boolean"==typeof n||(v$1(n)?n.some(function(n){S(n,l);}):l.push(n)),l}function $$1(n,l,u,i,t,o){var r,f,e;if(void 0!==l.__d)r=l.__d,l.__d=void 0;else if(null==u||t!=o||null==t.parentNode)n:if(null==o||o.parentNode!==n)n.appendChild(t),r=null;else {for(f=o,e=0;(f=f.nextSibling)&&e<i.length;e+=1)if(f==t)break n;n.insertBefore(t,o),r=o;}return void 0!==r?r:t.nextSibling}function A$1(n){var l,u,i;if(null==n.type||"string"==typeof n.type)return n.__e;if(n.__k)for(l=n.__k.length-1;l>=0;l--)if((u=n.__k[l])&&(i=A$1(u)))return i;return null}function H$1(n,l,u,i,t){var o;for(o in u)"children"===o||"key"===o||o in l||T$2(n,o,null,u[o],i);for(o in l)t&&"function"!=typeof l[o]||"children"===o||"key"===o||"value"===o||"checked"===o||u[o]===l[o]||T$2(n,o,l[o],u[o],i);}function I$1(n,l,u){"-"===l[0]?n.setProperty(l,null==u?"":u):n[l]=null==u?"":"number"!=typeof u||a$1.test(l)?u:u+"px";}function T$2(n,l,u,i,t){var o;n:if("style"===l)if("string"==typeof u)n.style.cssText=u;else {if("string"==typeof i&&(n.style.cssText=i=""),i)for(l in i)u&&l in u||I$1(n.style,l,"");if(u)for(l in u)i&&u[l]===i[l]||I$1(n.style,l,u[l]);}else if("o"===l[0]&&"n"===l[1])o=l!==(l=l.replace(/Capture$/,"")),l=l.toLowerCase()in n?l.toLowerCase().slice(2):l.slice(2),n.l||(n.l={}),n.l[l+o]=u,u?i||n.addEventListener(l,o?z$1:j$1,o):n.removeEventListener(l,o?z$1:j$1,o);else if("dangerouslySetInnerHTML"!==l){if(t)l=l.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if("width"!==l&&"height"!==l&&"href"!==l&&"list"!==l&&"form"!==l&&"tabIndex"!==l&&"download"!==l&&"rowSpan"!==l&&"colSpan"!==l&&l in n)try{n[l]=null==u?"":u;break n}catch(n){}"function"==typeof u||(null==u||!1===u&&"-"!==l[4]?n.removeAttribute(l):n.setAttribute(l,u));}}function j$1(n){return this.l[n.type+!1](l$1.event?l$1.event(n):n)}function z$1(n){return this.l[n.type+!0](l$1.event?l$1.event(n):n)}function L$1(n,u,i,t,o,r,f,e,c){var s,a,p,y,d,_,g,m,w,x,C,S,$,A,H,I=u.type;if(void 0!==u.constructor)return null;null!=i.__h&&(c=i.__h,e=u.__e=i.__e,u.__h=null,r=[e]),(s=l$1.__b)&&s(u);try{n:if("function"==typeof I){if(m=u.props,w=(s=I.contextType)&&t[s.__c],x=s?w?w.props.value:s.__:t,i.__c?g=(a=u.__c=i.__c).__=a.__E:("prototype"in I&&I.prototype.render?u.__c=a=new I(m,x):(u.__c=a=new b$1(m,x),a.constructor=I,a.render=B$2),w&&w.sub(a),a.props=m,a.state||(a.state={}),a.context=x,a.__n=t,p=a.__d=!0,a.__h=[],a._sb=[]),null==a.__s&&(a.__s=a.state),null!=I.getDerivedStateFromProps&&(a.__s==a.state&&(a.__s=h$1({},a.__s)),h$1(a.__s,I.getDerivedStateFromProps(m,a.__s))),y=a.props,d=a.state,a.__v=u,p)null==I.getDerivedStateFromProps&&null!=a.componentWillMount&&a.componentWillMount(),null!=a.componentDidMount&&a.__h.push(a.componentDidMount);else {if(null==I.getDerivedStateFromProps&&m!==y&&null!=a.componentWillReceiveProps&&a.componentWillReceiveProps(m,x),!a.__e&&null!=a.shouldComponentUpdate&&!1===a.shouldComponentUpdate(m,a.__s,x)||u.__v===i.__v){for(u.__v!==i.__v&&(a.props=m,a.state=a.__s,a.__d=!1),a.__e=!1,u.__e=i.__e,u.__k=i.__k,u.__k.forEach(function(n){n&&(n.__=u);}),C=0;C<a._sb.length;C++)a.__h.push(a._sb[C]);a._sb=[],a.__h.length&&f.push(a);break n}null!=a.componentWillUpdate&&a.componentWillUpdate(m,a.__s,x),null!=a.componentDidUpdate&&a.__h.push(function(){a.componentDidUpdate(y,d,_);});}if(a.context=x,a.props=m,a.__P=n,S=l$1.__r,$=0,"prototype"in I&&I.prototype.render){for(a.state=a.__s,a.__d=!1,S&&S(u),s=a.render(a.props,a.state,a.context),A=0;A<a._sb.length;A++)a.__h.push(a._sb[A]);a._sb=[];}else do{a.__d=!1,S&&S(u),s=a.render(a.props,a.state,a.context),a.state=a.__s;}while(a.__d&&++$<25);a.state=a.__s,null!=a.getChildContext&&(t=h$1(h$1({},t),a.getChildContext())),p||null==a.getSnapshotBeforeUpdate||(_=a.getSnapshotBeforeUpdate(y,d)),P(n,v$1(H=null!=s&&s.type===k$2&&null==s.key?s.props.children:s)?H:[H],u,i,t,o,r,f,e,c),a.base=u.__e,u.__h=null,a.__h.length&&f.push(a),g&&(a.__E=a.__=null),a.__e=!1;}else null==r&&u.__v===i.__v?(u.__k=i.__k,u.__e=i.__e):u.__e=N$1(i.__e,u,i,t,o,r,f,c);(s=l$1.diffed)&&s(u);}catch(n){u.__v=null,(c||null!=r)&&(u.__e=e,u.__h=!!c,r[r.indexOf(e)]=null),l$1.__e(n,u,i);}}function M(n,u){l$1.__c&&l$1.__c(u,n),n.some(function(u){try{n=u.__h,u.__h=[],n.some(function(n){n.call(u);});}catch(n){l$1.__e(n,u.__v);}});}function N$1(l,u,i,t,o,r,f,e){var s,a,h,y=i.props,d=u.props,_=u.type,k=0;if("svg"===_&&(o=!0),null!=r)for(;k<r.length;k++)if((s=r[k])&&"setAttribute"in s==!!_&&(_?s.localName===_:3===s.nodeType)){l=s,r[k]=null;break}if(null==l){if(null===_)return document.createTextNode(d);l=o?document.createElementNS("http://www.w3.org/2000/svg",_):document.createElement(_,d.is&&d),r=null,e=!1;}if(null===_)y===d||e&&l.data===d||(l.data=d);else {if(r=r&&n.call(l.childNodes),a=(y=i.props||c$1).dangerouslySetInnerHTML,h=d.dangerouslySetInnerHTML,!e){if(null!=r)for(y={},k=0;k<l.attributes.length;k++)y[l.attributes[k].name]=l.attributes[k].value;(h||a)&&(h&&(a&&h.__html==a.__html||h.__html===l.innerHTML)||(l.innerHTML=h&&h.__html||""));}if(H$1(l,d,y,o,e),h)u.__k=[];else if(P(l,v$1(k=u.props.children)?k:[k],u,i,t,o&&"foreignObject"!==_,r,f,r?r[0]:i.__k&&g$2(i,0),e),null!=r)for(k=r.length;k--;)null!=r[k]&&p$1(r[k]);e||("value"in d&&void 0!==(k=d.value)&&(k!==l.value||"progress"===_&&!k||"option"===_&&k!==y.value)&&T$2(l,"value",k,y.value,!1),"checked"in d&&void 0!==(k=d.checked)&&k!==l.checked&&T$2(l,"checked",k,y.checked,!1));}return l}function O(n,u,i){try{"function"==typeof n?n(u):n.current=u;}catch(n){l$1.__e(n,i);}}function q$2(n,u,i){var t,o;if(l$1.unmount&&l$1.unmount(n),(t=n.ref)&&(t.current&&t.current!==n.__e||O(t,null,u)),null!=(t=n.__c)){if(t.componentWillUnmount)try{t.componentWillUnmount();}catch(n){l$1.__e(n,u);}t.base=t.__P=null,n.__c=void 0;}if(t=n.__k)for(o=0;o<t.length;o++)t[o]&&q$2(t[o],u,i||"function"!=typeof n.type);i||null==n.__e||p$1(n.__e),n.__=n.__e=n.__d=void 0;}function B$2(n,l,u){return this.constructor(n,u)}function D$1(u,i,t){var o,r,f;l$1.__&&l$1.__(u,i),r=(o="function"==typeof t)?null:t&&t.__k||i.__k,f=[],L$1(i,u=(!o&&t||i).__k=y$1(k$2,null,[u]),r||c$1,c$1,void 0!==i.ownerSVGElement,!o&&t?[t]:r?null:i.firstChild?n.call(i.childNodes):null,f,!o&&t?t:r?r.__e:i.firstChild,o),M(f,u);}function G$1(n,l){var u={__c:l="__cC"+e$1++,__:n,Consumer:function(n,l){return n.children(l)},Provider:function(n){var u,i;return this.getChildContext||(u=[],(i={})[l]=this,this.getChildContext=function(){return i},this.shouldComponentUpdate=function(n){this.props.value!==n.value&&u.some(function(n){n.__e=!0,w$2(n);});},this.sub=function(n){u.push(n);var l=n.componentWillUnmount;n.componentWillUnmount=function(){u.splice(u.indexOf(n),1),l&&l.call(n);};}),n.children}};return u.Provider.__=u.Consumer.contextType=u}n=s$1.slice,l$1={__e:function(n,l,u,i){for(var t,o,r;l=l.__;)if((t=l.__c)&&!t.__)try{if((o=t.constructor)&&null!=o.getDerivedStateFromError&&(t.setState(o.getDerivedStateFromError(n)),r=t.__d),null!=t.componentDidCatch&&(t.componentDidCatch(n,i||{}),r=t.__d),r)return t.__E=t}catch(l){n=l;}throw n}},u$1=0,b$1.prototype.setState=function(n,l){var u;u=null!=this.__s&&this.__s!==this.state?this.__s:this.__s=h$1({},this.state),"function"==typeof n&&(n=n(h$1({},u),this.props)),n&&h$1(u,n),null!=n&&this.__v&&(l&&this._sb.push(l),w$2(this));},b$1.prototype.forceUpdate=function(n){this.__v&&(this.__e=!0,n&&this.__h.push(n),w$2(this));},b$1.prototype.render=k$2,t$1=[],r$2="function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout,f$1=function(n,l){return n.__v.__b-l.__v.__b},x$1.__r=0,e$1=0;
|
|
71
71
|
|
|
72
|
-
var t,r$1,u,i,o$1=0,f=[],c=[],e=l$1.__b,a=l$1.__r,v=l$1.diffed,l=l$1.__c,m=l$1.unmount;function d(t,u){l$1.__h&&l$1.__h(r$1,t,o$1||u),o$1=0;var i=r$1.__H||(r$1.__H={__:[],__h:[]});return t>=i.__.length&&i.__.push({__V:c}),i.__[t]}function
|
|
72
|
+
var t,r$1,u,i,o$1=0,f=[],c=[],e=l$1.__b,a=l$1.__r,v=l$1.diffed,l=l$1.__c,m=l$1.unmount;function d(t,u){l$1.__h&&l$1.__h(r$1,t,o$1||u),o$1=0;var i=r$1.__H||(r$1.__H={__:[],__h:[]});return t>=i.__.length&&i.__.push({__V:c}),i.__[t]}function h(n){return o$1=1,s(B$1,n)}function s(n,u,i){var o=d(t++,2);if(o.t=n,!o.__c&&(o.__=[i?i(u):B$1(void 0,u),function(n){var t=o.__N?o.__N[0]:o.__[0],r=o.t(t,n);t!==r&&(o.__N=[r,o.__[1]],o.__c.setState({}));}],o.__c=r$1,!r$1.u)){var f=function(n,t,r){if(!o.__c.__H)return !0;var u=o.__c.__H.__.filter(function(n){return n.__c});if(u.every(function(n){return !n.__N}))return !c||c.call(this,n,t,r);var i=!1;return u.forEach(function(n){if(n.__N){var t=n.__[0];n.__=n.__N,n.__N=void 0,t!==n.__[0]&&(i=!0);}}),!(!i&&o.__c.props===n)&&(!c||c.call(this,n,t,r))};r$1.u=!0;var c=r$1.shouldComponentUpdate,e=r$1.componentWillUpdate;r$1.componentWillUpdate=function(n,t,r){if(this.__e){var u=c;c=void 0,f(n,t,r),c=u;}e&&e.call(this,n,t,r);},r$1.shouldComponentUpdate=f;}return o.__N||o.__}function p(u,i){var o=d(t++,3);!l$1.__s&&z(o.__H,i)&&(o.__=u,o.i=i,r$1.__H.__h.push(o));}function y(u,i){var o=d(t++,4);!l$1.__s&&z(o.__H,i)&&(o.__=u,o.i=i,r$1.__h.push(o));}function _$1(n){return o$1=5,F$1(function(){return {current:n}},[])}function A(n,t,r){o$1=6,y(function(){return "function"==typeof n?(n(t()),function(){return n(null)}):n?(n.current=t(),function(){return n.current=null}):void 0},null==r?r:r.concat(n));}function F$1(n,r){var u=d(t++,7);return z(u.__H,r)?(u.__V=n(),u.i=r,u.__h=n,u.__V):u.__}function T$1(n,t){return o$1=8,F$1(function(){return n},t)}function q$1(n){var u=r$1.context[n.__c],i=d(t++,9);return i.c=n,u?(null==i.__&&(i.__=!0,u.sub(r$1)),u.props.value):n.__}function b(){for(var t;t=f.shift();)if(t.__P&&t.__H)try{t.__H.__h.forEach(k$1),t.__H.__h.forEach(w$1),t.__H.__h=[];}catch(r){t.__H.__h=[],l$1.__e(r,t.__v);}}l$1.__b=function(n){r$1=null,e&&e(n);},l$1.__r=function(n){a&&a(n),t=0;var i=(r$1=n.__c).__H;i&&(u===r$1?(i.__h=[],r$1.__h=[],i.__.forEach(function(n){n.__N&&(n.__=n.__N),n.__V=c,n.__N=n.i=void 0;})):(i.__h.forEach(k$1),i.__h.forEach(w$1),i.__h=[],t=0)),u=r$1;},l$1.diffed=function(t){v&&v(t);var o=t.__c;o&&o.__H&&(o.__H.__h.length&&(1!==f.push(o)&&i===l$1.requestAnimationFrame||((i=l$1.requestAnimationFrame)||j)(b)),o.__H.__.forEach(function(n){n.i&&(n.__H=n.i),n.__V!==c&&(n.__=n.__V),n.i=void 0,n.__V=c;})),u=r$1=null;},l$1.__c=function(t,r){r.some(function(t){try{t.__h.forEach(k$1),t.__h=t.__h.filter(function(n){return !n.__||w$1(n)});}catch(u){r.some(function(n){n.__h&&(n.__h=[]);}),r=[],l$1.__e(u,t.__v);}}),l&&l(t,r);},l$1.unmount=function(t){m&&m(t);var r,u=t.__c;u&&u.__H&&(u.__H.__.forEach(function(n){try{k$1(n);}catch(n){r=n;}}),u.__H=void 0,r&&l$1.__e(r,u.__v));};var g$1="function"==typeof requestAnimationFrame;function j(n){var t,r=function(){clearTimeout(u),g$1&&cancelAnimationFrame(t),setTimeout(n);},u=setTimeout(r,100);g$1&&(t=requestAnimationFrame(r));}function k$1(n){var t=r$1,u=n.__c;"function"==typeof u&&(n.__c=void 0,u()),r$1=t;}function w$1(n){var t=r$1;n.__c=n.__(),r$1=t;}function z(n,t){return !n||n.length!==t.length||t.some(function(t,r){return t!==n[r]})}function B$1(n,t){return "function"==typeof t?t(n):t}
|
|
73
73
|
|
|
74
|
-
function g(n,t){for(var e in t)n[e]=t[e];return n}function C(n,t){for(var e in n)if("__source"!==e&&!(e in t))return !0;for(var r in t)if("__source"!==r&&n[r]!==t[r])return !0;return !1}function
|
|
74
|
+
function g(n,t){for(var e in t)n[e]=t[e];return n}function C(n,t){for(var e in n)if("__source"!==e&&!(e in t))return !0;for(var r in t)if("__source"!==r&&n[r]!==t[r])return !0;return !1}function w(n){this.props=n;}function x(n,e){function r(n){var t=this.props.ref,r=t==n.ref;return !r&&t&&(t.call?t(null):t.current=null),e?!e(this.props,n)||!r:C(this.props,n)}function u(e){return this.shouldComponentUpdate=r,y$1(n,e)}return u.displayName="Memo("+(n.displayName||n.name)+")",u.prototype.isReactComponent=!0,u.__f=!0,u}(w.prototype=new b$1).isPureReactComponent=!0,w.prototype.shouldComponentUpdate=function(n,t){return C(this.props,n)||C(this.state,t)};var R=l$1.__b;l$1.__b=function(n){n.type&&n.type.__f&&n.ref&&(n.props.ref=n.ref,n.ref=null),R&&R(n);};var N="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.forward_ref")||3911;function k(n){function t(t){var e=g({},t);return delete e.ref,n(e,t.ref||null)}return t.$$typeof=N,t.render=t,t.prototype.isReactComponent=t.__f=!0,t.displayName="ForwardRef("+(n.displayName||n.name)+")",t}var T=l$1.__e;l$1.__e=function(n,t,e,r){if(n.then)for(var u,o=t;o=o.__;)if((u=o.__c)&&u.__c)return null==t.__e&&(t.__e=e.__e,t.__k=e.__k),u.__c(n,t);T(n,t,e,r);};var I=l$1.unmount;function L(n,t,e){return n&&(n.__c&&n.__c.__H&&(n.__c.__H.__.forEach(function(n){"function"==typeof n.__c&&n.__c();}),n.__c.__H=null),null!=(n=g({},n)).__c&&(n.__c.__P===e&&(n.__c.__P=t),n.__c=null),n.__k=n.__k&&n.__k.map(function(n){return L(n,t,e)})),n}function U(n,t,e){return n&&(n.__v=null,n.__k=n.__k&&n.__k.map(function(n){return U(n,t,e)}),n.__c&&n.__c.__P===t&&(n.__e&&e.insertBefore(n.__e,n.__d),n.__c.__e=!0,n.__c.__P=e)),n}function D(){this.__u=0,this.t=null,this.__b=null;}function F(n){var t=n.__.__c;return t&&t.__a&&t.__a(n)}function V(){this.u=null,this.o=null;}l$1.unmount=function(n){var t=n.__c;t&&t.__R&&t.__R(),t&&!0===n.__h&&(n.type=null),I&&I(n);},(D.prototype=new b$1).__c=function(n,t){var e=t.__c,r=this;null==r.t&&(r.t=[]),r.t.push(e);var u=F(r.__v),o=!1,i=function(){o||(o=!0,e.__R=null,u?u(l):l());};e.__R=i;var l=function(){if(!--r.__u){if(r.state.__a){var n=r.state.__a;r.__v.__k[0]=U(n,n.__c.__P,n.__c.__O);}var t;for(r.setState({__a:r.__b=null});t=r.t.pop();)t.forceUpdate();}},c=!0===t.__h;r.__u++||c||r.setState({__a:r.__b=r.__v.__k[0]}),n.then(i,i);},D.prototype.componentWillUnmount=function(){this.t=[];},D.prototype.render=function(n,e){if(this.__b){if(this.__v.__k){var r=document.createElement("div"),o=this.__v.__k[0].__c;this.__v.__k[0]=L(this.__b,r,o.__O=o.__P);}this.__b=null;}var i=e.__a&&y$1(k$2,null,n.fallback);return i&&(i.__h=null),[y$1(k$2,null,e.__a?null:n.children),i]};var W=function(n,t,e){if(++e[1]===e[0]&&n.o.delete(t),n.props.revealOrder&&("t"!==n.props.revealOrder[0]||!n.o.size))for(e=n.u;e;){for(;e.length>3;)e.pop()();if(e[1]<e[0])break;n.u=e=e[2];}};(V.prototype=new b$1).__a=function(n){var t=this,e=F(t.__v),r=t.o.get(n);return r[0]++,function(u){var o=function(){t.props.revealOrder?(r.push(u),W(t,n,r)):u();};e?e(o):o();}},V.prototype.render=function(n){this.u=null,this.o=new Map;var t=S(n.children);n.revealOrder&&"b"===n.revealOrder[0]&&t.reverse();for(var e=t.length;e--;)this.o.set(t[e],this.u=[1,0,this.u]);return n.children},V.prototype.componentDidUpdate=V.prototype.componentDidMount=function(){var n=this;this.o.forEach(function(t,e){W(n,e,t);});};var B="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,H=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|image(!S)|letter|lighting|marker(?!H|W|U)|overline|paint|pointer|shape|stop|strikethrough|stroke|text(?!L)|transform|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,Z=/^on(Ani|Tra|Tou|BeforeInp|Compo)/,Y=/[A-Z0-9]/g,$="undefined"!=typeof document,q=function(n){return ("undefined"!=typeof Symbol&&"symbol"==typeof Symbol()?/fil|che|rad/:/fil|che|ra/).test(n)};function G(n,t,e){return null==t.__k&&(t.textContent=""),D$1(n,t),"function"==typeof e&&e(),n?n.__c:null}b$1.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach(function(t){Object.defineProperty(b$1.prototype,t,{configurable:!0,get:function(){return this["UNSAFE_"+t]},set:function(n){Object.defineProperty(this,t,{configurable:!0,writable:!0,value:n});}});});var K=l$1.event;function Q(){}function X(){return this.cancelBubble}function nn(){return this.defaultPrevented}l$1.event=function(n){return K&&(n=K(n)),n.persist=Q,n.isPropagationStopped=X,n.isDefaultPrevented=nn,n.nativeEvent=n};var en={enumerable:!1,configurable:!0,get:function(){return this.class}},rn=l$1.vnode;l$1.vnode=function(n){"string"==typeof n.type&&function(n){var t=n.props,e=n.type,u={};for(var o in t){var i=t[o];if(!("value"===o&&"defaultValue"in t&&null==i||$&&"children"===o&&"noscript"===e||"class"===o||"className"===o)){var l=o.toLowerCase();"defaultValue"===o&&"value"in t&&null==t.value?o="value":"download"===o&&!0===i?i="":"ondoubleclick"===l?o="ondblclick":"onchange"!==l||"input"!==e&&"textarea"!==e||q(t.type)?"onfocus"===l?o="onfocusin":"onblur"===l?o="onfocusout":Z.test(o)?o=l:-1===e.indexOf("-")&&H.test(o)?o=o.replace(Y,"-$&").toLowerCase():null===i&&(i=void 0):l=o="oninput","oninput"===l&&u[o=l]&&(o="oninputCapture"),u[o]=i;}}"select"==e&&u.multiple&&Array.isArray(u.value)&&(u.value=S(t.children).forEach(function(n){n.props.selected=-1!=u.value.indexOf(n.props.value);})),"select"==e&&null!=u.defaultValue&&(u.value=S(t.children).forEach(function(n){n.props.selected=u.multiple?-1!=u.defaultValue.indexOf(n.props.value):u.defaultValue==n.props.value;})),t.class&&!t.className?(u.class=t.class,Object.defineProperty(u,"className",en)):(t.className&&!t.class||t.class&&t.className)&&(u.class=u.className=t.className),n.props=u;}(n),n.$$typeof=B,rn&&rn(n);};var un=l$1.__r;l$1.__r=function(n){un&&un(n),n.__c;};var on=l$1.diffed;l$1.diffed=function(n){on&&on(n);var t=n.props,e=n.__e;null!=e&&"textarea"===n.type&&"value"in t&&t.value!==e.value&&(e.value=null==t.value?"":t.value);};function hn(n){return !!n.__k&&(D$1(null,n),!0)}var pn=function(n,t){return n(t)};
|
|
75
75
|
|
|
76
76
|
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
|
|
77
77
|
|
|
78
|
-
var _=0;function o(o,e,n,t,f){var
|
|
79
|
-
|
|
80
|
-
const cell = "c1wupbe7-0-0-beta-19";
|
|
81
|
-
const cellClassname = `rdg-cell ${cell}`;
|
|
82
|
-
const cellFrozen = "cd0kgiy7-0-0-beta-19";
|
|
83
|
-
const cellFrozenClassname = `rdg-cell-frozen ${cellFrozen}`;
|
|
84
|
-
const cellFrozenLast = "c1730fa47-0-0-beta-19";
|
|
85
|
-
const cellFrozenLastClassname = `rdg-cell-frozen-last ${cellFrozenLast}`;
|
|
86
|
-
|
|
87
|
-
const root = "r104f42s7-0-0-beta-19";
|
|
88
|
-
const rootClassname = `rdg ${root}`;
|
|
89
|
-
const viewportDragging = "v7ly7s7-0-0-beta-19";
|
|
90
|
-
const viewportDraggingClassname = `rdg-viewport-dragging ${viewportDragging}`;
|
|
91
|
-
const focusSinkClassname = "fc4f4zb7-0-0-beta-19";
|
|
92
|
-
|
|
93
|
-
const row = "r1otpg647-0-0-beta-19";
|
|
94
|
-
const rowClassname = `rdg-row ${row}`;
|
|
95
|
-
const rowSelected = "rel5gk27-0-0-beta-19";
|
|
96
|
-
const rowSelectedClassname = `rdg-row-selected`;
|
|
97
|
-
const rowSelectedWithFrozenCell = "r1qymf1z7-0-0-beta-19";
|
|
98
|
-
|
|
99
|
-
const checkboxLabel = "c8rwwhf7-0-0-beta-19";
|
|
100
|
-
const checkboxLabelClassname = `rdg-checkbox-label ${checkboxLabel}`;
|
|
101
|
-
const checkboxInput = "c1rb4brs7-0-0-beta-19";
|
|
102
|
-
const checkboxInputClassname = `rdg-checkbox-input ${checkboxInput}`;
|
|
103
|
-
const checkbox = "c1bvvwcc7-0-0-beta-19";
|
|
104
|
-
const checkboxClassname = `rdg-checkbox ${checkbox}`;
|
|
105
|
-
const checkboxLabelDisabled = "c1yg790j7-0-0-beta-19";
|
|
106
|
-
const checkboxLabelDisabledClassname = `rdg-checkbox-label-disabled ${checkboxLabelDisabled}`;
|
|
107
|
-
function checkboxFormatter({
|
|
108
|
-
onChange,
|
|
109
|
-
...props
|
|
110
|
-
}, ref) {
|
|
111
|
-
function handleChange(e) {
|
|
112
|
-
onChange(e.target.checked, e.nativeEvent.shiftKey);
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
return /*#__PURE__*/o("label", {
|
|
116
|
-
className: clsx(checkboxLabelClassname, props.disabled && checkboxLabelDisabledClassname),
|
|
117
|
-
children: [/*#__PURE__*/o("input", {
|
|
118
|
-
type: "checkbox",
|
|
119
|
-
ref: ref,
|
|
120
|
-
...props,
|
|
121
|
-
className: checkboxInputClassname,
|
|
122
|
-
onChange: handleChange
|
|
123
|
-
}), /*#__PURE__*/o("div", {
|
|
124
|
-
className: checkboxClassname
|
|
125
|
-
})]
|
|
126
|
-
});
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
const useLayoutEffect = typeof window === 'undefined' ? h : s;
|
|
130
|
-
|
|
131
|
-
function useFocusRef(isSelected) {
|
|
132
|
-
const ref = _$1(null);
|
|
133
|
-
useLayoutEffect(() => {
|
|
134
|
-
if (!isSelected) return;
|
|
135
|
-
ref.current?.focus({
|
|
136
|
-
preventScroll: true
|
|
137
|
-
});
|
|
138
|
-
}, [isSelected]);
|
|
139
|
-
return {
|
|
140
|
-
ref,
|
|
141
|
-
tabIndex: isSelected ? 0 : -1
|
|
142
|
-
};
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
const DataGridDefaultComponentsContext = /*#__PURE__*/B$2(undefined);
|
|
146
|
-
const DataGridDefaultComponentsProvider = DataGridDefaultComponentsContext.Provider;
|
|
147
|
-
function useDefaultComponents() {
|
|
148
|
-
return q$1(DataGridDefaultComponentsContext);
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
function SelectCellFormatter({
|
|
152
|
-
value,
|
|
153
|
-
isCellSelected,
|
|
154
|
-
disabled,
|
|
155
|
-
onChange,
|
|
156
|
-
'aria-label': ariaLabel,
|
|
157
|
-
'aria-labelledby': ariaLabelledBy
|
|
158
|
-
}) {
|
|
159
|
-
const {
|
|
160
|
-
ref,
|
|
161
|
-
tabIndex
|
|
162
|
-
} = useFocusRef(isCellSelected);
|
|
163
|
-
const checkboxFormatter = useDefaultComponents().checkboxFormatter;
|
|
164
|
-
return /*#__PURE__*/o(p$1, {
|
|
165
|
-
children: checkboxFormatter({
|
|
166
|
-
'aria-label': ariaLabel,
|
|
167
|
-
'aria-labelledby': ariaLabelledBy,
|
|
168
|
-
tabIndex,
|
|
169
|
-
disabled,
|
|
170
|
-
checked: value,
|
|
171
|
-
onChange
|
|
172
|
-
}, ref)
|
|
173
|
-
});
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
function valueFormatter(props) {
|
|
177
|
-
try {
|
|
178
|
-
return /*#__PURE__*/o(p$1, {
|
|
179
|
-
children: props.row[props.column.key]
|
|
180
|
-
});
|
|
181
|
-
} catch {
|
|
182
|
-
return null;
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
const groupCellContent = "gb8l2vs7-0-0-beta-19";
|
|
187
|
-
const groupCellContentClassname = `rdg-group-cell-content ${groupCellContent}`;
|
|
188
|
-
const caret = "c1ggynjl7-0-0-beta-19";
|
|
189
|
-
const caretClassname = `rdg-caret ${caret}`;
|
|
190
|
-
function toggleGroupFormatter(props) {
|
|
191
|
-
return /*#__PURE__*/o(ToggleGroup, { ...props
|
|
192
|
-
});
|
|
193
|
-
}
|
|
194
|
-
function ToggleGroup({
|
|
195
|
-
groupKey,
|
|
196
|
-
isExpanded,
|
|
197
|
-
isCellSelected,
|
|
198
|
-
toggleGroup
|
|
199
|
-
}) {
|
|
200
|
-
const {
|
|
201
|
-
ref,
|
|
202
|
-
tabIndex
|
|
203
|
-
} = useFocusRef(isCellSelected);
|
|
204
|
-
|
|
205
|
-
function handleKeyDown({
|
|
206
|
-
key
|
|
207
|
-
}) {
|
|
208
|
-
if (key === 'Enter') {
|
|
209
|
-
toggleGroup();
|
|
210
|
-
}
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
const d = isExpanded ? 'M1 1 L 7 7 L 13 1' : 'M1 7 L 7 1 L 13 7';
|
|
214
|
-
return /*#__PURE__*/o("span", {
|
|
215
|
-
ref: ref,
|
|
216
|
-
className: groupCellContentClassname,
|
|
217
|
-
tabIndex: tabIndex,
|
|
218
|
-
onKeyDown: handleKeyDown,
|
|
219
|
-
children: [groupKey, /*#__PURE__*/o("svg", {
|
|
220
|
-
viewBox: "0 0 14 8",
|
|
221
|
-
width: "14",
|
|
222
|
-
height: "8",
|
|
223
|
-
className: caretClassname,
|
|
224
|
-
"aria-hidden": true,
|
|
225
|
-
children: /*#__PURE__*/o("path", {
|
|
226
|
-
d: d
|
|
227
|
-
})
|
|
228
|
-
})]
|
|
229
|
-
});
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
const RowSelectionContext = /*#__PURE__*/B$2(undefined);
|
|
233
|
-
const RowSelectionProvider = RowSelectionContext.Provider;
|
|
234
|
-
const RowSelectionChangeContext = /*#__PURE__*/B$2(undefined);
|
|
235
|
-
const RowSelectionChangeProvider = RowSelectionChangeContext.Provider;
|
|
236
|
-
function useRowSelection() {
|
|
237
|
-
const rowSelectionContext = q$1(RowSelectionContext);
|
|
238
|
-
const rowSelectionChangeContext = q$1(RowSelectionChangeContext);
|
|
239
|
-
|
|
240
|
-
if (rowSelectionContext === undefined || rowSelectionChangeContext === undefined) {
|
|
241
|
-
throw new Error('useRowSelection must be used within DataGrid cells');
|
|
242
|
-
}
|
|
243
|
-
|
|
244
|
-
return [rowSelectionContext, rowSelectionChangeContext];
|
|
245
|
-
}
|
|
246
|
-
|
|
247
|
-
const SELECT_COLUMN_KEY = 'select-row';
|
|
248
|
-
|
|
249
|
-
function SelectFormatter(props) {
|
|
250
|
-
const [isRowSelected, onRowSelectionChange] = useRowSelection();
|
|
251
|
-
return /*#__PURE__*/o(SelectCellFormatter, {
|
|
252
|
-
"aria-label": "Select",
|
|
253
|
-
isCellSelected: props.isCellSelected,
|
|
254
|
-
value: isRowSelected,
|
|
255
|
-
onChange: (checked, isShiftClick) => {
|
|
256
|
-
onRowSelectionChange({
|
|
257
|
-
row: props.row,
|
|
258
|
-
checked,
|
|
259
|
-
isShiftClick
|
|
260
|
-
});
|
|
261
|
-
}
|
|
262
|
-
});
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
function SelectGroupFormatter(props) {
|
|
266
|
-
const [isRowSelected, onRowSelectionChange] = useRowSelection();
|
|
267
|
-
return /*#__PURE__*/o(SelectCellFormatter, {
|
|
268
|
-
"aria-label": "Select Group",
|
|
269
|
-
isCellSelected: props.isCellSelected,
|
|
270
|
-
value: isRowSelected,
|
|
271
|
-
onChange: checked => {
|
|
272
|
-
onRowSelectionChange({
|
|
273
|
-
row: props.row,
|
|
274
|
-
checked,
|
|
275
|
-
isShiftClick: false
|
|
276
|
-
});
|
|
277
|
-
}
|
|
278
|
-
});
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
const SelectColumn = {
|
|
282
|
-
key: SELECT_COLUMN_KEY,
|
|
283
|
-
name: '',
|
|
284
|
-
width: 35,
|
|
285
|
-
minWidth: 35,
|
|
286
|
-
maxWidth: 35,
|
|
287
|
-
resizable: false,
|
|
288
|
-
sortable: false,
|
|
289
|
-
frozen: true,
|
|
290
|
-
|
|
291
|
-
headerRenderer(props) {
|
|
292
|
-
return /*#__PURE__*/o(SelectCellFormatter, {
|
|
293
|
-
"aria-label": "Select All",
|
|
294
|
-
isCellSelected: props.isCellSelected,
|
|
295
|
-
value: props.allRowsSelected,
|
|
296
|
-
onChange: props.onAllRowsSelectionChange
|
|
297
|
-
});
|
|
298
|
-
},
|
|
299
|
-
|
|
300
|
-
formatter(props) {
|
|
301
|
-
return /*#__PURE__*/o(SelectFormatter, { ...props
|
|
302
|
-
});
|
|
303
|
-
},
|
|
304
|
-
|
|
305
|
-
groupFormatter(props) {
|
|
306
|
-
return /*#__PURE__*/o(SelectGroupFormatter, { ...props
|
|
307
|
-
});
|
|
308
|
-
}
|
|
309
|
-
|
|
310
|
-
};
|
|
78
|
+
var _=0;function o(o,e,n,t,f,l){var s,u,a={};for(u in e)"ref"==u?s=e[u]:a[u]=e[u];var i={type:o,props:a,key:n,ref:s,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:--_,__source:f,__self:l};if("function"==typeof o&&(s=o.defaultProps))for(u in s)void 0===a[u]&&(a[u]=s[u]);return l$1.vnode&&l$1.vnode(i),i}
|
|
311
79
|
|
|
312
80
|
function getColSpan(column, lastFrozenColumnIndex, args) {
|
|
313
81
|
const colSpan = typeof column.colSpan === 'function' ? column.colSpan(args) : 1;
|
|
314
|
-
|
|
315
82
|
if (Number.isInteger(colSpan) && colSpan > 1 && (!column.frozen || column.idx + colSpan - 1 <= lastFrozenColumnIndex)) {
|
|
316
83
|
return colSpan;
|
|
317
84
|
}
|
|
318
|
-
|
|
319
85
|
return undefined;
|
|
320
86
|
}
|
|
321
87
|
|
|
@@ -326,6 +92,21 @@ function scrollIntoView(element) {
|
|
|
326
92
|
});
|
|
327
93
|
}
|
|
328
94
|
|
|
95
|
+
function createCellEvent(event) {
|
|
96
|
+
let defaultPrevented = false;
|
|
97
|
+
const cellEvent = {
|
|
98
|
+
...event,
|
|
99
|
+
preventGridDefault() {
|
|
100
|
+
defaultPrevented = true;
|
|
101
|
+
},
|
|
102
|
+
isGridDefaultPrevented() {
|
|
103
|
+
return defaultPrevented;
|
|
104
|
+
}
|
|
105
|
+
};
|
|
106
|
+
Object.setPrototypeOf(cellEvent, Object.getPrototypeOf(event));
|
|
107
|
+
return cellEvent;
|
|
108
|
+
}
|
|
109
|
+
|
|
329
110
|
const nonInputKeys = new Set(['Unidentified', 'Alt', 'AltGraph', 'CapsLock', 'Control', 'Fn', 'FnLock', 'Meta', 'NumLock', 'ScrollLock', 'Shift', 'Tab', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'End', 'Home', 'PageDown', 'PageUp', 'Insert', 'ContextMenu', 'Escape', 'Pause', 'Play', 'PrintScreen', 'F1', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12']);
|
|
330
111
|
function isCtrlKeyHeldDown(e) {
|
|
331
112
|
return (e.ctrlKey || e.metaKey) && e.key !== 'Control';
|
|
@@ -338,30 +119,27 @@ function onEditorNavigation({
|
|
|
338
119
|
target
|
|
339
120
|
}) {
|
|
340
121
|
if (key === 'Tab' && (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement)) {
|
|
341
|
-
return target.matches('.rdg-editor-container > :only-child, .rdg-editor-container > label:only-child > :only-child');
|
|
122
|
+
return target.matches('.rdg-editor-container > :only-child, .rdg-editor-container > label:only-child > :only-child, .rdg-editor-container > div:only-child > label:only-child > :only-child');
|
|
342
123
|
}
|
|
343
|
-
|
|
344
124
|
return false;
|
|
345
125
|
}
|
|
346
126
|
|
|
347
|
-
const measuringCellClassname = "m1l09lto7-0-0-beta-
|
|
127
|
+
const measuringCellClassname = "m1l09lto7-0-0-beta-33";
|
|
348
128
|
function renderMeasuringCells(viewportColumns) {
|
|
349
|
-
return
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
129
|
+
return viewportColumns.map(({
|
|
130
|
+
key,
|
|
131
|
+
idx,
|
|
132
|
+
minWidth,
|
|
133
|
+
maxWidth
|
|
134
|
+
}) => /*#__PURE__*/o("div", {
|
|
135
|
+
className: measuringCellClassname,
|
|
136
|
+
style: {
|
|
137
|
+
gridColumnStart: idx + 1,
|
|
353
138
|
minWidth,
|
|
354
139
|
maxWidth
|
|
355
|
-
}
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
gridColumnStart: idx + 1,
|
|
359
|
-
minWidth,
|
|
360
|
-
maxWidth
|
|
361
|
-
},
|
|
362
|
-
"data-measuring-cell-key": key
|
|
363
|
-
}, key))
|
|
364
|
-
});
|
|
140
|
+
},
|
|
141
|
+
"data-measuring-cell-key": key
|
|
142
|
+
}, key));
|
|
365
143
|
}
|
|
366
144
|
|
|
367
145
|
function isSelectedCellEditable({
|
|
@@ -375,7 +153,7 @@ function isSelectedCellEditable({
|
|
|
375
153
|
return !isGroupRow(row) && isCellEditable(column, row);
|
|
376
154
|
}
|
|
377
155
|
function isCellEditable(column, row) {
|
|
378
|
-
return column.
|
|
156
|
+
return column.renderEditCell != null && !column.rowGroup && (typeof column.editable === 'function' ? column.editable(row) : column.editable) !== false;
|
|
379
157
|
}
|
|
380
158
|
function getSelectedCellColSpan({
|
|
381
159
|
rows,
|
|
@@ -388,40 +166,33 @@ function getSelectedCellColSpan({
|
|
|
388
166
|
}) {
|
|
389
167
|
const topSummaryRowsCount = topSummaryRows?.length ?? 0;
|
|
390
168
|
const minRowIdx = -1 - topSummaryRowsCount;
|
|
391
|
-
|
|
392
169
|
if (rowIdx === minRowIdx) {
|
|
393
170
|
return getColSpan(column, lastFrozenColumnIndex, {
|
|
394
171
|
type: 'HEADER'
|
|
395
172
|
});
|
|
396
173
|
}
|
|
397
|
-
|
|
398
174
|
if (topSummaryRows && rowIdx > minRowIdx && rowIdx <= topSummaryRowsCount + minRowIdx) {
|
|
399
175
|
return getColSpan(column, lastFrozenColumnIndex, {
|
|
400
176
|
type: 'SUMMARY',
|
|
401
177
|
row: topSummaryRows[rowIdx + topSummaryRowsCount]
|
|
402
178
|
});
|
|
403
179
|
}
|
|
404
|
-
|
|
405
180
|
if (rowIdx >= 0 && rowIdx < rows.length) {
|
|
406
181
|
const row = rows[rowIdx];
|
|
407
|
-
|
|
408
182
|
if (!isGroupRow(row)) {
|
|
409
183
|
return getColSpan(column, lastFrozenColumnIndex, {
|
|
410
184
|
type: 'ROW',
|
|
411
185
|
row
|
|
412
186
|
});
|
|
413
187
|
}
|
|
414
|
-
|
|
415
|
-
return undefined;
|
|
188
|
+
return;
|
|
416
189
|
}
|
|
417
|
-
|
|
418
190
|
if (bottomSummaryRows) {
|
|
419
191
|
return getColSpan(column, lastFrozenColumnIndex, {
|
|
420
192
|
type: 'SUMMARY',
|
|
421
193
|
row: bottomSummaryRows[rowIdx - rows.length]
|
|
422
194
|
});
|
|
423
195
|
}
|
|
424
|
-
|
|
425
196
|
return undefined;
|
|
426
197
|
}
|
|
427
198
|
function getNextSelectedCellPosition({
|
|
@@ -445,13 +216,11 @@ function getNextSelectedCellPosition({
|
|
|
445
216
|
idx: nextIdx,
|
|
446
217
|
rowIdx: nextRowIdx
|
|
447
218
|
} = nextPosition;
|
|
448
|
-
|
|
449
219
|
const setColSpan = moveRight => {
|
|
450
220
|
if (nextRowIdx >= 0 && nextRowIdx < rows.length) {
|
|
451
221
|
const row = rows[nextRowIdx];
|
|
452
222
|
if (isGroupRow(row)) return;
|
|
453
223
|
}
|
|
454
|
-
|
|
455
224
|
for (const column of colSpanColumns) {
|
|
456
225
|
const colIdx = column.idx;
|
|
457
226
|
if (colIdx > nextIdx) break;
|
|
@@ -464,57 +233,40 @@ function getNextSelectedCellPosition({
|
|
|
464
233
|
column,
|
|
465
234
|
isGroupRow
|
|
466
235
|
});
|
|
467
|
-
|
|
468
236
|
if (colSpan && nextIdx > colIdx && nextIdx < colSpan + colIdx) {
|
|
469
237
|
nextIdx = colIdx + (moveRight ? colSpan : 0);
|
|
470
238
|
break;
|
|
471
239
|
}
|
|
472
240
|
}
|
|
473
241
|
};
|
|
474
|
-
|
|
475
242
|
if (isCellWithinBounds(nextPosition)) {
|
|
476
243
|
setColSpan(nextIdx - currentIdx > 0);
|
|
477
244
|
}
|
|
478
|
-
|
|
479
|
-
if (cellNavigationMode !== 'NONE') {
|
|
245
|
+
if (cellNavigationMode === 'CHANGE_ROW') {
|
|
480
246
|
const columnsCount = columns.length;
|
|
481
247
|
const isAfterLastColumn = nextIdx === columnsCount;
|
|
482
248
|
const isBeforeFirstColumn = nextIdx === -1;
|
|
483
|
-
|
|
484
249
|
if (isAfterLastColumn) {
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
if (!isLastRow) {
|
|
489
|
-
nextIdx = 0;
|
|
490
|
-
nextRowIdx += 1;
|
|
491
|
-
}
|
|
492
|
-
} else {
|
|
250
|
+
const isLastRow = nextRowIdx === maxRowIdx;
|
|
251
|
+
if (!isLastRow) {
|
|
493
252
|
nextIdx = 0;
|
|
253
|
+
nextRowIdx += 1;
|
|
494
254
|
}
|
|
495
255
|
} else if (isBeforeFirstColumn) {
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
if (!isFirstRow) {
|
|
500
|
-
nextRowIdx -= 1;
|
|
501
|
-
nextIdx = columnsCount - 1;
|
|
502
|
-
}
|
|
503
|
-
} else {
|
|
256
|
+
const isFirstRow = nextRowIdx === minRowIdx;
|
|
257
|
+
if (!isFirstRow) {
|
|
258
|
+
nextRowIdx -= 1;
|
|
504
259
|
nextIdx = columnsCount - 1;
|
|
505
260
|
}
|
|
506
|
-
|
|
507
261
|
setColSpan(false);
|
|
508
262
|
}
|
|
509
263
|
}
|
|
510
|
-
|
|
511
264
|
return {
|
|
512
265
|
idx: nextIdx,
|
|
513
266
|
rowIdx: nextRowIdx
|
|
514
267
|
};
|
|
515
268
|
}
|
|
516
269
|
function canExitGrid({
|
|
517
|
-
cellNavigationMode,
|
|
518
270
|
maxColIdx,
|
|
519
271
|
minRowIdx,
|
|
520
272
|
maxRowIdx,
|
|
@@ -524,17 +276,20 @@ function canExitGrid({
|
|
|
524
276
|
},
|
|
525
277
|
shiftKey
|
|
526
278
|
}) {
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
return shiftKey ? atFirstCellInRow && atFirstRow : atLastCellInRow && atLastRow;
|
|
533
|
-
}
|
|
534
|
-
|
|
535
|
-
return false;
|
|
279
|
+
const atLastCellInRow = idx === maxColIdx;
|
|
280
|
+
const atFirstCellInRow = idx === 0;
|
|
281
|
+
const atLastRow = rowIdx === maxRowIdx;
|
|
282
|
+
const atFirstRow = rowIdx === minRowIdx;
|
|
283
|
+
return shiftKey ? atFirstCellInRow && atFirstRow : atLastCellInRow && atLastRow;
|
|
536
284
|
}
|
|
537
285
|
|
|
286
|
+
const cell = "c1wupbe7-0-0-beta-33";
|
|
287
|
+
const cellClassname = `rdg-cell ${cell}`;
|
|
288
|
+
const cellFrozen = "cd0kgiy7-0-0-beta-33";
|
|
289
|
+
const cellFrozenClassname = `rdg-cell-frozen ${cellFrozen}`;
|
|
290
|
+
const cellFrozenLast = "c1730fa47-0-0-beta-33";
|
|
291
|
+
const cellFrozenLastClassname = `rdg-cell-frozen-last ${cellFrozenLast}`;
|
|
292
|
+
|
|
538
293
|
function getRowStyle(rowIdx, height) {
|
|
539
294
|
if (height !== undefined) {
|
|
540
295
|
return {
|
|
@@ -542,7 +297,6 @@ function getRowStyle(rowIdx, height) {
|
|
|
542
297
|
'--rdg-row-height': `${height}px`
|
|
543
298
|
};
|
|
544
299
|
}
|
|
545
|
-
|
|
546
300
|
return {
|
|
547
301
|
'--rdg-grid-row-start': rowIdx
|
|
548
302
|
};
|
|
@@ -576,63 +330,247 @@ function clampColumnWidth(width, {
|
|
|
576
330
|
maxWidth
|
|
577
331
|
}) {
|
|
578
332
|
width = max(width, minWidth);
|
|
579
|
-
|
|
580
333
|
if (typeof maxWidth === 'number' && maxWidth >= minWidth) {
|
|
581
334
|
return min(width, maxWidth);
|
|
582
335
|
}
|
|
583
|
-
|
|
584
336
|
return width;
|
|
585
337
|
}
|
|
586
338
|
|
|
587
|
-
const
|
|
588
|
-
const
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
339
|
+
const checkboxLabel = "c1hs68w07-0-0-beta-33";
|
|
340
|
+
const checkboxLabelClassname = `rdg-checkbox-label ${checkboxLabel}`;
|
|
341
|
+
const checkboxInput = "cojpd0n7-0-0-beta-33";
|
|
342
|
+
const checkboxInputClassname = `rdg-checkbox-input ${checkboxInput}`;
|
|
343
|
+
const checkbox = "cwsfieb7-0-0-beta-33";
|
|
344
|
+
const checkboxClassname = `rdg-checkbox ${checkbox}`;
|
|
345
|
+
const checkboxLabelDisabled = "c1fgadbl7-0-0-beta-33";
|
|
346
|
+
const checkboxLabelDisabledClassname = `rdg-checkbox-label-disabled ${checkboxLabelDisabled}`;
|
|
347
|
+
function renderCheckbox({
|
|
348
|
+
onChange,
|
|
349
|
+
...props
|
|
597
350
|
}) {
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
351
|
+
function handleChange(e) {
|
|
352
|
+
onChange(e.target.checked, e.nativeEvent.shiftKey);
|
|
353
|
+
}
|
|
354
|
+
return /*#__PURE__*/o("label", {
|
|
355
|
+
className: clsx(checkboxLabelClassname, props.disabled && checkboxLabelDisabledClassname),
|
|
356
|
+
children: [/*#__PURE__*/o("input", {
|
|
357
|
+
type: "checkbox",
|
|
358
|
+
...props,
|
|
359
|
+
className: checkboxInputClassname,
|
|
360
|
+
onChange: handleChange
|
|
361
|
+
}), /*#__PURE__*/o("div", {
|
|
362
|
+
className: checkboxClassname
|
|
363
|
+
})]
|
|
364
|
+
});
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
const groupCellContent = "g1w3c5217-0-0-beta-33";
|
|
368
|
+
const groupCellContentClassname = `rdg-group-cell-content ${groupCellContent}`;
|
|
369
|
+
const caret = "cm5tyhw7-0-0-beta-33";
|
|
370
|
+
const caretClassname = `rdg-caret ${caret}`;
|
|
371
|
+
function renderToggleGroup(props) {
|
|
372
|
+
return /*#__PURE__*/o(ToggleGroup, {
|
|
373
|
+
...props
|
|
374
|
+
});
|
|
375
|
+
}
|
|
376
|
+
function ToggleGroup({
|
|
377
|
+
groupKey,
|
|
378
|
+
isExpanded,
|
|
379
|
+
tabIndex,
|
|
380
|
+
toggleGroup
|
|
381
|
+
}) {
|
|
382
|
+
function handleKeyDown({
|
|
383
|
+
key
|
|
384
|
+
}) {
|
|
385
|
+
if (key === 'Enter') {
|
|
386
|
+
toggleGroup();
|
|
387
|
+
}
|
|
388
|
+
}
|
|
389
|
+
const d = isExpanded ? 'M1 1 L 7 7 L 13 1' : 'M1 7 L 7 1 L 13 7';
|
|
390
|
+
return /*#__PURE__*/o("span", {
|
|
391
|
+
className: groupCellContentClassname,
|
|
392
|
+
tabIndex: tabIndex,
|
|
393
|
+
onKeyDown: handleKeyDown,
|
|
394
|
+
children: [groupKey, /*#__PURE__*/o("svg", {
|
|
395
|
+
viewBox: "0 0 14 8",
|
|
396
|
+
width: "14",
|
|
397
|
+
height: "8",
|
|
398
|
+
className: caretClassname,
|
|
399
|
+
"aria-hidden": true,
|
|
400
|
+
children: /*#__PURE__*/o("path", {
|
|
401
|
+
d: d
|
|
402
|
+
})
|
|
403
|
+
})]
|
|
404
|
+
});
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
function renderValue(props) {
|
|
408
|
+
try {
|
|
409
|
+
return props.row[props.column.key];
|
|
410
|
+
} catch {
|
|
411
|
+
return null;
|
|
412
|
+
}
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
const DataGridDefaultRenderersContext = /*#__PURE__*/G$1(undefined);
|
|
416
|
+
const DataGridDefaultRenderersProvider = DataGridDefaultRenderersContext.Provider;
|
|
417
|
+
function useDefaultRenderers() {
|
|
418
|
+
return q$1(DataGridDefaultRenderersContext);
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
function SelectCellFormatter({
|
|
422
|
+
value,
|
|
423
|
+
tabIndex,
|
|
424
|
+
disabled,
|
|
425
|
+
onChange,
|
|
426
|
+
'aria-label': ariaLabel,
|
|
427
|
+
'aria-labelledby': ariaLabelledBy
|
|
428
|
+
}) {
|
|
429
|
+
const renderCheckbox = useDefaultRenderers().renderCheckbox;
|
|
430
|
+
return renderCheckbox({
|
|
431
|
+
'aria-label': ariaLabel,
|
|
432
|
+
'aria-labelledby': ariaLabelledBy,
|
|
433
|
+
tabIndex,
|
|
434
|
+
disabled,
|
|
435
|
+
checked: value,
|
|
436
|
+
onChange
|
|
437
|
+
});
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
const RowSelectionContext = /*#__PURE__*/G$1(undefined);
|
|
441
|
+
const RowSelectionProvider = RowSelectionContext.Provider;
|
|
442
|
+
const RowSelectionChangeContext = /*#__PURE__*/G$1(undefined);
|
|
443
|
+
const RowSelectionChangeProvider = RowSelectionChangeContext.Provider;
|
|
444
|
+
function useRowSelection() {
|
|
445
|
+
const rowSelectionContext = q$1(RowSelectionContext);
|
|
446
|
+
const rowSelectionChangeContext = q$1(RowSelectionChangeContext);
|
|
447
|
+
if (rowSelectionContext === undefined || rowSelectionChangeContext === undefined) {
|
|
448
|
+
throw new Error('useRowSelection must be used within DataGrid cells');
|
|
449
|
+
}
|
|
450
|
+
return [rowSelectionContext, rowSelectionChangeContext];
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
const SELECT_COLUMN_KEY = 'select-row';
|
|
454
|
+
function HeaderRenderer(props) {
|
|
455
|
+
const [isRowSelected, onRowSelectionChange] = useRowSelection();
|
|
456
|
+
return /*#__PURE__*/o(SelectCellFormatter, {
|
|
457
|
+
"aria-label": "Select All",
|
|
458
|
+
tabIndex: props.tabIndex,
|
|
459
|
+
value: isRowSelected,
|
|
460
|
+
onChange: checked => {
|
|
461
|
+
onRowSelectionChange({
|
|
462
|
+
type: 'HEADER',
|
|
463
|
+
checked
|
|
464
|
+
});
|
|
465
|
+
}
|
|
466
|
+
});
|
|
467
|
+
}
|
|
468
|
+
function SelectFormatter(props) {
|
|
469
|
+
const [isRowSelected, onRowSelectionChange] = useRowSelection();
|
|
470
|
+
return /*#__PURE__*/o(SelectCellFormatter, {
|
|
471
|
+
"aria-label": "Select",
|
|
472
|
+
tabIndex: props.tabIndex,
|
|
473
|
+
value: isRowSelected,
|
|
474
|
+
onChange: (checked, isShiftClick) => {
|
|
475
|
+
onRowSelectionChange({
|
|
476
|
+
type: 'ROW',
|
|
477
|
+
row: props.row,
|
|
478
|
+
checked,
|
|
479
|
+
isShiftClick
|
|
480
|
+
});
|
|
481
|
+
}
|
|
482
|
+
});
|
|
483
|
+
}
|
|
484
|
+
function SelectGroupFormatter(props) {
|
|
485
|
+
const [isRowSelected, onRowSelectionChange] = useRowSelection();
|
|
486
|
+
return /*#__PURE__*/o(SelectCellFormatter, {
|
|
487
|
+
"aria-label": "Select Group",
|
|
488
|
+
tabIndex: props.tabIndex,
|
|
489
|
+
value: isRowSelected,
|
|
490
|
+
onChange: checked => {
|
|
491
|
+
onRowSelectionChange({
|
|
492
|
+
type: 'ROW',
|
|
493
|
+
row: props.row,
|
|
494
|
+
checked,
|
|
495
|
+
isShiftClick: false
|
|
496
|
+
});
|
|
497
|
+
}
|
|
498
|
+
});
|
|
499
|
+
}
|
|
500
|
+
const SelectColumn = {
|
|
501
|
+
key: SELECT_COLUMN_KEY,
|
|
502
|
+
name: '',
|
|
503
|
+
width: 35,
|
|
504
|
+
minWidth: 35,
|
|
505
|
+
maxWidth: 35,
|
|
506
|
+
resizable: false,
|
|
507
|
+
sortable: false,
|
|
508
|
+
frozen: true,
|
|
509
|
+
renderHeaderCell(props) {
|
|
510
|
+
return /*#__PURE__*/o(HeaderRenderer, {
|
|
511
|
+
...props
|
|
512
|
+
});
|
|
513
|
+
},
|
|
514
|
+
renderCell(props) {
|
|
515
|
+
return /*#__PURE__*/o(SelectFormatter, {
|
|
516
|
+
...props
|
|
517
|
+
});
|
|
518
|
+
},
|
|
519
|
+
renderGroupCell(props) {
|
|
520
|
+
return /*#__PURE__*/o(SelectGroupFormatter, {
|
|
521
|
+
...props
|
|
522
|
+
});
|
|
523
|
+
}
|
|
524
|
+
};
|
|
631
525
|
|
|
526
|
+
const DEFAULT_COLUMN_WIDTH = 'auto';
|
|
527
|
+
const DEFAULT_COLUMN_MIN_WIDTH = 50;
|
|
528
|
+
function useCalculatedColumns({
|
|
529
|
+
rawColumns,
|
|
530
|
+
measuredColumnWidths,
|
|
531
|
+
resizedColumnWidths,
|
|
532
|
+
viewportWidth,
|
|
533
|
+
scrollLeft,
|
|
534
|
+
defaultColumnOptions,
|
|
535
|
+
rawGroupBy,
|
|
536
|
+
enableVirtualization
|
|
537
|
+
}) {
|
|
538
|
+
const defaultWidth = defaultColumnOptions?.width ?? DEFAULT_COLUMN_WIDTH;
|
|
539
|
+
const defaultMinWidth = defaultColumnOptions?.minWidth ?? DEFAULT_COLUMN_MIN_WIDTH;
|
|
540
|
+
const defaultMaxWidth = defaultColumnOptions?.maxWidth ?? undefined;
|
|
541
|
+
const defaultFormatter = defaultColumnOptions?.renderCell ?? renderValue;
|
|
542
|
+
const defaultSortable = defaultColumnOptions?.sortable ?? false;
|
|
543
|
+
const defaultResizable = defaultColumnOptions?.resizable ?? false;
|
|
544
|
+
const {
|
|
545
|
+
columns,
|
|
546
|
+
colSpanColumns,
|
|
547
|
+
lastFrozenColumnIndex,
|
|
548
|
+
groupBy
|
|
549
|
+
} = F$1(() => {
|
|
550
|
+
const groupBy = [];
|
|
551
|
+
let lastFrozenColumnIndex = -1;
|
|
552
|
+
const columns = rawColumns.map(rawColumn => {
|
|
553
|
+
const rowGroup = rawGroupBy?.includes(rawColumn.key) ?? false;
|
|
554
|
+
const frozen = rowGroup || rawColumn.frozen || false;
|
|
555
|
+
const column = {
|
|
556
|
+
...rawColumn,
|
|
557
|
+
idx: 0,
|
|
558
|
+
frozen,
|
|
559
|
+
isLastFrozenColumn: false,
|
|
560
|
+
rowGroup,
|
|
561
|
+
width: rawColumn.width ?? defaultWidth,
|
|
562
|
+
minWidth: rawColumn.minWidth ?? defaultMinWidth,
|
|
563
|
+
maxWidth: rawColumn.maxWidth ?? defaultMaxWidth,
|
|
564
|
+
sortable: rawColumn.sortable ?? defaultSortable,
|
|
565
|
+
resizable: rawColumn.resizable ?? defaultResizable,
|
|
566
|
+
renderCell: rawColumn.renderCell ?? defaultFormatter
|
|
567
|
+
};
|
|
568
|
+
if (rowGroup) {
|
|
569
|
+
column.renderGroupCell ??= renderToggleGroup;
|
|
570
|
+
}
|
|
632
571
|
if (frozen) {
|
|
633
572
|
lastFrozenColumnIndex++;
|
|
634
573
|
}
|
|
635
|
-
|
|
636
574
|
return column;
|
|
637
575
|
});
|
|
638
576
|
columns.sort(({
|
|
@@ -644,42 +582,33 @@ function useCalculatedColumns({
|
|
|
644
582
|
}) => {
|
|
645
583
|
if (aKey === SELECT_COLUMN_KEY) return -1;
|
|
646
584
|
if (bKey === SELECT_COLUMN_KEY) return 1;
|
|
647
|
-
|
|
648
585
|
if (rawGroupBy?.includes(aKey)) {
|
|
649
586
|
if (rawGroupBy.includes(bKey)) {
|
|
650
587
|
return rawGroupBy.indexOf(aKey) - rawGroupBy.indexOf(bKey);
|
|
651
588
|
}
|
|
652
|
-
|
|
653
589
|
return -1;
|
|
654
590
|
}
|
|
655
|
-
|
|
656
591
|
if (rawGroupBy?.includes(bKey)) return 1;
|
|
657
|
-
|
|
658
592
|
if (frozenA) {
|
|
659
593
|
if (frozenB) return 0;
|
|
660
594
|
return -1;
|
|
661
595
|
}
|
|
662
|
-
|
|
663
596
|
if (frozenB) return 1;
|
|
664
597
|
return 0;
|
|
665
598
|
});
|
|
666
599
|
const colSpanColumns = [];
|
|
667
600
|
columns.forEach((column, idx) => {
|
|
668
601
|
column.idx = idx;
|
|
669
|
-
|
|
670
602
|
if (column.rowGroup) {
|
|
671
603
|
groupBy.push(column.key);
|
|
672
604
|
}
|
|
673
|
-
|
|
674
605
|
if (column.colSpan != null) {
|
|
675
606
|
colSpanColumns.push(column);
|
|
676
607
|
}
|
|
677
608
|
});
|
|
678
|
-
|
|
679
609
|
if (lastFrozenColumnIndex !== -1) {
|
|
680
610
|
columns[lastFrozenColumnIndex].isLastFrozenColumn = true;
|
|
681
611
|
}
|
|
682
|
-
|
|
683
612
|
return {
|
|
684
613
|
columns,
|
|
685
614
|
colSpanColumns,
|
|
@@ -692,21 +621,18 @@ function useCalculatedColumns({
|
|
|
692
621
|
layoutCssVars,
|
|
693
622
|
totalFrozenColumnWidth,
|
|
694
623
|
columnMetrics
|
|
695
|
-
} = F(() => {
|
|
624
|
+
} = F$1(() => {
|
|
696
625
|
const columnMetrics = new Map();
|
|
697
626
|
let left = 0;
|
|
698
627
|
let totalFrozenColumnWidth = 0;
|
|
699
628
|
const templateColumns = [];
|
|
700
|
-
|
|
701
629
|
for (const column of columns) {
|
|
702
|
-
let width =
|
|
703
|
-
|
|
630
|
+
let width = resizedColumnWidths.get(column.key) ?? measuredColumnWidths.get(column.key) ?? column.width;
|
|
704
631
|
if (typeof width === 'number') {
|
|
705
632
|
width = clampColumnWidth(width, column);
|
|
706
633
|
} else {
|
|
707
634
|
width = column.minWidth;
|
|
708
635
|
}
|
|
709
|
-
|
|
710
636
|
templateColumns.push(`${width}px`);
|
|
711
637
|
columnMetrics.set(column, {
|
|
712
638
|
width,
|
|
@@ -714,72 +640,55 @@ function useCalculatedColumns({
|
|
|
714
640
|
});
|
|
715
641
|
left += width;
|
|
716
642
|
}
|
|
717
|
-
|
|
718
643
|
if (lastFrozenColumnIndex !== -1) {
|
|
719
644
|
const columnMetric = columnMetrics.get(columns[lastFrozenColumnIndex]);
|
|
720
645
|
totalFrozenColumnWidth = columnMetric.left + columnMetric.width;
|
|
721
646
|
}
|
|
722
|
-
|
|
723
|
-
const layoutCssVars = {
|
|
724
|
-
gridTemplateColumns: templateColumns.join(' ')
|
|
725
|
-
};
|
|
726
|
-
|
|
647
|
+
const layoutCssVars = {};
|
|
727
648
|
for (let i = 0; i <= lastFrozenColumnIndex; i++) {
|
|
728
649
|
const column = columns[i];
|
|
729
650
|
layoutCssVars[`--rdg-frozen-left-${column.idx}`] = `${columnMetrics.get(column).left}px`;
|
|
730
651
|
}
|
|
731
|
-
|
|
732
652
|
return {
|
|
733
653
|
templateColumns,
|
|
734
654
|
layoutCssVars,
|
|
735
655
|
totalFrozenColumnWidth,
|
|
736
656
|
columnMetrics
|
|
737
657
|
};
|
|
738
|
-
}, [
|
|
739
|
-
const [colOverscanStartIdx, colOverscanEndIdx] = F(() => {
|
|
658
|
+
}, [measuredColumnWidths, resizedColumnWidths, columns, lastFrozenColumnIndex]);
|
|
659
|
+
const [colOverscanStartIdx, colOverscanEndIdx] = F$1(() => {
|
|
740
660
|
if (!enableVirtualization) {
|
|
741
661
|
return [0, columns.length - 1];
|
|
742
662
|
}
|
|
743
|
-
|
|
744
663
|
const viewportLeft = scrollLeft + totalFrozenColumnWidth;
|
|
745
664
|
const viewportRight = scrollLeft + viewportWidth;
|
|
746
665
|
const lastColIdx = columns.length - 1;
|
|
747
666
|
const firstUnfrozenColumnIdx = min(lastFrozenColumnIndex + 1, lastColIdx);
|
|
748
|
-
|
|
749
667
|
if (viewportLeft >= viewportRight) {
|
|
750
668
|
return [firstUnfrozenColumnIdx, firstUnfrozenColumnIdx];
|
|
751
669
|
}
|
|
752
|
-
|
|
753
670
|
let colVisibleStartIdx = firstUnfrozenColumnIdx;
|
|
754
|
-
|
|
755
671
|
while (colVisibleStartIdx < lastColIdx) {
|
|
756
672
|
const {
|
|
757
673
|
left,
|
|
758
674
|
width
|
|
759
675
|
} = columnMetrics.get(columns[colVisibleStartIdx]);
|
|
760
|
-
|
|
761
676
|
if (left + width > viewportLeft) {
|
|
762
677
|
break;
|
|
763
678
|
}
|
|
764
|
-
|
|
765
679
|
colVisibleStartIdx++;
|
|
766
680
|
}
|
|
767
|
-
|
|
768
681
|
let colVisibleEndIdx = colVisibleStartIdx;
|
|
769
|
-
|
|
770
682
|
while (colVisibleEndIdx < lastColIdx) {
|
|
771
683
|
const {
|
|
772
684
|
left,
|
|
773
685
|
width
|
|
774
686
|
} = columnMetrics.get(columns[colVisibleEndIdx]);
|
|
775
|
-
|
|
776
687
|
if (left + width >= viewportRight) {
|
|
777
688
|
break;
|
|
778
689
|
}
|
|
779
|
-
|
|
780
690
|
colVisibleEndIdx++;
|
|
781
691
|
}
|
|
782
|
-
|
|
783
692
|
const colOverscanStartIdx = max(firstUnfrozenColumnIdx, colVisibleStartIdx - 1);
|
|
784
693
|
const colOverscanEndIdx = min(lastColIdx, colVisibleEndIdx + 1);
|
|
785
694
|
return [colOverscanStartIdx, colOverscanEndIdx];
|
|
@@ -791,18 +700,98 @@ function useCalculatedColumns({
|
|
|
791
700
|
colOverscanEndIdx,
|
|
792
701
|
templateColumns,
|
|
793
702
|
layoutCssVars,
|
|
794
|
-
columnMetrics,
|
|
795
703
|
lastFrozenColumnIndex,
|
|
796
704
|
totalFrozenColumnWidth,
|
|
797
705
|
groupBy
|
|
798
706
|
};
|
|
799
707
|
}
|
|
800
708
|
|
|
709
|
+
const useLayoutEffect = typeof window === 'undefined' ? p : y;
|
|
710
|
+
|
|
711
|
+
function useColumnWidths(columns, viewportColumns, templateColumns, gridRef, gridWidth, resizedColumnWidths, measuredColumnWidths, setResizedColumnWidths, setMeasuredColumnWidths, onColumnResize) {
|
|
712
|
+
const prevGridWidthRef = _$1(gridWidth);
|
|
713
|
+
const columnsCanFlex = columns.length === viewportColumns.length;
|
|
714
|
+
const ignorePreviouslyMeasuredColumns = columnsCanFlex && gridWidth !== prevGridWidthRef.current;
|
|
715
|
+
const newTemplateColumns = [...templateColumns];
|
|
716
|
+
const columnsToMeasure = [];
|
|
717
|
+
for (const {
|
|
718
|
+
key,
|
|
719
|
+
idx,
|
|
720
|
+
width
|
|
721
|
+
} of viewportColumns) {
|
|
722
|
+
if (typeof width === 'string' && (ignorePreviouslyMeasuredColumns || !measuredColumnWidths.has(key)) && !resizedColumnWidths.has(key)) {
|
|
723
|
+
newTemplateColumns[idx] = width;
|
|
724
|
+
columnsToMeasure.push(key);
|
|
725
|
+
}
|
|
726
|
+
}
|
|
727
|
+
const gridTemplateColumns = newTemplateColumns.join(' ');
|
|
728
|
+
useLayoutEffect(() => {
|
|
729
|
+
prevGridWidthRef.current = gridWidth;
|
|
730
|
+
updateMeasuredWidths(columnsToMeasure);
|
|
731
|
+
});
|
|
732
|
+
function updateMeasuredWidths(columnsToMeasure) {
|
|
733
|
+
if (columnsToMeasure.length === 0) return;
|
|
734
|
+
setMeasuredColumnWidths(measuredColumnWidths => {
|
|
735
|
+
const newMeasuredColumnWidths = new Map(measuredColumnWidths);
|
|
736
|
+
let hasChanges = false;
|
|
737
|
+
for (const key of columnsToMeasure) {
|
|
738
|
+
const measuredWidth = measureColumnWidth(gridRef, key);
|
|
739
|
+
hasChanges ||= measuredWidth !== measuredColumnWidths.get(key);
|
|
740
|
+
if (measuredWidth === undefined) {
|
|
741
|
+
newMeasuredColumnWidths.delete(key);
|
|
742
|
+
} else {
|
|
743
|
+
newMeasuredColumnWidths.set(key, measuredWidth);
|
|
744
|
+
}
|
|
745
|
+
}
|
|
746
|
+
return hasChanges ? newMeasuredColumnWidths : measuredColumnWidths;
|
|
747
|
+
});
|
|
748
|
+
}
|
|
749
|
+
function handleColumnResize(column, nextWidth) {
|
|
750
|
+
const {
|
|
751
|
+
key: resizingKey
|
|
752
|
+
} = column;
|
|
753
|
+
const newTemplateColumns = [...templateColumns];
|
|
754
|
+
const columnsToMeasure = [];
|
|
755
|
+
for (const {
|
|
756
|
+
key,
|
|
757
|
+
idx,
|
|
758
|
+
width
|
|
759
|
+
} of viewportColumns) {
|
|
760
|
+
if (resizingKey === key) {
|
|
761
|
+
const width = typeof nextWidth === 'number' ? `${nextWidth}px` : nextWidth;
|
|
762
|
+
newTemplateColumns[idx] = width;
|
|
763
|
+
} else if (columnsCanFlex && typeof width === 'string' && !resizedColumnWidths.has(key)) {
|
|
764
|
+
newTemplateColumns[idx] = width;
|
|
765
|
+
columnsToMeasure.push(key);
|
|
766
|
+
}
|
|
767
|
+
}
|
|
768
|
+
gridRef.current.style.gridTemplateColumns = newTemplateColumns.join(' ');
|
|
769
|
+
const measuredWidth = typeof nextWidth === 'number' ? nextWidth : measureColumnWidth(gridRef, resizingKey);
|
|
770
|
+
pn(() => {
|
|
771
|
+
setResizedColumnWidths(resizedColumnWidths => {
|
|
772
|
+
const newResizedColumnWidths = new Map(resizedColumnWidths);
|
|
773
|
+
newResizedColumnWidths.set(resizingKey, measuredWidth);
|
|
774
|
+
return newResizedColumnWidths;
|
|
775
|
+
});
|
|
776
|
+
updateMeasuredWidths(columnsToMeasure);
|
|
777
|
+
});
|
|
778
|
+
onColumnResize?.(column.idx, measuredWidth);
|
|
779
|
+
}
|
|
780
|
+
return {
|
|
781
|
+
gridTemplateColumns,
|
|
782
|
+
handleColumnResize
|
|
783
|
+
};
|
|
784
|
+
}
|
|
785
|
+
function measureColumnWidth(gridRef, key) {
|
|
786
|
+
const selector = `[data-measuring-cell-key="${CSS.escape(key)}"]`;
|
|
787
|
+
const measuringCell = gridRef.current.querySelector(selector);
|
|
788
|
+
return measuringCell?.getBoundingClientRect().width;
|
|
789
|
+
}
|
|
790
|
+
|
|
801
791
|
function useGridDimensions() {
|
|
802
792
|
const gridRef = _$1(null);
|
|
803
|
-
const [inlineSize, setInlineSize] =
|
|
804
|
-
const [blockSize, setBlockSize] =
|
|
805
|
-
const [isWidthInitialized, setWidthInitialized] = p(false);
|
|
793
|
+
const [inlineSize, setInlineSize] = h(1);
|
|
794
|
+
const [blockSize, setBlockSize] = h(1);
|
|
806
795
|
useLayoutEffect(() => {
|
|
807
796
|
const {
|
|
808
797
|
ResizeObserver
|
|
@@ -822,23 +811,24 @@ function useGridDimensions() {
|
|
|
822
811
|
const initialHeight = height - offsetHeight + clientHeight;
|
|
823
812
|
setInlineSize(initialWidth);
|
|
824
813
|
setBlockSize(initialHeight);
|
|
825
|
-
setWidthInitialized(true);
|
|
826
814
|
const resizeObserver = new ResizeObserver(entries => {
|
|
827
815
|
const size = entries[0].contentBoxSize[0];
|
|
828
|
-
|
|
829
|
-
|
|
816
|
+
pn(() => {
|
|
817
|
+
setInlineSize(size.inlineSize);
|
|
818
|
+
setBlockSize(size.blockSize);
|
|
819
|
+
});
|
|
830
820
|
});
|
|
831
821
|
resizeObserver.observe(gridRef.current);
|
|
832
822
|
return () => {
|
|
833
823
|
resizeObserver.disconnect();
|
|
834
824
|
};
|
|
835
825
|
}, []);
|
|
836
|
-
return [gridRef, inlineSize, blockSize
|
|
826
|
+
return [gridRef, inlineSize, blockSize];
|
|
837
827
|
}
|
|
838
828
|
|
|
839
829
|
function useLatestFunc(fn) {
|
|
840
830
|
const ref = _$1(fn);
|
|
841
|
-
|
|
831
|
+
p(() => {
|
|
842
832
|
ref.current = fn;
|
|
843
833
|
});
|
|
844
834
|
const callbackFn = T$1((...args) => {
|
|
@@ -847,32 +837,20 @@ function useLatestFunc(fn) {
|
|
|
847
837
|
return fn ? callbackFn : fn;
|
|
848
838
|
}
|
|
849
839
|
|
|
850
|
-
function
|
|
851
|
-
const [isChildFocused, setIsChildFocused] =
|
|
852
|
-
|
|
840
|
+
function useRovingTabIndex(isSelected) {
|
|
841
|
+
const [isChildFocused, setIsChildFocused] = h(false);
|
|
853
842
|
if (isChildFocused && !isSelected) {
|
|
854
843
|
setIsChildFocused(false);
|
|
855
844
|
}
|
|
856
|
-
|
|
857
|
-
const ref = T$1(cell => {
|
|
858
|
-
if (cell === null) return;
|
|
859
|
-
scrollIntoView(cell);
|
|
860
|
-
if (cell.contains(document.activeElement)) return;
|
|
861
|
-
cell.focus({
|
|
862
|
-
preventScroll: true
|
|
863
|
-
});
|
|
864
|
-
}, []);
|
|
865
|
-
|
|
866
845
|
function onFocus(event) {
|
|
867
846
|
if (event.target !== event.currentTarget) {
|
|
868
847
|
setIsChildFocused(true);
|
|
869
848
|
}
|
|
870
849
|
}
|
|
871
|
-
|
|
872
|
-
const isFocused = isSelected && !isChildFocused;
|
|
850
|
+
const isFocusable = isSelected && !isChildFocused;
|
|
873
851
|
return {
|
|
874
|
-
|
|
875
|
-
|
|
852
|
+
tabIndex: isFocusable ? 0 : -1,
|
|
853
|
+
childTabIndex: isSelected ? 0 : -1,
|
|
876
854
|
onFocus: isSelected ? onFocus : undefined
|
|
877
855
|
};
|
|
878
856
|
}
|
|
@@ -888,36 +866,29 @@ function useViewportColumns({
|
|
|
888
866
|
lastFrozenColumnIndex,
|
|
889
867
|
rowOverscanStartIdx,
|
|
890
868
|
rowOverscanEndIdx,
|
|
891
|
-
columnWidths,
|
|
892
869
|
isGroupRow
|
|
893
870
|
}) {
|
|
894
|
-
const startIdx = F(() => {
|
|
871
|
+
const startIdx = F$1(() => {
|
|
895
872
|
if (colOverscanStartIdx === 0) return 0;
|
|
896
873
|
let startIdx = colOverscanStartIdx;
|
|
897
|
-
|
|
898
874
|
const updateStartIdx = (colIdx, colSpan) => {
|
|
899
875
|
if (colSpan !== undefined && colIdx + colSpan > colOverscanStartIdx) {
|
|
900
876
|
startIdx = colIdx;
|
|
901
877
|
return true;
|
|
902
878
|
}
|
|
903
|
-
|
|
904
879
|
return false;
|
|
905
880
|
};
|
|
906
|
-
|
|
907
881
|
for (const column of colSpanColumns) {
|
|
908
882
|
const colIdx = column.idx;
|
|
909
883
|
if (colIdx >= startIdx) break;
|
|
910
|
-
|
|
911
884
|
if (updateStartIdx(colIdx, getColSpan(column, lastFrozenColumnIndex, {
|
|
912
885
|
type: 'HEADER'
|
|
913
886
|
}))) {
|
|
914
887
|
break;
|
|
915
888
|
}
|
|
916
|
-
|
|
917
889
|
for (let rowIdx = rowOverscanStartIdx; rowIdx <= rowOverscanEndIdx; rowIdx++) {
|
|
918
890
|
const row = rows[rowIdx];
|
|
919
891
|
if (isGroupRow(row)) continue;
|
|
920
|
-
|
|
921
892
|
if (updateStartIdx(colIdx, getColSpan(column, lastFrozenColumnIndex, {
|
|
922
893
|
type: 'ROW',
|
|
923
894
|
row
|
|
@@ -925,7 +896,6 @@ function useViewportColumns({
|
|
|
925
896
|
break;
|
|
926
897
|
}
|
|
927
898
|
}
|
|
928
|
-
|
|
929
899
|
if (topSummaryRows != null) {
|
|
930
900
|
for (const row of topSummaryRows) {
|
|
931
901
|
if (updateStartIdx(colIdx, getColSpan(column, lastFrozenColumnIndex, {
|
|
@@ -936,7 +906,6 @@ function useViewportColumns({
|
|
|
936
906
|
}
|
|
937
907
|
}
|
|
938
908
|
}
|
|
939
|
-
|
|
940
909
|
if (bottomSummaryRows != null) {
|
|
941
910
|
for (const row of bottomSummaryRows) {
|
|
942
911
|
if (updateStartIdx(colIdx, getColSpan(column, lastFrozenColumnIndex, {
|
|
@@ -948,44 +917,22 @@ function useViewportColumns({
|
|
|
948
917
|
}
|
|
949
918
|
}
|
|
950
919
|
}
|
|
951
|
-
|
|
952
920
|
return startIdx;
|
|
953
921
|
}, [rowOverscanStartIdx, rowOverscanEndIdx, rows, topSummaryRows, bottomSummaryRows, colOverscanStartIdx, lastFrozenColumnIndex, colSpanColumns, isGroupRow]);
|
|
954
|
-
|
|
955
|
-
viewportColumns,
|
|
956
|
-
flexWidthViewportColumns
|
|
957
|
-
} = F(() => {
|
|
922
|
+
return F$1(() => {
|
|
958
923
|
const viewportColumns = [];
|
|
959
|
-
const flexWidthViewportColumns = [];
|
|
960
|
-
|
|
961
924
|
for (let colIdx = 0; colIdx <= colOverscanEndIdx; colIdx++) {
|
|
962
925
|
const column = columns[colIdx];
|
|
963
926
|
if (colIdx < startIdx && !column.frozen) continue;
|
|
964
927
|
viewportColumns.push(column);
|
|
965
|
-
|
|
966
|
-
if (typeof column.width === 'string') {
|
|
967
|
-
flexWidthViewportColumns.push(column);
|
|
968
|
-
}
|
|
969
928
|
}
|
|
970
|
-
|
|
971
|
-
return {
|
|
972
|
-
viewportColumns,
|
|
973
|
-
flexWidthViewportColumns
|
|
974
|
-
};
|
|
929
|
+
return viewportColumns;
|
|
975
930
|
}, [startIdx, colOverscanEndIdx, columns]);
|
|
976
|
-
const unsizedFlexWidthViewportColumns = F(() => {
|
|
977
|
-
return flexWidthViewportColumns.filter(column => !columnWidths.has(column.key));
|
|
978
|
-
}, [flexWidthViewportColumns, columnWidths]);
|
|
979
|
-
return {
|
|
980
|
-
viewportColumns,
|
|
981
|
-
flexWidthViewportColumns: unsizedFlexWidthViewportColumns
|
|
982
|
-
};
|
|
983
931
|
}
|
|
984
932
|
|
|
985
933
|
function isReadonlyArray(arr) {
|
|
986
934
|
return Array.isArray(arr);
|
|
987
935
|
}
|
|
988
|
-
|
|
989
936
|
function useViewportRows({
|
|
990
937
|
rawRows,
|
|
991
938
|
rowHeight,
|
|
@@ -996,13 +943,11 @@ function useViewportRows({
|
|
|
996
943
|
expandedGroupIds,
|
|
997
944
|
enableVirtualization
|
|
998
945
|
}) {
|
|
999
|
-
const [groupedRows, rowsCount] = F(() => {
|
|
946
|
+
const [groupedRows, rowsCount] = F$1(() => {
|
|
1000
947
|
if (groupBy.length === 0 || rowGrouper == null) return [undefined, rawRows.length];
|
|
1001
|
-
|
|
1002
948
|
const groupRows = (rows, [groupByKey, ...remainingGroupByKeys], startRowIndex) => {
|
|
1003
949
|
let groupRowsCount = 0;
|
|
1004
950
|
const groups = {};
|
|
1005
|
-
|
|
1006
951
|
for (const [key, childRows] of Object.entries(rowGrouper(rows, groupByKey))) {
|
|
1007
952
|
const [childGroups, childRowsCount] = remainingGroupByKeys.length === 0 ? [childRows, childRows.length] : groupRows(childRows, remainingGroupByKeys, startRowIndex + groupRowsCount + 1);
|
|
1008
953
|
groups[key] = {
|
|
@@ -1012,23 +957,19 @@ function useViewportRows({
|
|
|
1012
957
|
};
|
|
1013
958
|
groupRowsCount += childRowsCount + 1;
|
|
1014
959
|
}
|
|
1015
|
-
|
|
1016
960
|
return [groups, groupRowsCount];
|
|
1017
961
|
};
|
|
1018
|
-
|
|
1019
962
|
return groupRows(rawRows, groupBy, 0);
|
|
1020
963
|
}, [groupBy, rowGrouper, rawRows]);
|
|
1021
|
-
const [rows, isGroupRow] = F(() => {
|
|
964
|
+
const [rows, isGroupRow] = F$1(() => {
|
|
1022
965
|
const allGroupRows = new Set();
|
|
1023
966
|
if (!groupedRows) return [rawRows, isGroupRow];
|
|
1024
967
|
const flattenedRows = [];
|
|
1025
|
-
|
|
1026
968
|
const expandGroup = (rows, parentId, level) => {
|
|
1027
969
|
if (isReadonlyArray(rows)) {
|
|
1028
970
|
flattenedRows.push(...rows);
|
|
1029
971
|
return;
|
|
1030
972
|
}
|
|
1031
|
-
|
|
1032
973
|
Object.keys(rows).forEach((groupKey, posInSet, keys) => {
|
|
1033
974
|
const id = parentId !== undefined ? `${parentId}__${groupKey}` : groupKey;
|
|
1034
975
|
const isExpanded = expandedGroupIds?.has(id) ?? false;
|
|
@@ -1050,16 +991,13 @@ function useViewportRows({
|
|
|
1050
991
|
};
|
|
1051
992
|
flattenedRows.push(groupRow);
|
|
1052
993
|
allGroupRows.add(groupRow);
|
|
1053
|
-
|
|
1054
994
|
if (isExpanded) {
|
|
1055
995
|
expandGroup(childGroups, id, level + 1);
|
|
1056
996
|
}
|
|
1057
997
|
});
|
|
1058
998
|
};
|
|
1059
|
-
|
|
1060
999
|
expandGroup(groupedRows, undefined, 0);
|
|
1061
1000
|
return [flattenedRows, isGroupRow];
|
|
1062
|
-
|
|
1063
1001
|
function isGroupRow(row) {
|
|
1064
1002
|
return allGroupRows.has(row);
|
|
1065
1003
|
}
|
|
@@ -1070,7 +1008,7 @@ function useViewportRows({
|
|
|
1070
1008
|
getRowTop,
|
|
1071
1009
|
getRowHeight,
|
|
1072
1010
|
findRowIdx
|
|
1073
|
-
} = F(() => {
|
|
1011
|
+
} = F$1(() => {
|
|
1074
1012
|
if (typeof rowHeight === 'number') {
|
|
1075
1013
|
return {
|
|
1076
1014
|
totalRowHeight: rowHeight * rows.length,
|
|
@@ -1080,7 +1018,6 @@ function useViewportRows({
|
|
|
1080
1018
|
findRowIdx: offset => floor(offset / rowHeight)
|
|
1081
1019
|
};
|
|
1082
1020
|
}
|
|
1083
|
-
|
|
1084
1021
|
let totalRowHeight = 0;
|
|
1085
1022
|
let gridTemplateRows = ' ';
|
|
1086
1023
|
const rowPositions = rows.map(row => {
|
|
@@ -1099,43 +1036,34 @@ function useViewportRows({
|
|
|
1099
1036
|
totalRowHeight += currentRowHeight;
|
|
1100
1037
|
return position;
|
|
1101
1038
|
});
|
|
1102
|
-
|
|
1103
1039
|
const validateRowIdx = rowIdx => {
|
|
1104
1040
|
return max(0, min(rows.length - 1, rowIdx));
|
|
1105
1041
|
};
|
|
1106
|
-
|
|
1107
1042
|
return {
|
|
1108
1043
|
totalRowHeight,
|
|
1109
1044
|
gridTemplateRows,
|
|
1110
1045
|
getRowTop: rowIdx => rowPositions[validateRowIdx(rowIdx)].top,
|
|
1111
1046
|
getRowHeight: rowIdx => rowPositions[validateRowIdx(rowIdx)].height,
|
|
1112
|
-
|
|
1113
1047
|
findRowIdx(offset) {
|
|
1114
1048
|
let start = 0;
|
|
1115
1049
|
let end = rowPositions.length - 1;
|
|
1116
|
-
|
|
1117
1050
|
while (start <= end) {
|
|
1118
1051
|
const middle = start + floor((end - start) / 2);
|
|
1119
1052
|
const currentOffset = rowPositions[middle].top;
|
|
1120
1053
|
if (currentOffset === offset) return middle;
|
|
1121
|
-
|
|
1122
1054
|
if (currentOffset < offset) {
|
|
1123
1055
|
start = middle + 1;
|
|
1124
1056
|
} else if (currentOffset > offset) {
|
|
1125
1057
|
end = middle - 1;
|
|
1126
1058
|
}
|
|
1127
|
-
|
|
1128
1059
|
if (start > end) return end;
|
|
1129
1060
|
}
|
|
1130
|
-
|
|
1131
1061
|
return 0;
|
|
1132
1062
|
}
|
|
1133
|
-
|
|
1134
1063
|
};
|
|
1135
1064
|
}, [isGroupRow, rowHeight, rows]);
|
|
1136
1065
|
let rowOverscanStartIdx = 0;
|
|
1137
1066
|
let rowOverscanEndIdx = rows.length - 1;
|
|
1138
|
-
|
|
1139
1067
|
if (enableVirtualization) {
|
|
1140
1068
|
const overscanThreshold = 4;
|
|
1141
1069
|
const rowVisibleStartIdx = findRowIdx(scrollTop);
|
|
@@ -1143,7 +1071,6 @@ function useViewportRows({
|
|
|
1143
1071
|
rowOverscanStartIdx = max(0, rowVisibleStartIdx - overscanThreshold);
|
|
1144
1072
|
rowOverscanEndIdx = min(rows.length - 1, rowVisibleEndIdx + overscanThreshold);
|
|
1145
1073
|
}
|
|
1146
|
-
|
|
1147
1074
|
return {
|
|
1148
1075
|
rowOverscanStartIdx,
|
|
1149
1076
|
rowOverscanEndIdx,
|
|
@@ -1158,107 +1085,371 @@ function useViewportRows({
|
|
|
1158
1085
|
};
|
|
1159
1086
|
}
|
|
1160
1087
|
|
|
1161
|
-
const
|
|
1162
|
-
const
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1088
|
+
const cellDragHandle = "cadd3bp7-0-0-beta-33";
|
|
1089
|
+
const cellDragHandleClassname = `rdg-cell-drag-handle ${cellDragHandle}`;
|
|
1090
|
+
function DragHandle({
|
|
1091
|
+
rows,
|
|
1092
|
+
columns,
|
|
1093
|
+
selectedPosition,
|
|
1094
|
+
latestDraggedOverRowIdx,
|
|
1095
|
+
isCellEditable,
|
|
1096
|
+
onRowsChange,
|
|
1097
|
+
onFill,
|
|
1098
|
+
setDragging,
|
|
1099
|
+
setDraggedOverRowIdx
|
|
1171
1100
|
}) {
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1101
|
+
function handleMouseDown(event) {
|
|
1102
|
+
if (event.buttons !== 1) return;
|
|
1103
|
+
setDragging(true);
|
|
1104
|
+
window.addEventListener('mouseover', onMouseOver);
|
|
1105
|
+
window.addEventListener('mouseup', onMouseUp);
|
|
1106
|
+
function onMouseOver(event) {
|
|
1107
|
+
if (event.buttons !== 1) onMouseUp();
|
|
1108
|
+
}
|
|
1109
|
+
function onMouseUp() {
|
|
1110
|
+
window.removeEventListener('mouseover', onMouseOver);
|
|
1111
|
+
window.removeEventListener('mouseup', onMouseUp);
|
|
1112
|
+
setDragging(false);
|
|
1113
|
+
handleDragEnd();
|
|
1114
|
+
}
|
|
1115
|
+
}
|
|
1116
|
+
function handleDragEnd() {
|
|
1117
|
+
const overRowIdx = latestDraggedOverRowIdx.current;
|
|
1118
|
+
if (overRowIdx === undefined) return;
|
|
1119
|
+
const {
|
|
1120
|
+
rowIdx
|
|
1121
|
+
} = selectedPosition;
|
|
1122
|
+
const startRowIndex = rowIdx < overRowIdx ? rowIdx + 1 : overRowIdx;
|
|
1123
|
+
const endRowIndex = rowIdx < overRowIdx ? overRowIdx + 1 : rowIdx;
|
|
1124
|
+
updateRows(startRowIndex, endRowIndex);
|
|
1125
|
+
setDraggedOverRowIdx(undefined);
|
|
1126
|
+
}
|
|
1127
|
+
function handleDoubleClick(event) {
|
|
1128
|
+
event.stopPropagation();
|
|
1129
|
+
updateRows(selectedPosition.rowIdx + 1, rows.length);
|
|
1130
|
+
}
|
|
1131
|
+
function updateRows(startRowIdx, endRowIdx) {
|
|
1132
|
+
const {
|
|
1133
|
+
idx,
|
|
1134
|
+
rowIdx
|
|
1135
|
+
} = selectedPosition;
|
|
1136
|
+
const column = columns[idx];
|
|
1137
|
+
const sourceRow = rows[rowIdx];
|
|
1138
|
+
const updatedRows = [...rows];
|
|
1139
|
+
const indexes = [];
|
|
1140
|
+
for (let i = startRowIdx; i < endRowIdx; i++) {
|
|
1141
|
+
if (isCellEditable({
|
|
1142
|
+
rowIdx: i,
|
|
1143
|
+
idx
|
|
1144
|
+
})) {
|
|
1145
|
+
const updatedRow = onFill({
|
|
1146
|
+
columnKey: column.key,
|
|
1147
|
+
sourceRow,
|
|
1148
|
+
targetRow: rows[i]
|
|
1149
|
+
});
|
|
1150
|
+
if (updatedRow !== rows[i]) {
|
|
1151
|
+
updatedRows[i] = updatedRow;
|
|
1152
|
+
indexes.push(i);
|
|
1153
|
+
}
|
|
1154
|
+
}
|
|
1155
|
+
}
|
|
1156
|
+
if (indexes.length > 0) {
|
|
1157
|
+
onRowsChange?.(updatedRows, {
|
|
1158
|
+
indexes,
|
|
1159
|
+
column
|
|
1160
|
+
});
|
|
1161
|
+
}
|
|
1162
|
+
}
|
|
1163
|
+
return /*#__PURE__*/o("div", {
|
|
1164
|
+
className: cellDragHandleClassname,
|
|
1165
|
+
onMouseDown: handleMouseDown,
|
|
1166
|
+
onDoubleClick: handleDoubleClick
|
|
1181
1167
|
});
|
|
1182
1168
|
}
|
|
1183
1169
|
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1170
|
+
const cellEditing = "c1tngyp17-0-0-beta-33";
|
|
1171
|
+
function EditCell({
|
|
1172
|
+
column,
|
|
1173
|
+
colSpan,
|
|
1174
|
+
row,
|
|
1175
|
+
rowIdx,
|
|
1176
|
+
onRowChange,
|
|
1177
|
+
closeEditor,
|
|
1178
|
+
onKeyDown,
|
|
1179
|
+
navigate
|
|
1190
1180
|
}) {
|
|
1191
|
-
const
|
|
1192
|
-
const
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
}
|
|
1196
|
-
|
|
1181
|
+
const frameRequestRef = _$1();
|
|
1182
|
+
const commitOnOutsideClick = column.editorOptions?.commitOnOutsideClick !== false;
|
|
1183
|
+
const commitOnOutsideMouseDown = useLatestFunc(() => {
|
|
1184
|
+
onClose(true, false);
|
|
1185
|
+
});
|
|
1186
|
+
p(() => {
|
|
1187
|
+
if (!commitOnOutsideClick) return;
|
|
1188
|
+
function onWindowCaptureMouseDown() {
|
|
1189
|
+
frameRequestRef.current = requestAnimationFrame(commitOnOutsideMouseDown);
|
|
1190
|
+
}
|
|
1191
|
+
addEventListener('mousedown', onWindowCaptureMouseDown, {
|
|
1192
|
+
capture: true
|
|
1193
|
+
});
|
|
1194
|
+
return () => {
|
|
1195
|
+
removeEventListener('mousedown', onWindowCaptureMouseDown, {
|
|
1196
|
+
capture: true
|
|
1197
|
+
});
|
|
1198
|
+
cancelFrameRequest();
|
|
1199
|
+
};
|
|
1200
|
+
}, [commitOnOutsideClick, commitOnOutsideMouseDown]);
|
|
1201
|
+
function cancelFrameRequest() {
|
|
1202
|
+
cancelAnimationFrame(frameRequestRef.current);
|
|
1203
|
+
}
|
|
1197
1204
|
function handleKeyDown(event) {
|
|
1198
|
-
if (
|
|
1199
|
-
event
|
|
1200
|
-
|
|
1205
|
+
if (onKeyDown) {
|
|
1206
|
+
const cellEvent = createCellEvent(event);
|
|
1207
|
+
onKeyDown({
|
|
1208
|
+
mode: 'EDIT',
|
|
1209
|
+
row,
|
|
1210
|
+
column,
|
|
1211
|
+
rowIdx,
|
|
1212
|
+
navigate() {
|
|
1213
|
+
navigate(event);
|
|
1214
|
+
},
|
|
1215
|
+
onClose
|
|
1216
|
+
}, cellEvent);
|
|
1217
|
+
if (cellEvent.isGridDefaultPrevented()) return;
|
|
1218
|
+
}
|
|
1219
|
+
if (event.key === 'Escape') {
|
|
1220
|
+
onClose();
|
|
1221
|
+
} else if (event.key === 'Enter') {
|
|
1222
|
+
onClose(true);
|
|
1223
|
+
} else if (onEditorNavigation(event)) {
|
|
1224
|
+
navigate(event);
|
|
1201
1225
|
}
|
|
1202
1226
|
}
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1227
|
+
function onClose(commitChanges = false, shouldFocusCell = true) {
|
|
1228
|
+
if (commitChanges) {
|
|
1229
|
+
onRowChange(row, true, shouldFocusCell);
|
|
1230
|
+
} else {
|
|
1231
|
+
closeEditor(shouldFocusCell);
|
|
1232
|
+
}
|
|
1206
1233
|
}
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1234
|
+
function onEditorRowChange(row, commitChangesAndFocus = false) {
|
|
1235
|
+
onRowChange(row, commitChangesAndFocus, commitChangesAndFocus);
|
|
1236
|
+
}
|
|
1237
|
+
const {
|
|
1238
|
+
cellClass
|
|
1239
|
+
} = column;
|
|
1240
|
+
const className = getCellClassname(column, 'rdg-editor-container', typeof cellClass === 'function' ? cellClass(row) : cellClass, !column.editorOptions?.displayCellContent && cellEditing);
|
|
1241
|
+
return /*#__PURE__*/o("div", {
|
|
1242
|
+
role: "gridcell",
|
|
1243
|
+
"aria-colindex": column.idx + 1,
|
|
1244
|
+
"aria-colspan": colSpan,
|
|
1245
|
+
"aria-selected": true,
|
|
1246
|
+
className: className,
|
|
1247
|
+
style: getCellStyle(column, colSpan),
|
|
1213
1248
|
onKeyDown: handleKeyDown,
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
children:
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
})
|
|
1222
|
-
|
|
1249
|
+
onMouseDownCapture: cancelFrameRequest,
|
|
1250
|
+
children: column.renderEditCell != null && /*#__PURE__*/o(k$2, {
|
|
1251
|
+
children: [column.renderEditCell({
|
|
1252
|
+
column,
|
|
1253
|
+
row,
|
|
1254
|
+
onRowChange: onEditorRowChange,
|
|
1255
|
+
onClose
|
|
1256
|
+
}), column.editorOptions?.displayCellContent && column.renderCell({
|
|
1257
|
+
column,
|
|
1258
|
+
row,
|
|
1259
|
+
isCellEditable: true,
|
|
1260
|
+
tabIndex: -1,
|
|
1261
|
+
onRowChange: onEditorRowChange
|
|
1262
|
+
})]
|
|
1263
|
+
})
|
|
1223
1264
|
});
|
|
1224
1265
|
}
|
|
1225
1266
|
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1267
|
+
function GroupCell({
|
|
1268
|
+
id,
|
|
1269
|
+
groupKey,
|
|
1270
|
+
childRows,
|
|
1271
|
+
isExpanded,
|
|
1231
1272
|
isCellSelected,
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
onSortColumnsChange,
|
|
1237
|
-
selectCell,
|
|
1238
|
-
shouldFocusGrid,
|
|
1239
|
-
direction
|
|
1273
|
+
column,
|
|
1274
|
+
row,
|
|
1275
|
+
groupColumnIndex,
|
|
1276
|
+
toggleGroup: toggleGroupWrapper
|
|
1240
1277
|
}) {
|
|
1241
|
-
const isRtl = direction === 'rtl';
|
|
1242
1278
|
const {
|
|
1243
|
-
ref,
|
|
1244
1279
|
tabIndex,
|
|
1280
|
+
childTabIndex,
|
|
1245
1281
|
onFocus
|
|
1246
|
-
} =
|
|
1247
|
-
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
const
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1282
|
+
} = useRovingTabIndex(isCellSelected);
|
|
1283
|
+
function toggleGroup() {
|
|
1284
|
+
toggleGroupWrapper(id);
|
|
1285
|
+
}
|
|
1286
|
+
const isLevelMatching = column.rowGroup && groupColumnIndex === column.idx;
|
|
1287
|
+
return /*#__PURE__*/o("div", {
|
|
1288
|
+
role: "gridcell",
|
|
1289
|
+
"aria-colindex": column.idx + 1,
|
|
1290
|
+
"aria-selected": isCellSelected,
|
|
1291
|
+
tabIndex: tabIndex,
|
|
1292
|
+
className: getCellClassname(column),
|
|
1293
|
+
style: {
|
|
1294
|
+
...getCellStyle(column),
|
|
1295
|
+
cursor: isLevelMatching ? 'pointer' : 'default'
|
|
1296
|
+
},
|
|
1297
|
+
onClick: isLevelMatching ? toggleGroup : undefined,
|
|
1298
|
+
onFocus: onFocus,
|
|
1299
|
+
children: (!column.rowGroup || groupColumnIndex === column.idx) && column.renderGroupCell?.({
|
|
1300
|
+
groupKey,
|
|
1301
|
+
childRows,
|
|
1302
|
+
column,
|
|
1303
|
+
row,
|
|
1304
|
+
isExpanded,
|
|
1305
|
+
tabIndex: childTabIndex,
|
|
1306
|
+
toggleGroup
|
|
1307
|
+
})
|
|
1308
|
+
}, column.key);
|
|
1309
|
+
}
|
|
1310
|
+
const GroupCell$1 = /*#__PURE__*/x(GroupCell);
|
|
1254
1311
|
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1312
|
+
const row = "r1otpg647-0-0-beta-33";
|
|
1313
|
+
const rowClassname = `rdg-row ${row}`;
|
|
1314
|
+
const rowSelected = "rel5gk27-0-0-beta-33";
|
|
1315
|
+
const rowSelectedClassname = 'rdg-row-selected';
|
|
1316
|
+
const rowSelectedWithFrozenCell = "r1qymf1z7-0-0-beta-33";
|
|
1259
1317
|
|
|
1260
|
-
|
|
1261
|
-
|
|
1318
|
+
const groupRow = "gyxx7e97-0-0-beta-33";
|
|
1319
|
+
const groupRowClassname = `rdg-group-row ${groupRow}`;
|
|
1320
|
+
function GroupedRow({
|
|
1321
|
+
id,
|
|
1322
|
+
groupKey,
|
|
1323
|
+
viewportColumns,
|
|
1324
|
+
childRows,
|
|
1325
|
+
rowIdx,
|
|
1326
|
+
row,
|
|
1327
|
+
gridRowStart,
|
|
1328
|
+
height,
|
|
1329
|
+
level,
|
|
1330
|
+
isExpanded,
|
|
1331
|
+
selectedCellIdx,
|
|
1332
|
+
isRowSelected,
|
|
1333
|
+
selectGroup,
|
|
1334
|
+
toggleGroup,
|
|
1335
|
+
...props
|
|
1336
|
+
}) {
|
|
1337
|
+
const idx = viewportColumns[0].key === SELECT_COLUMN_KEY ? level + 1 : level;
|
|
1338
|
+
function handleSelectGroup() {
|
|
1339
|
+
selectGroup(rowIdx);
|
|
1340
|
+
}
|
|
1341
|
+
return /*#__PURE__*/o(RowSelectionProvider, {
|
|
1342
|
+
value: isRowSelected,
|
|
1343
|
+
children: /*#__PURE__*/o("div", {
|
|
1344
|
+
role: "row",
|
|
1345
|
+
"aria-level": level,
|
|
1346
|
+
"aria-expanded": isExpanded,
|
|
1347
|
+
className: clsx(rowClassname, groupRowClassname, `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`, selectedCellIdx === -1 && rowSelectedClassname),
|
|
1348
|
+
onClick: handleSelectGroup,
|
|
1349
|
+
style: getRowStyle(gridRowStart, height),
|
|
1350
|
+
...props,
|
|
1351
|
+
children: viewportColumns.map(column => /*#__PURE__*/o(GroupCell$1, {
|
|
1352
|
+
id: id,
|
|
1353
|
+
groupKey: groupKey,
|
|
1354
|
+
childRows: childRows,
|
|
1355
|
+
isExpanded: isExpanded,
|
|
1356
|
+
isCellSelected: selectedCellIdx === column.idx,
|
|
1357
|
+
column: column,
|
|
1358
|
+
row: row,
|
|
1359
|
+
groupColumnIndex: idx,
|
|
1360
|
+
toggleGroup: toggleGroup
|
|
1361
|
+
}, column.key))
|
|
1362
|
+
})
|
|
1363
|
+
});
|
|
1364
|
+
}
|
|
1365
|
+
const GroupRowRenderer = /*#__PURE__*/x(GroupedRow);
|
|
1366
|
+
|
|
1367
|
+
const headerSortCell = "hizp7y17-0-0-beta-33";
|
|
1368
|
+
const headerSortCellClassname = `rdg-header-sort-cell ${headerSortCell}`;
|
|
1369
|
+
const headerSortName = "h14cojrm7-0-0-beta-33";
|
|
1370
|
+
const headerSortNameClassname = `rdg-header-sort-name ${headerSortName}`;
|
|
1371
|
+
function renderHeaderCell({
|
|
1372
|
+
column,
|
|
1373
|
+
sortDirection,
|
|
1374
|
+
priority,
|
|
1375
|
+
onSort,
|
|
1376
|
+
tabIndex
|
|
1377
|
+
}) {
|
|
1378
|
+
if (!column.sortable) return column.name;
|
|
1379
|
+
return /*#__PURE__*/o(SortableHeaderCell, {
|
|
1380
|
+
onSort: onSort,
|
|
1381
|
+
sortDirection: sortDirection,
|
|
1382
|
+
priority: priority,
|
|
1383
|
+
tabIndex: tabIndex,
|
|
1384
|
+
children: column.name
|
|
1385
|
+
});
|
|
1386
|
+
}
|
|
1387
|
+
function SortableHeaderCell({
|
|
1388
|
+
onSort,
|
|
1389
|
+
sortDirection,
|
|
1390
|
+
priority,
|
|
1391
|
+
children,
|
|
1392
|
+
tabIndex
|
|
1393
|
+
}) {
|
|
1394
|
+
const renderSortStatus = useDefaultRenderers().renderSortStatus;
|
|
1395
|
+
function handleKeyDown(event) {
|
|
1396
|
+
if (event.key === ' ' || event.key === 'Enter') {
|
|
1397
|
+
event.preventDefault();
|
|
1398
|
+
onSort(event.ctrlKey || event.metaKey);
|
|
1399
|
+
}
|
|
1400
|
+
}
|
|
1401
|
+
function handleClick(event) {
|
|
1402
|
+
onSort(event.ctrlKey || event.metaKey);
|
|
1403
|
+
}
|
|
1404
|
+
return /*#__PURE__*/o("span", {
|
|
1405
|
+
tabIndex: tabIndex,
|
|
1406
|
+
className: headerSortCellClassname,
|
|
1407
|
+
onClick: handleClick,
|
|
1408
|
+
onKeyDown: handleKeyDown,
|
|
1409
|
+
children: [/*#__PURE__*/o("span", {
|
|
1410
|
+
className: headerSortNameClassname,
|
|
1411
|
+
children: children
|
|
1412
|
+
}), /*#__PURE__*/o("span", {
|
|
1413
|
+
children: renderSortStatus({
|
|
1414
|
+
sortDirection,
|
|
1415
|
+
priority
|
|
1416
|
+
})
|
|
1417
|
+
})]
|
|
1418
|
+
});
|
|
1419
|
+
}
|
|
1420
|
+
|
|
1421
|
+
const cellResizable = "celq7o97-0-0-beta-33";
|
|
1422
|
+
const cellResizableClassname = `rdg-cell-resizable ${cellResizable}`;
|
|
1423
|
+
function HeaderCell({
|
|
1424
|
+
column,
|
|
1425
|
+
colSpan,
|
|
1426
|
+
isCellSelected,
|
|
1427
|
+
onColumnResize,
|
|
1428
|
+
sortColumns,
|
|
1429
|
+
onSortColumnsChange,
|
|
1430
|
+
selectCell,
|
|
1431
|
+
shouldFocusGrid,
|
|
1432
|
+
direction
|
|
1433
|
+
}) {
|
|
1434
|
+
const isRtl = direction === 'rtl';
|
|
1435
|
+
const {
|
|
1436
|
+
tabIndex,
|
|
1437
|
+
childTabIndex,
|
|
1438
|
+
onFocus
|
|
1439
|
+
} = useRovingTabIndex(isCellSelected);
|
|
1440
|
+
const sortIndex = sortColumns?.findIndex(sort => sort.columnKey === column.key);
|
|
1441
|
+
const sortColumn = sortIndex !== undefined && sortIndex > -1 ? sortColumns[sortIndex] : undefined;
|
|
1442
|
+
const sortDirection = sortColumn?.direction;
|
|
1443
|
+
const priority = sortColumn !== undefined && sortColumns.length > 1 ? sortIndex + 1 : undefined;
|
|
1444
|
+
const ariaSort = sortDirection && !priority ? sortDirection === 'ASC' ? 'ascending' : 'descending' : undefined;
|
|
1445
|
+
const className = getCellClassname(column, column.headerCellClass, column.resizable && cellResizableClassname);
|
|
1446
|
+
const renderHeaderCell$1 = column.renderHeaderCell ?? renderHeaderCell;
|
|
1447
|
+
function onPointerDown(event) {
|
|
1448
|
+
if (event.pointerType === 'mouse' && event.buttons !== 1) {
|
|
1449
|
+
return;
|
|
1450
|
+
}
|
|
1451
|
+
const {
|
|
1452
|
+
currentTarget,
|
|
1262
1453
|
pointerId
|
|
1263
1454
|
} = event;
|
|
1264
1455
|
const {
|
|
@@ -1266,11 +1457,9 @@ function HeaderCell({
|
|
|
1266
1457
|
left
|
|
1267
1458
|
} = currentTarget.getBoundingClientRect();
|
|
1268
1459
|
const offset = isRtl ? event.clientX - left : right - event.clientX;
|
|
1269
|
-
|
|
1270
1460
|
if (offset > 11) {
|
|
1271
1461
|
return;
|
|
1272
1462
|
}
|
|
1273
|
-
|
|
1274
1463
|
function onPointerMove(event) {
|
|
1275
1464
|
event.preventDefault();
|
|
1276
1465
|
const {
|
|
@@ -1278,28 +1467,23 @@ function HeaderCell({
|
|
|
1278
1467
|
left
|
|
1279
1468
|
} = currentTarget.getBoundingClientRect();
|
|
1280
1469
|
const width = isRtl ? right + offset - event.clientX : event.clientX + offset - left;
|
|
1281
|
-
|
|
1282
1470
|
if (width > 0) {
|
|
1283
|
-
onColumnResize(column, width);
|
|
1471
|
+
onColumnResize(column, clampColumnWidth(width, column));
|
|
1284
1472
|
}
|
|
1285
1473
|
}
|
|
1286
|
-
|
|
1287
1474
|
function onLostPointerCapture() {
|
|
1288
1475
|
currentTarget.removeEventListener('pointermove', onPointerMove);
|
|
1289
1476
|
currentTarget.removeEventListener('lostpointercapture', onLostPointerCapture);
|
|
1290
1477
|
}
|
|
1291
|
-
|
|
1292
1478
|
currentTarget.setPointerCapture(pointerId);
|
|
1293
1479
|
currentTarget.addEventListener('pointermove', onPointerMove);
|
|
1294
1480
|
currentTarget.addEventListener('lostpointercapture', onLostPointerCapture);
|
|
1295
1481
|
}
|
|
1296
|
-
|
|
1297
1482
|
function onSort(ctrlClick) {
|
|
1298
1483
|
if (onSortColumnsChange == null) return;
|
|
1299
1484
|
const {
|
|
1300
1485
|
sortDescendingFirst
|
|
1301
1486
|
} = column;
|
|
1302
|
-
|
|
1303
1487
|
if (sortColumn === undefined) {
|
|
1304
1488
|
const nextSort = {
|
|
1305
1489
|
columnKey: column.key,
|
|
@@ -1308,63 +1492,51 @@ function HeaderCell({
|
|
|
1308
1492
|
onSortColumnsChange(sortColumns && ctrlClick ? [...sortColumns, nextSort] : [nextSort]);
|
|
1309
1493
|
} else {
|
|
1310
1494
|
let nextSortColumn;
|
|
1311
|
-
|
|
1312
|
-
if (sortDescendingFirst && sortDirection === 'DESC' || !sortDescendingFirst && sortDirection === 'ASC') {
|
|
1495
|
+
if (sortDescendingFirst === true && sortDirection === 'DESC' || sortDescendingFirst !== true && sortDirection === 'ASC') {
|
|
1313
1496
|
nextSortColumn = {
|
|
1314
1497
|
columnKey: column.key,
|
|
1315
1498
|
direction: sortDirection === 'ASC' ? 'DESC' : 'ASC'
|
|
1316
1499
|
};
|
|
1317
1500
|
}
|
|
1318
|
-
|
|
1319
1501
|
if (ctrlClick) {
|
|
1320
1502
|
const nextSortColumns = [...sortColumns];
|
|
1321
|
-
|
|
1322
1503
|
if (nextSortColumn) {
|
|
1323
1504
|
nextSortColumns[sortIndex] = nextSortColumn;
|
|
1324
1505
|
} else {
|
|
1325
1506
|
nextSortColumns.splice(sortIndex, 1);
|
|
1326
1507
|
}
|
|
1327
|
-
|
|
1328
1508
|
onSortColumnsChange(nextSortColumns);
|
|
1329
1509
|
} else {
|
|
1330
1510
|
onSortColumnsChange(nextSortColumn ? [nextSortColumn] : []);
|
|
1331
1511
|
}
|
|
1332
1512
|
}
|
|
1333
1513
|
}
|
|
1334
|
-
|
|
1335
1514
|
function onClick() {
|
|
1336
1515
|
selectCell(column.idx);
|
|
1337
1516
|
}
|
|
1338
|
-
|
|
1339
1517
|
function onDoubleClick(event) {
|
|
1340
1518
|
const {
|
|
1341
1519
|
right,
|
|
1342
1520
|
left
|
|
1343
1521
|
} = event.currentTarget.getBoundingClientRect();
|
|
1344
1522
|
const offset = isRtl ? event.clientX - left : right - event.clientX;
|
|
1345
|
-
|
|
1346
1523
|
if (offset > 11) {
|
|
1347
1524
|
return;
|
|
1348
1525
|
}
|
|
1349
|
-
|
|
1350
1526
|
onColumnResize(column, 'max-content');
|
|
1351
1527
|
}
|
|
1352
|
-
|
|
1353
1528
|
function handleFocus(event) {
|
|
1354
1529
|
onFocus?.(event);
|
|
1355
|
-
|
|
1356
1530
|
if (shouldFocusGrid) {
|
|
1357
1531
|
selectCell(0);
|
|
1358
1532
|
}
|
|
1359
1533
|
}
|
|
1360
|
-
|
|
1361
1534
|
return /*#__PURE__*/o("div", {
|
|
1362
1535
|
role: "columnheader",
|
|
1363
1536
|
"aria-colindex": column.idx + 1,
|
|
1364
1537
|
"aria-selected": isCellSelected,
|
|
1365
1538
|
"aria-sort": ariaSort,
|
|
1366
1539
|
"aria-colspan": colSpan,
|
|
1367
|
-
ref: ref,
|
|
1368
1540
|
tabIndex: shouldFocusGrid ? 0 : tabIndex,
|
|
1369
1541
|
className: className,
|
|
1370
1542
|
style: getCellStyle(column, colSpan),
|
|
@@ -1372,25 +1544,20 @@ function HeaderCell({
|
|
|
1372
1544
|
onClick: onClick,
|
|
1373
1545
|
onDoubleClick: column.resizable ? onDoubleClick : undefined,
|
|
1374
1546
|
onPointerDown: column.resizable ? onPointerDown : undefined,
|
|
1375
|
-
children:
|
|
1547
|
+
children: renderHeaderCell$1({
|
|
1376
1548
|
column,
|
|
1377
1549
|
sortDirection,
|
|
1378
1550
|
priority,
|
|
1379
1551
|
onSort,
|
|
1380
|
-
|
|
1381
|
-
onAllRowsSelectionChange,
|
|
1382
|
-
isCellSelected
|
|
1552
|
+
tabIndex: childTabIndex
|
|
1383
1553
|
})
|
|
1384
1554
|
});
|
|
1385
1555
|
}
|
|
1386
1556
|
|
|
1387
|
-
const headerRow = "h197vzie7-0-0-beta-
|
|
1557
|
+
const headerRow = "h197vzie7-0-0-beta-33";
|
|
1388
1558
|
const headerRowClassname = `rdg-header-row ${headerRow}`;
|
|
1389
|
-
|
|
1390
1559
|
function HeaderRow({
|
|
1391
1560
|
columns,
|
|
1392
|
-
allRowsSelected,
|
|
1393
|
-
onAllRowsSelectionChange,
|
|
1394
1561
|
onColumnResize,
|
|
1395
1562
|
sortColumns,
|
|
1396
1563
|
onSortColumnsChange,
|
|
@@ -1401,24 +1568,19 @@ function HeaderRow({
|
|
|
1401
1568
|
direction
|
|
1402
1569
|
}) {
|
|
1403
1570
|
const cells = [];
|
|
1404
|
-
|
|
1405
1571
|
for (let index = 0; index < columns.length; index++) {
|
|
1406
1572
|
const column = columns[index];
|
|
1407
1573
|
const colSpan = getColSpan(column, lastFrozenColumnIndex, {
|
|
1408
1574
|
type: 'HEADER'
|
|
1409
1575
|
});
|
|
1410
|
-
|
|
1411
1576
|
if (colSpan !== undefined) {
|
|
1412
1577
|
index += colSpan - 1;
|
|
1413
1578
|
}
|
|
1414
|
-
|
|
1415
1579
|
cells.push( /*#__PURE__*/o(HeaderCell, {
|
|
1416
1580
|
column: column,
|
|
1417
1581
|
colSpan: colSpan,
|
|
1418
1582
|
isCellSelected: selectedCellIdx === column.idx,
|
|
1419
1583
|
onColumnResize: onColumnResize,
|
|
1420
|
-
allRowsSelected: allRowsSelected,
|
|
1421
|
-
onAllRowsSelectionChange: onAllRowsSelectionChange,
|
|
1422
1584
|
onSortColumnsChange: onSortColumnsChange,
|
|
1423
1585
|
sortColumns: sortColumns,
|
|
1424
1586
|
selectCell: selectCell,
|
|
@@ -1426,7 +1588,6 @@ function HeaderRow({
|
|
|
1426
1588
|
direction: direction
|
|
1427
1589
|
}, column.key));
|
|
1428
1590
|
}
|
|
1429
|
-
|
|
1430
1591
|
return /*#__PURE__*/o("div", {
|
|
1431
1592
|
role: "row",
|
|
1432
1593
|
"aria-rowindex": 1,
|
|
@@ -1435,14 +1596,12 @@ function HeaderRow({
|
|
|
1435
1596
|
children: cells
|
|
1436
1597
|
});
|
|
1437
1598
|
}
|
|
1599
|
+
const HeaderRow$1 = /*#__PURE__*/x(HeaderRow);
|
|
1438
1600
|
|
|
1439
|
-
const
|
|
1440
|
-
|
|
1441
|
-
const cellCopied = "ccpfvsn7-0-0-beta-19";
|
|
1601
|
+
const cellCopied = "ccpfvsn7-0-0-beta-33";
|
|
1442
1602
|
const cellCopiedClassname = `rdg-cell-copied ${cellCopied}`;
|
|
1443
|
-
const cellDraggedOver = "c1bmg16t7-0-0-beta-
|
|
1603
|
+
const cellDraggedOver = "c1bmg16t7-0-0-beta-33";
|
|
1444
1604
|
const cellDraggedOverClassname = `rdg-cell-dragged-over ${cellDraggedOver}`;
|
|
1445
|
-
|
|
1446
1605
|
function Cell({
|
|
1447
1606
|
column,
|
|
1448
1607
|
colSpan,
|
|
@@ -1450,52 +1609,76 @@ function Cell({
|
|
|
1450
1609
|
isCopied,
|
|
1451
1610
|
isDraggedOver,
|
|
1452
1611
|
row,
|
|
1612
|
+
rowIdx,
|
|
1453
1613
|
dragHandle,
|
|
1454
|
-
|
|
1455
|
-
|
|
1614
|
+
onClick,
|
|
1615
|
+
onDoubleClick,
|
|
1616
|
+
onContextMenu,
|
|
1456
1617
|
onRowChange,
|
|
1457
1618
|
selectCell,
|
|
1458
1619
|
...props
|
|
1459
1620
|
}) {
|
|
1460
1621
|
const {
|
|
1461
|
-
ref,
|
|
1462
1622
|
tabIndex,
|
|
1623
|
+
childTabIndex,
|
|
1463
1624
|
onFocus
|
|
1464
|
-
} =
|
|
1625
|
+
} = useRovingTabIndex(isCellSelected);
|
|
1465
1626
|
const {
|
|
1466
1627
|
cellClass
|
|
1467
1628
|
} = column;
|
|
1468
1629
|
const className = getCellClassname(column, typeof cellClass === 'function' ? cellClass(row) : cellClass, isCopied && cellCopiedClassname, isDraggedOver && cellDraggedOverClassname);
|
|
1469
|
-
|
|
1630
|
+
const isEditable = isCellEditable(column, row);
|
|
1470
1631
|
function selectCellWrapper(openEditor) {
|
|
1471
|
-
selectCell(
|
|
1632
|
+
selectCell({
|
|
1633
|
+
rowIdx,
|
|
1634
|
+
idx: column.idx
|
|
1635
|
+
}, openEditor);
|
|
1472
1636
|
}
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
|
|
1637
|
+
function handleClick(event) {
|
|
1638
|
+
if (onClick) {
|
|
1639
|
+
const cellEvent = createCellEvent(event);
|
|
1640
|
+
onClick({
|
|
1641
|
+
row,
|
|
1642
|
+
column,
|
|
1643
|
+
selectCell: selectCellWrapper
|
|
1644
|
+
}, cellEvent);
|
|
1645
|
+
if (cellEvent.isGridDefaultPrevented()) return;
|
|
1646
|
+
}
|
|
1647
|
+
selectCellWrapper();
|
|
1477
1648
|
}
|
|
1478
|
-
|
|
1479
|
-
|
|
1649
|
+
function handleContextMenu(event) {
|
|
1650
|
+
if (onContextMenu) {
|
|
1651
|
+
const cellEvent = createCellEvent(event);
|
|
1652
|
+
onContextMenu({
|
|
1653
|
+
row,
|
|
1654
|
+
column,
|
|
1655
|
+
selectCell: selectCellWrapper
|
|
1656
|
+
}, cellEvent);
|
|
1657
|
+
if (cellEvent.isGridDefaultPrevented()) return;
|
|
1658
|
+
}
|
|
1480
1659
|
selectCellWrapper();
|
|
1481
1660
|
}
|
|
1482
|
-
|
|
1483
|
-
|
|
1661
|
+
function handleDoubleClick(event) {
|
|
1662
|
+
if (onDoubleClick) {
|
|
1663
|
+
const cellEvent = createCellEvent(event);
|
|
1664
|
+
onDoubleClick({
|
|
1665
|
+
row,
|
|
1666
|
+
column,
|
|
1667
|
+
selectCell: selectCellWrapper
|
|
1668
|
+
}, cellEvent);
|
|
1669
|
+
if (cellEvent.isGridDefaultPrevented()) return;
|
|
1670
|
+
}
|
|
1484
1671
|
selectCellWrapper(true);
|
|
1485
|
-
onRowDoubleClick?.(row, column);
|
|
1486
1672
|
}
|
|
1487
|
-
|
|
1488
1673
|
function handleRowChange(newRow) {
|
|
1489
1674
|
onRowChange(column, newRow);
|
|
1490
1675
|
}
|
|
1491
|
-
|
|
1492
1676
|
return /*#__PURE__*/o("div", {
|
|
1493
1677
|
role: "gridcell",
|
|
1494
1678
|
"aria-colindex": column.idx + 1,
|
|
1495
1679
|
"aria-selected": isCellSelected,
|
|
1496
1680
|
"aria-colspan": colSpan,
|
|
1497
|
-
"aria-readonly": !
|
|
1498
|
-
ref: ref,
|
|
1681
|
+
"aria-readonly": !isEditable || undefined,
|
|
1499
1682
|
tabIndex: tabIndex,
|
|
1500
1683
|
className: className,
|
|
1501
1684
|
style: getCellStyle(column, colSpan),
|
|
@@ -1504,18 +1687,18 @@ function Cell({
|
|
|
1504
1687
|
onContextMenu: handleContextMenu,
|
|
1505
1688
|
onFocus: onFocus,
|
|
1506
1689
|
...props,
|
|
1507
|
-
children: !column.rowGroup && /*#__PURE__*/o(
|
|
1508
|
-
children: [column.
|
|
1690
|
+
children: !column.rowGroup && /*#__PURE__*/o(k$2, {
|
|
1691
|
+
children: [column.renderCell({
|
|
1509
1692
|
column,
|
|
1510
1693
|
row,
|
|
1511
|
-
|
|
1694
|
+
isCellEditable: isEditable,
|
|
1695
|
+
tabIndex: childTabIndex,
|
|
1512
1696
|
onRowChange: handleRowChange
|
|
1513
1697
|
}), dragHandle]
|
|
1514
1698
|
})
|
|
1515
1699
|
});
|
|
1516
1700
|
}
|
|
1517
|
-
|
|
1518
|
-
const Cell$1 = /*#__PURE__*/w(Cell);
|
|
1701
|
+
const Cell$1 = /*#__PURE__*/x(Cell);
|
|
1519
1702
|
|
|
1520
1703
|
function Row({
|
|
1521
1704
|
className,
|
|
@@ -1531,8 +1714,9 @@ function Row({
|
|
|
1531
1714
|
viewportColumns,
|
|
1532
1715
|
selectedCellEditor,
|
|
1533
1716
|
selectedCellDragHandle,
|
|
1534
|
-
|
|
1535
|
-
|
|
1717
|
+
onCellClick,
|
|
1718
|
+
onCellDoubleClick,
|
|
1719
|
+
onCellContextMenu,
|
|
1536
1720
|
rowClass,
|
|
1537
1721
|
setDraggedOverRowIdx,
|
|
1538
1722
|
onMouseEnter,
|
|
@@ -1543,15 +1727,12 @@ function Row({
|
|
|
1543
1727
|
const handleRowChange = useLatestFunc((column, newRow) => {
|
|
1544
1728
|
onRowChange(column, rowIdx, newRow);
|
|
1545
1729
|
});
|
|
1546
|
-
|
|
1547
1730
|
function handleDragEnter(event) {
|
|
1548
1731
|
setDraggedOverRowIdx?.(rowIdx);
|
|
1549
1732
|
onMouseEnter?.(event);
|
|
1550
1733
|
}
|
|
1551
|
-
|
|
1552
|
-
className = clsx(rowClassname, `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`, rowClass?.(row), className, selectedCellIdx === -1 && rowSelectedClassname);
|
|
1734
|
+
className = clsx(rowClassname, `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`, rowClass?.(row, rowIdx), className, selectedCellIdx === -1 && rowSelectedClassname);
|
|
1553
1735
|
const cells = [];
|
|
1554
|
-
|
|
1555
1736
|
for (let index = 0; index < viewportColumns.length; index++) {
|
|
1556
1737
|
const column = viewportColumns[index];
|
|
1557
1738
|
const {
|
|
@@ -1561,13 +1742,10 @@ function Row({
|
|
|
1561
1742
|
type: 'ROW',
|
|
1562
1743
|
row
|
|
1563
1744
|
});
|
|
1564
|
-
|
|
1565
1745
|
if (colSpan !== undefined) {
|
|
1566
1746
|
index += colSpan - 1;
|
|
1567
1747
|
}
|
|
1568
|
-
|
|
1569
1748
|
const isCellSelected = selectedCellIdx === idx;
|
|
1570
|
-
|
|
1571
1749
|
if (isCellSelected && selectedCellEditor) {
|
|
1572
1750
|
cells.push(selectedCellEditor);
|
|
1573
1751
|
} else {
|
|
@@ -1575,18 +1753,19 @@ function Row({
|
|
|
1575
1753
|
column: column,
|
|
1576
1754
|
colSpan: colSpan,
|
|
1577
1755
|
row: row,
|
|
1756
|
+
rowIdx: rowIdx,
|
|
1578
1757
|
isCopied: copiedCellIdx === idx,
|
|
1579
1758
|
isDraggedOver: draggedOverCellIdx === idx,
|
|
1580
1759
|
isCellSelected: isCellSelected,
|
|
1581
1760
|
dragHandle: isCellSelected ? selectedCellDragHandle : undefined,
|
|
1582
|
-
|
|
1583
|
-
|
|
1761
|
+
onClick: onCellClick,
|
|
1762
|
+
onDoubleClick: onCellDoubleClick,
|
|
1763
|
+
onContextMenu: onCellContextMenu,
|
|
1584
1764
|
onRowChange: handleRowChange,
|
|
1585
1765
|
selectCell: selectCell
|
|
1586
1766
|
}, column.key));
|
|
1587
1767
|
}
|
|
1588
1768
|
}
|
|
1589
|
-
|
|
1590
1769
|
return /*#__PURE__*/o(RowSelectionProvider, {
|
|
1591
1770
|
value: isRowSelected,
|
|
1592
1771
|
children: /*#__PURE__*/o("div", {
|
|
@@ -1600,435 +1779,184 @@ function Row({
|
|
|
1600
1779
|
})
|
|
1601
1780
|
});
|
|
1602
1781
|
}
|
|
1603
|
-
|
|
1604
|
-
|
|
1605
|
-
|
|
1606
|
-
|
|
1782
|
+
const RowComponent = /*#__PURE__*/x( /*#__PURE__*/k(Row));
|
|
1783
|
+
function defaultRenderRow(key, props) {
|
|
1784
|
+
return /*#__PURE__*/o(RowComponent, {
|
|
1785
|
+
...props
|
|
1607
1786
|
}, key);
|
|
1608
1787
|
}
|
|
1609
1788
|
|
|
1610
|
-
function
|
|
1611
|
-
|
|
1612
|
-
|
|
1613
|
-
|
|
1614
|
-
|
|
1615
|
-
|
|
1789
|
+
function ScrollToCell({
|
|
1790
|
+
scrollToPosition: {
|
|
1791
|
+
idx,
|
|
1792
|
+
rowIdx
|
|
1793
|
+
},
|
|
1794
|
+
gridElement,
|
|
1795
|
+
setScrollToCellPosition
|
|
1796
|
+
}) {
|
|
1797
|
+
const ref = _$1(null);
|
|
1798
|
+
useLayoutEffect(() => {
|
|
1799
|
+
scrollIntoView(ref.current);
|
|
1800
|
+
});
|
|
1801
|
+
useLayoutEffect(() => {
|
|
1802
|
+
function removeScrollToCell() {
|
|
1803
|
+
setScrollToCellPosition(null);
|
|
1804
|
+
}
|
|
1805
|
+
const observer = new IntersectionObserver(removeScrollToCell, {
|
|
1806
|
+
root: gridElement,
|
|
1807
|
+
threshold: 1.0
|
|
1808
|
+
});
|
|
1809
|
+
observer.observe(ref.current);
|
|
1810
|
+
return () => {
|
|
1811
|
+
observer.disconnect();
|
|
1812
|
+
};
|
|
1813
|
+
}, [gridElement, setScrollToCellPosition]);
|
|
1814
|
+
return /*#__PURE__*/o("div", {
|
|
1815
|
+
ref: ref,
|
|
1816
|
+
style: {
|
|
1817
|
+
gridColumn: idx === undefined ? '1/-1' : idx + 1,
|
|
1818
|
+
gridRow: rowIdx === undefined ? '1/-1' : rowIdx + 2
|
|
1819
|
+
}
|
|
1820
|
+
});
|
|
1821
|
+
}
|
|
1822
|
+
|
|
1823
|
+
const arrow = "a1mygwml7-0-0-beta-33";
|
|
1824
|
+
const arrowClassname = `rdg-sort-arrow ${arrow}`;
|
|
1825
|
+
function renderSortStatus({
|
|
1826
|
+
sortDirection,
|
|
1827
|
+
priority
|
|
1828
|
+
}) {
|
|
1829
|
+
return /*#__PURE__*/o(k$2, {
|
|
1830
|
+
children: [renderSortIcon({
|
|
1831
|
+
sortDirection
|
|
1832
|
+
}), renderSortPriority({
|
|
1833
|
+
priority
|
|
1834
|
+
})]
|
|
1835
|
+
});
|
|
1836
|
+
}
|
|
1837
|
+
function renderSortIcon({
|
|
1838
|
+
sortDirection
|
|
1839
|
+
}) {
|
|
1840
|
+
if (sortDirection === undefined) return null;
|
|
1841
|
+
return /*#__PURE__*/o("svg", {
|
|
1842
|
+
viewBox: "0 0 12 8",
|
|
1843
|
+
width: "12",
|
|
1844
|
+
height: "8",
|
|
1845
|
+
className: arrowClassname,
|
|
1846
|
+
"aria-hidden": true,
|
|
1847
|
+
children: /*#__PURE__*/o("path", {
|
|
1848
|
+
d: sortDirection === 'ASC' ? 'M0 8 6 0 12 8' : 'M0 0 6 8 12 0'
|
|
1849
|
+
})
|
|
1850
|
+
});
|
|
1851
|
+
}
|
|
1852
|
+
function renderSortPriority({
|
|
1853
|
+
priority
|
|
1854
|
+
}) {
|
|
1855
|
+
return priority;
|
|
1856
|
+
}
|
|
1857
|
+
|
|
1858
|
+
const root = "r104f42s7-0-0-beta-33";
|
|
1859
|
+
const rootClassname = `rdg ${root}`;
|
|
1860
|
+
const viewportDragging = "v7ly7s7-0-0-beta-33";
|
|
1861
|
+
const viewportDraggingClassname = `rdg-viewport-dragging ${viewportDragging}`;
|
|
1862
|
+
const focusSinkClassname = "fc4f4zb7-0-0-beta-33";
|
|
1863
|
+
|
|
1864
|
+
const summaryCellClassname = "s1n3hxke7-0-0-beta-33";
|
|
1865
|
+
function SummaryCell({
|
|
1616
1866
|
column,
|
|
1867
|
+
colSpan,
|
|
1617
1868
|
row,
|
|
1618
|
-
|
|
1619
|
-
|
|
1869
|
+
rowIdx,
|
|
1870
|
+
isCellSelected,
|
|
1871
|
+
selectCell
|
|
1620
1872
|
}) {
|
|
1621
1873
|
const {
|
|
1622
|
-
ref,
|
|
1623
1874
|
tabIndex,
|
|
1875
|
+
childTabIndex,
|
|
1624
1876
|
onFocus
|
|
1625
|
-
} =
|
|
1626
|
-
|
|
1627
|
-
|
|
1628
|
-
|
|
1877
|
+
} = useRovingTabIndex(isCellSelected);
|
|
1878
|
+
const {
|
|
1879
|
+
summaryCellClass
|
|
1880
|
+
} = column;
|
|
1881
|
+
const className = getCellClassname(column, summaryCellClassname, typeof summaryCellClass === 'function' ? summaryCellClass(row) : summaryCellClass);
|
|
1882
|
+
function onClick() {
|
|
1883
|
+
selectCell({
|
|
1884
|
+
rowIdx,
|
|
1885
|
+
idx: column.idx
|
|
1886
|
+
});
|
|
1629
1887
|
}
|
|
1630
|
-
|
|
1631
|
-
const isLevelMatching = column.rowGroup && groupColumnIndex === column.idx;
|
|
1632
1888
|
return /*#__PURE__*/o("div", {
|
|
1633
1889
|
role: "gridcell",
|
|
1634
1890
|
"aria-colindex": column.idx + 1,
|
|
1891
|
+
"aria-colspan": colSpan,
|
|
1635
1892
|
"aria-selected": isCellSelected,
|
|
1636
|
-
ref: ref,
|
|
1637
|
-
tabIndex: tabIndex,
|
|
1638
|
-
className: getCellClassname(column),
|
|
1639
|
-
style: { ...getCellStyle(column),
|
|
1640
|
-
cursor: isLevelMatching ? 'pointer' : 'default'
|
|
1641
|
-
},
|
|
1642
|
-
onClick: isLevelMatching ? toggleGroup : undefined,
|
|
1643
|
-
onFocus: onFocus,
|
|
1644
|
-
children: (!column.rowGroup || groupColumnIndex === column.idx) && column.groupFormatter?.({
|
|
1645
|
-
groupKey,
|
|
1646
|
-
childRows,
|
|
1647
|
-
column,
|
|
1648
|
-
row,
|
|
1649
|
-
isExpanded,
|
|
1650
|
-
isCellSelected,
|
|
1651
|
-
toggleGroup
|
|
1652
|
-
})
|
|
1653
|
-
}, column.key);
|
|
1654
|
-
}
|
|
1655
|
-
|
|
1656
|
-
const GroupCell$1 = /*#__PURE__*/w(GroupCell);
|
|
1657
|
-
|
|
1658
|
-
const groupRow = "gyxx7e97-0-0-beta-19";
|
|
1659
|
-
const groupRowClassname = `rdg-group-row ${groupRow}`;
|
|
1660
|
-
|
|
1661
|
-
function GroupedRow({
|
|
1662
|
-
id,
|
|
1663
|
-
groupKey,
|
|
1664
|
-
viewportColumns,
|
|
1665
|
-
childRows,
|
|
1666
|
-
rowIdx,
|
|
1667
|
-
row,
|
|
1668
|
-
gridRowStart,
|
|
1669
|
-
height,
|
|
1670
|
-
level,
|
|
1671
|
-
isExpanded,
|
|
1672
|
-
selectedCellIdx,
|
|
1673
|
-
isRowSelected,
|
|
1674
|
-
selectGroup,
|
|
1675
|
-
toggleGroup,
|
|
1676
|
-
...props
|
|
1677
|
-
}) {
|
|
1678
|
-
const idx = viewportColumns[0].key === SELECT_COLUMN_KEY ? level + 1 : level;
|
|
1679
|
-
|
|
1680
|
-
function handleSelectGroup() {
|
|
1681
|
-
selectGroup(rowIdx);
|
|
1682
|
-
}
|
|
1683
|
-
|
|
1684
|
-
return /*#__PURE__*/o(RowSelectionProvider, {
|
|
1685
|
-
value: isRowSelected,
|
|
1686
|
-
children: /*#__PURE__*/o("div", {
|
|
1687
|
-
role: "row",
|
|
1688
|
-
"aria-level": level,
|
|
1689
|
-
"aria-expanded": isExpanded,
|
|
1690
|
-
className: clsx(rowClassname, groupRowClassname, `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`, selectedCellIdx === -1 && rowSelectedClassname),
|
|
1691
|
-
onClick: handleSelectGroup,
|
|
1692
|
-
style: getRowStyle(gridRowStart, height),
|
|
1693
|
-
...props,
|
|
1694
|
-
children: viewportColumns.map(column => /*#__PURE__*/o(GroupCell$1, {
|
|
1695
|
-
id: id,
|
|
1696
|
-
groupKey: groupKey,
|
|
1697
|
-
childRows: childRows,
|
|
1698
|
-
isExpanded: isExpanded,
|
|
1699
|
-
isCellSelected: selectedCellIdx === column.idx,
|
|
1700
|
-
column: column,
|
|
1701
|
-
row: row,
|
|
1702
|
-
groupColumnIndex: idx,
|
|
1703
|
-
toggleGroup: toggleGroup
|
|
1704
|
-
}, column.key))
|
|
1705
|
-
})
|
|
1706
|
-
});
|
|
1707
|
-
}
|
|
1708
|
-
|
|
1709
|
-
const GroupRowRenderer = /*#__PURE__*/w(GroupedRow);
|
|
1710
|
-
|
|
1711
|
-
const summaryCellClassname = "s1n3hxke7-0-0-beta-19";
|
|
1712
|
-
|
|
1713
|
-
function SummaryCell({
|
|
1714
|
-
column,
|
|
1715
|
-
colSpan,
|
|
1716
|
-
row,
|
|
1717
|
-
isCellSelected,
|
|
1718
|
-
selectCell
|
|
1719
|
-
}) {
|
|
1720
|
-
const {
|
|
1721
|
-
ref,
|
|
1722
|
-
tabIndex,
|
|
1723
|
-
onFocus
|
|
1724
|
-
} = useRovingCellRef(isCellSelected);
|
|
1725
|
-
const {
|
|
1726
|
-
summaryCellClass
|
|
1727
|
-
} = column;
|
|
1728
|
-
const className = getCellClassname(column, summaryCellClassname, typeof summaryCellClass === 'function' ? summaryCellClass(row) : summaryCellClass);
|
|
1729
|
-
|
|
1730
|
-
function onClick() {
|
|
1731
|
-
selectCell(row, column);
|
|
1732
|
-
}
|
|
1733
|
-
|
|
1734
|
-
return /*#__PURE__*/o("div", {
|
|
1735
|
-
role: "gridcell",
|
|
1736
|
-
"aria-colindex": column.idx + 1,
|
|
1737
|
-
"aria-colspan": colSpan,
|
|
1738
|
-
"aria-selected": isCellSelected,
|
|
1739
|
-
ref: ref,
|
|
1740
1893
|
tabIndex: tabIndex,
|
|
1741
1894
|
className: className,
|
|
1742
1895
|
style: getCellStyle(column, colSpan),
|
|
1743
1896
|
onClick: onClick,
|
|
1744
1897
|
onFocus: onFocus,
|
|
1745
|
-
children: column.
|
|
1898
|
+
children: column.renderSummaryCell?.({
|
|
1746
1899
|
column,
|
|
1747
1900
|
row,
|
|
1748
|
-
|
|
1901
|
+
tabIndex: childTabIndex
|
|
1749
1902
|
})
|
|
1750
1903
|
});
|
|
1751
1904
|
}
|
|
1905
|
+
const SummaryCell$1 = /*#__PURE__*/x(SummaryCell);
|
|
1752
1906
|
|
|
1753
|
-
const
|
|
1754
|
-
|
|
1755
|
-
const
|
|
1756
|
-
const
|
|
1757
|
-
const topSummaryRowBorderClassname = "t14bmecc7-0-0-beta-19";
|
|
1758
|
-
const bottomSummaryRowBorderClassname = "b1odhhml7-0-0-beta-19";
|
|
1907
|
+
const summaryRow = "snfqesz7-0-0-beta-33";
|
|
1908
|
+
const topSummaryRow = "t1jijrjz7-0-0-beta-33";
|
|
1909
|
+
const topSummaryRowBorderClassname = "t14bmecc7-0-0-beta-33";
|
|
1910
|
+
const bottomSummaryRowBorderClassname = "b1odhhml7-0-0-beta-33";
|
|
1759
1911
|
const summaryRowClassname = `rdg-summary-row ${summaryRow}`;
|
|
1760
1912
|
const topSummaryRowClassname = `rdg-top-summary-row ${topSummaryRow}`;
|
|
1761
|
-
|
|
1762
1913
|
function SummaryRow({
|
|
1763
1914
|
rowIdx,
|
|
1764
1915
|
gridRowStart,
|
|
1765
1916
|
row,
|
|
1766
1917
|
viewportColumns,
|
|
1767
|
-
top,
|
|
1768
|
-
bottom,
|
|
1769
|
-
lastFrozenColumnIndex,
|
|
1770
|
-
selectedCellIdx,
|
|
1771
|
-
|
|
1772
|
-
|
|
1773
|
-
|
|
1774
|
-
|
|
1775
|
-
const cells = [];
|
|
1776
|
-
|
|
1777
|
-
for (let index = 0; index < viewportColumns.length; index++) {
|
|
1778
|
-
const column = viewportColumns[index];
|
|
1779
|
-
const colSpan = getColSpan(column, lastFrozenColumnIndex, {
|
|
1780
|
-
type: 'SUMMARY',
|
|
1781
|
-
row
|
|
1782
|
-
});
|
|
1783
|
-
|
|
1784
|
-
if (colSpan !== undefined) {
|
|
1785
|
-
index += colSpan - 1;
|
|
1786
|
-
}
|
|
1787
|
-
|
|
1788
|
-
const isCellSelected = selectedCellIdx === column.idx;
|
|
1789
|
-
cells.push( /*#__PURE__*/o(SummaryCell$1, {
|
|
1790
|
-
column: column,
|
|
1791
|
-
colSpan: colSpan,
|
|
1792
|
-
row: row,
|
|
1793
|
-
isCellSelected: isCellSelected,
|
|
1794
|
-
selectCell: selectCell
|
|
1795
|
-
}, column.key));
|
|
1796
|
-
}
|
|
1797
|
-
|
|
1798
|
-
const isTop = lastTopRowIdx !== undefined;
|
|
1799
|
-
return /*#__PURE__*/o("div", {
|
|
1800
|
-
role: "row",
|
|
1801
|
-
"aria-rowindex": ariaRowIndex,
|
|
1802
|
-
className: clsx(rowClassname, `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`, summaryRowClassname, isTop ? [topSummaryRowClassname, lastTopRowIdx === rowIdx && topSummaryRowBorderClassname] : ['rdg-bottom-summary-row', rowIdx === 0 && bottomSummaryRowBorderClassname], selectedCellIdx === -1 && rowSelectedClassname),
|
|
1803
|
-
style: { ...getRowStyle(gridRowStart),
|
|
1804
|
-
'--rdg-summary-row-top': top !== undefined ? `${top}px` : undefined,
|
|
1805
|
-
'--rdg-summary-row-bottom': bottom !== undefined ? `${bottom}px` : undefined
|
|
1806
|
-
},
|
|
1807
|
-
children: cells
|
|
1808
|
-
});
|
|
1809
|
-
}
|
|
1810
|
-
|
|
1811
|
-
const SummaryRow$1 = /*#__PURE__*/w(SummaryRow);
|
|
1812
|
-
|
|
1813
|
-
const cellEditing = "c1tngyp17-0-0-beta-19";
|
|
1814
|
-
function EditCell({
|
|
1815
|
-
column,
|
|
1816
|
-
colSpan,
|
|
1817
|
-
row,
|
|
1818
|
-
onRowChange,
|
|
1819
|
-
closeEditor
|
|
1820
|
-
}) {
|
|
1821
|
-
const frameRequestRef = _$1();
|
|
1822
|
-
const commitOnOutsideClick = column.editorOptions?.commitOnOutsideClick !== false;
|
|
1823
|
-
const commitOnOutsideMouseDown = useLatestFunc(() => {
|
|
1824
|
-
onClose(true);
|
|
1825
|
-
});
|
|
1826
|
-
h(() => {
|
|
1827
|
-
if (!commitOnOutsideClick) return;
|
|
1828
|
-
|
|
1829
|
-
function onWindowCaptureMouseDown() {
|
|
1830
|
-
frameRequestRef.current = requestAnimationFrame(commitOnOutsideMouseDown);
|
|
1831
|
-
}
|
|
1832
|
-
|
|
1833
|
-
addEventListener('mousedown', onWindowCaptureMouseDown, {
|
|
1834
|
-
capture: true
|
|
1835
|
-
});
|
|
1836
|
-
return () => {
|
|
1837
|
-
removeEventListener('mousedown', onWindowCaptureMouseDown, {
|
|
1838
|
-
capture: true
|
|
1839
|
-
});
|
|
1840
|
-
cancelFrameRequest();
|
|
1841
|
-
};
|
|
1842
|
-
}, [commitOnOutsideClick, commitOnOutsideMouseDown]);
|
|
1843
|
-
|
|
1844
|
-
function cancelFrameRequest() {
|
|
1845
|
-
cancelAnimationFrame(frameRequestRef.current);
|
|
1846
|
-
}
|
|
1847
|
-
|
|
1848
|
-
function onKeyDown(event) {
|
|
1849
|
-
if (event.key === 'Escape') {
|
|
1850
|
-
event.stopPropagation();
|
|
1851
|
-
onClose();
|
|
1852
|
-
} else if (event.key === 'Enter') {
|
|
1853
|
-
event.stopPropagation();
|
|
1854
|
-
onClose(true);
|
|
1855
|
-
} else {
|
|
1856
|
-
const onNavigation = column.editorOptions?.onNavigation ?? onEditorNavigation;
|
|
1857
|
-
|
|
1858
|
-
if (!onNavigation(event)) {
|
|
1859
|
-
event.stopPropagation();
|
|
1860
|
-
}
|
|
1861
|
-
}
|
|
1862
|
-
}
|
|
1863
|
-
|
|
1864
|
-
function onClose(commitChanges) {
|
|
1865
|
-
if (commitChanges) {
|
|
1866
|
-
onRowChange(row, true);
|
|
1867
|
-
} else {
|
|
1868
|
-
closeEditor();
|
|
1869
|
-
}
|
|
1870
|
-
}
|
|
1871
|
-
|
|
1872
|
-
const {
|
|
1873
|
-
cellClass
|
|
1874
|
-
} = column;
|
|
1875
|
-
const className = getCellClassname(column, 'rdg-editor-container', typeof cellClass === 'function' ? cellClass(row) : cellClass, !column.editorOptions?.renderFormatter && cellEditing);
|
|
1876
|
-
return /*#__PURE__*/o("div", {
|
|
1877
|
-
role: "gridcell",
|
|
1878
|
-
"aria-colindex": column.idx + 1,
|
|
1879
|
-
"aria-colspan": colSpan,
|
|
1880
|
-
"aria-selected": true,
|
|
1881
|
-
className: className,
|
|
1882
|
-
style: getCellStyle(column, colSpan),
|
|
1883
|
-
onKeyDown: onKeyDown,
|
|
1884
|
-
onMouseDownCapture: commitOnOutsideClick ? cancelFrameRequest : undefined,
|
|
1885
|
-
children: column.editor != null && /*#__PURE__*/o(p$1, {
|
|
1886
|
-
children: [column.editor({
|
|
1887
|
-
column,
|
|
1888
|
-
row,
|
|
1889
|
-
onRowChange,
|
|
1890
|
-
onClose
|
|
1891
|
-
}), column.editorOptions?.renderFormatter && column.formatter({
|
|
1892
|
-
column,
|
|
1893
|
-
row,
|
|
1894
|
-
isCellSelected: true,
|
|
1895
|
-
onRowChange
|
|
1896
|
-
})]
|
|
1897
|
-
})
|
|
1898
|
-
});
|
|
1899
|
-
}
|
|
1900
|
-
|
|
1901
|
-
const cellDragHandle = "cadd3bp7-0-0-beta-19";
|
|
1902
|
-
const cellDragHandleClassname = `rdg-cell-drag-handle ${cellDragHandle}`;
|
|
1903
|
-
function DragHandle({
|
|
1904
|
-
rows,
|
|
1905
|
-
columns,
|
|
1906
|
-
selectedPosition,
|
|
1907
|
-
latestDraggedOverRowIdx,
|
|
1908
|
-
isCellEditable,
|
|
1909
|
-
onRowsChange,
|
|
1910
|
-
onFill,
|
|
1911
|
-
setDragging,
|
|
1912
|
-
setDraggedOverRowIdx
|
|
1913
|
-
}) {
|
|
1914
|
-
function handleMouseDown(event) {
|
|
1915
|
-
if (event.buttons !== 1) return;
|
|
1916
|
-
setDragging(true);
|
|
1917
|
-
window.addEventListener('mouseover', onMouseOver);
|
|
1918
|
-
window.addEventListener('mouseup', onMouseUp);
|
|
1919
|
-
|
|
1920
|
-
function onMouseOver(event) {
|
|
1921
|
-
if (event.buttons !== 1) onMouseUp();
|
|
1922
|
-
}
|
|
1923
|
-
|
|
1924
|
-
function onMouseUp() {
|
|
1925
|
-
window.removeEventListener('mouseover', onMouseOver);
|
|
1926
|
-
window.removeEventListener('mouseup', onMouseUp);
|
|
1927
|
-
setDragging(false);
|
|
1928
|
-
handleDragEnd();
|
|
1929
|
-
}
|
|
1930
|
-
}
|
|
1931
|
-
|
|
1932
|
-
function handleDragEnd() {
|
|
1933
|
-
const overRowIdx = latestDraggedOverRowIdx.current;
|
|
1934
|
-
if (overRowIdx === undefined) return;
|
|
1935
|
-
const {
|
|
1936
|
-
rowIdx
|
|
1937
|
-
} = selectedPosition;
|
|
1938
|
-
const startRowIndex = rowIdx < overRowIdx ? rowIdx + 1 : overRowIdx;
|
|
1939
|
-
const endRowIndex = rowIdx < overRowIdx ? overRowIdx + 1 : rowIdx;
|
|
1940
|
-
updateRows(startRowIndex, endRowIndex);
|
|
1941
|
-
setDraggedOverRowIdx(undefined);
|
|
1942
|
-
}
|
|
1943
|
-
|
|
1944
|
-
function handleDoubleClick(event) {
|
|
1945
|
-
event.stopPropagation();
|
|
1946
|
-
updateRows(selectedPosition.rowIdx + 1, rows.length);
|
|
1947
|
-
}
|
|
1948
|
-
|
|
1949
|
-
function updateRows(startRowIdx, endRowIdx) {
|
|
1950
|
-
const {
|
|
1951
|
-
idx,
|
|
1952
|
-
rowIdx
|
|
1953
|
-
} = selectedPosition;
|
|
1954
|
-
const column = columns[idx];
|
|
1955
|
-
const sourceRow = rows[rowIdx];
|
|
1956
|
-
const updatedRows = [...rows];
|
|
1957
|
-
const indexes = [];
|
|
1958
|
-
|
|
1959
|
-
for (let i = startRowIdx; i < endRowIdx; i++) {
|
|
1960
|
-
if (isCellEditable({
|
|
1961
|
-
rowIdx: i,
|
|
1962
|
-
idx
|
|
1963
|
-
})) {
|
|
1964
|
-
const updatedRow = onFill({
|
|
1965
|
-
columnKey: column.key,
|
|
1966
|
-
sourceRow,
|
|
1967
|
-
targetRow: rows[i]
|
|
1968
|
-
});
|
|
1969
|
-
|
|
1970
|
-
if (updatedRow !== rows[i]) {
|
|
1971
|
-
updatedRows[i] = updatedRow;
|
|
1972
|
-
indexes.push(i);
|
|
1973
|
-
}
|
|
1974
|
-
}
|
|
1975
|
-
}
|
|
1976
|
-
|
|
1977
|
-
if (indexes.length > 0) {
|
|
1978
|
-
onRowsChange?.(updatedRows, {
|
|
1979
|
-
indexes,
|
|
1980
|
-
column
|
|
1981
|
-
});
|
|
1982
|
-
}
|
|
1983
|
-
}
|
|
1984
|
-
|
|
1985
|
-
return /*#__PURE__*/o("div", {
|
|
1986
|
-
className: cellDragHandleClassname,
|
|
1987
|
-
onMouseDown: handleMouseDown,
|
|
1988
|
-
onDoubleClick: handleDoubleClick
|
|
1989
|
-
});
|
|
1990
|
-
}
|
|
1991
|
-
|
|
1992
|
-
const arrow = "a1mygwml7-0-0-beta-19";
|
|
1993
|
-
const arrowClassname = `rdg-sort-arrow ${arrow}`;
|
|
1994
|
-
function sortStatus({
|
|
1995
|
-
sortDirection,
|
|
1996
|
-
priority
|
|
1997
|
-
}) {
|
|
1998
|
-
return /*#__PURE__*/o(p$1, {
|
|
1999
|
-
children: [sortIcon({
|
|
2000
|
-
sortDirection
|
|
2001
|
-
}), sortPriority({
|
|
2002
|
-
priority
|
|
2003
|
-
})]
|
|
2004
|
-
});
|
|
2005
|
-
}
|
|
2006
|
-
function sortIcon({
|
|
2007
|
-
sortDirection
|
|
2008
|
-
}) {
|
|
2009
|
-
if (sortDirection === undefined) return null;
|
|
2010
|
-
return /*#__PURE__*/o("svg", {
|
|
2011
|
-
viewBox: "0 0 12 8",
|
|
2012
|
-
width: "12",
|
|
2013
|
-
height: "8",
|
|
2014
|
-
className: arrowClassname,
|
|
2015
|
-
"aria-hidden": true,
|
|
2016
|
-
children: /*#__PURE__*/o("path", {
|
|
2017
|
-
d: sortDirection === 'ASC' ? 'M0 8 6 0 12 8' : 'M0 0 6 8 12 0'
|
|
2018
|
-
})
|
|
2019
|
-
});
|
|
2020
|
-
}
|
|
2021
|
-
function sortPriority({
|
|
2022
|
-
priority
|
|
1918
|
+
top,
|
|
1919
|
+
bottom,
|
|
1920
|
+
lastFrozenColumnIndex,
|
|
1921
|
+
selectedCellIdx,
|
|
1922
|
+
isTop,
|
|
1923
|
+
showBorder,
|
|
1924
|
+
selectCell,
|
|
1925
|
+
'aria-rowindex': ariaRowIndex
|
|
2023
1926
|
}) {
|
|
2024
|
-
|
|
1927
|
+
const cells = [];
|
|
1928
|
+
for (let index = 0; index < viewportColumns.length; index++) {
|
|
1929
|
+
const column = viewportColumns[index];
|
|
1930
|
+
const colSpan = getColSpan(column, lastFrozenColumnIndex, {
|
|
1931
|
+
type: 'SUMMARY',
|
|
1932
|
+
row
|
|
1933
|
+
});
|
|
1934
|
+
if (colSpan !== undefined) {
|
|
1935
|
+
index += colSpan - 1;
|
|
1936
|
+
}
|
|
1937
|
+
const isCellSelected = selectedCellIdx === column.idx;
|
|
1938
|
+
cells.push( /*#__PURE__*/o(SummaryCell$1, {
|
|
1939
|
+
column: column,
|
|
1940
|
+
colSpan: colSpan,
|
|
1941
|
+
row: row,
|
|
1942
|
+
rowIdx: rowIdx,
|
|
1943
|
+
isCellSelected: isCellSelected,
|
|
1944
|
+
selectCell: selectCell
|
|
1945
|
+
}, column.key));
|
|
1946
|
+
}
|
|
1947
|
+
return /*#__PURE__*/o("div", {
|
|
1948
|
+
role: "row",
|
|
1949
|
+
"aria-rowindex": ariaRowIndex,
|
|
1950
|
+
className: clsx(rowClassname, `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`, summaryRowClassname, isTop ? [topSummaryRowClassname, showBorder && topSummaryRowBorderClassname] : ['rdg-bottom-summary-row', showBorder && bottomSummaryRowBorderClassname], selectedCellIdx === -1 && rowSelectedClassname),
|
|
1951
|
+
style: {
|
|
1952
|
+
...getRowStyle(gridRowStart),
|
|
1953
|
+
'--rdg-summary-row-top': top !== undefined ? `${top}px` : undefined,
|
|
1954
|
+
'--rdg-summary-row-bottom': bottom !== undefined ? `${bottom}px` : undefined
|
|
1955
|
+
},
|
|
1956
|
+
children: cells
|
|
1957
|
+
});
|
|
2025
1958
|
}
|
|
2026
|
-
|
|
2027
|
-
const initialPosition = {
|
|
2028
|
-
idx: -1,
|
|
2029
|
-
rowIdx: -2,
|
|
2030
|
-
mode: 'SELECT'
|
|
2031
|
-
};
|
|
1959
|
+
const SummaryRow$1 = /*#__PURE__*/x(SummaryRow);
|
|
2032
1960
|
|
|
2033
1961
|
function DataGrid(props, ref) {
|
|
2034
1962
|
const {
|
|
@@ -2050,14 +1978,15 @@ function DataGrid(props, ref) {
|
|
|
2050
1978
|
rowGrouper,
|
|
2051
1979
|
expandedGroupIds,
|
|
2052
1980
|
onExpandedGroupIdsChange,
|
|
2053
|
-
|
|
2054
|
-
|
|
1981
|
+
onCellClick,
|
|
1982
|
+
onCellDoubleClick,
|
|
1983
|
+
onCellContextMenu,
|
|
1984
|
+
onCellKeyDown,
|
|
2055
1985
|
onScroll,
|
|
2056
1986
|
onColumnResize,
|
|
2057
1987
|
onFill,
|
|
2058
1988
|
onCopy,
|
|
2059
1989
|
onPaste,
|
|
2060
|
-
cellNavigationMode: rawCellNavigationMode,
|
|
2061
1990
|
enableVirtualization: rawEnableVirtualization,
|
|
2062
1991
|
renderers,
|
|
2063
1992
|
className,
|
|
@@ -2069,43 +1998,51 @@ function DataGrid(props, ref) {
|
|
|
2069
1998
|
'aria-describedby': ariaDescribedBy,
|
|
2070
1999
|
'data-testid': testId
|
|
2071
2000
|
} = props;
|
|
2072
|
-
const
|
|
2001
|
+
const defaultRenderers = useDefaultRenderers();
|
|
2073
2002
|
const rowHeight = rawRowHeight ?? 35;
|
|
2074
2003
|
const headerRowHeight = rawHeaderRowHeight ?? (typeof rowHeight === 'number' ? rowHeight : 35);
|
|
2075
2004
|
const summaryRowHeight = rawSummaryRowHeight ?? (typeof rowHeight === 'number' ? rowHeight : 35);
|
|
2076
|
-
const
|
|
2077
|
-
const
|
|
2078
|
-
const
|
|
2079
|
-
const noRowsFallback = renderers?.noRowsFallback ??
|
|
2080
|
-
const cellNavigationMode = rawCellNavigationMode ?? 'NONE';
|
|
2005
|
+
const renderRow = renderers?.renderRow ?? defaultRenderers?.renderRow ?? defaultRenderRow;
|
|
2006
|
+
const renderSortStatus$1 = renderers?.renderSortStatus ?? defaultRenderers?.renderSortStatus ?? renderSortStatus;
|
|
2007
|
+
const renderCheckbox$1 = renderers?.renderCheckbox ?? defaultRenderers?.renderCheckbox ?? renderCheckbox;
|
|
2008
|
+
const noRowsFallback = renderers?.noRowsFallback ?? defaultRenderers?.noRowsFallback;
|
|
2081
2009
|
const enableVirtualization = rawEnableVirtualization ?? true;
|
|
2082
2010
|
const direction = rawDirection ?? 'ltr';
|
|
2083
|
-
const [scrollTop, setScrollTop] = p(0);
|
|
2084
|
-
const [scrollLeft, setScrollLeft] = p(0);
|
|
2085
|
-
const [columnWidths, setColumnWidths] = p(() => new Map());
|
|
2086
|
-
const [selectedPosition, setSelectedPosition] = p(initialPosition);
|
|
2087
|
-
const [copiedCell, setCopiedCell] = p(null);
|
|
2088
|
-
const [isDragging, setDragging] = p(false);
|
|
2089
|
-
const [draggedOverRowIdx, setOverRowIdx] = p(undefined);
|
|
2090
|
-
const prevSelectedPosition = _$1(selectedPosition);
|
|
2091
|
-
const latestDraggedOverRowIdx = _$1(draggedOverRowIdx);
|
|
2092
|
-
const lastSelectedRowIdx = _$1(-1);
|
|
2093
|
-
const rowRef = _$1(null);
|
|
2094
|
-
const [gridRef, gridWidth, gridHeight, isWidthInitialized] = useGridDimensions();
|
|
2095
2011
|
const headerRowsCount = 1;
|
|
2096
2012
|
const topSummaryRowsCount = topSummaryRows?.length ?? 0;
|
|
2097
2013
|
const bottomSummaryRowsCount = bottomSummaryRows?.length ?? 0;
|
|
2098
2014
|
const summaryRowsCount = topSummaryRowsCount + bottomSummaryRowsCount;
|
|
2015
|
+
const headerAndTopSummaryRowsCount = headerRowsCount + topSummaryRowsCount;
|
|
2016
|
+
const minRowIdx = -headerAndTopSummaryRowsCount;
|
|
2017
|
+
const [scrollTop, setScrollTop] = h(0);
|
|
2018
|
+
const [scrollLeft, setScrollLeft] = h(0);
|
|
2019
|
+
const [resizedColumnWidths, setResizedColumnWidths] = h(() => new Map());
|
|
2020
|
+
const [measuredColumnWidths, setMeasuredColumnWidths] = h(() => new Map());
|
|
2021
|
+
const [selectedPosition, setSelectedPosition] = h(() => ({
|
|
2022
|
+
idx: -1,
|
|
2023
|
+
rowIdx: minRowIdx - 1,
|
|
2024
|
+
mode: 'SELECT'
|
|
2025
|
+
}));
|
|
2026
|
+
const [copiedCell, setCopiedCell] = h(null);
|
|
2027
|
+
const [isDragging, setDragging] = h(false);
|
|
2028
|
+
const [draggedOverRowIdx, setOverRowIdx] = h(undefined);
|
|
2029
|
+
const [scrollToPosition, setScrollToPosition] = h(null);
|
|
2030
|
+
const prevSelectedPosition = _$1(selectedPosition);
|
|
2031
|
+
const latestDraggedOverRowIdx = _$1(draggedOverRowIdx);
|
|
2032
|
+
const lastSelectedRowIdx = _$1(-1);
|
|
2033
|
+
const rowRef = _$1(null);
|
|
2034
|
+
const shouldFocusCellRef = _$1(false);
|
|
2035
|
+
const [gridRef, gridWidth, gridHeight] = useGridDimensions();
|
|
2099
2036
|
const clientHeight = gridHeight - headerRowHeight - summaryRowsCount * summaryRowHeight;
|
|
2100
2037
|
const isSelectable = selectedRows != null && onSelectedRowsChange != null;
|
|
2101
2038
|
const isRtl = direction === 'rtl';
|
|
2102
2039
|
const leftKey = isRtl ? 'ArrowRight' : 'ArrowLeft';
|
|
2103
2040
|
const rightKey = isRtl ? 'ArrowLeft' : 'ArrowRight';
|
|
2104
|
-
const defaultGridComponents = F(() => ({
|
|
2105
|
-
|
|
2106
|
-
|
|
2107
|
-
}), [
|
|
2108
|
-
const allRowsSelected = F(() => {
|
|
2041
|
+
const defaultGridComponents = F$1(() => ({
|
|
2042
|
+
renderCheckbox: renderCheckbox$1,
|
|
2043
|
+
renderSortStatus: renderSortStatus$1
|
|
2044
|
+
}), [renderCheckbox$1, renderSortStatus$1]);
|
|
2045
|
+
const allRowsSelected = F$1(() => {
|
|
2109
2046
|
const {
|
|
2110
2047
|
length
|
|
2111
2048
|
} = rawRows;
|
|
@@ -2118,13 +2055,13 @@ function DataGrid(props, ref) {
|
|
|
2118
2055
|
colOverscanEndIdx,
|
|
2119
2056
|
templateColumns,
|
|
2120
2057
|
layoutCssVars,
|
|
2121
|
-
columnMetrics,
|
|
2122
2058
|
lastFrozenColumnIndex,
|
|
2123
2059
|
totalFrozenColumnWidth,
|
|
2124
2060
|
groupBy
|
|
2125
2061
|
} = useCalculatedColumns({
|
|
2126
2062
|
rawColumns,
|
|
2127
|
-
|
|
2063
|
+
measuredColumnWidths,
|
|
2064
|
+
resizedColumnWidths,
|
|
2128
2065
|
scrollLeft,
|
|
2129
2066
|
viewportWidth: gridWidth,
|
|
2130
2067
|
defaultColumnOptions,
|
|
@@ -2152,10 +2089,7 @@ function DataGrid(props, ref) {
|
|
|
2152
2089
|
expandedGroupIds,
|
|
2153
2090
|
enableVirtualization
|
|
2154
2091
|
});
|
|
2155
|
-
const {
|
|
2156
|
-
viewportColumns,
|
|
2157
|
-
flexWidthViewportColumns
|
|
2158
|
-
} = useViewportColumns({
|
|
2092
|
+
const viewportColumns = useViewportColumns({
|
|
2159
2093
|
columns,
|
|
2160
2094
|
colSpanColumns,
|
|
2161
2095
|
colOverscanStartIdx,
|
|
@@ -2166,30 +2100,26 @@ function DataGrid(props, ref) {
|
|
|
2166
2100
|
rows,
|
|
2167
2101
|
topSummaryRows,
|
|
2168
2102
|
bottomSummaryRows,
|
|
2169
|
-
columnWidths,
|
|
2170
2103
|
isGroupRow
|
|
2171
2104
|
});
|
|
2105
|
+
const {
|
|
2106
|
+
gridTemplateColumns,
|
|
2107
|
+
handleColumnResize
|
|
2108
|
+
} = useColumnWidths(columns, viewportColumns, templateColumns, gridRef, gridWidth, resizedColumnWidths, measuredColumnWidths, setResizedColumnWidths, setMeasuredColumnWidths, onColumnResize);
|
|
2172
2109
|
const hasGroups = groupBy.length > 0 && typeof rowGrouper === 'function';
|
|
2173
2110
|
const minColIdx = hasGroups ? -1 : 0;
|
|
2174
2111
|
const maxColIdx = columns.length - 1;
|
|
2175
|
-
const minRowIdx = -1 - topSummaryRowsCount;
|
|
2176
2112
|
const maxRowIdx = rows.length + bottomSummaryRowsCount - 1;
|
|
2177
2113
|
const selectedCellIsWithinSelectionBounds = isCellWithinSelectionBounds(selectedPosition);
|
|
2178
2114
|
const selectedCellIsWithinViewportBounds = isCellWithinViewportBounds(selectedPosition);
|
|
2179
2115
|
const handleColumnResizeLatest = useLatestFunc(handleColumnResize);
|
|
2180
2116
|
const onSortColumnsChangeLatest = useLatestFunc(onSortColumnsChange);
|
|
2181
|
-
const
|
|
2182
|
-
const
|
|
2117
|
+
const onCellClickLatest = useLatestFunc(onCellClick);
|
|
2118
|
+
const onCellDoubleClickLatest = useLatestFunc(onCellDoubleClick);
|
|
2119
|
+
const onCellContextMenuLatest = useLatestFunc(onCellContextMenu);
|
|
2183
2120
|
const selectRowLatest = useLatestFunc(selectRow);
|
|
2184
|
-
const selectAllRowsLatest = useLatestFunc(selectAllRows);
|
|
2185
2121
|
const handleFormatterRowChangeLatest = useLatestFunc(updateRow);
|
|
2186
|
-
const
|
|
2187
|
-
const rowIdx = rows.indexOf(row);
|
|
2188
|
-
selectCell({
|
|
2189
|
-
rowIdx,
|
|
2190
|
-
idx: column.idx
|
|
2191
|
-
}, enableEditor);
|
|
2192
|
-
});
|
|
2122
|
+
const selectCellLatest = useLatestFunc(selectCell);
|
|
2193
2123
|
const selectGroupLatest = useLatestFunc(rowIdx => {
|
|
2194
2124
|
selectCell({
|
|
2195
2125
|
rowIdx,
|
|
@@ -2202,29 +2132,13 @@ function DataGrid(props, ref) {
|
|
|
2202
2132
|
idx
|
|
2203
2133
|
});
|
|
2204
2134
|
});
|
|
2205
|
-
const selectTopSummaryCellLatest = useLatestFunc((summaryRow, column) => {
|
|
2206
|
-
const rowIdx = topSummaryRows.indexOf(summaryRow);
|
|
2207
|
-
selectCell({
|
|
2208
|
-
rowIdx: rowIdx + minRowIdx + 1,
|
|
2209
|
-
idx: column.idx
|
|
2210
|
-
});
|
|
2211
|
-
});
|
|
2212
|
-
const selectBottomSummaryCellLatest = useLatestFunc((summaryRow, column) => {
|
|
2213
|
-
const rowIdx = bottomSummaryRows.indexOf(summaryRow) + rows.length;
|
|
2214
|
-
selectCell({
|
|
2215
|
-
rowIdx,
|
|
2216
|
-
idx: column.idx
|
|
2217
|
-
});
|
|
2218
|
-
});
|
|
2219
2135
|
const toggleGroupLatest = useLatestFunc(toggleGroup);
|
|
2220
2136
|
useLayoutEffect(() => {
|
|
2221
2137
|
if (!selectedCellIsWithinSelectionBounds || isSamePosition(selectedPosition, prevSelectedPosition.current)) {
|
|
2222
2138
|
prevSelectedPosition.current = selectedPosition;
|
|
2223
2139
|
return;
|
|
2224
2140
|
}
|
|
2225
|
-
|
|
2226
2141
|
prevSelectedPosition.current = selectedPosition;
|
|
2227
|
-
|
|
2228
2142
|
if (selectedPosition.idx === -1) {
|
|
2229
2143
|
rowRef.current.focus({
|
|
2230
2144
|
preventScroll: true
|
|
@@ -2233,102 +2147,79 @@ function DataGrid(props, ref) {
|
|
|
2233
2147
|
}
|
|
2234
2148
|
});
|
|
2235
2149
|
useLayoutEffect(() => {
|
|
2236
|
-
if (!
|
|
2237
|
-
|
|
2238
|
-
|
|
2239
|
-
|
|
2240
|
-
|
|
2241
|
-
|
|
2242
|
-
|
|
2243
|
-
|
|
2244
|
-
width
|
|
2245
|
-
} = measuringCell.getBoundingClientRect();
|
|
2246
|
-
newColumnWidths.set(column.key, width);
|
|
2247
|
-
}
|
|
2248
|
-
|
|
2249
|
-
return newColumnWidths;
|
|
2150
|
+
if (!shouldFocusCellRef.current) return;
|
|
2151
|
+
shouldFocusCellRef.current = false;
|
|
2152
|
+
const cell = getCellToScroll(gridRef.current);
|
|
2153
|
+
if (cell === null) return;
|
|
2154
|
+
scrollIntoView(cell);
|
|
2155
|
+
const elementToFocus = cell.querySelector('[tabindex="0"]') ?? cell;
|
|
2156
|
+
elementToFocus.focus({
|
|
2157
|
+
preventScroll: true
|
|
2250
2158
|
});
|
|
2251
|
-
}
|
|
2159
|
+
});
|
|
2252
2160
|
A(ref, () => ({
|
|
2253
2161
|
element: gridRef.current,
|
|
2254
|
-
|
|
2255
|
-
|
|
2256
|
-
|
|
2257
|
-
|
|
2258
|
-
|
|
2259
|
-
|
|
2260
|
-
if (
|
|
2261
|
-
|
|
2262
|
-
|
|
2263
|
-
|
|
2264
|
-
|
|
2162
|
+
scrollToCell({
|
|
2163
|
+
idx,
|
|
2164
|
+
rowIdx
|
|
2165
|
+
}) {
|
|
2166
|
+
const scrollToIdx = idx !== undefined && idx > lastFrozenColumnIndex && idx < columns.length ? idx : undefined;
|
|
2167
|
+
const scrollToRowIdx = rowIdx !== undefined && isRowIdxWithinViewportBounds(rowIdx) ? rowIdx : undefined;
|
|
2168
|
+
if (scrollToIdx !== undefined || scrollToRowIdx !== undefined) {
|
|
2169
|
+
setScrollToPosition({
|
|
2170
|
+
idx: scrollToIdx,
|
|
2171
|
+
rowIdx: scrollToRowIdx
|
|
2172
|
+
});
|
|
2173
|
+
}
|
|
2265
2174
|
},
|
|
2266
|
-
|
|
2267
2175
|
selectCell
|
|
2268
2176
|
}));
|
|
2269
2177
|
const setDraggedOverRowIdx = T$1(rowIdx => {
|
|
2270
2178
|
setOverRowIdx(rowIdx);
|
|
2271
2179
|
latestDraggedOverRowIdx.current = rowIdx;
|
|
2272
2180
|
}, []);
|
|
2273
|
-
|
|
2274
|
-
function handleColumnResize(column, width) {
|
|
2275
|
-
const {
|
|
2276
|
-
style
|
|
2277
|
-
} = gridRef.current;
|
|
2278
|
-
const newTemplateColumns = [...templateColumns];
|
|
2279
|
-
newTemplateColumns[column.idx] = width === 'max-content' ? width : `${width}px`;
|
|
2280
|
-
style.gridTemplateColumns = newTemplateColumns.join(' ');
|
|
2281
|
-
const measuringCell = gridRef.current.querySelector(`[data-measuring-cell-key="${column.key}"]`);
|
|
2282
|
-
const measuredWidth = measuringCell.getBoundingClientRect().width;
|
|
2283
|
-
const measuredWidthPx = `${measuredWidth}px`;
|
|
2284
|
-
|
|
2285
|
-
if (newTemplateColumns[column.idx] !== measuredWidthPx) {
|
|
2286
|
-
newTemplateColumns[column.idx] = measuredWidthPx;
|
|
2287
|
-
style.gridTemplateColumns = newTemplateColumns.join(' ');
|
|
2288
|
-
}
|
|
2289
|
-
|
|
2290
|
-
if (columnWidths.get(column.key) === measuredWidth) return;
|
|
2291
|
-
const newColumnWidths = new Map(columnWidths);
|
|
2292
|
-
newColumnWidths.set(column.key, measuredWidth);
|
|
2293
|
-
setColumnWidths(newColumnWidths);
|
|
2294
|
-
onColumnResize?.(column.idx, measuredWidth);
|
|
2295
|
-
}
|
|
2296
|
-
|
|
2297
|
-
function selectRow({
|
|
2298
|
-
row,
|
|
2299
|
-
checked,
|
|
2300
|
-
isShiftClick
|
|
2301
|
-
}) {
|
|
2181
|
+
function selectRow(args) {
|
|
2302
2182
|
if (!onSelectedRowsChange) return;
|
|
2303
2183
|
assertIsValidKeyGetter(rowKeyGetter);
|
|
2184
|
+
if (args.type === 'HEADER') {
|
|
2185
|
+
const newSelectedRows = new Set(selectedRows);
|
|
2186
|
+
for (const row of rawRows) {
|
|
2187
|
+
const rowKey = rowKeyGetter(row);
|
|
2188
|
+
if (args.checked) {
|
|
2189
|
+
newSelectedRows.add(rowKey);
|
|
2190
|
+
} else {
|
|
2191
|
+
newSelectedRows.delete(rowKey);
|
|
2192
|
+
}
|
|
2193
|
+
}
|
|
2194
|
+
onSelectedRowsChange(newSelectedRows);
|
|
2195
|
+
return;
|
|
2196
|
+
}
|
|
2197
|
+
const {
|
|
2198
|
+
row,
|
|
2199
|
+
checked,
|
|
2200
|
+
isShiftClick
|
|
2201
|
+
} = args;
|
|
2304
2202
|
const newSelectedRows = new Set(selectedRows);
|
|
2305
|
-
|
|
2306
2203
|
if (isGroupRow(row)) {
|
|
2307
2204
|
for (const childRow of row.childRows) {
|
|
2308
2205
|
const rowKey = rowKeyGetter(childRow);
|
|
2309
|
-
|
|
2310
2206
|
if (checked) {
|
|
2311
2207
|
newSelectedRows.add(rowKey);
|
|
2312
2208
|
} else {
|
|
2313
2209
|
newSelectedRows.delete(rowKey);
|
|
2314
2210
|
}
|
|
2315
2211
|
}
|
|
2316
|
-
|
|
2317
2212
|
onSelectedRowsChange(newSelectedRows);
|
|
2318
2213
|
return;
|
|
2319
2214
|
}
|
|
2320
|
-
|
|
2321
2215
|
const rowKey = rowKeyGetter(row);
|
|
2322
|
-
|
|
2323
2216
|
if (checked) {
|
|
2324
2217
|
newSelectedRows.add(rowKey);
|
|
2325
2218
|
const previousRowIdx = lastSelectedRowIdx.current;
|
|
2326
2219
|
const rowIdx = rows.indexOf(row);
|
|
2327
2220
|
lastSelectedRowIdx.current = rowIdx;
|
|
2328
|
-
|
|
2329
2221
|
if (isShiftClick && previousRowIdx !== -1 && previousRowIdx !== rowIdx) {
|
|
2330
2222
|
const step = sign(rowIdx - previousRowIdx);
|
|
2331
|
-
|
|
2332
2223
|
for (let i = previousRowIdx + step; i !== rowIdx; i += step) {
|
|
2333
2224
|
const row = rows[i];
|
|
2334
2225
|
if (isGroupRow(row)) continue;
|
|
@@ -2339,42 +2230,37 @@ function DataGrid(props, ref) {
|
|
|
2339
2230
|
newSelectedRows.delete(rowKey);
|
|
2340
2231
|
lastSelectedRowIdx.current = -1;
|
|
2341
2232
|
}
|
|
2342
|
-
|
|
2343
|
-
onSelectedRowsChange(newSelectedRows);
|
|
2344
|
-
}
|
|
2345
|
-
|
|
2346
|
-
function selectAllRows(checked) {
|
|
2347
|
-
if (!onSelectedRowsChange) return;
|
|
2348
|
-
assertIsValidKeyGetter(rowKeyGetter);
|
|
2349
|
-
const newSelectedRows = new Set(selectedRows);
|
|
2350
|
-
|
|
2351
|
-
for (const row of rawRows) {
|
|
2352
|
-
const rowKey = rowKeyGetter(row);
|
|
2353
|
-
|
|
2354
|
-
if (checked) {
|
|
2355
|
-
newSelectedRows.add(rowKey);
|
|
2356
|
-
} else {
|
|
2357
|
-
newSelectedRows.delete(rowKey);
|
|
2358
|
-
}
|
|
2359
|
-
}
|
|
2360
|
-
|
|
2361
2233
|
onSelectedRowsChange(newSelectedRows);
|
|
2362
2234
|
}
|
|
2363
|
-
|
|
2364
2235
|
function toggleGroup(expandedGroupId) {
|
|
2365
2236
|
if (!onExpandedGroupIdsChange) return;
|
|
2366
2237
|
const newExpandedGroupIds = new Set(expandedGroupIds);
|
|
2367
|
-
|
|
2368
2238
|
if (newExpandedGroupIds.has(expandedGroupId)) {
|
|
2369
2239
|
newExpandedGroupIds.delete(expandedGroupId);
|
|
2370
2240
|
} else {
|
|
2371
2241
|
newExpandedGroupIds.add(expandedGroupId);
|
|
2372
2242
|
}
|
|
2373
|
-
|
|
2374
2243
|
onExpandedGroupIdsChange(newExpandedGroupIds);
|
|
2375
2244
|
}
|
|
2376
|
-
|
|
2377
2245
|
function handleKeyDown(event) {
|
|
2246
|
+
const {
|
|
2247
|
+
idx,
|
|
2248
|
+
rowIdx,
|
|
2249
|
+
mode
|
|
2250
|
+
} = selectedPosition;
|
|
2251
|
+
if (mode === 'EDIT') return;
|
|
2252
|
+
const row = rows[rowIdx];
|
|
2253
|
+
if (!isGroupRow(row) && onCellKeyDown) {
|
|
2254
|
+
const cellEvent = createCellEvent(event);
|
|
2255
|
+
onCellKeyDown({
|
|
2256
|
+
mode: 'SELECT',
|
|
2257
|
+
row,
|
|
2258
|
+
column: columns[idx],
|
|
2259
|
+
rowIdx,
|
|
2260
|
+
selectCell
|
|
2261
|
+
}, cellEvent);
|
|
2262
|
+
if (cellEvent.isGridDefaultPrevented()) return;
|
|
2263
|
+
}
|
|
2378
2264
|
if (!(event.target instanceof Element)) return;
|
|
2379
2265
|
const isCellEvent = event.target.closest('.rdg-cell') !== null;
|
|
2380
2266
|
const isRowEvent = hasGroups && event.target === rowRef.current;
|
|
@@ -2383,40 +2269,27 @@ function DataGrid(props, ref) {
|
|
|
2383
2269
|
key,
|
|
2384
2270
|
keyCode
|
|
2385
2271
|
} = event;
|
|
2386
|
-
|
|
2387
|
-
rowIdx
|
|
2388
|
-
} = selectedPosition;
|
|
2389
|
-
|
|
2390
|
-
if (selectedCellIsWithinViewportBounds && (onPaste != null || onCopy != null) && isCtrlKeyHeldDown(event) && !isGroupRow(rows[rowIdx]) && selectedPosition.mode === 'SELECT') {
|
|
2272
|
+
if (selectedCellIsWithinViewportBounds && (onPaste != null || onCopy != null) && isCtrlKeyHeldDown(event) && !isGroupRow(rows[rowIdx])) {
|
|
2391
2273
|
const cKey = 67;
|
|
2392
2274
|
const vKey = 86;
|
|
2393
|
-
|
|
2394
2275
|
if (keyCode === cKey) {
|
|
2395
2276
|
handleCopy();
|
|
2396
2277
|
return;
|
|
2397
2278
|
}
|
|
2398
|
-
|
|
2399
2279
|
if (keyCode === vKey) {
|
|
2400
2280
|
handlePaste();
|
|
2401
2281
|
return;
|
|
2402
2282
|
}
|
|
2403
2283
|
}
|
|
2404
|
-
|
|
2405
|
-
|
|
2406
|
-
|
|
2407
|
-
|
|
2408
|
-
if (isGroupRow(row) && selectedPosition.idx === -1 && (key === leftKey && row.isExpanded || key === rightKey && !row.isExpanded)) {
|
|
2409
|
-
event.preventDefault();
|
|
2410
|
-
toggleGroup(row.id);
|
|
2411
|
-
return;
|
|
2412
|
-
}
|
|
2284
|
+
if (isRowIdxWithinViewportBounds(rowIdx) && isGroupRow(row) && selectedPosition.idx === -1 && (key === leftKey && row.isExpanded || key === rightKey && !row.isExpanded)) {
|
|
2285
|
+
event.preventDefault();
|
|
2286
|
+
toggleGroup(row.id);
|
|
2287
|
+
return;
|
|
2413
2288
|
}
|
|
2414
|
-
|
|
2415
2289
|
switch (event.key) {
|
|
2416
2290
|
case 'Escape':
|
|
2417
2291
|
setCopiedCell(null);
|
|
2418
2292
|
return;
|
|
2419
|
-
|
|
2420
2293
|
case 'ArrowUp':
|
|
2421
2294
|
case 'ArrowDown':
|
|
2422
2295
|
case 'ArrowLeft':
|
|
@@ -2428,29 +2301,25 @@ function DataGrid(props, ref) {
|
|
|
2428
2301
|
case 'PageDown':
|
|
2429
2302
|
navigate(event);
|
|
2430
2303
|
break;
|
|
2431
|
-
|
|
2432
2304
|
default:
|
|
2433
2305
|
handleCellInput(event);
|
|
2434
2306
|
break;
|
|
2435
2307
|
}
|
|
2436
2308
|
}
|
|
2437
|
-
|
|
2438
2309
|
function handleScroll(event) {
|
|
2439
2310
|
const {
|
|
2440
2311
|
scrollTop,
|
|
2441
2312
|
scrollLeft
|
|
2442
2313
|
} = event.currentTarget;
|
|
2443
|
-
|
|
2314
|
+
pn(() => {
|
|
2444
2315
|
setScrollTop(scrollTop);
|
|
2445
2316
|
setScrollLeft(abs(scrollLeft));
|
|
2446
2317
|
});
|
|
2447
2318
|
onScroll?.(event);
|
|
2448
2319
|
}
|
|
2449
|
-
|
|
2450
2320
|
function getRawRowIdx(rowIdx) {
|
|
2451
2321
|
return hasGroups ? rawRows.indexOf(rows[rowIdx]) : rowIdx;
|
|
2452
2322
|
}
|
|
2453
|
-
|
|
2454
2323
|
function updateRow(column, rowIdx, row) {
|
|
2455
2324
|
if (typeof onRowsChange !== 'function') return;
|
|
2456
2325
|
const rawRowIdx = getRawRowIdx(rowIdx);
|
|
@@ -2462,12 +2331,10 @@ function DataGrid(props, ref) {
|
|
|
2462
2331
|
column
|
|
2463
2332
|
});
|
|
2464
2333
|
}
|
|
2465
|
-
|
|
2466
2334
|
function commitEditorChanges() {
|
|
2467
2335
|
if (selectedPosition.mode !== 'EDIT') return;
|
|
2468
2336
|
updateRow(columns[selectedPosition.idx], selectedPosition.rowIdx, selectedPosition.row);
|
|
2469
2337
|
}
|
|
2470
|
-
|
|
2471
2338
|
function handleCopy() {
|
|
2472
2339
|
const {
|
|
2473
2340
|
idx,
|
|
@@ -2484,12 +2351,10 @@ function DataGrid(props, ref) {
|
|
|
2484
2351
|
sourceColumnKey
|
|
2485
2352
|
});
|
|
2486
2353
|
}
|
|
2487
|
-
|
|
2488
2354
|
function handlePaste() {
|
|
2489
2355
|
if (!onPaste || !onRowsChange || copiedCell === null || !isCellEditable(selectedPosition)) {
|
|
2490
2356
|
return;
|
|
2491
2357
|
}
|
|
2492
|
-
|
|
2493
2358
|
const {
|
|
2494
2359
|
idx,
|
|
2495
2360
|
rowIdx
|
|
@@ -2504,7 +2369,6 @@ function DataGrid(props, ref) {
|
|
|
2504
2369
|
});
|
|
2505
2370
|
updateRow(targetColumn, rowIdx, updatedTargetRow);
|
|
2506
2371
|
}
|
|
2507
|
-
|
|
2508
2372
|
function handleCellInput(event) {
|
|
2509
2373
|
if (!selectedCellIsWithinViewportBounds) return;
|
|
2510
2374
|
const row = rows[selectedPosition.rowIdx];
|
|
@@ -2513,11 +2377,11 @@ function DataGrid(props, ref) {
|
|
|
2513
2377
|
key,
|
|
2514
2378
|
shiftKey
|
|
2515
2379
|
} = event;
|
|
2516
|
-
|
|
2517
2380
|
if (isSelectable && shiftKey && key === ' ') {
|
|
2518
2381
|
assertIsValidKeyGetter(rowKeyGetter);
|
|
2519
2382
|
const rowKey = rowKeyGetter(row);
|
|
2520
2383
|
selectRow({
|
|
2384
|
+
type: 'ROW',
|
|
2521
2385
|
row,
|
|
2522
2386
|
checked: !selectedRows.has(rowKey),
|
|
2523
2387
|
isShiftClick: false
|
|
@@ -2525,11 +2389,6 @@ function DataGrid(props, ref) {
|
|
|
2525
2389
|
event.preventDefault();
|
|
2526
2390
|
return;
|
|
2527
2391
|
}
|
|
2528
|
-
|
|
2529
|
-
const column = columns[selectedPosition.idx];
|
|
2530
|
-
column.editorOptions?.onCellKeyDown?.(event);
|
|
2531
|
-
if (event.isDefaultPrevented()) return;
|
|
2532
|
-
|
|
2533
2392
|
if (isCellEditable(selectedPosition) && isDefaultCellInput(event)) {
|
|
2534
2393
|
setSelectedPosition(({
|
|
2535
2394
|
idx,
|
|
@@ -2543,29 +2402,24 @@ function DataGrid(props, ref) {
|
|
|
2543
2402
|
}));
|
|
2544
2403
|
}
|
|
2545
2404
|
}
|
|
2546
|
-
|
|
2547
2405
|
function isColIdxWithinSelectionBounds(idx) {
|
|
2548
2406
|
return idx >= minColIdx && idx <= maxColIdx;
|
|
2549
2407
|
}
|
|
2550
|
-
|
|
2551
2408
|
function isRowIdxWithinViewportBounds(rowIdx) {
|
|
2552
2409
|
return rowIdx >= 0 && rowIdx < rows.length;
|
|
2553
2410
|
}
|
|
2554
|
-
|
|
2555
2411
|
function isCellWithinSelectionBounds({
|
|
2556
2412
|
idx,
|
|
2557
2413
|
rowIdx
|
|
2558
2414
|
}) {
|
|
2559
2415
|
return rowIdx >= minRowIdx && rowIdx <= maxRowIdx && isColIdxWithinSelectionBounds(idx);
|
|
2560
2416
|
}
|
|
2561
|
-
|
|
2562
2417
|
function isCellWithinViewportBounds({
|
|
2563
2418
|
idx,
|
|
2564
2419
|
rowIdx
|
|
2565
2420
|
}) {
|
|
2566
2421
|
return isRowIdxWithinViewportBounds(rowIdx) && isColIdxWithinSelectionBounds(idx);
|
|
2567
2422
|
}
|
|
2568
|
-
|
|
2569
2423
|
function isCellEditable(position) {
|
|
2570
2424
|
return isCellWithinViewportBounds(position) && isSelectedCellEditable({
|
|
2571
2425
|
columns,
|
|
@@ -2574,80 +2428,27 @@ function DataGrid(props, ref) {
|
|
|
2574
2428
|
isGroupRow
|
|
2575
2429
|
});
|
|
2576
2430
|
}
|
|
2577
|
-
|
|
2578
2431
|
function selectCell(position, enableEditor) {
|
|
2579
2432
|
if (!isCellWithinSelectionBounds(position)) return;
|
|
2580
2433
|
commitEditorChanges();
|
|
2581
|
-
|
|
2582
2434
|
if (enableEditor && isCellEditable(position)) {
|
|
2583
2435
|
const row = rows[position.rowIdx];
|
|
2584
|
-
setSelectedPosition({
|
|
2436
|
+
setSelectedPosition({
|
|
2437
|
+
...position,
|
|
2585
2438
|
mode: 'EDIT',
|
|
2586
2439
|
row,
|
|
2587
2440
|
originalRow: row
|
|
2588
2441
|
});
|
|
2589
2442
|
} else if (isSamePosition(selectedPosition, position)) {
|
|
2590
|
-
scrollIntoView(gridRef.current
|
|
2443
|
+
scrollIntoView(getCellToScroll(gridRef.current));
|
|
2591
2444
|
} else {
|
|
2592
|
-
|
|
2445
|
+
shouldFocusCellRef.current = true;
|
|
2446
|
+
setSelectedPosition({
|
|
2447
|
+
...position,
|
|
2593
2448
|
mode: 'SELECT'
|
|
2594
2449
|
});
|
|
2595
2450
|
}
|
|
2596
2451
|
}
|
|
2597
|
-
|
|
2598
|
-
function scrollToColumn(idx) {
|
|
2599
|
-
const {
|
|
2600
|
-
current
|
|
2601
|
-
} = gridRef;
|
|
2602
|
-
if (!current) return;
|
|
2603
|
-
|
|
2604
|
-
if (idx > lastFrozenColumnIndex) {
|
|
2605
|
-
const {
|
|
2606
|
-
rowIdx
|
|
2607
|
-
} = selectedPosition;
|
|
2608
|
-
if (!isCellWithinSelectionBounds({
|
|
2609
|
-
rowIdx,
|
|
2610
|
-
idx
|
|
2611
|
-
})) return;
|
|
2612
|
-
const {
|
|
2613
|
-
clientWidth
|
|
2614
|
-
} = current;
|
|
2615
|
-
const column = columns[idx];
|
|
2616
|
-
const {
|
|
2617
|
-
left,
|
|
2618
|
-
width
|
|
2619
|
-
} = columnMetrics.get(column);
|
|
2620
|
-
let right = left + width;
|
|
2621
|
-
const colSpan = getSelectedCellColSpan({
|
|
2622
|
-
rows,
|
|
2623
|
-
topSummaryRows,
|
|
2624
|
-
bottomSummaryRows,
|
|
2625
|
-
rowIdx,
|
|
2626
|
-
lastFrozenColumnIndex,
|
|
2627
|
-
column,
|
|
2628
|
-
isGroupRow
|
|
2629
|
-
});
|
|
2630
|
-
|
|
2631
|
-
if (colSpan !== undefined) {
|
|
2632
|
-
const {
|
|
2633
|
-
left,
|
|
2634
|
-
width
|
|
2635
|
-
} = columnMetrics.get(columns[column.idx + colSpan - 1]);
|
|
2636
|
-
right = left + width;
|
|
2637
|
-
}
|
|
2638
|
-
|
|
2639
|
-
const isCellAtLeftBoundary = left < scrollLeft + totalFrozenColumnWidth;
|
|
2640
|
-
const isCellAtRightBoundary = right > clientWidth + scrollLeft;
|
|
2641
|
-
const sign = isRtl ? -1 : 1;
|
|
2642
|
-
|
|
2643
|
-
if (isCellAtLeftBoundary) {
|
|
2644
|
-
current.scrollLeft = (left - totalFrozenColumnWidth) * sign;
|
|
2645
|
-
} else if (isCellAtRightBoundary) {
|
|
2646
|
-
current.scrollLeft = (right - clientWidth) * sign;
|
|
2647
|
-
}
|
|
2648
|
-
}
|
|
2649
|
-
}
|
|
2650
|
-
|
|
2651
2452
|
function getNextPosition(key, ctrlKey, shiftKey) {
|
|
2652
2453
|
const {
|
|
2653
2454
|
idx,
|
|
@@ -2655,19 +2456,15 @@ function DataGrid(props, ref) {
|
|
|
2655
2456
|
} = selectedPosition;
|
|
2656
2457
|
const row = rows[rowIdx];
|
|
2657
2458
|
const isRowSelected = selectedCellIsWithinSelectionBounds && idx === -1;
|
|
2658
|
-
|
|
2659
2459
|
if (key === leftKey && isRowSelected && isGroupRow(row) && !row.isExpanded && row.level !== 0) {
|
|
2660
2460
|
let parentRowIdx = -1;
|
|
2661
|
-
|
|
2662
2461
|
for (let i = selectedPosition.rowIdx - 1; i >= 0; i--) {
|
|
2663
2462
|
const parentRow = rows[i];
|
|
2664
|
-
|
|
2665
2463
|
if (isGroupRow(parentRow) && parentRow.id === row.parentId) {
|
|
2666
2464
|
parentRowIdx = i;
|
|
2667
2465
|
break;
|
|
2668
2466
|
}
|
|
2669
2467
|
}
|
|
2670
|
-
|
|
2671
2468
|
if (parentRowIdx !== -1) {
|
|
2672
2469
|
return {
|
|
2673
2470
|
idx,
|
|
@@ -2675,38 +2472,32 @@ function DataGrid(props, ref) {
|
|
|
2675
2472
|
};
|
|
2676
2473
|
}
|
|
2677
2474
|
}
|
|
2678
|
-
|
|
2679
2475
|
switch (key) {
|
|
2680
2476
|
case 'ArrowUp':
|
|
2681
2477
|
return {
|
|
2682
2478
|
idx,
|
|
2683
2479
|
rowIdx: rowIdx - 1
|
|
2684
2480
|
};
|
|
2685
|
-
|
|
2686
2481
|
case 'ArrowDown':
|
|
2687
2482
|
return {
|
|
2688
2483
|
idx,
|
|
2689
2484
|
rowIdx: rowIdx + 1
|
|
2690
2485
|
};
|
|
2691
|
-
|
|
2692
2486
|
case leftKey:
|
|
2693
2487
|
return {
|
|
2694
2488
|
idx: idx - 1,
|
|
2695
2489
|
rowIdx
|
|
2696
2490
|
};
|
|
2697
|
-
|
|
2698
2491
|
case rightKey:
|
|
2699
2492
|
return {
|
|
2700
2493
|
idx: idx + 1,
|
|
2701
2494
|
rowIdx
|
|
2702
2495
|
};
|
|
2703
|
-
|
|
2704
2496
|
case 'Tab':
|
|
2705
2497
|
return {
|
|
2706
2498
|
idx: idx + (shiftKey ? -1 : 1),
|
|
2707
2499
|
rowIdx
|
|
2708
2500
|
};
|
|
2709
|
-
|
|
2710
2501
|
case 'Home':
|
|
2711
2502
|
if (isRowSelected) return {
|
|
2712
2503
|
idx,
|
|
@@ -2716,7 +2507,6 @@ function DataGrid(props, ref) {
|
|
|
2716
2507
|
idx: 0,
|
|
2717
2508
|
rowIdx: ctrlKey ? minRowIdx : rowIdx
|
|
2718
2509
|
};
|
|
2719
|
-
|
|
2720
2510
|
case 'End':
|
|
2721
2511
|
if (isRowSelected) return {
|
|
2722
2512
|
idx,
|
|
@@ -2726,7 +2516,6 @@ function DataGrid(props, ref) {
|
|
|
2726
2516
|
idx: maxColIdx,
|
|
2727
2517
|
rowIdx: ctrlKey ? maxRowIdx : rowIdx
|
|
2728
2518
|
};
|
|
2729
|
-
|
|
2730
2519
|
case 'PageUp':
|
|
2731
2520
|
{
|
|
2732
2521
|
if (selectedPosition.rowIdx === minRowIdx) return selectedPosition;
|
|
@@ -2736,7 +2525,6 @@ function DataGrid(props, ref) {
|
|
|
2736
2525
|
rowIdx: nextRowY > 0 ? findRowIdx(nextRowY) : 0
|
|
2737
2526
|
};
|
|
2738
2527
|
}
|
|
2739
|
-
|
|
2740
2528
|
case 'PageDown':
|
|
2741
2529
|
{
|
|
2742
2530
|
if (selectedPosition.rowIdx >= rows.length) return selectedPosition;
|
|
@@ -2746,23 +2534,19 @@ function DataGrid(props, ref) {
|
|
|
2746
2534
|
rowIdx: nextRowY < totalRowHeight ? findRowIdx(nextRowY) : rows.length - 1
|
|
2747
2535
|
};
|
|
2748
2536
|
}
|
|
2749
|
-
|
|
2750
2537
|
default:
|
|
2751
2538
|
return selectedPosition;
|
|
2752
2539
|
}
|
|
2753
2540
|
}
|
|
2754
|
-
|
|
2755
2541
|
function navigate(event) {
|
|
2756
2542
|
const {
|
|
2757
2543
|
key,
|
|
2758
2544
|
shiftKey
|
|
2759
2545
|
} = event;
|
|
2760
|
-
let
|
|
2761
|
-
|
|
2546
|
+
let cellNavigationMode = 'NONE';
|
|
2762
2547
|
if (key === 'Tab') {
|
|
2763
2548
|
if (canExitGrid({
|
|
2764
2549
|
shiftKey,
|
|
2765
|
-
cellNavigationMode,
|
|
2766
2550
|
maxColIdx,
|
|
2767
2551
|
minRowIdx,
|
|
2768
2552
|
maxRowIdx,
|
|
@@ -2771,10 +2555,8 @@ function DataGrid(props, ref) {
|
|
|
2771
2555
|
commitEditorChanges();
|
|
2772
2556
|
return;
|
|
2773
2557
|
}
|
|
2774
|
-
|
|
2775
|
-
mode = cellNavigationMode === 'NONE' ? 'CHANGE_ROW' : cellNavigationMode;
|
|
2558
|
+
cellNavigationMode = 'CHANGE_ROW';
|
|
2776
2559
|
}
|
|
2777
|
-
|
|
2778
2560
|
event.preventDefault();
|
|
2779
2561
|
const ctrlKey = isCtrlKeyHeldDown(event);
|
|
2780
2562
|
const nextPosition = getNextPosition(key, ctrlKey, shiftKey);
|
|
@@ -2788,7 +2570,7 @@ function DataGrid(props, ref) {
|
|
|
2788
2570
|
minRowIdx,
|
|
2789
2571
|
maxRowIdx,
|
|
2790
2572
|
lastFrozenColumnIndex,
|
|
2791
|
-
cellNavigationMode
|
|
2573
|
+
cellNavigationMode,
|
|
2792
2574
|
currentPosition: selectedPosition,
|
|
2793
2575
|
nextPosition,
|
|
2794
2576
|
isCellWithinBounds: isCellWithinSelectionBounds,
|
|
@@ -2796,7 +2578,6 @@ function DataGrid(props, ref) {
|
|
|
2796
2578
|
});
|
|
2797
2579
|
selectCell(nextSelectedCellPosition);
|
|
2798
2580
|
}
|
|
2799
|
-
|
|
2800
2581
|
function getDraggedOverCellIdx(currentRowIdx) {
|
|
2801
2582
|
if (draggedOverRowIdx === undefined) return;
|
|
2802
2583
|
const {
|
|
@@ -2805,25 +2586,10 @@ function DataGrid(props, ref) {
|
|
|
2805
2586
|
const isDraggedOver = rowIdx < draggedOverRowIdx ? rowIdx < currentRowIdx && currentRowIdx <= draggedOverRowIdx : rowIdx > currentRowIdx && currentRowIdx >= draggedOverRowIdx;
|
|
2806
2587
|
return isDraggedOver ? selectedPosition.idx : undefined;
|
|
2807
2588
|
}
|
|
2808
|
-
|
|
2809
|
-
function getLayoutCssVars() {
|
|
2810
|
-
if (flexWidthViewportColumns.length === 0) return layoutCssVars;
|
|
2811
|
-
const newTemplateColumns = [...templateColumns];
|
|
2812
|
-
|
|
2813
|
-
for (const column of flexWidthViewportColumns) {
|
|
2814
|
-
newTemplateColumns[column.idx] = column.width;
|
|
2815
|
-
}
|
|
2816
|
-
|
|
2817
|
-
return { ...layoutCssVars,
|
|
2818
|
-
gridTemplateColumns: newTemplateColumns.join(' ')
|
|
2819
|
-
};
|
|
2820
|
-
}
|
|
2821
|
-
|
|
2822
2589
|
function getDragHandle(rowIdx) {
|
|
2823
2590
|
if (selectedPosition.rowIdx !== rowIdx || selectedPosition.mode === 'EDIT' || hasGroups || onFill == null) {
|
|
2824
2591
|
return;
|
|
2825
2592
|
}
|
|
2826
|
-
|
|
2827
2593
|
return /*#__PURE__*/o(DragHandle, {
|
|
2828
2594
|
rows: rawRows,
|
|
2829
2595
|
columns: columns,
|
|
@@ -2836,7 +2602,6 @@ function DataGrid(props, ref) {
|
|
|
2836
2602
|
setDraggedOverRowIdx: setDraggedOverRowIdx
|
|
2837
2603
|
});
|
|
2838
2604
|
}
|
|
2839
|
-
|
|
2840
2605
|
function getCellEditor(rowIdx) {
|
|
2841
2606
|
if (selectedPosition.rowIdx !== rowIdx || selectedPosition.mode === 'SELECT') return;
|
|
2842
2607
|
const {
|
|
@@ -2848,8 +2613,8 @@ function DataGrid(props, ref) {
|
|
|
2848
2613
|
type: 'ROW',
|
|
2849
2614
|
row
|
|
2850
2615
|
});
|
|
2851
|
-
|
|
2852
|
-
|
|
2616
|
+
const closeEditor = shouldFocusCell => {
|
|
2617
|
+
shouldFocusCellRef.current = shouldFocusCell;
|
|
2853
2618
|
setSelectedPosition(({
|
|
2854
2619
|
idx,
|
|
2855
2620
|
rowIdx
|
|
@@ -2859,41 +2624,40 @@ function DataGrid(props, ref) {
|
|
|
2859
2624
|
mode: 'SELECT'
|
|
2860
2625
|
}));
|
|
2861
2626
|
};
|
|
2862
|
-
|
|
2863
|
-
const onRowChange = (row, commitChanges) => {
|
|
2627
|
+
const onRowChange = (row, commitChanges, shouldFocusCell) => {
|
|
2864
2628
|
if (commitChanges) {
|
|
2865
|
-
|
|
2866
|
-
|
|
2629
|
+
pn(() => {
|
|
2630
|
+
updateRow(column, selectedPosition.rowIdx, row);
|
|
2631
|
+
closeEditor(shouldFocusCell);
|
|
2632
|
+
});
|
|
2867
2633
|
} else {
|
|
2868
|
-
setSelectedPosition(position => ({
|
|
2634
|
+
setSelectedPosition(position => ({
|
|
2635
|
+
...position,
|
|
2869
2636
|
row
|
|
2870
2637
|
}));
|
|
2871
2638
|
}
|
|
2872
2639
|
};
|
|
2873
|
-
|
|
2874
2640
|
if (rows[selectedPosition.rowIdx] !== selectedPosition.originalRow) {
|
|
2875
|
-
closeEditor();
|
|
2641
|
+
closeEditor(false);
|
|
2876
2642
|
}
|
|
2877
|
-
|
|
2878
2643
|
return /*#__PURE__*/o(EditCell, {
|
|
2879
2644
|
column: column,
|
|
2880
2645
|
colSpan: colSpan,
|
|
2881
2646
|
row: row,
|
|
2647
|
+
rowIdx: rowIdx,
|
|
2882
2648
|
onRowChange: onRowChange,
|
|
2883
|
-
closeEditor: closeEditor
|
|
2649
|
+
closeEditor: closeEditor,
|
|
2650
|
+
onKeyDown: onCellKeyDown,
|
|
2651
|
+
navigate: navigate
|
|
2884
2652
|
}, column.key);
|
|
2885
2653
|
}
|
|
2886
|
-
|
|
2887
2654
|
function getRowViewportColumns(rowIdx) {
|
|
2888
2655
|
const selectedColumn = columns[selectedPosition.idx];
|
|
2889
|
-
|
|
2890
2656
|
if (selectedColumn !== undefined && selectedPosition.rowIdx === rowIdx && !viewportColumns.includes(selectedColumn)) {
|
|
2891
2657
|
return selectedPosition.idx > colOverscanEndIdx ? [...viewportColumns, selectedColumn] : [...viewportColumns.slice(0, lastFrozenColumnIndex + 1), selectedColumn, ...viewportColumns.slice(lastFrozenColumnIndex + 1)];
|
|
2892
2658
|
}
|
|
2893
|
-
|
|
2894
2659
|
return viewportColumns;
|
|
2895
2660
|
}
|
|
2896
|
-
|
|
2897
2661
|
function getViewportRows() {
|
|
2898
2662
|
const rowElements = [];
|
|
2899
2663
|
let startRowIndex = 0;
|
|
@@ -2903,13 +2667,11 @@ function DataGrid(props, ref) {
|
|
|
2903
2667
|
} = selectedPosition;
|
|
2904
2668
|
const startRowIdx = selectedCellIsWithinViewportBounds && selectedRowIdx < rowOverscanStartIdx ? rowOverscanStartIdx - 1 : rowOverscanStartIdx;
|
|
2905
2669
|
const endRowIdx = selectedCellIsWithinViewportBounds && selectedRowIdx > rowOverscanEndIdx ? rowOverscanEndIdx + 1 : rowOverscanEndIdx;
|
|
2906
|
-
|
|
2907
2670
|
for (let viewportRowIdx = startRowIdx; viewportRowIdx <= endRowIdx; viewportRowIdx++) {
|
|
2908
2671
|
const isRowOutsideViewport = viewportRowIdx === rowOverscanStartIdx - 1 || viewportRowIdx === rowOverscanEndIdx + 1;
|
|
2909
2672
|
const rowIdx = isRowOutsideViewport ? selectedRowIdx : viewportRowIdx;
|
|
2910
2673
|
let rowColumns = viewportColumns;
|
|
2911
2674
|
const selectedColumn = columns[selectedIdx];
|
|
2912
|
-
|
|
2913
2675
|
if (selectedColumn !== undefined) {
|
|
2914
2676
|
if (isRowOutsideViewport) {
|
|
2915
2677
|
rowColumns = [selectedColumn];
|
|
@@ -2917,20 +2679,22 @@ function DataGrid(props, ref) {
|
|
|
2917
2679
|
rowColumns = getRowViewportColumns(rowIdx);
|
|
2918
2680
|
}
|
|
2919
2681
|
}
|
|
2920
|
-
|
|
2921
2682
|
const row = rows[rowIdx];
|
|
2922
|
-
const gridRowStart =
|
|
2923
|
-
|
|
2683
|
+
const gridRowStart = headerAndTopSummaryRowsCount + rowIdx + 1;
|
|
2924
2684
|
if (isGroupRow(row)) {
|
|
2925
2685
|
({
|
|
2926
2686
|
startRowIndex
|
|
2927
2687
|
} = row);
|
|
2928
|
-
|
|
2688
|
+
let isGroupRowSelected = false;
|
|
2689
|
+
if (isSelectable) {
|
|
2690
|
+
assertIsValidKeyGetter(rowKeyGetter);
|
|
2691
|
+
isGroupRowSelected = row.childRows.every(cr => selectedRows.has(rowKeyGetter(cr)));
|
|
2692
|
+
}
|
|
2929
2693
|
rowElements.push( /*#__PURE__*/o(GroupRowRenderer, {
|
|
2930
2694
|
"aria-level": row.level + 1,
|
|
2931
2695
|
"aria-setsize": row.setSize,
|
|
2932
2696
|
"aria-posinset": row.posInSet + 1,
|
|
2933
|
-
"aria-rowindex":
|
|
2697
|
+
"aria-rowindex": headerAndTopSummaryRowsCount + startRowIndex + 1,
|
|
2934
2698
|
"aria-selected": isSelectable ? isGroupRowSelected : undefined,
|
|
2935
2699
|
id: row.id,
|
|
2936
2700
|
groupKey: row.groupKey,
|
|
@@ -2949,27 +2713,25 @@ function DataGrid(props, ref) {
|
|
|
2949
2713
|
}, row.id));
|
|
2950
2714
|
continue;
|
|
2951
2715
|
}
|
|
2952
|
-
|
|
2953
2716
|
startRowIndex++;
|
|
2954
2717
|
let key;
|
|
2955
2718
|
let isRowSelected = false;
|
|
2956
|
-
|
|
2957
2719
|
if (typeof rowKeyGetter === 'function') {
|
|
2958
2720
|
key = rowKeyGetter(row);
|
|
2959
2721
|
isRowSelected = selectedRows?.has(key) ?? false;
|
|
2960
2722
|
} else {
|
|
2961
2723
|
key = hasGroups ? startRowIndex : rowIdx;
|
|
2962
2724
|
}
|
|
2963
|
-
|
|
2964
|
-
|
|
2965
|
-
'aria-rowindex': headerRowsCount + topSummaryRowsCount + (hasGroups ? startRowIndex : rowIdx) + 1,
|
|
2725
|
+
rowElements.push(renderRow(key, {
|
|
2726
|
+
'aria-rowindex': headerAndTopSummaryRowsCount + (hasGroups ? startRowIndex : rowIdx) + 1,
|
|
2966
2727
|
'aria-selected': isSelectable ? isRowSelected : undefined,
|
|
2967
2728
|
rowIdx,
|
|
2968
2729
|
row,
|
|
2969
2730
|
viewportColumns: rowColumns,
|
|
2970
2731
|
isRowSelected,
|
|
2971
|
-
|
|
2972
|
-
|
|
2732
|
+
onCellClick: onCellClickLatest,
|
|
2733
|
+
onCellDoubleClick: onCellDoubleClickLatest,
|
|
2734
|
+
onCellContextMenu: onCellContextMenuLatest,
|
|
2973
2735
|
rowClass,
|
|
2974
2736
|
gridRowStart,
|
|
2975
2737
|
height: getRowHeight(rowIdx),
|
|
@@ -2979,35 +2741,32 @@ function DataGrid(props, ref) {
|
|
|
2979
2741
|
setDraggedOverRowIdx: isDragging ? setDraggedOverRowIdx : undefined,
|
|
2980
2742
|
lastFrozenColumnIndex,
|
|
2981
2743
|
onRowChange: handleFormatterRowChangeLatest,
|
|
2982
|
-
selectCell:
|
|
2744
|
+
selectCell: selectCellLatest,
|
|
2983
2745
|
selectedCellDragHandle: getDragHandle(rowIdx),
|
|
2984
2746
|
selectedCellEditor: getCellEditor(rowIdx)
|
|
2985
2747
|
}));
|
|
2986
2748
|
}
|
|
2987
|
-
|
|
2988
2749
|
return rowElements;
|
|
2989
2750
|
}
|
|
2990
|
-
|
|
2991
2751
|
if (selectedPosition.idx > maxColIdx || selectedPosition.rowIdx > maxRowIdx) {
|
|
2992
|
-
setSelectedPosition(
|
|
2752
|
+
setSelectedPosition({
|
|
2753
|
+
idx: -1,
|
|
2754
|
+
rowIdx: minRowIdx - 1,
|
|
2755
|
+
mode: 'SELECT'
|
|
2756
|
+
});
|
|
2993
2757
|
setDraggedOverRowIdx(undefined);
|
|
2994
2758
|
}
|
|
2995
|
-
|
|
2996
2759
|
let templateRows = `${headerRowHeight}px`;
|
|
2997
|
-
|
|
2998
2760
|
if (topSummaryRowsCount > 0) {
|
|
2999
2761
|
templateRows += ` repeat(${topSummaryRowsCount}, ${summaryRowHeight}px)`;
|
|
3000
2762
|
}
|
|
3001
|
-
|
|
3002
2763
|
if (rows.length > 0) {
|
|
3003
2764
|
templateRows += gridTemplateRows;
|
|
3004
2765
|
}
|
|
3005
|
-
|
|
3006
2766
|
if (bottomSummaryRowsCount > 0) {
|
|
3007
2767
|
templateRows += ` repeat(${bottomSummaryRowsCount}, ${summaryRowHeight}px)`;
|
|
3008
2768
|
}
|
|
3009
|
-
|
|
3010
|
-
const isGroupRowFocused = selectedPosition.idx === -1 && selectedPosition.rowIdx !== -2;
|
|
2769
|
+
const isGroupRowFocused = selectedPosition.idx === -1 && selectedPosition.rowIdx !== minRowIdx - 1;
|
|
3011
2770
|
return /*#__PURE__*/o("div", {
|
|
3012
2771
|
role: hasGroups ? 'treegrid' : 'grid',
|
|
3013
2772
|
"aria-label": ariaLabel,
|
|
@@ -3017,14 +2776,16 @@ function DataGrid(props, ref) {
|
|
|
3017
2776
|
"aria-colcount": columns.length,
|
|
3018
2777
|
"aria-rowcount": headerRowsCount + rowsCount + summaryRowsCount,
|
|
3019
2778
|
className: clsx(rootClassname, className, isDragging && viewportDraggingClassname),
|
|
3020
|
-
style: {
|
|
3021
|
-
|
|
3022
|
-
|
|
2779
|
+
style: {
|
|
2780
|
+
...style,
|
|
2781
|
+
scrollPaddingInlineStart: selectedPosition.idx > lastFrozenColumnIndex || scrollToPosition?.idx !== undefined ? `${totalFrozenColumnWidth}px` : undefined,
|
|
2782
|
+
scrollPaddingBlock: isRowIdxWithinViewportBounds(selectedPosition.rowIdx) || scrollToPosition?.rowIdx !== undefined ? `${headerRowHeight + topSummaryRowsCount * summaryRowHeight}px ${bottomSummaryRowsCount * summaryRowHeight}px` : undefined,
|
|
2783
|
+
gridTemplateColumns,
|
|
3023
2784
|
gridTemplateRows: templateRows,
|
|
3024
2785
|
'--rdg-header-row-height': `${headerRowHeight}px`,
|
|
3025
2786
|
'--rdg-summary-row-height': `${summaryRowHeight}px`,
|
|
3026
2787
|
'--rdg-sign': isRtl ? -1 : 1,
|
|
3027
|
-
...
|
|
2788
|
+
...layoutCssVars
|
|
3028
2789
|
},
|
|
3029
2790
|
dir: direction,
|
|
3030
2791
|
ref: gridRef,
|
|
@@ -3036,81 +2797,90 @@ function DataGrid(props, ref) {
|
|
|
3036
2797
|
tabIndex: isGroupRowFocused ? 0 : -1,
|
|
3037
2798
|
className: clsx(focusSinkClassname, isGroupRowFocused && [rowSelected, lastFrozenColumnIndex !== -1 && rowSelectedWithFrozenCell]),
|
|
3038
2799
|
style: {
|
|
3039
|
-
gridRowStart: selectedPosition.rowIdx +
|
|
3040
|
-
}
|
|
3041
|
-
|
|
3042
|
-
|
|
2800
|
+
gridRowStart: selectedPosition.rowIdx + headerAndTopSummaryRowsCount + 1
|
|
2801
|
+
}
|
|
2802
|
+
}), scrollToPosition !== null && /*#__PURE__*/o(ScrollToCell, {
|
|
2803
|
+
scrollToPosition: scrollToPosition,
|
|
2804
|
+
setScrollToCellPosition: setScrollToPosition,
|
|
2805
|
+
gridElement: gridRef.current
|
|
2806
|
+
}), /*#__PURE__*/o(DataGridDefaultRenderersProvider, {
|
|
3043
2807
|
value: defaultGridComponents,
|
|
3044
|
-
children: [/*#__PURE__*/o(
|
|
3045
|
-
|
|
3046
|
-
|
|
3047
|
-
|
|
3048
|
-
|
|
3049
|
-
|
|
3050
|
-
|
|
3051
|
-
|
|
3052
|
-
|
|
3053
|
-
selectCell: selectHeaderCellLatest,
|
|
3054
|
-
shouldFocusGrid: !selectedCellIsWithinSelectionBounds,
|
|
3055
|
-
direction: direction
|
|
3056
|
-
}), rows.length === 0 && noRowsFallback ? noRowsFallback : /*#__PURE__*/o(p$1, {
|
|
3057
|
-
children: [topSummaryRows?.map((row, rowIdx) => {
|
|
3058
|
-
const gridRowStart = headerRowsCount + rowIdx + 1;
|
|
3059
|
-
const summaryRowIdx = rowIdx + minRowIdx + 1;
|
|
3060
|
-
const isSummaryRowSelected = selectedPosition.rowIdx === summaryRowIdx;
|
|
3061
|
-
const top = headerRowHeight + summaryRowHeight * rowIdx;
|
|
3062
|
-
return /*#__PURE__*/o(SummaryRow$1, {
|
|
3063
|
-
"aria-rowindex": gridRowStart,
|
|
3064
|
-
rowIdx: rowIdx,
|
|
3065
|
-
gridRowStart: gridRowStart,
|
|
3066
|
-
row: row,
|
|
3067
|
-
top: top,
|
|
3068
|
-
bottom: undefined,
|
|
3069
|
-
lastTopRowIdx: topSummaryRowsCount - 1,
|
|
3070
|
-
viewportColumns: getRowViewportColumns(summaryRowIdx),
|
|
2808
|
+
children: [/*#__PURE__*/o(RowSelectionChangeProvider, {
|
|
2809
|
+
value: selectRowLatest,
|
|
2810
|
+
children: [/*#__PURE__*/o(RowSelectionProvider, {
|
|
2811
|
+
value: allRowsSelected,
|
|
2812
|
+
children: /*#__PURE__*/o(HeaderRow$1, {
|
|
2813
|
+
columns: getRowViewportColumns(-1),
|
|
2814
|
+
onColumnResize: handleColumnResizeLatest,
|
|
2815
|
+
sortColumns: sortColumns,
|
|
2816
|
+
onSortColumnsChange: onSortColumnsChangeLatest,
|
|
3071
2817
|
lastFrozenColumnIndex: lastFrozenColumnIndex,
|
|
3072
|
-
selectedCellIdx:
|
|
3073
|
-
selectCell:
|
|
3074
|
-
|
|
3075
|
-
|
|
3076
|
-
|
|
3077
|
-
|
|
3078
|
-
|
|
3079
|
-
|
|
3080
|
-
|
|
3081
|
-
|
|
3082
|
-
|
|
3083
|
-
|
|
3084
|
-
|
|
3085
|
-
|
|
3086
|
-
|
|
3087
|
-
|
|
3088
|
-
|
|
3089
|
-
|
|
3090
|
-
|
|
3091
|
-
|
|
3092
|
-
|
|
3093
|
-
|
|
3094
|
-
|
|
3095
|
-
|
|
3096
|
-
|
|
2818
|
+
selectedCellIdx: selectedPosition.rowIdx === minRowIdx ? selectedPosition.idx : undefined,
|
|
2819
|
+
selectCell: selectHeaderCellLatest,
|
|
2820
|
+
shouldFocusGrid: !selectedCellIsWithinSelectionBounds,
|
|
2821
|
+
direction: direction
|
|
2822
|
+
})
|
|
2823
|
+
}), rows.length === 0 && noRowsFallback ? noRowsFallback : /*#__PURE__*/o(k$2, {
|
|
2824
|
+
children: [topSummaryRows?.map((row, rowIdx) => {
|
|
2825
|
+
const gridRowStart = headerRowsCount + rowIdx + 1;
|
|
2826
|
+
const summaryRowIdx = rowIdx + minRowIdx + 1;
|
|
2827
|
+
const isSummaryRowSelected = selectedPosition.rowIdx === summaryRowIdx;
|
|
2828
|
+
const top = headerRowHeight + summaryRowHeight * rowIdx;
|
|
2829
|
+
return /*#__PURE__*/o(SummaryRow$1, {
|
|
2830
|
+
"aria-rowindex": gridRowStart,
|
|
2831
|
+
rowIdx: summaryRowIdx,
|
|
2832
|
+
gridRowStart: gridRowStart,
|
|
2833
|
+
row: row,
|
|
2834
|
+
top: top,
|
|
2835
|
+
bottom: undefined,
|
|
2836
|
+
viewportColumns: getRowViewportColumns(summaryRowIdx),
|
|
2837
|
+
lastFrozenColumnIndex: lastFrozenColumnIndex,
|
|
2838
|
+
selectedCellIdx: isSummaryRowSelected ? selectedPosition.idx : undefined,
|
|
2839
|
+
isTop: true,
|
|
2840
|
+
showBorder: rowIdx === topSummaryRowsCount - 1,
|
|
2841
|
+
selectCell: selectCellLatest
|
|
2842
|
+
}, rowIdx);
|
|
2843
|
+
}), getViewportRows(), bottomSummaryRows?.map((row, rowIdx) => {
|
|
2844
|
+
const gridRowStart = headerAndTopSummaryRowsCount + rows.length + rowIdx + 1;
|
|
2845
|
+
const summaryRowIdx = rows.length + rowIdx;
|
|
2846
|
+
const isSummaryRowSelected = selectedPosition.rowIdx === summaryRowIdx;
|
|
2847
|
+
const top = clientHeight > totalRowHeight ? gridHeight - summaryRowHeight * (bottomSummaryRows.length - rowIdx) : undefined;
|
|
2848
|
+
const bottom = top === undefined ? summaryRowHeight * (bottomSummaryRows.length - 1 - rowIdx) : undefined;
|
|
2849
|
+
return /*#__PURE__*/o(SummaryRow$1, {
|
|
2850
|
+
"aria-rowindex": headerAndTopSummaryRowsCount + rowsCount + rowIdx + 1,
|
|
2851
|
+
rowIdx: summaryRowIdx,
|
|
2852
|
+
gridRowStart: gridRowStart,
|
|
2853
|
+
row: row,
|
|
2854
|
+
top: top,
|
|
2855
|
+
bottom: bottom,
|
|
2856
|
+
viewportColumns: getRowViewportColumns(summaryRowIdx),
|
|
2857
|
+
lastFrozenColumnIndex: lastFrozenColumnIndex,
|
|
2858
|
+
selectedCellIdx: isSummaryRowSelected ? selectedPosition.idx : undefined,
|
|
2859
|
+
isTop: false,
|
|
2860
|
+
showBorder: rowIdx === 0,
|
|
2861
|
+
selectCell: selectCellLatest
|
|
2862
|
+
}, rowIdx);
|
|
2863
|
+
})]
|
|
3097
2864
|
})]
|
|
3098
2865
|
}), renderMeasuringCells(viewportColumns)]
|
|
3099
2866
|
})]
|
|
3100
2867
|
});
|
|
3101
2868
|
}
|
|
3102
|
-
|
|
2869
|
+
let getCellToScrollExpression;
|
|
2870
|
+
function getCellToScroll(gridEl) {
|
|
2871
|
+
getCellToScrollExpression ??= document.createExpression('div[@role="row"]/div[@tabindex="0"]');
|
|
2872
|
+
return getCellToScrollExpression.evaluate(gridEl, 8).singleNodeValue;
|
|
2873
|
+
}
|
|
3103
2874
|
function isSamePosition(p1, p2) {
|
|
3104
2875
|
return p1.idx === p2.idx && p1.rowIdx === p2.rowIdx;
|
|
3105
2876
|
}
|
|
3106
|
-
|
|
3107
|
-
const DataGrid$1 = /*#__PURE__*/N(DataGrid);
|
|
2877
|
+
const DataGrid$1 = /*#__PURE__*/k(DataGrid);
|
|
3108
2878
|
|
|
3109
2879
|
function useData(widget) {
|
|
3110
2880
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3111
|
-
var columns = F(function () { return widget.columns(); }, [widget, widget.dataChecksum()]);
|
|
2881
|
+
var columns = F$1(function () { return widget.columns(); }, [widget, widget.dataChecksum()]);
|
|
3112
2882
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3113
|
-
var data = F(function () { return widget.data(); }, [widget, widget.dataChecksum()]);
|
|
2883
|
+
var data = F$1(function () { return widget.data(); }, [widget, widget.dataChecksum()]);
|
|
3114
2884
|
return [columns, data];
|
|
3115
2885
|
}
|
|
3116
2886
|
|
|
@@ -3128,9 +2898,9 @@ function copyAndSort(items, attribute, descending) {
|
|
|
3128
2898
|
}
|
|
3129
2899
|
var EmptyRowsRenderer = function (_a) {
|
|
3130
2900
|
var message = _a.message;
|
|
3131
|
-
return
|
|
2901
|
+
return y$1("div", { style: { textAlign: "center", gridColumn: "1/-1" } },
|
|
3132
2902
|
message,
|
|
3133
|
-
|
|
2903
|
+
y$1("span", null, "--- * --- * ---"));
|
|
3134
2904
|
};
|
|
3135
2905
|
var ReactTable = function (_a) {
|
|
3136
2906
|
var table = _a.table, sort = _a.sort;
|
|
@@ -3139,12 +2909,12 @@ var ReactTable = function (_a) {
|
|
|
3139
2909
|
var columnTypes = table.columnTypes();
|
|
3140
2910
|
var columnPatterns = table.columnPatterns();
|
|
3141
2911
|
var columnFormats = table.columnFormats();
|
|
3142
|
-
var _c =
|
|
3143
|
-
var _d =
|
|
3144
|
-
var _e =
|
|
3145
|
-
var _f =
|
|
2912
|
+
var _c = h([]), listColumns = _c[0], setListColumns = _c[1];
|
|
2913
|
+
var _d = h(), sortColumn = _d[0], setSortColumn = _d[1];
|
|
2914
|
+
var _e = h([]), rows = _e[0], setRows = _e[1];
|
|
2915
|
+
var _f = h(new Set()), selectedRows = _f[0], setSelectedRows = _f[1];
|
|
3146
2916
|
// Columns ---
|
|
3147
|
-
|
|
2917
|
+
p(function () {
|
|
3148
2918
|
setListColumns(__spreadArray(__spreadArray([], multiSelect ? [SelectColumn] : [], true), columns.map(function (column) {
|
|
3149
2919
|
var _a;
|
|
3150
2920
|
var type = (_a = columnTypes[column]) !== null && _a !== void 0 ? _a : "string";
|
|
@@ -3158,7 +2928,7 @@ var ReactTable = function (_a) {
|
|
|
3158
2928
|
break;
|
|
3159
2929
|
case "number":
|
|
3160
2930
|
formatter = function (props) {
|
|
3161
|
-
return
|
|
2931
|
+
return y$1("div", { style: { textAlign: "right" } }, props.row[props.column.key]);
|
|
3162
2932
|
};
|
|
3163
2933
|
// eslint-disable-next-line no-fallthrough
|
|
3164
2934
|
default:
|
|
@@ -3170,7 +2940,7 @@ var ReactTable = function (_a) {
|
|
|
3170
2940
|
resizable: true,
|
|
3171
2941
|
sortable: true,
|
|
3172
2942
|
minWidth: 80,
|
|
3173
|
-
|
|
2943
|
+
renderCell: formatter,
|
|
3174
2944
|
__hpcc_pattern: __hpcc_pattern,
|
|
3175
2945
|
__hpcc_format: __hpcc_format
|
|
3176
2946
|
};
|
|
@@ -3189,11 +2959,11 @@ var ReactTable = function (_a) {
|
|
|
3189
2959
|
var onSelectedRowsChange = T$1(function (selectedRows) {
|
|
3190
2960
|
setSelectedRows(selectedRows);
|
|
3191
2961
|
}, []);
|
|
3192
|
-
var
|
|
2962
|
+
var onCellClick = T$1(function (row, column) {
|
|
3193
2963
|
table.onRowClickCallback(row, column.key);
|
|
3194
2964
|
}, [table]);
|
|
3195
2965
|
// Rows ---
|
|
3196
|
-
|
|
2966
|
+
p(function () {
|
|
3197
2967
|
var items = data.map(function (row, index) {
|
|
3198
2968
|
var retVal = {
|
|
3199
2969
|
key: index
|
|
@@ -3218,7 +2988,7 @@ var ReactTable = function (_a) {
|
|
|
3218
2988
|
}
|
|
3219
2989
|
setRows(items);
|
|
3220
2990
|
}, [listColumns, data, sort]);
|
|
3221
|
-
return
|
|
2991
|
+
return y$1(DataGrid$1, { columns: listColumns, headerRowHeight: 24, rows: rows, rowKeyGetter: rowKeyGetter, rowHeight: 20, renderers: { noRowsFallback: y$1(EmptyRowsRenderer, { message: table.noDataMessage() }) }, className: table.darkMode() ? "rdg-dark" : "rdg-light", sortColumns: sortColumn ? [sortColumn] : [], onSortColumnsChange: onSortColumnsChange, selectedRows: selectedRows, onSelectedRowsChange: multiSelect ? onSelectedRowsChange : undefined, onCellClick: multiSelect ? undefined : onCellClick, "aria-describedby": "", "aria-label": "", "aria-labelledby": "", style: { height: "100%" } });
|
|
3222
2992
|
};
|
|
3223
2993
|
|
|
3224
2994
|
function styleInject(css, ref) {
|
|
@@ -3297,10 +3067,10 @@ var Table = /** @class */ (function (_super) {
|
|
|
3297
3067
|
_super.prototype.update.call(this, domNode, element);
|
|
3298
3068
|
this._div.style("width", this.width() + "px");
|
|
3299
3069
|
this._div.style("height", this.height() + "px");
|
|
3300
|
-
|
|
3070
|
+
G(y$1(ReactTable, { table: this }), this._div.node());
|
|
3301
3071
|
};
|
|
3302
3072
|
Table.prototype.exit = function (domNode, element) {
|
|
3303
|
-
|
|
3073
|
+
hn(this._div.node());
|
|
3304
3074
|
this._div.remove();
|
|
3305
3075
|
_super.prototype.exit.call(this, domNode, element);
|
|
3306
3076
|
};
|