mrcio-ui/lib/scroll/scroll.js

"use strict";

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

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);

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; } /**
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * gufuyan
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * @content 滚动条组件
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * @date 2017-05-24 1.0版本
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                */


// const propTypes = {
//     // designationTheme: PropTypes.string,
//     // formType: PropTypes.string,
//     // inputName: PropTypes.string.isRequired,
//     // formText: PropTypes.string,
//     // disabled: PropTypes.bool,
//     // required: PropTypes.bool,
//     // hintText: PropTypes.string,
//     // textWidth: PropTypes.string,
//     // valueWidth: PropTypes.string,
//     // changeValue: PropTypes.func,
//     // errorText: PropTypes.string,
//     // dataType: PropTypes.string,
//     // // remarks  无规则 自定义传参
//     // // regex:PropTypes.number,//正则
//     // regexText: PropTypes.string,
// };

var styleData = {
    scrollBoxWrap: {
        position: "relative",
        overflow: "hidden",
        width: "20rem",
        maxHeight: "100rem"
        // border:"red solid 0.08rem",
    },
    scrollContentWrap: {
        zIndex: 1,
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
        overflowY: "scroll", //scroll
        overflowX: "auto", //避免横向滚动条内容为空时出现
        // overflow:"auto",
        width: "20rem",
        maxHeight: "100rem"
        // border:"green solid 0.08rem",
    },
    //垂直滚动条容器
    verticalBarWrap: {
        position: "absolute",
        height: "100%",
        right: "0",
        top: "0",
        zIndex: 2
        // border:"blue solid 0.08rem",
    },
    //横向滚动条容器
    horizontalBarWrap: {
        position: "absolute",
        width: "100%",
        left: "0",
        bottom: "0",
        zIndex: 2
        // border:"pink solid 0.08rem",
    },
    //滚动条
    scrollBar: {
        position: "absolute",
        borderRadius: "0.25rem",
        cursor: "pointer"
        // border:"yellow solid 0.08rem",
    }
};

var ScrollBox = function (_Component) {
    _inherits(ScrollBox, _Component);

    function ScrollBox(props) {
        _classCallCheck(this, ScrollBox);

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

        _this.componentDidUpdate = function () {
            var shouldUpdate = _this.props.shouldUpdate;
            if (shouldUpdate) {
                setTimeout(function () {
                    _this.scrollBarStateChange();
                    _this.props.initScroll();
                }, 100);
            }
        };

        _this.state = {
            styleData: styleData,
            wrapHeight_1: 0,
            contentHeight_1: 0,
            scrollHeight_1: 0,
            mouseDown_1: false, //垂直滚动条是否被点击 false为否
            mouseDown_2: false, //横向滚动条是否被点击 false为否
            startPos_1: 0,
            startPos1_1: 0,

            botFixed_1: false,
            rigFixed_1: false,

            needVerticalBar: false, //是否需要垂直滚动条
            needHorizontalBar: false, //是否需要横向滚动条
            scrollBarTop: 0,
            scrollBarBot: 0,
            scrollBarLeft: 0,
            scrollBarRight: 0,

            realScrollBarWidth: 0,
            scrollBarWidth: 6, // 滚动条宽度
            scrollWrapColor: _this.props.scrollWrapColor || "white", // 滚动条容器背景颜色
            scrollBarColor: _this.props.scrollBarColor || "rgb(231, 231, 231)" // 滚动条颜色
        };
        return _this;
    }

    _createClass(ScrollBox, [{
        key: "scrollBarStateChange",
        value: function scrollBarStateChange() {

            var scrollContentWrap = this.refs.scrollContentWrap;
            var scrollContent = this.refs.scrollContent;

            //垂直滚动条
            var wrapHeight = scrollContentWrap.clientHeight;
            var contentHeight = scrollContent.clientHeight;
            if (contentHeight < wrapHeight) {} else {
                var scrollHeight = (wrapHeight / contentHeight * 100).toFixed(2);
                var scrollTop = (scrollContentWrap.scrollTop / contentHeight * 100).toFixed(2);
                if (parseInt(this.state.scrollBarBot) == 0 && this.state.botFixed_1 == true) {
                    this.refs.scrollContentWrap.scrollTop = contentHeight;
                    var scrollBarTop = 100 - parseFloat(scrollHeight);
                    var scrollBarBot = 0;
                    this.setState({
                        scrollBarTop: scrollBarTop,
                        scrollBarBot: scrollBarBot,
                        needVerticalBar: true,
                        wrapHeight_1: wrapHeight,
                        contentHeight_1: contentHeight,
                        scrollHeight_1: scrollHeight
                    });
                } else {
                    var _scrollBarTop = parseFloat(scrollTop);
                    var _scrollBarBot = 100 - (parseFloat(scrollHeight) + parseFloat(scrollTop));
                    this.setState({

                        scrollBarTop: _scrollBarTop,
                        scrollBarBot: _scrollBarBot,
                        needVerticalBar: true,

                        wrapHeight_1: wrapHeight,
                        contentHeight_1: contentHeight,
                        scrollHeight_1: scrollHeight
                    });
                }
            }

            //横向滚动条
            var wrapWidth = scrollContentWrap.clientWidth; //++
            var contentWidth = scrollContent.clientWidth; //++
            if (contentWidth < wrapWidth) {} else {

                var scrollWidth = (wrapWidth / contentWidth * 100).toFixed(2); //++
                var scrollLeft = (scrollContentWrap.scrollLeft / contentWidth * 100).toFixed(2); //++
                //++
                if (parseInt(this.state.scrollBarRight) == 0 && this.state.rigFixed_1 == true) {
                    this.refs.scrollContentWrap.scrollLeft = contentWidth;
                    var scrollBarLeft = 100 - parseFloat(scrollWidth);
                    var scrollBarRight = 0;
                    this.setState({
                        scrollBarLeft: scrollBarLeft,
                        scrollBarRight: scrollBarRight,
                        needHorizontalBar: true,
                        wrapWidth_1: wrapWidth,
                        contentWidth_1: contentWidth,
                        scrollWidth_1: scrollWidth
                    });
                } else {
                    var _scrollBarLeft = parseFloat(scrollLeft);
                    var _scrollBarRight = 100 - (parseFloat(scrollWidth) + parseFloat(scrollLeft));
                    this.setState({
                        scrollBarLeft: _scrollBarLeft,
                        scrollBarRight: _scrollBarRight,
                        needHorizontalBar: true,

                        wrapWidth_1: wrapWidth,
                        contentWidth_1: contentWidth,
                        scrollWidth_1: scrollWidth
                    });
                }
            }
        }
    }, {
        key: "handleScroll",
        value: function handleScroll() {
            var scrollBarTop = this.refs.scrollContentWrap.scrollTop / this.state.contentHeight_1 * 100;
            var scrollBarBot = 100 - (parseFloat(this.state.scrollHeight_1) + parseFloat(scrollBarTop));

            var scrollBarLeft = this.refs.scrollContentWrap.scrollLeft / this.state.contentWidth_1 * 100; //++
            var scrollBarRight = 100 - (parseFloat(this.state.scrollWidth_1) + parseFloat(scrollBarLeft)); //++
            this.setState({
                scrollBarTop: scrollBarTop.toFixed(2),
                scrollBarBot: scrollBarBot.toFixed(2),

                scrollBarLeft: scrollBarLeft.toFixed(2), //++
                scrollBarRight: scrollBarRight.toFixed(2) //++
            });
            var requestFlag = this.props.requestFlag || false;
            if (scrollBarBot <= 5 && requestFlag) {
                this.props.requestDataBack ? this.props.requestDataBack() : null;
            }
            // if (scrollBarRight <= 5 && requestFlag) {
            //     this.props.requestDataBack ? this.props.requestDataBack() : null;
            // }
        }
    }, {
        key: "handleMouseMove",
        value: function handleMouseMove(e) {
            // e.preventDefault();
            // e.stopPropagation();
            if (this.state.mouseDown_1) {
                var startPos = this.state.startPos_1;
                var changePos = startPos - e.clientY;
                this.setState({
                    startPos_1: e.clientY
                });
                this.refs.scrollContentWrap.scrollTop -= changePos * this.state.contentHeight_1 / this.state.wrapHeight_1;
            } else if (this.state.mouseDown_2) {
                var startPos1 = this.state.startPos1_1; //++
                var changePos1 = startPos1 - e.clientX; //++
                this.setState({
                    startPos1_1: e.clientX //++
                });

                this.refs.scrollContentWrap.scrollLeft -= changePos1 * this.state.contentWidth_1 / this.state.wrapWidth_1; //++
            }
        }
    }, {
        key: "handleMouseUp",
        value: function handleMouseUp() {
            if (this.state.mouseDown_1) {
                this.setState({
                    mouseDown_1: false
                });
            } else if (this.state.mouseDown_2) {
                this.setState({
                    mouseDown_2: false
                });
            }
        }
    }, {
        key: "handleMouseDown",
        value: function handleMouseDown(e) {
            this.setState({
                mouseDown_1: true,
                startPos_1: e.clientY
            });
        }
    }, {
        key: "handleMouseDown1",
        value: function handleMouseDown1(e) {
            this.setState({
                mouseDown_2: true,
                startPos1_1: e.clientX //++
            });
        }
    }, {
        key: "componentWillMount",
        value: function componentWillMount() {
            var styleData = eval('(' + JSON.stringify(this.state.styleData) + ')');
            styleData.scrollBoxWrap.width = this.props.width || "20rem";
            styleData.scrollBoxWrap.maxHeight = this.props.maxHeight || "20rem";
            styleData.scrollContentWrap.width = this.props.width || "20rem";
            styleData.scrollContentWrap.maxHeight = this.props.maxHeight || "20rem";
            this.setState({
                styleData: styleData
            });
        }
    }, {
        key: "componentDidMount",
        value: function componentDidMount() {
            // 当页面渲染完成，获取滚动条的宽度，存起来
            // offsetWidth 返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
            // clientWidth 返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）
            var scrollContentWrap = this.refs.scrollContentWrap;
            var scrollBarWidth = scrollContentWrap.offsetWidth - scrollContentWrap.clientWidth;
            this.setState({
                realScrollBarWidth: scrollBarWidth
            });

            if (this.props.botFixed) {
                this.setState({
                    botFixed_1: this.props.botFixed === "true"
                });
            }
            if (this.props.rigFixed) {
                this.setState({
                    rigFixed_1: this.props.rigFixed === "true"
                });
            }
            document.addEventListener("mouseup", this.handleMouseUp.bind(this));
            document.addEventListener("mousemove", this.handleMouseMove.bind(this));
        }
    }, {
        key: "render",
        value: function render() {

            var style = this.state.styleData;

            //处理 内容的宽度  需加上滚动条的宽度 为的是隐藏原生滚动条
            var scrollContentWrap = eval('(' + JSON.stringify(style.scrollContentWrap) + ')');
            var scrContWidth = scrollContentWrap.width;
            var scrContHeight = scrollContentWrap.maxHeight;
            scrContWidth = scrContWidth.indexOf('rem') >= 0 ? parseFloat(scrContWidth) * 16 : parseFloat(scrContWidth);
            scrContHeight = scrContHeight.indexOf('rem') >= 0 ? parseFloat(scrContHeight) * 16 : parseFloat(scrContHeight);
            scrollContentWrap.width = (scrContWidth + this.state.realScrollBarWidth) / 16 + "rem";
            if (this.props.bottomScroll != "N") {
                //避免，当不需要底部滚动条时，高度也会加上滚动条高度，导致滚动到底部看不全
                scrollContentWrap.maxHeight = (scrContHeight + this.state.realScrollBarWidth) / 16 + "rem";
            }

            //垂直滚动条容器样式
            var verticalBarWrap = eval('(' + JSON.stringify(style.verticalBarWrap) + ')');
            verticalBarWrap.width = this.state.scrollBarWidth / 16 + "rem";
            verticalBarWrap.borderRadius = this.state.scrollBarWidth / 2 / 16 + "rem";
            verticalBarWrap.backgroundColor = this.state.scrollWrapColor;
            //横向滚动条容器样式
            var horizontalBarWrap = eval('(' + JSON.stringify(style.horizontalBarWrap) + ')');
            horizontalBarWrap.height = this.state.scrollBarWidth / 16 + "rem";
            horizontalBarWrap.borderRadius = this.state.scrollBarWidth / 2 / 16 + "rem";
            horizontalBarWrap.backgroundColor = this.state.scrollWrapColor;

            //垂直滚动条样式
            var scrollBar = eval('(' + JSON.stringify(style.scrollBar) + ')');
            scrollBar.top = this.state.scrollBarTop + "%";
            scrollBar.bottom = this.state.scrollBarBot + "%";
            scrollBar.left = 0;
            scrollBar.right = 0;
            scrollBar.backgroundColor = this.state.scrollBarColor;
            //横向滚动条样式
            var scrollBar1 = eval('(' + JSON.stringify(style.scrollBar) + ')');
            scrollBar1.left = this.state.scrollBarLeft + "%";
            scrollBar1.right = this.state.scrollBarRight + "%";
            scrollBar1.top = 0;
            scrollBar1.bottom = 0;
            scrollBar1.backgroundColor = this.state.scrollBarColor;

            var scrollBarDom = "";

            var scrollBar1Dom = "";

            //是否需要垂直滚动条
            if (this.state.needVerticalBar) {
                // if(this.state.scrollBarTop == 0 && this.state.scrollBarBot ==0){//判断竖向滚动条是否
                //
                // }else {
                scrollBarDom = _react2.default.createElement(
                    "div",
                    { style: verticalBarWrap },
                    _react2.default.createElement("div", { onMouseDown: this.handleMouseDown.bind(this), style: scrollBar })
                );
                // }
            } else {}
                // verticalBarWrap.width = "0.5rem";
                // verticalBarWrap.backgroundColor = "white";
                // scrollBarDom = (<div style={verticalBarWrap}></div>);


                //是否需要横向滚动条
            if (this.state.needHorizontalBar) {
                scrollBar1Dom = _react2.default.createElement(
                    "div",
                    { style: horizontalBarWrap },
                    _react2.default.createElement("div", { onMouseDown: this.handleMouseDown1.bind(this), style: scrollBar1 })
                );
            } else {
                // horizontalBarWrap.height = "0.5rem";
                // horizontalBarWrap.backgroundColor = "white";
                // scrollBar1Dom = (<div style={horizontalBarWrap}></div>);
            }

            return _react2.default.createElement(
                "div",
                { style: style.scrollBoxWrap },
                scrollBarDom,
                this.props.bottomScroll == "N" ? null : scrollBar1Dom,
                _react2.default.createElement(
                    "div",
                    { ref: "scrollContentWrap", style: scrollContentWrap, onScroll: this.handleScroll.bind(this) },
                    _react2.default.createElement(
                        "div",
                        { ref: "scrollContent",
                            style: { display: 'inline-block', width: "100%" }
                            //不加会出现，横向滚动算不出来，都是100%。
                            //加
                        },
                        this.props.children
                    )
                )
            );
        }
    }]);

    return ScrollBox;
}(_react.Component);

// ScrollBox.propTypes = propTypes;

exports.default = ScrollBox;
//# sourceMappingURL=scroll.js.map