rmc-calendar/es/DatePicker.js

import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import * as React from 'react';
import Component from './DatePicker.base';
import WeekPanel from './date/WeekPanel';
import SingleMonth from './date/SingleMonth';
import DOMScroller from 'zscroller/es/DOMScroller';

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

    function DatePicker() {
        _classCallCheck(this, DatePicker);

        var _this = _possibleConstructorReturn(this, (DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).apply(this, arguments));

        _this.genMonthComponent = function (data) {
            if (!data) return;
            return React.createElement(SingleMonth, { key: data.title, locale: _this.props.locale || {}, monthData: data, rowSize: _this.props.rowSize, onCellClick: _this.onCellClick, getDateExtra: _this.props.getDateExtra, ref: function ref(dom) {
                    data.componentRef = dom || undefined;
                    data.updateLayout = function () {
                        _this.computeHeight(data, dom);
                    };
                    data.updateLayout();
                } });
        };
        _this.computeHeight = function (data, singleMonth) {
            if (singleMonth && singleMonth.wrapperDivDOM) {
                                if (!data.height && !singleMonth.wrapperDivDOM.clientHeight) {
                    setTimeout(function () {
                        return _this.computeHeight(data, singleMonth);
                    }, 500);
                    return;
                }
                data.height = singleMonth.wrapperDivDOM.clientHeight || data.height || 0;
                data.y = singleMonth.wrapperDivDOM.offsetTop || data.y || 0;
            }
        };
        _this.setLayout = function (dom) {
            if (!_this.scroller) {
                var _this$props = _this.props,
                    infinite = _this$props.infinite,
                    initalMonths = _this$props.initalMonths,
                    onLayout = _this$props.onLayout;

                onLayout && onLayout(dom.clientHeight);
                var scrollHandler = _this.createOnScroll();
                if (infinite) {
                    _this.scroller = new DOMScroller(dom.children[0], {
                        scrollingX: false,
                        onScroll: function onScroll() {
                            return scrollHandler({
                                client: dom.clientHeight,
                                full: dom.children[0].clientHeight,
                                top: _this.scroller.getValues().top
                            });
                        }
                    }).scroller;
                    _this.scroller.activatePullToRefresh(40, function () {}, function () {}, function () {
                        _this.canLoadPrev() && _this.genMonthData(_this.state.months[0].firstDate, -1);
                        _this.visibleMonth = _this.visibleMonth.slice(0, initalMonths);
                        _this.state.months.forEach(function (m) {
                            m.updateLayout && m.updateLayout();
                        });
                        _this.scroller.finishPullToRefresh();
                    });
                } else {
                    _this.scroller = true;
                    dom.onscroll = function (evt) {
                        scrollHandler({
                            client: dom.clientHeight,
                            full: evt.target.clientHeight,
                            top: evt.target.scrollTop
                        });
                    };
                }
            }
        };
        return _this;
    }

    _createClass(DatePicker, [{
        key: 'render',
        value: function render() {
            var _this2 = this;

            var _props = this.props,
                infinite = _props.infinite,
                _props$prefixCls = _props.prefixCls,
                prefixCls = _props$prefixCls === undefined ? '' : _props$prefixCls,
                _props$locale = _props.locale,
                locale = _props$locale === undefined ? {} : _props$locale;

            return React.createElement(
                'div',
                { className: prefixCls + ' date-picker' },
                React.createElement(WeekPanel, null),
                React.createElement(
                    'div',
                    { className: 'wrapper', style: {
                            overflowX: 'hidden',
                            overflowY: infinite ? 'hidden' : 'scroll'
                        }, ref: this.setLayout },
                    React.createElement(
                        'div',
                        null,
                        this.canLoadPrev() && React.createElement(
                            'div',
                            { className: 'load-tip' },
                            locale.loadPrevMonth
                        ),
                        React.createElement(
                            'div',
                            { className: 'months' },
                            this.state.months.map(function (m) {
                                var hidden = m.height && _this2.visibleMonth.indexOf(m) < 0;
                                if (hidden) {
                                    return React.createElement('div', { key: m.title + '_shallow', style: { height: m.height } });
                                }
                                return m.component;
                            })
                        )
                    )
                )
            );
        }
    }]);

    return DatePicker;
}(Component);

export default DatePicker;