bhd-components 0.9.0 → 0.9.2

package/esm/bhdDatePicker/index.js

@@ -3,22 +3,68 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 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";
 var RangePicker = DatePicker.RangePicker;
+var months = [
+    "一",
+    "二",
+    "三",
+    "四",
+    "五",
+    "六",
+    "七",
+    "八",
+    "九",
+    "十",
+    "十一",
+    "十二"
+];
 var BhdDatePicker = function(props) {
-    var _props_kind = props.kind, kind = _props_kind === void 0 ? "single" : _props_kind, _props_value = props.value, value = _props_value === void 0 ? props.kind === "range" ? [] : "" : _props_value, extraItems = props.extraItems, _props_extraReadonly = props.extraReadonly, extraReadonly = _props_extraReadonly === void 0 ? false : _props_extraReadonly, picker = props.picker, _props_useType = props.useType, useType = _props_useType === void 0 ? "" : _props_useType, _props_label = props.label, label = _props_label === void 0 ? "" : _props_label, className = props.className, popupClassName = props.popupClassName, showTime = props.showTime, _props_showNow = props.showNow, showNow = _props_showNow === void 0 ? true : _props_showNow, onClick = props.onClick, onBlur = props.onBlur, onChange = props.onChange, onOk = props.onOk, _props_presets = props.presets, presets = _props_presets === void 0 ? [] : _props_presets;
+    var _props_kind = props.kind, kind = _props_kind === void 0 ? "single" : _props_kind, _props_value = props.value, value = _props_value === void 0 ? props.kind === "range" ? [] : "" : _props_value, extraItems = props.extraItems, _props_extraReadonly = props.extraReadonly, extraReadonly = _props_extraReadonly === void 0 ? false : _props_extraReadonly, picker = props.picker, _props_useType = props.useType, useType = _props_useType === void 0 ? "" : _props_useType, className = props.className, popupClassName = props.popupClassName, showTime = props.showTime, _props_showNow = props.showNow, showNow = _props_showNow === void 0 ? true : _props_showNow, onClick = props.onClick, onBlur = props.onBlur, onChange = props.onChange, onOk = props.onOk, _props_presets = props.presets, presets = _props_presets === void 0 ? [] : _props_presets;
     var bhdDatePickerRef = useRef(null);
     var _useState = _sliced_to_array(useState(false), 2), open = _useState[0], setOpen = _useState[1];
-    var _useState1 = _sliced_to_array(useState(value), 2), selectedDate = _useState1[0], setSelectedDate = _useState1[1];
-    var _useState2 = _sliced_to_array(useState(null), 2), selectedDateString = _useState2[0], setSelectedDateString = _useState2[1];
+    var _useState1 = _sliced_to_array(useState("date"), 2), panelMode = _useState1[0], setPanelMode = _useState1[1];
+    var _useState2 = _sliced_to_array(useState([
+        "date",
+        "date"
+    ]), 2), rangePanelMode = _useState2[0], setRangePanelMode = _useState2[1];
+    var _useState3 = _sliced_to_array(useState(value), 2), selectedDate = _useState3[0], setSelectedDate = _useState3[1];
+    var _useState4 = _sliced_to_array(useState(null), 2), selectedDateString = _useState4[0], setSelectedDateString = _useState4[1];
     var selectedDateRef = useRef(value);
     var selectedDateStringRef = useRef(null);
-    var _useState3 = _sliced_to_array(useState(value), 2), selectedRangeDate = _useState3[0], setSelectedRangeDate = _useState3[1];
-    var _useState4 = _sliced_to_array(useState([]), 2), selectedRangeDateString = _useState4[0], setSelectedRangeDateString = _useState4[1];
+    var _useState5 = _sliced_to_array(useState(value), 2), selectedRangeDate = _useState5[0], setSelectedRangeDate = _useState5[1];
+    var _useState6 = _sliced_to_array(useState([]), 2), selectedRangeDateString = _useState6[0], setSelectedRangeDateString = _useState6[1];
+    var _useState7 = _sliced_to_array(useState(false), 2), rangeOpenChange = _useState7[0], setRangeOpenChange = _useState7[1]; // 用于范围选择失去焦点后，判断是否关闭
+    var timer = useRef(null);
+    useEffect(function() {
+        setDefaultMode();
+    }, []);
+    useEffect(function() {
+        if (panelMode === "year") {
+            timer.current = setTimeout(function() {
+                var doms = document.getElementsByClassName("bhd-picker-decade-btn");
+                for(var index = 0; index < doms.length; index++){
+                    var _doms_index, _doms_index_childNodes;
+                    var 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 function() {
+            clearTimeout(timer.current);
+        };
+    }, [
+        open,
+        panelMode
+    ]);
     var getConfig = function() {
         var config = _object_spread({}, props);
         delete config.cellRender;
@@ -37,6 +83,7 @@ var BhdDatePicker = function(props) {
         delete config.onOk;
         delete config.onChange;
         delete config.presets;
+        delete config.mode;
         if (kind === "single" || kind === "extra") {
             delete config.value;
         }
@@ -48,47 +95,61 @@ var BhdDatePicker = function(props) {
         }
         return config;
     };
+    // 设置默认mode
+    var setDefaultMode = function() {
+        if (kind === "range") {
+            setRangePanelMode([
+                picker || "date",
+                picker || "date"
+            ]);
+        } else {
+            setPanelMode(picker || "date");
+        }
+    };
     //单元格渲染
     var cellRender = function(current, info) {
-        if (info.type !== "date") {
-            return info.originNode;
+        if (info.type === "date") {
+            var extraItem = null;
+            if (kind === "extra") {
+                extraItem = extraItems === null || extraItems === void 0 ? void 0 : extraItems.find(function(item) {
+                    return 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 ".concat(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
-            });
-        }
-        var extraItem = null;
-        if (kind === "extra") {
-            extraItem = extraItems === null || extraItems === void 0 ? void 0 : extraItems.find(function(item) {
-                return item.date.format("YYYYMMDD") === current.format("YYYYMMDD");
+                children: months[Number(current.format("M")) - 1] + "月"
             });
         }
-        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 ".concat(extraItem.status),
-                        children: extraItem.text
-                    })
-                ]
-            })
-        });
+        return info.originNode;
     };
     //日期禁用
     var disabledDate = function(current) {
-        if (extraReadonly) {
-            return true;
-        }
+        // if (extraReadonly) {
+        //   return true;
+        // }
         // 不能选择的是没有日程安排的
         var extraItem = null;
         if (kind === "extra") {
             extraItem = extraItems === null || extraItems === void 0 ? void 0 : extraItems.find(function(item) {
                 return item.date.format("YYYYMMDD") === current.format("YYYYMMDD");
             });
+            if (extraReadonly && extraItem) {
+                return false;
+            }
         }
         return !extraItem || current && extraItem.status === "noselectable";
     };
@@ -127,23 +188,25 @@ var BhdDatePicker = function(props) {
     var renderPresets = function() {
         return /*#__PURE__*/ _jsx("li", {
             className: "bhd-picker-presets",
-            children: presets.map(function(item) {
+            children: presets.map(function(item, index) {
                 return /*#__PURE__*/ _jsx("a", {
                     className: "bhd-picker-preset-btn",
                     onClick: function() {
                         presetClick(item.value);
                     },
                     children: item.label
-                });
+                }, index);
             })
         });
     };
     // 日期选择确认
     var okClick = function() {
         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) {
@@ -168,148 +231,146 @@ var BhdDatePicker = function(props) {
         onChange && onChange(value, todayString);
         setOpen(false);
     };
-    return /*#__PURE__*/ _jsxs("div", {
+    return /*#__PURE__*/ _jsxs("span", {
         className: "".concat(styles.bhdDatePicker),
         ref: bhdDatePickerRef,
         children: [
-            kind === "single" && /*#__PURE__*/ _jsxs(_Fragment, {
-                children: [
-                    useType === "table" && /*#__PURE__*/ _jsxs("span", {
-                        className: styles.pickerLabel,
-                        onClick: function() {
-                            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: "".concat(className, " ").concat(useType === "table" ? "table-date-picker" : ""),
+                    popupClassName: "".concat(styles.bhdDatePickerPopup, " ").concat(styles.singlePicker, " ").concat(popupClassName || ""),
+                    cellRender: cellRender,
+                    prevIcon: /*#__PURE__*/ _jsx(CustomArrow, {
+                        style: {
+                            transform: "rotate(90deg)"
+                        }
                     }),
-                    /*#__PURE__*/ _jsx(DatePicker, _object_spread_props(_object_spread({}, getConfig()), {
-                        className: "".concat(className, " ").concat(useType === "table" ? "hide" : ""),
-                        popupClassName: "".concat(styles.bhdDatePickerPopup, " ").concat(styles.singlePicker, " ").concat(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: function(date, dateString) {
-                            setSelectedDate(function(prevState) {
-                                selectedDateRef.current = date;
-                                return selectedDateRef.current;
-                            });
-                            setSelectedDateString(function(prevState) {
-                                selectedDateStringRef.current = dateString;
-                                return selectedDateStringRef.current;
-                            });
-                            console.log({
-                                selectedDate: selectedDateRef.current,
-                                selectedDateString: selectedDateStringRef.current
-                            });
-                        },
-                        onOk: function() {
-                            if (showTime) {
-                                setTimeout(function() {
-                                    console.log({
-                                        selectedDate: selectedDateRef.current,
-                                        selectedDateString: selectedDateStringRef.current
-                                    });
-                                    onChange && onChange(selectedDateRef.current, selectedDateStringRef.current);
-                                    setOpen(false);
-                                }, 0);
-                            }
-                            onOk && onOk();
-                        },
-                        onClick: function() {
-                            setOpen(true);
-                            onClick && onClick();
-                        },
-                        onBlur: function() {
-                            okClick();
-                            setOpen(false);
-                            onBlur && onBlur();
-                        },
-                        renderExtraFooter: renderExtraFooter
-                    }))
-                ]
-            }),
-            kind === "range" && /*#__PURE__*/ _jsxs(_Fragment, {
-                children: [
-                    useType === "table" && /*#__PURE__*/ _jsxs("span", {
-                        className: styles.pickerLabel,
-                        onClick: function() {
-                            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: "".concat(className, " ").concat(useType === "table" ? "hide" : ""),
-                        popupClassName: "".concat(styles.bhdDatePickerPopup, " ").concat(styles.rangePicker, " ").concat(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: function() {
-                            setOpen(true);
-                            onClick && onClick();
-                        },
-                        onCalendarChange: function(dates, dateStrings, info) {
-                            setSelectedRangeDate(dates);
-                            setSelectedRangeDateString(dateStrings);
-                        },
-                        onBlur: function() {
-                            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: function(value, mode) {
+                        setPanelMode(mode);
+                    },
+                    mode: panelMode,
+                    open: open,
+                    onOpenChange: function(value) {
+                        // 打开设置默认mode
+                        if (value) {
+                            setDefaultMode();
+                        }
+                    },
+                    showNow: showTime ? showNow : false,
+                    defaultPickerValue: selectedDate,
+                    value: selectedDate,
+                    onChange: function(date, dateString) {
+                        setSelectedDate(function(prevState) {
+                            selectedDateRef.current = date;
+                            return selectedDateRef.current;
+                        });
+                        setSelectedDateString(function(prevState) {
+                            selectedDateStringRef.current = dateString;
+                            return selectedDateStringRef.current;
+                        });
+                    },
+                    onOk: function() {
+                        if (showTime) {
+                            setTimeout(function() {
+                                console.log({
+                                    selectedDate: selectedDateRef.current,
+                                    selectedDateString: selectedDateStringRef.current
+                                });
+                                onChange && onChange(selectedDateRef.current, selectedDateStringRef.current);
                                 setOpen(false);
-                            }
-                            onBlur && onBlur();
-                        },
-                        renderExtraFooter: renderExtraFooter
-                    }))
-                ]
+                            }, 0);
+                        }
+                        onOk && onOk();
+                    },
+                    onClick: function() {
+                        setOpen(true);
+                        onClick && onClick();
+                    },
+                    onBlur: function() {
+                        okClick();
+                        setOpen(false);
+                        onBlur && onBlur();
+                    },
+                    renderExtraFooter: renderExtraFooter
+                }))
+            }),
+            kind === "range" && /*#__PURE__*/ _jsx(_Fragment, {
+                children: /*#__PURE__*/ _jsx(RangePicker, _object_spread_props(_object_spread({}, getConfig()), {
+                    className: "".concat(className, " ").concat(useType === "table" ? "table-date-picker" : ""),
+                    popupClassName: "".concat(styles.bhdDatePickerPopup, " ").concat(styles.rangePicker, " ").concat(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: function(value, mode) {
+                        setRangePanelMode(mode);
+                    },
+                    mode: rangePanelMode,
+                    open: open,
+                    onOpenChange: function(value) {
+                        if (value) {
+                            setDefaultMode();
+                        }
+                        setRangeOpenChange(value);
+                    },
+                    showNow: false,
+                    defaultPickerValue: selectedRangeDate,
+                    value: selectedRangeDate,
+                    onClick: function() {
+                        setOpen(true);
+                        onClick && onClick();
+                    },
+                    onCalendarChange: function(dates, dateStrings, info) {
+                        setSelectedRangeDate(dates);
+                        setSelectedRangeDateString(dateStrings);
+                    },
+                    onBlur: function() {
+                        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: function(panelNode) {
+                        return panelNode;
+                    },
+                    renderExtraFooter: renderExtraFooter
+                }))
             }),
             kind === "extra" && /*#__PURE__*/ _jsx(DatePicker, _object_spread_props(_object_spread({}, getConfig()), {
                 className: "".concat(className, " ").concat(useType === "table" ? "hide" : ""),
@@ -337,8 +398,18 @@ var BhdDatePicker = function(props) {
                 }),
                 disabledDate: disabledDate,
                 allowClear: !extraReadonly,
+                onPanelChange: function(value, mode) {
+                    setPanelMode(mode);
+                },
+                mode: panelMode,
+                onOpenChange: function(value) {
+                    if (value) {
+                        setDefaultMode();
+                    }
+                },
                 open: open,
                 showNow: false,
+                defaultPickerValue: selectedDate,
                 value: selectedDate,
                 onChange: function(date, dateString) {
                     setSelectedDate(date);
@@ -355,10 +426,6 @@ var BhdDatePicker = function(props) {
                     setOpen(false);
                     onBlur && onBlur();
                 },
-                panelRender: function(panelNode) {
-                    console.log(panelNode);
-                    return panelNode;
-                },
                 renderExtraFooter: extraReadonly ? null : renderExtraFooter
             }))
         ]