@jannie-shao/components-antd4/es/date-range/index.js

基于 Antd 4 的组件封装

import "antd/es/date-picker/style";
import _DatePicker from "antd/es/date-picker";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["keys", "value", "onChange", "maxDay", "disabledDate", "disabledStart", "disabledEnd"];
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
var DateRange = function DateRange(_ref) {
  var keys = _ref.keys,
    value = _ref.value,
    onChange = _ref.onChange,
    maxDay = _ref.maxDay,
    disabledDate = _ref.disabledDate,
    disabledStart = _ref.disabledStart,
    disabledEnd = _ref.disabledEnd,
    props = _objectWithoutPropertiesLoose(_ref, _excluded);
  var _useState = useState([]),
    dates = _useState[0],
    setDates = _useState[1];
  var _useState2 = useState(),
    hackValue = _useState2[0],
    setHackValue = _useState2[1];
  var _useState3 = useState([]),
    val = _useState3[0],
    setVal = _useState3[1];
  var handleChange = function handleChange(dateNow) {
    var _onChange;
    if (dateNow === void 0) {
      dateNow = ['', ''];
    }
    var startDate = dateNow[0] ? moment(dateNow[0]).startOf('day').valueOf() : undefined;
    var endDate = dateNow[1] ? parseInt(moment(dateNow[1]).endOf('day').valueOf() / 1000, 10) * 1000 : undefined;
    setVal(dateNow);
    onChange((_onChange = {}, _onChange[keys[0]] = startDate, _onChange[keys[1]] = endDate, _onChange));
  };
  var handleDisabled = function handleDisabled(current) {
    if (disabledDate(current)) return true;
    if (!dates || dates.length === 0 || !maxDay) {
      return false;
    }
    var tooLate = dates[0] && (current.diff(dates[0], 'days') > maxDay || disabledEnd(current));
    var tooEarly = dates[1] && (dates[1].diff(current, 'days') > maxDay || disabledStart(current));
    return tooEarly || tooLate;
  };
  var onOpenChange = function onOpenChange(open) {
    if (open) {
      setHackValue([]);
      setDates([]);
    } else {
      setHackValue(undefined);
    }
  };
  useEffect(function () {
    if (!value) return;
    var startDate = value !== null && value !== void 0 && value[keys[0]] ? moment(value[keys[0]]) : '';
    var endDate = value !== null && value !== void 0 && value[keys[1]] ? moment(value[keys[1]]) : '';
    setVal([startDate, endDate]);
  }, [value, keys]);
  return /*#__PURE__*/React.createElement(_DatePicker.RangePicker, _extends({}, props, {
    getPopupContainer: function getPopupContainer(n) {
      return n.parentNode;
    },
    value: hackValue || val,
    disabledDate: handleDisabled,
    onCalendarChange: function onCalendarChange(v) {
      return setDates(v);
    },
    onChange: handleChange,
    onOpenChange: onOpenChange
  }));
};
DateRange.propTypes = {
  keys: PropTypes.array,
  maxDay: PropTypes.number,
  disabledDate: PropTypes.func,
  disabledStart: PropTypes.func,
  disabledEnd: PropTypes.func
};
DateRange.defaultProps = {
  keys: ['startTime', 'endTime'],
  maxDay: 0,
  disabledDate: function disabledDate() {
    return false;
  },
  disabledStart: function disabledStart() {
    return false;
  },
  disabledEnd: function disabledEnd() {
    return false;
  }
};
export default DateRange;