ssc-grid/lib/MonthPicker.js

React grid component for SSC 3.0

'use strict';

exports.__esModule = true;

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

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 _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactMonthPicker = require('react-month-picker');

var _reactMonthPicker2 = _interopRequireDefault(_reactMonthPicker);

var _moment = require('moment');

var _moment2 = _interopRequireDefault(_moment);

var _lodash = require('lodash');

var _lodash2 = _interopRequireDefault(_lodash);

var _MonthBox = require('./MonthBox');

var _MonthBox2 = _interopRequireDefault(_MonthBox);

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

var Lang = {
  months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
};

/**
 * MonthPicker控件
 */

var MonthPicker = function (_Component) {
  (0, _inherits3['default'])(MonthPicker, _Component);

  function MonthPicker(props) {
    (0, _classCallCheck3['default'])(this, MonthPicker);

    var _this = (0, _possibleConstructorReturn3['default'])(this, _Component.call(this, props));

    _this.state = {};
    return _this;
  }

  // 由于react-month-picker的设计缺陷，month返回来是int而不是string
  // 比如`2017-03`，实际返回的`month = 3`，而不是`month = "03"`
  // 所以我们需要自己做这个转换。


  MonthPicker.prototype.handleChange = function handleChange(year, month) {
    if (this.props.onChange) {
      month = _lodash2['default'].padStart(month, 2, '0');
      var value = year + '-' + month;
      this.props.onChange(value, (0, _moment2['default'])(value).format(this.props.monthFormat));
    }
  };

  MonthPicker.prototype.handleDissmis = function handleDissmis() /* value */{};

  MonthPicker.prototype.handleClickMonthBox = function handleClickMonthBox() /* event */{
    this.refs.pickAMonth.show();
  };

  MonthPicker.prototype.render = function render() {
    var _props = this.props,
        value = _props.value,
        monthFormat = _props.monthFormat;

    var formattedValue = void 0;
    var yearMonthValue = void 0;

    if (value) {
      formattedValue = (0, _moment2['default'])(value).format(monthFormat);
      // 输入2017-02
      // 输出{ year: 2017, month: 2 }
      yearMonthValue = {
        year: (0, _moment2['default'])(value).toArray()[0],
        month: (0, _moment2['default'])(value).toArray()[1] + 1
      };
    } else {
      formattedValue = '';
      yearMonthValue = {};
    }

    return _react2['default'].createElement(
      _reactMonthPicker2['default'],
      {
        ref: 'pickAMonth',
        years: _lodash2['default'].range(1000, 9999, 1),
        value: yearMonthValue,
        lang: Lang.months,
        onChange: this.handleChange.bind(this),
        onDismiss: this.handleDissmis.bind(this)
      },
      _react2['default'].createElement(_MonthBox2['default'], { value: formattedValue,
        onClick: this.handleClickMonthBox.bind(this) })
    );
  };

  return MonthPicker;
}(_react.Component);

MonthPicker.displayName = 'MonthPicker';
MonthPicker.defaultProps = {
  monthFormat: 'YYYY-MM',
  value: null
};
MonthPicker.propTypes = {
  /**
   * 月份
   * 格式：`2017-02`
   */
  value: _propTypes2['default'].string,
  /**
   * 日期格式
   * 请参照[Moment.js文档](https://momentjs.com/docs/#/displaying/format/)中的日期格式
   * 比如：
   * ```
   * YYYY年MM月
   * ```
   */
  monthFormat: _propTypes2['default'].string,
  /**
   * 参数
   * - `value {String}` 年月字符串，比如`2017-02`
   * - `formattedValue {String}` 按照用户要求进行格式化之后的字符串，比如`2017年02月`
   */
  onChange: _propTypes2['default'].func
};
exports['default'] = MonthPicker;
module.exports = exports['default'];