Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
fixed-data-table-2
Advanced tools
fixed-data-table-2 - npm Package Compare versions
Comparing version 1.0.0-beta.15 to 1.0.0-beta.16
@@ -23,54 +23,45 @@ /** | ||
| // Recent browser versions are making touch events passive by default. Unfortunately, React doesn't allow us | ||
| // to specify the event handlers as passive/active (see #6436 on facebook/react). This can lead to unneeded | ||
| // scrolling of parent containers of FDT. This style is a work around to fix this. By applying 'none' to | ||
| // touch-action, we are disabling touch events from propagating. | ||
| const tableParentStyle = { | ||
| 'touch-action': 'none' | ||
| }; | ||
| return ( | ||
| <div style={tableParentStyle}> | ||
| <Table | ||
| rowHeight={50} | ||
| rowsCount={dataList.getSize()} | ||
| headerHeight={50} | ||
| touchScrollEnabled={true} | ||
| width={1000} | ||
| height={500} | ||
| {...this.props}> | ||
| <Column | ||
| columnKey="firstName" | ||
| header={<Cell>First Name</Cell>} | ||
| cell={<TextCell data={dataList} />} | ||
| fixed={true} | ||
| width={100} | ||
| /> | ||
| <Column | ||
| columnKey="lastName" | ||
| header={<Cell>Last Name</Cell>} | ||
| cell={<TextCell data={dataList} />} | ||
| fixed={true} | ||
| width={100} | ||
| /> | ||
| <Column | ||
| columnKey="city" | ||
| header={<Cell>City</Cell>} | ||
| cell={<TextCell data={dataList} />} | ||
| width={100} | ||
| /> | ||
| <Column | ||
| columnKey="street" | ||
| header={<Cell>Street</Cell>} | ||
| cell={<TextCell data={dataList} />} | ||
| width={200} | ||
| /> | ||
| <Column | ||
| columnKey="zipCode" | ||
| header={<Cell>Zip Code</Cell>} | ||
| cell={<TextCell data={dataList} />} | ||
| width={200} | ||
| /> | ||
| </Table> | ||
| </div> | ||
| <Table | ||
| rowHeight={50} | ||
| rowsCount={dataList.getSize()} | ||
| headerHeight={50} | ||
| touchScrollEnabled={true} | ||
| width={1000} | ||
| height={500} | ||
| {...this.props} | ||
| > | ||
| <Column | ||
| columnKey="firstName" | ||
| header={<Cell>First Name</Cell>} | ||
| cell={<TextCell data={dataList} />} | ||
| fixed={true} | ||
| width={100} | ||
| /> | ||
| <Column | ||
| columnKey="lastName" | ||
| header={<Cell>Last Name</Cell>} | ||
| cell={<TextCell data={dataList} />} | ||
| fixed={true} | ||
| width={100} | ||
| /> | ||
| <Column | ||
| columnKey="city" | ||
| header={<Cell>City</Cell>} | ||
| cell={<TextCell data={dataList} />} | ||
| width={100} | ||
| /> | ||
| <Column | ||
| columnKey="street" | ||
| header={<Cell>Street</Cell>} | ||
| cell={<TextCell data={dataList} />} | ||
| width={200} | ||
| /> | ||
| <Column | ||
| columnKey="zipCode" | ||
| header={<Cell>Zip Code</Cell>} | ||
| cell={<TextCell data={dataList} />} | ||
| width={200} | ||
| /> | ||
| </Table> | ||
| ); | ||
@@ -77,0 +68,0 @@ } |
@@ -451,5 +451,5 @@ 'use strict'; | ||
| this._wheelHandler = new _ReactWheelHandler2.default(this._onScroll, this._shouldHandleWheelX, this._shouldHandleWheelY, this.props.stopScrollPropagation); | ||
| this._wheelHandler = new _ReactWheelHandler2.default(this._onScroll, this._shouldHandleWheelX, this._shouldHandleWheelY, this.props.stopScrollDefaultHandling, this.props.stopScrollPropagation); | ||
| this._touchHandler = new _ReactTouchHandler2.default(this._onScroll, this._shouldHandleTouchX, this._shouldHandleTouchY, this.props.stopScrollPropagation); | ||
| this._touchHandler = new _ReactTouchHandler2.default(this._onScroll, this._shouldHandleTouchX, this._shouldHandleTouchY, this.props.stopScrollDefaultHandling, this.props.stopScrollPropagation); | ||
| } | ||
@@ -459,3 +459,6 @@ }, { | ||
| value: function componentWillUnmount() { | ||
| // TODO (pradeep): Remove these and pass to our table component directly after | ||
| // React provides an API where event handlers can be specified to be non-passive (facebook/react#6436) | ||
| this._divRef && this._divRef.removeEventListener('wheel', this._wheelHandler.onWheel, { passive: false }); | ||
| this._divRef && this._divRef.removeEventListener('touchmove', this._touchHandler.onTouchMove, { passive: false }); | ||
| this._wheelHandler = null; | ||
@@ -522,2 +525,3 @@ this._touchHandler = null; | ||
| this._divRef && this._divRef.addEventListener('wheel', this._wheelHandler.onWheel, { passive: false }); | ||
| this._divRef && this._divRef.addEventListener('touchmove', this._touchHandler.onTouchMove, { passive: false }); | ||
| this._reportContentHeight(); | ||
@@ -723,3 +727,2 @@ } | ||
| onTouchEnd: this._touchHandler.onTouchEnd, | ||
| onTouchMove: this._touchHandler.onTouchMove, | ||
| onTouchCancel: this._touchHandler.onTouchCancel, | ||
@@ -1004,2 +1007,10 @@ ref: this._onRef, | ||
| /** | ||
| * If enabled scroll events will never be bubbled to the browser default handler. | ||
| * If disabled (default when unspecified), scroll events will be bubbled up if the scroll | ||
| * doesn't lead to a change in scroll offsets, which is preferable if you like | ||
| * the page/container to scroll up when the table is already scrolled up max. | ||
| */ | ||
| stopScrollDefaultHandling: _propTypes2.default.bool, | ||
| /** | ||
| * If enabled scroll events will not be propagated outside of the table. | ||
@@ -1006,0 +1017,0 @@ */ |
@@ -39,3 +39,3 @@ /** | ||
| FixedDataTableRoot.version = '1.0.0-beta.15'; | ||
| FixedDataTableRoot.version = '1.0.0-beta.16'; | ||
| module.exports = FixedDataTableRoot; |
@@ -49,3 +49,4 @@ /** | ||
| /*boolean|function*/handleScrollY, | ||
| /*?boolean|?function*/stopPropagation) { | ||
| /*?boolean*/preventDefault, | ||
| /*?boolean*/stopPropagation) { | ||
| _classCallCheck(this, ReactTouchHandler); | ||
@@ -89,9 +90,5 @@ | ||
| // TODO (jordan) Is configuring this necessary | ||
| if (typeof stopPropagation !== 'function') { | ||
| stopPropagation = stopPropagation ? _emptyFunction2.default.thatReturnsTrue : _emptyFunction2.default.thatReturnsFalse; | ||
| } | ||
| this._handleScrollX = handleScrollX; | ||
| this._handleScrollY = handleScrollY; | ||
| this._preventDefault = preventDefault; | ||
| this._stopPropagation = stopPropagation; | ||
@@ -113,2 +110,5 @@ this._onTouchScrollCallback = onTouchScroll; | ||
| value: function onTouchStart( /*object*/event) { | ||
| if (this._preventDefault) { | ||
| event.preventDefault(); | ||
| } | ||
@@ -130,3 +130,3 @@ // Start tracking drag delta for scrolling | ||
| if (this._stopPropagation()) { | ||
| if (this._stopPropagation) { | ||
| event.stopPropagation(); | ||
@@ -138,2 +138,5 @@ } | ||
| value: function onTouchEnd( /*object*/event) { | ||
| if (this._preventDefault) { | ||
| event.preventDefault(); | ||
| } | ||
@@ -147,3 +150,3 @@ // Stop tracking velocity | ||
| if (this._stopPropagation()) { | ||
| if (this._stopPropagation) { | ||
| event.stopPropagation(); | ||
@@ -160,3 +163,3 @@ } | ||
| if (this._stopPropagation()) { | ||
| if (this._stopPropagation) { | ||
| event.stopPropagation(); | ||
@@ -168,2 +171,5 @@ } | ||
| value: function onTouchMove( /*object*/event) { | ||
| if (this._preventDefault) { | ||
| event.preventDefault(); | ||
| } | ||
@@ -196,3 +202,6 @@ var moveX = event.touches[0].pageX; | ||
| event.preventDefault(); | ||
| // The event will result in a scroll to the table, so there's no need to also let the parent containers scroll | ||
| if (!event.defaultPrevented) { | ||
| event.preventDefault(); | ||
| } | ||
@@ -202,3 +211,3 @@ // Ensure minimum delta magnitude is met to avoid jitter | ||
| if (Math.abs(this._deltaX) > 2 || Math.abs(this._deltaY) > 2) { | ||
| if (this._stopPropagation()) { | ||
| if (this._stopPropagation) { | ||
| event.stopPropagation(); | ||
@@ -205,0 +214,0 @@ } |
@@ -47,3 +47,4 @@ /** | ||
| /*boolean|function*/handleScrollY, | ||
| /*?boolean|?function*/stopPropagation) { | ||
| /*?boolean*/preventDefault, | ||
| /*?boolean*/stopPropagation) { | ||
| _classCallCheck(this, ReactWheelHandler); | ||
@@ -65,8 +66,5 @@ | ||
| if (typeof stopPropagation !== 'function') { | ||
| stopPropagation = stopPropagation ? _emptyFunction2.default.thatReturnsTrue : _emptyFunction2.default.thatReturnsFalse; | ||
| } | ||
| this._handleScrollX = handleScrollX; | ||
| this._handleScrollY = handleScrollY; | ||
| this._preventDefault = preventDefault; | ||
| this._stopPropagation = stopPropagation; | ||
@@ -80,2 +78,6 @@ this._onWheelCallback = onWheel; | ||
| value: function onWheel( /*object*/event) { | ||
| if (this._preventDefault) { | ||
| event.preventDefault(); | ||
| } | ||
| var normalizedEvent = (0, _normalizeWheel2.default)(event); | ||
@@ -102,7 +104,11 @@ | ||
| this._deltaY += handleScrollY ? normalizedEvent.pixelY : 0; | ||
| event.preventDefault(); | ||
| // This will result in a scroll to the table, so there's no need to let the parent containers scroll | ||
| if (!event.defaultPrevented) { | ||
| event.preventDefault(); | ||
| } | ||
| var changed; | ||
| if (this._deltaX !== 0 || this._deltaY !== 0) { | ||
| if (this._stopPropagation()) { | ||
| if (this._stopPropagation) { | ||
| event.stopPropagation(); | ||
@@ -109,0 +115,0 @@ } |
| { | ||
| "name": "fixed-data-table-2", | ||
| "version": "1.0.0-beta.15", | ||
| "version": "1.0.0-beta.16", | ||
| "description": "A React table component designed to allow presenting thousands of rows of data.", | ||
@@ -5,0 +5,0 @@ "main": "main.js", |
@@ -42,2 +42,3 @@ /** | ||
| }], | ||
| preventDefault: sandbox.spy(), | ||
| stopPropagation: sandbox.spy() | ||
@@ -49,3 +50,3 @@ }; | ||
| // --- Run Test --- | ||
| var reactTouchHandler = new ReactTouchHandler(() => {}, () => {}, () => {}, true); | ||
| var reactTouchHandler = new ReactTouchHandler(() => {}, () => {}, () => {}, false, true); | ||
| reactTouchHandler.onTouchStart(fakeEvent); | ||
@@ -57,14 +58,5 @@ | ||
| it('should stop event propagation if function returns true', function() { | ||
| // --- Run Test --- | ||
| var reactTouchHandler = new ReactTouchHandler(() => {}, () => {}, () => {}, () => true); | ||
| reactTouchHandler.onTouchStart(fakeEvent); | ||
| // --- Verify Expectations --- | ||
| assert.isTrue(fakeEvent.stopPropagation.calledOnce); | ||
| }); | ||
| it('should not stop event propagation if flag is false', function() { | ||
| // --- Run Test --- | ||
| var reactTouchHandler = new ReactTouchHandler(() => {}, () => {}, () => {}, false); | ||
| var reactTouchHandler = new ReactTouchHandler(() => {}, () => {}, () => {}, false, false); | ||
| reactTouchHandler.onTouchStart(fakeEvent); | ||
@@ -76,9 +68,9 @@ | ||
| it('should not stop event propagation if function returns false', function() { | ||
| it('should prevent default if flag is true', function() { | ||
| // --- Run Test --- | ||
| var reactTouchHandler = new ReactTouchHandler(() => {}, () => {}, () => {}, () => false); | ||
| var reactTouchHandler = new ReactTouchHandler(() => {}, () => {}, () => {}, true, false); | ||
| reactTouchHandler.onTouchStart(fakeEvent); | ||
| // --- Verify Expectations --- | ||
| assert.isFalse(fakeEvent.stopPropagation.called); | ||
| assert.isTrue(fakeEvent.preventDefault.calledOnce); | ||
| }); | ||
@@ -88,3 +80,3 @@ | ||
| // --- Run Test --- | ||
| var reactTouchHandler = new ReactTouchHandler(() => {}, () => {}, () => {}, () => false); | ||
| var reactTouchHandler = new ReactTouchHandler(() => {}, () => {}, () => {}, false, false); | ||
| reactTouchHandler.onTouchStart(fakeEvent); | ||
@@ -108,2 +100,3 @@ clock.tick(100); | ||
| }], | ||
| preventDefault: sandbox.spy(), | ||
| stopPropagation: sandbox.spy() | ||
@@ -119,3 +112,3 @@ }; | ||
| // --- Run Test --- | ||
| var reactTouchHandler = new ReactTouchHandler(() => {}, () => {}, () => {}, true); | ||
| var reactTouchHandler = new ReactTouchHandler(() => {}, () => {}, () => {}, false, true); | ||
| reactTouchHandler.onTouchEnd(fakeEvent); | ||
@@ -127,14 +120,6 @@ | ||
| it('should stop event propagation if function returns true', function() { | ||
| // --- Run Test --- | ||
| var reactTouchHandler = new ReactTouchHandler(() => {}, () => {}, () => {}, () => true); | ||
| reactTouchHandler.onTouchEnd(fakeEvent); | ||
| // --- Verify Expectations --- | ||
| assert.isTrue(fakeEvent.stopPropagation.calledOnce); | ||
| }); | ||
| it('should not stop event propagation if flag is false', function() { | ||
| // --- Run Test --- | ||
| var reactTouchHandler = new ReactTouchHandler(() => {}, () => {}, () => {}, false); | ||
| var reactTouchHandler = new ReactTouchHandler(() => {}, () => {}, () => {}, false, false); | ||
| reactTouchHandler.onTouchEnd(fakeEvent); | ||
@@ -146,9 +131,9 @@ | ||
| it('should not stop event propagation if function returns false', function() { | ||
| it('should prevent default if flag is true', function() { | ||
| // --- Run Test --- | ||
| var reactTouchHandler = new ReactTouchHandler(() => {}, () => {}, () => {}, () => false); | ||
| var reactTouchHandler = new ReactTouchHandler(() => {}, () => {}, () => {}, true, false); | ||
| reactTouchHandler.onTouchEnd(fakeEvent); | ||
| // --- Verify Expectations --- | ||
| assert.isFalse(fakeEvent.stopPropagation.called); | ||
| assert.isTrue(fakeEvent.preventDefault.calledOnce); | ||
| }); | ||
@@ -158,3 +143,3 @@ | ||
| // --- Run Test --- | ||
| var reactTouchHandler = new ReactTouchHandler(() => {}, () => {}, () => {}, () => false); | ||
| var reactTouchHandler = new ReactTouchHandler(() => {}, () => {}, () => {}, false, false); | ||
| reactTouchHandler.onTouchEnd(fakeEvent); | ||
@@ -168,3 +153,3 @@ | ||
| // --- Run Test --- | ||
| var reactTouchHandler = new ReactTouchHandler(() => {}, () => {}, () => {}, () => false); | ||
| var reactTouchHandler = new ReactTouchHandler(() => {}, () => {}, () => {}, false, false); | ||
| reactTouchHandler.onTouchEnd(fakeEvent); | ||
@@ -171,0 +156,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.09%
1653536
- Lines of code
- increased by0.1%
29004
No dependency changes