zent/lib/datetimepicker/date/DatePanel.js

一套前端设计语言和基于React的实现

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

var _PanelHeader = require('../common/PanelHeader');

var _PanelHeader2 = _interopRequireDefault(_PanelHeader);

var _DatePanelBody = require('./DatePanelBody');

var _DatePanelBody2 = _interopRequireDefault(_DatePanelBody);

var _MonthPanel = require('../month/MonthPanel');

var _MonthPanel2 = _interopRequireDefault(_MonthPanel);

var _TimePanel = require('../time/TimePanel');

var _TimePanel2 = _interopRequireDefault(_TimePanel);

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

var DatePanel = function (_ref) {
  (0, _inherits3['default'])(DatePanel, _ref);

  function DatePanel() {
    var _ref2;

    var _temp, _this, _ret;

    (0, _classCallCheck3['default'])(this, DatePanel);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3['default'])(this, (_ref2 = DatePanel.__proto__ || Object.getPrototypeOf(DatePanel)).call.apply(_ref2, [this].concat(args))), _this), _this.state = {
      showMonth: false
    }, _this.showMonth = function () {
      _this.setState({
        showMonth: true
      });
    }, _this.onSelectMonth = function (val, hide) {
      _this.props.onChange(val);
      _this.setState({
        showMonth: hide || false
      });
    }, _temp), (0, _possibleConstructorReturn3['default'])(_this, _ret);
  }

  /*
   * 在 monthPicker 的时候选择年不隐藏 monthPanel.
   */


  (0, _createClass3['default'])(DatePanel, [{
    key: 'render',
    value: function render() {
      var state = this.state,
          props = this.props;

      var title = props.actived.getFullYear() + '\u5E74' + (props.actived.getMonth() + 1) + '\u6708';
      var monthPanel = void 0;
      var timePanel = void 0;
      if (state.showMonth) {
        monthPanel = _react2['default'].createElement(_MonthPanel2['default'], {
          actived: props.actived,
          selected: props.selected,
          onSelect: this.onSelectMonth
        });
      }
      if (props.showTime) {
        timePanel = _react2['default'].createElement(_TimePanel2['default'], props.showTime);
      }

      return _react2['default'].createElement(
        'div',
        { className: 'date-panel' },
        _react2['default'].createElement(_PanelHeader2['default'], {
          title: title,
          onClickTitle: this.showMonth,
          prev: props.onPrev,
          next: props.onNext,
          showPrev: props.showPrev,
          showNext: props.showNext
        }),
        _react2['default'].createElement(_DatePanelBody2['default'], {
          actived: props.actived,
          range: props.range,
          selected: props.selected,
          disabledDate: props.disabledDate,
          onSelect: props.onSelect,
          onHover: props.onHover
        }),
        state.showMonth ? monthPanel : '',
        props.showTime ? timePanel : ''
      );
    }
  }]);
  return DatePanel;
}(_react.PureComponent || _react.Component);

DatePanel.defaultProps = {
  showPrev: true,
  showNext: true
};
exports['default'] = DatePanel;