@alitajs/antd-plus/es/range-picker-pro/index.js

基于 ant-design 封装的偏业务组件

import "antd/es/space/style";
import _Space from "antd/es/space";
import "antd/es/radio/style";
import _Radio from "antd/es/radio";
import "antd/es/date-picker/style";
import _DatePicker from "antd/es/date-picker";

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

var __rest = this && this.__rest || function (s, e) {
  var t = {};

  for (var p in s) {
    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  }

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};

import React, { useState, useEffect, useCallback, useRef } from 'react';
import moment from 'moment';
import { startOf, endOf, disabledAfterTodayDate, getRangePickerProps } from './utils';
import { isArray } from 'lodash';
var RangePicker = _DatePicker.RangePicker;

var RangePickerPro = function RangePickerPro(_a) {
  var _b;

  var defaultTimes = _a.defaultTimes,
      disabledSelect = _a.disabledSelect,
      _a$dateNotNullChange = _a.dateNotNullChange,
      dateNotNullChange = _a$dateNotNullChange === void 0 ? true : _a$dateNotNullChange,
      _a$disabledAfterToday = _a.disabledAfterToday,
      disabledAfterToday = _a$disabledAfterToday === void 0 ? true : _a$disabledAfterToday,
      _a$periodChangeClearD = _a.periodChangeClearDate,
      periodChangeClearDate = _a$periodChangeClearD === void 0 ? true : _a$periodChangeClearD,
      _a$options = _a.options,
      options = _a$options === void 0 ? [] : _a$options,
      spaceSize = _a.spaceSize,
      optionType = _a.optionType,
      value = _a.value,
      onChange = _a.onChange,
      rest = __rest(_a, ["defaultTimes", "disabledSelect", "dateNotNullChange", "disabledAfterToday", "periodChangeClearDate", "options", "spaceSize", "optionType", "value", "onChange"]); // 筛选粒度


  var _useState = useState((_b = options[0]) === null || _b === void 0 ? void 0 : _b.value),
      _useState2 = _slicedToArray(_useState, 2),
      period = _useState2[0],
      setPeriod = _useState2[1];

  var latestCurrentOption = useRef(options[0]); // 时间戳类型的时间范围

  var _useState3 = useState(),
      _useState4 = _slicedToArray(_useState3, 2),
      rangeTime = _useState4[0],
      setRangeTime = _useState4[1]; // moment类型的时间范围


  var _useState5 = useState(),
      _useState6 = _slicedToArray(_useState5, 2),
      rangePickerValue = _useState6[0],
      setRangePickerValue = _useState6[1];

  var _useState7 = useState({}),
      _useState8 = _slicedToArray(_useState7, 2),
      rangePickerOpts = _useState8[0],
      setRangePickerOpts = _useState8[1];

  var _latestCurrentOption$ = latestCurrentOption.current,
      periodType = _latestCurrentOption$.value,
      periodValue = _latestCurrentOption$.periodValue;
  useEffect(function () {
    if (defaultTimes && defaultTimes.length == 2) {
      var times = handleRangeTime(defaultTimes, periodType);

      if (disabledSelect) {
        onChange === null || onChange === void 0 ? void 0 : onChange({
          period: periodType,
          rangeTime: times
        });
      } else {
        onChange === null || onChange === void 0 ? void 0 : onChange(times);
      }

      return;
    }

    if (periodType && periodValue) {
      if (periodChangeClearDate) {
        handleRangeTime(null);
        triggerChange({
          period: periodType,
          rangeTime: null
        });
      } else {
        var _times = handleRangeTime(rangeTime, periodType);

        triggerChange({
          period: periodType,
          rangeTime: _times
        });
      }

      setRangePickerOpts(getRangePickerProps({
        periodType: periodType,
        periodValue: periodValue
      }));
    }
  }, []);

  var handleRangeTime = function handleRangeTime(value, periodTypeVal) {
    if (isArray(value) && value.length === 2 && periodTypeVal) {
      var times = [startOf(value[0], periodTypeVal), endOf(value[1], periodTypeVal)];
      setRangeTime(times);
      setRangePickerValue(times.map(function (item) {
        return moment(item);
      }));
      return times;
    } else {
      setRangeTime(null);
      setRangePickerValue(null);
      return null;
    }
  };
  /**
   * 筛选粒度修改回调
   * @param e
   */


  var handlePeriodChange = function handlePeriodChange(e) {
    var value = e.target.value;
    latestCurrentOption.current = options.find(function (item) {
      return item.value === value;
    });
    setPeriod(value);
    setRangePickerOpts(getRangePickerProps({
      periodType: value,
      periodValue: periodValue
    }));

    if (periodChangeClearDate) {
      handleRangeTime(null);
      triggerChange({
        period: value,
        rangeTime: null
      });
    } else {
      var times = handleRangeTime(rangeTime, value);
      triggerChange({
        period: value,
        rangeTime: times
      });
    }
  };

  var handleRangePickerChange = function handleRangePickerChange(values) {
    var times = handleRangeTime(values, period);
    triggerChange({
      rangeTime: times
    });
  };

  var triggerChange = function triggerChange(changedValue) {
    var nextValue = Object.assign({
      period: period,
      rangeTime: rangeTime
    }, changedValue);

    if (dateNotNullChange) {
      if (nextValue.period && nextValue.rangeTime && nextValue.rangeTime.length === 2) {
        handleChange(nextValue);
      }

      return;
    }

    handleChange(nextValue);
  };

  var handleChange = useCallback(function (value) {
    if (disabledSelect) {
      onChange === null || onChange === void 0 ? void 0 : onChange(value.rangeTime);
    } else {
      onChange === null || onChange === void 0 ? void 0 : onChange(value);
    }
  }, [disabledSelect]);
  var rangePickerOptions = Object.assign(Object.assign(Object.assign({
    disabledDate: disabledAfterToday ? disabledAfterTodayDate : undefined
  }, rest), {
    value: rangePickerValue,
    onChange: handleRangePickerChange
  }), rangePickerOpts);

  if (disabledSelect) {
    return /*#__PURE__*/React.createElement(RangePicker, rangePickerOptions);
  }

  return /*#__PURE__*/React.createElement(_Space, {
    direction: "horizontal",
    size: spaceSize
  }, /*#__PURE__*/React.createElement(_Radio.Group, {
    value: period,
    optionType: optionType,
    options: options,
    onChange: handlePeriodChange
  }), /*#__PURE__*/React.createElement(RangePicker, rangePickerOptions));
};

RangePickerPro.defaultProps = {
  spaceSize: 8,
  optionType: 'button',
  disabledSelect: false
};
export default RangePickerPro;