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