zent/lib/datetimepicker/date/DatePanelBody.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 _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _formatDate = require('zan-utils/date/formatDate');

var _formatDate2 = _interopRequireDefault(_formatDate);

var _utils = require('../utils/');

var _PanelCell = require('../common/PanelCell');

var _PanelCell2 = _interopRequireDefault(_PanelCell);

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

var ROW = 6;
var COL = 7;

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

  function DatePanelBody() {
    (0, _classCallCheck3['default'])(this, DatePanelBody);
    return (0, _possibleConstructorReturn3['default'])(this, (DatePanelBody.__proto__ || Object.getPrototypeOf(DatePanelBody)).apply(this, arguments));
  }

  (0, _createClass3['default'])(DatePanelBody, [{
    key: 'isSelected',
    value: function isSelected(val) {
      var selected = this.props.selected;

      if (!selected) return false;

      if (Array.isArray(selected)) {
        var i = 0;
        selected.forEach(function (item) {
          (0, _utils.isSameDate)(val, item) ? i++ : '';
        });
        return i > 0;
      }

      return (0, _utils.isSameDate)(val, selected);
    }
  }, {
    key: 'isInSelect',
    value: function isInSelect(val) {
      var selected = this.props.selected;

      if (Array.isArray(selected) && selected[0] && selected[1]) {
        if (val > selected[0] && val < selected[1]) {
          return true;
        }
      }

      return false;
    }
  }, {
    key: 'isInRange',
    value: function isInRange(val) {
      var range = this.props.range;

      if (Array.isArray(range) && range[0] && range[1]) {
        if (val > range[0] && val < range[1]) {
          return true;
        }
      }

      return false;
    }
  }, {
    key: 'getDays',
    value: function getDays() {
      var _props = this.props,
          actived = _props.actived,
          disabledDate = _props.disabledDate;

      var days = [];
      var copy = new Date(actived.getFullYear(), actived.getMonth(), actived.getDate(), actived.getHours(), actived.getMinutes(), actived.getSeconds());
      var firstDay = new Date(copy.setDate(1));
      var diff = parseInt(firstDay.getDay(), 10);
      var index = 0;

      for (var rowIndex = 0; rowIndex < ROW; rowIndex++) {
        days[rowIndex] = [];
        for (var colIndex = 0; colIndex < COL; colIndex++) {
          var val = (0, _utils.goDays)(firstDay, index - diff);
          var isBefore = (0, _utils.isBeforeMonth)(val, actived);
          var isAfter = (0, _utils.isAfterMonth)(val, actived);
          var isCurrent = (0, _utils.isSameDate)(val, _utils.CURRENT);
          var isDisabled = disabledDate(val);
          var isSelected = this.isSelected(val);
          var isInSelect = this.isInSelect(val);
          var isInRange = this.isInRange(val);
          var className = (0, _classnames2['default'])({
            'panel__cell date-panel__cell': true,
            'panel__cell--different': isBefore || isAfter,
            'panel__cell--current': !isDisabled && isCurrent,
            'panel__cell--disabled': isDisabled,
            'panel__cell--selected': isSelected,
            'panel__cell--in-range': isInRange,
            'panel__cell--in-selected': isInSelect
          });
          days[rowIndex][colIndex] = {
            text: val.getDate(),
            value: val,
            title: (0, _formatDate2['default'])(val, 'YYYY-MM-DD'),
            isDisabled: isDisabled,
            className: className
          };
          index++;
        }
      }

      return days;
    }
  }, {
    key: 'getThead',
    value: function getThead() {
      var arr = ['日', '一', '二', '三', '四', '五', '六'];

      return arr.map(function (item, i) {
        return _react2['default'].createElement(
          'li',
          { key: i },
          item
        );
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _props2 = this.props,
          onSelect = _props2.onSelect,
          onHover = _props2.onHover;

      var days = this.getDays();

      return _react2['default'].createElement(
        'div',
        { className: 'date-table panel-table' },
        _react2['default'].createElement(
          'ul',
          { className: 'panel-table__row panel-table__head' },
          this.getThead()
        ),
        _react2['default'].createElement(_PanelCell2['default'], { onSelect: onSelect, onHover: onHover, cells: days })
      );
    }
  }]);
  return DatePanelBody;
}(_react.PureComponent || _react.Component);

exports['default'] = DatePanelBody;