ssc-grid/lib/YearPicker.js

React grid component for SSC 3.0

'use strict';

exports.__esModule = true;

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

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 _moment = require('moment');

var _moment2 = _interopRequireDefault(_moment);

var _NumberPicker = require('./libs/NumberPicker');

var _NumberPicker2 = _interopRequireDefault(_NumberPicker);

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

/**
 * YearPicker控件
 * https://github.com/hnordt/react-year-picker/blob/master/index.babel.js
 */
var YearPicker = function (_Component) {
  (0, _inherits3['default'])(YearPicker, _Component);

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

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

    _this.state = {};
    return _this;
  }

  // year = 2002


  YearPicker.prototype.handleChange = function handleChange(year) {
    if (this.props.onChange) {
      var nextValue = this.formatYear(year, 'YYYY');
      var nextFormattedValue = this.formatYear(year, this.props.yearFormat);
      this.props.onChange(nextValue, nextFormattedValue);
    }
  };

  // 获得指定年生成的Moment实例
  // year = 2012
  // year = "2012"
  // return a Moment object instance


  YearPicker.prototype.getMomentObj = function getMomentObj(year) {
    return (0, _moment2['default'])().year(year);
  };

  // year = 2012
  // year = "2012"


  YearPicker.prototype.formatYear = function formatYear(year, format) {
    return this.getMomentObj(year).format(format);
  };

  // value = 2016
  // currentValue = "2016"


  YearPicker.prototype.renderOption = function renderOption(_ref, currentValue) {
    var label = _ref.label,
        value = _ref.value;

    if (this.getMomentObj(currentValue).get('year') === value) {
      return _react2['default'].createElement(
        'span',
        { className: 'badge', style: { backgroundColor: value } },
        label
      );
    }
    return label;
  };

  YearPicker.prototype.render = function render() {
    var other = (0, _objectWithoutProperties3['default'])(this.props, []);


    var value = this.props.value || '';

    return _react2['default'].createElement(
      'div',
      null,
      _react2['default'].createElement('input', null),
      _react2['default'].createElement(_NumberPicker2['default'], (0, _extends3['default'])({}, other, {
        min: 2000,
        max: 2020,
        value: value,
        renderOption: this.renderOption.bind(this),
        onChange: this.handleChange.bind(this)
      }))
    );
  };

  return YearPicker;
}(_react.Component);

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