@51yzone/pc-components/es/date-range/date-range.js

An enterprise-class UI design language and React-based implementation

import _extends from "@babel/runtime/helpers/extends";
import "antd/es/select/style";
import _Select from "antd/es/select";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import "antd/es/date-picker/style";
import _DatePicker from "antd/es/date-picker";
import React from 'react';
import moment from 'moment';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import defaultRangeLocale from "antd/es/date-picker/locale/zh_CN";
import defaultLocale from './locale/zh_CN';
var RangePicker = _DatePicker.RangePicker;
var DEFAULT_RANGE = [null, null];
var DEFAULT_SELECT = 'week';

var DateRange = /*#__PURE__*/function (_React$Component) {
  _inherits(DateRange, _React$Component);

  var _super = _createSuper(DateRange);

  function DateRange() {
    var _this;

    _classCallCheck(this, DateRange);

    _this = _super.apply(this, arguments);
    _this.state = {
      showCustom: false,
      dates: null,
      selectValue: DEFAULT_SELECT
    };

    _this.getRangeBySelectValue = function (value) {
      var valueNow = value;

      if (valueNow === 'all') {
        return DEFAULT_RANGE;
      }

      var nowStart = moment();
      var nowEnd = moment();

      if (valueNow === 'lastWeek') {
        nowStart = moment().subtract(7, 'days');
        nowEnd = moment().subtract(7, 'days');
        valueNow = 'week';
      }

      return [nowStart.startOf(valueNow), nowEnd.endOf(valueNow)];
    };

    _this.handleSelectChange = function (value) {
      var range = _this.getRangeBySelectValue(value);

      _this.setState({
        selectValue: value,
        showCustom: false
      });

      _this.changeRangeDate(range);
    };

    _this.onChangeRange = function (timeRange) {
      _this.setState({
        selectValue: timeRange && timeRange[0] ? 'custom' : 'all',
        showCustom: timeRange && timeRange[0]
      });

      _this.changeRangeDate(timeRange);
    };

    _this.changeRangeDate = function (timeRange) {
      var onChange = _this.props.onChange;

      _this.setState({
        value: timeRange
      });

      if (onChange) {
        onChange(timeRange && timeRange[0], timeRange && timeRange[1]);
      }
    };

    _this.disabledDate = function (current) {
      var dates = _this.state.dates;
      var maxRangeDays = _this.props.maxRangeDays;

      if (!dates || !maxRangeDays) {
        return false;
      }

      var tooLate = dates[0] && current && current.diff(dates[0], 'days') >= maxRangeDays;
      var tooEarly = dates[1] && current && dates[1].diff(current, 'days') >= maxRangeDays;
      return !!tooEarly || !!tooLate;
    };

    return _this;
  }

  _createClass(DateRange, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var selectValue = this.state.selectValue;
      var onDateRangeLoading = this.props.onDateRangeLoading;
      var timeRange = this.getRangeBySelectValue(selectValue);

      if (!timeRange) {
        timeRange = DEFAULT_RANGE;
      }

      this.setState({
        value: timeRange
      });

      if (onDateRangeLoading) {
        onDateRangeLoading(timeRange && timeRange[0], timeRange && timeRange[1]);
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          _this$props$locale = _this$props.locale,
          locale = _this$props$locale === void 0 ? defaultLocale : _this$props$locale,
          prefixCls = _this$props.prefixCls,
          className = _this$props.className,
          style = _this$props.style,
          rangePickerProps = _this$props.rangePickerProps;
      var _this$state = this.state,
          selectValue = _this$state.selectValue,
          showCustom = _this$state.showCustom,
          value = _this$state.value;
      return /*#__PURE__*/React.createElement("div", {
        className: classnames(className, "".concat(prefixCls, "-dateselect-wrapper")),
        style: style
      }, /*#__PURE__*/React.createElement(_Select, {
        className: "".concat(prefixCls, "-week-select"),
        onChange: this.handleSelectChange,
        value: selectValue
      }, /*#__PURE__*/React.createElement(_Select.Option, {
        value: "day",
        title: locale['date.range.day']
      }, locale['date.range.day']), /*#__PURE__*/React.createElement(_Select.Option, {
        value: "week",
        title: locale['date.range.week']
      }, locale['date.range.week']), /*#__PURE__*/React.createElement(_Select.Option, {
        value: "lastWeek",
        title: locale['date.range.lastWeek']
      }, locale['date.range.lastWeek']), /*#__PURE__*/React.createElement(_Select.Option, {
        value: "month",
        title: locale['date.range.month']
      }, locale['date.range.month']), /*#__PURE__*/React.createElement(_Select.Option, {
        value: "all",
        title: locale['date.range.all']
      }, locale['date.range.all']), /*#__PURE__*/React.createElement(_Select.Option, {
        value: "custom",
        title: locale['date.range.custom'],
        style: {
          display: showCustom ? 'block' : 'none'
        }
      }, locale['date.range.custom'])), /*#__PURE__*/React.createElement(RangePicker, _extends({
        locale: defaultRangeLocale,
        value: value,
        disabledDate: this.disabledDate,
        className: "".concat(prefixCls, "-date-select"),
        onChange: this.onChangeRange,
        onCalendarChange: function onCalendarChange(val) {
          _this2.setState({
            dates: val
          });
        }
      }, rangePickerProps)));
    }
  }]);

  return DateRange;
}(React.Component);

export { DateRange as default };
DateRange.defaultProps = {
  prefixCls: 'yz-date-range'
};
DateRange.propTypes = {
  rangePickerProps: PropTypes.object,
  maxRangeDays: PropTypes.number,
  locale: PropTypes.object,
  prefixCls: PropTypes.string,
  className: PropTypes.string,
  style: PropTypes.object,
  onChange: PropTypes.func,
  onDateRangeLoading: PropTypes.func
};