fast-table - npm Package Compare versions

Comparing version 1.4.8-beta.31 to 1.4.8-beta.32

lib/BaseTable.js

@@ -357,2 +357,8 @@ "use strict";
       var fixedData = dataManager.getFixedData() || [];
+      var top = undefined,
+          bottom = undefined;
+      fixedData.forEach(function (fd) {
+        if (fd[_types.DS._isFixed] === true || fd[_types.DS._isFixed] === 'top') top = fd;
+        if (fd[_types.DS._isFixed] === 'bottom' && bottom === undefined) bottom = fd;
+      });
       dataSource = dataSource.filter(function (d) {
@@ -376,2 +382,4 @@ return !dataManager.isFixed(d);
         };
+        if (top === record) rowProps.isTop = true;
+        if (bottom === record) rowProps.isBottom = true;
         (0, _utils.keys)(onRow(record) || {}, record[_types.DS._index]).forEach(function (event) {
@@ -378,0 +386,0 @@ return rowProps[event] = _this.fEvents;

lib/index.js

@@ -93,6 +93,2 @@ "use strict";
 
-    _defineProperty(_assertThisInitialized(_this), "updateAll", function () {
-      _this.resetShowData();
-    });
-
     _defineProperty(_assertThisInitialized(_this), "getProps", function (prop) {
@@ -154,2 +150,71 @@ return _this.props[prop];
 
+    _defineProperty(_assertThisInitialized(_this), "setPositionClass", function (tg) {
+      var target = tg;
+
+      if (!target) {
+        target = _this['bodyTable'];
+      }
+
+      if (!target) return;
+      var left = target.scrollLeft;
+      var top = target.scrollTop;
+      var clientWidth = target.clientWidth;
+      var clientHeight = target.clientHeight;
+      var scrollHeight = target.scrollHeight;
+      var scrollWidth = target.scrollWidth;
+      var position = {};
+      var xp;
+
+      if (!_this.sizeManager._hasScrollX) {
+        xp = 'clear';
+      } else {
+        if (left === 0) {
+          xp = 'x-left';
+        } else if (left + clientWidth < scrollWidth) {
+          xp = 'x-middle';
+        } else if (left + clientWidth === scrollWidth) {
+          xp = 'x-right';
+        }
+      }
+
+      if (xp) position.xp = xp;
+      var yp;
+
+      if (!_this.sizeManager._hasScrollY) {
+        yp = 'clear';
+      } else {
+        if (top === 0) {
+          yp = 'y-top';
+        } else if (top + clientHeight < scrollHeight) {
+          yp = 'y-middle';
+        } else if (top + clientHeight === scrollHeight) {
+          yp = 'y-bottom';
+        }
+      }
+
+      if (yp) position.yp = yp;
+
+      if (_this.position.xp !== position.xp || _this.position.yp !== position.yp) {
+        _this.position = position;
+
+        var _assertThisInitialize = _assertThisInitialized(_this),
+            tableNode = _assertThisInitialize.tableNode;
+
+        if (tableNode) {
+          var prefixCls = _this.props.prefixCls;
+          var cs = (0, _componentClasses["default"])(tableNode);
+
+          if (position.xp) {
+            cs.remove(new RegExp("^".concat(prefixCls, "-scroll-position-x-.+$")));
+            position.xp !== 'clear' && cs.add("".concat(prefixCls, "-scroll-position-").concat(position.xp));
+          }
+
+          if (position.yp) {
+            cs.remove(new RegExp("^".concat(prefixCls, "-scroll-position-y-.+$")));
+            position.yp !== 'clear' && cs.add("".concat(prefixCls, "-scroll-position-").concat(position.yp));
+          }
+        }
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "handleBodyScroll", function (e) {
@@ -165,2 +230,8 @@ var onScroll = _this.props.onScroll;
       }
+
+      if (e.target !== e.currentTarget) {
+        return;
+      }
+
+      _this.setPositionClass(e.target);
     });
@@ -175,5 +246,5 @@
 
-      var _assertThisInitialize = _assertThisInitialized(_this),
-          headTable = _assertThisInitialize.headTable,
-          bodyTable = _assertThisInitialize.bodyTable;
+      var _assertThisInitialize2 = _assertThisInitialized(_this),
+          headTable = _assertThisInitialize2.headTable,
+          bodyTable = _assertThisInitialize2.bodyTable;
 
@@ -183,5 +254,4 @@ if (target.scrollLeft !== _this.lastScrollLeft) {
           headTable.scrollLeft = target.scrollLeft;
-        }
+        } // this.setScrollPositionClassName();
 
-        _this.setScrollPositionClassName();
       }
@@ -197,5 +267,5 @@
     _defineProperty(_assertThisInitialized(_this), "updateScrollLeft", function (scrollLeft) {
-      var _assertThisInitialize2 = _assertThisInitialized(_this),
-          headTable = _assertThisInitialize2.headTable,
-          bodyTable = _assertThisInitialize2.bodyTable;
+      var _assertThisInitialize3 = _assertThisInitialized(_this),
+          headTable = _assertThisInitialize3.headTable,
+          bodyTable = _assertThisInitialize3.bodyTable;
 
@@ -213,5 +283,6 @@ if (!bodyTable || bodyTable.scrollHeight === 0) {
           bodyTable.scrollLeft = scrollLeft;
-        }
+        } // this.setScrollPositionClassName();
 
-        _this.setScrollPositionClassName();
+
+        _this.setPositionClass();
       }
@@ -243,4 +314,4 @@
 
-      var _assertThisInitialize3 = _assertThisInitialized(_this),
-          headTable = _assertThisInitialize3.headTable;
+      var _assertThisInitialize4 = _assertThisInitialized(_this),
+          headTable = _assertThisInitialize4.headTable;
 
@@ -314,4 +385,2 @@ if (_this.lastScrollTop !== target.scrollTop && target !== headTable) {
     _defineProperty(_assertThisInitialized(_this), "resetShowData", function (target) {
-      var _scrollTop = _this.sizeManager._scrollTop;
-
       if (target) {
@@ -399,9 +468,3 @@ _this.sizeManager.update({
           bordered = _this$props2.bordered;
-      var flag = false;
-
-      if (_this.sizeManager._hasScrollX) {
-        flag = !(_this['bodyTable'] && _this['bodyTable'].scrollLeft !== 0);
-      }
-
-      return (0, _classnames["default"])(prefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-fixed-header"), fixedHeader), _defineProperty(_classNames, "bordered", bordered), _defineProperty(_classNames, "".concat(prefixCls, "-expanded"), _this.dataManager.isExpanded()), _defineProperty(_classNames, "".concat(prefixCls, "-scroll-position-left"), flag), _classNames));
+      return (0, _classnames["default"])(prefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-fixed-header"), fixedHeader), _defineProperty(_classNames, "bordered", bordered), _defineProperty(_classNames, "".concat(prefixCls, "-expanded"), _this.dataManager.isExpanded()), _defineProperty(_classNames, "".concat(prefixCls, "-scroll-position-y-top"), _this.sizeManager._hasScrollY && _this.sizeManager._scrollTop === 0), _classNames));
     });
@@ -544,2 +607,3 @@
     _this.refreshAble = true;
+    _this.position = [];
     _this.showCount = props.defaultShowCount || 20;
@@ -565,3 +629,3 @@ _this.columnManager = new _ColumnManager["default"](props);
       getProps: _this.getProps,
-      update: _this.updateAll
+      update: _this.resetShowData
     });
@@ -589,3 +653,3 @@ _this.store = (0, _miniStore.create)({
         updateScrollLeft: this.updateScrollLeft,
-        update: this.updateAll,
+        update: this.resetShowData,
         getProps: this.getProps
@@ -673,44 +737,6 @@ };
     value: function componentDidUpdate() {
-      this.setScrollPositionClassName();
+      this.setPositionClass();
       this.skipIndex();
     }
   }, {
-    key: "setScrollPosition",
-    value: function setScrollPosition(position) {
-      this.scrollPosition = position;
-      var tableNode = this.tableNode;
-
-      if (tableNode) {
-        var prefixCls = this.props.prefixCls;
-
-        if (position === 'clear') {
-          (0, _componentClasses["default"])(tableNode).remove(new RegExp("^".concat(prefixCls, "-scroll-position-.+$")));
-        } else if (position === 'both') {
-          (0, _componentClasses["default"])(tableNode).remove(new RegExp("^".concat(prefixCls, "-scroll-position-.+$"))).add("".concat(prefixCls, "-scroll-position-left")).add("".concat(prefixCls, "-scroll-position-right"));
-        } else {
-          (0, _componentClasses["default"])(tableNode).remove(new RegExp("^".concat(prefixCls, "-scroll-position-.+$"))).add("".concat(prefixCls, "-scroll-position-").concat(position));
-        }
-      }
-    }
-  }, {
-    key: "setScrollPositionClassName",
-    value: function setScrollPositionClassName() {
-      var node = this['bodyTable'];
-      if (!node) return;
-      var scrollToLeft = node.scrollLeft === 0;
-      var scrollToRight = node.scrollLeft + 1 >= node.children[0].getBoundingClientRect().width - node.getBoundingClientRect().width;
-
-      if (!this.sizeManager._hasScrollX) {
-        this.setScrollPosition('clear');
-      } else if (scrollToLeft && scrollToRight) {
-        this.setScrollPosition('both');
-      } else if (scrollToLeft) {
-        this.setScrollPosition('left');
-      } else if (scrollToRight) {
-        this.setScrollPosition('right');
-      } else if (this.scrollPosition !== 'middle') {
-        this.setScrollPosition('middle');
-      }
-    }
-  }, {
     key: "render",
@@ -717,0 +743,0 @@ value: function render() {

lib/managers/DataManager.js

@@ -209,3 +209,3 @@ "use strict";
         if (_this.isFixed(record)) {
-          record[_types.DS._isFixed] = record['isFixed'];
+          record[_types.DS._isFixed] = record['isFixed'] === true ? 'top' : record['isFixed'];
         }
@@ -289,3 +289,3 @@
 
-      return (0, _classnames["default"])('tr', "".concat(prefixCls, "-row"), className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-expanded-row-").concat(level), _this._hasExpanded), _defineProperty(_classNames, "".concat(prefixCls, "-row-fixed"), record[_types.DS._isFixed]), _classNames));
+      return (0, _classnames["default"])('tr', "".concat(prefixCls, "-row"), className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-expanded-row-").concat(level), _this._hasExpanded), _defineProperty(_classNames, "".concat(prefixCls, "-row-fixed"), !!record[_types.DS._isFixed]), _classNames));
     });
@@ -292,0 +292,0 @@

lib/TableRow.js

@@ -19,2 +19,4 @@ "use strict";
 function Row(props) {
+  var _classNames;
+
   var prefixCls = props.prefixCls,
@@ -24,4 +26,6 @@ hovered = props.hovered,
       style = props.style,
-      record = props.record;
-  var rowClass = (0, _classnames["default"])(record[_types.DS._rowClassName], _defineProperty({}, "".concat(prefixCls, "-hover"), hovered));
+      record = props.record,
+      isTop = props.isTop,
+      isBottom = props.isBottom;
+  var rowClass = (0, _classnames["default"])(record[_types.DS._rowClassName], (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-hover"), hovered), _defineProperty(_classNames, "".concat(prefixCls, "-fixed-top"), !!isTop), _defineProperty(_classNames, "".concat(prefixCls, "-fixed-bottom"), !!isBottom), _classNames));
   var newProps = {
@@ -28,0 +32,0 @@ className: rowClass,

package.json

 {
   "name": "fast-table",
-  "version": "1.4.8-beta.31",
+  "version": "1.4.8-beta.32",
   "description": "react table fast",
@@ -5,0 +5,0 @@ "main": "./lib/index.js",

src/BaseTable.js

@@ -295,2 +295,8 @@ import React from 'react';
     const fixedData = dataManager.getFixedData() || [];
+    let top = undefined,
+      bottom = undefined;
+    fixedData.forEach((fd) => {
+      if (fd[DS._isFixed] === true || fd[DS._isFixed] === 'top') top = fd;
+      if (fd[DS._isFixed] === 'bottom' && bottom === undefined) bottom = fd;
+    });
     dataSource = dataSource
@@ -311,2 +317,4 @@ .filter((d) => !dataManager.isFixed(d))
       };
+      if (top === record) rowProps.isTop = true;
+      if (bottom === record) rowProps.isBottom = true;
       keys(onRow(record) || {}, record[DS._index]).forEach(
@@ -313,0 +321,0 @@ (event) => (rowProps[event] = this.fEvents)

src/index.js

@@ -43,2 +43,3 @@ import React from 'react';
     this.refreshAble = true;
+    this.position = [];
     this.showCount = props.defaultShowCount || 20;
@@ -63,3 +64,3 @@ this.columnManager = new ColumnManager(props);
       getProps: this.getProps,
-      update: this.updateAll
+      update: this.resetShowData
     });
@@ -90,7 +91,6 @@
       updateScrollLeft: this.updateScrollLeft,
-      update: this.updateAll,
+      update: this.resetShowData,
       getProps: this.getProps
     };
   }
-
   componentWillReceiveProps(nextProps) {
@@ -158,14 +158,8 @@ const update = new Set();
   componentDidUpdate() {
-    this.setScrollPositionClassName();
+    this.setPositionClass();
     this.skipIndex();
   }
 
-  updateAll = () => {
-    this.resetShowData();
-  };
+  getProps = (prop) => this.props[prop];
 
-  getProps = (prop) => {
-    return this.props[prop];
-  };
-
   getShowCount = () => {
@@ -214,44 +208,60 @@ const {showHeader} = this.props;
 
-  setScrollPosition(position) {
-    this.scrollPosition = position;
-    const {tableNode} = this;
-    if (tableNode) {
-      const {prefixCls} = this.props;
-      if (position === 'clear') {
-        classes(tableNode).remove(
-          new RegExp(`^${prefixCls}-scroll-position-.+$`)
-        );
-      } else if (position === 'both') {
-        classes(tableNode)
-          .remove(new RegExp(`^${prefixCls}-scroll-position-.+$`))
-          .add(`${prefixCls}-scroll-position-left`)
-          .add(`${prefixCls}-scroll-position-right`);
-      } else {
-        classes(tableNode)
-          .remove(new RegExp(`^${prefixCls}-scroll-position-.+$`))
-          .add(`${prefixCls}-scroll-position-${position}`);
-      }
+  setPositionClass = (tg) => {
+    let target = tg;
+    if (!target) {
+      target = this['bodyTable'];
     }
-  }
-
-  setScrollPositionClassName() {
-    const node = this['bodyTable'];
-    if (!node) return;
-    const scrollToLeft = node.scrollLeft === 0;
-    const scrollToRight =
-      node.scrollLeft + 1 >=
-      node.children[0].getBoundingClientRect().width -
-        node.getBoundingClientRect().width;
+    if (!target) return;
+    const left = target.scrollLeft;
+    const top = target.scrollTop;
+    const clientWidth = target.clientWidth;
+    const clientHeight = target.clientHeight;
+    const scrollHeight = target.scrollHeight;
+    const scrollWidth = target.scrollWidth;
+    let position = {};
+    let xp;
     if (!this.sizeManager._hasScrollX) {
-      this.setScrollPosition('clear');
-    } else if (scrollToLeft && scrollToRight) {
-      this.setScrollPosition('both');
-    } else if (scrollToLeft) {
-      this.setScrollPosition('left');
-    } else if (scrollToRight) {
-      this.setScrollPosition('right');
-    } else if (this.scrollPosition !== 'middle') {
-      this.setScrollPosition('middle');
+      xp = 'clear';
+    } else {
+      if (left === 0) {
+        xp = 'x-left';
+      } else if (left + clientWidth < scrollWidth) {
+        xp = 'x-middle';
+      } else if (left + clientWidth === scrollWidth) {
+        xp = 'x-right';
+      }
     }
-  }
+    if (xp) position.xp = xp;
+    let yp;
+    if (!this.sizeManager._hasScrollY) {
+      yp = 'clear';
+    } else {
+      if (top === 0) {
+        yp = 'y-top';
+      } else if (top + clientHeight < scrollHeight) {
+        yp = 'y-middle';
+      } else if (top + clientHeight === scrollHeight) {
+        yp = 'y-bottom';
+      }
+    }
+    if (yp) position.yp = yp;
+    if (this.position.xp !== position.xp || this.position.yp !== position.yp) {
+      this.position = position;
+      const {tableNode} = this;
+      if (tableNode) {
+        const {prefixCls} = this.props;
+        let cs = classes(tableNode);
+        if (position.xp) {
+          cs.remove(new RegExp(`^${prefixCls}-scroll-position-x-.+$`));
+          position.xp !== 'clear' &&
+            cs.add(`${prefixCls}-scroll-position-${position.xp}`);
+        }
+        if (position.yp) {
+          cs.remove(new RegExp(`^${prefixCls}-scroll-position-y-.+$`));
+          position.yp !== 'clear' &&
+            cs.add(`${prefixCls}-scroll-position-${position.yp}`);
+        }
+      }
+    }
+  };
 
@@ -265,2 +275,7 @@ handleBodyScroll = (e) => {
     }
+
+    if (e.target !== e.currentTarget) {
+      return;
+    }
+    this.setPositionClass(e.target);
   };
@@ -278,3 +293,3 @@
       }
-      this.setScrollPositionClassName();
+      // this.setScrollPositionClassName();
     }
@@ -297,3 +312,4 @@ this.lastScrollLeft = target.scrollLeft;
       }
-      this.setScrollPositionClassName();
+      // this.setScrollPositionClassName();
+      this.setPositionClass();
     }
@@ -378,3 +394,2 @@ this.lastScrollLeft = scrollLeft;
   resetShowData = (target) => {
-    let _scrollTop = this.sizeManager._scrollTop;
     if (target) {
@@ -445,6 +460,2 @@ this.sizeManager.update({_scrollTop: target.scrollTop});
     const {prefixCls, className, fixedHeader, bordered} = this.props;
-    let flag = false;
-    if (this.sizeManager._hasScrollX) {
-      flag = !(this['bodyTable'] && this['bodyTable'].scrollLeft !== 0);
-    }
     return classNames(prefixCls, className, {
@@ -454,3 +465,4 @@ [`${prefixCls}-fixed-header`]: fixedHeader,
       [`${prefixCls}-expanded`]: this.dataManager.isExpanded(),
-      [`${prefixCls}-scroll-position-left`]: flag
+      [`${prefixCls}-scroll-position-y-top`]:
+        this.sizeManager._hasScrollY && this.sizeManager._scrollTop === 0
     });
@@ -457,0 +469,0 @@ };

src/managers/DataManager.js

@@ -153,3 +153,4 @@ import React from 'react';
       if (this.isFixed(record)) {
-        record[DS._isFixed] = record['isFixed'];
+        record[DS._isFixed] =
+          record['isFixed'] === true ? 'top' : record['isFixed'];
       }
@@ -224,5 +225,5 @@ if (children.length > 0) {
       [`${prefixCls}-expanded-row-${level}`]: this._hasExpanded,
-      [`${prefixCls}-row-fixed`]: record[DS._isFixed]
+      [`${prefixCls}-row-fixed`]: !!record[DS._isFixed]
     });
   };
 }

src/TableRow.js

@@ -14,5 +14,7 @@ import React from 'react';
 function Row(props: Props) {
-  const {prefixCls, hovered, children, style, record} = props;
+  const {prefixCls, hovered, children, style, record, isTop, isBottom} = props;
   const rowClass = classNames(record[DS._rowClassName], {
-    [`${prefixCls}-hover`]: hovered
+    [`${prefixCls}-hover`]: hovered,
+    [`${prefixCls}-fixed-top`]: !!isTop,
+    [`${prefixCls}-fixed-bottom`]: !!isBottom
   });
@@ -19,0 +21,0 @@ const newProps = {

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

274808

increased by0.94%

Lines of code

6922

increased by1.07%

No dependency changes