@gem-mine/rmc-calendar/es/panel/CalendarPanel.swiper.js

React Mobile Calendar Component(web and react-native)

import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import * as React from 'react';
import Carousel from '@gem-mine/rmc-nuka-carousel';
import Component from './CalendarPanel.base';
import WeekPanel from './WeekPanel';
import SingleMonth from './SingleMonth';

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

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

        var _this = _possibleConstructorReturn(this, _Component.apply(this, arguments));

        _this.transform = '';
        _this.now = new Date();
        _this.today = new Date(_this.now.getFullYear(), _this.now.getMonth(), _this.now.getDate());
        _this.genMonthComponent = function (data) {
            if (!data) return;
            return React.createElement(SingleMonth, { key: data.title, today: _this.today, swiper: true, showBeginEndInfo: _this.props.showBeginEndInfo, locale: _this.props.locale || {}, monthData: data, onCellClick: _this.onCellClick, disabledDate: _this.props.disabledDate, renderDateCellExtra: _this.props.renderDateCellExtra, renderDateFullCell: _this.props.renderDateFullCell, ref: function ref(dom) {
                    data.componentRef = dom || data.componentRef || undefined;
                } });
        };
        _this.afterSlide = function (num) {
            if (num === 1) return;
            var onSlider = _this.props.onSlider;

            var genMonthNum = num - 1 > 0 ? 2 : -2;
            _this.setState({ slideIndex: num }, function () {
                var monthData = _this.state.months[1];
                var firstDate = monthData.firstDate;

                _this.genMonthData(firstDate, genMonthNum, true);
                _this.setState({ slideIndex: 1 });
                onSlider && onSlider(_this.state.months[1]);
            });
        };
        return _this;
    }

    CalendarPanelSwiper.prototype.render = function render() {
        var _this2 = this;

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

        var style = {
            transform: this.transform
        };
        return React.createElement(
            'div',
            { className: prefixCls + ' calendar-panel calendar-panel-swiper' },
            React.createElement(WeekPanel, { locale: locale, firstDayOfWeek: firstDayOfWeek }),
            React.createElement(
                'div',
                { className: 'wrapper', style: {
                        overflowX: 'hidden',
                        overflowY: 'visible'
                    } },
                React.createElement(
                    'div',
                    { style: style },
                    React.createElement(
                        'div',
                        { className: 'months' },
                        React.createElement(
                            Carousel,
                            { decorators: [], vertical: true, slideIndex: this.state.slideIndex, afterSlide: this.afterSlide },
                            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 CalendarPanelSwiper;
}(Component);

export default CalendarPanelSwiper;