dh-c/dist/date_picker/calendar.js

The front-end development engineers jimberton gulp react component

'use strict';

exports.__esModule = true;

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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _Picker = require('rc-calendar/lib/Picker');

var _Picker2 = _interopRequireDefault(_Picker);

var _rcCalendar = require('rc-calendar');

var _rcCalendar2 = _interopRequireDefault(_rcCalendar);

var _Panel = require('rc-time-picker/lib/Panel');

var _Panel2 = _interopRequireDefault(_Panel);

var _zh_CN = require('./locale/zh_CN');

var _zh_CN2 = _interopRequireDefault(_zh_CN);

var _en_US = require('./locale/en_US');

var _en_US2 = _interopRequireDefault(_en_US);

var _moment = require('moment');

var _moment2 = _interopRequireDefault(_moment);

require('moment/locale/zh-cn');

require('moment/locale/en-gb');

require('rc-calendar/assets/index.css');

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

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; }

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

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

    var _this = _possibleConstructorReturn(this, _Component.call(this, props));

    _this.onChange = function (value) {
      _this.setState({ value: value });
      if (_this.props.onChange) {
        _this.props.onChange(value);
      }
    };

    _this.handleClear = function (e) {
      e.preventDefault();
      e.stopPropagation();
      _this.setState({ value: null });
      if (_this.props.onClear) {
        _this.props.onClear();
      }
    };

    _this.state = {
      disabled: false,
      value: props.defaultValue
    };
    return _this;
  }

  Calendar.prototype.renderCalendar = function renderCalendar() {
    var _props = this.props,
        prefixCls = _props.prefixCls,
        locale = _props.locale,
        showTime = _props.showTime,
        showDateInput = _props.showDateInput,
        onChange = _props.onChange,
        restProps = _objectWithoutProperties(_props, ['prefixCls', 'locale', 'showTime', 'showDateInput', 'onChange']);

    var timePickerElement = _react2.default.createElement(_Panel2.default, { prefixCls: 'dh-calendar-time-picker', defaultValue: (0, _moment2.default)('00:00:00', 'HH:mm:ss') });
    return _react2.default.createElement(_rcCalendar2.default, _extends({
      prefixCls: prefixCls,
      className: (0, _classnames2.default)({ 'dh-calendar-time': showTime }),
      locale: locale,
      showDateInput: showDateInput,
      style: { zIndex: 1000 },
      timePicker: showTime ? timePickerElement : null
    }, restProps));
  };

  Calendar.prototype.render = function render() {
    var _this2 = this;

    var value = this.state.value;
    var _props2 = this.props,
        format = _props2.format,
        disabled = _props2.disabled;

    return _react2.default.createElement(
      _Picker2.default,
      {
        animation: 'slide-up',
        disabled: disabled,
        calendar: this.renderCalendar(),
        onChange: this.onChange,
        value: value
      },
      function (_ref) {
        var value = _ref.value;

        return _react2.default.createElement(
          'span',
          { className: 'dh-calendar-picker', style: _extends({}, _this2.props.style) },
          _react2.default.createElement(
            'div',
            null,
            _react2.default.createElement('input', {
              placeholder: _this2.props.placeholder,
              disabled: disabled,
              readOnly: true,
              className: 'dh-calendar-picker-input',
              value: value && value.format(format) || ''
            }),
            value && _react2.default.createElement('span', { onClick: _this2.handleClear, className: 'dh-calendar-picker-clear' }),
            _react2.default.createElement('span', { className: 'dh-calendar-picker-icon' })
          )
        );
      }
    );
  };

  return Calendar;
}(_react.Component);

Calendar.defaultProps = {
  prefixCls: 'dh-calendar',
  placeholder: '请选择日期',
  locale: _zh_CN2.default,
  format: 'YYYY-MM-DD',
  showDateInput: false
};
Calendar.propTypes = {
  defaultValue: _propTypes2.default.object,
  style: _propTypes2.default.object,
  showTime: _propTypes2.default.bool,
  onChange: _propTypes2.default.func,
  onClear: _propTypes2.default.func,
  showDateInput: _propTypes2.default.bool
};
exports.default = Calendar;