diff --git a/examples/ColumnGroupsResizeReorderExample.js b/examples/ColumnGroupsResizeReorderExample.js index b22134f..125172b 100644 --- a/examples/ColumnGroupsResizeReorderExample.js +++ b/examples/ColumnGroupsResizeReorderExample.js @@ -156,6 +156,7 @@ class ColumnGroupsExample extends React.Component { rowsCount={dataList.getSize()} width={1000} height={500} + touchScrollEnabled={true} {...this.props} > {this.state.columnGroupOrder.map(function (columnGroupKey, i) { diff --git a/examples/ReorderExample.js b/examples/ReorderExample.js index a3b73dd..a3c18f6 100644 --- a/examples/ReorderExample.js +++ b/examples/ReorderExample.js @@ -90,6 +90,7 @@ class ReorderExample extends React.Component { rowsCount={dataList.getSize()} width={1000} height={500} + touchScrollEnabled={true} {...this.props} > {this.state.columnOrder.map(function (columnKey, i) { diff --git a/src/FixedDataTable.js b/src/FixedDataTable.js index c7e7a96..f3cb1e7 100644 --- a/src/FixedDataTable.js +++ b/src/FixedDataTable.js @@ -794,6 +794,7 @@ class FixedDataTable extends React.Component { fixedRightColumns={fixedRightColumnGroups} scrollableColumns={scrollableColumnGroups} visible={true} + touchEnabled={touchScrollEnabled} onColumnResizeEndCallback={onColumnResizeEndCallback} onColumnReorderEndCallback={onColumnReorderEndCallback} showScrollbarY={scrollEnabledY} diff --git a/src/FixedDataTableCell.js b/src/FixedDataTableCell.js index 0420dab..1a66648 100644 --- a/src/FixedDataTableCell.js +++ b/src/FixedDataTableCell.js @@ -177,6 +177,7 @@ class FixedDataTableCell extends React.Component { isVisible, columnKey, isHeaderOrFooter, + touchEnabled, ...props } = this.props; @@ -205,6 +206,7 @@ class FixedDataTableCell extends React.Component { ); let cellProps = { + touchEnabled, isVisible, isHeader: this.props.isHeader, isGroupHeader: this.props.isGroupHeader, diff --git a/src/FixedDataTableCellDefault.js b/src/FixedDataTableCellDefault.js index 1bc4b30..fbcfe76 100644 --- a/src/FixedDataTableCellDefault.js +++ b/src/FixedDataTableCellDefault.js @@ -91,6 +91,7 @@ class FixedDataTableCellDefault extends React.Component { isGroupHeader, maxWidth, minWidth, + touchEnabled, ...props } = this.props; diff --git a/src/FixedDataTableCellDefaultDeprecated.js b/src/FixedDataTableCellDefaultDeprecated.js index 9ed4ed7..7808de8 100644 --- a/src/FixedDataTableCellDefaultDeprecated.js +++ b/src/FixedDataTableCellDefaultDeprecated.js @@ -96,6 +96,7 @@ class FixedDataTableCellDefault extends React.Component { isGroupHeader, maxWidth, minWidth, + touchEnabled, ...props } = this.props; diff --git a/src/plugins/ResizeReorder/ReorderCell.js b/src/plugins/ResizeReorder/ReorderCell.js index 2f30823..3ab49e0 100644 --- a/src/plugins/ResizeReorder/ReorderCell.js +++ b/src/plugins/ResizeReorder/ReorderCell.js @@ -115,11 +115,10 @@ class ReorderCell extends React.PureComponent { onColumnReorderStart, onColumnReorderEnd, reorderStartEvent, + children, ...props } = this.props; - const { children, left } = props; - let className = joinClasses( cx({ 'public/fixedDataTableCell/resizeReorderCellContainer': true, @@ -167,17 +166,27 @@ class ReorderCell extends React.PureComponent { return (
); } + setReorderHandle = (element) => { + if (element) { + element.addEventListener('mousedown', this.onMouseDown, { + passive: false, + }); + element.addEventListener('touchstart', this.onTouchStart, { + passive: false, + }); + } + }; + onTouchStart = (ev) => { if (!this.props.touchEnabled) { return; diff --git a/src/plugins/ResizeReorder/ResizerKnob.js b/src/plugins/ResizeReorder/ResizerKnob.js index 6e5163d..5cb2382 100644 --- a/src/plugins/ResizeReorder/ResizerKnob.js +++ b/src/plugins/ResizeReorder/ResizerKnob.js @@ -48,7 +48,7 @@ class ResizerKnob extends React.PureComponent { * Ref to ResizerKnob * @type {HTMLDivElement} */ - curRef = null; + resizerKnobRef = null; /** * @@ -62,8 +62,14 @@ class ResizerKnob extends React.PureComponent { componentDidMount() { this.setState({ - top: this.curRef.getBoundingClientRect().top, + top: this.resizerKnobRef.getBoundingClientRect().top, }); + + this.setupHandlers(); + } + + componentWillUnmount() { + this.cleanupHandlers(); } render() { @@ -82,18 +88,58 @@ class ResizerKnob extends React.PureComponent { return (