bhd-components 0.8.1 → 0.9.1

package/es2017/customerService/screenshotTool.d.ts

@@ -2,6 +2,7 @@
 import "react-image-crop/dist/ReactCrop.css";
 interface data {
     imgBese64: string;
+    screenShotType: number;
     saveScreenshotBese64: (bese64: string) => void;
     cancelScreenshot: () => void;
 }

package/es2017/customerService/screenshotTool.js

@@ -1,29 +1,36 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@ice/jsx-runtime/jsx-runtime";
-import React, { useState, forwardRef } from "react";
+import React, { useState, forwardRef, useEffect } from "react";
 import ReactCrop, { centerCrop, makeAspectCrop } from "react-image-crop";
 import { CloseOutlined } from "@ant-design/icons";
 import { CustomDuihao } from "../icons/index";
 import "react-image-crop/dist/ReactCrop.css";
 import styles from "./index.module.less";
 const ScreenshotTool = /*#__PURE__*/ forwardRef((props, ref)=>{
-    let { imgBese64 , saveScreenshotBese64 , cancelScreenshot  } = props;
+    let { imgBese64 , screenShotType , saveScreenshotBese64 , cancelScreenshot  } = props;
     const [crop, setCrop] = useState();
     const [completedCrop, setCompletedCrop] = useState();
     const [aspect, setAspect] = useState(16 / 9);
+    const [devicePixelRatio, setDevicePixelRatio] = useState(1);
+    const [isFirst, setIsFirst] = useState(true);
     const [btnPosition, setBtnPosition] = useState({
         top: 0,
         left: 0
     });
     const [showBtn, setShowBtn] = useState(false);
+    useEffect(()=>{
+        setDevicePixelRatio(screenShotType === 1 ? window.devicePixelRatio || 1 : 1);
+    }, [
+        screenShotType
+    ]);
     function centerAspectCrop(mediaWidth, mediaHeight, aspect) {
         return centerCrop(makeAspectCrop({
-            unit: '%',
+            unit: "%",
             width: 30
         }, aspect, mediaWidth, mediaHeight), mediaWidth, mediaHeight);
     }
     function onImageLoad(e) {
         if (aspect) {
-            // console.log(aspect,e,'dlvkdfmvlkdfmvdfkl');
+            console.log(aspect, e, "dlvkdfmvlkdfmvdfkl");
             //   const { width, height } = e.currentTarget
             const width = 100;
             const height = 100 * (9 / 16);
@@ -35,17 +42,17 @@ const ScreenshotTool = /*#__PURE__*/ forwardRef((props, ref)=>{
     }
     function saveImage() {
         // 创建一个新的canvas元素
-        var canvas = document.createElement('canvas');
-        var context = canvas.getContext('2d');
+        var canvas = document.createElement("canvas");
+        var context = canvas.getContext("2d");
         // 加载要操作的图片
         var image = new Image();
         image.src = imgBese64; // 将'your_image_url'替换为你自己的图片URL
         // 等待图片加载完成后再进行操作
         image.onload = function() {
-            var x = completedCrop.x; // 起始点x坐标
-            var y = completedCrop.y; // 起始点y坐标
-            var width = completedCrop.width; // 需要裁剪的区域宽度
-            var height = completedCrop.height; // 需要裁剪的区域高度
+            var x = parseInt((completedCrop.x * devicePixelRatio).toString()); // 起始点x坐标
+            var y = parseInt((completedCrop.y * devicePixelRatio).toString()); // 起始点y坐标
+            var width = parseInt((completedCrop.width * devicePixelRatio).toString()); // 需要裁剪的区域宽度
+            var height = parseInt((completedCrop.height * devicePixelRatio).toString()); // 需要裁剪的区域高度
             // 设置canvas大小与裁剪区域相同
             canvas.width = width;
             canvas.height = height;
@@ -66,6 +73,8 @@ const ScreenshotTool = /*#__PURE__*/ forwardRef((props, ref)=>{
         let y = e.y;
         let h = e.height;
         let w = e.width;
+        // 新方案使用
+        //旧方案改成 let top = y + h + (isFirst ? 21 : 8);
         let top = y + h + 8;
         let left = x + w - 88;
         if (top + 42 > window.innerHeight) {
@@ -76,6 +85,7 @@ const ScreenshotTool = /*#__PURE__*/ forwardRef((props, ref)=>{
             left
         });
         setShowBtn(true);
+        setIsFirst(false);
     };
     return /*#__PURE__*/ _jsxs("div", {
         className: styles.screenshot_Modal,
@@ -101,6 +111,7 @@ const ScreenshotTool = /*#__PURE__*/ forwardRef((props, ref)=>{
                 minWidth: 100,
                 children: /*#__PURE__*/ _jsx("img", {
                     alt: "Crop me",
+                    // style={{display:'none'}}
                     src: imgBese64,
                     onLoad: onImageLoad
                 })
@@ -116,8 +127,8 @@ const ScreenshotTool = /*#__PURE__*/ forwardRef((props, ref)=>{
                         onClick: cancelScreenshot,
                         children: /*#__PURE__*/ _jsx(CloseOutlined, {
                             style: {
-                                position: 'relative',
-                                top: '1px'
+                                position: "relative",
+                                top: "1px"
                             }
                         })
                     }),

package/es2017/index.d.ts

@@ -80,3 +80,4 @@ export { default as BhdTipModal } from "./bhdTipModal";
 export { default as BhdSelect } from "./bhdSelect";
 export { default as BhdAppLayout } from "./bhdAppLayout";
 export { default as CustomerService } from "./customerService";
+export { default as BhdDatePicker } from "./bhdDatePicker";

package/es2017/index.js

@@ -85,3 +85,4 @@ export { default as BhdTipModal } from "./bhdTipModal/index"; //提示框
 export { default as BhdSelect } from "./bhdSelect/index"; //封装 bhdSelect
 export { default as BhdAppLayout } from "./bhdAppLayout/index"; //封装 BhdAppLayout
 export { default as CustomerService } from "./customerService/index"; //封装 智能客服
+export { default as BhdDatePicker } from "./bhdDatePicker/index"; //封装 日历组件

package/es2017/theme/variable.less

@@ -76,6 +76,8 @@
 @Gray-09: #262626;
 @Gray-10: #000000;
 
+
+
 /* 变量色值 */
 
 /* "color-background-layout": {
@@ -143,6 +145,16 @@
 
 @color-background-quinary: @Gray-01;
 
+
+/* 
+"color-background-Mask-Tr": {
+    "value": "{Gray-Tr-06}",
+    "type": "color",
+    "description": "蒙层颜色"
+  },
+*/
+
+@color-background-Mask-Tr:@Gray-Tr-06;
 /* 
   "color-background-primary-base": {
     "value": "{Red-06}",
@@ -246,6 +258,13 @@
     "description": "二级边框色"
   }, */
 @color-border-secondary-Tr: @Gray-Tr-04;
+
+/*  "color-border-tertiary": {
+    "value": "{Gray-01}",
+    "type": "color",
+    "description": "三级边框色"
+  }, */
+@color-border-tertiary:@Gray-01;
 /*   "color-border-primary": {
     "value": "{Red-06}",
     "type": "color",
@@ -525,6 +544,14 @@
     }
 */
 @color-icon-error: @Orange-06;
+/* 
+ "color-icon-base": {
+      "value": "$Blue-06",
+      "type": "color",
+      "description": "图标，一级填充色"
+    }
+*/
+@color-icon-base: @Blue-06;
 /* 
  "color-icon-fill": {
       "value": "$Gray-08",

package/esm/bhdDatePicker/index.d.ts

@@ -0,0 +1,16 @@
+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;
+    extraItems?: BhdDateExtraPicker[];
+    extraReadonly?: boolean;
+}
+declare const BhdDatePicker: (props: BhdDatePickerProps) => React.JSX.Element;
+export default BhdDatePicker;

package/esm/bhdDatePicker/index.js

@@ -0,0 +1,434 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+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, useEffect, useRef } from "react";
+import styles from "./index.module.less";
+import { Button, DatePicker } from "antd";
+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, 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("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 _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;
+        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
+    var setDefaultMode = function() {
+        if (kind === "range") {
+            setRangePanelMode([
+                picker || "date",
+                picker || "date"
+            ]);
+        } else {
+            setPanelMode(picker || "date");
+        }
+    };
+    //单元格渲染
+    var cellRender = function(current, info) {
+        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 (info.type === "month") {
+            return /*#__PURE__*/ _jsx("div", {
+                className: "bhd-picker-cell-inner",
+                children: months[Number(current.format("M")) - 1] + "月"
+            });
+        }
+        return info.originNode;
+    };
+    //日期禁用
+    var disabledDate = function(current) {
+        // 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";
+    };
+    // 渲染底部扩展内容
+    var renderExtraFooter = function(mode) {
+        return !showTime ? /*#__PURE__*/ _jsxs("ul", {
+            className: "bhd-picker-ranges",
+            children: [
+                renderPresets(),
+                showNow && (kind === "single" || kind === "extra" && extraItems.filter(function(item) {
+                    return 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()
+        });
+    };
+    // 渲染预设
+    var renderPresets = function() {
+        return /*#__PURE__*/ _jsx("li", {
+            className: "bhd-picker-presets",
+            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[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);
+            }
+        }
+    };
+    var todayClick = function() {
+        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);
+    };
+    //预设点击
+    var presetClick = function(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: "".concat(styles.bhdDatePicker),
+        ref: bhdDatePickerRef,
+        children: [
+            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)"
+                        }
+                    }),
+                    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) {
+                        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);
+                            }, 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" : ""),
+                popupClassName: "".concat(styles.bhdDatePickerPopup, " ").concat(styles.extraPicker, " ").concat(extraReadonly ? styles.readonly : "", " ").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)"
+                    }
+                }),
+                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);
+                    setSelectedDateString(dateString);
+                },
+                onClick: function() {
+                    setOpen(true);
+                    onClick && onClick();
+                },
+                onBlur: function() {
+                    if (!extraReadonly) {
+                        okClick();
+                    }
+                    setOpen(false);
+                    onBlur && onBlur();
+                },
+                renderExtraFooter: extraReadonly ? null : renderExtraFooter
+            }))
+        ]
+    });
+};
+export default BhdDatePicker;