qm-bus/lib/TimeSelect/index.js

千米公有云业务组件库

'use strict';

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

var _datePicker = require('antd/lib/date-picker');

var _datePicker2 = _interopRequireDefault(_datePicker);

var _select = require('antd/lib/select');

var _select2 = _interopRequireDefault(_select);

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 _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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 _WeekPicker = require('./WeekPicker');

var _WeekPicker2 = _interopRequireDefault(_WeekPicker);

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 InputGroup = _input2.default.Group;
var Option = _select2.default.Option;
var MonthPicker = _datePicker2.default.MonthPicker;

var TIME_RANGE_TRPE = {
  day: 'day',
  week: 'week',
  month: 'month'
};

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

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

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

    _initialiseProps.call(_this);

    _this.init();
    return _this;
  }

  _createClass(TimeSelect, [{
    key: 'componentDidUpdate',
    value: function componentDidUpdate(prevProps) {
      var value = prevProps.value;

      if (value !== this.props.value) {
        // const { timeRangeType = 'day', startTime = '', endTime = '' } = this.props.value
        //   ? this.props.value
        //   : {};

        this.init();
        // this.setState({
        //   timeRangeType,
        //   startTime,
        //   endTime,
        // });
      }
    }
    /**
     * 根据不同的时间类型推算出时间区间
     * @param {*} value
     * @param {*} timeRangeType
     */

  }, {
    key: 'formatValue2Range',
    value: function formatValue2Range(value, timeRangeType) {
      // 开始时间
      var startTime = (0, _moment2.default)(value).startOf(timeRangeType);
      // 结束时间
      var endTime = (0, _moment2.default)(value).endOf(timeRangeType);
      return [startTime, endTime];
    }

    /** 修改timeRangeType */


    /** 选择了时间 */

  }, {
    key: 'render',
    value: function render() {
      var timeRangeType = this.state.timeRangeType;
      var showSelectType = this.props.showSelectType;

      return _react2.default.createElement(
        InputGroup,
        { compact: true },
        showSelectType && _react2.default.createElement(
          _select2.default,
          { value: timeRangeType, style: { width: '30%' }, onChange: this.onTypeChange },
          _react2.default.createElement(
            Option,
            { value: 'day' },
            '\u65E5'
          ),
          _react2.default.createElement(
            Option,
            { value: 'week' },
            '\u5468'
          ),
          _react2.default.createElement(
            Option,
            { value: 'month' },
            '\u6708'
          )
        ),
        this._renderPicker()
      );
    }

    /** 渲染日期选择框 */

  }, {
    key: '_renderPicker',
    value: function _renderPicker() {
      var _state = this.state,
          timeRangeType = _state.timeRangeType,
          startTime = _state.startTime;
      var _props = this.props,
          dateFormat = _props.dateFormat,
          weekFormat = _props.weekFormat,
          monthFormat = _props.monthFormat,
          disabledDate = _props.disabledDate;

      var _disabledDate = disabledDate(),
          day = _disabledDate.day,
          week = _disabledDate.week,
          month = _disabledDate.month;

      var value = startTime ? (0, _moment2.default)(startTime) : null;
      switch (timeRangeType) {
        case 'day':
          return _react2.default.createElement(_datePicker2.default, {
            allowClear: false,
            value: value,
            format: dateFormat,
            onChange: this.onChangeHandle,
            style: { width: '70%' },
            showToday: false,
            disabledDate: day
          });
        case 'week':
          return _react2.default.createElement(_WeekPicker2.default, {
            value: value,
            format: weekFormat,
            onChange: this.onChangeHandle,
            style: { width: '70%' },
            disabledDate: week
          });
        case 'month':
          return _react2.default.createElement(MonthPicker, {
            allowClear: false,
            value: value,
            format: monthFormat,
            onChange: this.onChangeHandle,
            style: { width: '70%' },
            disabledDate: month
          });
        default:
          return null;
      }
    }
  }]);

  return TimeSelect;
}(_react.Component), _class.defaultProps = {
  value: {
    timeRangeType: 'day',
    startTime: null,
    endTime: null
  },
  onChange: function onChange() {},
  format: 'YYYY-MM-DD',
  dateFormat: 'YYYY-MM-DD',
  weekFormat: 'YYYY-MM 第w周',
  monthFormat: 'YYYY-MM',
  dayDefaultVal: '',
  weekDefaultVal: '',
  monthDefaultVal: '',
  showSelectType: true,
  disabledDate: function disabledDate() {
    return { day: function day() {}, week: function week() {}, month: function month() {} };
  }
}, _initialiseProps = function _initialiseProps() {
  var _this2 = this;

  this.state = {
    timeRangeType: 'day',
    startTime: null,
    endTime: null
  };

  this.init = function () {
    var props = _this2.props;


    var defaultState = {
      timeRangeType: 'day',
      startTime: '',
      endTime: ''
    };
    if (props.value && props.value.startTime) {
      defaultState = _extends({}, defaultState, props.value);
    } else if (props.value && props.value.timeRangeType) {
      var timeRangeType = props.value.timeRangeType;
      defaultState.timeRangeType = timeRangeType;
      var defaultValue = _this2.props[timeRangeType + 'DefaultVal'];
      if (defaultValue) {
        var _formatValue2Range = _this2.formatValue2Range((0, _moment2.default)(defaultValue), timeRangeType),
            _formatValue2Range2 = _slicedToArray(_formatValue2Range, 2),
            startTime = _formatValue2Range2[0],
            endTime = _formatValue2Range2[1];

        defaultState.startTime = startTime.format('YYYY-MM-DD');
        defaultState.endTime = endTime.format('YYYY-MM-DD');
      }
    }
    _this2.state = defaultState;

    _this2.setState({
      startTime: defaultState.startTime,
      endTime: defaultState.endTime,
      timeRangeType: defaultState.timeRangeType
    });
  };

  this.onTypeChange = function (timeRangeType) {
    var value = { timeRangeType: timeRangeType, startTime: '', endTime: '' };
    var defaultValue = _this2.props[timeRangeType + 'DefaultVal'];
    if (defaultValue) {
      var _formatValue2Range3 = _this2.formatValue2Range((0, _moment2.default)(defaultValue), timeRangeType),
          _formatValue2Range4 = _slicedToArray(_formatValue2Range3, 2),
          startTime = _formatValue2Range4[0],
          endTime = _formatValue2Range4[1];

      value.startTime = startTime.format('YYYY-MM-DD');
      value.endTime = endTime.format('YYYY-MM-DD');
    }
    _this2.setState(value);
    _this2.props.onChange(value);
  };

  this.onChangeHandle = function (date) {
    var _props2 = _this2.props,
        onChange = _props2.onChange,
        format = _props2.format;
    var timeRangeType = _this2.state.timeRangeType;

    var range = _this2.formatValue2Range(date, timeRangeType);
    var value = {
      timeRangeType: timeRangeType,
      startTime: range[0].format(format),
      endTime: range[1].format(format)
    };
    _this2.setState(value);
    onChange(value);
  };
}, _temp);

exports.default = function (props) {
  if (props.defaultValue) {
    var dayDefaultVal = (0, _moment2.default)(props.defaultValue); // 昨天
    var weekDefaultVal = (0, _moment2.default)().weekday(-7); // 上周一
    var monthDefaultVal = (0, _moment2.default)().subtract(1, 'months').startOf('month'); // 上个月一号
    props = _extends({}, props, { dayDefaultVal: dayDefaultVal, weekDefaultVal: weekDefaultVal, monthDefaultVal: monthDefaultVal });
  }
  return _react2.default.createElement(TimeSelect, props);
};