rsuite-table - npm Package Compare versions

Comparing version 3.8.1 to 3.8.2-beta

lib/ColumnResizeHandler.js

@@ -35,2 +35,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; }
@@ -64,3 +66,4 @@
       _this.cursorDelta += deltaX;
-      _this.columnWidth = (0, _clamp3.default)(columnWidth + _this.cursorDelta, 20, 20000);
+
+      _this.columnWidth = (0, _clamp3.default)(columnWidth + ((0, _utils.isRTL)() ? -_this.cursorDelta : _this.cursorDelta), 20, 20000);
       onColumnResizeMove && onColumnResizeMove(_this.columnWidth, columnLeft, columnFixed);
@@ -134,2 +137,4 @@ };
     value: function render() {
+      var _extends2;
+
       var _props = this.props,
@@ -142,9 +147,11 @@ _props$columnLeft = _props.columnLeft,
           style = _props.style,
-          rest = _objectWithoutProperties(_props, ['columnLeft', 'classPrefix', 'height', 'className', 'style']);
+          columnFixed = _props.columnFixed,
+          rest = _objectWithoutProperties(_props, ['columnLeft', 'classPrefix', 'height', 'className', 'style', 'columnFixed']);
 
-      var styles = _extends({
-        left: this.columnWidth + columnLeft - 2,
-        height: height
-      }, style);
+      if (columnFixed === 'right') {
+        return null;
+      }
 
+      var styles = _extends((_extends2 = {}, _defineProperty(_extends2, (0, _utils.isRTL)() ? 'right' : 'left', this.columnWidth + columnLeft - 2), _defineProperty(_extends2, 'height', height), _extends2), style);
+
       var classes = (0, _classnames2.default)(classPrefix, className);
@@ -175,3 +182,3 @@ var unhandled = (0, _utils.getUnhandledProps)(ColumnResizeHandler, rest);
   columnLeft: _propTypes2.default.number,
-  columnFixed: _propTypes2.default.bool,
+  columnFixed: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.oneOf(['left']), _propTypes2.default.oneOf(['right'])]),
   className: _propTypes2.default.string,
@@ -178,0 +185,0 @@ classPrefix: _propTypes2.default.string,

lib/HeaderCell.js

@@ -139,3 +139,3 @@ 'use strict';
         columnLeft: left,
-        columnFixed: !!fixed,
+        columnFixed: fixed,
         height: headerHeight ? headerHeight - 1 : undefined,
@@ -142,0 +142,0 @@ initialEvent: initialEvent,

lib/Table.js

@@ -172,2 +172,3 @@ 'use strict';
     _this._cacheChildrenSize = (0, _flatten3.default)(children).length;
+
     _this.translateDOMPositionXY = (0, _translateDOMPositionXY.getTranslateDOMPositionXY)({
@@ -186,2 +187,3 @@ enable3DTransform: props.translate3d
       this.setAffixHeaderOffset();
+      this.initPosition();
       (0, _elementResizeEvent2.default)(this.table, (0, _debounce3.default)(this.calculateTableWidth, 400));
@@ -441,2 +443,20 @@
   }, {
+    key: 'initPosition',
+    value: function initPosition() {
+      var _this3 = this;
+
+      if ((0, _utils.isRTL)()) {
+        setTimeout(function () {
+          var _state = _this3.state,
+              contentWidth = _state.contentWidth,
+              width = _state.width;
+
+
+          _this3.scrollX = width - contentWidth - _constants.SCROLLBAR_WIDTH;
+          _this3.updatePosition();
+          _this3.scrollbarX && _this3.scrollbarX.resetScrollBarPosition(-_this3.scrollX);
+        }, 0);
+      }
+    }
+  }, {
     key: 'updatePosition',
@@ -471,5 +491,5 @@ value: function updatePosition() {
       var fixedRightGroups = this.getFixedRightCellGroups();
-      var _state = this.state,
-          contentWidth = _state.contentWidth,
-          width = _state.width;
+      var _state2 = this.state,
+          contentWidth = _state2.contentWidth,
+          width = _state2.width;
 
@@ -668,6 +688,6 @@
       var rowClassName = this.props.rowClassName;
-      var _state2 = this.state,
-          shouldFixedColumn = _state2.shouldFixedColumn,
-          width = _state2.width,
-          contentWidth = _state2.contentWidth;
+      var _state3 = this.state,
+          shouldFixedColumn = _state3.shouldFixedColumn,
+          width = _state3.width,
+          contentWidth = _state3.contentWidth;
 
@@ -867,6 +887,6 @@
       var headerHeight = this.getTableHeaderHeight();
-      var _state3 = this.state,
-          tableRowsMaxHeight = _state3.tableRowsMaxHeight,
-          isScrolling = _state3.isScrolling,
-          data = _state3.data;
+      var _state4 = this.state,
+          tableRowsMaxHeight = _state4.tableRowsMaxHeight,
+          isScrolling = _state4.isScrolling,
+          data = _state4.data;
 
@@ -1039,5 +1059,5 @@ var height = this.getTableHeight();
       var disabledScroll = this.props.disabledScroll;
-      var _state4 = this.state,
-          contentWidth = _state4.contentWidth,
-          contentHeight = _state4.contentHeight;
+      var _state5 = this.state,
+          contentWidth = _state5.contentWidth,
+          contentHeight = _state5.contentHeight;
 
@@ -1232,12 +1252,12 @@
 var _initialiseProps = function _initialiseProps() {
-  var _this3 = this;
+  var _this4 = this;
 
   this._listenWheel = function (deltaX, deltaY) {
-    _this3.handleWheel(deltaX, deltaY);
-    if (_this3.scrollbarX) {
-      _this3.scrollbarX.onWheelScroll(deltaX);
+    _this4.handleWheel(deltaX, deltaY);
+    if (_this4.scrollbarX) {
+      _this4.scrollbarX.onWheelScroll(deltaX);
     }
 
-    if (_this3.scrollbarY) {
-      _this3.scrollbarY.onWheelScroll(deltaY);
+    if (_this4.scrollbarY) {
+      _this4.scrollbarY.onWheelScroll(deltaY);
     }
@@ -1247,7 +1267,7 @@ };
   this.setAffixHeaderOffset = function () {
-    var affixHeader = _this3.props.affixHeader;
+    var affixHeader = _this4.props.affixHeader;
 
     if (affixHeader === 0 || affixHeader) {
-      _this3.setState(function () {
-        return { affixHeaderOffset: (0, _domLib.getOffset)(_this3.headerWrapper) };
+      _this4.setState(function () {
+        return { affixHeaderOffset: (0, _domLib.getOffset)(_this4.headerWrapper) };
       });
@@ -1258,8 +1278,8 @@ }
   this.updateAffixHeaderStatus = function () {
-    var affixHeader = _this3.props.affixHeader;
+    var affixHeader = _this4.props.affixHeader;
 
     var top = typeof affixHeader === 'number' ? affixHeader : 0;
-    var _state5 = _this3.state,
-        affixHeaderOffset = _state5.affixHeaderOffset,
-        contentHeight = _state5.contentHeight;
+    var _state6 = _this4.state,
+        affixHeaderOffset = _state6.affixHeaderOffset,
+        contentHeight = _state6.contentHeight;
 
@@ -1269,4 +1289,4 @@ var scrollY = window.scrollY || window.pageYOffset;
 
-    if (_this3.affixHeaderWrapper) {
-      (0, _utils.toggleClass)(_this3.affixHeaderWrapper, 'fixed', fixedHeader);
+    if (_this4.affixHeaderWrapper) {
+      (0, _utils.toggleClass)(_this4.affixHeaderWrapper, 'fixed', fixedHeader);
     }
@@ -1276,11 +1296,11 @@ };
   this.handleSortColumn = function (dataKey) {
-    var _props13 = _this3.props,
+    var _props13 = _this4.props,
         onSortColumn = _props13.onSortColumn,
         sortColumn = _props13.sortColumn;
 
-    var sortType = _this3.getSortType();
+    var sortType = _this4.getSortType();
 
     if (sortColumn === dataKey) {
       sortType = sortType === SORT_TYPE.ASC ? SORT_TYPE.DESC : SORT_TYPE.ASC;
-      _this3.setState({
+      _this4.setState({
         sortType: sortType
@@ -1296,8 +1316,8 @@ });
   this.handleColumnResizeEnd = function (columnWidth, cursorDelta, dataKey, index) {
-    _this3._cacheCells = null;
-    _this3.setState(_defineProperty({
+    _this4._cacheCells = null;
+    _this4.setState(_defineProperty({
       isColumnResizing: false
     }, dataKey + '_' + index + '_width', columnWidth));
 
-    (0, _domLib.addStyle)(_this3.mouseArea, {
+    (0, _domLib.addStyle)(_this4.mouseArea, {
       display: 'none'
@@ -1308,10 +1328,6 @@ });
   this.handleColumnResizeStart = function (width, left, fixed) {
-    _this3.setState({
+    _this4.setState({
       isColumnResizing: true
     });
-    var mouseAreaLeft = width + left;
-    var x = fixed ? mouseAreaLeft : mouseAreaLeft + (_this3.scrollX || 0);
-    var styles = { display: 'block' };
-    _this3.translateDOMPositionXY(styles, x, 0);
-    (0, _domLib.addStyle)(_this3.mouseArea, styles);
+    _this4.handleColumnResizeMove(width, left, fixed);
   };
@@ -1321,12 +1337,23 @@
     var mouseAreaLeft = width + left;
-    var x = fixed ? mouseAreaLeft : mouseAreaLeft + (_this3.scrollX || 0);
-    var styles = {};
-    _this3.translateDOMPositionXY(styles, x, 0);
-    (0, _domLib.addStyle)(_this3.mouseArea, styles);
+    var x = mouseAreaLeft;
+    var dir = 'left';
+
+    if ((0, _utils.isRTL)()) {
+      mouseAreaLeft += _this4.minScrollX + _constants.SCROLLBAR_WIDTH;
+      dir = 'right';
+    }
+
+    if (!fixed) {
+      x = mouseAreaLeft + ((0, _utils.isRTL)() ? -_this4.scrollX : _this4.scrollX);
+    }
+
+    var styles = _defineProperty({ display: 'block' }, dir, x + 'px');
+
+    (0, _domLib.addStyle)(_this4.mouseArea, styles);
   };
 
   this.handleTreeToggle = function (rowKey, rowIndex, rowData) {
-    var onExpandChange = _this3.props.onExpandChange;
+    var onExpandChange = _this4.props.onExpandChange;
 
-    var expandedRowKeys = _this3.getExpandedRowKeys();
+    var expandedRowKeys = _this4.getExpandedRowKeys();
 
@@ -1348,3 +1375,3 @@ var open = false;
     }
-    _this3.setState({
+    _this4.setState({
       expandedRowKeys: nextExpandedRowKeys
@@ -1356,7 +1383,7 @@ });
   this.handleScrollX = function (delta) {
-    _this3.handleWheel(delta, 0);
+    _this4.handleWheel(delta, 0);
   };
 
   this.handleScrollY = function (delta) {
-    _this3.handleWheel(0, delta);
+    _this4.handleWheel(0, delta);
   };
@@ -1367,34 +1394,34 @@
   this.handleWheel = function (deltaX, deltaY) {
-    var _props14 = _this3.props,
+    var _props14 = _this4.props,
         onScroll = _props14.onScroll,
         virtualized = _props14.virtualized;
-    var _state6 = _this3.state,
-        contentWidth = _state6.contentWidth,
-        width = _state6.width;
+    var _state7 = _this4.state,
+        contentWidth = _state7.contentWidth,
+        width = _state7.width;
 
 
-    if (!_this3.table) {
+    if (!_this4.table) {
       return;
     }
 
-    var nextScrollX = contentWidth <= width ? 0 : _this3.scrollX - deltaX;
-    var nextScrollY = _this3.scrollY - deltaY;
+    var nextScrollX = contentWidth <= width ? 0 : _this4.scrollX - deltaX;
+    var nextScrollY = _this4.scrollY - deltaY;
 
-    _this3.scrollY = Math.min(0, nextScrollY < _this3.minScrollY ? _this3.minScrollY : nextScrollY);
-    _this3.scrollX = Math.min(0, nextScrollX < _this3.minScrollX ? _this3.minScrollX : nextScrollX);
-    _this3.updatePosition();
+    _this4.scrollY = Math.min(0, nextScrollY < _this4.minScrollY ? _this4.minScrollY : nextScrollY);
+    _this4.scrollX = Math.min(0, nextScrollX < _this4.minScrollX ? _this4.minScrollX : nextScrollX);
+    _this4.updatePosition();
 
-    onScroll && onScroll(_this3.scrollX, _this3.scrollY);
+    onScroll && onScroll(_this4.scrollX, _this4.scrollY);
 
     if (virtualized) {
-      _this3.setState({
+      _this4.setState({
         isScrolling: true,
-        scrollY: _this3.scrollY
+        scrollY: _this4.scrollY
       });
 
-      if (_this3.disableEventsTimeoutId) {
-        (0, _utils.cancelAnimationTimeout)(_this3.disableEventsTimeoutId);
+      if (_this4.disableEventsTimeoutId) {
+        (0, _utils.cancelAnimationTimeout)(_this4.disableEventsTimeoutId);
       }
 
-      _this3.disableEventsTimeoutId = (0, _utils.requestAnimationTimeout)(_this3.debounceScrollEndedCallback, 150);
+      _this4.disableEventsTimeoutId = (0, _utils.requestAnimationTimeout)(_this4.debounceScrollEndedCallback, 150);
     }
@@ -1404,4 +1431,4 @@ };
   this.debounceScrollEndedCallback = function () {
-    _this3.disableEventsTimeoutId = null;
-    _this3.setState({
+    _this4.disableEventsTimeoutId = null;
+    _this4.setState({
       isScrolling: false
@@ -1412,3 +1439,3 @@ });
   this.handleTouchStart = function (event) {
-    var onTouchStart = _this3.props.onTouchStart;
+    var onTouchStart = _this4.props.onTouchStart;
 
@@ -1419,4 +1446,4 @@ var _ref = event.touches ? event.touches[0] : {},
 
-    _this3.touchX = pageX;
-    _this3.touchY = pageY;
+    _this4.touchX = pageX;
+    _this4.touchY = pageY;
     onTouchStart && onTouchStart(event);
@@ -1426,3 +1453,3 @@ };
   this.handleTouchMove = function (event) {
-    var _props15 = _this3.props,
+    var _props15 = _this4.props,
         onTouchMove = _props15.onTouchMove,
@@ -1435,6 +1462,6 @@ autoHeight = _props15.autoHeight;
 
-    var deltaX = _this3.touchX - nextPageX;
-    var deltaY = autoHeight ? 0 : _this3.touchY - nextPageY;
+    var deltaX = _this4.touchX - nextPageX;
+    var deltaY = autoHeight ? 0 : _this4.touchY - nextPageY;
 
-    if (!_this3.shouldHandleWheelY(deltaY) && !_this3.shouldHandleWheelX(deltaX)) {
+    if (!_this4.shouldHandleWheelY(deltaY) && !_this4.shouldHandleWheelX(deltaX)) {
       return;
@@ -1445,7 +1472,7 @@ }
 
-    _this3.handleWheel(deltaX, deltaY);
-    _this3.scrollbarX.onWheelScroll(deltaX);
-    _this3.scrollbarY.onWheelScroll(deltaY);
-    _this3.touchX = nextPageX;
-    _this3.touchY = nextPageY;
+    _this4.handleWheel(deltaX, deltaY);
+    _this4.scrollbarX.onWheelScroll(deltaX);
+    _this4.scrollbarY.onWheelScroll(deltaY);
+    _this4.touchX = nextPageX;
+    _this4.touchY = nextPageY;
 
@@ -1456,3 +1483,3 @@ onTouchMove && onTouchMove(event);
   this.handleBodyScroll = function (event) {
-    if (event.target !== _this3.tableBody) {
+    if (event.target !== _this4.tableBody) {
       return;
@@ -1468,3 +1495,3 @@ }
 
-    _this3._listenWheel(left, top);
+    _this4._listenWheel(left, top);
 
@@ -1476,3 +1503,3 @@ (0, _domLib.scrollLeft)(event.target, 0);
   this.shouldHandleWheelX = function (delta) {
-    var _props16 = _this3.props,
+    var _props16 = _this4.props,
         disabledScroll = _props16.disabledScroll,
@@ -1490,3 +1517,3 @@ loading = _props16.loading;
   this.shouldHandleWheelY = function (delta) {
-    var _props17 = _this3.props,
+    var _props17 = _this4.props,
         disabledScroll = _props17.disabledScroll,
@@ -1498,3 +1525,3 @@ loading = _props17.loading;
     }
-    return delta >= 0 && _this3.scrollY > _this3.minScrollY || delta < 0 && _this3.scrollY < 0;
+    return delta >= 0 && _this4.scrollY > _this4.minScrollY || delta < 0 && _this4.scrollY < 0;
   };
@@ -1508,8 +1535,8 @@
   this.addPrefix = function (name) {
-    return (0, _utils.prefix)(_this3.props.classPrefix)(name);
+    return (0, _utils.prefix)(_this4.props.classPrefix)(name);
   };
 
   this.calculateTableWidth = function () {
-    var table = _this3.table;
-    var width = _this3.state.width;
+    var table = _this4.table;
+    var width = _this4.state.width;
 
@@ -1520,12 +1547,12 @@ if (table) {
       if (width !== nextWidth) {
-        _this3.scrollX = 0;
-        _this3.scrollbarX && _this3.scrollbarX.resetScrollBarPosition();
+        _this4.scrollX = 0;
+        _this4.scrollbarX && _this4.scrollbarX.resetScrollBarPosition();
       }
 
-      _this3._cacheCells = null;
-      _this3.setState({
+      _this4._cacheCells = null;
+      _this4.setState({
         width: nextWidth
       });
     }
-    _this3.setAffixHeaderOffset();
+    _this4.setAffixHeaderOffset();
   };
@@ -1535,11 +1562,11 @@
     var top = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    var _props18 = _this3.props,
+    var _props18 = _this4.props,
         height = _props18.height,
         headerHeight = _props18.headerHeight;
-    var contentHeight = _this3.state.contentHeight;
+    var contentHeight = _this4.state.contentHeight;
 
     var scrollY = Math.max(0, top - (height - headerHeight));
 
-    _this3.scrollY = -scrollY;
-    if (_this3.scrollbarY) {
+    _this4.scrollY = -scrollY;
+    if (_this4.scrollbarY) {
       var y = 0;
@@ -1551,6 +1578,6 @@ if (top !== 0) {
       }
-      _this3.scrollbarY.resetScrollBarPosition(y);
+      _this4.scrollbarY.resetScrollBarPosition(y);
     }
 
-    _this3.setState({
+    _this4.setState({
       scrollY: -scrollY
@@ -1563,5 +1590,5 @@ });
 
-    _this3.scrollX = -left;
-    _this3.scrollbarX && _this3.scrollbarX.resetScrollBarPosition(left);
-    _this3.updatePosition();
+    _this4.scrollX = -left;
+    _this4.scrollbarX && _this4.scrollbarX.resetScrollBarPosition(left);
+    _this4.updatePosition();
   };
@@ -1572,3 +1599,3 @@
       if (ref) {
-        _this3.tableRows[index] = ref;
+        _this4.tableRows[index] = ref;
       }
@@ -1579,25 +1606,25 @@ };
   this.bindMouseAreaRef = function (ref) {
-    _this3.mouseArea = ref;
+    _this4.mouseArea = ref;
   };
 
   this.bindTableHeaderRef = function (ref) {
-    _this3.tableHeader = ref;
+    _this4.tableHeader = ref;
   };
 
   this.bindHeaderWrapperRef = function (ref) {
-    _this3.headerWrapper = ref;
+    _this4.headerWrapper = ref;
   };
 
   this.bindAffixHeaderRef = function (ref) {
-    _this3.affixHeaderWrapper = ref;
+    _this4.affixHeaderWrapper = ref;
   };
 
   this.bindTableRef = function (ref) {
-    _this3.table = ref;
+    _this4.table = ref;
   };
 
   this.bindWheelWrapperRef = function (ref) {
-    var bodyRef = _this3.props.bodyRef;
+    var bodyRef = _this4.props.bodyRef;
 
-    _this3.wheelWrapper = ref;
+    _this4.wheelWrapper = ref;
     bodyRef && bodyRef(ref);
@@ -1607,15 +1634,15 @@ };
   this.bindBodyRef = function (ref) {
-    _this3.tableBody = ref;
+    _this4.tableBody = ref;
   };
 
   this.bindScrollbarXRef = function (ref) {
-    _this3.scrollbarX = ref;
+    _this4.scrollbarX = ref;
   };
 
   this.bindScrollbarYRef = function (ref) {
-    _this3.scrollbarY = ref;
+    _this4.scrollbarY = ref;
   };
 
   this.bindRowClick = function (rowData) {
-    var onRowClick = _this3.props.onRowClick;
+    var onRowClick = _this4.props.onRowClick;
 
@@ -1622,0 +1649,0 @@ return function (event) {

package.json

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

src/ColumnResizeHandler.js

@@ -7,3 +7,3 @@ // @flow
 import { DOMMouseMoveTracker } from 'dom-lib';
-import { defaultClassPrefix, getUnhandledProps } from './utils';
+import { defaultClassPrefix, getUnhandledProps, isRTL } from './utils';
 
@@ -21,3 +21,3 @@ type Client = {
   columnLeft?: number,
-  columnFixed?: boolean,
+  columnFixed?: boolean | 'left' | 'right',
   className?: string,
@@ -72,3 +72,8 @@ classPrefix?: string,
     this.cursorDelta += deltaX;
-    this.columnWidth = _.clamp(columnWidth + this.cursorDelta, 20, 20000);
+
+    this.columnWidth = _.clamp(
+      columnWidth + (isRTL() ? -this.cursorDelta : this.cursorDelta),
+      20,
+      20000
+    );
     onColumnResizeMove && onColumnResizeMove(this.columnWidth, columnLeft, columnFixed);
@@ -116,5 +121,18 @@ };
   render() {
-    const { columnLeft = 0, classPrefix, height, className, style, ...rest } = this.props;
+    const {
+      columnLeft = 0,
+      classPrefix,
+      height,
+      className,
+      style,
+      columnFixed,
+      ...rest
+    } = this.props;
+
+    if (columnFixed === 'right') {
+      return null;
+    }
+
     const styles = {
-      left: this.columnWidth + columnLeft - 2,
+      [isRTL() ? 'right' : 'left']: this.columnWidth + columnLeft - 2,
       height,
@@ -121,0 +139,0 @@ ...style

src/HeaderCell.js

@@ -108,3 +108,3 @@ // @flow
         columnLeft={left}
-        columnFixed={!!fixed}
+        columnFixed={fixed}
         height={headerHeight ? headerHeight - 1 : undefined}
@@ -111,0 +111,0 @@ initialEvent={initialEvent}

src/Table.js

@@ -214,2 +214,3 @@ // @flow
     this._cacheChildrenSize = _.flatten(children).length;
+
     this.translateDOMPositionXY = getTranslateDOMPositionXY({
@@ -236,2 +237,3 @@ enable3DTransform: props.translate3d
     this.setAffixHeaderOffset();
+    this.initPosition();
     bindElementResize(this.table, _.debounce(this.calculateTableWidth, 400));
@@ -510,14 +512,21 @@
     });
-    const mouseAreaLeft = width + left;
-    const x = fixed ? mouseAreaLeft : mouseAreaLeft + (this.scrollX || 0);
-    const styles = { display: 'block' };
-    this.translateDOMPositionXY(styles, x, 0);
-    addStyle(this.mouseArea, styles);
+    this.handleColumnResizeMove(width, left, fixed);
   };
 
   handleColumnResizeMove = (width: number, left: number, fixed: boolean) => {
-    const mouseAreaLeft = width + left;
-    const x = fixed ? mouseAreaLeft : mouseAreaLeft + (this.scrollX || 0);
-    const styles = {};
-    this.translateDOMPositionXY(styles, x, 0);
+    let mouseAreaLeft = width + left;
+    let x = mouseAreaLeft;
+    let dir = 'left';
+
+    if (isRTL()) {
+      mouseAreaLeft += this.minScrollX + SCROLLBAR_WIDTH;
+      dir = 'right';
+    }
+
+    if (!fixed) {
+      x = mouseAreaLeft + (isRTL() ? -this.scrollX : this.scrollX);
+    }
+
+    const styles = { display: 'block', [dir]: `${x}px` };
+
     addStyle(this.mouseArea, styles);
@@ -651,2 +660,14 @@ };
 
+  initPosition() {
+    if (isRTL()) {
+      setTimeout(() => {
+        const { contentWidth, width } = this.state;
+
+        this.scrollX = width - contentWidth - SCROLLBAR_WIDTH;
+        this.updatePosition();
+        this.scrollbarX && this.scrollbarX.resetScrollBarPosition(-this.scrollX);
+      }, 0);
+    }
+  }
+
   updatePosition() {
@@ -653,0 +674,0 @@ /**

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

255095

increased by0.68%

Lines of code

5305

increased by0.97%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes