qm-bus/lib/TimeSelect/WeekPicker.js

千米公有云业务组件库

'use strict';

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

var _icon = require('antd/lib/icon');

var _icon2 = _interopRequireDefault(_icon);

var _input = require('antd/lib/input');

var _input2 = _interopRequireDefault(_input);

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

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 _class, _temp, _initialiseProps;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _moment = require('moment');

var _moment2 = _interopRequireDefault(_moment);

require('moment/locale/zh-cn');

require('./time-select.less');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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; }

_moment2.default.updateLocale('zh-cn', {
  week: {
    dow: 1 // 周一是一周的第一天
  }
});

var add0 = function add0(n) {
  return n < 10 ? '0' + n : n;
};

/** 根据moment(xx) 返回 xxxx年xx月 第x周  和 weekList */
function _computed(date) {
  var crtValue = date ? (0, _moment2.default)(date) : (0, _moment2.default)();
  // 先获取到本月的第一天
  var firstDay = (0, _moment2.default)(crtValue).startOf('month');
  // 开始的日期
  var startTime = firstDay.weekday() == 0 ? firstDay : firstDay.weekday(7);
  // 如果当前比本月的第一个数组还小，退回到上一个月去计算
  if (crtValue.isBefore(startTime)) {
    firstDay = (0, _moment2.default)(crtValue.subtract(1, 'months')).startOf('month');
    startTime = firstDay.weekday() == 0 ? firstDay : firstDay.weekday(7);
  }
  var weekList = [];
  var endTime = void 0;
  var weekIndex = 1;
  // 如果还在当前月份内
  while (startTime.month() == crtValue.month()) {
    endTime = (0, _moment2.default)(startTime).weekday(6);
    weekList.push([(0, _moment2.default)(startTime), (0, _moment2.default)(endTime)]);
    if (date && !startTime.isAfter(date)) {
      weekIndex = weekList.length;
    }
    startTime.add(7, 'days');
  }
  var month = crtValue.format('MM');
  var year = crtValue.format('YYYY');
  return {
    weekList: weekList,
    weekIndex: weekIndex,
    month: month,
    year: year
  };
}

/** 根据xxxx年xx月 第x周 返回当前日期  如果x超过了最大 默认未最大周 */
function _getDate(_ref) {
  var weekIndex = _ref.weekIndex,
      month = _ref.month,
      year = _ref.year;

  var firstDay = (0, _moment2.default)(year + '-' + add0(month), 'YYYY-MM');
  console.log(firstDay.isValid());
  // 第一周初始值
  var startTime = firstDay.weekday() == 0 ? firstDay : firstDay.weekday(7);
  return startTime.add(weekIndex - 1, 'weeks');
}

/** 显示这里有个格式化 */
function _formatDate(_ref2) {
  var month = _ref2.month,
      year = _ref2.year,
      weekIndex = _ref2.weekIndex;
  var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'YYYY-MM 第w周';

  month = Number(month);
  var dateString = format.replace(/([y]{2,4})(.+?)([m]{1,2})(.+?)([w]{1,2})(.+?)/i, function (match, y, s1, m, s2, w, s3) {
    var _y = y.length === 4 ? year : year.slice(2);
    var _m = m.length === 2 ? month >= 10 ? month : '0' + month : month;
    var _w = w.length === 2 ? '0' + weekIndex : weekIndex;
    return '' + _y + s1 + _m + s2 + _w + s3;
  });
  return dateString;
}

var WeekPicker = (_temp = _class = function (_Component) {
  _inherits(WeekPicker, _Component);

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

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

    _initialiseProps.call(_this);

    _this.container = null;

    var _computed2 = _computed(props.value),
        weekList = _computed2.weekList,
        weekIndex = _computed2.weekIndex,
        month = _computed2.month,
        year = _computed2.year;

    _this.state = {
      /** 日历弹窗是否展开 */
      open: false,
      weekList: weekList,
      weekIndex: weekIndex,
      year: year,
      month: month
    };
    return _this;
  }

  /** 显示日历弹窗 */


  /** 上个月 */


  /** 下个月 */


  /** 选择某一周 */


  _createClass(WeekPicker, [{
    key: 'render',
    value: function render() {
      var _state = this.state,
          open = _state.open,
          weekList = _state.weekList,
          weekIndex = _state.weekIndex,
          year = _state.year,
          month = _state.month;
      var _props = this.props,
          disabledDate = _props.disabledDate,
          format = _props.format,
          value = _props.value;
      // 这里展示的内容 应该是根据props传递过来的

      var dataString = _formatDate(_computed(value), format);
      return _react2.default.createElement(
        'span',
        { className: 'week-pick-box', style: this.props.style },
        _react2.default.createElement(_input2.default, {
          placeholder: '\u8BF7\u9009\u62E9\u65E5\u671F',
          value: value ? dataString : null,
          onClick: this.showPicker
        }),
        _react2.default.createElement(_icon2.default, { className: 'picker-suffix', type: 'calendar' }),
        open && _react2.default.createElement(Pick, {
          prevMonth: this.prevMonth,
          nextMonth: this.nextMonth,
          disabledDate: disabledDate,
          weekList: weekList,
          selectHandle: this.selectHandle,
          weekIndex: weekIndex,
          hidePicker: this.hidePicker,
          title: year + '\u5E74' + month + '\u6708'
        })
      );
    }
  }]);

  return WeekPicker;
}(_react.Component), _initialiseProps = function _initialiseProps() {
  var _this2 = this;

  this.showPicker = function () {
    var _computed3 = _computed(_this2.props.value),
        weekList = _computed3.weekList,
        weekIndex = _computed3.weekIndex,
        month = _computed3.month,
        year = _computed3.year;

    _this2.setState({
      open: true,
      weekList: weekList,
      weekIndex: weekIndex,
      year: year,
      month: month
    });
  };

  this.hidePicker = function () {
    _this2.setState({
      open: false
    });
  };

  this.prevMonth = function () {
    var weekIndex = _this2.state.weekIndex;

    var month = Number(_this2.state.month);
    var year = Number(_this2.state.year);

    if (month == 1) {
      year--;
      month = 12;
    } else {
      month--;
    }
    var crtValue = _getDate({ month: month, year: year, weekIndex: weekIndex });

    var _computed4 = _computed(crtValue),
        weekList = _computed4.weekList,
        newMonth = _computed4.month,
        newYear = _computed4.year;

    _this2.setState({
      month: newMonth,
      year: newYear,
      weekList: weekList
    });
  };

  this.nextMonth = function () {
    var weekIndex = _this2.state.weekIndex;

    var month = Number(_this2.state.month);
    var year = Number(_this2.state.year);
    if (month == 12) {
      year++;
      month = 1;
    } else {
      month++;
    }
    var crtValue = _getDate({ month: month, year: year, weekIndex: weekIndex });

    var _computed5 = _computed(crtValue),
        weekList = _computed5.weekList,
        newMonth = _computed5.month,
        newYear = _computed5.year;

    _this2.setState({
      month: newMonth,
      year: newYear,
      weekList: weekList
    });
  };

  this.selectHandle = function (monday) {
    var _computed6 = _computed(monday),
        weekList = _computed6.weekList,
        weekIndex = _computed6.weekIndex,
        month = _computed6.month,
        year = _computed6.year;

    _this2.props.onChange(monday);
    _this2.setState({
      open: false,
      weekList: weekList,
      weekIndex: weekIndex,
      month: month,
      year: year
    });
  };
}, _temp);
exports.default = WeekPicker;

var Pick = function (_Component2) {
  _inherits(Pick, _Component2);

  function Pick() {
    var _ref3;

    var _temp2, _this3, _ret;

    _classCallCheck(this, Pick);

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

    return _ret = (_temp2 = (_this3 = _possibleConstructorReturn(this, (_ref3 = Pick.__proto__ || Object.getPrototypeOf(Pick)).call.apply(_ref3, [this].concat(args))), _this3), _this3.clickOutsideHandle = function (e) {
      if (e.target.offsetParent !== _this3.container) {
        _this3.props.hidePicker();
      }
    }, _temp2), _possibleConstructorReturn(_this3, _ret);
  }

  _createClass(Pick, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      document.addEventListener('click', this.clickOutsideHandle);
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      document.removeEventListener('click', this.clickOutsideHandle);
    }

    // 点击其他区域 需要关闭日期选择框

  }, {
    key: 'render',
    value: function render() {
      var _this4 = this;

      var _props2 = this.props,
          weekList = _props2.weekList,
          prevMonth = _props2.prevMonth,
          nextMonth = _props2.nextMonth,
          selectHandle = _props2.selectHandle,
          disabledDate = _props2.disabledDate,
          title = _props2.title,
          weekIndex = _props2.weekIndex;

      return _react2.default.createElement(
        'div',
        { className: 'week-picker', ref: function ref(el) {
            return _this4.container = el;
          } },
        _react2.default.createElement(
          'div',
          { className: 'picker-header' },
          _react2.default.createElement(
            'div',
            { className: 'pre-month', onClick: prevMonth },
            _react2.default.createElement(_icon2.default, { type: 'double-left' })
          ),
          _react2.default.createElement(
            'div',
            { className: 'current-month' },
            title
          ),
          _react2.default.createElement(
            'div',
            { className: 'next-month', onClick: nextMonth },
            _react2.default.createElement(_icon2.default, { type: 'double-right' })
          )
        ),
        _react2.default.createElement(
          'div',
          { className: 'picker-body' },
          weekList.map(function (week, index) {
            var _week = _slicedToArray(week, 2),
                monday = _week[0],
                sunday = _week[1];

            var className = weekIndex === index + 1 ? 'text current' : 'text';
            var isDisabled = disabledDate(week) || false;
            if (isDisabled) className += ' disabled';
            return _react2.default.createElement(
              'div',
              { className: 'picker-item' },
              _react2.default.createElement(
                'div',
                {
                  onClick: !isDisabled && function () {
                    return selectHandle(monday);
                  },
                  className: className },
                '\u7B2C' + (index + 1) + '\u5468'
              ),
              _react2.default.createElement(
                'div',
                { className: 'range' },
                monday.format('MM.DD') + '-' + sunday.format('MM.DD')
              )
            );
          })
        )
      );
    }
  }]);

  return Pick;
}(_react.Component);