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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

require("antd/lib/select/style");

var _select = _interopRequireDefault(require("antd/lib/select"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

require("antd/lib/date-picker/style");

var _datePicker = _interopRequireDefault(require("antd/lib/date-picker"));

var _react = _interopRequireDefault(require("react"));

var _moment = _interopRequireDefault(require("moment"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames = _interopRequireDefault(require("classnames"));

var _zh_CN = _interopRequireDefault(require("antd/lib/date-picker/locale/zh_CN"));

var _zh_CN2 = _interopRequireDefault(require("./locale/zh_CN"));

var RangePicker = _datePicker["default"].RangePicker;
var DEFAULT_RANGE = [null, null];
var DEFAULT_SELECT = 'week';

var DateRange = /*#__PURE__*/function (_React$Component) {
  (0, _inherits2["default"])(DateRange, _React$Component);

  var _super = (0, _createSuper2["default"])(DateRange);

  function DateRange() {
    var _this;

    (0, _classCallCheck2["default"])(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 = (0, _moment["default"])();
      var nowEnd = (0, _moment["default"])();

      if (valueNow === 'lastWeek') {
        nowStart = (0, _moment["default"])().subtract(7, 'days');
        nowEnd = (0, _moment["default"])().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;
  }

  (0, _createClass2["default"])(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 ? _zh_CN2["default"] : _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["default"].createElement("div", {
        className: (0, _classnames["default"])(className, "".concat(prefixCls, "-dateselect-wrapper")),
        style: style
      }, /*#__PURE__*/_react["default"].createElement(_select["default"], {
        className: "".concat(prefixCls, "-week-select"),
        onChange: this.handleSelectChange,
        value: selectValue
      }, /*#__PURE__*/_react["default"].createElement(_select["default"].Option, {
        value: "day",
        title: locale['date.range.day']
      }, locale['date.range.day']), /*#__PURE__*/_react["default"].createElement(_select["default"].Option, {
        value: "week",
        title: locale['date.range.week']
      }, locale['date.range.week']), /*#__PURE__*/_react["default"].createElement(_select["default"].Option, {
        value: "lastWeek",
        title: locale['date.range.lastWeek']
      }, locale['date.range.lastWeek']), /*#__PURE__*/_react["default"].createElement(_select["default"].Option, {
        value: "month",
        title: locale['date.range.month']
      }, locale['date.range.month']), /*#__PURE__*/_react["default"].createElement(_select["default"].Option, {
        value: "all",
        title: locale['date.range.all']
      }, locale['date.range.all']), /*#__PURE__*/_react["default"].createElement(_select["default"].Option, {
        value: "custom",
        title: locale['date.range.custom'],
        style: {
          display: showCustom ? 'block' : 'none'
        }
      }, locale['date.range.custom'])), /*#__PURE__*/_react["default"].createElement(RangePicker, (0, _extends2["default"])({
        locale: _zh_CN["default"],
        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["default"].Component);

exports["default"] = DateRange;
DateRange.defaultProps = {
  prefixCls: 'yz-date-range'
};
DateRange.propTypes = {
  rangePickerProps: _propTypes["default"].object,
  maxRangeDays: _propTypes["default"].number,
  locale: _propTypes["default"].object,
  prefixCls: _propTypes["default"].string,
  className: _propTypes["default"].string,
  style: _propTypes["default"].object,
  onChange: _propTypes["default"].func,
  onDateRangeLoading: _propTypes["default"].func
};