zarm-mobile/lib/Picker/DatePicker.js

UI for react.js

'use strict';

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames2 = require('classnames');

var _classnames3 = _interopRequireDefault(_classnames2);

var _moment = require('moment');

var _moment2 = _interopRequireDefault(_moment);

var _ColumnGroup = require('./ColumnGroup');

var _ColumnGroup2 = _interopRequireDefault(_ColumnGroup);

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

var _zh_CN = require('./locale/zh_CN');

var _zh_CN2 = _interopRequireDefault(_zh_CN);

var _components = require('../../components');

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var DATETIME = 'datetime';
var DATE = 'date';
var TIME = 'time';
var MONTH = 'month';
var YEAR = 'year';

// 获取当月天数
function getDaysInMonth(now) {
  return now.clone().endOf('month').date();
}

// 补齐格式
function pad(n) {
  return n < 10 ? '0' + n : '' + n;
}

// 阻止选择器区域的默认事件
function stopClick(e) {
  e.stopPropagation();
}

// 转成moment格式
function getGregorianCalendar(arg) {
  return (0, _moment2.default)(arg);
}

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

  function DatePicker(props) {
    _classCallCheck(this, DatePicker);

    var _this = _possibleConstructorReturn(this, (DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).call(this, props));

    var date = props.value && _this.isExtendMoment(props.value);
    var defaultDate = props.defaultValue && _this.isExtendMoment(props.defaultValue);
    var display = props.wheelDefaultValue && _this.isExtendMoment(props.wheelDefaultValue);

    _this.initDate = props.value && _this.isExtendMoment(props.value);

    _this.state = {
      visible: props.visible || false,
      date: date || defaultDate,
      display: display
    };
    return _this;
  }

  _createClass(DatePicker, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var date = nextProps.value && this.isExtendMoment(nextProps.value);
      var defaultDate = nextProps.defaultValue && this.isExtendMoment(nextProps.defaultValue);

      this.setState({
        date: date || defaultDate
      });
    }

    // 点击遮罩层

  }, {
    key: 'onMaskClick',
    value: function onMaskClick() {
      var onMaskClick = this.props.onMaskClick;

      this.onCancel();
      onMaskClick && onMaskClick();
    }

    // 点击取消

  }, {
    key: 'onCancel',
    value: function onCancel() {
      var onCancel = this.props.onCancel;

      this.toggle();

      this.setState({
        date: this.initDate
      });
      onCancel && onCancel();
    }

    // 点击确定

  }, {
    key: 'onOk',
    value: function onOk() {
      var onOk = this.props.onOk;

      var value = this.getDate();
      this.setState({
        date: value
      });
      this.initDate = value;
      this.toggle();
      onOk && onOk((0, _utils.formatFn)(this, value));
    }
  }, {
    key: 'onValueChange',
    value: function onValueChange(values, index) {
      var value = parseInt(values[index], 10);

      var props = this.props;
      var mode = props.mode;

      var newValue = this.getDate().clone();

      if (mode === DATETIME || mode === DATE || mode === YEAR || mode === MONTH) {
        switch (index) {
          case 0:
            newValue.year(value);
            break;
          case 1:
            newValue.month(value);
            break;
          case 2:
            newValue.date(value);
            break;
          case 3:
            newValue.hour(value);
            break;
          case 4:
            newValue.minute(value);
            break;
          default:
            break;
        }
      } else {
        switch (index) {
          case 0:
            newValue.hour(value);
            break;
          case 1:
            newValue.minute(value);
            break;
          default:
            break;
        }
      }

      newValue = this.clipDate(newValue);

      if (!('date' in props)) {
        this.setState({
          date: newValue
        });
      }
      props.onChange((0, _utils.formatFn)(this, newValue));
    }
  }, {
    key: 'getDefaultMinDate',
    value: function getDefaultMinDate() {
      if (!this.defaultMinDate) {
        this.defaultMinDate = getGregorianCalendar([2000, 0, 1, 0, 0, 0]);
      }
      return this.defaultMinDate;
    }
  }, {
    key: 'getDefaultMaxDate',
    value: function getDefaultMaxDate() {
      if (!this.defaultMaxDate) {
        this.defaultMaxDate = getGregorianCalendar([2030, 1, 1, 23, 59, 59]);
      }
      return this.defaultMaxDate;
    }
  }, {
    key: 'getDate',
    value: function getDate() {
      return this.state.date || this.state.display || this.getMinDate() || (0, _moment2.default)(new Date());
    }
  }, {
    key: 'getMinYear',
    value: function getMinYear() {
      return this.getMinDate().year();
    }
  }, {
    key: 'getMaxYear',
    value: function getMaxYear() {
      return this.getMaxDate().year();
    }
  }, {
    key: 'getMinMonth',
    value: function getMinMonth() {
      return this.getMinDate().month();
    }
  }, {
    key: 'getMaxMonth',
    value: function getMaxMonth() {
      return this.getMaxDate().month();
    }
  }, {
    key: 'getMinDay',
    value: function getMinDay() {
      return this.getMinDate().date();
    }
  }, {
    key: 'getMaxDay',
    value: function getMaxDay() {
      return this.getMaxDate().date();
    }
  }, {
    key: 'getMinHour',
    value: function getMinHour() {
      return this.getMinDate().hour();
    }
  }, {
    key: 'getMaxHour',
    value: function getMaxHour() {
      return this.getMaxDate().hour();
    }
  }, {
    key: 'getMinMinute',
    value: function getMinMinute() {
      return this.getMinDate().minute();
    }
  }, {
    key: 'getMaxMinute',
    value: function getMaxMinute() {
      return this.getMaxDate().minute();
    }
  }, {
    key: 'getMinDate',
    value: function getMinDate() {
      var minDate = this.isExtendMoment(this.props.min);
      return minDate || this.getDefaultMinDate();
    }
  }, {
    key: 'getMaxDate',
    value: function getMaxDate() {
      var maxDate = this.isExtendMoment(this.props.max);
      return maxDate || this.getDefaultMaxDate();
    }
  }, {
    key: 'getDateData',
    value: function getDateData() {
      var _props = this.props,
          locale = _props.locale,
          formatMonth = _props.formatMonth,
          formatDay = _props.formatDay,
          mode = _props.mode;

      var date = this.getDate();

      var selYear = date.year();
      var selMonth = date.month();
      var minDateYear = this.getMinYear();
      var maxDateYear = this.getMaxYear();
      var minDateMonth = this.getMinMonth();
      var maxDateMonth = this.getMaxMonth();
      var minDateDay = this.getMinDay();
      var maxDateDay = this.getMaxDay();
      var years = [];

      for (var i = minDateYear; i <= maxDateYear; i += 1) {
        years.push({
          value: '' + i,
          label: '' + (i + locale.year)
        });
      }

      var yearCol = { key: 'year', props: { children: years } };
      if (mode === YEAR) {
        return [yearCol];
      }

      var months = [];
      var minMonth = 0;
      var maxMonth = 11;

      if (minDateYear === selYear) {
        minMonth = minDateMonth;
      }
      if (maxDateYear === selYear) {
        maxMonth = maxDateMonth;
      }
      for (var _i = minMonth; _i <= maxMonth; _i += 1) {
        var label = formatMonth ? formatMonth(_i, date) : '' + (_i + 1 + locale.month);
        months.push({
          value: '' + _i,
          label: label
        });
      }
      var monthCol = { key: 'month', props: { children: months } };
      if (mode === MONTH) {
        return [yearCol, monthCol];
      }

      var days = [];
      var minDay = 1;
      var maxDay = getDaysInMonth(date);

      if (minDateYear === selYear && minDateMonth === selMonth) {
        minDay = minDateDay;
      }
      if (maxDateYear === selYear && maxDateMonth === selMonth) {
        maxDay = maxDateDay;
      }

      for (var _i2 = minDay; _i2 <= maxDay; _i2 += 1) {
        var _label = formatDay ? formatDay(_i2, date) : '' + (_i2 + locale.day);
        days.push({
          value: '' + _i2,
          label: _label
        });
      }
      return [yearCol, monthCol, { key: 'day', props: { children: days } }];
    }
  }, {
    key: 'getTimeData',
    value: function getTimeData() {
      var minHour = 0;
      var maxHour = 23;
      var minMinute = 0;
      var maxMinute = 59;
      var _props2 = this.props,
          mode = _props2.mode,
          locale = _props2.locale,
          minuteStep = _props2.minuteStep;

      var date = this.getDate();

      var minDateMinute = this.getMinMinute();
      var maxDateMinute = this.getMaxMinute();
      var minDateHour = this.getMinHour();
      var maxDateHour = this.getMaxHour();
      var hour = date.hour();

      if (mode === DATETIME) {
        var year = date.year();
        var month = date.month();
        var day = date.date();

        var minDateYear = this.getMinYear();
        var maxDateYear = this.getMaxYear();
        var minDateMonth = this.getMinMonth();
        var maxDateMonth = this.getMaxMonth();
        var minDateDay = this.getMinDay();
        var maxDateDay = this.getMaxDay();

        if (minDateYear === year && minDateMonth === month && minDateDay === day) {
          minHour = minDateHour;
          if (minDateHour === hour) {
            minMinute = minDateMinute;
          }
        }
        if (maxDateYear === year && maxDateMonth === month && maxDateDay === day) {
          maxHour = maxDateHour;
          if (maxDateHour === hour) {
            maxMinute = maxDateMinute;
          }
        }
      } else {
        minHour = minDateHour;
        if (minDateHour === hour) {
          minMinute = minDateMinute;
        }
        maxHour = maxDateHour;
        if (maxDateHour === hour) {
          maxMinute = maxDateMinute;
        }
      }

      var hours = [];
      for (var i = minHour; i <= maxHour; i += 1) {
        hours.push({
          value: '' + i,
          label: locale.hour ? '' + (i + locale.hour) : pad(i)
        });
      }

      var minutes = [];

      for (var _i3 = minMinute; _i3 <= maxMinute; _i3 += minuteStep) {
        minutes.push({
          value: '' + _i3,
          label: locale.minute ? '' + (_i3 + locale.minute) : pad(_i3)
        });
      }

      return [{ key: 'hours', props: { children: hours } }, { key: 'minutes', props: { children: minutes } }];
    }

    // 获取

  }, {
    key: 'getValueCols',
    value: function getValueCols() {
      var mode = this.props.mode;

      var date = this.getDate();

      var cols = [];
      var value = [];

      if (mode === YEAR) {
        return {
          cols: this.getDateData(),
          value: ['' + date.year()]
        };
      }

      if (mode === MONTH) {
        return {
          cols: this.getDateData(),
          value: ['' + date.year(), '' + date.month()]
        };
      }

      if (mode === DATETIME || mode === DATE) {
        cols = this.getDateData();
        value = ['' + date.year(), '' + date.month(), '' + date.date()];
      }

      if (mode === DATETIME || mode === TIME) {
        cols = cols.concat(this.getTimeData());
        value = value.concat(['' + date.hour(), '' + date.minute()]);
      }

      return {
        value: value,
        cols: cols
      };
    }
  }, {
    key: 'clipDate',
    value: function clipDate(date) {
      var mode = this.props.mode;

      var minDate = this.getMinDate();
      var maxDate = this.getMaxDate();
      if (mode === DATETIME) {
        if (date.isBefore(minDate)) {
          return minDate.clone();
        }
        if (date.isAfter(maxDate)) {
          return maxDate.clone();
        }
      } else if (mode === DATE) {
        if (date.isBefore(minDate, 'day')) {
          return minDate.clone();
        }
        if (date.isAfter(maxDate, 'day')) {
          return maxDate.clone();
        }
      } else {
        var maxHour = maxDate.hour();
        var maxMinutes = maxDate.minute();
        var minHour = minDate.hour();
        var minMinutes = minDate.minute();
        var hour = date.hour();
        var minutes = date.minute();
        if (hour < minHour || hour === minHour && minutes < minMinutes) {
          return minDate.clone();
        }
        if (hour > maxHour || hour === maxHour && minutes > maxMinutes) {
          return maxDate.clone();
        }
      }
      return date;
    }
  }, {
    key: 'isExtendMoment',
    value: function isExtendMoment(date) {
      var mode = this.props.mode;

      if (date instanceof _moment2.default) {
        return date;
      }

      if (!date) {
        return '';
      }

      if (mode === TIME) {
        // 如果传递参数不合法，默认转换为时：分
        return (0, _moment2.default)(date).isValid() ? (0, _moment2.default)(date, 'YYYY-MM-DD HH:mm') : (0, _moment2.default)(date, 'HH:mm');
      }
      return (0, _moment2.default)(date, 'YYYY-MM-DD HH:mm');
    }

    // 切换显示状态

  }, {
    key: 'toggle',
    value: function toggle() {
      this.setState({
        visible: !this.state.visible
      });
    }
  }, {
    key: 'close',
    value: function close(key) {
      this.setState(_defineProperty({}, '' + key, false));
    }
  }, {
    key: 'handleClick',
    value: function handleClick() {
      this.props.onClick();
      !this.props.disabled && this.toggle();
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _getValueCols = this.getValueCols(),
          value = _getValueCols.value,
          cols = _getValueCols.cols;

      var _props3 = this.props,
          prefixCls = _props3.prefixCls,
          className = _props3.className,
          disabled = _props3.disabled,
          cancelText = _props3.cancelText,
          okText = _props3.okText,
          title = _props3.title,
          placeholder = _props3.placeholder,
          displayMember = _props3.displayMember,
          valueMember = _props3.valueMember;


      var classes = (0, _classnames3.default)(_defineProperty({
        'za-picker-container': true,
        'za-picker-hidden': !this.state.visible
      }, className, !!className));

      var inputCls = (0, _classnames3.default)({
        'za-picker-placeholder': !this.state.date,
        'za-picker-disabled': !!disabled
      });

      return _react2.default.createElement(
        'div',
        {
          className: 'za-picker',
          onClick: function onClick() {
            return _this2.handleClick();
          } },
        _react2.default.createElement(
          'div',
          { className: inputCls },
          this.state.date ? (0, _utils.formatFn)(this, this.state.date) : placeholder
        ),
        _react2.default.createElement(
          'div',
          { className: classes, onClick: function onClick(e) {
              return stopClick(e);
            } },
          _react2.default.createElement(
            _components.Popup,
            {
              className: 'za-popup-inner',
              visible: this.state.visible,
              onMaskClick: function onMaskClick() {
                return _this2.close('visible');
              } },
            _react2.default.createElement(
              'div',
              { className: 'za-picker-wrapper' },
              _react2.default.createElement(
                'div',
                { className: 'za-picker-header' },
                _react2.default.createElement(
                  'div',
                  { className: 'za-picker-cancel', onClick: function onClick() {
                      return _this2.onCancel();
                    } },
                  cancelText
                ),
                _react2.default.createElement(
                  'div',
                  { className: 'za-picker-title' },
                  title
                ),
                _react2.default.createElement(
                  'div',
                  { className: 'za-picker-submit', onClick: function onClick() {
                      return _this2.onOk();
                    } },
                  okText
                )
              ),
              _react2.default.createElement(
                'div',
                { className: 'za-picker-mask-top' },
                _react2.default.createElement(
                  'div',
                  { className: 'za-picker-mask-bottom' },
                  _react2.default.createElement(
                    _ColumnGroup2.default,
                    {
                      className: className,
                      prefixCls: prefixCls,
                      disabled: disabled,
                      displayMember: displayMember,
                      valueMember: valueMember,
                      selectedValue: value,
                      onValueChange: function onValueChange(values, index) {
                        return _this2.onValueChange(values, index);
                      } },
                    cols
                  )
                )
              )
            )
          )
        )
      );
    }
  }]);

  return DatePicker;
}(_react.Component);

DatePicker.propTypes = {
  visible: _propTypes2.default.bool,
  placeholder: _propTypes2.default.string,
  title: _propTypes2.default.string,
  cancelText: _propTypes2.default.string,
  okText: _propTypes2.default.string,
  mode: _propTypes2.default.oneOf([YEAR, MONTH, DATE, TIME, DATETIME]),
  disabled: _propTypes2.default.bool,
  value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
  defaultValue: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
  onOk: _propTypes2.default.func,
  onCancel: _propTypes2.default.func,
  onMaskClick: _propTypes2.default.func,
  minuteStep: _propTypes2.default.number,
  prefixCls: _propTypes2.default.string
};

DatePicker.defaultProps = {
  visible: false,
  placeholder: '请选择日期',
  title: '请选择日期',
  cancelText: '取消',
  okText: '确定',
  mode: DATE,
  disabled: false,
  value: '',
  defaultValue: '',
  onClick: function onClick() {},
  onChange: function onChange() {},
  onOk: function onOk() {},
  onCancel: function onCancel() {},
  onMaskClick: function onMaskClick() {},
  locale: _zh_CN2.default,
  minuteStep: 1,
  prefixCls: 'za-picker',
  displayMember: 'value',
  valueMember: 'value'
};

exports.default = DatePicker;