"use strict";
/**
 * 虚拟滚动条
 * @author 涂美政
 */
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var VERTICAL = 'vertial';
var HORIZONTAL = 'horizontal';
var vapScroll = {
    main: {
        overflow: 'hidden',
        position: 'relative',
        boxSizing: 'border-box'
    },
    container: {
        position: 'absolute',
        top: 0,
        left: 0,
        overflow: 'scroll',
        boxSizing: 'border-box'
    },
    track: {
        vertical: {
            position: 'absolute',
            top: 0,
            right: 0,
            width: '8px',
            backgroundColor: 'transparent',
            transition: 'opacity linear 0.3s',
            boxShadow: '1px 1px 5px rgba(0, 0, 0, 0.2) inset',
            borderRadius: '4px',
            cursor: 'pointer'
        },
        horizontal: {
            position: 'absolute',
            left: 0,
            bottom: 0,
            height: '8px',
            backgroundColor: 'transparent',
            transition: 'opacity linear 0.3s',
            boxShadow: '1px 1px 5px rgba(0, 0, 0, 0.2) inset',
            borderRadius: '4px',
            cursor: 'pointer'
        }
    },
    handle: {
        vertical: {
            position: 'absolute',
            width: '100%',
            backgroundColor: 'rgba(0, 0, 0, 0.2)',
            borderRadius: '4px',
            transition: 'opacity linear 0.3s,background-color linear 0.3s'
        },
        horizontal: {
            position: 'absolute',
            height: '100%',
            backgroundColor: 'rgba(0, 0, 0, 0.2)',
            borderRadius: '4px',
            transition: 'opacity linear 0.3s,background-color linear 0.3s'
        }
    },
    square: {
        position: 'absolute',
        width: '8px',
        height: '8px',
        right: 0,
        bottom: 0,
        backgroundColor: '#fff'
    }
};
var default_1 = /** @class */ (function (_super) {
    __extends(default_1, _super);
    function default_1() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            showVeriticalTrack: false,
            showHorizontalTrack: false,
            barProps: {
                top: 0,
                left: 0,
                bottom: 0,
                right: 0
            },
            trackColor: "rgba(0,0,0,0.2)",
            hideBar: true
        };
        _this.handleReadyStateChange = function () {
            if (document.readyState === 'complete') {
                _this.prepareScrollbar();
            }
        };
        _this.prepareScrollbar = function () {
            _this.collectInfo();
            _this.updateTrackVisible();
            _this.handleContainerScroll();
            var start = _this.props.start || 'top left';
            if (start.includes('bottom')) {
                _this.el.scrollTop = _this.el.scrollHeight;
            }
            if (start.includes('right')) {
                _this.el.scrollLeft = _this.el.scrollWidth;
            }
        };
        _this.collectInfo = function () {
            _this.offsetWidth = _this.el.offsetWidth;
            _this.offsetHeight = _this.el.offsetHeight;
        };
        _this.updateTrackVisible = 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.offsetHeight,
                showHorizontalTrack: scrollWidth > _this.offsetWidth
            });
            _this.lastScrollWidth = scrollWidth;
            _this.lastScrollHeight = scrollHeight;
        };
        _this.handleContainerScroll = function () {
            var autohide = _this.props.autohide == true ? true : false;
            if (autohide) {
                clearTimeout(_this.handleHider);
                _this.setState({ hideBar: false });
                _this.handleHider = setTimeout(function () {
                    _this.setState({ hideBar: true });
                }, 2000);
            }
            var el = _this.el;
            var top = el.scrollTop / (el.scrollHeight - _this.offsetHeight) * (1 - _this.offsetHeight / _this.lastScrollHeight) * 100;
            var bottom = (1 - (el.scrollTop + _this.offsetHeight) / (el.scrollHeight - _this.offsetHeight) * (1 - _this.offsetHeight / _this.lastScrollHeight)) * 100;
            bottom = bottom < 0 ? 0 : bottom;
            var left = el.scrollLeft / (el.scrollWidth - _this.offsetWidth) * (1 - _this.offsetWidth / _this.lastScrollWidth) * 100;
            var right = (1 - (el.scrollLeft + _this.offsetWidth) / (el.scrollWidth - _this.offsetWidth) * (1 - _this.offsetWidth / _this.lastScrollWidth)) * 100;
            right = right < 0 ? 0 : right;
            var pos = {
                top: top,
                bottom: bottom,
                left: left,
                right: right
            };
            _this.setState({ barProps: pos });
        };
        _this.handleMouseOver = function () {
            var autohide = _this.props.autohide == false ? false : true;
            if (autohide) {
                _this.setState({ hideBar: false });
            }
        };
        _this.handleMouseOut = function () {
            var autohide = _this.props.autohide == false ? false : true;
            if (autohide) {
                _this.setState({ hideBar: true });
            }
        };
        _this.handleVerticalHandleMouseDown = function (d, e) {
            _this.lastContainerScrollTop = _this.el.scrollTop;
            _this.lastContainerScrollLeft = _this.el.scrollLeft;
            _this.activeHandle = d;
            _this.lastMousePos = {
                top: e.clientY,
                left: e.clientX
            };
            _this.setState({ trackColor: "rgba(0,0,0,0.5)" });
        };
        _this.handleHandleMouseMove = function (e) {
            if (_this.activeHandle === VERTICAL) {
                var delY = e.clientY - _this.lastMousePos.top;
                _this.el.scrollTop = _this.lastContainerScrollTop + delY / _this.offsetHeight * _this.lastScrollHeight;
            }
            if (_this.activeHandle === HORIZONTAL) {
                var delX = e.clientX - _this.lastMousePos.left;
                _this.el.scrollLeft = _this.lastContainerScrollLeft + delX / _this.offsetWidth * _this.lastScrollWidth;
            }
        };
        _this.handleHandleMouseUp = function () {
            _this.lastMousePos = null;
            _this.activeHandle = null;
            _this.setState({ trackColor: "rgba(0,0,0,0.2)" });
        };
        _this.el = null;
        _this.offsetHeight = 0;
        _this.offsetWidth = 0;
        _this.lastScrollHeight = 0;
        _this.lastScrollWidth = 0;
        _this.activeHandle = null;
        _this.lastMousePos = null;
        _this.lastContainerScrollTop = 0;
        _this.lastContainerScrollLeft = 0;
        _this.handleHider = null;
        return _this;
    }
    default_1.prototype.componentDidMount = function () {
        document.addEventListener('mousemove', this.handleHandleMouseMove);
        document.addEventListener('mouseup', this.handleHandleMouseUp);
        document.addEventListener('readystatechange', this.handleReadyStateChange);
        this.prepareScrollbar();
    };
    default_1.prototype.componentWillUnmount = function () {
        document.removeEventListener('mousemove', this.handleHandleMouseMove);
        document.removeEventListener('mouseup', this.handleHandleMouseUp);
        document.removeEventListener('readystatechange', this.handleReadyStateChange);
        clearTimeout(this.handleHider);
    };
    default_1.prototype.componentDidUpdate = function () {
        this.updateTrackVisible();
    };
    default_1.prototype.render = function () {
        var _this = this;
        var style = this.props.style || {
            width: '100%',
            height: '100%'
        };
        var fixed = this.props.fixed == true ? true : false;
        var tracksize = '8px';
        var containerStyles = {
            paddingBottom: fixed ? 0 : (this.state.showHorizontalTrack ? tracksize : 0),
            paddingRight: fixed ? 0 : (this.state.showVeriticalTrack ? tracksize : 0),
        };
        var verticalTrackStyles = {
            bottom: this.state.showHorizontalTrack ? tracksize : '0',
            opacity: this.state.hideBar ? 0 : 1
        };
        var horizontalTrackStyles = {
            right: this.state.showVeriticalTrack ? tracksize : '0',
            opacity: this.state.hideBar ? 0 : 1
        };
        var verticalHandleStyles = {
            top: this.state.barProps.top + '%',
            bottom: this.state.barProps.bottom + '%',
            opacity: this.state.hideBar ? 0 : 1,
            backgroundColor: this.state.trackColor
        };
        var horizontalHandleStyles = {
            left: this.state.barProps.left + '%',
            right: this.state.barProps.right + '%',
            opacity: this.state.hideBar ? 0 : 1,
            backgroundColor: this.state.trackColor
        };
        return React.createElement("div", { style: Object.assign(vapScroll.main, style), onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut },
            React.createElement("div", { style: Object.assign(vapScroll.container, containerStyles), ref: function (container) { return _this.el = container; }, onScroll: this.handleContainerScroll }, this.props.children),
            this.state.showVeriticalTrack ?
                React.createElement("div", { style: Object.assign(vapScroll.track.vertical, verticalTrackStyles) },
                    React.createElement("div", { style: Object.assign(vapScroll.handle.vertical, verticalHandleStyles), onMouseDown: this.handleVerticalHandleMouseDown.bind(this, VERTICAL) }))
                : null,
            this.state.showHorizontalTrack ?
                React.createElement("div", { style: Object.assign(vapScroll.track.horizontal, horizontalTrackStyles) },
                    React.createElement("div", { style: Object.assign(vapScroll.handle.horizontal, horizontalHandleStyles), onMouseDown: this.handleVerticalHandleMouseDown.bind(this, HORIZONTAL) }))
                : null,
            this.state.showHorizontalTrack && this.state.showVeriticalTrack && !fixed ? React.createElement("div", { className: "vapScroll-square" }) : null);
    };
    return default_1;
}(React.PureComponent));
exports.default = default_1;
