react-ui-basics 0.0.220 → 0.0.222

package/Scrollable.js

@@ -1,333 +1,318 @@
-import ReactConstants from "./ReactConstants"; import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./CommonFields"; import {toConsumableArray as __toConsumableArray} from "./_virtual/_rollupPluginBabelHelpers"; import {extends as __extends} from "./_virtual/_rollupPluginBabelHelpers"; import {inherits as __inherits} from "./_virtual/_rollupPluginBabelHelpers"; import './Scrollable.css'; import { inherits as _inherits, createSuper as _createSuper, createClass as _createClass, classCallCheck as _classCallCheck, assertThisInitialized as _assertThisInitialized } from './_virtual/_rollupPluginBabelHelpers.js';
-import 'react';
-import ReactCreateElement from './ReactCreateElement.js';
-import 'prop-types';
+import ReactConstants from "./ReactConstants"; import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./CommonFields"; import {toConsumableArray as __toConsumableArray} from "./_virtual/_rollupPluginBabelHelpers"; import {extends as __extends} from "./_virtual/_rollupPluginBabelHelpers"; import {inherits as __inherits} from "./_virtual/_rollupPluginBabelHelpers"; import './Scrollable.css'; import { jsxs as jsxRuntime_1, jsx as jsxRuntime_2 } from 'react/jsx-runtime';
 import { classNames, ref, createRef, clearInterval, clearTimeout, orNoop, addEventListener, WINDOW, preventDefault, setTimeout, setInterval, removeEventListener } from './Tools.js';
 import { stateGS, componentDidMount, componentWillUnmount, componentDidUpdate, render, PureComponent, propsGetter } from './ReactConstants.js';
 
-var SCROLLBAR_MODE_HIDDEN = 'hidden';
-var SCROLLBAR_MODE_AUTO = 'auto';
-var SCROLLBAR_RESIZE_DISABLED = 'disabled';
-var NATIVE_SCROLL_WIDTH = -1;
-var NATIVE_SCROLL_HEIGHT = -1;
-var WITHOUT_SCROLL = 'without-scroll';
-var WITH_SCROLL = 'with-scroll';
-var createFieldGetter = function createFieldGetter(field) {
-  return function (el) {
-    return el[field];
-  };
-};
-var scrollHeightOf = createFieldGetter('scrollHeight');
-var scrollWidthOf = createFieldGetter('scrollWidth');
-var offsetHeightOf = createFieldGetter('offsetHeight');
-var offsetWidthOf = createFieldGetter('offsetWidth');
-var styleOf = createFieldGetter('style');
-var scrollBarModeOf = createFieldGetter('scrollBarMode');
-var onScroll = createFieldGetter('onScroll');
-var horizontalScrollBarModeOf = createFieldGetter('horizontalScrollBarMode');
-var Scrollable = function (_PureComponent) {
-  _inherits(Scrollable, _PureComponent);
-  var _super = _createSuper(Scrollable);
-  function Scrollable(properties) {
-    var _this;
-    _classCallCheck(this, Scrollable);
-    _this = _super.call(this, properties);
-    var that = _assertThisInitialized(_this);
-    that.state = {};
-    var props = propsGetter(that);
-    var status = stateGS(that);
-    var statusH = stateGS(that);
-    var viewportRef = createRef();
-    var scrollbarRef = createRef();
-    var horizontalScrollbarRef = createRef();
-    var thumbRef = createRef();
-    var horizontalThumbRef = createRef();
-    var resizeInterval;
-    var initTimeout;
-    var clear = function clear() {
-      clearInterval(resizeInterval);
-      clearTimeout(initTimeout);
-    };
-    var init = function init() {
-      clear();
-      if (scrollBarModeOf(props()) === SCROLLBAR_MODE_HIDDEN && horizontalScrollBarModeOf(props()) === SCROLLBAR_MODE_HIDDEN) {
-        status(WITHOUT_SCROLL);
-        statusH(WITHOUT_SCROLL);
-        return;
-      }
-      var viewport = viewportRef();
-      var scrollbar = scrollbarRef();
-      var scrollbarH = horizontalScrollbarRef();
-      var container = that.el;
-      var thumb = thumbRef();
-      var thumbH = horizontalThumbRef();
-      var scrolling = false;
-      var scrolledToBottom = false;
-      var scrolledToTop = false;
-      var adjustedScrollWidth = false;
-      var lastY = 0;
-      var lastX = 0;
-      var ratio = 0;
-      var ratioH = 0;
-      var onScrollListener = onScroll(props());
-      viewport.onscroll = function (e) {
-        var scrollHeight = scrollHeightOf(viewport);
-        var offsetHeight = offsetHeightOf(viewport);
-        var scrollWidth = scrollWidthOf(viewport);
-        var offsetWidth = offsetWidthOf(viewport);
-        var scrollbarHeight = offsetHeightOf(scrollbar);
-        var scrollbarWidth = offsetWidthOf(scrollbarH);
-        var position = __scrollTop(viewport) / (scrollHeight - offsetHeight);
-        var positionH = __scrollLeft(viewport) / (scrollWidth - offsetWidth);
-        if (position > 1) {
-          viewport.scrollTop = scrollHeight - offsetHeight;
-          position = 1;
-        }
-        styleOf(thumb).top = position * (scrollbarHeight - offsetHeightOf(thumb)) + 'px';
-        styleOf(thumbH).left = positionH * (scrollbarWidth - offsetWidthOf(thumbH)) + 'px';
-        if (position >= 0.98) {
-          !scrolledToBottom && orNoop(props().onScrolledToBottom)();
-          scrolledToBottom = true;
-        } else {
-          scrolledToBottom = false;
-        }
-        if (position <= 0.02) {
-          !scrolledToTop && orNoop(props().onScrolledToTop)();
-          scrolledToTop = true;
-        } else {
-          scrolledToTop = false;
-        }
-        onScrollListener && onScrollListener(e);
-      };
-      var reset = function reset() {
-        removeEventListener(WINDOW, 'mouseup', reset);
-        removeEventListener(WINDOW, 'mousemove', moveListener);
-        __style(viewport).scrollBehavior = '';
-        scrolling = false;
-      };
-      var moveListener = function moveListener(e) {
-        if (!scrolling) return;
-        if (scrolling === 'v') {
-          viewport.scrollTop += (e.clientY - lastY) * ratio;
-          lastY = e.clientY;
-        } else if (scrolling === 'h') {
-          viewport.scrollLeft += (e.clientX - lastX) * ratioH;
-          lastX = e.clientX;
-        }
-      };
-      thumb.onmousedown = function (e) {
-        lastY = e.clientY;
-        scrolling = 'v';
-        ratio = scrollHeightOf(viewport) / offsetHeightOf(viewport);
-        __style(viewport).scrollBehavior = 'unset';
-        addEventListener(WINDOW, 'mouseup', reset);
-        addEventListener(WINDOW, 'mousemove', moveListener);
-      };
-      thumb.ondragstart = preventDefault;
-      thumb.onmouseup = reset;
-      thumbH.onmousedown = function (e) {
-        lastX = e.clientX;
-        scrolling = 'h';
-        ratioH = scrollWidthOf(viewport) / offsetWidthOf(viewport);
-        __style(viewport).scrollBehavior = 'unset';
-        addEventListener(WINDOW, 'mouseup', reset);
-        addEventListener(WINDOW, 'mousemove', moveListener);
-      };
-      thumbH.ondragstart = preventDefault;
-      thumbH.onmouseup = reset;
-      scrollbar.onclick = function (e) {
-        if (__target(e) === scrollbar) {
-          var thumbPosition = parseInt(__top(styleOf(thumb)));
-          viewport.scrollTop += offsetHeightOf(viewport) * 0.9 * (e.offsetY < thumbPosition ? -1 : 1);
-        }
-      };
-      scrollbarH.onclick = function (e) {
-        if (__target(e) === scrollbarH) {
-          var thumbPosition = parseInt(__left(styleOf(thumbH)));
-          viewport.scrollLeft += offsetWidthOf(viewport) * 0.9 * (e.offsetX < thumbPosition ? -1 : 1);
-        }
-      };
-      var adjustScrollWidth = function adjustScrollWidth() {
-        if (NATIVE_SCROLL_WIDTH < 0) {
-          NATIVE_SCROLL_WIDTH = viewport.offsetWidth - __clientWidth(viewport);
-          if (NATIVE_SCROLL_WIDTH === 0 && scrollHeightOf(viewport) !== offsetHeightOf(viewport)) {
-            NATIVE_SCROLL_WIDTH = -1;
-          }
-        }
-        if (NATIVE_SCROLL_HEIGHT < 0) {
-          NATIVE_SCROLL_HEIGHT = viewport.offsetHeight - __clientHeight(viewport);
-          if (NATIVE_SCROLL_HEIGHT === 0 && scrollWidthOf(viewport) !== offsetWidthOf(viewport)) {
-            NATIVE_SCROLL_HEIGHT = -1;
-          }
-        }
-        if (!adjustedScrollWidth) {
-          if (NATIVE_SCROLL_WIDTH >= 0 && status() !== WITHOUT_SCROLL) {
-            styleOf(viewport).paddingRight = NATIVE_SCROLL_WIDTH + __clientWidth(scrollbar) + 'px';
-            styleOf(viewport).marginRight = -NATIVE_SCROLL_WIDTH - __clientWidth(scrollbar) + 'px';
-          }
-          if (NATIVE_SCROLL_HEIGHT >= 0 && statusH() !== WITHOUT_SCROLL) {
-            styleOf(viewport).paddingBottom = NATIVE_SCROLL_HEIGHT + __clientHeight(scrollbarH) + 'px';
-            styleOf(viewport).marginBottom = -NATIVE_SCROLL_HEIGHT - __clientHeight(scrollbarH) + 'px';
-          }
-          adjustedScrollWidth = true;
-        }
-      };
-      adjustScrollWidth();
-      var showScrollbar = function showScrollbar(scrollbar, viewport, adjustScrollWidth) {
-        styleOf(scrollbar).visibility = 'inherit';
-        styleOf(scrollbar).bottom = '0';
-        styleOf(viewport).overflowY = '';
-        adjustScrollWidth();
-        status() !== WITH_SCROLL && status(WITH_SCROLL);
-      };
-      var hideScrollbar = function hideScrollbar(scrollbar, viewport) {
-        styleOf(scrollbar).visibility = 'hidden';
-        styleOf(viewport).overflowY = 'inherit';
-        styleOf(viewport).paddingRight = '0';
-        styleOf(viewport).marginRight = '0';
-        status() !== WITHOUT_SCROLL && status(WITHOUT_SCROLL);
-      };
-      var showHorizontalScrollbar = function showHorizontalScrollbar(scrollbar, viewport, adjustScrollWidth) {
-        styleOf(scrollbar).visibility = 'inherit';
-        styleOf(scrollbar).right = '0';
-        styleOf(viewport).overflowX = '';
-        adjustScrollWidth();
-        statusH() !== WITH_SCROLL && statusH(WITH_SCROLL);
-      };
-      var hideHorizontalScrollbar = function hideHorizontalScrollbar(scrollbar, viewport) {
-        styleOf(scrollbar).visibility = 'hidden';
-        styleOf(viewport).overflowX = 'inherit';
-        styleOf(viewport).paddingBottom = '0';
-        styleOf(viewport).marginBottom = '0';
-        statusH() !== WITHOUT_SCROLL && statusH(WITHOUT_SCROLL);
-      };
-      var updateVerticalScrollbar = function updateVerticalScrollbar() {
-        var scrollHeight = scrollHeightOf(viewport);
-        var scrollbarHeight = offsetHeightOf(scrollbar);
-        var containerHeight = offsetHeightOf(container);
-        !adjustedScrollWidth && adjustScrollWidth();
-        var newRatio = scrollHeight / scrollbarHeight;
-        if (!containerHeight || ratio === newRatio && Number.isFinite(newRatio) || Number.isNaN(newRatio)) return;
-        var offsetHeight = offsetHeightOf(viewport);
-        var horizontalScrollBarOffset = statusH() !== WITHOUT_SCROLL ? __clientHeight(scrollbarH) + Math.max(NATIVE_SCROLL_HEIGHT, 0) : 0;
-        var containerOffsetHeight = containerHeight + horizontalScrollBarOffset;
-        if (containerOffsetHeight > scrollHeight && status() === WITHOUT_SCROLL) return;
-        if (props().autoScrollTop && scrollHeight - offsetHeight - __scrollTop(viewport) <= 20 && newRatio < ratio && Number.isFinite(newRatio) && Number.isFinite(ratio)) {
-          viewport.scrollTop = 0;
-        }
-        ratio = newRatio;
-        if (newRatio > 1.02) styleOf(thumb).height = scrollbarHeight / newRatio + 'px';
-        styleOf(container).height = scrollHeight - horizontalScrollBarOffset + 'px';
-        containerOffsetHeight = containerHeight + horizontalScrollBarOffset;
-        if (scrollBarModeOf(props()) === SCROLLBAR_MODE_HIDDEN) {
-          if (status() !== WITHOUT_SCROLL) hideScrollbar(scrollbar, viewport);
-          return;
-        }
-        if (containerOffsetHeight <= scrollHeight) {
-          adjustedScrollWidth = false;
-          showScrollbar(scrollbar, viewport, adjustScrollWidth);
-        } else {
-          hideScrollbar(scrollbar, viewport);
-        }
-        scrolledToBottom = false;
-        scrolledToTop = false;
-        var position = __scrollTop(viewport) / (scrollHeight - offsetHeight);
-        styleOf(thumb).top = position * (scrollbarHeight - offsetHeightOf(thumb)) + 'px';
-      };
-      var updateHorizontalScrollbar = function updateHorizontalScrollbar() {
-        var scrollWidth = scrollWidthOf(viewport);
-        var scrollbarWidth = offsetWidthOf(scrollbarH);
-        var containerWidth = offsetWidthOf(container);
-        !adjustedScrollWidth && adjustScrollWidth();
-        var newRatio = scrollWidth / scrollbarWidth;
-        if (!containerWidth || ratioH === newRatio && Number.isFinite(newRatio) || Number.isNaN(newRatio)) return;
-        var offsetWidth = offsetWidthOf(viewport);
-        var verticalScrollBarOffset = status() !== WITHOUT_SCROLL ? __clientWidth(scrollbar) + Math.max(NATIVE_SCROLL_WIDTH, 0) : 0;
-        var containerOffsetWidth = containerWidth + verticalScrollBarOffset;
-        if (containerOffsetWidth > scrollWidth && statusH() === WITHOUT_SCROLL) return;
-        ratioH = newRatio;
-        if (newRatio > 1.02) styleOf(thumbH).width = scrollbarWidth / newRatio + 'px';
-        if (horizontalScrollBarModeOf(props()) === SCROLLBAR_MODE_HIDDEN) {
-          if (statusH() !== WITHOUT_SCROLL) hideHorizontalScrollbar(scrollbarH, viewport);
-          return;
-        }
-        styleOf(container).width = scrollWidth - verticalScrollBarOffset + 'px';
-        containerOffsetWidth = containerWidth + verticalScrollBarOffset;
-        if (containerOffsetWidth <= scrollWidth) {
-          adjustedScrollWidth = false;
-          showHorizontalScrollbar(scrollbarH, viewport, adjustScrollWidth);
-        } else {
-          hideHorizontalScrollbar(scrollbarH, viewport);
-        }
-        var position = __scrollLeft(viewport) / (scrollWidth - offsetWidth);
-        styleOf(thumbH).left = position * (scrollbarWidth - offsetWidthOf(thumbH)) + 'px';
-      };
-      var update;
-      var sbm = scrollBarModeOf(props());
-      var hsbm = horizontalScrollBarModeOf(props());
-      if (sbm !== SCROLLBAR_RESIZE_DISABLED && !hsbm === SCROLLBAR_RESIZE_DISABLED) {
-        update = function update() {
-          updateVerticalScrollbar();
-          updateHorizontalScrollbar();
+const SCROLLBAR_MODE_HIDDEN = 'hidden';
+const SCROLLBAR_MODE_AUTO = 'auto';
+const SCROLLBAR_RESIZE_DISABLED = 'disabled';
+let NATIVE_SCROLL_WIDTH = -1;
+let NATIVE_SCROLL_HEIGHT = -1;
+const WITHOUT_SCROLL = 'without-scroll';
+const WITH_SCROLL = 'with-scroll';
+const createFieldGetter = field => el => el[field];
+const scrollHeightOf = createFieldGetter('scrollHeight');
+const scrollWidthOf = createFieldGetter('scrollWidth');
+const offsetHeightOf = createFieldGetter('offsetHeight');
+const offsetWidthOf = createFieldGetter('offsetWidth');
+const styleOf = createFieldGetter('style');
+const scrollBarModeOf = createFieldGetter('scrollBarMode');
+const onScroll = createFieldGetter('onScroll');
+const horizontalScrollBarModeOf = createFieldGetter('horizontalScrollBarMode');
+class AbstractScrollable extends PureComponent {
+}
+class Scrollable extends AbstractScrollable {
+    constructor(properties) {
+        super(properties);
+        const that = this;
+        that.state = {};
+        const props = propsGetter(that);
+        const status = stateGS(that);
+        const statusH = stateGS(that);
+        const viewportRef = createRef();
+        const scrollbarRef = createRef();
+        const horizontalScrollbarRef = createRef();
+        const thumbRef = createRef();
+        const horizontalThumbRef = createRef();
+        let resizeInterval;
+        let initTimeout;
+        const clear = () => {
+            clearInterval(resizeInterval);
+            clearTimeout(initTimeout);
+        };
+        const init = () => {
+            clear();
+            if (scrollBarModeOf(props()) === SCROLLBAR_MODE_HIDDEN && horizontalScrollBarModeOf(props()) === SCROLLBAR_MODE_HIDDEN) {
+                status(WITHOUT_SCROLL);
+                statusH(WITHOUT_SCROLL);
+                return;
+            }
+            const viewport = viewportRef();
+            const scrollbar = scrollbarRef();
+            const scrollbarH = horizontalScrollbarRef();
+            const container = that.el;
+            const thumb = thumbRef();
+            const thumbH = horizontalThumbRef();
+            let scrolling = '';
+            let scrolledToBottom = false;
+            let scrolledToTop = false;
+            let adjustedScrollWidth = false;
+            let lastY = 0;
+            let lastX = 0;
+            let ratio = 0;
+            let ratioH = 0;
+            const onScrollListener = onScroll(props());
+            viewport.onscroll = (e) => {
+                const scrollHeight = scrollHeightOf(viewport);
+                const offsetHeight = offsetHeightOf(viewport);
+                const scrollWidth = scrollWidthOf(viewport);
+                const offsetWidth = offsetWidthOf(viewport);
+                const scrollbarHeight = offsetHeightOf(scrollbar);
+                const scrollbarWidth = offsetWidthOf(scrollbarH);
+                let position = __scrollTop(viewport) / (scrollHeight - offsetHeight);
+                const positionH = __scrollLeft(viewport) / (scrollWidth - offsetWidth);
+                if (position > 1) {
+                    viewport.scrollTop = scrollHeight - offsetHeight;
+                    position = 1;
+                }
+                styleOf(thumb).top = (position * (scrollbarHeight - offsetHeightOf(thumb))) + 'px';
+                styleOf(thumbH).left = (positionH * (scrollbarWidth - offsetWidthOf(thumbH))) + 'px';
+                if (position >= 0.98) {
+                    !scrolledToBottom && orNoop(props().onScrolledToBottom)();
+                    scrolledToBottom = true;
+                }
+                else {
+                    scrolledToBottom = false;
+                }
+                if (position <= 0.02) {
+                    !scrolledToTop && orNoop(props().onScrolledToTop)();
+                    scrolledToTop = true;
+                }
+                else {
+                    scrolledToTop = false;
+                }
+                onScrollListener && onScrollListener(e);
+            };
+            const reset = () => {
+                removeEventListener(WINDOW, 'mouseup', reset);
+                removeEventListener(WINDOW, 'mousemove', moveListener);
+                __style(viewport).scrollBehavior = '';
+                scrolling = '';
+            };
+            const moveListener = (e) => {
+                if (!scrolling)
+                    return;
+                if (scrolling === 'v') {
+                    viewport.scrollTop += (e.clientY - lastY) * ratio;
+                    lastY = e.clientY;
+                }
+                else if (scrolling === 'h') {
+                    viewport.scrollLeft += (e.clientX - lastX) * ratioH;
+                    lastX = e.clientX;
+                }
+            };
+            thumb.onmousedown = (e) => {
+                lastY = e.clientY;
+                scrolling = 'v';
+                ratio = scrollHeightOf(viewport) / offsetHeightOf(viewport);
+                __style(viewport).scrollBehavior = 'unset';
+                addEventListener(WINDOW, 'mouseup', reset);
+                addEventListener(WINDOW, 'mousemove', moveListener);
+            };
+            thumb.ondragstart = preventDefault;
+            thumb.onmouseup = reset;
+            thumbH.onmousedown = (e) => {
+                lastX = e.clientX;
+                scrolling = 'h';
+                ratioH = scrollWidthOf(viewport) / offsetWidthOf(viewport);
+                __style(viewport).scrollBehavior = 'unset';
+                addEventListener(WINDOW, 'mouseup', reset);
+                addEventListener(WINDOW, 'mousemove', moveListener);
+            };
+            thumbH.ondragstart = preventDefault;
+            thumbH.onmouseup = reset;
+            scrollbar.onclick = (e) => {
+                if (__target(e) === scrollbar) {
+                    let thumbPosition = parseInt(__top(styleOf(thumb)));
+                    viewport.scrollTop += offsetHeightOf(viewport) * 0.9 * (e.offsetY < thumbPosition ? -1 : 1);
+                }
+            };
+            scrollbarH.onclick = (e) => {
+                if (__target(e) === scrollbarH) {
+                    let thumbPosition = parseInt(__left(styleOf(thumbH)));
+                    viewport.scrollLeft += offsetWidthOf(viewport) * 0.9 * (e.offsetX < thumbPosition ? -1 : 1);
+                }
+            };
+            const adjustScrollWidth = () => {
+                if (NATIVE_SCROLL_WIDTH < 0) {
+                    NATIVE_SCROLL_WIDTH = viewport.offsetWidth - __clientWidth(viewport);
+                    if (NATIVE_SCROLL_WIDTH === 0 && scrollHeightOf(viewport) !== offsetHeightOf(viewport)) {
+                        NATIVE_SCROLL_WIDTH = -1;
+                    }
+                }
+                if (NATIVE_SCROLL_HEIGHT < 0) {
+                    NATIVE_SCROLL_HEIGHT = viewport.offsetHeight - __clientHeight(viewport);
+                    if (NATIVE_SCROLL_HEIGHT === 0 && scrollWidthOf(viewport) !== offsetWidthOf(viewport)) {
+                        NATIVE_SCROLL_HEIGHT = -1;
+                    }
+                }
+                if (!adjustedScrollWidth) {
+                    if (NATIVE_SCROLL_WIDTH >= 0 && status() !== WITHOUT_SCROLL) {
+                        styleOf(viewport).paddingRight = (NATIVE_SCROLL_WIDTH) + __clientWidth(scrollbar) + 'px';
+                        styleOf(viewport).marginRight = -(NATIVE_SCROLL_WIDTH) - __clientWidth(scrollbar) + 'px';
+                    }
+                    if (NATIVE_SCROLL_HEIGHT >= 0 && statusH() !== WITHOUT_SCROLL) {
+                        styleOf(viewport).paddingBottom = (NATIVE_SCROLL_HEIGHT) + __clientHeight(scrollbarH) + 'px';
+                        styleOf(viewport).marginBottom = -(NATIVE_SCROLL_HEIGHT) - __clientHeight(scrollbarH) + 'px';
+                    }
+                    adjustedScrollWidth = true;
+                }
+            };
+            adjustScrollWidth();
+            const showScrollbar = (scrollbar, viewport, adjustScrollWidth) => {
+                styleOf(scrollbar).visibility = 'inherit';
+                styleOf(scrollbar).bottom = '0'; //enable scrollbar
+                styleOf(viewport).overflowY = '';
+                adjustScrollWidth();
+                status() !== WITH_SCROLL && status(WITH_SCROLL);
+            };
+            const hideScrollbar = (scrollbar, viewport) => {
+                styleOf(scrollbar).visibility = 'hidden'; //disable scrollbar
+                styleOf(viewport).overflowY = 'inherit';
+                styleOf(viewport).paddingRight = '0';
+                styleOf(viewport).marginRight = '0';
+                status() !== WITHOUT_SCROLL && status(WITHOUT_SCROLL);
+            };
+            const showHorizontalScrollbar = (scrollbar, viewport, adjustScrollWidth) => {
+                styleOf(scrollbar).visibility = 'inherit';
+                styleOf(scrollbar).right = '0'; //enable scrollbar
+                styleOf(viewport).overflowX = '';
+                adjustScrollWidth();
+                statusH() !== WITH_SCROLL && statusH(WITH_SCROLL);
+            };
+            const hideHorizontalScrollbar = (scrollbar, viewport) => {
+                styleOf(scrollbar).visibility = 'hidden'; //disable scrollbar
+                styleOf(viewport).overflowX = 'inherit';
+                styleOf(viewport).paddingBottom = '0';
+                styleOf(viewport).marginBottom = '0';
+                statusH() !== WITHOUT_SCROLL && statusH(WITHOUT_SCROLL);
+            };
+            const updateVerticalScrollbar = () => {
+                const scrollHeight = scrollHeightOf(viewport);
+                const scrollbarHeight = offsetHeightOf(scrollbar);
+                const containerHeight = offsetHeightOf(container);
+                !adjustedScrollWidth && adjustScrollWidth();
+                const newRatio = scrollHeight / scrollbarHeight;
+                if ((ratio === newRatio && Number.isFinite(newRatio)) || Number.isNaN(newRatio))
+                    return;
+                const offsetHeight = offsetHeightOf(viewport);
+                const horizontalScrollBarOffset = statusH() !== WITHOUT_SCROLL ? __clientHeight(scrollbarH) + Math.max(NATIVE_SCROLL_HEIGHT, 0) : 0;
+                let containerOffsetHeight = containerHeight + horizontalScrollBarOffset;
+                if (containerOffsetHeight === scrollHeight && status() === WITHOUT_SCROLL) {
+                    ratio = newRatio;
+                    return;
+                }
+                if (props().autoScrollTop && scrollHeight - offsetHeight - __scrollTop(viewport) <= 20 && newRatio < ratio && Number.isFinite(newRatio) && Number.isFinite(ratio)) {
+                    viewport.scrollTop = 0; // scroll to top if scrollbar gets smaller
+                }
+                ratio = newRatio;
+                if (newRatio > 1.02)
+                    styleOf(thumb).height = (scrollbarHeight / newRatio) + 'px';
+                styleOf(container).height = scrollHeight - horizontalScrollBarOffset + 'px';
+                containerOffsetHeight = containerHeight + horizontalScrollBarOffset;
+                if (scrollBarModeOf(props()) === SCROLLBAR_MODE_HIDDEN) {
+                    if (status() !== WITHOUT_SCROLL)
+                        hideScrollbar(scrollbar, viewport);
+                    return;
+                }
+                if (containerOffsetHeight < scrollHeight) {
+                    adjustedScrollWidth = false;
+                    showScrollbar(scrollbar, viewport, adjustScrollWidth);
+                }
+                else {
+                    hideScrollbar(scrollbar, viewport);
+                }
+                scrolledToBottom = false;
+                scrolledToTop = false;
+                const position = __scrollTop(viewport) / (scrollHeight - offsetHeight);
+                styleOf(thumb).top = (position * (scrollbarHeight - offsetHeightOf(thumb))) + 'px';
+            };
+            const updateHorizontalScrollbar = () => {
+                const scrollWidth = scrollWidthOf(viewport);
+                const scrollbarWidth = offsetWidthOf(scrollbarH);
+                const containerWidth = offsetWidthOf(container);
+                !adjustedScrollWidth && adjustScrollWidth();
+                const newRatio = scrollWidth / scrollbarWidth;
+                if ((ratioH === newRatio && Number.isFinite(newRatio)) || Number.isNaN(newRatio))
+                    return;
+                const offsetWidth = offsetWidthOf(viewport);
+                const verticalScrollBarOffset = status() !== WITHOUT_SCROLL ? __clientWidth(scrollbar) + Math.max(NATIVE_SCROLL_WIDTH, 0) : 0;
+                ratioH = newRatio;
+                let containerOffsetWidth = containerWidth + verticalScrollBarOffset;
+                if (containerOffsetWidth === scrollWidth && statusH() === WITHOUT_SCROLL)
+                    return;
+                if (newRatio > 1.02)
+                    styleOf(thumbH).width = (scrollbarWidth / newRatio) + 'px';
+                if (horizontalScrollBarModeOf(props()) === SCROLLBAR_MODE_HIDDEN) {
+                    if (statusH() !== WITHOUT_SCROLL)
+                        hideHorizontalScrollbar(scrollbarH, viewport);
+                    return;
+                }
+                styleOf(container).width = (scrollWidth - verticalScrollBarOffset) + 'px';
+                containerOffsetWidth = containerWidth + verticalScrollBarOffset;
+                if (containerOffsetWidth < scrollWidth) {
+                    adjustedScrollWidth = false;
+                    showHorizontalScrollbar(scrollbarH, viewport, adjustScrollWidth);
+                }
+                else {
+                    hideHorizontalScrollbar(scrollbarH, viewport);
+                }
+                const position = __scrollLeft(viewport) / (scrollWidth - offsetWidth);
+                styleOf(thumbH).left = (position * (scrollbarWidth - offsetWidthOf(thumbH))) + 'px';
+            };
+            let update;
+            let sbm = scrollBarModeOf(props());
+            let hsbm = horizontalScrollBarModeOf(props());
+            if (sbm !== SCROLLBAR_RESIZE_DISABLED && hsbm !== SCROLLBAR_RESIZE_DISABLED) {
+                update = () => {
+                    updateVerticalScrollbar();
+                    updateHorizontalScrollbar();
+                };
+            }
+            else if (sbm !== SCROLLBAR_RESIZE_DISABLED)
+                update = updateVerticalScrollbar;
+            else if (hsbm !== SCROLLBAR_RESIZE_DISABLED)
+                update = updateHorizontalScrollbar;
+            if (update) {
+                initTimeout = setTimeout(() => {
+                    resizeInterval = setInterval(update, 16);
+                }, 200);
+            }
+        };
+        that[ReactConstants[0]] = init;
+        that[ReactConstants[1]] = clear;
+        that[ReactConstants[2]] = (prevProps) => {
+            if (scrollBarModeOf(props()) !== scrollBarModeOf(prevProps))
+                init();
+            else if (onScroll(props()) !== onScroll(prevProps))
+                init();
+        };
+        that.setScroll = (y) => {
+            viewportRef().scrollTop = y;
+        };
+        that.getScroll = () => __scrollTop(viewportRef());
+        that.getScrollHeight = () => scrollHeightOf(viewportRef());
+        that.getHeight = () => that.el.clientHeight;
+        that[ReactConstants[3]] = () => {
+            const _props = props();
+            const { className, children } = _props;
+            return (jsxRuntime_1("div", __extends({ [ReactConstants[5]]: classNames('Scrollable', className, status() || WITH_SCROLL, statusH() + '-horizontal'), style: styleOf(_props), ref: ref('el', this) }, { [ReactConstants[4]]: [jsxRuntime_2("div", __extends({ [ReactConstants[5]]: "viewport", ref: viewportRef }, { [ReactConstants[4]]: children })), jsxRuntime_2("div", __extends({ [ReactConstants[5]]: classNames('scrollbar', scrollBarModeOf(_props) || SCROLLBAR_MODE_AUTO), ref: scrollbarRef }, { [ReactConstants[4]]: jsxRuntime_2("div", { [ReactConstants[5]]: "thumb", ref: thumbRef }) })), jsxRuntime_2("div", __extends({ [ReactConstants[5]]: classNames('scrollbar horizontal', horizontalScrollBarModeOf(_props)), ref: horizontalScrollbarRef }, { [ReactConstants[4]]: jsxRuntime_2("div", { [ReactConstants[5]]: "thumb", ref: horizontalThumbRef }) }))] })));
         };
-      } else if (sbm !== SCROLLBAR_RESIZE_DISABLED) update = updateVerticalScrollbar;else if (hsbm !== SCROLLBAR_RESIZE_DISABLED) update = updateHorizontalScrollbar;
-      if (update) {
-        initTimeout = setTimeout(function () {
-          resizeInterval = setInterval(update, 50);
-        }, 200);
-      }
-    };
-    that[ReactConstants[0]] = init;
-    that[ReactConstants[1]] = clear;
-    that[ReactConstants[2]] = function (prevProps) {
-      if (scrollBarModeOf(props()) !== scrollBarModeOf(prevProps)) init();else if (onScroll(props()) !== onScroll(prevProps)) init();
-    };
-    that.setScroll = function (y) {
-      viewportRef().scrollTop = y;
-    };
-    that.getScroll = function () {
-      return __scrollTop(viewportRef());
-    };
-    that.getScrollHeight = function () {
-      return scrollHeightOf(viewportRef());
-    };
-    that.getHeight = function () {
-      return that.el.clientHeight;
-    };
-    that[ReactConstants[3]] = function () {
-      var _props = props();
-      var className = _props[ReactConstants[5]],
-        children = _props[ReactConstants[4]];
-      return ReactCreateElement("div", {
-        [ReactConstants[5]]: classNames('Scrollable', className, status() || WITH_SCROLL, statusH() + '-horizontal'),
-        style: styleOf(_props),
-        ref: ref('el', _assertThisInitialized(_this))
-      }, ReactCreateElement("div", {
-        [ReactConstants[5]]: "viewport",
-        ref: viewportRef
-      }, children), ReactCreateElement("div", {
-        [ReactConstants[5]]: classNames('scrollbar', scrollBarModeOf(_props) || SCROLLBAR_MODE_AUTO),
-        ref: scrollbarRef
-      }, ReactCreateElement("div", {
-        [ReactConstants[5]]: "thumb",
-        ref: thumbRef
-      })), ReactCreateElement("div", {
-        [ReactConstants[5]]: classNames('scrollbar horizontal', horizontalScrollBarModeOf(_props)),
-        ref: horizontalScrollbarRef
-      }, ReactCreateElement("div", {
-        [ReactConstants[5]]: "thumb",
-        ref: horizontalThumbRef
-      })));
-    };
-    return _this;
-  }
-  return _createClass(Scrollable);
-}(PureComponent);
-var Scrollable$1 = Scrollable;
+    }
+}
 Scrollable.defaultProps = {
-  autoScrollTop: true,
-  horizontalScrollBarMode: SCROLLBAR_MODE_HIDDEN
+    autoScrollTop: true,
+    horizontalScrollBarMode: SCROLLBAR_MODE_HIDDEN
 };
 
-export { SCROLLBAR_MODE_AUTO, SCROLLBAR_MODE_HIDDEN, SCROLLBAR_RESIZE_DISABLED, Scrollable$1 as default };
+export { SCROLLBAR_MODE_AUTO, SCROLLBAR_MODE_HIDDEN, SCROLLBAR_RESIZE_DISABLED, Scrollable as default };
 //# sourceMappingURL=Scrollable.js.map