rmc-calendar/lib/DatePicker.js

'use strict';

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

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var React = _interopRequireWildcard(_react);

var _DatePicker = require('./DatePicker.base');

var _DatePicker2 = _interopRequireDefault(_DatePicker);

var _WeekPanel = require('./date/WeekPanel');

var _WeekPanel2 = _interopRequireDefault(_WeekPanel);

var _SingleMonth = require('./date/SingleMonth');

var _SingleMonth2 = _interopRequireDefault(_SingleMonth);

var _DOMScroller = require('zscroller/lib/DOMScroller');

var _DOMScroller2 = _interopRequireDefault(_DOMScroller);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }

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

var DatePicker = function (_Component) {
    (0, _inherits3['default'])(DatePicker, _Component);

    function DatePicker() {
        (0, _classCallCheck3['default'])(this, DatePicker);

        var _this = (0, _possibleConstructorReturn3['default'])(this, (DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).apply(this, arguments));

        _this.genMonthComponent = function (data) {
            if (!data) return;
            return React.createElement(_SingleMonth2['default'], { 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) {
                // preact, ref时dom有可能无height, offsetTop数据。
                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 _DOMScroller2['default'](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;
    }

    (0, _createClass3['default'])(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(_WeekPanel2['default'], 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;
}(_DatePicker2['default']);

exports['default'] = DatePicker;
module.exports = exports['default'];