zp-bee/es/bee-date-picker/datePicker.js

zp-bee，是一款基于 Dumi，由 React + TypeScript 开发的组件库 🎉。

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState, forwardRef, useImperativeHandle, useEffect } from 'react';
import Radio from '../bee-radio';
import RangePicker from './generatePicker';
import moment from 'moment';

var BeeDatePicker = function BeeDatePicker(props, ref) {
  var dateOptions = props.dateOptions,
      onDateSelect = props.onDateSelect,
      onDisabledDate = props.onDisabledDate,
      _props$defaultSelecte = props.defaultSelectedIndex,
      defaultSelectedIndex = _props$defaultSelecte === void 0 ? 2 : _props$defaultSelecte,
      _props$allowClear = props.allowClear,
      allowClear = _props$allowClear === void 0 ? false : _props$allowClear,
      className = props.className,
      rangeDateValue = props.rangeDateValue; // 日期范围

  var _useState = useState(dateOptions[defaultSelectedIndex].dateRange),
      _useState2 = _slicedToArray(_useState, 2),
      rangeDate = _useState2[0],
      setRangeDate = _useState2[1]; // 选中的日期下标


  var _useState3 = useState(defaultSelectedIndex),
      _useState4 = _slicedToArray(_useState3, 2),
      selectedDateIndex = _useState4[0],
      setSelectedDateIndex = _useState4[1];

  useEffect(function () {
    if (!rangeDateValue) return;
    var index = dateOptions.findIndex(function (item) {
      return moment(item.dateRange[0]).format('YYYY-MM-DD') === moment(rangeDateValue[0]).format('YYYY-MM-DD') && moment(item.dateRange[1]).format('YYYY-MM-DD') === moment(rangeDateValue[1]).format('YYYY-MM-DD');
    });
    setSelectedDateIndex(index);
    setRangeDate(rangeDateValue);
  }, [rangeDateValue]); // 显露重置筛选条件

  useImperativeHandle(ref, function () {
    return {
      handleResetDate: handleResetDate
    };
  }, []);

  var handleResetDate = function handleResetDate() {
    var dateRange = dateOptions[defaultSelectedIndex].dateRange;
    setRangeDate(dateRange);
    setSelectedDateIndex(defaultSelectedIndex);
    onDateSelect && onDateSelect(dateRange);
  };

  var handleRadioChange = function handleRadioChange(e) {
    var value = e.target.value;
    var dateRange = dateOptions[value].dateRange;
    setRangeDate(dateRange);
    setSelectedDateIndex(value);
    onDateSelect && onDateSelect(dateRange);
  };

  var handleDateChange = function handleDateChange(value, formatString) {
    if (onDisabledDate && onDisabledDate(value)) return;
    setSelectedDateIndex(-1);
    setRangeDate(value);
    onDateSelect && onDateSelect(value);
  };

  return /*#__PURE__*/React.createElement("div", {
    className: "bee-date-container"
  }, /*#__PURE__*/React.createElement(Radio.Group, {
    buttonStyle: "solid",
    value: selectedDateIndex,
    onChange: handleRadioChange
  }, dateOptions.map(function (dateOption, index) {
    return /*#__PURE__*/React.createElement(Radio.Button, {
      key: "option".concat(index),
      value: index
    }, dateOption.name);
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'inline-block',
      width: '10px'
    }
  }), /*#__PURE__*/React.createElement(RangePicker, {
    className: className,
    value: rangeDate,
    onChange: handleDateChange,
    allowClear: allowClear
  }));
};

var defaultOptions = [{
  name: '今',
  value: 'today',
  dateRange: [moment(), moment()]
}, {
  name: '昨',
  value: 'yesterday',
  dateRange: [moment().subtract(1, 'd'), moment().subtract(1, 'd')]
}, {
  name: '近7天',
  value: 'last7days',
  dateRange: [moment().subtract(6, 'd'), moment()]
}, {
  name: '近30天',
  value: 'last30days',
  dateRange: [moment().subtract(29, 'd'), moment()]
}];
var BeeDatePickerRef = /*#__PURE__*/forwardRef(BeeDatePicker);
BeeDatePickerRef.defaultOptions = defaultOptions;
export default BeeDatePickerRef;