bhd-components 0.8.0 → 0.9.0

package/es2017/bhdDatePicker/index.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import type { Dayjs } from "dayjs";
+export interface BhdDateExtraPicker {
+    date: Dayjs;
+    text: string;
+    status: "selectable" | "noselectable" | "selected";
+}
+interface BhdDatePickerProps {
+    [key: string]: any;
+    kind: "single" | "range" | "extra";
+    useType?: string;
+    label?: React.ReactNode;
+    extraItems?: BhdDateExtraPicker[];
+    extraReadonly?: boolean;
+}
+declare const BhdDatePicker: (props: BhdDatePickerProps) => React.JSX.Element;
+export default BhdDatePicker;

package/es2017/bhdDatePicker/index.js

@@ -0,0 +1,360 @@
+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 styles from "./index.module.less";
+import { Button, DatePicker } from "antd";
+import { CustomArrow, CalendarOutlined } from "../icons/index";
+import dayjs from "dayjs";
+const { RangePicker  } = DatePicker;
+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;
+    const bhdDatePickerRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    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 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;
+        if (kind === "single" || kind === "extra") {
+            delete config.value;
+        }
+        if (kind === "extra" && picker !== "date") {
+            delete config.extraItems;
+        }
+        if (kind === "extra") {
+            delete config.disabledDate;
+        }
+        return config;
+    };
+    //单元格渲染
+    const cellRender = (current, info)=>{
+        if (info.type !== "date") {
+            return info.originNode;
+        }
+        if (typeof current === "number" || typeof current === "string") {
+            return /*#__PURE__*/ _jsx("div", {
+                className: "bhd-picker-cell-inner",
+                children: 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"));
+        }
+        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
+                    })
+                ]
+            })
+        });
+    };
+    //日期禁用
+    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"));
+        }
+        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)=>{
+                return /*#__PURE__*/ _jsx("a", {
+                    className: "bhd-picker-preset-btn",
+                    onClick: ()=>{
+                        presetClick(item.value);
+                    },
+                    children: item.label
+                });
+            })
+        });
+    };
+    // 日期选择确认
+    const okClick = ()=>{
+        if (kind === "range") {
+            if (selectedRangeDate && selectedRangeDateString) {
+                onChange && onChange(selectedRangeDate, selectedRangeDateString);
+                setOpen(false);
+            }
+        } 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("div", {
+        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, {})
+                        ]
+                    }),
+                    /*#__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, {})
+                        ]
+                    }),
+                    /*#__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])) {
+                                setOpen(false);
+                            }
+                            onBlur && onBlur();
+                        },
+                        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,
+                open: open,
+                showNow: false,
+                value: selectedDate,
+                onChange: (date, dateString)=>{
+                    setSelectedDate(date);
+                    setSelectedDateString(dateString);
+                },
+                onClick: ()=>{
+                    setOpen(true);
+                    onClick && onClick();
+                },
+                onBlur: ()=>{
+                    if (!extraReadonly) {
+                        okClick();
+                    }
+                    setOpen(false);
+                    onBlur && onBlur();
+                },
+                panelRender: (panelNode)=>{
+                    console.log(panelNode);
+                    return panelNode;
+                },
+                renderExtraFooter: extraReadonly ? null : renderExtraFooter
+            }))
+        ]
+    });
+};
+export default BhdDatePicker;