bhd-components 0.9.0 → 0.9.2

package/es2017/bhdDatePicker/index.d.ts

@@ -9,7 +9,6 @@ interface BhdDatePickerProps {
     [key: string]: any;
     kind: "single" | "range" | "extra";
     useType?: string;
-    label?: React.ReactNode;
     extraItems?: BhdDateExtraPicker[];
     extraReadonly?: boolean;
 }

package/es2017/bhdDatePicker/index.js

@@ -2,22 +2,68 @@ 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, useRef } from "react";
+import { useState, useEffect, useRef } from "react";
 import styles from "./index.module.less";
 import { Button, DatePicker } from "antd";
-import { CustomArrow, CalendarOutlined } from "../icons/index";
+import { CustomArrow } from "../icons/index";
 import dayjs from "dayjs";
 const { RangePicker  } = DatePicker;
+let months = [
+    "一",
+    "二",
+    "三",
+    "四",
+    "五",
+    "六",
+    "七",
+    "八",
+    "九",
+    "十",
+    "十一",
+    "十二"
+];
 const BhdDatePicker = (props)=>{
-    let { kind ="single" , value =props.kind === "range" ? [] : "" , extraItems , extraReadonly =false , picker , useType ="" , label ="" , className , popupClassName , showTime , showNow =true , onClick , onBlur , onChange , onOk , presets =[]  } = 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 bhdDatePickerRef = useRef(null);
     const [open, setOpen] = useState(false);
+    const [panelMode, setPanelMode] = useState("date");
+    const [rangePanelMode, setRangePanelMode] = useState([
+        "date",
+        "date"
+    ]);
     const [selectedDate, setSelectedDate] = useState(value);
     const [selectedDateString, setSelectedDateString] = useState(null);
     const selectedDateRef = useRef(value);
     const selectedDateStringRef = useRef(null);
     const [selectedRangeDate, setSelectedRangeDate] = useState(value);
     const [selectedRangeDateString, setSelectedRangeDateString] = useState([]);
+    const [rangeOpenChange, setRangeOpenChange] = useState(false); // 用于范围选择失去焦点后，判断是否关闭
+    const timer = useRef(null);
+    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);
+        }
+        return ()=>{
+            clearTimeout(timer.current);
+        };
+    }, [
+        open,
+        panelMode
+    ]);
     const getConfig = ()=>{
         let config = _object_spread({}, props);
         delete config.cellRender;
@@ -36,6 +82,7 @@ const BhdDatePicker = (props)=>{
         delete config.onOk;
         delete config.onChange;
         delete config.presets;
+        delete config.mode;
         if (kind === "single" || kind === "extra") {
             delete config.value;
         }
@@ -47,43 +94,57 @@ const BhdDatePicker = (props)=>{
         }
         return config;
     };
+    // 设置默认mode
+    const setDefaultMode = ()=>{
+        if (kind === "range") {
+            setRangePanelMode([
+                picker || "date",
+                picker || "date"
+            ]);
+        } else {
+            setPanelMode(picker || "date");
+        }
+    };
     //单元格渲染
     const cellRender = (current, info)=>{
-        if (info.type !== "date") {
-            return info.originNode;
+        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"));
+            }
+            return /*#__PURE__*/ _jsx(_Fragment, {
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: `${"bhd-picker-cell-inner"}`,
+                    children: [
+                        current.format("DD"),
+                        kind === "extra" && extraItem && /*#__PURE__*/ _jsx("div", {
+                            className: `extraText ${extraItem.status}`,
+                            children: extraItem.text
+                        })
+                    ]
+                })
+            });
         }
-        if (typeof current === "number" || typeof current === "string") {
+        if (info.type === "month") {
             return /*#__PURE__*/ _jsx("div", {
-                className: "bhd-picker-cell-inner",
-                children: current
+                className: `${"bhd-picker-cell-inner"}`,
+                children: months[Number(current.format("M")) - 1] + "月"
             });
         }
-        let extraItem = null;
-        if (kind === "extra") {
-            extraItem = 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", {
-                className: "bhd-picker-cell-inner",
-                children: [
-                    current.format("DD"),
-                    kind === "extra" && extraItem && /*#__PURE__*/ _jsx("div", {
-                        className: `extraText ${extraItem.status}`,
-                        children: extraItem.text
-                    })
-                ]
-            })
-        });
+        return info.originNode;
     };
     //日期禁用
     const disabledDate = (current)=>{
-        if (extraReadonly) {
-            return true;
-        }
+        // if (extraReadonly) {
+        //   return true;
+        // }
         // 不能选择的是没有日程安排的
         let extraItem = null;
         if (kind === "extra") {
             extraItem = 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";
     };
@@ -93,7 +154,7 @@ const BhdDatePicker = (props)=>{
             className: "bhd-picker-ranges",
             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", {
+                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",
@@ -120,23 +181,25 @@ const BhdDatePicker = (props)=>{
     const renderPresets = ()=>{
         return /*#__PURE__*/ _jsx("li", {
             className: "bhd-picker-presets",
-            children: presets.map((item)=>{
+            children: presets.map((item, index)=>{
                 return /*#__PURE__*/ _jsx("a", {
                     className: "bhd-picker-preset-btn",
                     onClick: ()=>{
                         presetClick(item.value);
                     },
                     children: item.label
-                });
+                }, index);
             })
         });
     };
     // 日期选择确认
     const okClick = ()=>{
         if (kind === "range") {
-            if (selectedRangeDate && selectedRangeDateString) {
+            if (selectedRangeDate[0] && selectedRangeDate[1] && selectedRangeDateString[0] && selectedRangeDateString[1]) {
                 onChange && onChange(selectedRangeDate, selectedRangeDateString);
                 setOpen(false);
+            } else {
+                setOpen(true);
             }
         } else {
             if (selectedDate && selectedDateString) {
@@ -161,148 +224,146 @@ const BhdDatePicker = (props)=>{
         onChange && onChange(value, todayString);
         setOpen(false);
     };
-    return /*#__PURE__*/ _jsxs("div", {
+    return /*#__PURE__*/ _jsxs("span", {
         className: `${styles.bhdDatePicker}`,
         ref: bhdDatePickerRef,
         children: [
-            kind === "single" && /*#__PURE__*/ _jsxs(_Fragment, {
-                children: [
-                    useType === "table" && /*#__PURE__*/ _jsxs("span", {
-                        className: styles.pickerLabel,
-                        onClick: ()=>{
-                            setOpen(true);
-                        },
-                        children: [
-                            label,
-                            /*#__PURE__*/ _jsx(CalendarOutlined, {})
-                        ]
+            kind === "single" && /*#__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)"
+                        }
                     }),
-                    /*#__PURE__*/ _jsx(DatePicker, _object_spread_props(_object_spread({}, getConfig()), {
-                        className: `${className} ${useType === "table" ? "hide" : ""}`,
-                        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)"
-                            }
-                        }),
-                        open: open,
-                        showNow: showTime ? showNow : false,
-                        value: selectedDate,
-                        onChange: (date, dateString)=>{
-                            setSelectedDate((prevState)=>{
-                                selectedDateRef.current = date;
-                                return selectedDateRef.current;
-                            });
-                            setSelectedDateString((prevState)=>{
-                                selectedDateStringRef.current = dateString;
-                                return selectedDateStringRef.current;
-                            });
-                            console.log({
-                                selectedDate: selectedDateRef.current,
-                                selectedDateString: selectedDateStringRef.current
-                            });
-                        },
-                        onOk: ()=>{
-                            if (showTime) {
-                                setTimeout(()=>{
-                                    console.log({
-                                        selectedDate: selectedDateRef.current,
-                                        selectedDateString: selectedDateStringRef.current
-                                    });
-                                    onChange && onChange(selectedDateRef.current, selectedDateStringRef.current);
-                                    setOpen(false);
-                                }, 0);
-                            }
-                            onOk && onOk();
-                        },
-                        onClick: ()=>{
-                            setOpen(true);
-                            onClick && onClick();
-                        },
-                        onBlur: ()=>{
-                            okClick();
-                            setOpen(false);
-                            onBlur && onBlur();
-                        },
-                        renderExtraFooter: renderExtraFooter
-                    }))
-                ]
-            }),
-            kind === "range" && /*#__PURE__*/ _jsxs(_Fragment, {
-                children: [
-                    useType === "table" && /*#__PURE__*/ _jsxs("span", {
-                        className: styles.pickerLabel,
-                        onClick: ()=>{
-                            setOpen(true);
-                        },
-                        children: [
-                            label,
-                            /*#__PURE__*/ _jsx(CalendarOutlined, {})
-                        ]
+                    nextIcon: /*#__PURE__*/ _jsx(CustomArrow, {
+                        style: {
+                            transform: "rotate(-90deg)"
+                        }
                     }),
-                    /*#__PURE__*/ _jsx(RangePicker, _object_spread_props(_object_spread({}, getConfig()), {
-                        className: `${className} ${useType === "table" ? "hide" : ""}`,
-                        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)"
-                            }
-                        }),
-                        open: open,
-                        showNow: false,
-                        value: selectedRangeDate,
-                        onClick: ()=>{
-                            setOpen(true);
-                            onClick && onClick();
-                        },
-                        onCalendarChange: (dates, dateStrings, info)=>{
-                            setSelectedRangeDate(dates);
-                            setSelectedRangeDateString(dateStrings);
-                        },
-                        onBlur: ()=>{
-                            if ((selectedRangeDate === null || selectedRangeDate === void 0 ? void 0 : selectedRangeDate[0]) && (selectedRangeDate === null || selectedRangeDate === void 0 ? void 0 : selectedRangeDate[1])) {
-                                okClick();
-                                setOpen(false);
-                            } else if (!(selectedRangeDate === null || selectedRangeDate === void 0 ? void 0 : selectedRangeDate[0]) && !(selectedRangeDate === null || selectedRangeDate === void 0 ? void 0 : selectedRangeDate[1])) {
+                    superPrevIcon: /*#__PURE__*/ _jsx(CustomArrow, {
+                        style: {
+                            transform: "rotate(90deg)"
+                        }
+                    }),
+                    superNextIcon: /*#__PURE__*/ _jsx(CustomArrow, {
+                        style: {
+                            transform: "rotate(-90deg)"
+                        }
+                    }),
+                    onPanelChange: (value, mode)=>{
+                        setPanelMode(mode);
+                    },
+                    mode: panelMode,
+                    open: open,
+                    onOpenChange: (value)=>{
+                        // 打开设置默认mode
+                        if (value) {
+                            setDefaultMode();
+                        }
+                    },
+                    showNow: showTime ? showNow : false,
+                    defaultPickerValue: selectedDate,
+                    value: selectedDate,
+                    onChange: (date, dateString)=>{
+                        setSelectedDate((prevState)=>{
+                            selectedDateRef.current = date;
+                            return selectedDateRef.current;
+                        });
+                        setSelectedDateString((prevState)=>{
+                            selectedDateStringRef.current = dateString;
+                            return selectedDateStringRef.current;
+                        });
+                    },
+                    onOk: ()=>{
+                        if (showTime) {
+                            setTimeout(()=>{
+                                console.log({
+                                    selectedDate: selectedDateRef.current,
+                                    selectedDateString: selectedDateStringRef.current
+                                });
+                                onChange && onChange(selectedDateRef.current, selectedDateStringRef.current);
                                 setOpen(false);
-                            }
-                            onBlur && onBlur();
-                        },
-                        renderExtraFooter: renderExtraFooter
-                    }))
-                ]
+                            }, 0);
+                        }
+                        onOk && onOk();
+                    },
+                    onClick: ()=>{
+                        setOpen(true);
+                        onClick && onClick();
+                    },
+                    onBlur: ()=>{
+                        okClick();
+                        setOpen(false);
+                        onBlur && onBlur();
+                    },
+                    renderExtraFooter: renderExtraFooter
+                }))
+            }),
+            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)"
+                        }
+                    }),
+                    onPanelChange: (value, mode)=>{
+                        setRangePanelMode(mode);
+                    },
+                    mode: rangePanelMode,
+                    open: open,
+                    onOpenChange: (value)=>{
+                        if (value) {
+                            setDefaultMode();
+                        }
+                        setRangeOpenChange(value);
+                    },
+                    showNow: false,
+                    defaultPickerValue: selectedRangeDate,
+                    value: selectedRangeDate,
+                    onClick: ()=>{
+                        setOpen(true);
+                        onClick && onClick();
+                    },
+                    onCalendarChange: (dates, dateStrings, info)=>{
+                        setSelectedRangeDate(dates);
+                        setSelectedRangeDateString(dateStrings);
+                    },
+                    onBlur: ()=>{
+                        if ((selectedRangeDate === null || selectedRangeDate === void 0 ? void 0 : selectedRangeDate[0]) && (selectedRangeDate === null || selectedRangeDate === void 0 ? void 0 : selectedRangeDate[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);
+                        }
+                        onBlur && onBlur();
+                    },
+                    panelRender: (panelNode)=>{
+                        return panelNode;
+                    },
+                    renderExtraFooter: renderExtraFooter
+                }))
             }),
             kind === "extra" && /*#__PURE__*/ _jsx(DatePicker, _object_spread_props(_object_spread({}, getConfig()), {
                 className: `${className} ${useType === "table" ? "hide" : ""}`,
@@ -330,8 +391,18 @@ const BhdDatePicker = (props)=>{
                 }),
                 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);
@@ -348,10 +419,6 @@ const BhdDatePicker = (props)=>{
                     setOpen(false);
                     onBlur && onBlur();
                 },
-                panelRender: (panelNode)=>{
-                    console.log(panelNode);
-                    return panelNode;
-                },
                 renderExtraFooter: extraReadonly ? null : renderExtraFooter
             }))
         ]