dh-c/dist/date_picker/range-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 _classnames4 = require('classnames');

var _classnames5 = _interopRequireDefault(_classnames4);

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

var _Picker2 = _interopRequireDefault(_Picker);

var _RangeCalendar = require('rc-calendar/lib/RangeCalendar');

var _RangeCalendar2 = _interopRequireDefault(_RangeCalendar);

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; }
// import { Icon } from '../index'


var prefixCls = 'dh-calendar';

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

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

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

    _this.setRangeIdx = function (ranges, range) {
      return Object.keys(ranges).findIndex(function (d) {
        return d === range;
      });
    };

    _this.format = function (v) {
      return v ? v.format(_this.props.format) : '';
    };

    _this.isValidRange = function (v) {
      return v && v[0] && v[1];
    };

    _this.getDatestring = function (value) {
      if (Array.isArray(value) && value.length > 1) return [_this.format(value[0]), _this.format(value[1])];
    };

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

    _this.handleChange = function (value, rangeIdx) {
      if (_this.props.onChange && Array.isArray(value) && value.length > 1) {
        var rangeStr = Object.keys(_this.props.ranges).find(function (d, i) {
          return i === rangeIdx;
        }) || null;
        var datestring = _this.getDatestring(value);
        _this.props.onChange(value, datestring, rangeStr);
        _this.setState({ rangeIdx: -1 });
      }
    };

    _this.handleOk = function (value) {
      if (_this.props.onOk) {
        _this.props.onOk(value);
      }
    };

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

    _this.handleOpenChange = function (open) {
      _this.setState({ open: open });
    };

    _this.setValue = function (value, idx) {
      _this.handleChange(value, idx);
      _this.setState({ value: value, rangeIdx: idx, open: !_this.state.open });
    };

    _this.clearHoverValue = function () {
      return _this.setState({ hoverValue: [] });
    };

    _this.renderFooter = function () {
      var ranges = _this.props.ranges;

      if (!ranges) {
        return null;
      }
      var operations = Object.keys(ranges || {}).map(function (range, idx) {
        var _classnames;

        var value = ranges[range];
        return _react2.default.createElement(
          'a',
          {
            className: (0, _classnames5.default)((_classnames = {}, _classnames[prefixCls + '-range-quick-selector-actived'] = idx == _this.state.rangeIdx, _classnames)),
            key: range,
            onClick: function onClick() {
              return _this.setValue(value, idx);
            }
            // onMouseEnter={() => this.setState({ hoverValue: value })}
            // onMouseLeave={this.clearHoverValue}
          },
          range
        );
      });
      var rangeNode = _react2.default.createElement(
        'div',
        { className: prefixCls + '-footer-extra ' + prefixCls + '-range-quick-selector', key: 'range' },
        operations
      );
      return [rangeNode];
    };

    _this.renderCalendar = function () {
      var _classnames2;

      var _this$props = _this.props,
          prefixCls = _this$props.prefixCls,
          locale = _this$props.locale,
          showTime = _this$props.showTime,
          showToday = _this$props.showToday,
          ranges = _this$props.ranges,
          dateInputPlaceholder = _this$props.dateInputPlaceholder,
          showDateInput = _this$props.showDateInput,
          wrapperClassName = _this$props.wrapperClassName,
          theme = _this$props.theme,
          restProps = _objectWithoutProperties(_this$props, ['prefixCls', 'locale', 'showTime', 'showToday', 'ranges', 'dateInputPlaceholder', 'showDateInput', 'wrapperClassName', 'theme']);

      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(_RangeCalendar2.default, {
        prefixCls: prefixCls,
        className: (0, _classnames5.default)((_classnames2 = {}, _classnames2[prefixCls + '-dark'] = theme === 'dark', _classnames2['dh-calendar-time'] = showTime, _classnames2[prefixCls + '-range-with-ranges'] = ranges, _classnames2['dh-calendar-input-wrap-disabled'] = !showDateInput, _classnames2['' + wrapperClassName] = wrapperClassName, _classnames2)),
        showToday: showToday,
        locale: locale,
        style: { zIndex: 1000 },
        dateInputPlaceholder: dateInputPlaceholder,
        timePicker: showTime ? timePickerElement : null,
        renderFooter: _this.renderFooter
        // onValueChange={this.handleValueChange}
        , onChange: _this.handleChange,
        onOk: _this.handleOk
      });
    };

    _this.state = {
      value: props.value || props.defaultValue,
      rangeIdx: _this.setRangeIdx(props.ranges, props.range || props.defaultRange),
      open: false
    };
    return _this;
  }

  RangeDateCalendar.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    if (nextProps.value !== this.props.value || nextProps.range !== this.props.range) {
      this.setState({
        value: nextProps.value,
        rangeIdx: this.setRangeIdx(nextProps.ranges, nextProps.range)
      });
    }
  };
  // getShowDateFromValue = () => {
  //   // const [start, end] = value;
  //   const start = moment()

  //   // value could be an empty array, then we should not reset showDate
  //   if (!start && !end) {
  //     return;
  //   }
  //   const newEnd = end && end.isSame(start, 'month') ? end.clone().add(1, 'month') : end;
  //   return [start, newEnd];
  // }

  // handleValueChange = (value) => {
  //   // this.setState({selectedValue: value})
  // }


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

    var _state = this.state,
        value = _state.value,
        open = _state.open;
    var _props = this.props,
        disabled = _props.disabled,
        locale = _props.locale,
        rangePlaceholder = _props.rangePlaceholder,
        showClear = _props.showClear,
        className = _props.className,
        theme = _props.theme;

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

        var value = _ref.value;

        return _react2.default.createElement(
          'div',
          { className: (0, _classnames5.default)('dh-calendar-picker', (_classnames3 = {}, _classnames3['' + className] = className, _classnames3['dh-calendar-picker-dark'] = theme === 'dark', _classnames3)) },
          _react2.default.createElement(
            'span',
            { className: 'dh-calendar-picker-input' },
            _react2.default.createElement('input', {
              placeholder: rangePlaceholder[0],
              style: _extends({}, _this2.props.style),
              disabled: disabled,
              readOnly: true,
              className: 'dh-calendar-range-picker-input',
              value: _this2.isValidRange(value) && '' + _this2.format(value[0]) || ''
            }),
            _react2.default.createElement(
              'span',
              { className: 'dh-calendar-range-picker-separator' },
              '~'
            ),
            _react2.default.createElement('input', {
              placeholder: rangePlaceholder[1],
              style: _extends({}, _this2.props.style),
              disabled: disabled,
              readOnly: true,
              className: 'dh-calendar-range-picker-input',
              value: _this2.isValidRange(value) && '' + _this2.format(value[1]) || ''
            }),
            showClear && _this2.isValidRange(value) && _react2.default.createElement('span', { onClick: _this2.handleClear, className: 'dh-calendar-picker-clear' }),
            _react2.default.createElement('span', { className: 'dh-calendar-picker-icon' })
          )
        );
      }
    );
  };

  return RangeDateCalendar;
}(_react.Component);

RangeDateCalendar.defaultProps = {
  prefixCls: 'dh-calendar',
  placeholder: '请选择日期',
  locale: _zh_CN2.default,
  showToday: false,
  dateInputPlaceholder: ['开始', '结束'],
  rangePlaceholder: ['开始日期', '结束日期'],
  showClear: false,
  showDateInput: true,
  ranges: {}
};
RangeDateCalendar.propTypes = {
  defaultValue: _propTypes2.default.array,
  value: _propTypes2.default.array,
  style: _propTypes2.default.object,
  showTime: _propTypes2.default.bool,
  showToday: _propTypes2.default.bool,
  disabled: _propTypes2.default.bool,
  onChange: _propTypes2.default.func,
  onClear: _propTypes2.default.func,
  dateInputPlaceholder: _propTypes2.default.array,
  rangePlaceholder: _propTypes2.default.array,
  showDateInput: _propTypes2.default.bool,
  ranges: _propTypes2.default.object,
  range: _propTypes2.default.string,
  defaultRange: _propTypes2.default.string,
  wrapperClassName: _propTypes2.default.string,
  className: _propTypes2.default.string,
  theme: _propTypes2.default.string
};
exports.default = RangeDateCalendar;