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

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

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { forwardRef, useImperativeHandle, useRef, useState, useCallback } from 'react';
import Select from '../bee-select/select';
import BeeDatePicker from './datePicker';
var Option = Select.Option;

var BeeTypePicker = function BeeTypePicker(props, ref) {
  var typeOptions = props.typeOptions,
      defaultType = props.defaultType,
      onTypeDateSelect = props.onTypeDateSelect,
      dateOptions = props.dateOptions;

  var _useState = useState(defaultType),
      _useState2 = _slicedToArray(_useState, 2),
      timeType = _useState2[0],
      setTimeType = _useState2[1];

  var dateTypeRef = useRef({
    timeType: defaultType,
    dateRange: dateOptions[2].dateRange
  });
  var dateRef = useRef();
  useImperativeHandle(ref, function () {
    return {
      handleReset: handleReset,
      timeType: timeType
    };
  }, [timeType]);

  var handleReset = function handleReset() {
    var _a;

    dateTypeRef.current = {
      timeType: defaultType,
      dateRange: dateOptions[2].dateRange
    };
    setTimeType(defaultType);
    (_a = dateRef.current) === null || _a === void 0 ? void 0 : _a.handleResetDate();
  };

  var onDateChange = useCallback(function (value) {
    dateTypeRef.current = Object.assign(Object.assign({}, dateTypeRef.current), {
      dateRange: value
    });
    var _dateTypeRef$current = dateTypeRef.current,
        timeType = _dateTypeRef$current.timeType,
        dateRange = _dateTypeRef$current.dateRange;
    onTypeDateSelect(timeType, dateRange);
  }, []);
  var onTypeChange = useCallback(function (value) {
    dateTypeRef.current = Object.assign(Object.assign({}, dateTypeRef.current), {
      timeType: value
    });
    setTimeType(value);
    var _dateTypeRef$current2 = dateTypeRef.current,
        timeType = _dateTypeRef$current2.timeType,
        dateRange = _dateTypeRef$current2.dateRange;
    onTypeDateSelect(timeType, dateRange);
  }, []);
  return /*#__PURE__*/React.createElement("div", {
    className: "bee-type-picker",
    style: props.style ? props.style : {}
  }, /*#__PURE__*/React.createElement(Select, {
    className: "mr-10",
    style: {
      width: 96
    },
    value: timeType,
    onChange: onTypeChange
  }, typeOptions.map(function (item) {
    return /*#__PURE__*/React.createElement(Option, {
      key: item.type,
      value: item.type
    }, item.name);
  })), /*#__PURE__*/React.createElement(BeeDatePicker, {
    ref: dateRef,
    defaultSelectedIndex: 2,
    dateOptions: dateOptions,
    onDateSelect: onDateChange,
    allowClear: true
  }));
};

var BeeTypePickerRef = /*#__PURE__*/forwardRef(BeeTypePicker);
BeeTypePickerRef.defaultOptions = BeeDatePicker.defaultOptions;
BeeTypePickerRef.BeeBaseDatePicker = BeeDatePicker;
export default BeeTypePickerRef;