ssc-grid/es/YearPicker.js

React grid component for SSC 3.0

import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';

import NumberPicker from './libs/NumberPicker';

/**
 * YearPicker控件
 * https://github.com/hnordt/react-year-picker/blob/master/index.babel.js
 */

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

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

    var _this = _possibleConstructorReturn(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 moment().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 React.createElement(
        'span',
        { className: 'badge', style: { backgroundColor: value } },
        label
      );
    }
    return label;
  };

  YearPicker.prototype.render = function render() {
    var other = _objectWithoutProperties(this.props, []);

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

    return React.createElement(
      'div',
      null,
      React.createElement('input', null),
      React.createElement(NumberPicker, _extends({}, other, {
        min: 2000,
        max: 2020,
        value: value,
        renderOption: this.renderOption.bind(this),
        onChange: this.handleChange.bind(this)
      }))
    );
  };

  return YearPicker;
}(Component);

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