bhd-components 0.8.1 → 0.9.1

package/es2017/bhdDatePicker/index.js

@@ -0,0 +1,427 @@
+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 styles from "./index.module.less";
+import { Button, DatePicker } from "antd";
+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 ="" , 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;
+        delete config.className;
+        delete config.prevIcon;
+        delete config.nextIcon;
+        delete config.superPrevIcon;
+        delete config.superNextIcon;
+        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;
+        }
+        if (kind === "extra" && picker !== "date") {
+            delete config.extraItems;
+        }
+        if (kind === "extra") {
+            delete config.disabledDate;
+        }
+        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") {
+            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 (info.type === "month") {
+            return /*#__PURE__*/ _jsx("div", {
+                className: `${"bhd-picker-cell-inner"}`,
+                children: months[Number(current.format("M")) - 1] + "月"
+            });
+        }
+        return info.originNode;
+    };
+    //日期禁用
+    const disabledDate = (current)=>{
+        // 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";
+    };
+    // 渲染底部扩展内容
+    const renderExtraFooter = (mode)=>{
+        return !showTime ? /*#__PURE__*/ _jsxs("ul", {
+            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", {
+                    className: "bhd-picker-now",
+                    children: /*#__PURE__*/ _jsx("a", {
+                        className: "bhd-picker-now-btn",
+                        onClick: todayClick,
+                        children: showTime ? "此刻" : "今天"
+                    })
+                }),
+                /*#__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: "确定"
+                    })
+                })
+            ]
+        }) : /*#__PURE__*/ _jsx("ul", {
+            className: "bhd-picker-ranges",
+            children: renderPresets()
+        });
+    };
+    // 渲染预设
+    const renderPresets = ()=>{
+        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);
+                    },
+                    children: item.label
+                }, index);
+            })
+        });
+    };
+    // 日期选择确认
+    const okClick = ()=>{
+        if (kind === "range") {
+            if (selectedRangeDate[0] && selectedRangeDate[1] && selectedRangeDateString[0] && selectedRangeDateString[1]) {
+                onChange && onChange(selectedRangeDate, selectedRangeDateString);
+                setOpen(false);
+            } else {
+                setOpen(true);
+            }
+        } else {
+            if (selectedDate && selectedDateString) {
+                onChange && onChange(selectedDate, selectedDateString);
+                setOpen(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 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);
+    };
+    return /*#__PURE__*/ _jsxs("span", {
+        className: `${styles.bhdDatePicker}`,
+        ref: bhdDatePickerRef,
+        children: [
+            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)"
+                        }
+                    }),
+                    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)=>{
+                        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);
+                            }, 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" : ""}`,
+                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)"
+                    }
+                }),
+                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
+            }))
+        ]
+    });
+};
+export default BhdDatePicker;