Skip to content

Commit 20fbb68

Browse files
xobotyixobotyi
committed
dist build;
readme fixes;
1 parent 3d87571 commit 20fbb68

File tree

3 files changed

+39
-9
lines changed

3 files changed

+39
-9
lines changed

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@
2020
* No matter what changes the content - scrollbars always stay actual
2121
* Total tests coverage
2222
* Scrollbars nesting
23-
* RTL support ([read more]())
23+
* RTL support ([read more](https://github.com/xobotyi/react-scrollbars-custom/blob/master/docs/USAGE.md#rtl-support))
24+
* momentum scrolling for iOS
2425

2526
>**IMPORTANT:** default component styles uses [Flexible Box Layout](https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Flexible_Box_Layout) for proper scrollbars display.
2627
>But you can customize it with help pf inline or linked styles as you wish ([see docs](https://github.com/xobotyi/react-scrollbars-custom/blob/master/docs/CUSTOMISATION.md)).

‎dist/index.js‎

Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -328,6 +328,7 @@ function (_React$Component) {
328328

329329
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "update", function () {
330330
var forced = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
331+
var rtlAutodetect = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
331332

332333
// No need to update scrollbars if values had not changed
333334
if (!forced && (_this.previousScrollValues || false)) {
@@ -336,8 +337,22 @@ function (_React$Component) {
336337
}
337338
}
338339

340+
_this.isRtl = _this.props.rtl || _this.isRtl || (rtlAutodetect ? getComputedStyle(_this.content).direction === "rtl" : false);
341+
342+
_this.holder.classList.toggle("ScrollbarsCustom-RTL", _this.isRtl);
343+
339344
var verticalScrollPossible = _this.content.scrollHeight > _this.content.clientHeight && !_this.props.noScroll && !_this.props.noScrollY,
340345
horizontalScrollPossible = _this.content.scrollWidth > _this.content.clientWidth && !_this.props.noScroll && !_this.props.noScrollX;
346+
347+
if (verticalScrollPossible && (_this.previousScrollValues || true || _this.isRtl !== (_this.previousScrollValues.rtl || false))) {
348+
var browserScrollbarWidth = (0, _utilities.getScrollbarWidth)(),
349+
fallbackScrollbarWidth = _this.props.fallbackScrollbarWidth;
350+
_this.content.style.marginLeft = _this.isRtl ? -(browserScrollbarWidth || fallbackScrollbarWidth) + "px" : null;
351+
_this.content.style.paddingLeft = _this.isRtl ? (browserScrollbarWidth ? null : fallbackScrollbarWidth) + "px" : null;
352+
_this.content.style.marginRight = _this.isRtl ? null : -(browserScrollbarWidth || fallbackScrollbarWidth) + "px";
353+
_this.content.style.paddingRight = _this.isRtl ? null : (browserScrollbarWidth ? null : fallbackScrollbarWidth) + "px";
354+
}
355+
341356
_this.trackVertical.style.display = verticalScrollPossible || _this.props.permanentScrollbars || _this.props.permanentScrollbarY ? null : "none";
342357
_this.trackVertical.visibility = verticalScrollPossible || _this.props.permanentScrollbars || _this.props.permanentScrollbarY ? null : "hidden";
343358
_this.trackHorizontal.style.display = horizontalScrollPossible || _this.props.permanentScrollbars || _this.props.permanentScrollbarX ? null : "none";
@@ -362,6 +377,11 @@ function (_React$Component) {
362377
var thumbHorizontalWidth = _this.computeThumbHorizontalWidth(trackHorizontalInnerWidth);
363378

364379
var thumbHorizontalOffset = thumbHorizontalWidth ? _this.content.scrollLeft / (_this.content.scrollWidth - _this.content.clientWidth) * (trackHorizontalInnerWidth - thumbHorizontalWidth) : 0;
380+
381+
if (_this.isRtl) {
382+
thumbHorizontalOffset = -(trackHorizontalInnerWidth - thumbHorizontalWidth - thumbHorizontalOffset);
383+
}
384+
365385
_this.thumbHorizontal.style.transform = "translateX(".concat(thumbHorizontalOffset, "px)");
366386
_this.thumbHorizontal.style.width = thumbHorizontalWidth + "px";
367387
} else {
@@ -375,7 +395,8 @@ function (_React$Component) {
375395
scrollHeight: _this.content.scrollHeight,
376396
scrollWidth: _this.content.scrollWidth,
377397
clientHeight: _this.content.clientHeight,
378-
clientWidth: _this.content.clientWidth
398+
clientWidth: _this.content.clientWidth,
399+
rtl: _this.props.rtl
379400
};
380401
(_this.previousScrollValues || false) && _this.props.onScroll && _this.props.onScroll(currentScrollValues, _assertThisInitialized(_assertThisInitialized(_this)));
381402
_this.previousScrollValues = currentScrollValues;
@@ -391,13 +412,13 @@ function (_React$Component) {
391412
_LoopController.default.registerScrollbar(this);
392413

393414
this.addListeners();
394-
this.update();
415+
this.update(true, true);
395416
}
396417
}, {
397418
key: "componentDidUpdate",
398419
value: function componentDidUpdate(prevProps, prevState, snapshot) {
399-
if (prevProps.noScroll !== this.props.noScroll || prevProps.noScrollY !== this.props.noScrollY || prevProps.noScrollX !== this.props.noScrollX || prevProps.permanentScrollbars !== this.props.permanentScrollbars || prevProps.permanentScrollbarX !== this.props.permanentScrollbarX || prevProps.permanentScrollbarY !== this.props.permanentScrollbarY) {
400-
this.update(true);
420+
if (prevProps.noScroll !== this.props.noScroll || prevProps.noScrollY !== this.props.noScrollY || prevProps.noScrollX !== this.props.noScrollX || prevProps.rtl !== this.props.rtl || prevProps.permanentScrollbars !== this.props.permanentScrollbars || prevProps.permanentScrollbarX !== this.props.permanentScrollbarX || prevProps.permanentScrollbarY !== this.props.permanentScrollbarY) {
421+
this.update(true, prevProps.rtl !== this.props.rtl);
401422
}
402423

403424
this.addListeners();
@@ -509,6 +530,9 @@ function (_React$Component) {
509530
permanentScrollbars = _this$props2.permanentScrollbars,
510531
permanentScrollbarX = _this$props2.permanentScrollbarX,
511532
permanentScrollbarY = _this$props2.permanentScrollbarY,
533+
rtl = _this$props2.rtl,
534+
_this$props2$momentum = _this$props2.momentum,
535+
momentum = _this$props2$momentum === void 0 ? true : _this$props2$momentum,
512536
tagName = _this$props2.tagName,
513537
children = _this$props2.children,
514538
style = _this$props2.style,
@@ -534,7 +558,7 @@ function (_React$Component) {
534558
renderTrackHorizontal = _this$props2.renderTrackHorizontal,
535559
renderThumbVertical = _this$props2.renderThumbVertical,
536560
renderThumbHorizontal = _this$props2.renderThumbHorizontal,
537-
props = _objectWithoutProperties(_this$props2, ["minimalThumbsSize", "fallbackScrollbarWidth", "scrollDetectionThreshold", "defaultStyles", "noScroll", "noScrollX", "noScrollY", "permanentScrollbars", "permanentScrollbarX", "permanentScrollbarY", "tagName", "children", "style", "className", "wrapperStyle", "contentStyle", "trackVerticalStyle", "trackHorizontalStyle", "thumbVerticalStyle", "thumbHorizontalStyle", "wrapperClassName", "contentClassName", "trackVerticalClassName", "trackHorizontalClassName", "thumbVerticalClassName", "thumbHorizontalClassName", "onScroll", "onScrollStart", "onScrollStop", "renderWrapper", "renderContent", "renderTrackVertical", "renderTrackHorizontal", "renderThumbVertical", "renderThumbHorizontal"]);
561+
props = _objectWithoutProperties(_this$props2, ["minimalThumbsSize", "fallbackScrollbarWidth", "scrollDetectionThreshold", "defaultStyles", "noScroll", "noScrollX", "noScrollY", "permanentScrollbars", "permanentScrollbarX", "permanentScrollbarY", "rtl", "momentum", "tagName", "children", "style", "className", "wrapperStyle", "contentStyle", "trackVerticalStyle", "trackHorizontalStyle", "thumbVerticalStyle", "thumbHorizontalStyle", "wrapperClassName", "contentClassName", "trackVerticalClassName", "trackHorizontalClassName", "thumbVerticalClassName", "thumbHorizontalClassName", "onScroll", "onScrollStart", "onScrollStop", "renderWrapper", "renderContent", "renderTrackVertical", "renderTrackHorizontal", "renderThumbVertical", "renderThumbHorizontal"]);
538562

539563
var browserScrollbarWidth = (0, _utilities.getScrollbarWidth)();
540564
var holderClassNames = ["ScrollbarsCustom-holder"].concat(className || false ? typeof className === "string" ? [className] : className : []).join(" "),
@@ -545,18 +569,20 @@ function (_React$Component) {
545569
thumbVerticalClassNames = ["ScrollbarsCustom-thumb", "ScrollbarsCustom-thumbVertical"].concat(trackHorizontalClassName || false ? typeof trackHorizontalClassName === "string" ? [trackHorizontalClassName] : trackHorizontalClassName : []).join(" "),
546570
thumbHorizontalClassNames = ["ScrollbarsCustom-thumb", "ScrollbarsCustom-thumbHorizontal"].concat(thumbHorizontalClassName || false ? typeof thumbHorizontalClassName === "string" ? [thumbHorizontalClassName] : thumbHorizontalClassName : []).join(" ");
547571

548-
var holderStyles = _objectSpread({}, style, defaultStyles && defaultElementsStyles.holder),
572+
var holderStyles = _objectSpread({}, style, defaultStyles && defaultElementsStyles.holder, {
573+
direction: rtl === true && "rtl" || rtl === false && "ltr" || null
574+
}),
549575
wrapperStyles = _objectSpread({}, wrapperStyle, defaultStyles && defaultElementsStyles.wrapper, {
550576
position: "relative",
551577
overflow: "hidden"
552578
}),
553579
contentStyles = _objectSpread({}, contentStyle, defaultElementsStyles.content, {
554580
overflowX: "scroll",
555581
overflowY: "scroll",
556-
marginRight: -(browserScrollbarWidth || fallbackScrollbarWidth),
557582
marginBottom: -(browserScrollbarWidth || fallbackScrollbarWidth),
558-
paddingRight: browserScrollbarWidth ? null : fallbackScrollbarWidth,
559583
paddingBottom: browserScrollbarWidth ? null : fallbackScrollbarWidth
584+
}, momentum && {
585+
WebkitOverflowScrolling: "touch"
560586
}),
561587
trackVerticalStyles = _objectSpread({}, trackVerticalStyle, defaultStyles && defaultElementsStyles.trackVertical),
562588
trackHorizontalStyles = _objectSpread({}, trackHorizontalStyle, defaultStyles && defaultElementsStyles.trackHorizontal),
@@ -767,6 +793,8 @@ exports.default = Scrollbar;
767793
_defineProperty(Scrollbar, "propTypes", {
768794
minimalThumbsSize: _propTypes.default.number,
769795
fallbackScrollbarWidth: _propTypes.default.number,
796+
rtl: _propTypes.default.bool,
797+
momentum: _propTypes.default.bool,
770798
defaultStyles: _propTypes.default.bool,
771799
permanentScrollbars: _propTypes.default.bool,
772800
permanentScrollbarX: _propTypes.default.bool,

‎examples/app/components/Body.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export default class Head extends React.Component
2323
<li>Total tests coverage</li>
2424
<li>Scrollbars nesting</li>
2525
<li>RTL support</li>
26+
<li>momentum scrolling for iOS</li>
2627
</ul>
2728
<p><a href="https://github.com/xobotyi/react-scrollbars-custom/tree/master/docs">Docs on GitHub</a> | <a href="./#benchmark" target="_blank">Benchmark</a></p>
2829
</div>

0 commit comments

Comments
 (0)