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

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

var _beeRadio = _interopRequireDefault(require("../bee-radio"));

var _generatePicker = _interopRequireDefault(require("./generatePicker"));

var _moment = _interopRequireDefault(require("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 = (0, _react.useState)(dateOptions[defaultSelectedIndex].dateRange),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      rangeDate = _useState2[0],
      setRangeDate = _useState2[1]; // 选中的日期下标


  var _useState3 = (0, _react.useState)(defaultSelectedIndex),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      selectedDateIndex = _useState4[0],
      setSelectedDateIndex = _useState4[1];

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

  (0, _react.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.default.createElement("div", {
    className: "bee-date-container"
  }, /*#__PURE__*/_react.default.createElement(_beeRadio.default.Group, {
    buttonStyle: "solid",
    value: selectedDateIndex,
    onChange: handleRadioChange
  }, dateOptions.map(function (dateOption, index) {
    return /*#__PURE__*/_react.default.createElement(_beeRadio.default.Button, {
      key: "option".concat(index),
      value: index
    }, dateOption.name);
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'inline-block',
      width: '10px'
    }
  }), /*#__PURE__*/_react.default.createElement(_generatePicker.default, {
    className: className,
    value: rangeDate,
    onChange: handleDateChange,
    allowClear: allowClear
  }));
};

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