bhd-components 0.9.2 → 0.9.4

package/es2017/bhdDatePicker/index.js

@@ -2,30 +2,71 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ice/jsx-runtime/jsx-runtime";
 import * as React from "react";
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import styles from "./index.module.less";
-import { Button, DatePicker } from "antd";
-import { CustomArrow } from "../icons/index";
-import dayjs from "dayjs";
-const { RangePicker  } = DatePicker;
+import { ConfigProvider, Button, DatePicker } from "antd";
+import { CustomArrow } from "../icons";
+// import dayjs from "dayjs";
+// import type { Dayjs } from "dayjs";
+import i18Conversion from "../i18n";
+const { RangePicker } = DatePicker;
 let months = [
-    "一",
-    "二",
-    "三",
-    "四",
-    "五",
-    "六",
-    "七",
-    "八",
-    "九",
-    "十",
-    "十一",
-    "十二"
+    "一月",
+    "二月",
+    "三月",
+    "四月",
+    "五月",
+    "六月",
+    "七月",
+    "八月",
+    "九月",
+    "十月",
+    "十一月",
+    "十二月"
 ];
+//January_February_March_April_May_June_July_August_September_October_November_December
 const BhdDatePicker = (props)=>{
-    let { kind ="single" , value =props.kind === "range" ? [] : "" , extraItems , extraReadonly =false , picker , useType ="" , className , popupClassName , showTime , showNow =true , onClick , onBlur , onChange , onOk , presets =[]  } = props;
+    const lang = ConfigProvider.lang === "en" ? "en_US" : "zh_CN";
+    // if (lang === "en_US") {
+    //   const enUS = require("dayjs/locale/en");
+    //   dayjs.locale(enUS);
+    // } else {
+    //   const zhCN = require("dayjs/locale/zh-cn");
+    //   dayjs.locale(zhCN);
+    // }
+    const id = "BhdDatePicker_" + new Date().getTime();
+    // 默认格式
+    const getDefaultFormat = ()=>{
+        if (props.format) {
+            return props.format;
+        } else {
+            let fm = props.showTime ? "YYYY-MM-DD hh:mm:ss" : "YYYY-MM-DD";
+            switch(props.picker){
+                case undefined:
+                case "date":
+                    break;
+                case "week":
+                    fm = "YYYY-wo";
+                    break;
+                case "month":
+                    fm = "YYYY-MM";
+                    break;
+                case "quarter":
+                    fm = "YYYY-QQ";
+                    break;
+                case "year":
+                    fm = "YYYY";
+                    break;
+                default:
+                    break;
+            }
+            return fm;
+        }
+    };
+    // 自己组件内使用的，或者自己处理的
+    let { kind = "single", extraItems, extraReadonly = false, useType = "", open = false, mode, picker, value = props.kind === "range" ? [] : "", format = getDefaultFormat(), presets = [], className, popupClassName, showTime, showNow = true, showToday = true, allowClear = true, onClick, onBlur, onChange, onOk, onCalendarChange, onOpenChange, onPanelChange, disabledDate, cellRender, renderExtraFooter } = props;
     const bhdDatePickerRef = useRef(null);
-    const [open, setOpen] = useState(false);
+    const [panelOpen, setPanelOpen] = useState(open);
     const [panelMode, setPanelMode] = useState("date");
     const [rangePanelMode, setRangePanelMode] = useState([
         "date",
@@ -38,79 +79,123 @@ const BhdDatePicker = (props)=>{
     const [selectedRangeDate, setSelectedRangeDate] = useState(value);
     const [selectedRangeDateString, setSelectedRangeDateString] = useState([]);
     const [rangeOpenChange, setRangeOpenChange] = useState(false); // 用于范围选择失去焦点后，判断是否关闭
-    const timer = useRef(null);
+    const isChange = useRef(false);
     useEffect(()=>{
         setDefaultMode();
-    }, []);
-    useEffect(()=>{
-        if (panelMode === "year") {
-            timer.current = setTimeout(()=>{
-                const doms = document.getElementsByClassName("bhd-picker-decade-btn");
-                for(let index = 0; index < doms.length; index++){
-                    var _doms_index, _doms_index_childNodes;
-                    const dom = (_doms_index = doms[index]) === null || _doms_index === void 0 ? void 0 : (_doms_index_childNodes = _doms_index.childNodes) === null || _doms_index_childNodes === void 0 ? void 0 : _doms_index_childNodes[1];
-                    if (dom) {
-                        if (dom.textContent !== " ㅡ ") {
-                            dom.textContent = " ㅡ ";
-                        }
-                    }
-                }
-            }, 0);
+        if (kind === "range") {
+            if (selectedRangeDate[0] && selectedRangeDate[1]) {
+                setSelectedRangeDateString([
+                    selectedRangeDate[0].format(format),
+                    selectedRangeDate[1].format(format)
+                ]);
+            }
+        } else {
+            if (selectedDate) {
+                setSelectedDateString((prevState)=>{
+                    selectedDateStringRef.current = selectedDate.format(format);
+                    return selectedDateStringRef.current;
+                });
+            }
         }
         return ()=>{
-            clearTimeout(timer.current);
+            var _document_getElementsByClassName__getElementsByClassName, _document_getElementsByClassName_, _document_getElementsByClassName, _btn;
+            const btn = (_document_getElementsByClassName = document.getElementsByClassName(id)) === null || _document_getElementsByClassName === void 0 ? void 0 : (_document_getElementsByClassName_ = _document_getElementsByClassName[0]) === null || _document_getElementsByClassName_ === void 0 ? void 0 : (_document_getElementsByClassName__getElementsByClassName = _document_getElementsByClassName_.getElementsByClassName("bhd-picker-today-btn")) === null || _document_getElementsByClassName__getElementsByClassName === void 0 ? void 0 : _document_getElementsByClassName__getElementsByClassName[0];
+            (_btn = btn) === null || _btn === void 0 ? void 0 : _btn.removeEventListener("click", todayClick);
         };
+    }, []);
+    useEffect(()=>{
+        isChange.current = true;
     }, [
-        open,
-        panelMode
+        selectedDate,
+        selectedRangeDate
     ]);
+    // 传给 DatePicker 的props参数
     const getConfig = ()=>{
-        let config = _object_spread({}, props);
-        delete config.cellRender;
-        delete config.className;
-        delete config.prevIcon;
-        delete config.nextIcon;
-        delete config.superPrevIcon;
-        delete config.superNextIcon;
+        let config = _object_spread_props(_object_spread({
+            prevIcon: /*#__PURE__*/ _jsx(CustomArrow, {
+                style: {
+                    transform: "rotate(90deg)"
+                }
+            }),
+            nextIcon: /*#__PURE__*/ _jsx(CustomArrow, {
+                style: {
+                    transform: "rotate(-90deg)"
+                }
+            }),
+            superPrevIcon: /*#__PURE__*/ _jsx(CustomArrow, {
+                style: {
+                    transform: "rotate(90deg)"
+                }
+            }),
+            superNextIcon: /*#__PURE__*/ _jsx(CustomArrow, {
+                style: {
+                    transform: "rotate(-90deg)"
+                }
+            })
+        }, props), {
+            //--------------- 下边是需要处理的
+            className: `${className} ${useType === "table" ? "table-date-picker" : ""}`,
+            popupClassName,
+            allowClear,
+            showTime,
+            cellRender,
+            renderExtraFooter: selfRenderExtraFooter
+        });
+        //组件支持传入,防止再次传入DatePicker，所以删掉
+        delete config.mode;
         delete config.open;
         delete config.onOpenChange;
-        delete config.renderExtraFooter;
-        delete config.useType;
-        delete config.showNow;
         delete config.onClick;
         delete config.onBlur;
         delete config.onOk;
         delete config.onChange;
-        delete config.presets;
-        delete config.mode;
-        if (kind === "single" || kind === "extra") {
-            delete config.value;
+        delete config.useType; // 组件自己定义的
+        delete config.presets; // 必须删掉，因为预设由官网的左侧换到底部
+        delete config.showNow; // 必须删掉，因为官网的今天按钮有bug，不受showNow的值控制
+        if (!config.cellRender) {
+            config.cellRender = selfCellRender;
         }
-        if (kind === "extra" && picker !== "date") {
-            delete config.extraItems;
+        // 单选
+        if (kind === "single") {
+            config.popupClassName = `
+        ${styles.bhdDatePickerPopup} ${styles.singlePicker} ${popupClassName || ""} ${showTime ? styles.showTime : ""} ${renderExtraFooter ? styles.showExtraFooter : ""}`;
         }
+        // 范围选择
+        if (kind === "range") {
+            config.popupClassName = `${styles.bhdDatePickerPopup} ${styles.rangePicker} ${popupClassName || ""} ${showTime ? styles.showTime : ""} ${renderExtraFooter ? styles.showExtraFooter : ""}`;
+        }
+        // 日常安排
         if (kind === "extra") {
-            delete config.disabledDate;
+            delete config.showTime; // 日程安排的时候，不允许展示时间面板
+            showTime = false; // 日程安排不选择时间
+            config.popupClassName = `${styles.bhdDatePickerPopup} ${styles.extraPicker} ${extraReadonly ? styles.readonly : ""} ${popupClassName || ""} ${showTime ? styles.showTime : ""} ${renderExtraFooter ? styles.showExtraFooter : ""}`;
+            if (extraReadonly) {
+                config.allowClear = false; // 日程安排查看时，不显示清除按钮
+            }
         }
+        config.popupClassName = `${config.popupClassName} ${id}`;
         return config;
     };
     // 设置默认mode
     const setDefaultMode = ()=>{
+        if (kind === "single" || kind === "extra") {
+            setPanelMode(mode || picker || "date");
+        }
         if (kind === "range") {
+            var _mode, _mode1;
             setRangePanelMode([
-                picker || "date",
-                picker || "date"
+                ((_mode = mode) === null || _mode === void 0 ? void 0 : _mode[0]) || picker || "date",
+                ((_mode1 = mode) === null || _mode1 === void 0 ? void 0 : _mode1[1]) || picker || "date"
             ]);
-        } else {
-            setPanelMode(picker || "date");
         }
     };
     //单元格渲染
-    const cellRender = (current, info)=>{
+    const selfCellRender = (current, info)=>{
         if (info.type === "date") {
             let extraItem = null;
             if (kind === "extra") {
-                extraItem = extraItems === null || extraItems === void 0 ? void 0 : extraItems.find((item)=>item.date.format("YYYYMMDD") === current.format("YYYYMMDD"));
+                var _extraItems;
+                extraItem = (_extraItems = extraItems) === null || _extraItems === void 0 ? void 0 : _extraItems.find((item)=>item.date.format("YYYYMMDD") === current.format("YYYYMMDD"));
             }
             return /*#__PURE__*/ _jsx(_Fragment, {
                 children: /*#__PURE__*/ _jsxs("div", {
@@ -125,67 +210,111 @@ const BhdDatePicker = (props)=>{
                 })
             });
         }
+        // 月份 中文模式下显示全名称（例：一月），英文模式下显示短名称（例：Jan）
         if (info.type === "month") {
+            // return (
+            //   <div className={`${"bhd-picker-cell-inner"}`}>
+            //     {current.format(dayjs.locale() === "zh-cn" ? "MMMM" : "MMM")}
+            //   </div>
+            // );
             return /*#__PURE__*/ _jsx("div", {
                 className: `${"bhd-picker-cell-inner"}`,
-                children: months[Number(current.format("M")) - 1] + "月"
+                children: i18Conversion(months[Number(current.format("M")) - 1])
             });
         }
         return info.originNode;
     };
     //日期禁用
-    const disabledDate = (current)=>{
-        // if (extraReadonly) {
-        //   return true;
-        // }
+    const selfDisabledDate = (current)=>{
+        // 或者是传过来的
+        if (disabledDate) {
+            return disabledDate(current);
+        }
         // 不能选择的是没有日程安排的
         let extraItem = null;
         if (kind === "extra") {
-            extraItem = extraItems === null || extraItems === void 0 ? void 0 : extraItems.find((item)=>item.date.format("YYYYMMDD") === current.format("YYYYMMDD"));
+            var _extraItems;
+            extraItem = (_extraItems = extraItems) === null || _extraItems === void 0 ? void 0 : _extraItems.find((item)=>item.date.format("YYYYMMDD") === current.format("YYYYMMDD"));
             if (extraReadonly && extraItem) {
                 return false;
             }
+            return !extraItem || current && extraItem.status === "noselectable";
         }
-        return !extraItem || current && extraItem.status === "noselectable";
+        return false;
     };
-    // 渲染底部扩展内容
-    const renderExtraFooter = (mode)=>{
-        return !showTime ? /*#__PURE__*/ _jsxs("ul", {
-            className: "bhd-picker-ranges",
+    // 渲染底部扩展内容（包括确定按钮、今天按钮、预设、传入的底部扩展）
+    const selfRenderExtraFooter = (mode)=>{
+        var _selectedRangeDate, _selectedRangeDate1;
+        return /*#__PURE__*/ _jsxs(_Fragment, {
             children: [
-                renderPresets(),
-                showNow && (kind === "single" || kind === "extra" && extraItems.filter((item)=>item.status !== "noselectable" && item.date.format("YYYY-MM-DD") === dayjs().format("YYYY-MM-DD")).length > 0) && mode === "date" && /*#__PURE__*/ _jsx("li", {
-                    className: "bhd-picker-now",
-                    children: /*#__PURE__*/ _jsx("a", {
-                        className: "bhd-picker-now-btn",
-                        onClick: todayClick,
-                        children: showTime ? "此刻" : "今天"
-                    })
+                renderExtraFooter && /*#__PURE__*/ _jsx("div", {
+                    className: "bhddatepicker-picker-footer-extra-extend",
+                    children: renderExtraFooter(mode)
                 }),
-                /*#__PURE__*/ _jsx("li", {
-                    className: "bhd-picker-ok",
-                    children: /*#__PURE__*/ _jsx(Button, {
-                        type: "primary",
-                        disabled: kind === "range" ? !((selectedRangeDate === null || selectedRangeDate === void 0 ? void 0 : selectedRangeDate[0]) && (selectedRangeDate === null || selectedRangeDate === void 0 ? void 0 : selectedRangeDate[1])) : !(selectedDate && selectedDateString),
-                        onClick: okClick,
-                        children: "确定"
+                !showTime ? /*#__PURE__*/ _jsx(_Fragment, {
+                    children: /*#__PURE__*/ _jsxs("ul", {
+                        className: "bhd-picker-ranges",
+                        children: [
+                            selfRenderPresets(),
+                            renderToday(),
+                            /*#__PURE__*/ _jsx("li", {
+                                className: "bhd-picker-ok",
+                                children: /*#__PURE__*/ _jsx(Button, {
+                                    type: "primary",
+                                    disabled: kind === "range" ? !(((_selectedRangeDate = selectedRangeDate) === null || _selectedRangeDate === void 0 ? void 0 : _selectedRangeDate[0]) && ((_selectedRangeDate1 = selectedRangeDate) === null || _selectedRangeDate1 === void 0 ? void 0 : _selectedRangeDate1[1])) : !(selectedDate && selectedDateString),
+                                    onClick: okClick,
+                                    children: i18Conversion("确定")
+                                })
+                            })
+                        ]
                     })
+                }) : /*#__PURE__*/ _jsx("ul", {
+                    className: `bhd-picker-ranges showPresets ${showNow ? "showNow" : ""}`,
+                    children: selfRenderPresets()
                 })
             ]
-        }) : /*#__PURE__*/ _jsx("ul", {
-            className: "bhd-picker-ranges",
-            children: renderPresets()
         });
     };
+    // 渲染今天
+    const renderToday = ()=>{
+        // 显示now
+        if (showToday) {
+            var _extraItems;
+            // 日程安排时： extraItems中今天是否是可选或者已选择状态
+            let hasNow = ((_extraItems = extraItems) === null || _extraItems === void 0 ? void 0 : _extraItems.filter((item)=>item.status !== "noselectable" && // item.date.format(format) === dayjs().format(format)
+                item.date.format("YYYYMMDD") === getToday()).length) > 0;
+            if (kind === "single" || kind === "extra" && hasNow) {
+                if (mode === "date" || mode === undefined) {
+                    return /*#__PURE__*/ _jsx("li", {
+                        className: "bhd-picker-now",
+                        children: /*#__PURE__*/ _jsx("a", {
+                            className: "bhd-picker-now-btn",
+                            style: {
+                                visibility: "hidden"
+                            },
+                            onClick: todayClick,
+                            children: i18Conversion("今天")
+                        })
+                    });
+                }
+            }
+        }
+        return null;
+    };
+    // 获取到年月日
+    const getToday = ()=>{
+        const date = new Date();
+        return date.getFullYear().toString() + date.getMonth().toString().padStart(2, "0") + date.getDay().toString().padStart(2, "0");
+    };
     // 渲染预设
-    const renderPresets = ()=>{
+    const selfRenderPresets = ()=>{
         return /*#__PURE__*/ _jsx("li", {
             className: "bhd-picker-presets",
             children: presets.map((item, index)=>{
                 return /*#__PURE__*/ _jsx("a", {
                     className: "bhd-picker-preset-btn",
                     onClick: ()=>{
-                        presetClick(item.value);
+                        presetClick(item);
                     },
                     children: item.label
                 }, index);
@@ -197,77 +326,87 @@ const BhdDatePicker = (props)=>{
         if (kind === "range") {
             if (selectedRangeDate[0] && selectedRangeDate[1] && selectedRangeDateString[0] && selectedRangeDateString[1]) {
                 onChange && onChange(selectedRangeDate, selectedRangeDateString);
-                setOpen(false);
+                setPanelOpen(false);
             } else {
-                setOpen(true);
+                setPanelOpen(true);
             }
         } else {
-            if (selectedDate && selectedDateString) {
-                onChange && onChange(selectedDate, selectedDateString);
-                setOpen(false);
+            if (selectedDateRef.current && selectedDateStringRef.current) {
+                onChange && onChange(selectedDateRef.current, selectedDateStringRef.current);
+                setPanelOpen(false);
             }
         }
     };
-    const todayClick = ()=>{
-        var today = dayjs();
-        var todayString = today.format(showTime ? "YYYY-MM-DD hh:mm:ss" : "YYYY-MM-DD");
-        setSelectedDate(today);
-        setSelectedDateString(todayString);
-        onChange && onChange(today, todayString);
-        setOpen(false);
+    // 今天点击
+    const todayClick = useCallback(()=>{
+        setTimeout(()=>{
+            okClick();
+        }, 0);
+    }, []);
+    const todayClickEventListener = (value)=>{
+        if (!value) return;
+        if (showToday) {
+            var _document_getElementsByClassName__getElementsByClassName, _document_getElementsByClassName_, _document_getElementsByClassName;
+            const btn = (_document_getElementsByClassName = document.getElementsByClassName(id)) === null || _document_getElementsByClassName === void 0 ? void 0 : (_document_getElementsByClassName_ = _document_getElementsByClassName[0]) === null || _document_getElementsByClassName_ === void 0 ? void 0 : (_document_getElementsByClassName__getElementsByClassName = _document_getElementsByClassName_.getElementsByClassName("bhd-picker-today-btn")) === null || _document_getElementsByClassName__getElementsByClassName === void 0 ? void 0 : _document_getElementsByClassName__getElementsByClassName[0];
+            if (value) {
+                var _btn, _btn1;
+                (_btn = btn) === null || _btn === void 0 ? void 0 : _btn.removeEventListener("click", todayClick);
+                (_btn1 = btn) === null || _btn1 === void 0 ? void 0 : _btn1.addEventListener("click", todayClick, {
+                    once: true
+                });
+            }
+        }
     };
     //预设点击
-    const presetClick = (value)=>{
-        var todayString = value.format(showTime ? "YYYY-MM-DD hh:mm:ss" : "YYYY-MM-DD");
-        setSelectedDate(value);
-        setSelectedDateString(todayString);
-        onChange && onChange(value, todayString);
-        setOpen(false);
+    const presetClick = (info)=>{
+        console.log(typeof info.value);
+        const value = typeof info.value === "function" ? info.value() : info.value;
+        if (kind === "range") {
+            const valueString = [
+                value[0].format(format),
+                value[1].format(format)
+            ];
+            setSelectedRangeDate(value);
+            setSelectedRangeDateString(valueString);
+            onChange && onChange(value, valueString);
+            setPanelOpen(false);
+        } else {
+            const valueString = value.format(format);
+            setSelectedDate((prevState)=>{
+                selectedDateRef.current = value;
+                return selectedDateRef.current;
+            });
+            setSelectedDateString((prevState)=>{
+                selectedDateStringRef.current = valueString;
+                return selectedDateStringRef.current;
+            });
+            onChange && onChange(value, valueString);
+            setPanelOpen(false);
+        }
     };
     return /*#__PURE__*/ _jsxs("span", {
         className: `${styles.bhdDatePicker}`,
         ref: bhdDatePickerRef,
         children: [
-            kind === "single" && /*#__PURE__*/ _jsx(_Fragment, {
+            (kind === "single" || kind === "extra") && /*#__PURE__*/ _jsx(_Fragment, {
                 children: /*#__PURE__*/ _jsx(DatePicker, _object_spread_props(_object_spread({}, getConfig()), {
-                    id: "pickerRef",
-                    className: `${className} ${useType === "table" ? "table-date-picker" : ""}`,
-                    popupClassName: `${styles.bhdDatePickerPopup} ${styles.singlePicker} ${popupClassName || ""}`,
-                    cellRender: cellRender,
-                    prevIcon: /*#__PURE__*/ _jsx(CustomArrow, {
-                        style: {
-                            transform: "rotate(90deg)"
-                        }
-                    }),
-                    nextIcon: /*#__PURE__*/ _jsx(CustomArrow, {
-                        style: {
-                            transform: "rotate(-90deg)"
-                        }
-                    }),
-                    superPrevIcon: /*#__PURE__*/ _jsx(CustomArrow, {
-                        style: {
-                            transform: "rotate(90deg)"
-                        }
-                    }),
-                    superNextIcon: /*#__PURE__*/ _jsx(CustomArrow, {
-                        style: {
-                            transform: "rotate(-90deg)"
-                        }
-                    }),
+                    id: id,
+                    value: selectedDate,
+                    mode: panelMode,
+                    open: panelOpen,
+                    disabledDate: selfDisabledDate,
                     onPanelChange: (value, mode)=>{
                         setPanelMode(mode);
+                        onPanelChange && onPanelChange(value, mode);
                     },
-                    mode: panelMode,
-                    open: open,
                     onOpenChange: (value)=>{
                         // 打开设置默认mode
                         if (value) {
                             setDefaultMode();
+                            todayClickEventListener(value);
                         }
+                        onOpenChange && onOpenChange(value);
                     },
-                    showNow: showTime ? showNow : false,
-                    defaultPickerValue: selectedDate,
-                    value: selectedDate,
                     onChange: (date, dateString)=>{
                         setSelectedDate((prevState)=>{
                             selectedDateRef.current = date;
@@ -278,149 +417,67 @@ const BhdDatePicker = (props)=>{
                             return selectedDateStringRef.current;
                         });
                     },
-                    onOk: ()=>{
+                    onOk: (date)=>{
                         if (showTime) {
                             setTimeout(()=>{
-                                console.log({
-                                    selectedDate: selectedDateRef.current,
-                                    selectedDateString: selectedDateStringRef.current
-                                });
                                 onChange && onChange(selectedDateRef.current, selectedDateStringRef.current);
-                                setOpen(false);
+                                setPanelOpen(false);
                             }, 0);
                         }
-                        onOk && onOk();
+                        onOk && onOk(date);
                     },
-                    onClick: ()=>{
-                        setOpen(true);
-                        onClick && onClick();
+                    onClick: (e)=>{
+                        setPanelOpen(true);
+                        onClick && onClick(e);
                     },
-                    onBlur: ()=>{
+                    onBlur: (e)=>{
                         okClick();
-                        setOpen(false);
-                        onBlur && onBlur();
-                    },
-                    renderExtraFooter: renderExtraFooter
+                        setPanelOpen(false);
+                        onBlur && onBlur(e);
+                    }
                 }))
             }),
             kind === "range" && /*#__PURE__*/ _jsx(_Fragment, {
                 children: /*#__PURE__*/ _jsx(RangePicker, _object_spread_props(_object_spread({}, getConfig()), {
-                    className: `${className} ${useType === "table" ? "table-date-picker" : ""}`,
-                    popupClassName: `${styles.bhdDatePickerPopup} ${styles.rangePicker} ${popupClassName || ""}`,
-                    cellRender: cellRender,
-                    prevIcon: /*#__PURE__*/ _jsx(CustomArrow, {
-                        style: {
-                            transform: "rotate(90deg)"
-                        }
-                    }),
-                    nextIcon: /*#__PURE__*/ _jsx(CustomArrow, {
-                        style: {
-                            transform: "rotate(-90deg)"
-                        }
-                    }),
-                    superPrevIcon: /*#__PURE__*/ _jsx(CustomArrow, {
-                        style: {
-                            transform: "rotate(90deg)"
-                        }
-                    }),
-                    superNextIcon: /*#__PURE__*/ _jsx(CustomArrow, {
-                        style: {
-                            transform: "rotate(-90deg)"
-                        }
-                    }),
+                    value: selectedRangeDate,
+                    mode: rangePanelMode,
+                    open: panelOpen,
+                    disabledDate: selfDisabledDate,
                     onPanelChange: (value, mode)=>{
                         setRangePanelMode(mode);
+                        onPanelChange && onPanelChange(value, mode);
                     },
-                    mode: rangePanelMode,
-                    open: open,
                     onOpenChange: (value)=>{
                         if (value) {
                             setDefaultMode();
                         }
+                        if (showTime) {
+                            setPanelOpen(value);
+                        }
                         setRangeOpenChange(value);
+                        onOpenChange && onOpenChange(value);
                     },
-                    showNow: false,
-                    defaultPickerValue: selectedRangeDate,
-                    value: selectedRangeDate,
-                    onClick: ()=>{
-                        setOpen(true);
-                        onClick && onClick();
+                    onClick: (e)=>{
+                        setPanelOpen(true);
+                        onClick && onClick(e);
                     },
                     onCalendarChange: (dates, dateStrings, info)=>{
                         setSelectedRangeDate(dates);
                         setSelectedRangeDateString(dateStrings);
+                        onCalendarChange && onCalendarChange(dates, dateStrings, info);
                     },
-                    onBlur: ()=>{
-                        if ((selectedRangeDate === null || selectedRangeDate === void 0 ? void 0 : selectedRangeDate[0]) && (selectedRangeDate === null || selectedRangeDate === void 0 ? void 0 : selectedRangeDate[1])) {
+                    onBlur: (e)=>{
+                        var _selectedRangeDate, _selectedRangeDate1, _selectedRangeDate2, _selectedRangeDate3;
+                        if (((_selectedRangeDate = selectedRangeDate) === null || _selectedRangeDate === void 0 ? void 0 : _selectedRangeDate[0]) && ((_selectedRangeDate1 = selectedRangeDate) === null || _selectedRangeDate1 === void 0 ? void 0 : _selectedRangeDate1[1])) {
                             okClick();
-                            setOpen(false);
-                        } else if (!(selectedRangeDate === null || selectedRangeDate === void 0 ? void 0 : selectedRangeDate[0]) || !(selectedRangeDate === null || selectedRangeDate === void 0 ? void 0 : selectedRangeDate[1])) {
-                            setOpen(rangeOpenChange);
+                            setPanelOpen(false);
+                        } else if (!((_selectedRangeDate2 = selectedRangeDate) === null || _selectedRangeDate2 === void 0 ? void 0 : _selectedRangeDate2[0]) || !((_selectedRangeDate3 = selectedRangeDate) === null || _selectedRangeDate3 === void 0 ? void 0 : _selectedRangeDate3[1])) {
+                            setPanelOpen(rangeOpenChange);
                         }
-                        onBlur && onBlur();
-                    },
-                    panelRender: (panelNode)=>{
-                        return panelNode;
-                    },
-                    renderExtraFooter: renderExtraFooter
-                }))
-            }),
-            kind === "extra" && /*#__PURE__*/ _jsx(DatePicker, _object_spread_props(_object_spread({}, getConfig()), {
-                className: `${className} ${useType === "table" ? "hide" : ""}`,
-                popupClassName: `${styles.bhdDatePickerPopup} ${styles.extraPicker} ${extraReadonly ? styles.readonly : ""} ${popupClassName || ""}`,
-                cellRender: cellRender,
-                prevIcon: /*#__PURE__*/ _jsx(CustomArrow, {
-                    style: {
-                        transform: "rotate(90deg)"
-                    }
-                }),
-                nextIcon: /*#__PURE__*/ _jsx(CustomArrow, {
-                    style: {
-                        transform: "rotate(-90deg)"
+                        onBlur && onBlur(e);
                     }
-                }),
-                superPrevIcon: /*#__PURE__*/ _jsx(CustomArrow, {
-                    style: {
-                        transform: "rotate(90deg)"
-                    }
-                }),
-                superNextIcon: /*#__PURE__*/ _jsx(CustomArrow, {
-                    style: {
-                        transform: "rotate(-90deg)"
-                    }
-                }),
-                disabledDate: disabledDate,
-                allowClear: !extraReadonly,
-                onPanelChange: (value, mode)=>{
-                    setPanelMode(mode);
-                },
-                mode: panelMode,
-                onOpenChange: (value)=>{
-                    if (value) {
-                        setDefaultMode();
-                    }
-                },
-                open: open,
-                showNow: false,
-                defaultPickerValue: selectedDate,
-                value: selectedDate,
-                onChange: (date, dateString)=>{
-                    setSelectedDate(date);
-                    setSelectedDateString(dateString);
-                },
-                onClick: ()=>{
-                    setOpen(true);
-                    onClick && onClick();
-                },
-                onBlur: ()=>{
-                    if (!extraReadonly) {
-                        okClick();
-                    }
-                    setOpen(false);
-                    onBlur && onBlur();
-                },
-                renderExtraFooter: extraReadonly ? null : renderExtraFooter
-            }))
+                }))
+            })
         ]
     });
 };