rsuite-table - npm Package Compare versions

Comparing version 3.2.0 to 3.3.0-beta

lib/CellGroup.js

@@ -31,2 +31,4 @@ 'use strict';
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
@@ -62,2 +64,4 @@
     value: function render() {
+      var _classNames;
+
       var _props = this.props,
@@ -73,3 +77,3 @@ fixed = _props.fixed,
 
-      var classes = (0, _classnames2.default)(classPrefix, className, this.addPrefix(fixed ? 'fixed' : 'scroll'));
+      var classes = (0, _classnames2.default)(classPrefix, className, (_classNames = {}, _defineProperty(_classNames, this.addPrefix('fixed-' + (fixed || '')), fixed), _defineProperty(_classNames, this.addPrefix('scroll'), !fixed), _classNames));
       var styles = _extends({
@@ -95,3 +99,3 @@ width: width,
 CellGroup.propTypes = {
-  fixed: _propTypes2.default.bool,
+  fixed: _propTypes2.default.oneOf(['left', 'right']),
   width: _propTypes2.default.number,
@@ -98,0 +102,0 @@ height: _propTypes2.default.number,

lib/HeaderCell.js

@@ -80,3 +80,3 @@ 'use strict';
       _this.setState({ initialEvent: event });
-      onColumnResizeStart && onColumnResizeStart(_this.state.columnWidth, left, fixed);
+      onColumnResizeStart && onColumnResizeStart(_this.state.columnWidth, left, !!fixed);
     };
@@ -140,3 +140,3 @@
         columnLeft: left,
-        columnFixed: fixed,
+        columnFixed: !!fixed,
         height: headerHeight ? headerHeight - 1 : undefined,
@@ -237,3 +237,3 @@ initialEvent: initialEvent,
   flexGrow: _propTypes2.default.number,
-  fixed: _propTypes2.default.bool
+  fixed: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.oneOf(['left']), _propTypes2.default.oneOf(['right'])])
 };
@@ -240,0 +240,0 @@

lib/Table.js

@@ -104,2 +104,4 @@ 'use strict';
 
+var SCROLLBAR_WIDHT = 10;
+
 function findRowKeys(rows, rowKey, expanded) {
@@ -118,2 +120,11 @@ var keys = [];
 
+function resetLeftForCells(cells) {
+  var left = 0;
+  return cells.map(function (cell) {
+    var nextCell = React.cloneElement(cell, { left: left });
+    left += cell.props.width;
+    return nextCell;
+  });
+}
+
 var Table = function (_React$Component) {
@@ -219,6 +230,11 @@ _inherits(Table, _React$Component);
   }, {
-    key: 'getFixedCellGroups',
-    value: function getFixedCellGroups() {
-      return this.table.querySelectorAll('.' + this.addPrefix('cell-group-fixed'));
+    key: 'getFixedLeftCellGroups',
+    value: function getFixedLeftCellGroups() {
+      return this.table.querySelectorAll('.' + this.addPrefix('cell-group-fixed-left'));
     }
+  }, {
+    key: 'getFixedRightCellGroups',
+    value: function getFixedRightCellGroups() {
+      return this.table.querySelectorAll('.' + this.addPrefix('cell-group-fixed-right'));
+    }
 
@@ -389,4 +405,10 @@ /**
       var scrollGroups = this.getScrollCellGroups();
-      var fixedGroups = this.getFixedCellGroups();
+      var fixedLeftGroups = this.getFixedLeftCellGroups();
+      var fixedRightGroups = this.getFixedRightCellGroups();
 
+      var _state = this.state,
+          contentWidth = _state.contentWidth,
+          width = _state.width;
+
+
       (0, _domLib.translateDOMPositionXY)(wheelGroupStyle, this.scrollX, 0);
@@ -402,8 +424,9 @@ (0, _domLib.translateDOMPositionXY)(wheelStyle, 0, this.scrollY);
 
-      var shadowClassName = this.addPrefix('cell-group-shadow');
-      var condition = this.scrollX < 0;
+      var leftShadowClassName = this.addPrefix('cell-group-left-shadow');
+      var rightShadowClassName = this.addPrefix('cell-group-right-shadow');
+      var showLeftShadow = this.scrollX < 0;
+      var showRightShadow = width - contentWidth - SCROLLBAR_WIDHT !== this.scrollX;
 
-      Array.from(fixedGroups).forEach(function (group) {
-        (0, _utils.toggleClass)(group, shadowClassName, condition);
-      });
+      (0, _utils.toggleClass)(fixedLeftGroups, leftShadowClassName, showLeftShadow);
+      (0, _utils.toggleClass)(fixedRightGroups, rightShadowClassName, showRightShadow);
     }
@@ -440,3 +463,3 @@ }, {
       // 这里 -10 是为了让滚动条不挡住内容部分
-      this.minScrollX = -(contentWidth - this.state.width) - 10;
+      this.minScrollX = -(contentWidth - this.state.width) - SCROLLBAR_WIDHT;
 
@@ -578,3 +601,6 @@ /**
       var rowClassName = this.props.rowClassName;
-      var shouldFixedColumn = this.state.shouldFixedColumn;
+      var _state2 = this.state,
+          shouldFixedColumn = _state2.shouldFixedColumn,
+          width = _state2.width,
+          contentWidth = _state2.contentWidth;
 
@@ -589,32 +615,52 @@
       // IF there are fixed columns, add a fixed group
-      if (shouldFixedColumn) {
-        var fixedCells = cells.filter(function (cell) {
-          return cell.props.fixed;
+      if (shouldFixedColumn && contentWidth > width) {
+        var fixedLeftCells = [];
+        var fixedRightCells = [];
+        var scrollCells = [];
+        var fixedLeftCellGroupWidth = 0;
+        var fixedRightCellGroupWidth = 0;
+
+        cells.forEach(function (cell) {
+          var _cell$props = cell.props,
+              fixed = _cell$props.fixed,
+              width = _cell$props.width;
+
+          if (fixed === true || fixed === 'left') {
+            fixedLeftCells.push(cell);
+            fixedLeftCellGroupWidth += width;
+          } else if (fixed === 'right') {
+            fixedRightCells.push(cell);
+            fixedRightCellGroupWidth += width;
+          } else {
+            scrollCells.push(cell);
+          }
         });
-        var otherCells = cells.filter(function (cell) {
-          return !cell.props.fixed;
-        });
-        var fixedCellGroupWidth = 0;
 
-        for (var i = 0; i < fixedCells.length; i += 1) {
-          fixedCellGroupWidth += fixedCells[i].props.width;
-        }
-
         return React.createElement(
           _Row2.default,
           props,
-          React.createElement(
+          fixedLeftCellGroupWidth ? React.createElement(
             _CellGroup2.default,
             {
-              fixed: true,
+              fixed: 'left',
               height: props.isHeaderRow ? props.headerHeight : props.height,
-              width: fixedCellGroupWidth
+              width: fixedLeftCellGroupWidth
             },
-            (0, _utils.colSpanCells)(fixedCells)
-          ),
+            (0, _utils.colSpanCells)(fixedLeftCells)
+          ) : null,
           React.createElement(
             _CellGroup2.default,
             null,
-            (0, _utils.colSpanCells)(otherCells)
+            (0, _utils.colSpanCells)(scrollCells)
           ),
+          fixedRightCellGroupWidth ? React.createElement(
+            _CellGroup2.default,
+            {
+              fixed: 'right',
+              style: { left: width - fixedRightCellGroupWidth - SCROLLBAR_WIDHT },
+              height: props.isHeaderRow ? props.headerHeight : props.height,
+              width: fixedRightCellGroupWidth
+            },
+            (0, _utils.colSpanCells)(resetLeftForCells(fixedRightCells))
+          ) : null,
           shouldRenderExpandedRow && this.renderRowExpanded(rowData)
@@ -801,5 +847,5 @@ );
       var headerHeight = this.getTableHeaderHeight();
-      var _state = this.state,
-          contentWidth = _state.contentWidth,
-          contentHeight = _state.contentHeight;
+      var _state3 = this.state,
+          contentWidth = _state3.contentWidth,
+          contentHeight = _state3.contentHeight;
 
@@ -960,3 +1006,3 @@ var height = this.getTableHeight();
   children: function children() {
-    return (typeof (React.ChildrenArray == null ? {} : React.ChildrenArray) === 'function' ? _propTypes2.default.instanceOf(React.ChildrenArray == null ? {} : React.ChildrenArray) : _propTypes2.default.any).apply(this, arguments);
+    return (typeof (React.ChildrenArray == null ? {} : React.ChildrenArray) === 'function' ? _propTypes2.default.instanceOf(React.ChildrenArray == null ? {} : React.ChildrenArray).isRequired : _propTypes2.default.any.isRequired).apply(this, arguments);
   },
@@ -1115,5 +1161,5 @@ bordered: _propTypes2.default.bool,
         loading = _props12.loading;
-    var _state2 = _this6.state,
-        contentWidth = _state2.contentWidth,
-        width = _state2.width;
+    var _state4 = _this6.state,
+        contentWidth = _state4.contentWidth,
+        width = _state4.width;
 
@@ -1120,0 +1166,0 @@ if (delta === 0 || disabledScroll || loading) {

lib/utils/toggleClass.js

@@ -17,2 +17,14 @@ 'use strict';
 
-exports.default = toggleClass;
+exports.default = function (node, className, condition) {
+  if (!node) {
+    return;
+  }
+
+  if (node.__proto__.hasOwnProperty('length')) {
+    Array.from(node).forEach(function (item) {
+      toggleClass(item, className, condition);
+    });
+    return;
+  }
+  toggleClass(node, className, condition);
+};

package.json

 {
   "name": "rsuite-table",
-  "version": "3.2.0",
+  "version": "3.3.0-beta",
   "description": "A React table component",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/CellGroup.js

@@ -10,3 +10,3 @@ // @flow
 type Props = {
-  fixed?: boolean,
+  fixed?: 'left' | 'right',
   width?: number,
@@ -29,3 +29,6 @@ height?: number,
     const { fixed, width, left, height, style, classPrefix, className, ...rest } = this.props;
-    const classes = classNames(classPrefix, className, this.addPrefix(fixed ? 'fixed' : 'scroll'));
+    const classes = classNames(classPrefix, className, {
+      [this.addPrefix(`fixed-${fixed || ''}`)]: fixed,
+      [this.addPrefix('scroll')]: !fixed
+    });
     const styles = {
@@ -32,0 +35,0 @@ width,

src/Column.js

@@ -6,3 +6,3 @@ // @flow
   width?: number,
-  fixed?: boolean,
+  fixed?: boolean | 'left' | 'right',
   resizable?: boolean,
@@ -9,0 +9,0 @@ sortable?: boolean,

src/HeaderCell.js

@@ -37,3 +37,3 @@ // @flow
   flexGrow?: number,
-  fixed?: boolean
+  fixed?: boolean | 'left' | 'right'
 };
@@ -78,3 +78,3 @@
     this.setState({ initialEvent: event });
-    onColumnResizeStart && onColumnResizeStart(this.state.columnWidth, left, fixed);
+    onColumnResizeStart && onColumnResizeStart(this.state.columnWidth, left, !!fixed);
   };
@@ -110,3 +110,3 @@
         columnLeft={left}
-        columnFixed={fixed}
+        columnFixed={!!fixed}
         height={headerHeight ? headerHeight - 1 : undefined}
@@ -113,0 +113,0 @@ initialEvent={initialEvent}

src/Table.js

@@ -40,2 +40,4 @@ // @flow
 
+const SCROLLBAR_WIDHT = 10;
+
 type SortType = 'desc' | 'asc';
@@ -74,3 +76,3 @@ type Props = {
   classPrefix?: string,
-  children?: React.ChildrenArray<*>,
+  children: React.ChildrenArray<*>,
   bordered?: boolean,
@@ -117,2 +119,11 @@ cellBordered?: boolean,
 
+function resetLeftForCells(cells) {
+  let left = 0;
+  return cells.map(cell => {
+    const nextCell = React.cloneElement(cell, { left });
+    left += cell.props.width;
+    return nextCell;
+  });
+}
+
 class Table extends React.Component<Props, State> {
@@ -223,6 +234,10 @@ static defaultProps = {
 
-  getFixedCellGroups() {
-    return this.table.querySelectorAll(`.${this.addPrefix('cell-group-fixed')}`);
+  getFixedLeftCellGroups() {
+    return this.table.querySelectorAll(`.${this.addPrefix('cell-group-fixed-left')}`);
   }
 
+  getFixedRightCellGroups() {
+    return this.table.querySelectorAll(`.${this.addPrefix('cell-group-fixed-right')}`);
+  }
+
   /**
@@ -485,4 +500,7 @@ * 获取表头高度
     const scrollGroups = this.getScrollCellGroups();
-    const fixedGroups = this.getFixedCellGroups();
+    const fixedLeftGroups = this.getFixedLeftCellGroups();
+    const fixedRightGroups = this.getFixedRightCellGroups();
 
+    const { contentWidth, width } = this.state;
+
     translateDOMPositionXY(wheelGroupStyle, this.scrollX, 0);
@@ -498,8 +516,9 @@ translateDOMPositionXY(wheelStyle, 0, this.scrollY);
 
-    const shadowClassName = this.addPrefix('cell-group-shadow');
-    const condition = this.scrollX < 0;
+    const leftShadowClassName = this.addPrefix('cell-group-left-shadow');
+    const rightShadowClassName = this.addPrefix('cell-group-right-shadow');
+    const showLeftShadow = this.scrollX < 0;
+    const showRightShadow = width - contentWidth - SCROLLBAR_WIDHT !== this.scrollX;
 
-    Array.from(fixedGroups).forEach(group => {
-      toggleClass(group, shadowClassName, condition);
-    });
+    toggleClass(fixedLeftGroups, leftShadowClassName, showLeftShadow);
+    toggleClass(fixedRightGroups, rightShadowClassName, showRightShadow);
   }
@@ -582,3 +601,3 @@ shouldHandleWheelX = (delta: number) => {
     // 这里 -10 是为了让滚动条不挡住内容部分
-    this.minScrollX = -(contentWidth - this.state.width) - 10;
+    this.minScrollX = -(contentWidth - this.state.width) - SCROLLBAR_WIDHT;
 
@@ -754,3 +773,3 @@ /**
     const { rowClassName } = this.props;
-    const { shouldFixedColumn } = this.state;
+    const { shouldFixedColumn, width, contentWidth } = this.state;
 
@@ -764,21 +783,47 @@ if (typeof rowClassName === 'function') {
     // IF there are fixed columns, add a fixed group
-    if (shouldFixedColumn) {
-      let fixedCells = cells.filter(cell => cell.props.fixed);
-      let otherCells = cells.filter(cell => !cell.props.fixed);
-      let fixedCellGroupWidth = 0;
+    if (shouldFixedColumn && contentWidth > width) {
+      let fixedLeftCells = [];
+      let fixedRightCells = [];
+      let scrollCells = [];
+      let fixedLeftCellGroupWidth = 0;
+      let fixedRightCellGroupWidth = 0;
 
-      for (let i = 0; i < fixedCells.length; i += 1) {
-        fixedCellGroupWidth += fixedCells[i].props.width;
-      }
+      cells.forEach(cell => {
+        const { fixed, width } = cell.props;
+        if (fixed === true || fixed === 'left') {
+          fixedLeftCells.push(cell);
+          fixedLeftCellGroupWidth += width;
+        } else if (fixed === 'right') {
+          fixedRightCells.push(cell);
+          fixedRightCellGroupWidth += width;
+        } else {
+          scrollCells.push(cell);
+        }
+      });
 
       return (
         <Row {...props}>
-          <CellGroup
-            fixed
-            height={props.isHeaderRow ? props.headerHeight : props.height}
-            width={fixedCellGroupWidth}
-          >
-            {colSpanCells(fixedCells)}
-          </CellGroup>
-          <CellGroup>{colSpanCells(otherCells)}</CellGroup>
+          {fixedLeftCellGroupWidth ? (
+            <CellGroup
+              fixed="left"
+              height={props.isHeaderRow ? props.headerHeight : props.height}
+              width={fixedLeftCellGroupWidth}
+            >
+              {colSpanCells(fixedLeftCells)}
+            </CellGroup>
+          ) : null}
+
+          <CellGroup>{colSpanCells(scrollCells)}</CellGroup>
+
+          {fixedRightCellGroupWidth ? (
+            <CellGroup
+              fixed="right"
+              style={{ left: width - fixedRightCellGroupWidth - SCROLLBAR_WIDHT }}
+              height={props.isHeaderRow ? props.headerHeight : props.height}
+              width={fixedRightCellGroupWidth}
+            >
+              {colSpanCells(resetLeftForCells(fixedRightCells))}
+            </CellGroup>
+          ) : null}
+
           {shouldRenderExpandedRow && this.renderRowExpanded(rowData)}
@@ -785,0 +830,0 @@ </Row>

src/utils/toggleClass.js

@@ -11,2 +11,14 @@ import { addClass, removeClass } from 'dom-lib';
 
-export default toggleClass;
+export default (node: HTMLElement | Array<HTMLElement>, className: string, condition: boolean) => {
+  if (!node) {
+    return;
+  }
+
+  if (node.__proto__.hasOwnProperty('length')) {
+    Array.from(node).forEach(item => {
+      toggleClass(item, className, condition);
+    });
+    return;
+  }
+  toggleClass(node, className, condition);
+};

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

187475

increased by2.71%

Lines of code

3970

increased by2.74%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes