Skip to content

Commit 87ba545

Browse files
xobotyixobotyi
committed
RTL fix for non-Chromium and MS browsers;
1 parent 50a552e commit 87ba545

File tree

4 files changed

+77
-16
lines changed

4 files changed

+77
-16
lines changed

‎dist/index.js‎

Lines changed: 37 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
55
});
66
exports.default = void 0;
77

8+
var _bowser = _interopRequireDefault(require("bowser"));
9+
810
var _propTypes = _interopRequireDefault(require("prop-types"));
911

1012
var _react = _interopRequireDefault(require("react"));
@@ -53,6 +55,9 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
5355

5456
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; }
5557

58+
var browser = global.window && global.window.navigator && _bowser.default.getParser(global.window.navigator.userAgent);
59+
60+
var engine = browser && browser.getEngine().name;
5661
var defaultStyles = {
5762
holder: {
5863
position: "relative",
@@ -272,7 +277,18 @@ function (_React$Component) {
272277

273278
if (params.axis === _Track.TYPE_X) {
274279
_this.props.thumbXProps.onDrag && _this.props.thumbXProps.onDrag(params);
275-
_this.contentEl.scrollLeft = Scrollbar.computeScrollForOffset((0, _getInnerSizes.getInnerWidth)(_this.trackXEl), _this.thumbXEl.clientWidth, params.offset, _this.contentEl.scrollWidth, _this.contentEl.clientWidth);
280+
var trackWidth = (0, _getInnerSizes.getInnerWidth)(_this.trackXEl);
281+
var offset = params.offset;
282+
283+
if (_this.state.isRtl) {
284+
if (engine === "Trident" || engine === "EdgeHTML") {
285+
offset = trackWidth - offset;
286+
} else if (engine !== "Blink") {
287+
offset -= _this.thumbXEl.clientWidth / 2;
288+
}
289+
}
290+
291+
_this.contentEl.scrollLeft = Scrollbar.computeScrollForOffset(trackWidth, _this.thumbXEl.clientWidth, offset, _this.contentEl.scrollWidth, _this.contentEl.clientWidth);
276292
}
277293

278294
if (params.axis === _Track.TYPE_Y) {
@@ -304,11 +320,15 @@ function (_React$Component) {
304320
}
305321

306322
if (this.props.scrollTop !== prevProps.scrollTop) {
307-
this.contentEl.scrollTop = this.props.scrollTop || 0;
323+
if (typeof this.props.scrollTop !== "undefined") {
324+
this.contentEl.scrollTop = this.props.scrollTop;
325+
}
308326
}
309327

310328
if (this.props.scrollLeft !== prevProps.scrollLeft) {
311-
this.contentEl.scrollLeft = this.props.scrollLeft || 0;
329+
if (typeof this.props.scrollLeft !== "undefined") {
330+
this.contentEl.scrollLeft = this.props.scrollLeft;
331+
}
312332
}
313333
}
314334
}, {
@@ -319,8 +339,15 @@ function (_React$Component) {
319339
this.contentEl.addEventListener("scroll", this.handleScrollEvent, {
320340
passive: true
321341
});
322-
this.contentEl.scrollTop = this.props.scrollTop || 0;
323-
this.contentEl.scrollLeft = this.props.scrollLeft || 0;
342+
343+
if (typeof this.props.scrollTop !== "undefined") {
344+
this.contentEl.scrollTop = this.props.scrollTop;
345+
}
346+
347+
if (typeof this.props.scrollLeft !== "undefined") {
348+
this.contentEl.scrollLeft = this.props.scrollLeft;
349+
}
350+
324351
this.update();
325352
}
326353
}, {
@@ -542,7 +569,11 @@ function (_React$Component) {
542569
var _thumbOffset = Scrollbar.computeThumbOffset(_trackSize, _thumbSize, scrollValues.scrollWidth, scrollValues.clientWidth, scrollValues.scrollLeft);
543570

544571
if (this.state.isRtl) {
545-
_thumbOffset = _thumbSize + _thumbOffset - _trackSize;
572+
if (engine === "Blink") {
573+
_thumbOffset = _thumbSize + _thumbOffset - _trackSize;
574+
} else if (engine === "Trident" || engine === "EdgeHTML") {
575+
_thumbOffset *= -1;
576+
}
546577
}
547578

548579
this.thumbXEl.style.transform = "translateX(".concat(_thumbOffset, "px)");

‎examples/app/components/blocks/SandboxBlock.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default class SandboxBlock extends React.Component {
1515

1616
nativeScrollbar: false,
1717

18-
rtl: false,
18+
rtl: true,
1919

2020
permanentTracks: false,
2121
permanentTrackY: false,
@@ -163,7 +163,7 @@ export default class SandboxBlock extends React.Component {
163163
{permanentTrackX || permanentTracks ? "Show track X if needed" : "Always show track X"}
164164
</div>
165165
<div className="button" key="direction" onClick={this.toggleRtl}>
166-
{rtl ? "set direction LRT" : "set direction RTL"}
166+
{rtl ? "set direction LTR" : "set direction RTL"}
167167
</div>
168168
<br />
169169
<div className="button" key="randomPosition" onClick={this.handleRandomPositionClick}>

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,9 @@
2525
"react-component",
2626
"custom"
2727
],
28-
"dependencies": {},
28+
"dependencies": {
29+
"bowser": "^2.0.0-beta.3"
30+
},
2931
"peerDependencies": {
3032
"react": "^0.14.0 || ^15.0.0 || ^16.0.0",
3133
"react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0",

‎src/index.js‎

Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import bowser from "bowser";
12
import PropTypes from "prop-types";
23
import React from "react";
34
import NativeScrollbar from "./NativeScrollbar";
@@ -7,6 +8,9 @@ import {getInnerHeight, getInnerWidth} from "./util/getInnerSizes";
78
import getScrollbarWidth from "./util/getScrollbarWidth";
89
import LoopController from "./util/LoopController";
910

11+
const browser = global.window && global.window.navigator && bowser.getParser(global.window.navigator.userAgent);
12+
const engine = browser && browser.getEngine().name;
13+
1014
const defaultStyles = {
1115
holder: {
1216
position: "relative",
@@ -237,11 +241,15 @@ export default class Scrollbar extends React.Component {
237241
}
238242

239243
if (this.props.scrollTop !== prevProps.scrollTop) {
240-
this.contentEl.scrollTop = this.props.scrollTop || 0;
244+
if (typeof this.props.scrollTop !== "undefined") {
245+
this.contentEl.scrollTop = this.props.scrollTop;
246+
}
241247
}
242248

243249
if (this.props.scrollLeft !== prevProps.scrollLeft) {
244-
this.contentEl.scrollLeft = this.props.scrollLeft || 0;
250+
if (typeof this.props.scrollLeft !== "undefined") {
251+
this.contentEl.scrollLeft = this.props.scrollLeft;
252+
}
245253
}
246254
}
247255

@@ -252,8 +260,13 @@ export default class Scrollbar extends React.Component {
252260
passive: true,
253261
});
254262

255-
this.contentEl.scrollTop = this.props.scrollTop || 0;
256-
this.contentEl.scrollLeft = this.props.scrollLeft || 0;
263+
if (typeof this.props.scrollTop !== "undefined") {
264+
this.contentEl.scrollTop = this.props.scrollTop;
265+
}
266+
267+
if (typeof this.props.scrollLeft !== "undefined") {
268+
this.contentEl.scrollLeft = this.props.scrollLeft;
269+
}
257270

258271
this.update();
259272
}
@@ -657,7 +670,11 @@ export default class Scrollbar extends React.Component {
657670
);
658671

659672
if (this.state.isRtl) {
660-
thumbOffset = thumbSize + thumbOffset - trackSize;
673+
if (engine === "Blink") {
674+
thumbOffset = thumbSize + thumbOffset - trackSize;
675+
} else if (engine === "Trident" || engine === "EdgeHTML") {
676+
thumbOffset *= -1;
677+
}
661678
}
662679

663680
this.thumbXEl.style.transform = `translateX(${thumbOffset}px)`;
@@ -743,10 +760,21 @@ export default class Scrollbar extends React.Component {
743760
if (params.axis === TYPE_X) {
744761
this.props.thumbXProps.onDrag && this.props.thumbXProps.onDrag(params);
745762

763+
const trackWidth = getInnerWidth(this.trackXEl);
764+
let offset = params.offset;
765+
766+
if (this.state.isRtl) {
767+
if (engine === "Trident" || engine === "EdgeHTML") {
768+
offset = trackWidth - offset;
769+
} else if (engine !== "Blink") {
770+
offset -= this.thumbXEl.clientWidth / 2;
771+
}
772+
}
773+
746774
this.contentEl.scrollLeft = Scrollbar.computeScrollForOffset(
747-
getInnerWidth(this.trackXEl),
775+
trackWidth,
748776
this.thumbXEl.clientWidth,
749-
params.offset,
777+
offset,
750778
this.contentEl.scrollWidth,
751779
this.contentEl.clientWidth
752780
);

0 commit comments

Comments
 (0)