"!==l[1]||kb.test(f)?0:h:h.firstChild,e=f&&f.childNodes.length;while(e--)m.nodeName(j=f.childNodes[e],"tbody")&&!j.childNodes.length&&f.removeChild(j)}m.merge(p,h.childNodes),h.textContent="";while(h.firstChild)h.removeChild(h.firstChild);h=o.lastChild}else p.push(b.createTextNode(f));h&&o.removeChild(h),k.appendChecked||m.grep(ub(p,"input"),vb),q=0;while(f=p[q++])if((!d||-1===m.inArray(f,d))&&(g=m.contains(f.ownerDocument,f),h=ub(o.appendChild(f),"script"),g&&zb(h),c)){e=0;while(f=h[e++])ob.test(f.type||"")&&c.push(f)}return h=null,o},cleanData:function(a,b){for(var d,e,f,g,h=0,i=m.expando,j=m.cache,l=k.deleteExpando,n=m.event.special;null!=(d=a[h]);h++)if((b||m.acceptData(d))&&(f=d[i],g=f&&j[f])){if(g.events)for(e in g.events)n[e]?m.event.remove(d,e):m.removeEvent(d,e,g.handle);j[f]&&(delete j[f],l?delete d[i]:typeof d.removeAttribute!==K?d.removeAttribute(i):d[i]=null,c.push(f))}}}),m.fn.extend({text:function(a){return V(this,function(a){return void 0===a?m.text(this):this.empty().append((this[0]&&this[0].ownerDocument||y).createTextNode(a))},null,a,arguments.length)},append:function(){return this.domManip(arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=wb(this,a);b.appendChild(a)}})},prepend:function(){return this.domManip(arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=wb(this,a);b.insertBefore(a,b.firstChild)}})},before:function(){return this.domManip(arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this)})},after:function(){return this.domManip(arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this.nextSibling)})},remove:function(a,b){for(var c,d=a?m.filter(a,this):this,e=0;null!=(c=d[e]);e++)b||1!==c.nodeType||m.cleanData(ub(c)),c.parentNode&&(b&&m.contains(c.ownerDocument,c)&&zb(ub(c,"script")),c.parentNode.removeChild(c));return this},empty:function(){for(var a,b=0;null!=(a=this[b]);b++){1===a.nodeType&&m.cleanData(ub(a,!1));while(a.firstChild)a.removeChild(a.firstChild);a.options&&m.nodeName(a,"select")&&(a.options.length=0)}return this},clone:function(a,b){return a=null==a?!1:a,b=null==b?a:b,this.map(function(){return m.clone(this,a,b)})},html:function(a){return V(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a)return 1===b.nodeType?b.innerHTML.replace(fb,""):void 0;if(!("string"!=typeof a||mb.test(a)||!k.htmlSerialize&&gb.test(a)||!k.leadingWhitespace&&hb.test(a)||rb[(jb.exec(a)||["",""])[1].toLowerCase()])){a=a.replace(ib,"<$1>");try{for(;d>c;c++)b=this[c]||{},1===b.nodeType&&(m.cleanData(ub(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)},replaceWith:function(){var a=arguments[0];return this.domManip(arguments,function(b){a=this.parentNode,m.cleanData(ub(this)),a&&a.replaceChild(b,this)}),a&&(a.length||a.nodeType)?this:this.remove()},detach:function(a){return this.remove(a,!0)},domManip:function(a,b){a=e.apply([],a);var c,d,f,g,h,i,j=0,l=this.length,n=this,o=l-1,p=a[0],q=m.isFunction(p);if(q||l>1&&"string"==typeof p&&!k.checkClone&&nb.test(p))return this.each(function(c){var d=n.eq(c);q&&(a[0]=p.call(this,c,d.html())),d.domManip(a,b)});if(l&&(i=m.buildFragment(a,this[0].ownerDocument,!1,this),c=i.firstChild,1===i.childNodes.length&&(i=c),c)){for(g=m.map(ub(i,"script"),xb),f=g.length;l>j;j++)d=i,j!==o&&(d=m.clone(d,!0,!0),f&&m.merge(g,ub(d,"script"))),b.call(this[j],d,j);if(f)for(h=g[g.length-1].ownerDocument,m.map(g,yb),j=0;f>j;j++)d=g[j],ob.test(d.type||"")&&!m._data(d,"globalEval")&&m.contains(h,d)&&(d.src?m._evalUrl&&m._evalUrl(d.src):m.globalEval((d.text||d.textContent||d.innerHTML||"").replace(qb,"")));i=c=null}return this}}),m.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){m.fn[a]=function(a){for(var c,d=0,e=[],g=m(a),h=g.length-1;h>=d;d++)c=d===h?this:this.clone(!0),m(g[d])[b](c),f.apply(e,c.get());return this.pushStack(e)}});var Cb,Db={};function Eb(b,c){var d,e=m(c.createElement(b)).appendTo(c.body),f=a.getDefaultComputedStyle&&(d=a.getDefaultComputedStyle(e[0]))?d.display:m.css(e[0],"display");return e.detach(),f}function Fb(a){var b=y,c=Db[a];return c||(c=Eb(a,b),"none"!==c&&c||(Cb=(Cb||m("")).appendTo(b.documentElement),b=(Cb[0].contentWindow||Cb[0].contentDocument).document,b.write(),b.close(),c=Eb(a,b),Cb.detach()),Db[a]=c),c}!function(){var a;k.shrinkWrapBlocks=function(){if(null!=a)return a;a=!1;var b,c,d;return c=y.getElementsByTagName("body")[0],c&&c.style?(b=y.createElement("div"),d=y.createElement("div"),d.style.cssText="position:absolute;border:0;width:0;height:0;top:0;left:-9999px",c.appendChild(d).appendChild(b),typeof b.style.zoom!==K&&(b.style.cssText="-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;display:block;margin:0;border:0;padding:1px;width:1px;zoom:1",b.appendChild(y.createElement("div")).style.width="5px",a=3!==b.offsetWidth),c.removeChild(d),a):void 0}}();var Gb=/^margin/,Hb=new RegExp("^("+S+")(?!px)[a-z%]+$","i"),Ib,Jb,Kb=/^(top|right|bottom|left)$/;a.getComputedStyle?(Ib=function(b){return b.ownerDocument.defaultView.opener?b.ownerDocument.defaultView.getComputedStyle(b,null):a.getComputedStyle(b,null)},Jb=function(a,b,c){var d,e,f,g,h=a.style;return c=c||Ib(a),g=c?c.getPropertyValue(b)||c[b]:void 0,c&&(""!==g||m.contains(a.ownerDocument,a)||(g=m.style(a,b)),Hb.test(g)&&Gb.test(b)&&(d=h.width,e=h.minWidth,f=h.maxWidth,h.minWidth=h.maxWidth=h.width=g,g=c.width,h.width=d,h.minWidth=e,h.maxWidth=f)),void 0===g?g:g+""}):y.documentElement.currentStyle&&(Ib=function(a){return a.currentStyle},Jb=function(a,b,c){var d,e,f,g,h=a.style;return c=c||Ib(a),g=c?c[b]:void 0,null==g&&h&&h[b]&&(g=h[b]),Hb.test(g)&&!Kb.test(b)&&(d=h.left,e=a.runtimeStyle,f=e&&e.left,f&&(e.left=a.currentStyle.left),h.left="fontSize"===b?"1em":g,g=h.pixelLeft+"px",h.left=d,f&&(e.left=f)),void 0===g?g:g+""||"auto"});function Lb(a,b){return{get:function(){var c=a();if(null!=c)return c?void delete this.get:(this.get=b).apply(this,arguments)}}}!function(){var b,c,d,e,f,g,h;if(b=y.createElement("div"),b.innerHTML=" a a ").append(m.parseHTML(a)).find(d):a)}).complete(c&&function(a,b){g.each(c,e||[a.responseText,b,a])}),this},m.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(a,b){m.fn[b]=function(a){return this.on(b,a)}}),m.expr.filters.animated=function(a){return m.grep(m.timers,function(b){return a===b.elem}).length};var cd=a.document.documentElement;function dd(a){return m.isWindow(a)?a:9===a.nodeType?a.defaultView||a.parentWindow:!1}m.offset={setOffset:function(a,b,c){var d,e,f,g,h,i,j,k=m.css(a,"position"),l=m(a),n={};"static"===k&&(a.style.position="relative"),h=l.offset(),f=m.css(a,"top"),i=m.css(a,"left"),j=("absolute"===k||"fixed"===k)&&m.inArray("auto",[f,i])>-1,j?(d=l.position(),g=d.top,e=d.left):(g=parseFloat(f)||0,e=parseFloat(i)||0),m.isFunction(b)&&(b=b.call(a,c,h)),null!=b.top&&(n.top=b.top-h.top+g),null!=b.left&&(n.left=b.left-h.left+e),"using"in b?b.using.call(a,n):l.css(n)}},m.fn.extend({offset:function(a){if(arguments.length)return void 0===a?this:this.each(function(b){m.offset.setOffset(this,a,b)});var b,c,d={top:0,left:0},e=this[0],f=e&&e.ownerDocument;if(f)return b=f.documentElement,m.contains(b,e)?(typeof e.getBoundingClientRect!==K&&(d=e.getBoundingClientRect()),c=dd(f),{top:d.top+(c.pageYOffset||b.scrollTop)-(b.clientTop||0),left:d.left+(c.pageXOffset||b.scrollLeft)-(b.clientLeft||0)}):d},position:function(){if(this[0]){var a,b,c={top:0,left:0},d=this[0];return"fixed"===m.css(d,"position")?b=d.getBoundingClientRect():(a=this.offsetParent(),b=this.offset(),m.nodeName(a[0],"html")||(c=a.offset()),c.top+=m.css(a[0],"borderTopWidth",!0),c.left+=m.css(a[0],"borderLeftWidth",!0)),{top:b.top-c.top-m.css(d,"marginTop",!0),left:b.left-c.left-m.css(d,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||cd;while(a&&!m.nodeName(a,"html")&&"static"===m.css(a,"position"))a=a.offsetParent;return a||cd})}}),m.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(a,b){var c=/Y/.test(b);m.fn[a]=function(d){return V(this,function(a,d,e){var f=dd(a);return void 0===e?f?b in f?f[b]:f.document.documentElement[d]:a[d]:void(f?f.scrollTo(c?m(f).scrollLeft():e,c?e:m(f).scrollTop()):a[d]=e)},a,d,arguments.length,null)}}),m.each(["top","left"],function(a,b){m.cssHooks[b]=Lb(k.pixelPosition,function(a,c){return c?(c=Jb(a,b),Hb.test(c)?m(a).position()[b]+"px":c):void 0})}),m.each({Height:"height",Width:"width"},function(a,b){m.each({padding:"inner"+a,content:b,"":"outer"+a},function(c,d){m.fn[d]=function(d,e){var f=arguments.length&&(c||"boolean"!=typeof d),g=c||(d===!0||e===!0?"margin":"border");return V(this,function(b,c,d){var e;return m.isWindow(b)?b.document.documentElement["client"+a]:9===b.nodeType?(e=b.documentElement,Math.max(b.body["scroll"+a],e["scroll"+a],b.body["offset"+a],e["offset"+a],e["client"+a])):void 0===d?m.css(b,c,g):m.style(b,c,d,g)},b,f?d:void 0,f,null)}})}),m.fn.size=function(){return this.length},m.fn.andSelf=m.fn.addBack,"function"==typeof define&&define.amd&&define("jquery",[],function(){return m});var ed=a.jQuery,fd=a.$;return m.noConflict=function(b){return a.$===m&&(a.$=fd),b&&a.jQuery===m&&(a.jQuery=ed),m},typeof b===K&&(a.jQuery=a.$=m),m});
diff --git a/packages/react-data-grid-examples/src/docs/markdowns/Canvas.md b/packages/react-data-grid-examples/src/docs/markdowns/Canvas.md
index 480fef641d..97f588ac29 100644
--- a/packages/react-data-grid-examples/src/docs/markdowns/Canvas.md
+++ b/packages/react-data-grid-examples/src/docs/markdowns/Canvas.md
@@ -16,22 +16,22 @@ type: `shaperequire('./PropTypeShapes/CellMetaDataShape')`
type: `string`
-### `colDisplayEnd` (required)
+### `colOverscanEndIdx` (required)
type: `number`
-### `colDisplayStart` (required)
+### `colOverscanStartIdx` (required)
type: `number`
-### `colVisibleEnd` (required)
+### `colVisibleEndIdx` (required)
type: `number`
-### `colVisibleStart` (required)
+### `colVisibleStartIdx` (required)
type: `number`
@@ -46,12 +46,12 @@ type: `union(object|array)`
type: `element`
-### `displayEnd` (required)
+### `rowOverscanEndIdx` (required)
type: `number`
-### `displayStart` (required)
+### `rowOverscanStartIdx` (required)
type: `number`
@@ -145,12 +145,12 @@ type: `string`
type: `union(number|string)`
-### `visibleEnd` (required)
+### `rowVisibleEndIdx` (required)
type: `number`
-### `visibleStart` (required)
+### `rowVisibleStartIdx` (required)
type: `number`
diff --git a/packages/react-data-grid-examples/src/docs/markdowns/Row.md b/packages/react-data-grid-examples/src/docs/markdowns/Row.md
index defa96fd72..e301d2994f 100644
--- a/packages/react-data-grid-examples/src/docs/markdowns/Row.md
+++ b/packages/react-data-grid-examples/src/docs/markdowns/Row.md
@@ -17,22 +17,22 @@ type: `func`
defaultValue: `require('./Cell')`
-### `colDisplayEnd` (required)
+### `colOverscanEndIdx` (required)
type: `number`
-### `colDisplayStart` (required)
+### `colOverscanStartIdx` (required)
type: `number`
-### `colVisibleEnd` (required)
+### `colVisibleEndIdx` (required)
type: `number`
-### `colVisibleStart` (required)
+### `colVisibleStartIdx` (required)
type: `number`
diff --git a/packages/react-data-grid-examples/src/scripts/example03-fixed-cols.js b/packages/react-data-grid-examples/src/scripts/example03-frozen-cols.js
similarity index 82%
rename from packages/react-data-grid-examples/src/scripts/example03-fixed-cols.js
rename to packages/react-data-grid-examples/src/scripts/example03-frozen-cols.js
index 50c42d40e4..c9c7c9d9d6 100644
--- a/packages/react-data-grid-examples/src/scripts/example03-fixed-cols.js
+++ b/packages/react-data-grid-examples/src/scripts/example03-frozen-cols.js
@@ -6,26 +6,31 @@ class Example extends React.Component {
constructor(props, context) {
super(props, context);
this.createRows();
- this._columns = [
+
+ const extraColumns = [...Array(50).keys()].map(i => ({key: `col${i}`, name: `col${i}`}));
+ const columns = [
{
key: 'id',
name: 'ID',
- locked: true
+ frozen: true
},
{
key: 'task',
name: 'Title',
- width: 200
+ width: 200,
+ frozen: true
},
{
key: 'priority',
name: 'Priority',
- width: 200
+ width: 200,
+ frozen: true
},
{
key: 'issueType',
name: 'Issue Type',
- width: 200
+ width: 200,
+ frozen: true
},
{
key: 'complete',
@@ -41,9 +46,10 @@ class Example extends React.Component {
key: 'completeDate',
name: 'Expected Complete',
width: 200
- }
- ];
+ },
+ ...extraColumns];
+ this._columns = columns;
this.state = null;
}
@@ -82,12 +88,12 @@ class Example extends React.Component {
}
}
-const exampleDescription =
To make a given column frozen, set column.locked = true. In this example, the ID columns has been frozen and will remain in position as you scroll horizontally
+const exampleDescription =
To make a given column frozen, set column.frozen = true. In this example, the ID columns has been frozen and will remain in position as you scroll horizontally
module.exports = exampleWrapper({
WrappedComponent: Example,
exampleName: 'Frozen Columns Example',
exampleDescription,
- examplePath: './scripts/example03-fixed-cols.js',
+ examplePath: './scripts/example03-frozen-cols.js',
examplePlaygroundLink: 'https://jsfiddle.net/k7tfnw1n/5/'
});
diff --git a/packages/react-data-grid-examples/src/scripts/example08-sortable-cols.js b/packages/react-data-grid-examples/src/scripts/example08-sortable-cols.js
index 178dbb8a73..5ee9322c0e 100644
--- a/packages/react-data-grid-examples/src/scripts/example08-sortable-cols.js
+++ b/packages/react-data-grid-examples/src/scripts/example08-sortable-cols.js
@@ -9,7 +9,7 @@ class Example extends React.Component {
{
key: 'id',
name: 'ID',
- locked: true
+ frozen: true
},
{
key: 'task',
diff --git a/packages/react-data-grid-examples/src/scripts/example18-context-menu.js b/packages/react-data-grid-examples/src/scripts/example18-context-menu.js
index c7e33fee1d..abebcaa2e1 100644
--- a/packages/react-data-grid-examples/src/scripts/example18-context-menu.js
+++ b/packages/react-data-grid-examples/src/scripts/example18-context-menu.js
@@ -1,7 +1,7 @@
const ReactDataGrid = require('react-data-grid');
const exampleWrapper = require('../components/exampleWrapper');
const React = require('react');
-const { Menu: { ContextMenu, MenuItem, SubMenu } } = require('react-data-grid-addons');
+const { Menu: { ContextMenu, MenuItem, SubMenu, ContextMenuTrigger } } = require('react-data-grid-addons');
import PropTypes from 'prop-types';
@@ -63,7 +63,8 @@ class Example extends React.Component {
columns={this._columns}
rowGetter={this.rowGetter}
rowsCount={this.state.rows.length}
- minHeight={500} />
+ minHeight={500}
+ RowsContainer={ContextMenuTrigger} />
);
}
}
diff --git a/packages/react-data-grid-examples/src/scripts/example20-cell-navigation.js b/packages/react-data-grid-examples/src/scripts/example20-cell-navigation.js
index b3c8e89743..d3dab311b7 100644
--- a/packages/react-data-grid-examples/src/scripts/example20-cell-navigation.js
+++ b/packages/react-data-grid-examples/src/scripts/example20-cell-navigation.js
@@ -10,7 +10,7 @@ class Example extends React.Component {
{
key: 'id',
name: 'ID',
- locked: true
+ frozen: true
},
{
key: 'task',
diff --git a/packages/react-data-grid-examples/src/scripts/example21-cell-selection-events.js b/packages/react-data-grid-examples/src/scripts/example21-cell-selection-events.js
index 94ed722d0a..b830a28bdf 100644
--- a/packages/react-data-grid-examples/src/scripts/example21-cell-selection-events.js
+++ b/packages/react-data-grid-examples/src/scripts/example21-cell-selection-events.js
@@ -39,9 +39,7 @@ class Example extends React.Component {
};
onCellDeSelected = ({ rowIdx, idx }) => {
- if (idx === 2) {
- alert('the editor for cell (' + rowIdx + ',' + idx + ') should have just closed');
- }
+ this.setState({alert: `The editor for cell ${idx}, ${rowIdx} should have just closed`});
};
render() {
@@ -49,6 +47,7 @@ class Example extends React.Component {
return (
{this.state.selectedRows.length} {rowText} selected
+ {this.state.alert &&
{this.state.alert}
}
this.grid = node }
rowKey="id"
diff --git a/packages/react-data-grid-examples/src/scripts/example25-tree-view.js b/packages/react-data-grid-examples/src/scripts/example25-tree-view.js
index d8a83288d4..2f3d4b76df 100644
--- a/packages/react-data-grid-examples/src/scripts/example25-tree-view.js
+++ b/packages/react-data-grid-examples/src/scripts/example25-tree-view.js
@@ -28,7 +28,7 @@ let columns = [
{
key: 'id',
name: 'id',
- locked: true
+ frozen: true
},
{
key: 'name',
diff --git a/packages/react-data-grid-examples/src/scripts/example26-tree-view-no-add-delete.js b/packages/react-data-grid-examples/src/scripts/example26-tree-view-no-add-delete.js
index f1498711d4..305f96dcfd 100644
--- a/packages/react-data-grid-examples/src/scripts/example26-tree-view-no-add-delete.js
+++ b/packages/react-data-grid-examples/src/scripts/example26-tree-view-no-add-delete.js
@@ -28,7 +28,7 @@ let columns = [
{
key: 'id',
name: 'id',
- locked: true
+ frozen: true
},
{
key: 'name',
diff --git a/packages/react-data-grid-examples/src/scripts/example29-descendingFirstSortable.js b/packages/react-data-grid-examples/src/scripts/example29-descendingFirstSortable.js
index 94127e7cfc..9edbfe46a9 100644
--- a/packages/react-data-grid-examples/src/scripts/example29-descendingFirstSortable.js
+++ b/packages/react-data-grid-examples/src/scripts/example29-descendingFirstSortable.js
@@ -9,7 +9,7 @@ class Example extends React.Component {
{
key: 'id',
name: 'ID',
- locked: true
+ frozen: true
},
{
key: 'task',
diff --git a/packages/react-data-grid-examples/src/scripts/example31-isScrolling.js b/packages/react-data-grid-examples/src/scripts/example31-isScrolling.js
new file mode 100644
index 0000000000..d506e1eb81
--- /dev/null
+++ b/packages/react-data-grid-examples/src/scripts/example31-isScrolling.js
@@ -0,0 +1,70 @@
+import ReactDataGrid from 'react-data-grid';
+import exampleWrapper from '../components/exampleWrapper';
+import React from 'react';
+import {AreaChart, Area} from 'Recharts';
+
+const getRandom = (min, max) => {
+ min = Math.ceil(min);
+ max = Math.floor(max);
+ return Math.floor(Math.random() * (max - min)) + min; // The maximum is exclusive and the minimum is inclusive
+};
+
+const ExpensiveFormatter = ({isScrolling}) => {
+ if (isScrolling) {
+ return is scrolling
;
+ }
+ const items = [...Array(1000).keys()].map(i => ({name: `Page ${i}`, uv: getRandom(0, 4000), pv: getRandom(0, 4000), amt: getRandom(0, 4000)})).slice(0, 50);
+ return (
+
+
+ );
+};
+
+const createColumns = (numberCols) => [...Array(numberCols).keys()].map(i => {
+ const column = {
+ key: `col${i}`,
+ name: `col${i}`
+ };
+ if (i === 3) {
+ column.formatter = ExpensiveFormatter;
+ column.width = 500;
+ }
+ return column;
+});
+
+const createRows = (numberRows) => [...Array(numberRows).keys()].map(i => {
+ return [...Array(numberRows).keys()].reduce((row, j) => ({...row, [`col${j}`]: `row ${i} col ${j}`}), {});
+});
+
+class Example extends React.Component {
+ constructor(props, context) {
+ super(props, context);
+ this.state = {columns: createColumns(6), rows: createRows(200)};
+ }
+
+ rowGetter = (i) => {
+ return this.state.rows[i];
+ };
+
+ render() {
+ return (
+
+
);
+ }
+}
+
+module.exports = exampleWrapper({
+ WrappedComponent: Example,
+ exampleName: 'Efficient windowing demonstration',
+ exampleDescription: 'For formatters that are expensive to render it is possible to render a simple placeholder when scrolling to improve scroll performance',
+ examplePath: './scripts/example30-efficient-windowing.js',
+ examplePlaygroundLink: 'https://jsfiddle.net/f6mbnb8z/1/'
+});
diff --git a/packages/react-data-grid/package.json b/packages/react-data-grid/package.json
index 53efc834ab..679598fa0f 100644
--- a/packages/react-data-grid/package.json
+++ b/packages/react-data-grid/package.json
@@ -1,6 +1,6 @@
{
"name": "react-data-grid",
- "version": "4.0.8",
+ "version": "5.0.0-alpha12",
"description": "Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like",
"scripts": {
"beforepublish": "node ../../ci/publish/replacePackageEntry react-data-grid true",
diff --git a/packages/react-data-grid/src/Canvas.js b/packages/react-data-grid/src/Canvas.js
index e174035356..18a143bbf1 100644
--- a/packages/react-data-grid/src/Canvas.js
+++ b/packages/react-data-grid/src/Canvas.js
@@ -1,401 +1,416 @@
-const React = require('react');
-import PropTypes from 'prop-types';
-const Row = require('./Row');
-const cellMetaDataShape = require('./PropTypeShapes/CellMetaDataShape');
-import * as rowUtils from './RowUtils';
-import RowsContainer from './RowsContainer';
-import RowGroup from './RowGroup';
-import { InteractionMasks } from './masks';
-import { getColumnScrollPosition } from './utils/canvasUtils';
-import { EventTypes } from './constants';
-require('../../../themes/react-data-grid-core.css');
-
-class Canvas extends React.Component {
- static displayName = 'Canvas';
-
- static propTypes = {
- rowRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
- rowHeight: PropTypes.number.isRequired,
- height: PropTypes.number.isRequired,
- width: PropTypes.number,
- totalWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
- style: PropTypes.string,
- className: PropTypes.string,
- displayStart: PropTypes.number.isRequired,
- displayEnd: PropTypes.number.isRequired,
- visibleStart: PropTypes.number.isRequired,
- visibleEnd: PropTypes.number.isRequired,
- colVisibleStart: PropTypes.number.isRequired,
- colVisibleEnd: PropTypes.number.isRequired,
- colDisplayStart: PropTypes.number.isRequired,
- colDisplayEnd: PropTypes.number.isRequired,
- rowsCount: PropTypes.number.isRequired,
- rowGetter: PropTypes.oneOfType([
- PropTypes.func.isRequired,
- PropTypes.array.isRequired
- ]),
- expandedRows: PropTypes.array,
- onRows: PropTypes.func,
- onScroll: PropTypes.func,
- columns: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
- cellMetaData: PropTypes.shape(cellMetaDataShape).isRequired,
- selectedRows: PropTypes.array,
- rowKey: PropTypes.string,
- rowScrollTimeout: PropTypes.number,
- scrollToRowIndex: PropTypes.number,
- contextMenu: PropTypes.element,
- getSubRowDetails: PropTypes.func,
- rowSelection: PropTypes.oneOfType([
- PropTypes.shape({
- indexes: PropTypes.arrayOf(PropTypes.number).isRequired
- }),
- PropTypes.shape({
- isSelectedKey: PropTypes.string.isRequired
- }),
- PropTypes.shape({
- keys: PropTypes.shape({
- values: PropTypes.array.isRequired,
- rowKey: PropTypes.string.isRequired
- }).isRequired
- })
- ]),
- rowGroupRenderer: PropTypes.func,
- isScrolling: PropTypes.bool,
- length: PropTypes.number,
- enableCellSelect: PropTypes.bool.isRequired,
- enableCellAutoFocus: PropTypes.bool.isRequired,
- cellNavigationMode: PropTypes.string.isRequired,
- eventBus: PropTypes.object.isRequired,
- onCheckCellIsEditable: PropTypes.func,
- onCellCopyPaste: PropTypes.func,
- onGridRowsUpdated: PropTypes.func.isRequired,
- onDragHandleDoubleClick: PropTypes.func.isRequired,
- onCellSelected: PropTypes.func,
- onCellDeSelected: PropTypes.func,
- onCellRangeSelectionStarted: PropTypes.func,
- onCellRangeSelectionUpdated: PropTypes.func,
- onCellRangeSelectionCompleted: PropTypes.func,
- onCommit: PropTypes.func.isRequired
- };
-
- static defaultProps = {
- rowRenderer: Row,
- onRows: () => { },
- selectedRows: [],
- rowScrollTimeout: 0,
- scrollToRowIndex: 0
- };
-
- state = {
- scrollingTimeout: null
- };
-
- rows = [];
- _currentRowsLength = 0;
- _currentRowsRange = { start: 0, end: 0 };
- _scroll = { scrollTop: 0, scrollLeft: 0 };
-
- componentDidMount() {
- this.unsubscribeScrollToColumn = this.props.eventBus.subscribe(EventTypes.SCROLL_TO_COLUMN, this.scrollToColumn);
- this.onRows();
- }
-
- componentWillUnmount() {
- this._currentRowsLength = 0;
- this._currentRowsRange = { start: 0, end: 0 };
- this._scroll = { scrollTop: 0, scrollLeft: 0 };
- this.rows = [];
- this.unsubscribeScrollToColumn();
- }
-
- componentDidUpdate(prevProps) {
- if (this._scroll.scrollTop !== 0 && this._scroll.scrollLeft !== 0) {
- this.setScrollLeft(this._scroll.scrollLeft);
- }
-
- const { scrollToRowIndex } = this.props;
- if (prevProps.scrollToRowIndex !== scrollToRowIndex && scrollToRowIndex !== 0) {
- this.scrollToRow(scrollToRowIndex);
- }
- this.onRows();
- }
-
- onRows = () => {
- if (this._currentRowsRange !== { start: 0, end: 0 }) {
- this.props.onRows(this._currentRowsRange);
- this._currentRowsRange = { start: 0, end: 0 };
- }
- };
-
- scrollToRow = (scrollToRowIndex) => {
- const { rowHeight, rowsCount, height } = this.props;
- this.canvas.scrollTop = Math.min(
- scrollToRowIndex * rowHeight,
- rowsCount * rowHeight - height
- );
- };
-
- onFocusInteractionMask = (focus) => {
- const { scrollTop, scrollLeft } = this._scroll;
- focus();
- if (this.canvas) {
- this.canvas.scrollTop = scrollTop;
- this.canvas.scrollLeft = scrollLeft;
- }
- };
-
- onScroll = (e) => {
- if (this.canvas !== e.target) {
- return;
- }
- const { scrollLeft, scrollTop } = e.target;
- const scroll = { scrollTop, scrollLeft };
- this._scroll = scroll;
- this.props.onScroll(scroll);
- };
-
- getClientScrollTopOffset(node) {
- const { rowHeight } = this.props;
- const scrollVariation = node.scrollTop % rowHeight;
- return scrollVariation > 0 ? rowHeight - scrollVariation : 0;
- }
-
- onHitBottomCanvas = () => {
- const { rowHeight } = this.props;
- const node = this.canvas;
- node.scrollTop += rowHeight + this.getClientScrollTopOffset(node);
- }
-
- onHitTopCanvas = () => {
- const { rowHeight } = this.props;
- const node = this.canvas;
- node.scrollTop -= (rowHeight - this.getClientScrollTopOffset(node));
- }
-
- scrollToColumn = (idx) => {
- const { scrollLeft, clientWidth } = this.canvas;
- const newScrollLeft = getColumnScrollPosition(this.props.columns, idx, scrollLeft, clientWidth);
-
- if (newScrollLeft != null) {
- this.canvas.scrollLeft = scrollLeft + newScrollLeft;
- }
- }
-
- onHitLeftCanvas = ({ idx }) => {
- this.scrollToColumn(idx);
- }
-
- onHitRightCanvas = ({ idx }) => {
- this.scrollToColumn(idx);
- }
-
- getRows = (displayStart, displayEnd) => {
- this._currentRowsRange = { start: displayStart, end: displayEnd };
- if (Array.isArray(this.props.rowGetter)) {
- return this.props.rowGetter.slice(displayStart, displayEnd);
- }
- let rows = [];
- let i = displayStart;
- while (i < displayEnd) {
- let row = this.props.rowGetter(i);
- let subRowDetails = {};
- if (this.props.getSubRowDetails) {
- subRowDetails = this.props.getSubRowDetails(row);
- }
- rows.push({ row, subRowDetails });
- i++;
- }
- return rows;
- };
-
- // getScrollbarWidth = () => {
- // // Get the scrollbar width
- // const scrollbarWidth = this.canvas.offsetWidth - this.canvas.clientWidth;
- // return scrollbarWidth;
- // };
-
- getScroll = () => {
- const { scrollTop, scrollLeft } = this.canvas;
- return { scrollTop, scrollLeft };
- };
-
- isRowSelected = (idx, row) => {
- // Use selectedRows if set
- if (this.props.selectedRows !== null) {
- let selectedRows = this.props.selectedRows.filter(r => {
- let rowKeyValue = row.get ? row.get(this.props.rowKey) : row[this.props.rowKey];
- return r[this.props.rowKey] === rowKeyValue;
- });
- return selectedRows.length > 0 && selectedRows[0].isSelected;
- }
-
- // Else use new rowSelection props
- if (this.props.rowSelection) {
- let { keys, indexes, isSelectedKey } = this.props.rowSelection;
- return rowUtils.isRowSelected(keys, indexes, isSelectedKey, row, idx);
- }
-
- return false;
- };
-
- setScrollLeft = (scrollLeft) => {
- if (this._currentRowsLength !== 0) {
- if (!this.rows) return;
- for (let i = 0, len = this._currentRowsLength; i < len; i++) {
- if (this.rows[i]) {
- let row = this.getRowByRef(i);
- if (row && row.setScrollLeft) {
- row.setScrollLeft(scrollLeft);
- }
- }
- }
- }
- };
-
- getRowByRef = (i) => {
- // check if wrapped with React DND drop target
- let wrappedRow = this.rows[i].getDecoratedComponentInstance ? this.rows[i].getDecoratedComponentInstance(i) : null;
- if (wrappedRow) {
- return wrappedRow.row;
- }
- return this.rows[i];
- };
-
- setCanvasRef = (canvas) => {
- // It is important to define ref callback as a bound method
- // https://reactjs.org/docs/refs-and-the-dom.html#caveats-with-callback-refs
- this.canvas = canvas;
- };
-
- renderRow = (props) => {
- let row = props.row;
- if (row.__metaData && row.__metaData.getRowRenderer) {
- return row.__metaData.getRowRenderer(this.props, props.idx);
- }
- if (row.__metaData && row.__metaData.isGroup) {
- return (
- {
- this.props.columns.map(
- (column, idx) =>
- )
- }
-
-
- );
- }
-}
-
-module.exports = Canvas;
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import Row from './Row';
+import cellMetaDataShape from './PropTypeShapes/CellMetaDataShape';
+import * as rowUtils from './RowUtils';
+import RowGroup, { DefaultRowGroupRenderer } from './RowGroup';
+import { InteractionMasks } from './masks';
+import { getColumnScrollPosition } from './utils/canvasUtils';
+import { EventTypes } from './constants';
+require('../../../themes/react-data-grid-core.css');
+
+class Canvas extends React.PureComponent {
+
+ static propTypes = {
+ rowRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+ rowHeight: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired,
+ width: PropTypes.number,
+ totalWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ style: PropTypes.string,
+ className: PropTypes.string,
+ rowOverscanStartIdx: PropTypes.number.isRequired,
+ rowOverscanEndIdx: PropTypes.number.isRequired,
+ rowVisibleStartIdx: PropTypes.number.isRequired,
+ rowVisibleEndIdx: PropTypes.number.isRequired,
+ colVisibleStartIdx: PropTypes.number.isRequired,
+ colVisibleEndIdx: PropTypes.number.isRequired,
+ colOverscanStartIdx: PropTypes.number.isRequired,
+ colOverscanEndIdx: PropTypes.number.isRequired,
+ rowsCount: PropTypes.number.isRequired,
+ rowGetter: PropTypes.oneOfType([
+ PropTypes.func.isRequired,
+ PropTypes.array.isRequired
+ ]),
+ expandedRows: PropTypes.array,
+ onRows: PropTypes.func,
+ onScroll: PropTypes.func,
+ columns: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
+ cellMetaData: PropTypes.shape(cellMetaDataShape).isRequired,
+ selectedRows: PropTypes.array,
+ rowKey: PropTypes.string,
+ rowScrollTimeout: PropTypes.number,
+ scrollToRowIndex: PropTypes.number,
+ contextMenu: PropTypes.element,
+ getSubRowDetails: PropTypes.func,
+ rowSelection: PropTypes.oneOfType([
+ PropTypes.shape({
+ indexes: PropTypes.arrayOf(PropTypes.number).isRequired
+ }),
+ PropTypes.shape({
+ isSelectedKey: PropTypes.string.isRequired
+ }),
+ PropTypes.shape({
+ keys: PropTypes.shape({
+ values: PropTypes.array.isRequired,
+ rowKey: PropTypes.string.isRequired
+ }).isRequired
+ })
+ ]),
+ rowGroupRenderer: PropTypes.func,
+ isScrolling: PropTypes.bool,
+ length: PropTypes.number,
+ enableCellSelect: PropTypes.bool.isRequired,
+ enableCellAutoFocus: PropTypes.bool.isRequired,
+ cellNavigationMode: PropTypes.string.isRequired,
+ eventBus: PropTypes.object.isRequired,
+ onCheckCellIsEditable: PropTypes.func,
+ onCellCopyPaste: PropTypes.func,
+ onGridRowsUpdated: PropTypes.func.isRequired,
+ onDragHandleDoubleClick: PropTypes.func.isRequired,
+ onCellSelected: PropTypes.func,
+ onCellDeSelected: PropTypes.func,
+ onCellRangeSelectionStarted: PropTypes.func,
+ onCellRangeSelectionUpdated: PropTypes.func,
+ onCellRangeSelectionCompleted: PropTypes.func,
+ onCommit: PropTypes.func.isRequired
+ };
+
+ static defaultProps = {
+ rowRenderer: Row,
+ onRows: () => { },
+ selectedRows: [],
+ rowScrollTimeout: 0,
+ scrollToRowIndex: 0,
+ RowsContainer: ({ children }) => children,
+ rowGroupRenderer: DefaultRowGroupRenderer
+ };
+
+ state = {
+ scrollingTimeout: null
+ };
+
+ rows = [];
+ _currentRowsRange = { start: 0, end: 0 };
+ _scroll = { scrollTop: 0, scrollLeft: 0 };
+
+ componentDidMount() {
+ this.unsubscribeScrollToColumn = this.props.eventBus.subscribe(EventTypes.SCROLL_TO_COLUMN, this.scrollToColumn);
+ this.onRows();
+ }
+
+ componentWillUnmount() {
+ this._currentRowsRange = { start: 0, end: 0 };
+ this._scroll = { scrollTop: 0, scrollLeft: 0 };
+ this.rows = [];
+ this.unsubscribeScrollToColumn();
+ }
+
+ componentDidUpdate(prevProps) {
+ const { scrollToRowIndex } = this.props;
+ if (prevProps.scrollToRowIndex !== scrollToRowIndex && scrollToRowIndex !== 0) {
+ this.scrollToRow(scrollToRowIndex);
+ }
+ this.onRows();
+ }
+
+ onRows = () => {
+ if (this._currentRowsRange !== { start: 0, end: 0 }) {
+ this.props.onRows(this._currentRowsRange);
+ this._currentRowsRange = { start: 0, end: 0 };
+ }
+ };
+
+ scrollToRow = (scrollToRowIndex) => {
+ const { rowHeight, rowsCount, height } = this.props;
+ this.canvas.scrollTop = Math.min(
+ scrollToRowIndex * rowHeight,
+ rowsCount * rowHeight - height
+ );
+ };
+
+ onFocusInteractionMask = (focus) => {
+ const { scrollTop, scrollLeft } = this._scroll;
+ focus();
+ if (this.canvas) {
+ this.canvas.scrollTop = scrollTop;
+ this.canvas.scrollLeft = scrollLeft;
+ }
+ };
+
+ onScroll = (e) => {
+ if (this.canvas !== e.target) {
+ return;
+ }
+ const { scrollLeft, scrollTop } = e.target;
+ const scroll = { scrollTop, scrollLeft };
+ this._scroll = scroll;
+ this.props.onScroll(scroll);
+ };
+
+ getClientScrollTopOffset= (node) => {
+ const { rowHeight } = this.props;
+ const scrollVariation = node.scrollTop % rowHeight;
+ return scrollVariation > 0 ? rowHeight - scrollVariation : 0;
+ }
+
+ onHitBottomCanvas = () => {
+ const { rowHeight } = this.props;
+ const node = this.canvas;
+ node.scrollTop += rowHeight + this.getClientScrollTopOffset(node);
+ }
+
+ onHitTopCanvas = () => {
+ const { rowHeight } = this.props;
+ const node = this.canvas;
+ node.scrollTop -= (rowHeight - this.getClientScrollTopOffset(node));
+ }
+
+ scrollToColumn = (idx) => {
+ const { scrollLeft, clientWidth } = this.canvas;
+ const newScrollLeft = getColumnScrollPosition(this.props.columns, idx, scrollLeft, clientWidth);
+
+ if (newScrollLeft != null) {
+ this.canvas.scrollLeft = scrollLeft + newScrollLeft;
+ }
+ }
+
+ onHitLeftCanvas = ({ idx }) => {
+ this.scrollToColumn(idx);
+ }
+
+ onHitRightCanvas = ({ idx }) => {
+ this.scrollToColumn(idx);
+ }
+
+ getRows = (rowOverscanStartIdx, rowOverscanEndIdx) => {
+ this._currentRowsRange = { start: rowOverscanStartIdx, end: rowOverscanEndIdx };
+ if (Array.isArray(this.props.rowGetter)) {
+ return this.props.rowGetter.slice(rowOverscanStartIdx, rowOverscanEndIdx);
+ }
+ let rows = [];
+ let i = rowOverscanStartIdx;
+ while (i < rowOverscanEndIdx) {
+ let row = this.props.rowGetter(i);
+ let subRowDetails = {};
+ if (this.props.getSubRowDetails) {
+ subRowDetails = this.props.getSubRowDetails(row);
+ }
+ rows.push({ row, subRowDetails });
+ i++;
+ }
+ return rows;
+ };
+
+ getScroll = () => {
+ const { scrollTop, scrollLeft } = this.canvas;
+ return { scrollTop, scrollLeft };
+ };
+
+ isRowSelected = (idx, row) => {
+ // Use selectedRows if set
+ if (this.props.selectedRows !== null) {
+ let selectedRows = this.props.selectedRows.filter(r => {
+ let rowKeyValue = row.get ? row.get(this.props.rowKey) : row[this.props.rowKey];
+ return r[this.props.rowKey] === rowKeyValue;
+ });
+ return selectedRows.length > 0 && selectedRows[0].isSelected;
+ }
+
+ // Else use new rowSelection props
+ if (this.props.rowSelection) {
+ let { keys, indexes, isSelectedKey } = this.props.rowSelection;
+ return rowUtils.isRowSelected(keys, indexes, isSelectedKey, row, idx);
+ }
+
+ return false;
+ };
+
+ setScrollLeft = (scrollLeft) => {
+ this.rows.forEach((r, idx) => {
+ if (r) {
+ let row = this.getRowByRef(idx);
+ if (row && row.setScrollLeft) {
+ row.setScrollLeft(scrollLeft);
+ }
+ }
+ });
+ };
+
+ getRowByRef = (i) => {
+ // check if wrapped with React DND drop target
+ let wrappedRow = this.rows[i] && this.rows[i].getDecoratedComponentInstance ? this.rows[i].getDecoratedComponentInstance(i) : null;
+ if (wrappedRow) {
+ return wrappedRow.row;
+ }
+ return this.rows[i];
+ };
+
+ getSelectedRowTop = (rowIdx) => {
+ const row = this.getRowByRef(rowIdx);
+ if (row) {
+ const node = ReactDOM.findDOMNode(row);
+ return node && node.offsetTop;
+ }
+ return this.props.rowHeight * rowIdx;
+ }
+
+ getSelectedRowHeight = (rowIdx) => {
+ const row = this.getRowByRef(rowIdx);
+ if (row) {
+ const node = ReactDOM.findDOMNode(row);
+ return node && node.clientHeight > 0 ? node.clientHeight : this.props.rowHeight;
+ }
+ return this.props.rowHeight;
+ }
+
+ setCanvasRef = (canvas) => {
+ // It is important to define ref callback as a bound method
+ // https://reactjs.org/docs/refs-and-the-dom.html#caveats-with-callback-refs
+ this.canvas = canvas;
+ };
+
+ setRowRef = idx => row => {
+ this.rows[idx] = row;
+ };
+
+ renderRow = (props) => {
+ let row = props.row;
+ if (row.__metaData && row.__metaData.getRowRenderer) {
+ return row.__metaData.getRowRenderer(this.props, props.idx);
+ }
+ if (row.__metaData && row.__metaData.isGroup) {
+ return (
+ {
+ this.props.columns.map(
+ (column, idx) =>
+ )
+ }
+
+
+ );
+ }
+}
+
+module.exports = Canvas;
diff --git a/packages/react-data-grid/src/Cell.js b/packages/react-data-grid/src/Cell.js
index ef512c0e44..ffc89c92bd 100644
--- a/packages/react-data-grid/src/Cell.js
+++ b/packages/react-data-grid/src/Cell.js
@@ -9,12 +9,13 @@ const createObjectWithProperties = require('./createObjectWithProperties');
import CellAction from './CellAction';
import CellExpand from './CellExpand';
import ChildRowDeleteButton from './ChildRowDeleteButton';
+import columnUtils from './ColumnUtils';
require('../../../themes/react-data-grid-cell.css');
// The list of the propTypes that we want to include in the Cell div
const knownDivPropertyKeys = ['height', 'value'];
-class Cell extends React.Component {
+class Cell extends React.PureComponent {
static propTypes = {
rowIdx: PropTypes.number.isRequired,
idx: PropTypes.number.isRequired,
@@ -35,11 +36,13 @@ class Cell extends React.Component {
forceUpdate: PropTypes.bool,
expandableOptions: PropTypes.object.isRequired,
tooltip: PropTypes.string,
+ isScrolling: PropTypes.bool,
isCellValueChanging: PropTypes.func,
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
- ])
+ ]),
+ scrollLeft: PropTypes.number.isRequired
};
static defaultProps = {
@@ -56,12 +59,16 @@ class Cell extends React.Component {
componentWillReceiveProps(nextProps) {
this.setState({
isCellValueChanging: this.props.isCellValueChanging(this.props.value, nextProps.value),
- isLockChanging: this.props.column.locked !== nextProps.column.locked
+ isLockChanging: columnUtils.isFrozen(this.props.column) !== columnUtils.isFrozen(nextProps.column)
});
}
+ componentDidMount() {
+ this.checkScroll();
+ }
+
componentDidUpdate() {
- if (this.state.isLockChanging && !this.props.column.locked) {
+ if (this.state.isLockChanging && !columnUtils.isFrozen(this.props.column)) {
this.removeScroll();
}
}
@@ -149,24 +156,28 @@ class Cell extends React.Component {
getFormatterDependencies = () => {
// convention based method to get corresponding Id or Name of any Name or Id property
if (typeof this.props.column.getRowMetaData === 'function') {
+ if (process.env.NODE_ENV === 'development') {
+ console.warn('getRowMetaData for formatters is deprecated and will be removed in a future version of ReactDataGrid. Instead access row prop of formatter');
+ }
return this.props.column.getRowMetaData(this.getRowData(), this.props.column);
}
};
getCellClass = () => {
+ const {idx, lastFrozenColumnIndex} = this.props;
let className = joinClasses(
this.props.column.cellClass,
'react-grid-Cell',
this.props.className,
- this.props.column.locked ? 'react-grid-Cell--locked' : null
+ columnUtils.isFrozen(this.props.column) ? 'react-grid-Cell--frozen' : null,
+ lastFrozenColumnIndex === idx ? 'rdg-last--frozen' : null
);
let extraClasses = joinClasses({
'row-selected': this.props.isRowSelected,
editing: this.isEditorEnabled(),
'cell-tooltip': this.props.tooltip ? true : false,
'rdg-child-cell': this.props.expandableOptions && this.props.expandableOptions.subRowDetails && this.props.expandableOptions.treeDepth > 0,
- 'last-column': this.props.column.isLastColumn,
- 'will-change': this.props.isSelected || this.props.wasPreviouslySelected
+ 'last-column': this.props.column.isLastColumn
});
return joinClasses(className, extraClasses);
};
@@ -181,15 +192,24 @@ class Cell extends React.Component {
return this.props.isEditorEnabled === true;
};
- setScrollLeft = (scrollLeft) => {
+ checkScroll() {
+ const {scrollLeft, column} = this.props;
const node = this.node;
+ if (columnUtils.isFrozen(column) && node && node.style.transform != null) {
+ this.setScrollLeft(scrollLeft);
+ }
+ }
+
+ setScrollLeft = (scrollLeft: number) => {
+ let node = this.node;
if (node) {
- const transform = `translate3d(${scrollLeft}px, 0px, 0px)`;
+ let transform = `translate3d(${scrollLeft}px, 0px, 0px)`;
node.style.webkitTransform = transform;
node.style.transform = transform;
}
};
+
removeScroll = () => {
const node = this.node;
if (node) {
@@ -272,14 +292,18 @@ class Cell extends React.Component {
return null;
}
+ setCellRef = (node) => {
+ this.node = node;
+ };
+
+
renderCellContent = (props) => {
let CellContent;
let Formatter = this.getFormatter();
if (React.isValidElement(Formatter)) {
- props.dependentValues = this.getFormatterDependencies();
- CellContent = React.cloneElement(Formatter, props);
+ CellContent = React.cloneElement(Formatter, {...props, dependentValues: this.getFormatterDependencies(), row: this.getRowData()});
} else if (isFunction(Formatter)) {
- CellContent = ;
} else {
CellContent = ;
- totalWidth: number;
- minColumnWidth: number;
+ columns: Array;
+ totalWidth: number;
+ minColumnWidth: number;
};
function setColumnWidths(columns, totalWidth) {
@@ -57,20 +57,15 @@ function setColumnOffsets(columns) {
});
}
-/**
- * Update column metrics calculation.
- *
- * @param {ColumnMetricsType} metrics
- */
-function recalculate(metrics: ColumnMetricsType): ColumnMetricsType {
- // compute width for columns which specify width
+const getTotalColumnWidth = columns => columns.reduce((acc, c) => acc + c.width, 0);
+
+
+function recalculate(metrics) {
+ // compute width for columns which specify width
let columns = setColumnWidths(metrics.columns, metrics.totalWidth);
- let unallocatedWidth = columns.filter(c => c.width).reduce((w, column) => {
- return w - column.width;
- }, metrics.totalWidth);
+ let unallocatedWidth = columns.filter(c => c.width).reduce((w, column) => w - column.width, metrics.totalWidth);
unallocatedWidth -= getScrollbarSize();
-
let width = columns.filter(c => c.width).reduce((w, column) => {
return w + column.width;
}, 0);
@@ -80,11 +75,17 @@ function recalculate(metrics: ColumnMetricsType): ColumnMetricsType {
// compute left offset
columns = setColumnOffsets(columns);
-
+ const frozenColumns = columns.filter(c => ColumnUtils.isFrozen(c));
+ const nonFrozenColumns = columns.filter(c => !ColumnUtils.isFrozen(c));
+ columns = frozenColumns.concat(nonFrozenColumns).map((c, i) => {
+ c.idx = i;
+ return c;
+ });
return {
columns,
width,
totalWidth: metrics.totalWidth,
+ totalColumnWidth: getTotalColumnWidth(columns),
minColumnWidth: metrics.minColumnWidth
};
}
@@ -117,8 +118,8 @@ function compareEachColumn(prevColumns: Array, nextColumns: Array {
- if (this._scrollLeft !== props.scrollLeft) {
- this._scrollLeft = props.scrollLeft;
+ areFrozenColumnsScrolledLeft(scrollLeft) {
+ return scrollLeft > 0 && this.props.columns.some(c => columnUtils.isFrozen(c));
+ }
+
+ onScroll = (scrollState) => {
+ this.props.onScroll(scrollState);
+ const {scrollLeft} = scrollState;
+ if (this._scrollLeft !== scrollLeft || this.areFrozenColumnsScrolledLeft(scrollLeft)) {
+ this._scrollLeft = scrollLeft;
this._onScroll();
}
};
- // TODO: why is this needed?
- // onHeaderScroll = (e) => {
- // let scrollLeft = e.target.scrollLeft;
- // if (this._scrollLeft !== scrollLeft) {
- // this._scrollLeft = scrollLeft;
- // this.header.setScrollLeft(scrollLeft);
- // let canvas = ReactDOM.findDOMNode(this.viewport.canvas);
- // canvas.scrollLeft = scrollLeft;
- // this.viewport.canvas.setScrollLeft(scrollLeft);
- // }
- // };
-
componentDidMount() {
this._scrollLeft = this.viewport ? this.viewport.getScroll().scrollLeft : 0;
this._onScroll();
@@ -166,6 +164,7 @@ class Grid extends React.Component {
onKeyUp={this.props.onViewportKeyup}
>
:
diff --git a/packages/react-data-grid/src/HeaderCell.js b/packages/react-data-grid/src/HeaderCell.js
index fe1c0bc54d..eeb2244af5 100644
--- a/packages/react-data-grid/src/HeaderCell.js
+++ b/packages/react-data-grid/src/HeaderCell.js
@@ -2,6 +2,7 @@ const React = require('react');
const ReactDOM = require('react-dom');
const joinClasses = require('classnames');
const ExcelColumn = require('./PropTypeShapes/ExcelColumn');
+import columnUtils from './ColumnUtils';
const ResizeHandle = require('./ResizeHandle');
require('../../../themes/react-data-grid-header.css');
@@ -56,15 +57,16 @@ class HeaderCell extends React.Component {
return right - left;
};
- getCell = (): ReactComponent => {
- if (React.isValidElement(this.props.renderer)) {
+ getCell = ()=> {
+ const {height, column, renderer} = this.props;
+ if (React.isValidElement(renderer)) {
// if it is a string, it's an HTML element, and column is not a valid property, so only pass height
if (typeof this.props.renderer.type === 'string') {
- return React.cloneElement(this.props.renderer, {height: this.props.height});
+ return React.cloneElement(renderer, {height});
}
- return React.cloneElement(this.props.renderer, {column: this.props.column, height: this.props.height});
+ return React.cloneElement(renderer, {column, height});
}
- return this.props.renderer({column: this.props.column});
+ return this.props.renderer({column});
};
getStyle = (): {width:number; left: number; display: string; position: string; overflow: string; height: number; margin: number; textOverflow: string; whiteSpace: string } => {
@@ -107,7 +109,7 @@ class HeaderCell extends React.Component {
let className = joinClasses({
'react-grid-HeaderCell': true,
'react-grid-HeaderCell--resizing': this.state.resizing,
- 'react-grid-HeaderCell--locked': this.props.column.locked
+ 'react-grid-HeaderCell--frozen': columnUtils.isFrozen(this.props.column)
});
className = joinClasses(className, this.props.className, this.props.column.cellClass);
let cell = this.getCell();
diff --git a/packages/react-data-grid/src/HeaderRow.js b/packages/react-data-grid/src/HeaderRow.js
index e9448ea1b8..e84f428d33 100644
--- a/packages/react-data-grid/src/HeaderRow.js
+++ b/packages/react-data-grid/src/HeaderRow.js
@@ -2,7 +2,6 @@ const React = require('react');
const shallowEqual = require('shallowequal');
const BaseHeaderCell = require('./HeaderCell');
const getScrollbarSize = require('./getScrollbarSize');
-const ExcelColumn = require('./PropTypeShapes/ExcelColumn');
const columnUtils = require('./ColumnUtils');
const SortableHeaderCell = require('./cells/headerCells/SortableHeaderCell');
const FilterableHeaderCell = require('./cells/headerCells/FilterableHeaderCell');
@@ -118,7 +117,7 @@ class HeaderRow extends React.Component {
getCells = (): Array
=> {
let cells = [];
- let lockedCells = [];
+ let frozenCells = [];
for (let i = 0, len = columnUtils.getSize(this.props.columns); i < len; i++) {
let column = Object.assign({ rowType: this.props.rowType }, columnUtils.getColumn(this.props.columns, i));
let _renderer = this.getHeaderRenderer(column);
@@ -139,19 +138,19 @@ class HeaderRow extends React.Component {
onHeaderDrop={this.props.onHeaderDrop}
/>
);
- if (column.locked) {
- lockedCells.push(cell);
+ if (columnUtils.isFrozen(column)) {
+ frozenCells.push(cell);
} else {
cells.push(cell);
}
}
- return cells.concat(lockedCells);
+ return cells.concat(frozenCells);
};
setScrollLeft = (scrollLeft: number) => {
this.props.columns.forEach( (column, i) => {
- if (column.locked) {
+ if (columnUtils.isFrozen(column)) {
this.cells[i].setScrollLeft(scrollLeft);
} else {
if (this.cells[i] && this.cells[i].removeScroll) {
diff --git a/packages/react-data-grid/src/ReactDataGrid.js b/packages/react-data-grid/src/ReactDataGrid.js
index e57eb598a2..60b896b956 100644
--- a/packages/react-data-grid/src/ReactDataGrid.js
+++ b/packages/react-data-grid/src/ReactDataGrid.js
@@ -1,5 +1,6 @@
const React = require('react');
import PropTypes from 'prop-types';
+import {deprecate} from 'react-is-deprecated';
const BaseGrid = require('./Grid');
const CheckboxEditor = require('./editors/CheckboxEditor');
const RowUtils = require('./RowUtils');
@@ -20,6 +21,8 @@ if (!Object.assign) {
Object.assign = require('object-assign');
}
+const deprecationWarning = (propName, alternative) => `${propName} has been deprecated and will be removed in a future version. Please use ${alternative} instead`;
+
class ReactDataGrid extends React.Component {
static displayName = 'ReactDataGrid';
@@ -29,26 +32,26 @@ class ReactDataGrid extends React.Component {
headerFiltersHeight: PropTypes.number,
minHeight: PropTypes.number.isRequired,
minWidth: PropTypes.number,
- enableRowSelect: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
- onRowUpdated: PropTypes.func,
+ enableRowSelect: deprecate(PropTypes.func, deprecationWarning('enableRowSelect', 'rowSelection')),
+ onRowUpdated: deprecate(PropTypes.func, deprecationWarning('onRowUpdated', 'onGridRowsUpdated')),
rowGetter: PropTypes.func.isRequired,
rowsCount: PropTypes.number.isRequired,
toolbar: PropTypes.element,
enableCellSelect: PropTypes.bool,
columns: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
onFilter: PropTypes.func,
- onCellCopyPaste: PropTypes.func,
- onCellsDragged: PropTypes.func,
+ onCellCopyPaste: deprecate(PropTypes.func, deprecationWarning('onCellCopyPaste', 'onGridRowsUpdated')),
+ onCellsDragged: deprecate(PropTypes.func, deprecationWarning('onCellsDragged', 'onGridRowsUpdated')),
getCellActions: PropTypes.func,
onAddFilter: PropTypes.func,
onGridSort: PropTypes.func,
sortColumn: PropTypes.string,
sortDirection: PropTypes.oneOf(Object.keys(DEFINE_SORT)),
- onDragHandleDoubleClick: PropTypes.func,
+ onDragHandleDoubleClick: deprecate(PropTypes.func, deprecationWarning('onDragHandleDoubleClick', 'onGridRowsUpdated')),
onGridRowsUpdated: PropTypes.func,
onRowSelect: PropTypes.func,
rowKey: PropTypes.string,
- rowScrollTimeout: PropTypes.number,
+ rowScrollTimeout: deprecate(PropTypes.number),
scrollToRowIndex: PropTypes.number,
onClearFilters: PropTypes.func,
contextMenu: PropTypes.element,
@@ -101,7 +104,8 @@ class ReactDataGrid extends React.Component {
selectAllRenderer: PropTypes.object,
minColumnWidth: PropTypes.number,
columnEquality: PropTypes.func,
- onColumnResize: PropTypes.func
+ onColumnResize: PropTypes.func,
+ onScroll: PropTypes.func
};
static defaultProps = {
@@ -115,10 +119,10 @@ class ReactDataGrid extends React.Component {
scrollToRowIndex: 0,
cellNavigationMode: CellNavigationMode.NONE,
overScan: {
- colsStart: 5,
- colsEnd: 5,
- rowsStart: 5,
- rowsEnd: 5
+ colsStart: 2,
+ colsEnd: 2,
+ rowsStart: 2,
+ rowsEnd: 2
},
enableCellAutoFocus: true,
onBeforeEdit: () => {},
@@ -142,7 +146,9 @@ class ReactDataGrid extends React.Component {
componentDidMount() {
this._mounted = true;
window.addEventListener('resize', this.metricsUpdated);
- window.addEventListener('mouseup', this.onWindowMouseUp);
+ if (this.props.cellRangeSelection) {
+ window.addEventListener('mouseup', this.onWindowMouseUp);
+ }
this.metricsUpdated();
}
@@ -353,6 +359,11 @@ class ReactDataGrid extends React.Component {
onGridRowsUpdated = (cellKey, fromRow, toRow, updated, action, originRow) => {
const { rowGetter, rowKey, onGridRowsUpdated } = this.props;
+ // Deprecated prop
+ // to be removed in next major release
+ if (isFunction(this.props.onRowUpdated)) {
+ this.props.onRowUpdated({updated, rowIdx: fromRow, cellKey, value: updated[cellKey]});
+ }
if (!isFunction(onGridRowsUpdated)) {
return;
}
@@ -373,6 +384,12 @@ class ReactDataGrid extends React.Component {
this.onGridRowsUpdated(commit.cellKey, targetRow, targetRow, commit.updated, AppConstants.UpdateActions.CELL_UPDATE);
};
+ onScroll = (scrollState) => {
+ if (isFunction(this.props.onScroll)) {
+ this.props.onScroll(scrollState);
+ }
+ }
+
handleSort = (columnKey, direction) => {
this.setState({sortDirection: direction, sortColumn: columnKey}, () => {
this.props.onGridSort(columnKey, direction);
@@ -614,7 +631,7 @@ class ReactDataGrid extends React.Component {
filterable: false,
headerRenderer: headerRenderer,
width: 60,
- locked: true,
+ frozen: true,
getRowMetaData: (rowData) => rowData,
cellClass: this.props.rowActionsCell ? 'rdg-row-actions-cell' : ''
};
@@ -644,8 +661,6 @@ class ReactDataGrid extends React.Component {
const cellMetaData = {
rowKey: this.props.rowKey,
onCellClick: this.onCellClick,
- onCellMouseDown: this.onCellMouseDown,
- onCellMouseEnter: this.onCellMouseEnter,
onCellContextMenu: this.onCellContextMenu,
onCellDoubleClick: this.onCellDoubleClick,
onColumnEvent: this.onColumnEvent,
@@ -656,6 +671,10 @@ class ReactDataGrid extends React.Component {
onAddSubRow: this.props.onAddSubRow,
onDragEnter: this.handleDragEnter
};
+ if (this.props.cellRangeSelection) {
+ cellMetaData.onCellMouseDown = this.onCellMouseDown;
+ cellMetaData.onCellMouseEnter = this.onCellMouseEnter;
+ }
const toolbar = this.renderToolbar();
let containerWidth = this.props.minWidth || this.gridWidth();
@@ -715,6 +734,7 @@ class ReactDataGrid extends React.Component {
onCellRangeSelectionUpdated={this.props.cellRangeSelection && this.props.cellRangeSelection.onUpdate}
onCellRangeSelectionCompleted={this.props.cellRangeSelection && this.props.cellRangeSelection.onComplete}
onCommit={this.onCommit}
+ onScroll={this.onScroll}
/>
+ >
{
React.isValidElement(this.props.row) ?
this.props.row : cells
diff --git a/packages/react-data-grid/src/RowComparer.js b/packages/react-data-grid/src/RowComparer.js
index 5abc0bfb94..af12b2234b 100644
--- a/packages/react-data-grid/src/RowComparer.js
+++ b/packages/react-data-grid/src/RowComparer.js
@@ -1,35 +1,14 @@
import ColumnMetrics from './ColumnMetrics';
-function doesRowContainSelectedCell(props) {
- let selected = props.cellMetaData.selected;
- if (selected && selected.rowIdx === props.idx) {
- return true;
- }
- return false;
-}
-
-function willRowBeDraggedOver(props) {
- let dragged = props.cellMetaData.dragged;
- return dragged != null && (dragged.rowIdx >= 0 || dragged.complete === true);
-}
-
-function hasRowBeenCopied(props) {
- let copied = props.cellMetaData.copied;
- return copied != null && copied.rowIdx === props.idx;
-}
-
export const shouldRowUpdate = (nextProps, currentProps) => {
return !(ColumnMetrics.sameColumns(currentProps.columns, nextProps.columns, ColumnMetrics.sameColumn)) ||
- doesRowContainSelectedCell(currentProps) ||
- doesRowContainSelectedCell(nextProps) ||
- willRowBeDraggedOver(nextProps) ||
nextProps.row !== currentProps.row ||
- currentProps.colDisplayStart !== nextProps.colDisplayStart ||
- currentProps.colDisplayEnd !== nextProps.colDisplayEnd ||
- currentProps.colVisibleStart !== nextProps.colVisibleStart ||
- currentProps.colVisibleEnd !== nextProps.colVisibleEnd ||
- hasRowBeenCopied(currentProps) ||
+ currentProps.colOverscanStartIdx !== nextProps.colOverscanStartIdx ||
+ currentProps.colOverscanEndIdx !== nextProps.colOverscanEndIdx ||
+ currentProps.colVisibleStartIdx !== nextProps.colVisibleStartIdx ||
+ currentProps.colVisibleEndIdx !== nextProps.colVisibleEndIdx ||
currentProps.isSelected !== nextProps.isSelected ||
+ currentProps.isScrolling !== nextProps.isScrolling ||
nextProps.height !== currentProps.height ||
currentProps.isOver !== nextProps.isOver ||
currentProps.expandedRows !== nextProps.expandedRows ||
diff --git a/packages/react-data-grid/src/RowGroup.js b/packages/react-data-grid/src/RowGroup.js
index 563c15e8db..fab9039b01 100644
--- a/packages/react-data-grid/src/RowGroup.js
+++ b/packages/react-data-grid/src/RowGroup.js
@@ -44,7 +44,7 @@ class RowGroup extends Component {
return (
- {this.rowGroupRenderer = node; }} {...this.props} onRowExpandClick={this.onRowExpandClick} onRowExpandToggle={this.onRowExpandToggle}/>
+ {this.rowGroupRenderer = node; }} {...this.props} onRowExpandClick={this.onRowExpandClick} onRowExpandToggle={this.onRowExpandToggle}/>
);
}
@@ -63,10 +63,10 @@ RowGroup.propTypes = {
forceUpdate: PropTypes.bool,
subRowDetails: PropTypes.object,
isRowHovered: PropTypes.bool,
- colVisibleStart: PropTypes.number.isRequired,
- colVisibleEnd: PropTypes.number.isRequired,
- colDisplayStart: PropTypes.number.isRequired,
- colDisplayEnd: PropTypes.number.isRequired,
+ colVisibleStartIdx: PropTypes.number.isRequired,
+ colVisibleEndIdx: PropTypes.number.isRequired,
+ colOverscanStartIdx: PropTypes.number.isRequired,
+ colOverscanEndIdx: PropTypes.number.isRequired,
isScrolling: PropTypes.bool.isRequired,
columnGroupName: PropTypes.string.isRequired,
isExpanded: PropTypes.bool.isRequired,
@@ -81,7 +81,7 @@ const DefaultRowGroupRenderer = (props) => {
let marginLeft = treeDepth * 20;
let style = {
- height: '50px',
+ height: '100px',
border: '1px solid #dddddd',
paddingTop: '15px',
paddingLeft: '5px'
diff --git a/packages/react-data-grid/src/RowsContainer.js b/packages/react-data-grid/src/RowsContainer.js
deleted file mode 100644
index 0d0c8c86a3..0000000000
--- a/packages/react-data-grid/src/RowsContainer.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, { isValidElement } from 'react';
-import PropTypes from 'prop-types';
-
-export const DEFAULT_CONTEXT_MENU_ID = 'rgdContextMenu';
-
-class RowsContainer extends React.Component {
- static propTypes = {
- contextMenu: PropTypes.element,
- window: PropTypes.object,
- rows: PropTypes.array
- };
-
- plugins = this.props.window ? this.props.window.ReactDataGridPlugins : window.ReactDataGridPlugins
-
- validatePlugin() {
- if (!this.plugins) {
- throw new Error('You need to include ReactDataGrid UiPlugins in order to initialise context menu');
- }
- }
-
- render() {
- const { contextMenu, rows } = this.props;
- if (isValidElement(contextMenu)) {
- this.validatePlugin();
- const { ContextMenuTrigger } = this.plugins.Menu;
- return (
-
- );
- }
-
- return
{rows}
;
- }
-}
-
-export default RowsContainer;
diff --git a/packages/react-data-grid/src/Viewport.js b/packages/react-data-grid/src/Viewport.js
index 4eab26e86c..4f88d05f23 100644
--- a/packages/react-data-grid/src/Viewport.js
+++ b/packages/react-data-grid/src/Viewport.js
@@ -1,11 +1,19 @@
-const React = require('react');
-const Canvas = require('./Canvas');
-const cellMetaDataShape = require('./PropTypeShapes/CellMetaDataShape');
+const React = require('react');
+const Canvas = require('./Canvas');
+const cellMetaDataShape = require('./PropTypeShapes/CellMetaDataShape');
import PropTypes from 'prop-types';
-import * as columnUtils from './ColumnUtils';
+import columnUtils from './ColumnUtils';
import {
getGridState,
- getNextScrollState
+ getColOverscanEndIdx,
+ getVisibleBoundaries,
+ getScrollDirection,
+ getRowOverscanStartIdx,
+ getRowOverscanEndIdx,
+ getColOverscanStartIdx,
+ getNonFrozenVisibleColStartIdx,
+ getNonFrozenRenderedColumnCount,
+ findLastFrozenColumnIndex
} from './utils/viewportUtils';
class Viewport extends React.Component {
@@ -58,7 +66,8 @@ class Viewport extends React.Component {
onCellRangeSelectionStarted: PropTypes.func,
onCellRangeSelectionUpdated: PropTypes.func,
onCellRangeSelectionCompleted: PropTypes.func,
- onCommit: PropTypes.func.isRequired
+ onCommit: PropTypes.func.isRequired,
+ RowsContainer: PropTypes.node
};
static defaultProps = {
@@ -67,17 +76,18 @@ class Viewport extends React.Component {
state = getGridState(this.props);
- onScroll = (scroll) => {
- this.updateScroll(
- scroll.scrollTop,
- scroll.scrollLeft,
- this.state.height,
- this.props.rowHeight,
- this.props.rowsCount
- );
+ onScroll = ({ scrollTop, scrollLeft }) => {
+ const { rowHeight, rowsCount, onScroll } = this.props;
+ const nextScrollState = this.updateScroll({
+ scrollTop,
+ scrollLeft,
+ height: this.state.height,
+ rowHeight,
+ rowsCount
+ });
- if (this.props.onScroll) {
- this.props.onScroll({scrollTop: scroll.scrollTop, scrollLeft: scroll.scrollLeft});
+ if (onScroll) {
+ onScroll(nextScrollState);
}
};
@@ -99,6 +109,38 @@ class Viewport extends React.Component {
}
};
+ getNextScrollState({ scrollTop, scrollLeft, height, rowHeight, rowsCount}) {
+ const isScrolling = true;
+ const { columns } = this.props.columnMetrics;
+ const scrollDirection = getScrollDirection(this.state, scrollTop, scrollLeft);
+ const { rowVisibleStartIdx, rowVisibleEndIdx } = getVisibleBoundaries(height, rowHeight, scrollTop, rowsCount);
+ const rowOverscanStartIdx = getRowOverscanStartIdx(scrollDirection, rowVisibleStartIdx);
+ const rowOverscanEndIdx = getRowOverscanEndIdx(scrollDirection, rowVisibleEndIdx, rowsCount);
+ const totalNumberColumns = columnUtils.getSize(columns);
+ const lastFrozenColumnIndex = findLastFrozenColumnIndex(columns);
+ const nonFrozenColVisibleStartIdx = getNonFrozenVisibleColStartIdx(columns, scrollLeft);
+ const nonFrozenRenderedColumnCount = getNonFrozenRenderedColumnCount(this.props.columnMetrics, this.getDOMNodeOffsetWidth(), scrollLeft);
+ const colVisibleEndIdx = Math.min(nonFrozenColVisibleStartIdx + nonFrozenRenderedColumnCount, totalNumberColumns);
+ const colOverscanStartIdx = getColOverscanStartIdx(scrollDirection, nonFrozenColVisibleStartIdx, lastFrozenColumnIndex);
+ const colOverscanEndIdx = getColOverscanEndIdx(scrollDirection, colVisibleEndIdx, totalNumberColumns);
+ return {
+ height,
+ scrollTop,
+ scrollLeft,
+ rowVisibleStartIdx,
+ rowVisibleEndIdx,
+ rowOverscanStartIdx,
+ rowOverscanEndIdx,
+ colVisibleStartIdx: nonFrozenColVisibleStartIdx,
+ colVisibleEndIdx,
+ colOverscanStartIdx,
+ colOverscanEndIdx,
+ scrollDirection,
+ lastFrozenColumnIndex,
+ isScrolling
+ };
+ }
+
resetScrollStateAfterDelay = () => {
this.clearScrollTimer();
this.resetScrollStateTimeoutId = setTimeout(
@@ -114,32 +156,27 @@ class Viewport extends React.Component {
});
};
- updateScroll = (
- scrollTop,
- scrollLeft,
- height,
- rowHeight,
- length,
- width,
- ) => {
+ updateScroll = (scrollParams) => {
this.resetScrollStateAfterDelay();
- const nextScrollState = getNextScrollState(this.props, this.getDOMNodeOffsetWidth, scrollTop, scrollLeft, height, rowHeight, length, width);
-
+ const nextScrollState = this.getNextScrollState(scrollParams);
this.setState(nextScrollState);
+ return nextScrollState;
};
metricsUpdated = () => {
let height = this.viewportHeight();
let width = this.viewportWidth();
if (height) {
- this.updateScroll(
- this.state.scrollTop,
- this.state.scrollLeft,
+ const { scrollTop, scrollLeft } = this.state;
+ const { rowHeight, rowsCount } = this.props;
+ this.updateScroll({
+ scrollTop,
+ scrollLeft,
height,
- this.props.rowHeight,
- this.props.rowsCount,
+ rowHeight,
+ rowsCount,
width
- );
+ });
}
};
@@ -152,38 +189,40 @@ class Viewport extends React.Component {
};
componentWillReceiveProps(nextProps) {
+ const { rowHeight, rowsCount } = nextProps;
if (this.props.rowHeight !== nextProps.rowHeight ||
this.props.minHeight !== nextProps.minHeight) {
- const newState = getGridState(nextProps);
- this.updateScroll(
- newState.scrollTop,
- newState.scrollLeft,
- newState.height,
- nextProps.rowHeight,
- nextProps.rowsCount
- );
+ const { scrollTop, scrollLeft, height } = getGridState(nextProps);
+ this.updateScroll({
+ scrollTop,
+ scrollLeft,
+ height,
+ rowHeight,
+ rowsCount
+ });
} else if (columnUtils.getSize(this.props.columnMetrics.columns) !== columnUtils.getSize(nextProps.columnMetrics.columns)) {
this.setState(getGridState(nextProps));
} else if (this.props.rowsCount !== nextProps.rowsCount) {
- this.updateScroll(
- this.state.scrollTop,
- this.state.scrollLeft,
- this.state.height,
- nextProps.rowHeight,
- nextProps.rowsCount
- );
+ const { scrollTop, scrollLeft, height } = this.state;
+ this.updateScroll({
+ scrollTop,
+ scrollLeft,
+ height,
+ rowHeight,
+ rowsCount
+ });
// Added to fix the hiding of the bottom scrollbar when showing the filters.
} else if (this.props.rowOffsetHeight !== nextProps.rowOffsetHeight) {
+ const { scrollTop, scrollLeft } = this.state;
// The value of height can be positive or negative and will be added to the current height to cater for changes in the header height (due to the filer)
- let height = this.props.rowOffsetHeight - nextProps.rowOffsetHeight;
-
- this.updateScroll(
- this.state.scrollTop,
- this.state.scrollLeft,
- this.state.height + height,
- nextProps.rowHeight,
- nextProps.rowsCount
- );
+ const height = this.state.height + this.props.rowOffsetHeight - nextProps.rowOffsetHeight;
+ this.updateScroll({
+ scrollTop,
+ scrollLeft,
+ height,
+ rowHeight,
+ rowsCount
+ });
}
}
@@ -225,20 +264,22 @@ class Viewport extends React.Component {
rowKey={this.props.rowKey}
totalWidth={this.props.totalWidth}
width={this.props.columnMetrics.width}
+ totalColumnWidth={this.props.columnMetrics.totalColumnWidth}
rowGetter={this.props.rowGetter}
rowsCount={this.props.rowsCount}
selectedRows={this.props.selectedRows}
expandedRows={this.props.expandedRows}
columns={this.props.columnMetrics.columns}
rowRenderer={this.props.rowRenderer}
- displayStart={this.state.displayStart}
- displayEnd={this.state.displayEnd}
- visibleStart={this.state.visibleStart}
- visibleEnd={this.state.visibleEnd}
- colVisibleStart={this.state.colVisibleStart}
- colVisibleEnd={this.state.colVisibleEnd}
- colDisplayStart={this.state.colDisplayStart}
- colDisplayEnd={this.state.colDisplayEnd}
+ rowOverscanStartIdx={this.state.rowOverscanStartIdx}
+ rowOverscanEndIdx={this.state.rowOverscanEndIdx}
+ rowVisibleStartIdx={this.state.rowVisibleStartIdx}
+ rowVisibleEndIdx={this.state.rowVisibleEndIdx}
+ colVisibleStartIdx={this.state.colVisibleStartIdx}
+ colVisibleEndIdx={this.state.colVisibleEndIdx}
+ colOverscanStartIdx={this.state.colOverscanStartIdx}
+ colOverscanEndIdx={this.state.colOverscanEndIdx}
+ lastFrozenColumnIndex={this.state.lastFrozenColumnIndex}
cellMetaData={this.props.cellMetaData}
height={this.state.height}
rowHeight={this.props.rowHeight}
@@ -265,6 +306,7 @@ class Viewport extends React.Component {
onCellRangeSelectionUpdated={this.props.onCellRangeSelectionUpdated}
onCellRangeSelectionCompleted={this.props.onCellRangeSelectionCompleted}
onCommit={this.props.onCommit}
+ RowsContainer={this.props.RowsContainer}
/>
);
};
let rowGetter = () => { return {id: 0, __metaData: {getRowRenderer: EmptyChildRow}}; };
- let props = { displayStart: 0, displayEnd: 1, columns: COLUMNS, rowGetter, rowsCount: 1, getSubRowDetails: getFakeSubRowDetails(1)};
+ let props = { rowOverscanStartIdx: 0, rowOverscanEndIdx: 1, columns: COLUMNS, rowGetter, rowsCount: 1, getSubRowDetails: getFakeSubRowDetails(1)};
wrapper = renderComponent(props);
- const rows = wrapper.find(RowsContainer).props().rows;
+ const rows = getRows(wrapper);
expect(rows[0].props.className).toBe('test-row-renderer');
});
});
diff --git a/packages/react-data-grid/src/__tests__/ColumnMetrics.spec.js b/packages/react-data-grid/src/__tests__/ColumnMetrics.spec.js
index 4d7b1dd938..8ab398140e 100644
--- a/packages/react-data-grid/src/__tests__/ColumnMetrics.spec.js
+++ b/packages/react-data-grid/src/__tests__/ColumnMetrics.spec.js
@@ -1,9 +1,7 @@
import getScrollbarSize from '../getScrollbarSize';
-import GridPropHelpers from '../helpers/test/GridPropHelpers';
const rewire = require('rewire');
const ColumnMetrics = rewire('../ColumnMetrics');
const Immutable = window.Immutable = require('immutable');
-Object.assign = require('object-assign');
const getAvailableWidthPerColumn = (totalWidth, consumedWidth, numberOfcolumns) => {
let availableWidth = totalWidth - getScrollbarSize() - consumedWidth;
@@ -14,9 +12,9 @@ const getAvailableWidthPerColumn = (totalWidth, consumedWidth, numberOfcolumns)
describe('Column Metrics Tests', () => {
describe('Creating metrics', () => {
- describe('When column width not set for all columns', () =>{
+ describe('When column width not set for all columns', () => {
const totalWidth = 300;
- let columns = [{
+ const getInitialColumns = () => [{
key: 'id',
name: 'ID',
width: 60
@@ -29,8 +27,9 @@ describe('Column Metrics Tests', () => {
}];
it('should set the unset column widths based on the total width', () => {
- let metrics = ColumnMetrics.recalculate({ columns, totalWidth, minColumnWidth: 50 });
- let expectedCalculatedWidth = getAvailableWidthPerColumn(totalWidth, columns[0].width, 2);
+ const columns = getInitialColumns();
+ const metrics = ColumnMetrics.recalculate({ columns, totalWidth, minColumnWidth: 50 });
+ const expectedCalculatedWidth = getAvailableWidthPerColumn(totalWidth, columns[0].width, 2);
expect(metrics.columns[0].width).toEqual(60);
expect(metrics.columns[1].width).toEqual(expectedCalculatedWidth);
@@ -38,20 +37,34 @@ describe('Column Metrics Tests', () => {
});
it('should set the column left based on the column widths', () => {
- let metrics = ColumnMetrics.recalculate({ columns, totalWidth, minColumnWidth: 50 });
- let expectedLeftValue = columns[0].width + getAvailableWidthPerColumn(totalWidth, columns[0].width, 2);
+ const columns = getInitialColumns();
+ const metrics = ColumnMetrics.recalculate({ columns, totalWidth, minColumnWidth: 50 });
+ const expectedLeftValue = columns[0].width + getAvailableWidthPerColumn(totalWidth, columns[0].width, 2);
expect(metrics.columns[0].left).toEqual(0);
expect(metrics.columns[1].left).toEqual(columns[0].width);
expect(metrics.columns[2].left).toEqual(expectedLeftValue);
});
+ it('should shift all frozen columns to the start of column metrics array', () => {
+ const firstFrozenColumn = {key: 'frozenColumn1', name: 'frozenColumn1', frozen: true};
+ const secondFrozenColumn = {key: 'frozenColumn2', name: 'frozenColumn2', frozen: true};
+ const thirdFrozenColumn = {key: 'frozenColumn3', name: 'frozenColumn3', frozen: true};
+ const columns = [...getInitialColumns(), secondFrozenColumn, thirdFrozenColumn];
+ columns.splice(2, 0, firstFrozenColumn);
+ const metrics = ColumnMetrics.recalculate({ columns, totalWidth, minColumnWidth: 50 });
+ expect(metrics.columns[0]).toEqual(jasmine.objectContaining(firstFrozenColumn));
+ expect(metrics.columns[1]).toEqual(jasmine.objectContaining(secondFrozenColumn));
+ expect(metrics.columns[2]).toEqual(jasmine.objectContaining(thirdFrozenColumn));
+ });
+
describe('When column data is immutable js object', () => {
- let immutableColumns = new Immutable.List(columns);
+ const immutableColumns = new Immutable.List(getInitialColumns());
it('should set the unset column widths based on the total width', () => {
- let metrics = ColumnMetrics.recalculate({ columns: immutableColumns, totalWidth: 300, minColumnWidth: 50 });
- let expectedCalculatedWidth = getAvailableWidthPerColumn(totalWidth, columns[0].width, 2);
+ const columns = getInitialColumns();
+ const metrics = ColumnMetrics.recalculate({ columns: immutableColumns, totalWidth: 300, minColumnWidth: 50 });
+ const expectedCalculatedWidth = getAvailableWidthPerColumn(totalWidth, columns[0].width, 2);
expect(metrics.columns.get(0).width).toEqual(60);
expect(metrics.columns.get(1).width).toEqual(expectedCalculatedWidth);
@@ -59,8 +72,9 @@ describe('Column Metrics Tests', () => {
});
it('should set the column left based on the column widths', () => {
- let metrics = ColumnMetrics.recalculate({ columns: immutableColumns, totalWidth: 300, minColumnWidth: 50 });
- let expectedLeftValue = columns[0].width + getAvailableWidthPerColumn(totalWidth, columns[0].width, 2);
+ const columns = getInitialColumns();
+ const metrics = ColumnMetrics.recalculate({ columns: immutableColumns, totalWidth: 300, minColumnWidth: 50 });
+ const expectedLeftValue = columns[0].width + getAvailableWidthPerColumn(totalWidth, columns[0].width, 2);
expect(metrics.columns.get(0).left).toEqual(0);
expect(metrics.columns.get(1).left).toEqual(columns[0].width);
@@ -69,77 +83,4 @@ describe('Column Metrics Tests', () => {
});
});
});
-
- describe('Comparing Columns', () => {
- describe('Using array of object literals', () => {
- let prevColumns;
- let nextColumns;
- beforeEach(() => {
- prevColumns = GridPropHelpers.columns;
- nextColumns = GridPropHelpers.columns.map(c => {
- return Object.assign({}, c);
- });
- });
-
- it('columns with same properties should be equal', () => {
- let areColumnsEqual = ColumnMetrics.sameColumns(prevColumns, nextColumns, ColumnMetrics.sameColumn);
- expect(areColumnsEqual).toBeTruthy();
- });
-
- it('changing a single property in one column will make columns unequal', () => {
- nextColumns[0].width = 101;
- let areColumnsEqual = ColumnMetrics.sameColumns(prevColumns, nextColumns, ColumnMetrics.sameColumn);
- expect(areColumnsEqual).toBeFalsy();
- });
-
- it('should call compareEachColumn when comparing columns', () => {
- let compareEachColumnSpy = jasmine.createSpy();
- ColumnMetrics.__set__('compareEachColumn', compareEachColumnSpy);
- ColumnMetrics.sameColumns(prevColumns, nextColumns, ColumnMetrics.sameColumn);
- expect(compareEachColumnSpy).toHaveBeenCalled();
- expect(compareEachColumnSpy.calls.count()).toEqual(1);
- });
- });
-
- describe('Using ImmutableJs Lists', () => {
- let prevColumns;
- let nextColumns;
-
- beforeEach(() => {
- prevColumns = new Immutable.List(GridPropHelpers.columns);
- nextColumns = prevColumns;
- });
-
- it('columns with same memory reference are equal', () => {
- let areColumnsEqual = ColumnMetrics.sameColumns(prevColumns, nextColumns, ColumnMetrics.sameColumn);
- expect(areColumnsEqual).toBeTruthy();
- });
-
- it('columns with same properties are not equal when objects have different memory reference', () => {
- let firstColWidth = prevColumns.get(0).width;
-
- nextColumns = nextColumns.update(0, (c) => {
- c.width = firstColWidth;
- });
- let areColumnsEqual = ColumnMetrics.sameColumns(prevColumns, nextColumns, ColumnMetrics.sameColumn);
- expect(areColumnsEqual).toBeFalsy();
- });
-
- it('changing a single property in one column will make columns unequal', () => {
- nextColumns = nextColumns.update(0, (c) => {
- c.width = 101;
- });
- let areColumnsEqual = ColumnMetrics.sameColumns(prevColumns, nextColumns, ColumnMetrics.sameColumn);
- expect(areColumnsEqual).toBeFalsy();
- });
-
- it('should not call compareEachColumn when comparing columns', () => {
- let compareEachColumnSpy = jasmine.createSpy();
- ColumnMetrics.__set__('compareEachColumn', compareEachColumnSpy);
- ColumnMetrics.sameColumns(prevColumns, nextColumns, ColumnMetrics.sameColumn);
- expect(compareEachColumnSpy).not.toHaveBeenCalled();
- expect(compareEachColumnSpy.calls.count()).toEqual(0);
- });
- });
- });
});
diff --git a/packages/react-data-grid/src/__tests__/Grid.spec.js b/packages/react-data-grid/src/__tests__/Grid.spec.js
index 078ef1cf9a..94d46619bd 100644
--- a/packages/react-data-grid/src/__tests__/Grid.spec.js
+++ b/packages/react-data-grid/src/__tests__/Grid.spec.js
@@ -3,7 +3,7 @@ const ReactDOM = require('react-dom');
const rewire = require('rewire');
const Grid = rewire('../Grid');
const TestUtils = require('react-dom/test-utils');
-const helpers = require('../helpers/test/GridPropHelpers');
+import helpers from '../helpers/test/GridPropHelpers';
const rewireModule = require('../../../../test/rewireModule');
import { shallow } from 'enzyme';
import { ContextMenu } from 'react-contextmenu';
diff --git a/packages/react-data-grid/src/__tests__/Header.spec.js b/packages/react-data-grid/src/__tests__/Header.spec.js
index cef9960bc0..246faa845e 100644
--- a/packages/react-data-grid/src/__tests__/Header.spec.js
+++ b/packages/react-data-grid/src/__tests__/Header.spec.js
@@ -4,7 +4,7 @@ const Header = rewire('../Header');
const TestUtils = require('react-dom/test-utils');
const rewireModule = require('../../../../test/rewireModule');
const StubComponent = require('../../../../test/StubComponent');
-const helpers = require('../helpers/test/GridPropHelpers');
+import helpers from '../helpers/test/GridPropHelpers';
import { shallow } from 'enzyme';
const SCROLL_BAR_SIZE = 20;
diff --git a/packages/react-data-grid/src/__tests__/HeaderRow.spec.js b/packages/react-data-grid/src/__tests__/HeaderRow.spec.js
index 3425fb3fd0..209ecdf2e0 100644
--- a/packages/react-data-grid/src/__tests__/HeaderRow.spec.js
+++ b/packages/react-data-grid/src/__tests__/HeaderRow.spec.js
@@ -3,7 +3,7 @@ const rewire = require('rewire');
const TestUtils = require('react-dom/test-utils');
const rewireModule = require('../../../../test/rewireModule');
const StubComponent = require('../../../../test/StubComponent');
-const helpers = require('../helpers/test/GridPropHelpers');
+import helpers from '../helpers/test/GridPropHelpers';
const HeaderRow = rewire('../HeaderRow');
import { shallow } from 'enzyme';
diff --git a/packages/react-data-grid/src/__tests__/ReactDataGrid.spec.js b/packages/react-data-grid/src/__tests__/ReactDataGrid.spec.js
index a23325a15d..4b97b25845 100644
--- a/packages/react-data-grid/src/__tests__/ReactDataGrid.spec.js
+++ b/packages/react-data-grid/src/__tests__/ReactDataGrid.spec.js
@@ -2,7 +2,7 @@ import React from 'react';
// import ReactDOM from 'react-dom';
import ReactDataGrid from '../ReactDataGrid';
import { shallow } from 'enzyme';
-import * as helpers from '../helpers/test/GridPropHelpers';
+import helpers from '../helpers/test/GridPropHelpers';
function shallowRenderGrid({
enableCellAutoFocus = undefined,
diff --git a/packages/react-data-grid/src/__tests__/Row.spec.js b/packages/react-data-grid/src/__tests__/Row.spec.js
index 9cc7e11f89..e5fceb0457 100644
--- a/packages/react-data-grid/src/__tests__/Row.spec.js
+++ b/packages/react-data-grid/src/__tests__/Row.spec.js
@@ -1,8 +1,9 @@
import React from 'react';
import TestUtils from 'react-dom/test-utils';
import Row from '../Row';
+import Cell from '../Cell';
import { shallow } from 'enzyme';
-import * as helpers from '../helpers/test/GridPropHelpers';
+import {createColumns} from '../__tests__/utils/createColumns';
describe('Row', () => {
let fakeProps = {
@@ -12,10 +13,6 @@ describe('Row', () => {
idx: 0
};
- it('should import Row', () => {
- expect(Row).toBeDefined();
- });
-
it('should create an instance of Row', () => {
let component = TestUtils.renderIntoDocument(|
);
expect(component).toBeDefined();
@@ -37,26 +34,29 @@ describe('Row', () => {
});
describe('Rendering Row component', () => {
- const renderComponent = (props) => {
+ const COLUMN_COUNT = 50;
+
+ const setup = (props) => {
const wrapper = shallow(|
);
- return wrapper;
+ const cells = wrapper.find(Cell);
+ return {wrapper, cells};
};
const requiredProperties = {
height: 30,
- columns: helpers.columns,
+ columns: createColumns(COLUMN_COUNT),
row: {key: 'value'},
idx: 17,
- colVisibleStart: 1,
- colVisibleEnd: 2,
- colDisplayStart: 3,
- colDisplayEnd: 4,
+ colVisibleStartIdx: 2,
+ colVisibleEndIdx: 20,
+ colOverscanStartIdx: 0,
+ colOverscanEndIdx: 20,
isScrolling: true
};
const allProperties = {
height: 35,
- columns: helpers.columns,
+ columns: createColumns(COLUMN_COUNT),
row: {key: 'value', name: 'name'},
cellRenderer: jasmine.createSpy(),
cellMetaData: {
@@ -79,30 +79,30 @@ describe('Row', () => {
forceUpdate: false,
subRowDetails: {name: 'subrowname'},
isRowHovered: false,
- colVisibleStart: 0,
- colVisibleEnd: 1,
- colDisplayStart: 2,
- colDisplayEnd: 3,
+ colVisibleStartIdx: 0,
+ colVisibleEndIdx: 1,
+ colOverscanStartIdx: 2,
+ colOverscanEndIdx: 3,
isScrolling: false
};
it('passes classname property', () => {
- const wrapper = renderComponent(requiredProperties);
+ const {wrapper} = setup(requiredProperties);
const draggableDiv = wrapper.find('div').at(0);
expect(draggableDiv.hasClass('react-grid-Row'));
});
it('passes style property', () => {
- const wrapper = renderComponent(requiredProperties);
+ const {wrapper} = setup(requiredProperties);
const draggableDiv = wrapper.find('div').at(0);
expect(draggableDiv.props().style).toBeDefined();
});
it('passes height property', () => {
- const wrapper = renderComponent(requiredProperties);
+ const {wrapper} = setup(requiredProperties);
const draggableDiv = wrapper.find('div').at(0);
expect(draggableDiv.props().height).toBe(30);
});
it('does not pass unknown properties to the div', () => {
- const wrapper = renderComponent(allProperties);
+ const {wrapper} = setup(allProperties);
const draggableDiv = wrapper.find('div').at(0);
expect(draggableDiv.props().columns).toBeUndefined();
expect(draggableDiv.props().row).toBeUndefined();
@@ -115,11 +115,59 @@ describe('Row', () => {
expect(draggableDiv.props().forceUpdate).toBeUndefined();
expect(draggableDiv.props().subRowDetails).toBeUndefined();
expect(draggableDiv.props().isRowHovered).toBeUndefined();
- expect(draggableDiv.props().colVisibleStart).toBeUndefined();
- expect(draggableDiv.props().colVisibleEnd).toBeUndefined();
- expect(draggableDiv.props().colDisplayStart).toBeUndefined();
- expect(draggableDiv.props().colDisplayEnd).toBeUndefined();
+ expect(draggableDiv.props().colVisibleStartIdx).toBeUndefined();
+ expect(draggableDiv.props().colVisibleEndIdx).toBeUndefined();
+ expect(draggableDiv.props().colOverscanStartIdx).toBeUndefined();
+ expect(draggableDiv.props().colOverscanEndIdx).toBeUndefined();
expect(draggableDiv.props().isScrolling).toBeUndefined();
});
+
+ describe('Cell rendering', () => {
+ describe('When using frozen columns', () => {
+ const LAST_LOCKED_CELL_IDX = 5;
+
+ const lockColumns = () => createColumns(COLUMN_COUNT).map((c, idx) => {
+ return idx <= LAST_LOCKED_CELL_IDX ? {...c, frozen: true} : c;
+ });
+
+ it('should render all frozen and visible and overscan cells', () => {
+ const columns = lockColumns(LAST_LOCKED_CELL_IDX);
+ const {cells} = setup({...requiredProperties, columns});
+ const {colOverscanStartIdx, colOverscanEndIdx} = requiredProperties;
+ const renderedRange = colOverscanEndIdx - colOverscanStartIdx + 1;
+ expect(cells.length).toBe(renderedRange);
+ });
+
+ it('first rendered cell index should be first frozen cell', () => {
+ const columns = lockColumns(LAST_LOCKED_CELL_IDX);
+ const {cells} = setup({...requiredProperties, columns});
+ const firstFrozenColumn = columns.filter(c => c.frozen === true)[0];
+ expect(cells.first().props().column).toBe(firstFrozenColumn);
+ });
+ });
+
+ describe('When not using frozen columns', () => {
+ it('should render all visible and overscan cells', () => {
+ const {cells} = setup(requiredProperties);
+ const {colOverscanStartIdx, colOverscanEndIdx} = requiredProperties;
+ const renderedRange = colOverscanEndIdx - colOverscanStartIdx + 1;
+ expect(cells.length).toBe(renderedRange);
+ });
+
+ it('first rendered cell index should be colOverscanStartIdx', () => {
+ const {cells} = setup(requiredProperties);
+ const {columns, colOverscanStartIdx} = requiredProperties;
+ const expectedFirstColumn = columns[colOverscanStartIdx];
+ expect(cells.first().props().column).toBe(expectedFirstColumn);
+ });
+
+ it('lasat rendered cell index should be colOverscanEndIdx', () => {
+ const {cells} = setup(requiredProperties);
+ const {columns, colOverscanEndIdx} = requiredProperties;
+ const expectedLastColumn = columns[colOverscanEndIdx];
+ expect(cells.last().props().column).toBe(expectedLastColumn);
+ });
+ });
+ });
});
});
diff --git a/packages/react-data-grid/src/__tests__/RowsContainer.spec.js b/packages/react-data-grid/src/__tests__/RowsContainer.spec.js
deleted file mode 100644
index 7a42705cd5..0000000000
--- a/packages/react-data-grid/src/__tests__/RowsContainer.spec.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import { shallow } from 'enzyme';
-import React from 'react';
-
-import RowsContainer, { DEFAULT_CONTEXT_MENU_ID } from '../RowsContainer';
-
-const FakeContextMenuTrigger = () => ;
-const FakeContextMenu = () =>
;
-const FakeRow = (id) =>
;
-
-const ReactDataGridPlugins = {
- Menu: {
- ContextMenuTrigger: FakeContextMenuTrigger
- }
-};
-
-describe('Rows Container', () => {
- const setup = (propsOverride = {}) => {
- const props = {
- rowIdx: 5,
- idx: 8,
- window: { ReactDataGridPlugins },
- rows: [
-
{this.createEditor()}
diff --git a/packages/react-data-grid/src/helpers/test/GridPropHelpers.js b/packages/react-data-grid/src/helpers/test/GridPropHelpers.js
index 3841fb18df..1f93d31ee7 100644
--- a/packages/react-data-grid/src/helpers/test/GridPropHelpers.js
+++ b/packages/react-data-grid/src/helpers/test/GridPropHelpers.js
@@ -6,7 +6,7 @@ for (let i = 0; i < 1000; i++) {
count: i * 1000
});
}
-module.exports = {
+export default {
columns: [{
key: 'id',
name: 'ID',
@@ -35,3 +35,4 @@ module.exports = {
copied: null
}
};
+
diff --git a/packages/react-data-grid/src/index.js b/packages/react-data-grid/src/index.js
index 4fe7014661..5ee3e39055 100644
--- a/packages/react-data-grid/src/index.js
+++ b/packages/react-data-grid/src/index.js
@@ -1,6 +1,5 @@
const Grid = require('./ReactDataGrid');
import RowComparer from './RowComparer';
-import RowsContainer from './RowsContainer';
import Cell from './Cell';
module.exports = Grid;
module.exports.Row = require('./Row');
@@ -8,7 +7,6 @@ module.exports.Cell = Cell;
module.exports.HeaderCell = require('./HeaderCell');
module.exports.RowComparer = RowComparer;
module.exports.EmptyChildRow = require('./EmptyChildRow');
-module.exports.RowsContainer = RowsContainer;
module.exports.editors = require('./editors');
module.exports.formatters = require('./formatters');
module.exports.utils = require('./utils');
diff --git a/packages/react-data-grid/src/masks/InteractionMasks.js b/packages/react-data-grid/src/masks/InteractionMasks.js
index 2b7a1808ea..44c1086c41 100644
--- a/packages/react-data-grid/src/masks/InteractionMasks.js
+++ b/packages/react-data-grid/src/masks/InteractionMasks.js
@@ -24,14 +24,17 @@ import * as columnUtils from '../ColumnUtils';
import * as keyCodes from '../KeyCodes';
import { CellNavigationMode, EventTypes } from '../constants';
+require('../../../../themes/interaction-masks.css');
+
const SCROLL_CELL_BUFFER = 2;
class InteractionMasks extends React.Component {
static propTypes = {
- colVisibleStart: PropTypes.number.isRequired,
- colVisibleEnd: PropTypes.number.isRequired,
- visibleStart: PropTypes.number.isRequired,
- visibleEnd: PropTypes.number.isRequired,
+ colVisibleStartIdx: PropTypes.number.isRequired,
+ colVisibleEndIdx: PropTypes.number.isRequired,
+ rowVisibleStartIdx: PropTypes.number.isRequired,
+ rowVisibleEndIdx: PropTypes.number.isRequired,
+ rowOverscanStartIdx: PropTypes.number.isRequired,
columns: PropTypes.array,
width: PropTypes.number,
rowHeight: PropTypes.number.isRequired,
@@ -63,7 +66,10 @@ class InteractionMasks extends React.Component {
onCellsDragged: PropTypes.func,
onDragHandleDoubleClick: PropTypes.func.isRequired,
onBeforeFocus: PropTypes.func.isRequired,
- scrollLeft: PropTypes.number.isRequired
+ scrollLeft: PropTypes.number.isRequired,
+ rows: PropTypes.array.isRequired,
+ getSelectedRowHeight: PropTypes.func.isRequired,
+ getSelectedRowTop: PropTypes.func.isRequired
};
state = {
@@ -81,7 +87,7 @@ class InteractionMasks extends React.Component {
},
copiedPosition: null,
draggedPosition: null,
- lockedPosition: null,
+ frozenPosition: null,
isEditorEnabled: false,
firstEditorKeyPress: null
};
@@ -111,7 +117,6 @@ class InteractionMasks extends React.Component {
componentDidMount() {
const { eventBus, enableCellAutoFocus } = this.props;
-
this.unsubscribeSelectCell = eventBus.subscribe(EventTypes.SELECT_CELL, this.selectCell);
this.unsubscribeSelectStart = eventBus.subscribe(EventTypes.SELECT_START, this.onSelectCellRangeStarted);
this.unsubscribeSelectUpdate = eventBus.subscribe(EventTypes.SELECT_UPDATE, this.onSelectCellRangeUpdated);
@@ -267,12 +272,19 @@ class InteractionMasks extends React.Component {
return this.getKeyNavActionFromEvent(e) != null;
}
+ isGroupedRowSelected() {
+ const { rowGetter } = this.props;
+ const { selectedPosition } = this.state;
+ const rowData = getSelectedRow({ selectedPosition, rowGetter });
+ return rowData && rowData.__metaData ? rowData.__metaData.isGroup : false;
+ }
+
getKeyNavActionFromEvent(e) {
- const { visibleEnd, visibleStart, colVisibleEnd, colVisibleStart, onHitBottomBoundary, onHitRightBoundary, onHitLeftBoundary, onHitTopBoundary } = this.props;
- const isCellAtBottomBoundary = cell => cell.rowIdx >= visibleEnd - SCROLL_CELL_BUFFER;
- const isCellAtTopBoundary = cell => cell.rowIdx !== 0 && cell.rowIdx <= visibleStart - 1;
- const isCellAtRightBoundary = cell => cell.idx !== 0 && cell.idx >= colVisibleEnd - 1;
- const isCellAtLeftBoundary = cell => cell.idx !== 0 && cell.idx <= colVisibleStart + 1;
+ const { rowVisibleEndIdx, rowVisibleStartIdx, colVisibleEndIdx, colVisibleStartIdx, onHitBottomBoundary, onHitRightBoundary, onHitLeftBoundary, onHitTopBoundary } = this.props;
+ const isCellAtBottomBoundary = cell => cell.rowIdx >= rowVisibleEndIdx - SCROLL_CELL_BUFFER;
+ const isCellAtTopBoundary = cell => cell.rowIdx !== 0 && cell.rowIdx <= rowVisibleStartIdx - 1;
+ const isCellAtRightBoundary = cell => cell.idx !== 0 && cell.idx >= colVisibleEndIdx - 1;
+ const isCellAtLeftBoundary = cell => cell.idx !== 0 && cell.idx <= colVisibleStartIdx + 1;
const keyNavActions = {
ArrowDown: {
@@ -404,20 +416,23 @@ class InteractionMasks extends React.Component {
};
selectCell = (cell, openEditor) => {
- const callback = openEditor ? this.openEditor : undefined;
- const next = { ...this.state.selectedPosition, ...cell };
- if (this.isCellWithinBounds(next)) {
- this.setState({
- selectedPosition: next,
- selectedRange: {
- topLeft: next,
- bottomRight: next,
- startCell: next,
- cursorCell: next,
- isDragging: false
- }
- }, callback);
- }
+ const callback = openEditor ? this.openEditor : () => null;
+ this.setState(prevState => {
+ const next = { ...prevState.selectedPosition, ...cell };
+ if (this.isCellWithinBounds(next)) {
+ return {
+ selectedPosition: next,
+ selectedRange: {
+ topLeft: next,
+ bottomRight: next,
+ startCell: next,
+ cursorCell: next,
+ isDragging: false
+ }
+ };
+ }
+ return prevState;
+ }, callback);
};
createSingleCellSelectedRange(cellPosition, isDragging) {
@@ -453,12 +468,12 @@ class InteractionMasks extends React.Component {
const startCell = this.state.selectedRange.startCell || this.state.selectedPosition;
const colIdxs = [startCell.idx, cellPosition.idx].sort((a, b) => a - b);
const rowIdxs = [startCell.rowIdx, cellPosition.rowIdx].sort((a, b) => a - b);
- const topLeft = {idx: colIdxs[0], rowIdx: rowIdxs[0]};
- const bottomRight = {idx: colIdxs[1], rowIdx: rowIdxs[1]};
+ const topLeft = { idx: colIdxs[0], rowIdx: rowIdxs[0] };
+ const bottomRight = { idx: colIdxs[1], rowIdx: rowIdxs[1] };
const selectedRange = {
// default the startCell to the selected cell, in case we've just started via keyboard
- ...{startCell: this.state.selectedPosition},
+ ...{ startCell: this.state.selectedPosition },
// assign the previous state (which will override the startCell if we already have one)
...this.state.selectedRange,
// assign the new state - the bounds of the range, and the new cursor cell
@@ -480,8 +495,8 @@ class InteractionMasks extends React.Component {
};
onSelectCellRangeEnded = () => {
- const selectedRange = {...this.state.selectedRange, isDragging: false};
- this.setState({selectedRange}, () => {
+ const selectedRange = { ...this.state.selectedRange, isDragging: false };
+ this.setState({ selectedRange }, () => {
if (isFunction(this.props.onCellRangeSelectionCompleted)) {
this.props.onCellRangeSelectionCompleted(this.state.selectedRange);
}
@@ -559,17 +574,18 @@ class InteractionMasks extends React.Component {
this.closeEditor();
};
- getSingleCellSelectView = (rowData) => {
- const { rowHeight, columns } = this.props;
+ getSingleCellSelectView = () => {
+ const { columns, getSelectedRowHeight, getSelectedRowTop } = this.props;
const { selectedPosition } = this.state;
-
return (
!this.state.isEditorEnabled && this.isGridSelected() && (
{this.dragEnabled() && (
{
- const { rowHeight, columns } = this.props;
+ const { columns, rowHeight, getSelectedRowHeight, getSelectedRowTop } = this.props;
return [
{children}
diff --git a/packages/react-data-grid/src/masks/__tests__/CellMask.spec.js b/packages/react-data-grid/src/masks/__tests__/CellMask.spec.js
index 3776302b5e..900bf3f627 100644
--- a/packages/react-data-grid/src/masks/__tests__/CellMask.spec.js
+++ b/packages/react-data-grid/src/masks/__tests__/CellMask.spec.js
@@ -3,6 +3,7 @@ import { shallow } from 'enzyme';
import { sel } from '../../__tests__/utils';
import CellMask from '../CellMask';
+import zIndexes from '../../constants/zIndexes';
describe('CellMask', () => {
const setup = (children) => {
@@ -11,7 +12,7 @@ describe('CellMask', () => {
width: 50,
left: 5,
top: 10,
- zIndex: 2
+ zIndex: zIndexes.CELL_MASK
};
const wrapper = shallow({children} );
@@ -25,7 +26,7 @@ describe('CellMask', () => {
jasmine.objectContaining({
height: 30,
width: 50,
- zIndex: 2,
+ zIndex: zIndexes.CELL_MASK,
transform: `translate(5px, 10px)`
})
);
diff --git a/packages/react-data-grid/src/masks/__tests__/CopyMask.spec.js b/packages/react-data-grid/src/masks/__tests__/CopyMask.spec.js
index 2ee6afc06d..0d41a1d7f4 100644
--- a/packages/react-data-grid/src/masks/__tests__/CopyMask.spec.js
+++ b/packages/react-data-grid/src/masks/__tests__/CopyMask.spec.js
@@ -3,6 +3,7 @@ import { shallow } from 'enzyme';
import CellMask from '../CellMask';
import CopyMask from '../CopyMask';
+import zIndexes from '../../constants/zIndexes';
describe('CopyMask', () => {
const setup = (propsOverride = {}) => {
@@ -27,7 +28,8 @@ describe('CopyMask', () => {
width: 50,
left: 5,
top: 90, // = rowHeight * rowIdx
- zIndex: 1
+ zIndex: zIndexes.CELL_MASK,
+ className: 'react-grid-cell-copied'
})
);
});
diff --git a/packages/react-data-grid/src/masks/__tests__/DragMask.spec.js b/packages/react-data-grid/src/masks/__tests__/DragMask.spec.js
index 5a22564421..61997fd6e7 100644
--- a/packages/react-data-grid/src/masks/__tests__/DragMask.spec.js
+++ b/packages/react-data-grid/src/masks/__tests__/DragMask.spec.js
@@ -3,6 +3,7 @@ import { shallow } from 'enzyme';
import CellMask from '../CellMask';
import DragMask from '../DragMask';
+import zIndexes from '../../constants/zIndexes';
describe('DragMask', () => {
const setup = (propsOverride = {}) => {
@@ -33,7 +34,7 @@ describe('DragMask', () => {
width: 50,
left: 5,
top: 90, // = rowHeight * rowIdx
- zIndex: 1
+ zIndex: zIndexes.CELL_MASK
})
);
});
@@ -47,7 +48,7 @@ describe('DragMask', () => {
width: 50,
left: 5,
top: 120, // = rowHeight * overRowIdx
- zIndex: 1
+ zIndex: zIndexes.CELL_MASK
})
);
});
diff --git a/packages/react-data-grid/src/masks/__tests__/InteractionMasks.spec.js b/packages/react-data-grid/src/masks/__tests__/InteractionMasks.spec.js
index 890c334d4c..74437f9752 100644
--- a/packages/react-data-grid/src/masks/__tests__/InteractionMasks.spec.js
+++ b/packages/react-data-grid/src/masks/__tests__/InteractionMasks.spec.js
@@ -23,10 +23,10 @@ describe('