rsuite-table - npm Package Compare versions

Comparing version 3.7.1 to 3.8.0

CHANGELOG.md

@@ -0,1 +1,8 @@
+# 3.8.0
+
+- Added support for css import #118
+- Fixed the `affixHeader` feature, which does not hide the table header when the scrolling range is outside the Table body #109
+- Added support for RTL #101
+- Fix #114 #116
+
 # 3.7.1
@@ -2,0 +9,0 @@

lib/Cell.js

@@ -136,15 +136,13 @@ 'use strict';
       var nextHeight = isHeaderCell ? headerHeight : height;
-      var styles = {
+      var styles = _defineProperty({
         width: width,
         height: nextHeight,
-        zIndex: depth,
-        left: left
-      };
+        zIndex: depth
+      }, (0, _utils.isRTL)() ? 'right' : 'left', left);
 
-      var contentStyles = _extends({
+      var contentStyles = _extends(_defineProperty({
         width: width,
         height: nextHeight,
-        textAlign: align,
-        paddingLeft: firstColumn ? depth * _constants.LAYER_WIDTH + 10 : null
-      }, style);
+        textAlign: align
+      }, (0, _utils.isRTL)() ? 'paddingRight' : 'paddingLeft', firstColumn ? depth * _constants.LAYER_WIDTH + 10 : null), style);
 
@@ -191,3 +189,2 @@ if (verticalAlign) {
   classPrefix: (0, _utils.defaultClassPrefix)('table-cell'),
-  align: 'left',
   headerHeight: 36,
@@ -194,0 +191,0 @@ depth: 0,

lib/Table.js

@@ -333,5 +333,10 @@ 'use strict';
 
-      var columns = (0, _isArray3.default)(children) ? children.filter(function (col) {
-        return col;
-      }) : children;
+      var columns = children;
+
+      if ((0, _isArray3.default)(children)) {
+        columns = children.filter(function (col) {
+          return col;
+        });
+      }
+
       var tableWidth = this.state.width;
@@ -431,3 +436,3 @@ var _props3 = this.props,
      * 当用户在 Table 内使用 tab 键，触发了 onScroll 事件，这个时候应该更新滚动条位置
-     * Fix: https://github.com/rsuite/rsuite/issues/234
+     * https://github.com/rsuite/rsuite/issues/234
      */
@@ -675,2 +680,10 @@
 
+      var rowStyles = {};
+      var rowRight = 0;
+
+      if ((0, _utils.isRTL)() && contentWidth > width) {
+        rowRight = width - contentWidth;
+        rowStyles.right = rowRight;
+      }
+
       // IF there are fixed columns, add a fixed group
@@ -690,6 +703,15 @@ if (shouldFixedColumn && contentWidth > width) {
 
-          if (fixed === true || fixed === 'left') {
+
+          var isFixedStart = fixed === 'left' || fixed === true;
+          var isFixedEnd = fixed === 'right';
+
+          if ((0, _utils.isRTL)()) {
+            isFixedStart = fixed === 'right';
+            isFixedEnd = fixed === 'left' || fixed === true;
+          }
+
+          if (isFixedStart) {
             fixedLeftCells.push(cell);
             fixedLeftCellGroupWidth += _width2;
-          } else if (fixed === 'right') {
+          } else if (isFixedEnd) {
             fixedRightCells.push(cell);
@@ -704,3 +726,3 @@ fixedRightCellGroupWidth += _width2;
           _Row2.default,
-          props,
+          _extends({}, props, { style: rowStyles }),
           fixedLeftCellGroupWidth ? React.createElement(
@@ -713,5 +735,5 @@ _CellGroup2.default,
               updatePosition: this.translateDOMPositionXY,
-              style: (0, _utils.isRTL)() ? { right: width - fixedLeftCellGroupWidth } : null
+              style: (0, _utils.isRTL)() ? { right: width - fixedLeftCellGroupWidth - rowRight } : null
             },
-            (0, _utils.colSpanCells)(fixedLeftCells)
+            (0, _utils.colSpanCells)((0, _utils.resetLeftForCells)(fixedLeftCells))
           ) : null,
@@ -727,3 +749,3 @@ React.createElement(
               fixed: 'right',
-              style: (0, _utils.isRTL)() ? { right: 0 } : { left: width - fixedRightCellGroupWidth - _constants.SCROLLBAR_WIDTH },
+              style: (0, _utils.isRTL)() ? { right: 0 - rowRight } : { left: width - fixedRightCellGroupWidth - _constants.SCROLLBAR_WIDTH },
               height: props.isHeaderRow ? props.headerHeight : props.height,
@@ -741,3 +763,3 @@ width: fixedRightCellGroupWidth,
         _Row2.default,
-        props,
+        _extends({}, props, { style: rowStyles }),
         React.createElement(
@@ -1206,6 +1228,9 @@ _CellGroup2.default,
     var top = typeof affixHeader === 'number' ? affixHeader : 0;
-    var affixHeaderOffset = _this3.state.affixHeaderOffset;
+    var _state5 = _this3.state,
+        affixHeaderOffset = _state5.affixHeaderOffset,
+        contentHeight = _state5.contentHeight;
 
     var scrollY = window.scrollY || window.pageYOffset;
-    var fixedHeader = scrollY - (affixHeaderOffset.top - top) >= 0;
+    var fixedHeader = scrollY - (affixHeaderOffset.top - top) >= 0 && scrollY < affixHeaderOffset.top - top + contentHeight;
+
     if (_this3.affixHeaderWrapper) {
@@ -1305,3 +1330,7 @@ (0, _utils.toggleClass)(_this3.affixHeaderWrapper, 'fixed', fixedHeader);
         virtualized = _props14.virtualized;
+    var _state6 = _this3.state,
+        contentWidth = _state6.contentWidth,
+        width = _state6.width;
 
+
     if (!_this3.table) {
@@ -1311,3 +1340,3 @@ return;
 
-    var nextScrollX = _this3.scrollX - deltaX;
+    var nextScrollX = contentWidth <= width ? 0 : _this3.scrollX - deltaX;
     var nextScrollY = _this3.scrollY - deltaY;
@@ -1355,7 +1384,6 @@
   this.handleTouchMove = function (event) {
-    event.stopPropagation();
-    event.preventDefault();
+    var _props15 = _this3.props,
+        onTouchMove = _props15.onTouchMove,
+        autoHeight = _props15.autoHeight;
 
-    var onTouchMove = _this3.props.onTouchMove;
-
     var _ref2 = event.touches ? event.touches[0] : {},
@@ -1366,3 +1394,10 @@ nextPageX = _ref2.pageX,
     var deltaX = _this3.touchX - nextPageX;
-    var deltaY = _this3.touchY - nextPageY;
+    var deltaY = autoHeight ? 0 : _this3.touchY - nextPageY;
+
+    if (!_this3.shouldHandleWheelY(deltaY) && !_this3.shouldHandleWheelX(deltaX)) {
+      return;
+    }
+
+    event.preventDefault();
+
     _this3.handleWheel(deltaX, deltaY);
@@ -1396,9 +1431,7 @@ _this3.scrollbarX.onWheelScroll(deltaX);
   this.shouldHandleWheelX = function (delta) {
-    var _props15 = _this3.props,
-        disabledScroll = _props15.disabledScroll,
-        loading = _props15.loading;
-    var _state5 = _this3.state,
-        contentWidth = _state5.contentWidth,
-        width = _state5.width;
+    var _props16 = _this3.props,
+        disabledScroll = _props16.disabledScroll,
+        loading = _props16.loading;
 
+
     if (delta === 0 || disabledScroll || loading) {
@@ -1408,13 +1441,9 @@ return false;
 
-    if (width && contentWidth <= width) {
-      return false;
-    }
-
-    return delta >= 0 && _this3.scrollX > _this3.minScrollX || delta < 0 && _this3.scrollX < 0;
+    return true;
   };
 
   this.shouldHandleWheelY = function (delta) {
-    var _props16 = _this3.props,
-        disabledScroll = _props16.disabledScroll,
-        loading = _props16.loading;
+    var _props17 = _this3.props,
+        disabledScroll = _props17.disabledScroll,
+        loading = _props17.loading;
 
@@ -1458,5 +1487,5 @@ if (delta === 0 || disabledScroll || loading) {
     var top = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    var _props17 = _this3.props,
-        height = _props17.height,
-        headerHeight = _props17.headerHeight;
+    var _props18 = _this3.props,
+        height = _props18.height,
+        headerHeight = _props18.headerHeight;
     var contentHeight = _this3.state.contentHeight;
@@ -1463,0 +1492,0 @@

package.json

 {
   "name": "rsuite-table",
-  "version": "3.7.1",
+  "version": "3.8.0",
   "description": "A React table component",
   "main": "lib/index.js",
   "scripts": {
-    "build": "rm -rf lib && babel src --out-dir lib && cp -R src/less lib",
+    "build": "rm -rf lib && babel src --out-dir lib && cp -R src/less lib && npm run build-css",
+    "build-css": "gulp build",
     "dev": "NODE_ENV=development webpack-dev-server  --inline --progress --colors --port 3100 --host 0.0.0.0 ",
@@ -23,3 +24,4 @@ "docs": "rm -rf assets &&  NODE_ENV=production webpack",
     "lib",
-    "src"
+    "src",
+    "dist"
   ],
@@ -42,2 +44,3 @@ "repository": {
   "devDependencies": {
+    "autoprefixer": "^9.7.3",
     "babel-cli": "^6.26.0",
@@ -62,2 +65,3 @@ "babel-core": "^6.7.6",
     "css-loader": "^0.23.1",
+    "cssnano": "^4.1.10",
     "enzyme": "^3.1.0",
@@ -81,2 +85,7 @@ "enzyme-adapter-react-15": "^1.0.3",
     "gh-pages": "^0.12.0",
+    "gulp": "^4.0.2",
+    "gulp-less": "^4.0.0",
+    "gulp-postcss": "^7.0.1",
+    "gulp-rename": "^1.2.2",
+    "gulp-sourcemaps": "^2.6.4",
     "html-loader": "^0.4.3",
@@ -83,0 +92,0 @@ "html-webpack-plugin": "^2.28.0",

README.md

@@ -18,2 +18,3 @@ # rsuite-table
 - Support for expandable child nodes
+- Support for RTL
 
@@ -50,3 +51,3 @@ ## Preview
 import { Table, Column, HeaderCell, Cell } from 'rsuite-table';
-import 'rsuite-table/lib/less/index.less';
+import 'rsuite-table/lib/less/index.less'; // or 'rsuite-table/dist/css/rsuite-table.css'
 
@@ -53,0 +54,0 @@ const dataList = [

src/Cell.js

@@ -7,3 +7,3 @@ // @flow
 import { LAYER_WIDTH } from './constants';
-import { isNullOrUndefined, defaultClassPrefix, getUnhandledProps, prefix } from './utils';
+import { isNullOrUndefined, defaultClassPrefix, getUnhandledProps, prefix, isRTL } from './utils';
 
@@ -51,3 +51,2 @@ type Props = {
     classPrefix: defaultClassPrefix('table-cell'),
-    align: 'left',
     headerHeight: 36,
@@ -128,3 +127,3 @@ depth: 0,
       zIndex: depth,
-      left
+      [isRTL() ? 'right' : 'left']: left
     };
@@ -136,3 +135,3 @@
       textAlign: align,
-      paddingLeft: firstColumn ? depth * LAYER_WIDTH + 10 : null,
+      [isRTL() ? 'paddingRight' : 'paddingLeft']: firstColumn ? depth * LAYER_WIDTH + 10 : null,
       ...style
@@ -139,0 +138,0 @@ };

src/Table.js

@@ -353,5 +353,8 @@ // @flow
     const top = typeof affixHeader === 'number' ? affixHeader : 0;
-    const { affixHeaderOffset } = this.state;
+    const { affixHeaderOffset, contentHeight } = this.state;
     const scrollY = window.scrollY || window.pageYOffset;
-    const fixedHeader = scrollY - (affixHeaderOffset.top - top) >= 0;
+    const fixedHeader =
+      scrollY - (affixHeaderOffset.top - top) >= 0 &&
+      scrollY < affixHeaderOffset.top - top + contentHeight;
+
     if (this.affixHeaderWrapper) {
@@ -396,3 +399,8 @@ toggleClass(this.affixHeaderWrapper, 'fixed', fixedHeader);
 
-    const columns = _.isArray(children) ? children.filter(col => col) : children;
+    let columns = children;
+
+    if (_.isArray(children)) {
+      columns = children.filter(col => col);
+    }
+
     const { width: tableWidth } = this.state;
@@ -554,2 +562,4 @@ const { sortColumn, rowHeight, showHeader } = this.props;
     const { onScroll, virtualized } = this.props;
+    const { contentWidth, width } = this.state;
+
     if (!this.table) {
@@ -559,3 +569,3 @@ return;
 
-    const nextScrollX = this.scrollX - deltaX;
+    const nextScrollX = contentWidth <= width ? 0 : this.scrollX - deltaX;
     const nextScrollY = this.scrollY - deltaY;
@@ -601,9 +611,13 @@
   handleTouchMove = (event: SyntheticTouchEvent<*>) => {
-    event.stopPropagation();
+    const { onTouchMove, autoHeight } = this.props;
+    const { pageX: nextPageX, pageY: nextPageY } = event.touches ? event.touches[0] : {};
+    const deltaX = this.touchX - nextPageX;
+    const deltaY = autoHeight ? 0 : this.touchY - nextPageY;
+
+    if (!this.shouldHandleWheelY(deltaY) && !this.shouldHandleWheelX(deltaX)) {
+      return;
+    }
+
     event.preventDefault();
 
-    const { onTouchMove } = this.props;
-    const { pageX: nextPageX, pageY: nextPageY } = event.touches ? event.touches[0] : {};
-    const deltaX = this.touchX - nextPageX;
-    const deltaY = this.touchY - nextPageY;
     this.handleWheel(deltaX, deltaY);
@@ -620,3 +634,3 @@ this.scrollbarX.onWheelScroll(deltaX);
    * 当用户在 Table 内使用 tab 键，触发了 onScroll 事件，这个时候应该更新滚动条位置
-   * Fix: https://github.com/rsuite/rsuite/issues/234
+   * https://github.com/rsuite/rsuite/issues/234
    */
@@ -694,3 +708,3 @@ handleBodyScroll = (event: SyntheticTouchEvent<*>) => {
     const { disabledScroll, loading } = this.props;
-    const { contentWidth, width } = this.state;
+
     if (delta === 0 || disabledScroll || loading) {
@@ -700,7 +714,3 @@ return false;
 
-    if (width && contentWidth <= width) {
-      return false;
-    }
-
-    return (delta >= 0 && this.scrollX > this.minScrollX) || (delta < 0 && this.scrollX < 0);
+    return true;
   };
@@ -1007,2 +1017,10 @@ shouldHandleWheelY = (delta: number) => {
 
+    const rowStyles = {};
+    let rowRight = 0;
+
+    if (isRTL() && contentWidth > width) {
+      rowRight = width - contentWidth;
+      rowStyles.right = rowRight;
+    }
+
     // IF there are fixed columns, add a fixed group
@@ -1019,6 +1037,15 @@ if (shouldFixedColumn && contentWidth > width) {
         const { fixed, width } = cell.props;
-        if (fixed === true || fixed === 'left') {
+
+        let isFixedStart = fixed === 'left' || fixed === true;
+        let isFixedEnd = fixed === 'right';
+
+        if (isRTL()) {
+          isFixedStart = fixed === 'right';
+          isFixedEnd = fixed === 'left' || fixed === true;
+        }
+
+        if (isFixedStart) {
           fixedLeftCells.push(cell);
           fixedLeftCellGroupWidth += width;
-        } else if (fixed === 'right') {
+        } else if (isFixedEnd) {
           fixedRightCells.push(cell);
@@ -1032,3 +1059,3 @@ fixedRightCellGroupWidth += width;
       return (
-        <Row {...props}>
+        <Row {...props} style={rowStyles}>
           {fixedLeftCellGroupWidth ? (
@@ -1040,5 +1067,5 @@ <CellGroup
               updatePosition={this.translateDOMPositionXY}
-              style={isRTL() ? { right: width - fixedLeftCellGroupWidth } : null}
+              style={isRTL() ? { right: width - fixedLeftCellGroupWidth - rowRight } : null}
             >
-              {colSpanCells(fixedLeftCells)}
+              {colSpanCells(resetLeftForCells(fixedLeftCells))}
             </CellGroup>
@@ -1056,3 +1083,3 @@ ) : null}
                 isRTL()
-                  ? { right: 0 }
+                  ? { right: 0 - rowRight }
                   : { left: width - fixedRightCellGroupWidth - SCROLLBAR_WIDTH }
@@ -1074,3 +1101,3 @@ }
     return (
-      <Row {...props}>
+      <Row {...props} style={rowStyles}>
         <CellGroup updatePosition={this.translateDOMPositionXY}>{colSpanCells(cells)}</CellGroup>
@@ -1077,0 +1104,0 @@ {shouldRenderExpandedRow && this.renderRowExpanded(rowData)}

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

251121

increased by10.78%

Number of package files

75

increased by4.17%

Lines of code

5213

increased by7.93%

Number of lines in readme file

209

increased by0.48%

Worsened metrics

Dev dependency count

74

increased by10.45%

No dependency changes