micro-ui-y/lib/scroll/scrollBox2.0.js

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var VERTICAL = 'vertial';
var HORIZONTAL = 'horizontal';

var hoScrollBarWidth = 0.6;
var veScrollBarWidth = 0.4;

var styles = {
    main: {
        overflow: 'hidden',
        position: 'relative',
        boxSizing: 'border-box'
    },
    container: {
        // position: 'absolute',
        top: '0',
        left: '0',
        overflow: 'scroll',

        position: 'relative',
        boxSizing: 'border-box'
    },
    track: {
        vertical: {
            position: 'absolute',
            top: '0',
            right: '0',
            width: veScrollBarWidth + 'rem',
            transition: 'opacity 0.3s',
            // backgroundColor: '#000000',
            zIndex: "10"
            //borderLeft: '0.0635rem solid #E8E8E8',
        },
        // verticalCustomize: {

        // },
        horizontal: {
            position: 'absolute',
            left: '0',
            bottom: '0',
            height: hoScrollBarWidth + 'rem',
            transition: 'opacity 0.3s',
            // backgroundColor: '#ffffff',
            zIndex: "10"
            //borderTop: '0.06375rem solid #E8E8E8',
        }
        // horizontalCustomize: {

        // }
    },
    handler: {
        vertical: {
            position: 'absolute',
            width: '100%',
            backgroundColor: '#cccccc',
            borderRadius: '0.25rem',
            transition: 'opacity 0.3s',
            cursor: "pointer"
        },
        // verticalCustomize: {

        // },
        horizontal: {
            position: 'absolute',
            height: '100%',
            backgroundColor: '#cccccc',
            borderRadius: '0.25rem',
            transition: 'opacity 0.3s',
            cursor: "pointer"
        }
        // horizontalCustomize: {

        // }
    },
    square: {
        position: 'absolute',
        width: '0.6rem',
        height: '0.6rem',
        right: 0,
        bottom: 0,
        backgroundColor: 'white'
    }
};

var ScrollBox = function (_React$PureComponent) {
    _inherits(ScrollBox, _React$PureComponent);

    // offsetHeight = 0;
    // offsetWidth = 0;
    function ScrollBox(props) {
        _classCallCheck(this, ScrollBox);

        var _this = _possibleConstructorReturn(this, (ScrollBox.__proto__ || Object.getPrototypeOf(ScrollBox)).call(this, props));

        _this.el = null;
        _this.lastScrollHeight = 0;
        _this.lastScrollWidth = 0;
        _this.activeHandler = null;
        _this.lastMousePos = null;
        _this.lastContainerScrollTop = 0;
        _this.lastContainerScrollLeft = 0;
        _this.handlerHider = null;
        _this.scrollbarScrollThrottle = null;

        _this.handleReadyStateChange = function () {
            if (document.readyState === 'complete') {
                _this.prepareScrollbar();
            }
        };

        _this.prepareScrollbar = function () {
            // this.collectInfo();
            _this.updateTrackVisibilities();
            _this.handlerContainerScroll();
            if (_this.props.start.includes('bottom')) {
                _this.el.scrollTop = _this.el.scrollHeight;
            }
            if (_this.props.start.includes('right')) {
                _this.el.scrollLeft = _this.el.scrollWidth;
            }
        };

        _this.updateTrackVisibilities = function () {
            var el = _this.el;
            var scrollHeight = el.scrollHeight,
                scrollWidth = el.scrollWidth;


            if (scrollHeight === _this.lastScrollHeight && scrollWidth === _this.lastScrollWidth) return;
            _this.setState({
                showVeriticalTrack: scrollHeight > _this.el.offsetHeight,
                showHorizontalTrack: scrollWidth > _this.el.offsetWidth
            });
            _this.lastScrollWidth = scrollWidth;
            _this.lastScrollHeight = scrollHeight;
        };

        _this.runFunc = function (funcName) {
            for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
                args[_key - 1] = arguments[_key];
            }

            if (_this[funcName]) {
                _this[funcName](args);
            }
        };

        _this.throttle = function (func, timeout) {
            if (!func) return null;

            var canRun = true;

            return function () {

                if (canRun) {
                    canRun = false;
                    func.apply(undefined, arguments);

                    setTimeout(function () {
                        canRun = true;
                    }, timeout);
                }
            };
        };

        _this.handlerContainerScroll = function (e) {
            if (_this.props.autohide) {
                clearTimeout(_this.handlerHider);
                _this.setState({ hideHandler: false });
                _this.handlerHider = setTimeout(function () {
                    _this.setState({ hideHandler: true });
                }, _this.props.timeout);
            }

            var el = _this.el;
            var top = el.scrollTop / (el.scrollHeight - el.offsetHeight) * (1 - el.offsetHeight / _this.lastScrollHeight) * 100;
            var bottom = (1 - (el.scrollTop + el.offsetHeight) / (el.scrollHeight - el.offsetHeight) * (1 - el.offsetHeight / _this.lastScrollHeight)) * 100;
            if (bottom < 0) bottom = 0;
            var left = el.scrollLeft / (el.scrollWidth - el.offsetWidth) * (1 - el.offsetWidth / _this.lastScrollWidth) * 100;
            var right = (1 - (el.scrollLeft + el.offsetWidth) / (el.scrollWidth - el.offsetWidth) * (1 - el.offsetWidth / _this.lastScrollWidth)) * 100;
            if (right < 0) right = 0;
            var requestFlag = _this.props.requestFlag || false;
            if (bottom <= 3 && requestFlag) {
                _this.props.requestDataBack();
            }

            var pos = {
                top: top,
                bottom: bottom,
                left: left,
                right: right
            };
            _this.runFunc('scrollbarScrollThrottle');
            _this.setState({ handlerPos: pos });
        };

        _this.handleVerticalHandlerMouseDown = function (d, e) {
            _this.lastContainerScrollTop = _this.el.scrollTop;
            _this.lastContainerScrollLeft = _this.el.scrollLeft;

            _this.activeHandler = d;
            _this.lastMousePos = {
                top: e.clientY,
                left: e.clientX
            };
            _this.setState({ noselect: true });
        };

        _this.handleHandlerMouseMove = function (e) {
            if (_this.activeHandler === VERTICAL) {
                var delY = e.clientY - _this.lastMousePos.top;
                _this.el.scrollTop = _this.lastContainerScrollTop + delY / _this.el.offsetHeight * _this.lastScrollHeight;
            }
            if (_this.activeHandler === HORIZONTAL) {
                var delX = e.clientX - _this.lastMousePos.left;
                _this.el.scrollLeft = _this.lastContainerScrollLeft + delX / _this.el.offsetWidth * _this.lastScrollWidth;
            }
        };

        _this.handleHandlerMouseUp = function () {
            _this.lastMousePos = null;
            _this.activeHandler = null;
            _this.setState({ noselect: false });
        };

        _this.proportionFn = function () {
            var browserInfo = _this.browser();
            var chromeVersion = browserInfo.chrome;

            var proportion = window.innerWidth * 16 / 1920;
            if (chromeVersion < 79) {
                var devicePixelRatio = window.devicePixelRatio;
                proportion = proportion / devicePixelRatio <= 12 ? 12 : proportion * devicePixelRatio;
            }
            return proportion;
        };

        _this.browser = function () {
            var ua = navigator.userAgent;
            var ret = {};
            var webkit = ua.match(/WebKit\/([\d.]+)/);
            var chrome = ua.match(/Chrome\/([\d.]+)/) || ua.match(/CriOS\/([\d.]+)/);
            // eslint-disable-next-line no-useless-escape
            var ie = ua.match(/MSIE\s([\d\.]+)/) || ua.match(/(?:trident)(?:.*rv:([\w.]+))?/i);
            var firefox = ua.match(/Firefox\/([\d.]+)/);
            var safari = ua.match(/Safari\/([\d.]+)/);
            var opera = ua.match(/OPR\/([\d.]+)/);

            webkit && (ret.webkit = parseFloat(webkit[1]));
            chrome && (ret.chrome = parseFloat(chrome[1]));
            ie && (ret.ie = parseFloat(ie[1]));
            firefox && (ret.firefox = parseFloat(firefox[1]));
            safari && (ret.safari = parseFloat(safari[1]));
            opera && (ret.opera = parseFloat(opera[1]));
            return ret;
        };

        _this.componentDidUpdate = function (prevProps) {
            _this.updateTrackVisibilities();
        };

        _this.state = {
            showVeriticalTrack: false,
            showHorizontalTrack: false,
            noselect: false,
            handlerPos: {
                top: 0,
                left: 0
            },
            hideHandler: props.autohide,
            browserOffset: 1.0625
        };

        // build prop funcs
        _this.scrollbarScrollThrottle = props.onScrollbarScrollTimeout > 0 ? _this.throttle(props.onScrollbarScroll, props.onScrollbarScrollTimeout) : props.onScrollbarScroll;
        return _this;
    }

    /** All prop funcs should be built to this funcs to run */
    /** @function {Function} - prop func */


    // collectInfo = () => {
    //     this.offsetWidth = this.el.offsetWidth;
    //     this.offsetHeight = this.el.offsetHeight;
    // }

    _createClass(ScrollBox, [{
        key: 'componentDidMount',
        value: function componentDidMount() {
            var realScrollBar = 17; //17*window.devicePixelRatio;;
            var proportion = this.proportionFn();
            this.setState({
                browserOffset: realScrollBar / proportion
            });
            document.addEventListener('mousemove', this.handleHandlerMouseMove);
            document.addEventListener('mouseup', this.handleHandlerMouseUp);
            document.addEventListener('readystatechange', this.handleReadyStateChange);

            this.prepareScrollbar();
        }
    }, {
        key: 'componentWillUnmount',
        value: function componentWillUnmount() {
            document.removeEventListener('mousemove', this.handleHandlerMouseMove);
            document.removeEventListener('mouseup', this.handleHandlerMouseUp);
            document.removeEventListener('readystatechange', this.handleReadyStateChange);

            clearTimeout(this.handlerHider);
        }
    }, {
        key: 'componentWillReceiveProps',
        value: function componentWillReceiveProps(nextProps) {
            var _this2 = this;

            var updateScrollBar = nextProps.updateScrollBar;
            if (updateScrollBar) {
                setTimeout(function () {
                    _this2.handlerContainerScroll();
                }, 100);
            }
            if (nextProps.scrollTop) {
                var scrollBox = document.getElementById(this.props.scrollId || "scrollBox");
                scrollBox.scrollTop = nextProps.scrollTop || 0;
            }
        }
    }, {
        key: 'render',
        value: function render() {
            var _this3 = this;

            // Dynamic styles
            var showHorizontalTrack = this.state.showHorizontalTrack;
            var showVeriticalTrack = this.state.showVeriticalTrack;
            var marginBottom = showHorizontalTrack ? this.state.browserOffset - hoScrollBarWidth + 'rem' : this.state.browserOffset + 'rem';

            var containerStyles = {
                paddingBottom: this.props.fixed ? 0 : showHorizontalTrack ? this.props.tracksize : 0,
                paddingRight: this.props.fixed ? 0 : showVeriticalTrack ? this.props.tracksize : 0,
                marginRight: showVeriticalTrack ? '-' + (this.state.browserOffset - veScrollBarWidth) + 'rem' : '-' + this.state.browserOffset + 'rem',
                marginBottom: "-" + marginBottom,
                maxHeight: this.props.maxHeight ? parseFloat(this.props.maxHeight) + parseFloat(this.state.browserOffset) + 'rem' : '20rem'
            };
            if (this.state.noselect) {
                containerStyles.MozUserSelect = 'none';
                containerStyles.WebkitUserSelect = 'none';
                containerStyles.msUserSelect = 'none';
            }
            var verticalTrackStyles = {
                bottom: showHorizontalTrack ? this.props.tracksize : '0',
                backgroundColor: this.props.scrollWrapColor,
                opacity: 1
            };
            var horizontalTrackStyles = {
                right: showVeriticalTrack ? this.props.tracksize : '0',
                backgroundColor: this.props.scrollWrapColor,
                opacity: 1
            };
            var verticalHandlerStyles = {
                top: this.state.handlerPos.top + '%',
                bottom: this.state.handlerPos.bottom + '%',
                opacity: this.state.hideHandler ? 0 : 1
            };
            var horizontalHandlerStyles = {
                left: this.state.handlerPos.left + '%',
                right: this.state.handlerPos.right + '%',
                opacity: this.state.hideHandler ? 0 : 1
            };
            return _react2.default.createElement(
                'div',
                {
                    className: 'FreeScrollbar ' + this.props.className,
                    style: _extends({}, this.props.style, styles.main)
                },
                _react2.default.createElement(
                    'div',
                    {
                        id: this.props.scrollId || "scrollBox",
                        className: 'FreeScrollbar-container',
                        style: _extends({}, containerStyles, styles.container),
                        ref: function ref(container) {
                            return _this3.el = container;
                        },
                        onScroll: this.handlerContainerScroll
                    },
                    this.props.children
                ),
                this.state.showVeriticalTrack ? _react2.default.createElement(
                    'div',
                    {
                        className: 'FreeScrollbar-vertical-track ' + (this.props.className ? this.props.className + '-vertical-track' : ''),
                        style: this.props.scrollWrapColor ? Object.assign(verticalTrackStyles, styles.track.vertical, { backgroundColor: '' + this.props.scrollWrapColor }) : Object.assign(verticalTrackStyles, styles.track.vertical)
                    },
                    _react2.default.createElement('div', {
                        className: 'FreeScrollbar-vertical-handler ' + (this.props.className ? this.props.className + '-vertical-handler' : ''),
                        onMouseDown: this.handleVerticalHandlerMouseDown.bind(this, VERTICAL),
                        style: this.props.scrollBarColor ? Object.assign(verticalHandlerStyles, styles.handler.vertical, { backgroundColor: '' + this.props.scrollBarColor }) : Object.assign(verticalHandlerStyles, styles.handler.vertical) })
                ) : null,
                showHorizontalTrack ? _react2.default.createElement(
                    'div',
                    {
                        className: 'FreeScrollbar-horizontal-track ' + (this.props.className ? this.props.className + '-horizontal-track' : ''),
                        style: this.props.scrollWrapColor ? Object.assign(horizontalTrackStyles, styles.track.horizontal, { backgroundColor: '' + this.props.scrollWrapColor }) : Object.assign(horizontalTrackStyles, styles.track.horizontal)
                    },
                    _react2.default.createElement('div', {
                        className: 'FreeScrollbar-horizontal-handler ' + (this.props.className ? this.props.className + '-horizontal-handler' : ''),
                        onMouseDown: this.handleVerticalHandlerMouseDown.bind(this, HORIZONTAL),
                        style: this.props.scrollBarColor ? Object.assign(horizontalHandlerStyles, styles.handler.horizontal, { backgroundColor: '' + this.props.scrollBarColor }) : Object.assign(horizontalHandlerStyles, styles.handler.horizontal) })
                ) : null,
                showHorizontalTrack && showVeriticalTrack && !this.props.fixed ? _react2.default.createElement('div', {
                    className: 'FreeScrollbar-square ' + (this.props.className ? this.props.className + '-square' : ''),
                    style: styles.square }) : null
            );
        }
    }]);

    return ScrollBox;
}(_react2.default.PureComponent);

ScrollBox.displayName = 'FreeScrollbar';
ScrollBox.propTypes = {
    className: _propTypes2.default.string,
    style: _propTypes2.default.object,
    fixed: _propTypes2.default.bool,
    autohide: _propTypes2.default.bool,
    timeout: _propTypes2.default.number,
    tracksize: _propTypes2.default.string,
    start: _propTypes2.default.string,
    scrollWrapColor: _propTypes2.default.string,
    // browserOffset: PropTypes.string,
    onScrollbarScroll: _propTypes2.default.func,
    onScrollbarScrollTimeout: _propTypes2.default.number
};
ScrollBox.defaultProps = {
    className: '',
    style: {
        // width: '100%',
        // height: '100%'
    },
    scrollWrapColor: "#ffffff",
    fixed: true,
    autohide: false,
    timeout: 2000,
    tracksize: '0.6rem',
    start: 'top left',
    // browserOffset: '1.2625rem',// '1.0625rem'
    onScrollbarScroll: null,
    onScrollbarScrollTimeout: 100
};
exports.default = ScrollBox;
;
//# sourceMappingURL=scrollBox2.0.js.map