ssc-grid/lib/DatePicker2.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 _reactDatepicker = require('react-datepicker');

var _reactDatepicker2 = _interopRequireDefault(_reactDatepicker);

var _moment = require('moment');

var _moment2 = _interopRequireDefault(_moment);

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

/**
 * DatePicker2控件
 */
var DatePicker2 = function (_Component) {
  (0, _inherits3['default'])(DatePicker2, _Component);

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

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

    _this.state = {};
    return _this;
  }

  // date参数是moment.js生成的时间格式


  DatePicker2.prototype.handleChange = function handleChange(date) {
    if (!date) {
      if (this.props.onChange) {
        this.props.onChange(null, null, '');
      }
      return;
    }
    if (this.props.onChange) {
      this.props.onChange(date.toDate().toISOString(), // ISO 8601
      date.format(this.props.dateFormat), // 使用moment.js按照用户指定的格式进行格式化
      date);
    }
  };

  DatePicker2.prototype.render = function render() {
    // 之前使用otherProps获取react-datepicker的属性，然后往下传
    // 但是出现了bug#11
    var _props = this.props,
        value = _props.value,
        showMonthDropdown = _props.showMonthDropdown,
        showYearDropdown = _props.showYearDropdown,
        todayButton = _props.todayButton,
        isClearable = _props.isClearable,
        disabled = _props.disabled;

    return _react2['default'].createElement(_reactDatepicker2['default'], {
      disabled: disabled === true,
      dateFormat: 'YYYY-MM-DD',
      locale: this.props.locale,
      className: this.props.className || 'form-control',
      calendarClassName: this.props.calendarClassName,
      showMonthDropdown: showMonthDropdown,
      showYearDropdown: showYearDropdown,
      isClearable: disabled === true ? false : isClearable,
      todayButton: todayButton,
      selected: value ? (0, _moment2['default'])(value) : null,
      onChange: this.handleChange.bind(this)
    });
  };

  return DatePicker2;
}(_react.Component);

DatePicker2.displayName = 'DatePicker2';
DatePicker2.defaultProps = {
  dateFormat: 'YYYY-MM-DD',
  locale: 'zh-CN'
};
DatePicker2.propTypes = {
  /**
   * 日历悬浮窗自定义类名
   * https://hacker0x01.github.io/react-datepicker/#example-3
   */
  calendarClassName: _propTypes2['default'].string,
  /**
   * 文本框自定义类名
   * https://hacker0x01.github.io/react-datepicker/#example-2
   */
  className: _propTypes2['default'].string,
  /**
   * 日期格式<br>
   * 遵循moment.js格式<br>
   * <a href="https://momentjs.com/docs/#/displaying/format/">Moment.js文档</a>
   */
  dateFormat: _propTypes2['default'].string,
  /**
   * 参数：
   * - `value {String}`: ISO 8061格式时间字符串
   * - `formattedValue {String}`: 按照用户指定格式进行了格式化后的字符串
   * - `momentDate {Object}`: moment.js对象
   */
  onChange: _propTypes2['default'].func,
  showMonthDropdown: _propTypes2['default'].bool,
  showYearDropdown: _propTypes2['default'].bool,
  isClearable: _propTypes2['default'].bool,
  todayButton: _propTypes2['default'].string,
  disabled: _propTypes2['default'].bool,
  /**
   * value 请使用ISO 8061格式
   */
  value: _propTypes2['default'].string,
  /*
  *  默认语言
  */
  locale: _propTypes2['default'].string
};
exports['default'] = DatePicker2;
module.exports = exports['default'];