bhd-components 0.9.4 → 0.9.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -1
- package/dist/index.esm.es5.development.css +1432 -1408
- package/dist/index.esm.es5.development.js +295 -90
- package/dist/index.esm.es5.production.css +1 -1
- package/dist/index.esm.es5.production.js +1 -1
- package/dist/vendor.esm.es5.development.js +2 -2
- package/dist/vendor.esm.es5.production.js +2 -2
- package/es2017/bhdDatePicker/index.d.ts +3 -1
- package/es2017/bhdDatePicker/index.js +291 -86
- package/es2017/bhdDatePicker/index.module.less +37 -13
- package/es2017/customerService/common.module.less +1 -1
- package/es2017/customerService/index.module.less +24 -3
- package/es2017/customerService/index2.module.less +22 -3
- package/esm/bhdDatePicker/index.d.ts +3 -1
- package/esm/bhdDatePicker/index.js +293 -89
- package/esm/bhdDatePicker/index.module.less +37 -13
- package/esm/customerService/common.module.less +1 -1
- package/esm/customerService/index.module.less +24 -3
- package/esm/customerService/index2.module.less +22 -3
- package/package.json +1 -1
|
@@ -10,6 +10,8 @@ interface BhdDatePickerProps {
|
|
|
10
10
|
useType?: string;
|
|
11
11
|
extraItems?: BhdDateExtraPicker[];
|
|
12
12
|
extraReadonly?: boolean;
|
|
13
|
+
dropdownClassName?: string;
|
|
14
|
+
needConfirm?: boolean;
|
|
13
15
|
}
|
|
14
|
-
declare const BhdDatePicker:
|
|
16
|
+
declare const BhdDatePicker: React.ForwardRefExoticComponent<Omit<BhdDatePickerProps, "ref"> & React.RefAttributes<unknown>>;
|
|
15
17
|
export default BhdDatePicker;
|
|
@@ -2,7 +2,7 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
|
|
|
2
2
|
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
|
|
3
3
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ice/jsx-runtime/jsx-runtime";
|
|
4
4
|
import * as React from "react";
|
|
5
|
-
import { useState, useEffect, useRef, useCallback } from "react";
|
|
5
|
+
import { useState, useEffect, useRef, useCallback, forwardRef, useImperativeHandle } from "react";
|
|
6
6
|
import styles from "./index.module.less";
|
|
7
7
|
import { ConfigProvider, Button, DatePicker } from "antd";
|
|
8
8
|
import { CustomArrow } from "../icons";
|
|
@@ -25,7 +25,7 @@ let months = [
|
|
|
25
25
|
"十二月"
|
|
26
26
|
];
|
|
27
27
|
//January_February_March_April_May_June_July_August_September_October_November_December
|
|
28
|
-
const BhdDatePicker = (props)=>{
|
|
28
|
+
const BhdDatePicker = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
29
29
|
const lang = ConfigProvider.lang === "en" ? "en_US" : "zh_CN";
|
|
30
30
|
// if (lang === "en_US") {
|
|
31
31
|
// const enUS = require("dayjs/locale/en");
|
|
@@ -64,50 +64,87 @@ const BhdDatePicker = (props)=>{
|
|
|
64
64
|
}
|
|
65
65
|
};
|
|
66
66
|
// 自己组件内使用的，或者自己处理的
|
|
67
|
-
let { kind = "single", extraItems, extraReadonly = false, useType = "", open = false, mode, picker, value
|
|
67
|
+
let { kind = "single", extraItems, extraReadonly = false, useType = "", needConfirm = true, open = false, mode, picker, value, format = getDefaultFormat(), presets = [], className, popupClassName, dropdownClassName, showTime, showNow = true, showToday = true, allowClear = true, onClick, onBlur, onChange, onOk, // onCalendarChange,
|
|
68
|
+
onOpenChange, onPanelChange, disabledDate, cellRender, renderExtraFooter } = props;
|
|
68
69
|
const bhdDatePickerRef = useRef(null);
|
|
70
|
+
const pickerRef = useRef(null);
|
|
69
71
|
const [panelOpen, setPanelOpen] = useState(open);
|
|
70
72
|
const [panelMode, setPanelMode] = useState("date");
|
|
71
73
|
const [rangePanelMode, setRangePanelMode] = useState([
|
|
72
74
|
"date",
|
|
73
75
|
"date"
|
|
74
76
|
]);
|
|
75
|
-
const [selectedDate, setSelectedDate] = useState(
|
|
76
|
-
const [selectedDateString, setSelectedDateString] = useState(
|
|
77
|
-
const selectedDateRef = useRef(
|
|
78
|
-
const selectedDateStringRef = useRef(
|
|
79
|
-
const [selectedRangeDate, setSelectedRangeDate] = useState(
|
|
80
|
-
|
|
81
|
-
|
|
77
|
+
const [selectedDate, setSelectedDate] = useState(null);
|
|
78
|
+
const [selectedDateString, setSelectedDateString] = useState("");
|
|
79
|
+
const selectedDateRef = useRef(null);
|
|
80
|
+
const selectedDateStringRef = useRef("");
|
|
81
|
+
const [selectedRangeDate, setSelectedRangeDate] = useState([
|
|
82
|
+
null,
|
|
83
|
+
null
|
|
84
|
+
]);
|
|
85
|
+
const [selectedRangeDateString, setSelectedRangeDateString] = useState([
|
|
86
|
+
"",
|
|
87
|
+
""
|
|
88
|
+
]);
|
|
89
|
+
const selectedRangeDateRef = useRef([
|
|
90
|
+
null,
|
|
91
|
+
null
|
|
92
|
+
]);
|
|
93
|
+
const selectedRangeDateStringRef = useRef([
|
|
94
|
+
"",
|
|
95
|
+
""
|
|
96
|
+
]);
|
|
97
|
+
const [panelOpenChange, setPanelOpenChange] = useState(false); // 用于失去焦点后，判断是否关闭
|
|
82
98
|
const isChange = useRef(false);
|
|
99
|
+
const selectRange = useRef([]);
|
|
100
|
+
useImperativeHandle(ref, ()=>{
|
|
101
|
+
return {};
|
|
102
|
+
});
|
|
83
103
|
useEffect(()=>{
|
|
84
104
|
setDefaultMode();
|
|
85
|
-
if (kind === "range") {
|
|
86
|
-
if (selectedRangeDate[0] && selectedRangeDate[1]) {
|
|
87
|
-
setSelectedRangeDateString([
|
|
88
|
-
selectedRangeDate[0].format(format),
|
|
89
|
-
selectedRangeDate[1].format(format)
|
|
90
|
-
]);
|
|
91
|
-
}
|
|
92
|
-
} else {
|
|
93
|
-
if (selectedDate) {
|
|
94
|
-
setSelectedDateString((prevState)=>{
|
|
95
|
-
selectedDateStringRef.current = selectedDate.format(format);
|
|
96
|
-
return selectedDateStringRef.current;
|
|
97
|
-
});
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
105
|
return ()=>{
|
|
101
|
-
var _document_getElementsByClassName__getElementsByClassName, _document_getElementsByClassName_, _document_getElementsByClassName,
|
|
102
|
-
const
|
|
103
|
-
(
|
|
106
|
+
var _document_getElementsByClassName__getElementsByClassName, _document_getElementsByClassName_, _document_getElementsByClassName, _todayBtn, _document_getElementsByClassName__getElementsByClassName1, _document_getElementsByClassName_1, _document_getElementsByClassName1, _nowBtn;
|
|
107
|
+
const todayBtn = (_document_getElementsByClassName = document.getElementsByClassName(id)) === null || _document_getElementsByClassName === void 0 ? void 0 : (_document_getElementsByClassName_ = _document_getElementsByClassName[0]) === null || _document_getElementsByClassName_ === void 0 ? void 0 : (_document_getElementsByClassName__getElementsByClassName = _document_getElementsByClassName_.getElementsByClassName("bhd-picker-today-btn")) === null || _document_getElementsByClassName__getElementsByClassName === void 0 ? void 0 : _document_getElementsByClassName__getElementsByClassName[0];
|
|
108
|
+
(_todayBtn = todayBtn) === null || _todayBtn === void 0 ? void 0 : _todayBtn.removeEventListener("click", todayClick);
|
|
109
|
+
const nowBtn = (_document_getElementsByClassName1 = document.getElementsByClassName(id)) === null || _document_getElementsByClassName1 === void 0 ? void 0 : (_document_getElementsByClassName_1 = _document_getElementsByClassName1[0]) === null || _document_getElementsByClassName_1 === void 0 ? void 0 : (_document_getElementsByClassName__getElementsByClassName1 = _document_getElementsByClassName_1.getElementsByClassName("bhd-picker-now-btn")) === null || _document_getElementsByClassName__getElementsByClassName1 === void 0 ? void 0 : _document_getElementsByClassName__getElementsByClassName1[0];
|
|
110
|
+
(_nowBtn = nowBtn) === null || _nowBtn === void 0 ? void 0 : _nowBtn.removeEventListener("click", todayClick);
|
|
104
111
|
};
|
|
105
112
|
}, []);
|
|
106
113
|
useEffect(()=>{
|
|
107
|
-
|
|
114
|
+
if (kind === "range") {
|
|
115
|
+
setSelectedRangeDate((prevState)=>{
|
|
116
|
+
selectedRangeDateRef.current = value || [
|
|
117
|
+
null,
|
|
118
|
+
null
|
|
119
|
+
];
|
|
120
|
+
return selectedRangeDateRef.current;
|
|
121
|
+
});
|
|
122
|
+
setSelectedRangeDateString((prevState)=>{
|
|
123
|
+
var _selectedRangeDateRef_current_, _selectedRangeDateRef_current_1;
|
|
124
|
+
selectedRangeDateStringRef.current = [
|
|
125
|
+
((_selectedRangeDateRef_current_ = selectedRangeDateRef.current[0]) === null || _selectedRangeDateRef_current_ === void 0 ? void 0 : _selectedRangeDateRef_current_.format(format)) || "",
|
|
126
|
+
((_selectedRangeDateRef_current_1 = selectedRangeDateRef.current[1]) === null || _selectedRangeDateRef_current_1 === void 0 ? void 0 : _selectedRangeDateRef_current_1.format(format)) || ""
|
|
127
|
+
];
|
|
128
|
+
return selectedRangeDateStringRef.current;
|
|
129
|
+
});
|
|
130
|
+
} else {
|
|
131
|
+
setSelectedDate((prevState)=>{
|
|
132
|
+
selectedDateRef.current = value || null;
|
|
133
|
+
return selectedDateRef.current;
|
|
134
|
+
});
|
|
135
|
+
setSelectedDateString((prevState)=>{
|
|
136
|
+
var _selectedDateRef_current;
|
|
137
|
+
selectedDateStringRef.current = ((_selectedDateRef_current = selectedDateRef.current) === null || _selectedDateRef_current === void 0 ? void 0 : _selectedDateRef_current.format(format)) || "";
|
|
138
|
+
return selectedDateStringRef.current;
|
|
139
|
+
});
|
|
140
|
+
}
|
|
141
|
+
}, [
|
|
142
|
+
value
|
|
143
|
+
]);
|
|
144
|
+
useEffect(()=>{
|
|
145
|
+
setPanelOpen(open);
|
|
108
146
|
}, [
|
|
109
|
-
|
|
110
|
-
selectedRangeDate
|
|
147
|
+
open
|
|
111
148
|
]);
|
|
112
149
|
// 传给 DatePicker 的props参数
|
|
113
150
|
const getConfig = ()=>{
|
|
@@ -138,6 +175,7 @@ const BhdDatePicker = (props)=>{
|
|
|
138
175
|
popupClassName,
|
|
139
176
|
allowClear,
|
|
140
177
|
showTime,
|
|
178
|
+
showToday,
|
|
141
179
|
cellRender,
|
|
142
180
|
renderExtraFooter: selfRenderExtraFooter
|
|
143
181
|
});
|
|
@@ -151,10 +189,19 @@ const BhdDatePicker = (props)=>{
|
|
|
151
189
|
delete config.onChange;
|
|
152
190
|
delete config.useType; // 组件自己定义的
|
|
153
191
|
delete config.presets; // 必须删掉，因为预设由官网的左侧换到底部
|
|
154
|
-
delete config.
|
|
192
|
+
delete config.dropdownClassName;
|
|
155
193
|
if (!config.cellRender) {
|
|
156
194
|
config.cellRender = selfCellRender;
|
|
157
195
|
}
|
|
196
|
+
// 判断是否显示今天按钮
|
|
197
|
+
if (!isRenderToday()) {
|
|
198
|
+
config.showToday = false;
|
|
199
|
+
showToday = false;
|
|
200
|
+
}
|
|
201
|
+
// 不显示今天、预设、确定按钮
|
|
202
|
+
if (!isSelfRenderExtraFooter()) {
|
|
203
|
+
delete config.renderExtraFooter;
|
|
204
|
+
}
|
|
158
205
|
// 单选
|
|
159
206
|
if (kind === "single") {
|
|
160
207
|
config.popupClassName = `
|
|
@@ -173,7 +220,7 @@ const BhdDatePicker = (props)=>{
|
|
|
173
220
|
config.allowClear = false; // 日程安排查看时，不显示清除按钮
|
|
174
221
|
}
|
|
175
222
|
}
|
|
176
|
-
config.popupClassName = `${config.popupClassName} ${id}`;
|
|
223
|
+
config.popupClassName = `${config.popupClassName} ${dropdownClassName} ${needConfirm ? "" : styles.noNeedConfirm} ${id}`;
|
|
177
224
|
return config;
|
|
178
225
|
};
|
|
179
226
|
// 设置默认mode
|
|
@@ -244,25 +291,24 @@ const BhdDatePicker = (props)=>{
|
|
|
244
291
|
};
|
|
245
292
|
// 渲染底部扩展内容（包括确定按钮、今天按钮、预设、传入的底部扩展）
|
|
246
293
|
const selfRenderExtraFooter = (mode)=>{
|
|
247
|
-
var _selectedRangeDate, _selectedRangeDate1;
|
|
294
|
+
var _selectedRangeDate, _selectedRangeDate1, _selectedRangeDate2, _selectedRangeDate3;
|
|
248
295
|
return /*#__PURE__*/ _jsxs(_Fragment, {
|
|
249
296
|
children: [
|
|
250
|
-
renderExtraFooter && /*#__PURE__*/ _jsx("div", {
|
|
251
|
-
className: "bhddatepicker-picker-footer-extra-extend",
|
|
252
|
-
children: renderExtraFooter(mode)
|
|
253
|
-
}),
|
|
254
297
|
!showTime ? /*#__PURE__*/ _jsx(_Fragment, {
|
|
255
|
-
children: /*#__PURE__*/ _jsxs("ul", {
|
|
298
|
+
children: ((picker || "date") === "date" && showToday || presets && presets.length > 0 || needConfirm) && /*#__PURE__*/ _jsxs("ul", {
|
|
256
299
|
className: "bhd-picker-ranges",
|
|
257
300
|
children: [
|
|
258
301
|
selfRenderPresets(),
|
|
259
|
-
renderToday(),
|
|
260
|
-
/*#__PURE__*/ _jsx("li", {
|
|
302
|
+
renderToday(mode),
|
|
303
|
+
needConfirm && /*#__PURE__*/ _jsx("li", {
|
|
261
304
|
className: "bhd-picker-ok",
|
|
262
305
|
children: /*#__PURE__*/ _jsx(Button, {
|
|
263
306
|
type: "primary",
|
|
264
307
|
disabled: kind === "range" ? !(((_selectedRangeDate = selectedRangeDate) === null || _selectedRangeDate === void 0 ? void 0 : _selectedRangeDate[0]) && ((_selectedRangeDate1 = selectedRangeDate) === null || _selectedRangeDate1 === void 0 ? void 0 : _selectedRangeDate1[1])) : !(selectedDate && selectedDateString),
|
|
265
|
-
|
|
308
|
+
className: `${(kind === "range" ? !(((_selectedRangeDate2 = selectedRangeDate) === null || _selectedRangeDate2 === void 0 ? void 0 : _selectedRangeDate2[0]) && ((_selectedRangeDate3 = selectedRangeDate) === null || _selectedRangeDate3 === void 0 ? void 0 : _selectedRangeDate3[1])) : !(selectedDate && selectedDateString)) ? "disabled" : ""}`,
|
|
309
|
+
onClick: ()=>{
|
|
310
|
+
okClick();
|
|
311
|
+
},
|
|
266
312
|
children: i18Conversion("确定")
|
|
267
313
|
})
|
|
268
314
|
})
|
|
@@ -271,44 +317,90 @@ const BhdDatePicker = (props)=>{
|
|
|
271
317
|
}) : /*#__PURE__*/ _jsx("ul", {
|
|
272
318
|
className: `bhd-picker-ranges showPresets ${showNow ? "showNow" : ""}`,
|
|
273
319
|
children: selfRenderPresets()
|
|
320
|
+
}),
|
|
321
|
+
renderExtraFooter && /*#__PURE__*/ _jsx("div", {
|
|
322
|
+
className: "bhddatepicker-picker-footer-extra-extend",
|
|
323
|
+
children: renderExtraFooter(mode)
|
|
274
324
|
})
|
|
275
325
|
]
|
|
276
326
|
});
|
|
277
327
|
};
|
|
278
|
-
//
|
|
279
|
-
const
|
|
280
|
-
|
|
328
|
+
// 判断是否显示今天按钮、预设、确定按钮、传入的底部扩展
|
|
329
|
+
const isSelfRenderExtraFooter = ()=>{
|
|
330
|
+
let result = false;
|
|
331
|
+
if (kind === "range") {
|
|
332
|
+
result = presets && presets.length > 0 || renderExtraFooter || needConfirm;
|
|
333
|
+
} else {
|
|
334
|
+
result = isRenderToday() || presets && presets.length > 0 || renderExtraFooter || needConfirm;
|
|
335
|
+
}
|
|
336
|
+
return result;
|
|
337
|
+
};
|
|
338
|
+
//判断是否显示今天按钮
|
|
339
|
+
const isRenderToday = ()=>{
|
|
281
340
|
if (showToday) {
|
|
282
|
-
|
|
341
|
+
if (kind === "single" && panelMode === "date") {
|
|
342
|
+
return true;
|
|
343
|
+
}
|
|
283
344
|
// 日程安排时： extraItems中今天是否是可选或者已选择状态
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
if (
|
|
288
|
-
return
|
|
289
|
-
className: "bhd-picker-now",
|
|
290
|
-
children: /*#__PURE__*/ _jsx("a", {
|
|
291
|
-
className: "bhd-picker-now-btn",
|
|
292
|
-
style: {
|
|
293
|
-
visibility: "hidden"
|
|
294
|
-
},
|
|
295
|
-
onClick: todayClick,
|
|
296
|
-
children: i18Conversion("今天")
|
|
297
|
-
})
|
|
298
|
-
});
|
|
345
|
+
if (kind === "extra") {
|
|
346
|
+
var _extraItems;
|
|
347
|
+
let hasToday = ((_extraItems = extraItems) === null || _extraItems === void 0 ? void 0 : _extraItems.filter((item)=>item.status !== "noselectable" && item.date.format("YYYYMMDD") === getToday()).length) > 0;
|
|
348
|
+
if (hasToday && panelMode === "date") {
|
|
349
|
+
return true;
|
|
299
350
|
}
|
|
300
351
|
}
|
|
301
352
|
}
|
|
302
|
-
return
|
|
353
|
+
return false;
|
|
354
|
+
};
|
|
355
|
+
// 渲染今天
|
|
356
|
+
const renderToday = (mode)=>{
|
|
357
|
+
// // 显示Today
|
|
358
|
+
// if (showToday) {
|
|
359
|
+
// // 日程安排时： extraItems中今天是否是可选或者已选择状态
|
|
360
|
+
// let hasNow =
|
|
361
|
+
// extraItems?.filter(
|
|
362
|
+
// (item) =>
|
|
363
|
+
// item.status !== "noselectable" &&
|
|
364
|
+
// // item.date.format(format) === dayjs().format(format)
|
|
365
|
+
// item.date.format("YYYYMMDD") === getToday()
|
|
366
|
+
// ).length > 0;
|
|
367
|
+
// if (kind === "single" || (kind === "extra" && hasNow)) {
|
|
368
|
+
// if (mode === "date") {
|
|
369
|
+
// return (
|
|
370
|
+
// <li className="bhd-picker-now">
|
|
371
|
+
// <a
|
|
372
|
+
// className="bhd-picker-now-btn"
|
|
373
|
+
// style={{ visibility: "hidden" }}
|
|
374
|
+
// onClick={todayClick}
|
|
375
|
+
// >
|
|
376
|
+
// {i18Conversion("今天")}
|
|
377
|
+
// </a>
|
|
378
|
+
// </li>
|
|
379
|
+
// );
|
|
380
|
+
// }
|
|
381
|
+
// }
|
|
382
|
+
// }
|
|
383
|
+
// return null;
|
|
384
|
+
return isRenderToday() ? /*#__PURE__*/ _jsx("li", {
|
|
385
|
+
className: "bhd-picker-now",
|
|
386
|
+
children: /*#__PURE__*/ _jsx("a", {
|
|
387
|
+
className: "bhd-picker-now-btn",
|
|
388
|
+
style: {
|
|
389
|
+
visibility: "hidden"
|
|
390
|
+
},
|
|
391
|
+
onClick: todayClick,
|
|
392
|
+
children: i18Conversion("今天")
|
|
393
|
+
})
|
|
394
|
+
}) : null;
|
|
303
395
|
};
|
|
304
396
|
// 获取到年月日
|
|
305
397
|
const getToday = ()=>{
|
|
306
398
|
const date = new Date();
|
|
307
|
-
return date.getFullYear().toString() + date.getMonth().toString().padStart(2, "0") + date.
|
|
399
|
+
return date.getFullYear().toString() + (date.getMonth() + 1).toString().padStart(2, "0") + date.getDate().toString().padStart(2, "0");
|
|
308
400
|
};
|
|
309
401
|
// 渲染预设
|
|
310
402
|
const selfRenderPresets = ()=>{
|
|
311
|
-
return /*#__PURE__*/ _jsx("li", {
|
|
403
|
+
return presets && presets.length > 0 ? /*#__PURE__*/ _jsx("li", {
|
|
312
404
|
className: "bhd-picker-presets",
|
|
313
405
|
children: presets.map((item, index)=>{
|
|
314
406
|
return /*#__PURE__*/ _jsx("a", {
|
|
@@ -319,20 +411,31 @@ const BhdDatePicker = (props)=>{
|
|
|
319
411
|
children: item.label
|
|
320
412
|
}, index);
|
|
321
413
|
})
|
|
322
|
-
});
|
|
414
|
+
}) : null;
|
|
323
415
|
};
|
|
324
416
|
// 日期选择确认
|
|
325
417
|
const okClick = ()=>{
|
|
326
418
|
if (kind === "range") {
|
|
327
|
-
|
|
328
|
-
|
|
419
|
+
var _selectedRangeDateRef_current, _selectedRangeDateRef_current1, _selectedRangeDateStringRef_current, _selectedRangeDateStringRef_current1;
|
|
420
|
+
if (((_selectedRangeDateRef_current = selectedRangeDateRef.current) === null || _selectedRangeDateRef_current === void 0 ? void 0 : _selectedRangeDateRef_current[0]) && ((_selectedRangeDateRef_current1 = selectedRangeDateRef.current) === null || _selectedRangeDateRef_current1 === void 0 ? void 0 : _selectedRangeDateRef_current1[1]) && ((_selectedRangeDateStringRef_current = selectedRangeDateStringRef.current) === null || _selectedRangeDateStringRef_current === void 0 ? void 0 : _selectedRangeDateStringRef_current[0]) && ((_selectedRangeDateStringRef_current1 = selectedRangeDateStringRef.current) === null || _selectedRangeDateStringRef_current1 === void 0 ? void 0 : _selectedRangeDateStringRef_current1[1])) {
|
|
421
|
+
if (isChange.current) {
|
|
422
|
+
onChange && onChange(selectedRangeDateRef.current, selectedRangeDateStringRef.current);
|
|
423
|
+
isChange.current = false;
|
|
424
|
+
// if (pickerRef.current) {
|
|
425
|
+
// pickerRef.current.blur();
|
|
426
|
+
// }
|
|
427
|
+
}
|
|
329
428
|
setPanelOpen(false);
|
|
330
|
-
} else {
|
|
331
|
-
setPanelOpen(true);
|
|
332
429
|
}
|
|
333
430
|
} else {
|
|
334
431
|
if (selectedDateRef.current && selectedDateStringRef.current) {
|
|
335
|
-
|
|
432
|
+
if (isChange.current) {
|
|
433
|
+
onChange && onChange(selectedDateRef.current, selectedDateStringRef.current);
|
|
434
|
+
isChange.current = false;
|
|
435
|
+
// if (pickerRef.current) {
|
|
436
|
+
// pickerRef.current.blur();
|
|
437
|
+
// }
|
|
438
|
+
}
|
|
336
439
|
setPanelOpen(false);
|
|
337
440
|
}
|
|
338
441
|
}
|
|
@@ -357,17 +460,36 @@ const BhdDatePicker = (props)=>{
|
|
|
357
460
|
}
|
|
358
461
|
}
|
|
359
462
|
};
|
|
463
|
+
const nowClickEventListener = (value)=>{
|
|
464
|
+
if (!value) return;
|
|
465
|
+
if (showTime) {
|
|
466
|
+
var _document_getElementsByClassName__getElementsByClassName, _document_getElementsByClassName_, _document_getElementsByClassName;
|
|
467
|
+
const btn = (_document_getElementsByClassName = document.getElementsByClassName(id)) === null || _document_getElementsByClassName === void 0 ? void 0 : (_document_getElementsByClassName_ = _document_getElementsByClassName[0]) === null || _document_getElementsByClassName_ === void 0 ? void 0 : (_document_getElementsByClassName__getElementsByClassName = _document_getElementsByClassName_.getElementsByClassName("bhd-picker-now-btn")) === null || _document_getElementsByClassName__getElementsByClassName === void 0 ? void 0 : _document_getElementsByClassName__getElementsByClassName[0];
|
|
468
|
+
if (value) {
|
|
469
|
+
var _btn, _btn1;
|
|
470
|
+
(_btn = btn) === null || _btn === void 0 ? void 0 : _btn.removeEventListener("click", todayClick);
|
|
471
|
+
(_btn1 = btn) === null || _btn1 === void 0 ? void 0 : _btn1.addEventListener("click", todayClick, {
|
|
472
|
+
once: true
|
|
473
|
+
});
|
|
474
|
+
}
|
|
475
|
+
}
|
|
476
|
+
};
|
|
360
477
|
//预设点击
|
|
361
478
|
const presetClick = (info)=>{
|
|
362
|
-
console.log(typeof info.value);
|
|
363
479
|
const value = typeof info.value === "function" ? info.value() : info.value;
|
|
364
480
|
if (kind === "range") {
|
|
365
481
|
const valueString = [
|
|
366
482
|
value[0].format(format),
|
|
367
483
|
value[1].format(format)
|
|
368
484
|
];
|
|
369
|
-
setSelectedRangeDate(
|
|
370
|
-
|
|
485
|
+
setSelectedRangeDate((prevState)=>{
|
|
486
|
+
selectedRangeDateRef.current = value;
|
|
487
|
+
return selectedRangeDateRef.current;
|
|
488
|
+
});
|
|
489
|
+
setSelectedRangeDateString((prevState)=>{
|
|
490
|
+
selectedRangeDateStringRef.current = valueString;
|
|
491
|
+
return selectedRangeDateStringRef.current;
|
|
492
|
+
});
|
|
371
493
|
onChange && onChange(value, valueString);
|
|
372
494
|
setPanelOpen(false);
|
|
373
495
|
} else {
|
|
@@ -390,6 +512,7 @@ const BhdDatePicker = (props)=>{
|
|
|
390
512
|
children: [
|
|
391
513
|
(kind === "single" || kind === "extra") && /*#__PURE__*/ _jsx(_Fragment, {
|
|
392
514
|
children: /*#__PURE__*/ _jsx(DatePicker, _object_spread_props(_object_spread({}, getConfig()), {
|
|
515
|
+
ref: pickerRef,
|
|
393
516
|
id: id,
|
|
394
517
|
value: selectedDate,
|
|
395
518
|
mode: panelMode,
|
|
@@ -400,10 +523,12 @@ const BhdDatePicker = (props)=>{
|
|
|
400
523
|
onPanelChange && onPanelChange(value, mode);
|
|
401
524
|
},
|
|
402
525
|
onOpenChange: (value)=>{
|
|
526
|
+
setPanelOpenChange(value);
|
|
403
527
|
// 打开设置默认mode
|
|
404
528
|
if (value) {
|
|
405
529
|
setDefaultMode();
|
|
406
530
|
todayClickEventListener(value);
|
|
531
|
+
nowClickEventListener(value);
|
|
407
532
|
}
|
|
408
533
|
onOpenChange && onOpenChange(value);
|
|
409
534
|
},
|
|
@@ -416,6 +541,12 @@ const BhdDatePicker = (props)=>{
|
|
|
416
541
|
selectedDateStringRef.current = dateString;
|
|
417
542
|
return selectedDateStringRef.current;
|
|
418
543
|
});
|
|
544
|
+
isChange.current = true;
|
|
545
|
+
if (!needConfirm) {
|
|
546
|
+
setTimeout(()=>{
|
|
547
|
+
okClick();
|
|
548
|
+
}, 0);
|
|
549
|
+
}
|
|
419
550
|
},
|
|
420
551
|
onOk: (date)=>{
|
|
421
552
|
if (showTime) {
|
|
@@ -431,14 +562,27 @@ const BhdDatePicker = (props)=>{
|
|
|
431
562
|
onClick && onClick(e);
|
|
432
563
|
},
|
|
433
564
|
onBlur: (e)=>{
|
|
434
|
-
|
|
435
|
-
|
|
565
|
+
if (needConfirm) {
|
|
566
|
+
var _e_relatedTarget_classList, _e_relatedTarget;
|
|
567
|
+
okClick(); // 面板区域内失去焦点时
|
|
568
|
+
if ((_e_relatedTarget = e.relatedTarget) === null || _e_relatedTarget === void 0 ? void 0 : (_e_relatedTarget_classList = _e_relatedTarget.classList) === null || _e_relatedTarget_classList === void 0 ? void 0 : _e_relatedTarget_classList.value.includes("bhd-picker-panel")) {
|
|
569
|
+
if (pickerRef.current) {
|
|
570
|
+
pickerRef.current.focus();
|
|
571
|
+
}
|
|
572
|
+
setPanelOpen(true);
|
|
573
|
+
} else {
|
|
574
|
+
setPanelOpen(false);
|
|
575
|
+
}
|
|
576
|
+
} else {
|
|
577
|
+
setPanelOpen(false);
|
|
578
|
+
}
|
|
436
579
|
onBlur && onBlur(e);
|
|
437
580
|
}
|
|
438
581
|
}))
|
|
439
582
|
}),
|
|
440
583
|
kind === "range" && /*#__PURE__*/ _jsx(_Fragment, {
|
|
441
584
|
children: /*#__PURE__*/ _jsx(RangePicker, _object_spread_props(_object_spread({}, getConfig()), {
|
|
585
|
+
ref: pickerRef,
|
|
442
586
|
value: selectedRangeDate,
|
|
443
587
|
mode: rangePanelMode,
|
|
444
588
|
open: panelOpen,
|
|
@@ -448,31 +592,92 @@ const BhdDatePicker = (props)=>{
|
|
|
448
592
|
onPanelChange && onPanelChange(value, mode);
|
|
449
593
|
},
|
|
450
594
|
onOpenChange: (value)=>{
|
|
595
|
+
setPanelOpenChange(value);
|
|
451
596
|
if (value) {
|
|
452
597
|
setDefaultMode();
|
|
453
598
|
}
|
|
454
599
|
if (showTime) {
|
|
455
600
|
setPanelOpen(value);
|
|
456
601
|
}
|
|
457
|
-
setRangeOpenChange(value);
|
|
458
602
|
onOpenChange && onOpenChange(value);
|
|
459
603
|
},
|
|
460
604
|
onClick: (e)=>{
|
|
461
605
|
setPanelOpen(true);
|
|
606
|
+
selectRange.current = [];
|
|
462
607
|
onClick && onClick(e);
|
|
463
608
|
},
|
|
609
|
+
onChange: (dates, dateStrings)=>{
|
|
610
|
+
// 清空的时候
|
|
611
|
+
if (dates === null) {
|
|
612
|
+
setSelectedRangeDate((prevState)=>{
|
|
613
|
+
selectedRangeDateRef.current = [
|
|
614
|
+
null,
|
|
615
|
+
null
|
|
616
|
+
];
|
|
617
|
+
return selectedRangeDateRef.current;
|
|
618
|
+
});
|
|
619
|
+
setSelectedRangeDateString((prevState)=>{
|
|
620
|
+
selectedRangeDateStringRef.current = [
|
|
621
|
+
"",
|
|
622
|
+
""
|
|
623
|
+
];
|
|
624
|
+
return selectedRangeDateStringRef.current;
|
|
625
|
+
});
|
|
626
|
+
setPanelOpen(false);
|
|
627
|
+
onChange && onChange([
|
|
628
|
+
null,
|
|
629
|
+
null
|
|
630
|
+
], [
|
|
631
|
+
"",
|
|
632
|
+
""
|
|
633
|
+
]);
|
|
634
|
+
}
|
|
635
|
+
},
|
|
464
636
|
onCalendarChange: (dates, dateStrings, info)=>{
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
637
|
+
var _dates, _dates1;
|
|
638
|
+
setSelectedRangeDate((prevState)=>{
|
|
639
|
+
selectedRangeDateRef.current = dates;
|
|
640
|
+
return selectedRangeDateRef.current;
|
|
641
|
+
});
|
|
642
|
+
setSelectedRangeDateString((prevState)=>{
|
|
643
|
+
selectedRangeDateStringRef.current = dateStrings;
|
|
644
|
+
return selectedRangeDateStringRef.current;
|
|
645
|
+
});
|
|
646
|
+
if (!selectRange.current.includes(info.range)) {
|
|
647
|
+
selectRange.current.push(info.range);
|
|
648
|
+
}
|
|
649
|
+
if (((_dates = dates) === null || _dates === void 0 ? void 0 : _dates[0]) && ((_dates1 = dates) === null || _dates1 === void 0 ? void 0 : _dates1[1])) {
|
|
650
|
+
//不用确认自动提交
|
|
651
|
+
if (!needConfirm) {
|
|
652
|
+
if (selectRange.current.includes("start") && selectRange.current.includes("end")) {
|
|
653
|
+
isChange.current = true;
|
|
654
|
+
setTimeout(()=>{
|
|
655
|
+
okClick();
|
|
656
|
+
}, 0);
|
|
657
|
+
}
|
|
658
|
+
} else {
|
|
659
|
+
isChange.current = true;
|
|
660
|
+
}
|
|
661
|
+
}
|
|
468
662
|
},
|
|
469
663
|
onBlur: (e)=>{
|
|
470
|
-
|
|
471
|
-
if (
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
664
|
+
console.log(panelOpenChange);
|
|
665
|
+
if (needConfirm) {
|
|
666
|
+
var _selectedRangeDateRef_current, _selectedRangeDateRef_current1, _selectedRangeDateRef_current2, _selectedRangeDateRef_current3;
|
|
667
|
+
if (((_selectedRangeDateRef_current = selectedRangeDateRef.current) === null || _selectedRangeDateRef_current === void 0 ? void 0 : _selectedRangeDateRef_current[0]) && ((_selectedRangeDateRef_current1 = selectedRangeDateRef.current) === null || _selectedRangeDateRef_current1 === void 0 ? void 0 : _selectedRangeDateRef_current1[1])) {
|
|
668
|
+
if (needConfirm && !panelOpenChange && isChange.current) {
|
|
669
|
+
okClick();
|
|
670
|
+
} else {
|
|
671
|
+
setPanelOpen(panelOpenChange);
|
|
672
|
+
}
|
|
673
|
+
if (!isChange.current) {
|
|
674
|
+
setPanelOpen(false);
|
|
675
|
+
}
|
|
676
|
+
} else if (!((_selectedRangeDateRef_current2 = selectedRangeDateRef.current) === null || _selectedRangeDateRef_current2 === void 0 ? void 0 : _selectedRangeDateRef_current2[0]) || !((_selectedRangeDateRef_current3 = selectedRangeDateRef.current) === null || _selectedRangeDateRef_current3 === void 0 ? void 0 : _selectedRangeDateRef_current3[1])) {
|
|
677
|
+
setPanelOpen(panelOpenChange);
|
|
678
|
+
}
|
|
679
|
+
} else {
|
|
680
|
+
setPanelOpen(panelOpenChange);
|
|
476
681
|
}
|
|
477
682
|
onBlur && onBlur(e);
|
|
478
683
|
}
|
|
@@ -480,5 +685,5 @@ const BhdDatePicker = (props)=>{
|
|
|
480
685
|
})
|
|
481
686
|
]
|
|
482
687
|
});
|
|
483
|
-
};
|
|
688
|
+
});
|
|
484
689
|
export default BhdDatePicker;
|