@gem-mine/rmc-calendar/lib/DatePicker.js

React Mobile Calendar Component(web and react-native)

'use strict';

exports.__esModule = true;

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

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

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 _react2 = _interopRequireDefault(_react);

var _rmcDatePicker = require('rmc-date-picker');

var _rmcDatePicker2 = _interopRequireDefault(_rmcDatePicker);

var _ConfirmPanel = require('./panel/ConfirmPanel');

var _ConfirmPanel2 = _interopRequireDefault(_ConfirmPanel);

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

var DatePicker = function (_React$PureComponent) {
    (0, _inherits3['default'])(DatePicker, _React$PureComponent);

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

        var _this = (0, _possibleConstructorReturn3['default'])(this, _React$PureComponent.apply(this, arguments));

        _this.state = {
            date: _this.props.defaultValue,
            scrollPanel: 'year'
        };
        _this.onScrollChange = function (date) {
            var preDate = _this.state.date;

            if (!preDate) return;
            if (date.getFullYear() !== preDate.getFullYear()) {
                _this.setState({ date: date, scrollPanel: 'year' });
            } else if (date.getMonth() !== preDate.getMonth()) {
                _this.setState({ date: date, scrollPanel: 'month' });
            }
        };
        _this.onOk = function () {
            var onTimeOk = _this.props.onTimeOk;
            var date = _this.state.date;

            onTimeOk && date && onTimeOk(date);
        };
        _this.onCancel = function () {
            var onCancel = _this.props.onCancel;

            onCancel && onCancel();
        };
        return _this;
    }

    DatePicker.prototype.render = function render() {
        var _props = this.props,
            locale = _props.locale,
            title = _props.title,
            prefixCls = _props.prefixCls,
            pickerPrefixCls = _props.pickerPrefixCls,
            clientHeight = _props.clientHeight,
            minDate = _props.minDate,
            maxDate = _props.maxDate;
        var _state = this.state,
            date = _state.date,
            scrollPanel = _state.scrollPanel;

        var height = clientHeight && clientHeight * 5 / 8 - 52 || Number.POSITIVE_INFINITY;
        return _react2['default'].createElement(
            'div',
            { className: 'time-picker' },
            _react2['default'].createElement(
                'div',
                { className: 'header' },
                _react2['default'].createElement(
                    'div',
                    { className: 'title' },
                    title || locale.title
                ),
                date ? _react2['default'].createElement(
                    'div',
                    { className: 'time-show' },
                    _react2['default'].createElement(
                        'span',
                        { className: scrollPanel === 'year' ? 'time-picker-scrolling' : '' },
                        date.getFullYear()
                    ),
                    ' -',
                    _react2['default'].createElement(
                        'span',
                        { className: scrollPanel === 'month' ? 'time-picker-scrolling' : '' },
                        ' ',
                        date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
                    )
                ) : null
            ),
            _react2['default'].createElement(_rmcDatePicker2['default'], { prefixCls: prefixCls, pickerPrefixCls: pickerPrefixCls, style: {
                    height: height > 164 || height < 0 ? 164 : height,
                    overflow: 'hidden'
                }, mode: 'month', date: date, locale: locale, minDate: minDate, maxDate: maxDate, onScrollChange: this.onScrollChange }),
            _react2['default'].createElement(_ConfirmPanel2['default'], { type: 'one', locale: locale, onOk: this.onOk, onCancel: this.onCancel })
        );
    };

    return DatePicker;
}(_react2['default'].PureComponent);

exports['default'] = DatePicker;

DatePicker.defaultProps = {
    defaultValue: new Date()
};
module.exports = exports['default'];