react-pivottable-secondary - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

package.json

 {
   "name": "react-pivottable-secondary",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A React-based pivot table secondary",
@@ -5,0 +5,0 @@ "main": "PivotTableUI.js",

TableRenderers.js

@@ -83,21 +83,7 @@ 'use strict';
 
-function getScrollbarWidth() {
-  var scrollDiv = document.createElement('div');
-  scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;';
-  document.body.appendChild(scrollDiv);
-  var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-  document.body.removeChild(scrollDiv);
-
-  return scrollbarWidth;
-}
-
 var DEFAULT_ROW_HEIGHT = 32; // 默认表格单行高度
-var OFFSET_HORIZONTAL = 300; // 横向滚动前、后偏移量
 
-
 function makeRenderer() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
-  var POSITION_TABLE_BODY = 'tableBody'; // 表示纵向滚动响应位置在表格内容上
-
   var TableRenderer = function (_React$PureComponent) {
@@ -111,9 +97,2 @@ _inherits(TableRenderer, _React$PureComponent);
 
-      _this.getHorizontalDom = function (dom) {
-        _this.horizontalDom = dom || _this.horizontalDom;
-      };
-      _this.getVirtualTableRef = function (dom) {
-        _this.virtualTable = dom || _this.virtualTable;
-        _this.setVirtualSize(dom);
-      };
       _this.valueCellColors = function () {};
@@ -123,21 +102,2 @@ _this.rowTotalColors = function () {};
       _this.getClickHandler = null;
-      _this.virtualTable = null;
-      _this.tableHeader = null;
-      _this.virtualTableWidth = 0; // 虚拟表格宽度
-      _this.scrollBarWidth = getScrollbarWidth(); // 滚动条宽度
-      _this.scrollDom = null; // 纵向假滚动条节点
-      _this.horizontalDom = null; // 横向滚动节点
-      _this.verticalDom = null; // 纵向滚动节点
-      _this.mousePosition = ''; // 鼠标所在位置，用于区别纵向滚动由哪个节点相应的
-      _this.state = {
-        totalHeight: 0, // 表格内容区域总高度
-        totalWidth: 0, // 表格内容区域总宽度
-        hiddenLeftStyle: { // 左侧隐藏样式
-          width: '0px'
-        },
-        hiddenRightStyle: { // 右侧隐藏样式
-          width: '0px'
-        },
-        colSize: [0, 0] // 可视区域显示的列号
-      };
       return _this;
@@ -148,117 +108,4 @@ }
       key: 'componentDidMount',
-      value: function componentDidMount() {
-        this.setVirtualSize();
-        this.setHorizontalData();
-        // 同步两边的滚动
-        (0, _jquery2.default)('.pivot-table-body').on('scroll', this.asyncTableScroll);
-      }
+      value: function componentDidMount() {}
     }, {
-      key: 'asyncTableScroll',
-      value: function asyncTableScroll() {
-        var scrollLeft = (0, _jquery2.default)(this).prop('scrollLeft');
-        (0, _jquery2.default)('.pivot-table-header').prop('scrollLeft', scrollLeft);
-      }
-      // 设置虚拟表格高度、宽度
-
-    }, {
-      key: 'setVirtualSize',
-      value: function setVirtualSize(dom) {
-        var virtualTable = dom || this.virtualTable;
-        var width = virtualTable.clientWidth;
-        if (width) {
-          this.virtualTableWidth = width;
-        }
-      }
-    }, {
-      key: 'getTableHeaderDom',
-
-
-      // getVirtualTableRef(dom) {
-      //   this.virtualTable = dom || this.virtualTable;
-      //   this.setVirtualSize(dom);
-      // };
-
-      value: function getTableHeaderDom(dom) {
-        this.tableHeader = dom || this.tableHeader;
-      }
-    }, {
-      key: 'getVerticalDom',
-      value: function getVerticalDom(dom) {
-        this.verticalDom = dom || this.verticalDom;
-      }
-    }, {
-      key: 'setHorizontalData',
-
-
-      // 设置虚拟表格横向数据；在横向滚动时使用
-      value: function setHorizontalData() {
-        var scrollLeft = this.horizontalDom && this.horizontalDom.scrollLeft;
-        var pivotData = new _Utilities.PivotData(this.props);
-        var rowAttrs = pivotData.props.rows;
-        var colKeys = pivotData.getColKeys();
-        var aggregatorGather = this.props.aggregatorGather;
-        var part1 = rowAttrs.length ? rowAttrs : [undefined];
-        var part2 = rowAttrs.length !== 0 && colKeys.length !== 0 ? [undefined] : [];
-        var part3 = colKeys;
-        var part4 = aggregatorGather;
-        var columns = [].concat(_toConsumableArray(part1), part2, _toConsumableArray(part3), _toConsumableArray(part4));
-        var oColSize = this.state.colSize;
-        // 表格内容可视区域的宽度
-
-        var width = this.virtualTableWidth;
-        var colSize = [];
-        var totalWidth = 0;
-        var hiddenLeftWidth = 0; // 左侧隐藏未被渲染的宽度
-        var hiddenRigthWidth = 0; // 右侧隐藏未被渲染的宽度
-        var currentStep = 0; // 0: 前面被隐藏阶段；1: 可视区域阶段；2: 后面不可见区域
-        if (!width) {
-          return;
-        }
-        columns.forEach(function (item, i) {
-          // const { width: colWidth = 150 } = item;
-          var colWidth = 120;
-          totalWidth += colWidth;
-          if (currentStep === 0) {
-            if (totalWidth >= scrollLeft - OFFSET_HORIZONTAL) {
-              // 根据 scrollLeft 算出可视区域起始行号
-              colSize[0] = i;
-              currentStep += 1;
-            } else {
-              hiddenLeftWidth += colWidth;
-            }
-          }
-          if (currentStep === 1 && totalWidth > scrollLeft + width + OFFSET_HORIZONTAL) {
-            // 计算出可视区域结束列号
-            colSize[1] = i;
-            currentStep += 1;
-          }
-          if (currentStep === 2) {
-            hiddenRigthWidth += colWidth;
-          }
-        });
-
-        if (oColSize.join() !== colSize.join()) {
-          // 可视区域的列号有了变化才重新进行渲染
-          this.setState({
-            hiddenLeftStyle: { width: hiddenLeftWidth + 'px' },
-            hiddenRightStyle: { width: hiddenRigthWidth + 'px' },
-            colSize: colSize,
-            totalWidth: totalWidth
-          });
-        }
-      }
-    }, {
-      key: 'handleHorizontalScroll',
-      value: function handleHorizontalScroll(e) {
-        e.stopPropagation();
-        var scrollLeft = e.target.scrollLeft;
-        // this.scrollDom && (this.scrollDom.scrollLeft = scrollLeft);
-        this.setHorizontalData();
-      }
-    }, {
-      key: 'handleBodyMouseEnter',
-      value: function handleBodyMouseEnter() {
-        this.mousePosition = POSITION_TABLE_BODY;
-      }
-    }, {
       key: 'tableHeaderRender',
@@ -359,9 +206,2 @@ value: function tableHeaderRender() {
 
-        var _state = this.state,
-            hiddenBottomStyle = _state.hiddenBottomStyle,
-            hiddenLeftStyle = _state.hiddenLeftStyle,
-            hiddenRightStyle = _state.hiddenRightStyle,
-            colSize = _state.colSize,
-            totalHeight = _state.totalHeight;
-
         var pivotData = new _Utilities.PivotData(this.props);
@@ -383,18 +223,9 @@ var colAttrs = pivotData.props.cols.length ? (0, _lodash.concat)(pivotData.props.cols, undefined) : [undefined, undefined];
         var cols = [];
-        // if (colSize[0]) {
-        //   cols.push(<col key="first" width={hiddenLeftStyle.width} />);
-        // }
         showCols.forEach(function (col, i) {
           var width = 120;
-          cols.push(_react2.default.createElement('col', { key: '' + (colSize[0] + i), width: width + 'px' }));
+          cols.push(_react2.default.createElement('col', { key: '' + i, width: width + 'px' }));
         });
-        // if (colSize[1]) {
-        //   cols.push(<col key="last" width={hiddenRightStyle.width} />);
-        // }
-
         return _react2.default.createElement(
           'div',
-          { className: 'pivot-table-body', ref: this.getHorizontalDom, onMouseEnter: function onMouseEnter() {
-              return _this2.handleBodyMouseEnter();
-            } },
+          { className: 'pivot-table-body' },
           _react2.default.createElement(
@@ -579,5 +410,3 @@ 'div',
       key: 'componentWillUnmount',
-      value: function componentWillUnmount() {
-        (0, _jquery2.default)('.pivot-table-body').off('scroll');
-      }
+      value: function componentWillUnmount() {}
     }, {
@@ -702,5 +531,3 @@ key: 'render',
           'div',
-          { className: 'use-virtual-table', ref: this.getVirtualTableRef, onScroll: function onScroll(e) {
-              return _this3.handleHorizontalScroll(e);
-            } },
+          { className: 'use-virtual-table' },
           _react2.default.createElement(
@@ -707,0 +534,0 @@ 'div',

No alert changes

Worsened metrics

Total package byte prevSize

289910

decreased by-5.57%

Lines of code

3013

decreased by-4.83%

No dependency changes