react-base-table - npm Package Compare versions

Comparing version 1.4.0 to 1.5.0

CHANGELOG.md

@@ -5,2 +5,6 @@ # CHANGELOG
 
+- refactor: remove dependent on `react-draggable`
+- fix: undefined parentId should be considered as root item
+- fix: `flattenOnKeys` not works with immutable data (regression from #23)
+
 ## v1.4.0 (2019-07-01)
@@ -7,0 +11,0 @@

es/BaseTable.js

@@ -21,3 +21,3 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 import ColumnManager from './ColumnManager';
-import { renderElement, normalizeColumns, getScrollbarSize as defaultGetScrollbarSize, isObjectEqual, callOrReturn, hasChildren, flattenOnKeys, cloneArray, getValue, noop } from './utils';
+import { renderElement, normalizeColumns, getScrollbarSize as defaultGetScrollbarSize, isObjectEqual, callOrReturn, hasChildren, flattenOnKeys, cloneArray, getValue, throttle, noop } from './utils';
 
@@ -39,2 +39,3 @@ var getContainerStyle = function getContainerStyle(width, maxWidth, height) {
 };
+var RESIZE_THROTTLE_WAIT = 50;
 /**
@@ -78,3 +79,3 @@ * React table component
     _this._handleRowExpand = _this._handleRowExpand.bind(_assertThisInitialized(_this));
-    _this._handleColumnResize = _this._handleColumnResize.bind(_assertThisInitialized(_this));
+    _this._handleColumnResize = throttle(_this._handleColumnResize.bind(_assertThisInitialized(_this)), RESIZE_THROTTLE_WAIT);
     _this._handleColumnResizeStart = _this._handleColumnResizeStart.bind(_assertThisInitialized(_this));
@@ -494,3 +495,2 @@ _this._handleColumnResizeStop = _this._handleColumnResizeStop.bind(_assertThisInitialized(_this));
       className: this._prefixClass('column-resizer'),
-      handleClassName: this._prefixClass('column-resizer-handle'),
       column: column,
@@ -633,4 +633,2 @@ onResizeStart: this._handleColumnResizeStart,
       left: left,
-      width: 3,
-      transform: 'translateX(-3px)',
       height: this._getTableHeight() - this._horizontalScrollbarSize
@@ -637,0 +635,0 @@ };

es/ColumnResizer.js

@@ -0,2 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -6,8 +8,4 @@ import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import PropTypes from 'prop-types';
-import cn from 'classnames';
-import { DraggableCore } from 'react-draggable';
-import { noop, throttle } from './utils';
+import { noop } from './utils';
 var INVALID_VALUE = null;
-var MIN_WIDTH = 25;
-var THROTTLE_WAIT = 50;
 /**
@@ -26,8 +24,10 @@ * ColumnResizer for BaseTable
     _this = _React$PureComponent.call(this, props) || this;
+    _this.isDragging = false;
     _this.lastX = INVALID_VALUE;
     _this.width = 0;
-    _this._handleDrag = throttle(_this._handleDrag.bind(_assertThisInitialized(_this)), THROTTLE_WAIT);
-    _this._handleStart = _this._handleStart.bind(_assertThisInitialized(_this));
-    _this._handleStop = _this._handleStop.bind(_assertThisInitialized(_this));
+    _this._setHandleRef = _this._setHandleRef.bind(_assertThisInitialized(_this));
     _this._handleClick = _this._handleClick.bind(_assertThisInitialized(_this));
+    _this._handleMouseDown = _this._handleMouseDown.bind(_assertThisInitialized(_this));
+    _this._handleMouseUp = _this._handleMouseUp.bind(_assertThisInitialized(_this));
+    _this._handleMouseMove = _this._handleMouseMove.bind(_assertThisInitialized(_this));
     return _this;
@@ -38,19 +38,27 @@ }
 
+  _proto.componentWillMount = function componentWillMount() {
+    if (this.handleRef) {
+      var ownerDocument = this.handleRef.ownerDocument;
+      ownerDocument.removeEventListener('mousemove', this._handleMouseMove);
+      ownerDocument.addEventListener('mouseup', this._handleMouseUp);
+    }
+  };
+
   _proto.render = function render() {
     var _this$props = this.props,
-        className = _this$props.className,
         style = _this$props.style,
-        width = _this$props.width,
-        disabled = _this$props.disabled;
-    var cls = cn('BaseTable__column-resizer', className);
-    return React.createElement(DraggableCore, {
-      axis: "x",
-      disabled: disabled,
-      onStart: this._handleStart,
-      onDrag: this._handleDrag,
-      onStop: this._handleStop
-    }, React.createElement("div", {
-      className: cls,
+        column = _this$props.column,
+        onResizeStart = _this$props.onResizeStart,
+        onResize = _this$props.onResize,
+        onResizeStop = _this$props.onResizeStop,
+        rest = _objectWithoutPropertiesLoose(_this$props, ["style", "column", "onResizeStart", "onResize", "onResizeStop"]);
+
+    return React.createElement("div", _extends({}, rest, {
+      ref: this._setHandleRef,
       onClick: this._handleClick,
+      onMouseDown: this._handleMouseDown,
+      onMouseUp: this._handleMouseUp,
       style: _objectSpread({
+        userSelect: 'none',
+        touchAction: 'none',
         position: 'absolute',
@@ -60,17 +68,48 @@ top: 0,
         right: 0,
-        cursor: 'ew-resize',
-        borderRightStyle: 'solid'
-      }, style, {
-        borderRightWidth: width
-      })
+        cursor: 'col-resize'
+      }, style)
     }));
   };
 
-  _proto._handleDrag = function _handleDrag(e, data) {
+  _proto._setHandleRef = function _setHandleRef(ref) {
+    this.handleRef = ref;
+  };
+
+  _proto._handleClick = function _handleClick(e) {
+    e.stopPropagation();
+  };
+
+  _proto._handleMouseDown = function _handleMouseDown(e) {
+    if (typeof e.button === 'number' && e.button !== 0) return;
+    this.isDragging = true;
+    this.lastX = INVALID_VALUE;
+    this.width = this.props.column.width;
+    this.props.onResizeStart(this.props.column);
+    var ownerDocument = this.handleRef.ownerDocument;
+    ownerDocument.addEventListener('mousemove', this._handleMouseMove);
+    ownerDocument.addEventListener('mouseup', this._handleMouseUp);
+  };
+
+  _proto._handleMouseUp = function _handleMouseUp(e) {
+    if (!this.isDragging) return;
+    this.isDragging = false;
+    this.props.onResizeStop(this.props.column);
+    var ownerDocument = this.handleRef.ownerDocument;
+    ownerDocument.removeEventListener('mousemove', this._handleMouseMove);
+    ownerDocument.addEventListener('mouseup', this._handleMouseUp);
+  };
+
+  _proto._handleMouseMove = function _handleMouseMove(e) {
+    var offsetParent = this.handleRef.offsetParent;
+    var offsetParentRect = offsetParent.getBoundingClientRect();
+    var x = e.clientX + offsetParent.scrollLeft - offsetParentRect.left;
+
     if (this.lastX === INVALID_VALUE) {
-      this.lastX = data.lastX;
-      return true;
+      this.lastX = x;
+      return;
     }
 
-    var column = this.props.column;
+    var _this$props2 = this.props,
+        column = _this$props2.column,
+        MIN_WIDTH = _this$props2.minWidth;
     var width = column.width,
@@ -80,6 +119,6 @@ maxWidth = column.maxWidth,
         minWidth = _column$minWidth === void 0 ? MIN_WIDTH : _column$minWidth;
-    var movedX = data.x - this.lastX;
-    if (!movedX) return true;
+    var movedX = x - this.lastX;
+    if (!movedX) return;
     this.width = this.width + movedX;
-    this.lastX = data.x;
+    this.lastX = x;
     var newWidth = this.width;
@@ -93,20 +132,6 @@
 
-    if (newWidth === width) return true;
-    return this.props.onResize(column, newWidth);
+    if (newWidth === width) return;
+    this.props.onResize(column, newWidth);
   };
 
-  _proto._handleStart = function _handleStart(e, data) {
-    this.lastX = INVALID_VALUE;
-    this.width = this.props.column.width;
-    return this.props.onResizeStart(this.props.column);
-  };
-
-  _proto._handleStop = function _handleStop(e, data) {
-    return this.props.onResizeStop(this.props.column);
-  };
-
-  _proto._handleClick = function _handleClick(e) {
-    e.stopPropagation();
-  };
-
   return ColumnResizer;
@@ -116,12 +141,12 @@ }(React.PureComponent);
 ColumnResizer.defaultProps = {
-  width: 3,
   onResizeStart: noop,
   onResize: noop,
-  onResizeStop: noop
+  onResizeStop: noop,
+  minWidth: 30
 };
 ColumnResizer.propTypes = {
   /**
-   * Class name for the drag handler
+   * Custom style for the drag handler
    */
-  className: PropTypes.string,
+  style: PropTypes.object,
 
@@ -134,17 +159,2 @@ /**
   /**
-   * The width of the drag handler
-   */
-  width: PropTypes.number.isRequired,
-
-  /**
-   * Whether the resizing is disabled
-   */
-  disabled: PropTypes.bool,
-
-  /**
-   * Custom style for the drag handler
-   */
-  style: PropTypes.object,
-
-  /**
    * A callback function when resizing started
@@ -165,5 +175,10 @@ * The callback is of the shape of `(column) => *`
    */
-  onResizeStop: PropTypes.func
+  onResizeStop: PropTypes.func,
+
+  /**
+   * Minimum width of the column could be resized to if the column's `minWidth` is not set
+   */
+  minWidth: PropTypes.number
 };
 export default ColumnResizer;
 //# sourceMappingURL=ColumnResizer.js.map

es/utils.js

@@ -91,3 +91,3 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread";
 
-    if (parentId !== rootId) {
+    if (parentId !== undefined && parentId !== rootId) {
       if (!childrenMap[parentId]) childrenMap[parentId] = [];
@@ -127,3 +127,3 @@ childrenMap[parentId].push(item);
     if (keysSet.has(item[dataKey]) && Array.isArray(item.children) && item.children.length > 0) {
-      stack = item.children.concat(stack);
+      stack = [].concat(item.children, stack);
       item.children.forEach(function (x) {
@@ -130,0 +130,0 @@ return depthMap[x[dataKey]] = depthMap[item[dataKey]] + 1;

lib/BaseTable.js

@@ -79,2 +79,3 @@ "use strict";
 };
+var RESIZE_THROTTLE_WAIT = 50;
 /**
@@ -119,3 +120,3 @@ * React table component
     _this._handleRowExpand = _this._handleRowExpand.bind((0, _assertThisInitialized2["default"])(_this));
-    _this._handleColumnResize = _this._handleColumnResize.bind((0, _assertThisInitialized2["default"])(_this));
+    _this._handleColumnResize = (0, _utils.throttle)(_this._handleColumnResize.bind((0, _assertThisInitialized2["default"])(_this)), RESIZE_THROTTLE_WAIT);
     _this._handleColumnResizeStart = _this._handleColumnResizeStart.bind((0, _assertThisInitialized2["default"])(_this));
@@ -538,3 +539,2 @@ _this._handleColumnResizeStop = _this._handleColumnResizeStop.bind((0, _assertThisInitialized2["default"])(_this));
         className: this._prefixClass('column-resizer'),
-        handleClassName: this._prefixClass('column-resizer-handle'),
         column: column,
@@ -679,4 +679,2 @@ onResizeStart: this._handleColumnResizeStart,
         left: left,
-        width: 3,
-        transform: 'translateX(-3px)',
         height: this._getTableHeight() - this._horizontalScrollbarSize
@@ -683,0 +681,0 @@ };

lib/ColumnResizer.js

@@ -10,4 +10,8 @@ "use strict";
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -29,11 +33,5 @@
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _reactDraggable = require("react-draggable");
-
 var _utils = require("./utils");
 
 var INVALID_VALUE = null;
-var MIN_WIDTH = 25;
-var THROTTLE_WAIT = 50;
 /**
@@ -53,8 +51,10 @@ * ColumnResizer for BaseTable
     _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(ColumnResizer).call(this, props));
+    _this.isDragging = false;
     _this.lastX = INVALID_VALUE;
     _this.width = 0;
-    _this._handleDrag = (0, _utils.throttle)(_this._handleDrag.bind((0, _assertThisInitialized2["default"])(_this)), THROTTLE_WAIT);
-    _this._handleStart = _this._handleStart.bind((0, _assertThisInitialized2["default"])(_this));
-    _this._handleStop = _this._handleStop.bind((0, _assertThisInitialized2["default"])(_this));
+    _this._setHandleRef = _this._setHandleRef.bind((0, _assertThisInitialized2["default"])(_this));
     _this._handleClick = _this._handleClick.bind((0, _assertThisInitialized2["default"])(_this));
+    _this._handleMouseDown = _this._handleMouseDown.bind((0, _assertThisInitialized2["default"])(_this));
+    _this._handleMouseUp = _this._handleMouseUp.bind((0, _assertThisInitialized2["default"])(_this));
+    _this._handleMouseMove = _this._handleMouseMove.bind((0, _assertThisInitialized2["default"])(_this));
     return _this;
@@ -64,20 +64,28 @@ }
   (0, _createClass2["default"])(ColumnResizer, [{
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      if (this.handleRef) {
+        var ownerDocument = this.handleRef.ownerDocument;
+        ownerDocument.removeEventListener('mousemove', this._handleMouseMove);
+        ownerDocument.addEventListener('mouseup', this._handleMouseUp);
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          className = _this$props.className,
           style = _this$props.style,
-          width = _this$props.width,
-          disabled = _this$props.disabled;
-      var cls = (0, _classnames["default"])('BaseTable__column-resizer', className);
-      return _react["default"].createElement(_reactDraggable.DraggableCore, {
-        axis: "x",
-        disabled: disabled,
-        onStart: this._handleStart,
-        onDrag: this._handleDrag,
-        onStop: this._handleStop
-      }, _react["default"].createElement("div", {
-        className: cls,
+          column = _this$props.column,
+          onResizeStart = _this$props.onResizeStart,
+          onResize = _this$props.onResize,
+          onResizeStop = _this$props.onResizeStop,
+          rest = (0, _objectWithoutProperties2["default"])(_this$props, ["style", "column", "onResizeStart", "onResize", "onResizeStop"]);
+      return _react["default"].createElement("div", (0, _extends2["default"])({}, rest, {
+        ref: this._setHandleRef,
         onClick: this._handleClick,
+        onMouseDown: this._handleMouseDown,
+        onMouseUp: this._handleMouseUp,
         style: (0, _objectSpread2["default"])({
+          userSelect: 'none',
+          touchAction: 'none',
           position: 'absolute',
@@ -87,18 +95,53 @@ top: 0,
           right: 0,
-          cursor: 'ew-resize',
-          borderRightStyle: 'solid'
-        }, style, {
-          borderRightWidth: width
-        })
+          cursor: 'col-resize'
+        }, style)
       }));
     }
   }, {
-    key: "_handleDrag",
-    value: function _handleDrag(e, data) {
+    key: "_setHandleRef",
+    value: function _setHandleRef(ref) {
+      this.handleRef = ref;
+    }
+  }, {
+    key: "_handleClick",
+    value: function _handleClick(e) {
+      e.stopPropagation();
+    }
+  }, {
+    key: "_handleMouseDown",
+    value: function _handleMouseDown(e) {
+      if (typeof e.button === 'number' && e.button !== 0) return;
+      this.isDragging = true;
+      this.lastX = INVALID_VALUE;
+      this.width = this.props.column.width;
+      this.props.onResizeStart(this.props.column);
+      var ownerDocument = this.handleRef.ownerDocument;
+      ownerDocument.addEventListener('mousemove', this._handleMouseMove);
+      ownerDocument.addEventListener('mouseup', this._handleMouseUp);
+    }
+  }, {
+    key: "_handleMouseUp",
+    value: function _handleMouseUp(e) {
+      if (!this.isDragging) return;
+      this.isDragging = false;
+      this.props.onResizeStop(this.props.column);
+      var ownerDocument = this.handleRef.ownerDocument;
+      ownerDocument.removeEventListener('mousemove', this._handleMouseMove);
+      ownerDocument.addEventListener('mouseup', this._handleMouseUp);
+    }
+  }, {
+    key: "_handleMouseMove",
+    value: function _handleMouseMove(e) {
+      var offsetParent = this.handleRef.offsetParent;
+      var offsetParentRect = offsetParent.getBoundingClientRect();
+      var x = e.clientX + offsetParent.scrollLeft - offsetParentRect.left;
+
       if (this.lastX === INVALID_VALUE) {
-        this.lastX = data.lastX;
-        return true;
+        this.lastX = x;
+        return;
       }
 
-      var column = this.props.column;
+      var _this$props2 = this.props,
+          column = _this$props2.column,
+          MIN_WIDTH = _this$props2.minWidth;
       var width = column.width,
@@ -108,6 +151,6 @@ maxWidth = column.maxWidth,
           minWidth = _column$minWidth === void 0 ? MIN_WIDTH : _column$minWidth;
-      var movedX = data.x - this.lastX;
-      if (!movedX) return true;
+      var movedX = x - this.lastX;
+      if (!movedX) return;
       this.width = this.width + movedX;
-      this.lastX = data.x;
+      this.lastX = x;
       var newWidth = this.width;
@@ -121,22 +164,5 @@
 
-      if (newWidth === width) return true;
-      return this.props.onResize(column, newWidth);
+      if (newWidth === width) return;
+      this.props.onResize(column, newWidth);
     }
-  }, {
-    key: "_handleStart",
-    value: function _handleStart(e, data) {
-      this.lastX = INVALID_VALUE;
-      this.width = this.props.column.width;
-      return this.props.onResizeStart(this.props.column);
-    }
-  }, {
-    key: "_handleStop",
-    value: function _handleStop(e, data) {
-      return this.props.onResizeStop(this.props.column);
-    }
-  }, {
-    key: "_handleClick",
-    value: function _handleClick(e) {
-      e.stopPropagation();
-    }
   }]);
@@ -147,12 +173,12 @@ return ColumnResizer;
 ColumnResizer.defaultProps = {
-  width: 3,
   onResizeStart: _utils.noop,
   onResize: _utils.noop,
-  onResizeStop: _utils.noop
+  onResizeStop: _utils.noop,
+  minWidth: 30
 };
 ColumnResizer.propTypes = {
   /**
-   * Class name for the drag handler
+   * Custom style for the drag handler
    */
-  className: _propTypes["default"].string,
+  style: _propTypes["default"].object,
 
@@ -165,17 +191,2 @@ /**
   /**
-   * The width of the drag handler
-   */
-  width: _propTypes["default"].number.isRequired,
-
-  /**
-   * Whether the resizing is disabled
-   */
-  disabled: _propTypes["default"].bool,
-
-  /**
-   * Custom style for the drag handler
-   */
-  style: _propTypes["default"].object,
-
-  /**
    * A callback function when resizing started
@@ -196,3 +207,8 @@ * The callback is of the shape of `(column) => *`
    */
-  onResizeStop: _propTypes["default"].func
+  onResizeStop: _propTypes["default"].func,
+
+  /**
+   * Minimum width of the column could be resized to if the column's `minWidth` is not set
+   */
+  minWidth: _propTypes["default"].number
 };
@@ -199,0 +215,0 @@ var _default = ColumnResizer;

lib/utils.js

@@ -112,3 +112,3 @@ "use strict";
 
-    if (parentId !== rootId) {
+    if (parentId !== undefined && parentId !== rootId) {
       if (!childrenMap[parentId]) childrenMap[parentId] = [];
@@ -143,3 +143,3 @@ childrenMap[parentId].push(item);
     if (keysSet.has(item[dataKey]) && Array.isArray(item.children) && item.children.length > 0) {
-      stack = item.children.concat(stack);
+      stack = [].concat(item.children, stack);
       item.children.forEach(function (x) {
@@ -146,0 +146,0 @@ return depthMap[x[dataKey]] = depthMap[item[dataKey]] + 1;

package.json

 {
   "name": "react-base-table",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "a react table component to display large data set with high performance and flexibility",
@@ -50,3 +50,2 @@ "main": "lib/index.js",
     "prop-types": "^15.7.0",
-    "react-draggable": "^3.0.5",
     "react-virtualized-auto-sizer": "^1.0.2",
@@ -53,0 +52,0 @@ "react-window": "^1.8.2"

New alerts

License Policy Violation

License

This 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

License

This 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

800749

increased by0.84%

Dependency count

8

decreased by-11.11%

Lines of code

5981

increased by0.81%

Dependency changes

• - Removedreact-draggable@^3.0.5

• - Removedreact-draggable@3.3.2(transitive)