@kdcloudjs/kdesign 1.7.56 → 1.7.58
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/CHANGELOG.md +24 -0
- package/dist/kdesign.css +1 -1
- package/dist/kdesign.css.map +1 -1
- package/dist/kdesign.js +27 -15
- package/dist/kdesign.js.map +1 -1
- package/dist/kdesign.min.css +1 -1
- package/dist/kdesign.min.js +8 -8
- package/dist/kdesign.min.js.map +1 -1
- package/es/_utils/usePopper.js +13 -7
- package/es/date-picker/date-picker.js +4 -1
- package/es/date-picker/hooks/use-picker-input.js +2 -3
- package/es/date-picker/range-picker.js +3 -1
- package/es/date-picker/utils/date-fns.js +4 -2
- package/lib/_utils/usePopper.js +13 -7
- package/lib/date-picker/date-picker.js +4 -1
- package/lib/date-picker/hooks/use-picker-input.js +2 -3
- package/lib/date-picker/range-picker.js +3 -1
- package/lib/date-picker/utils/date-fns.js +4 -2
- package/package.json +1 -1
package/es/_utils/usePopper.js
CHANGED
|
@@ -113,6 +113,7 @@ var getRealDom = function getRealDom(locatorRef, locatorElement) {
|
|
|
113
113
|
var name = REF_NAME_OBJ[(_a = locatorElement === null || locatorElement === void 0 ? void 0 : locatorElement.type) === null || _a === void 0 ? void 0 : _a.displayName];
|
|
114
114
|
return locatorRef === null || locatorRef === void 0 ? void 0 : locatorRef.current[name];
|
|
115
115
|
};
|
|
116
|
+
var DEFAULT_PLACEMENT = 'top';
|
|
116
117
|
function usePopper(locatorElement, popperElement, props) {
|
|
117
118
|
var _context3, _context4, _arrowStyle;
|
|
118
119
|
var prefixCls = props.prefixCls,
|
|
@@ -131,7 +132,7 @@ function usePopper(locatorElement, popperElement, props) {
|
|
|
131
132
|
_props$trigger = props.trigger,
|
|
132
133
|
trigger = _props$trigger === void 0 ? 'click' : _props$trigger,
|
|
133
134
|
_props$placement = props.placement,
|
|
134
|
-
placement = _props$placement === void 0 ?
|
|
135
|
+
placement = _props$placement === void 0 ? DEFAULT_PLACEMENT : _props$placement,
|
|
135
136
|
_props$gap = props.gap,
|
|
136
137
|
defaultGap = _props$gap === void 0 ? 4 : _props$gap,
|
|
137
138
|
_props$scrollHidden = props.scrollHidden,
|
|
@@ -228,10 +229,15 @@ function usePopper(locatorElement, popperElement, props) {
|
|
|
228
229
|
_useState16 = _slicedToArray(_useState15, 2),
|
|
229
230
|
align = _useState16[0],
|
|
230
231
|
setAlign = _useState16[1];
|
|
231
|
-
var _useState17 = useState(placement),
|
|
232
|
+
var _useState17 = useState(_includesInstanceProperty(Placements).call(Placements, placement) ? placement : DEFAULT_PLACEMENT),
|
|
232
233
|
_useState18 = _slicedToArray(_useState17, 2),
|
|
233
234
|
nextPlacement = _useState18[0],
|
|
234
235
|
setNextPlacement = _useState18[1];
|
|
236
|
+
useEffect(function () {
|
|
237
|
+
if (nextPlacement !== placement && _includesInstanceProperty(Placements).call(Placements, placement)) {
|
|
238
|
+
setNextPlacement(placement);
|
|
239
|
+
}
|
|
240
|
+
}, [placement]);
|
|
235
241
|
var alignPopper = useCallback(function () {
|
|
236
242
|
var realDom = getRealDom(locatorRef, locatorElement);
|
|
237
243
|
if (realDom && (popperRef === null || popperRef === void 0 ? void 0 : popperRef.current)) {
|
|
@@ -245,6 +251,10 @@ function usePopper(locatorElement, popperElement, props) {
|
|
|
245
251
|
right = _realDom$getBoundingC.right,
|
|
246
252
|
height = _realDom$getBoundingC.height,
|
|
247
253
|
width = _realDom$getBoundingC.width;
|
|
254
|
+
if (height === 0 && width === 0) {
|
|
255
|
+
hidePopper();
|
|
256
|
+
return;
|
|
257
|
+
}
|
|
248
258
|
var _getOffsetPos = getOffsetPos(container),
|
|
249
259
|
containerTop = _getOffsetPos.top,
|
|
250
260
|
containerLeft = _getOffsetPos.left;
|
|
@@ -415,7 +425,7 @@ function usePopper(locatorElement, popperElement, props) {
|
|
|
415
425
|
setArrowPos(_arrowPos);
|
|
416
426
|
setNextPlacement(currentPlacement);
|
|
417
427
|
}
|
|
418
|
-
}, [locatorRef, popperRef, container, trigger, mousePos, autoPlacement, gap, arrowOffset, arrowSize, arrowWidth, align === null || align === void 0 ? void 0 : align.left, align === null || align === void 0 ? void 0 : align.top]);
|
|
428
|
+
}, [locatorRef, popperRef, container, trigger, mousePos, autoPlacement, gap, arrowOffset, arrowSize, arrowWidth, align === null || align === void 0 ? void 0 : align.left, align === null || align === void 0 ? void 0 : align.top, nextPlacement]);
|
|
419
429
|
useEffect(function () {
|
|
420
430
|
if (canAlign) {
|
|
421
431
|
alignPopper();
|
|
@@ -540,13 +550,9 @@ function usePopper(locatorElement, popperElement, props) {
|
|
|
540
550
|
}, 10);
|
|
541
551
|
window.addEventListener('resize', alignPopper);
|
|
542
552
|
document.addEventListener('scroll', scrollAlign, true);
|
|
543
|
-
locatorNode === null || locatorNode === void 0 ? void 0 : locatorNode.addEventListener('DOMSubtreeModified', alignPopper);
|
|
544
|
-
exist && (popperNode === null || popperNode === void 0 ? void 0 : popperNode.addEventListener('DOMSubtreeModified', alignPopper));
|
|
545
553
|
return function () {
|
|
546
554
|
window.removeEventListener('resize', alignPopper);
|
|
547
555
|
document.removeEventListener('scroll', scrollAlign, true);
|
|
548
|
-
locatorNode === null || locatorNode === void 0 ? void 0 : locatorNode.removeEventListener('DOMSubtreeModified', alignPopper);
|
|
549
|
-
exist && (popperNode === null || popperNode === void 0 ? void 0 : popperNode.removeEventListener('DOMSubtreeModified', alignPopper));
|
|
550
556
|
};
|
|
551
557
|
}
|
|
552
558
|
}, [alignPopper, exist, onVisibleChange, popperNode, props.visible, scrollHidden, locatorNode, visible, popperRef]);
|
|
@@ -150,7 +150,7 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
|
|
|
150
150
|
if (newText === '') {
|
|
151
151
|
triggerChange(null);
|
|
152
152
|
setViewDate(null);
|
|
153
|
-
} else if (newText && newText.length
|
|
153
|
+
} else if (newText && newText.length >= _format.length) {
|
|
154
154
|
var inputTempDate = parseDate(newText, _format);
|
|
155
155
|
if (inputTempDate && (!disabledDate || !disabledDate(inputTempDate))) {
|
|
156
156
|
if (picker !== 'year') {
|
|
@@ -217,6 +217,9 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
|
|
|
217
217
|
if (valueText !== text) {
|
|
218
218
|
resetText();
|
|
219
219
|
}
|
|
220
|
+
if (hoverValue) {
|
|
221
|
+
onLeave();
|
|
222
|
+
}
|
|
220
223
|
} else {
|
|
221
224
|
setInnerPicker(undefined);
|
|
222
225
|
}
|
|
@@ -29,8 +29,6 @@ export default function usePickerInput(_ref) {
|
|
|
29
29
|
},
|
|
30
30
|
onKeyDown: function onKeyDown(e) {
|
|
31
31
|
var _context;
|
|
32
|
-
setTyping(true);
|
|
33
|
-
triggerOpen(true);
|
|
34
32
|
switch (e.which) {
|
|
35
33
|
case KeyCode.ENTER:
|
|
36
34
|
{
|
|
@@ -46,8 +44,9 @@ export default function usePickerInput(_ref) {
|
|
|
46
44
|
{
|
|
47
45
|
if (typing && open && !e.shiftKey) {
|
|
48
46
|
setTyping(false);
|
|
49
|
-
e.preventDefault()
|
|
47
|
+
// e.preventDefault()
|
|
50
48
|
}
|
|
49
|
+
|
|
51
50
|
return;
|
|
52
51
|
}
|
|
53
52
|
case KeyCode.ESC:
|
|
@@ -229,7 +229,7 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
|
|
|
229
229
|
var inputTempDate;
|
|
230
230
|
if (newText === '') {
|
|
231
231
|
triggerChange(updateValues(selectedValue, null, index), index);
|
|
232
|
-
} else if (newText && newText.length
|
|
232
|
+
} else if (newText && newText.length >= _format.length) {
|
|
233
233
|
inputTempDate = parseDate(newText, _format);
|
|
234
234
|
var disabledFunc = index === 0 ? disabledStartDate : disabledEndDate;
|
|
235
235
|
if (inputTempDate && (!disabledFunc || !disabledFunc(inputTempDate))) {
|
|
@@ -445,6 +445,8 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
|
|
|
445
445
|
setSelectedValue(dateValue);
|
|
446
446
|
setViewDate(null, 0);
|
|
447
447
|
setViewDate(null, 1);
|
|
448
|
+
resetStartText();
|
|
449
|
+
resetEndText();
|
|
448
450
|
setHoverRangedValue([null, null]);
|
|
449
451
|
} else {
|
|
450
452
|
setInnerPicker(undefined);
|
|
@@ -273,10 +273,12 @@ export var setYearOrMonthOfDate = function setYearOrMonthOfDate(date1, date2) {
|
|
|
273
273
|
var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'year';
|
|
274
274
|
var d1 = new Date(date1 || 0);
|
|
275
275
|
var d2 = new Date(date2 || 0);
|
|
276
|
-
if (type === 'year') {
|
|
276
|
+
if (type === 'year' && d1.getFullYear() !== d2.getFullYear()) {
|
|
277
|
+
d1.setDate(1);
|
|
277
278
|
d1.setFullYear(d2.getFullYear());
|
|
278
279
|
}
|
|
279
|
-
if (type === 'month') {
|
|
280
|
+
if (type === 'month' && d1.getMonth() !== d2.getMonth()) {
|
|
281
|
+
d1.setDate(1);
|
|
280
282
|
d1.setMonth(d2.getMonth());
|
|
281
283
|
}
|
|
282
284
|
return d1;
|
package/lib/_utils/usePopper.js
CHANGED
|
@@ -127,6 +127,7 @@ var getRealDom = function getRealDom(locatorRef, locatorElement) {
|
|
|
127
127
|
var name = REF_NAME_OBJ[(_a = locatorElement === null || locatorElement === void 0 ? void 0 : locatorElement.type) === null || _a === void 0 ? void 0 : _a.displayName];
|
|
128
128
|
return locatorRef === null || locatorRef === void 0 ? void 0 : locatorRef.current[name];
|
|
129
129
|
};
|
|
130
|
+
var DEFAULT_PLACEMENT = 'top';
|
|
130
131
|
function usePopper(locatorElement, popperElement, props) {
|
|
131
132
|
var _context3, _context4, _arrowStyle;
|
|
132
133
|
var prefixCls = props.prefixCls,
|
|
@@ -145,7 +146,7 @@ function usePopper(locatorElement, popperElement, props) {
|
|
|
145
146
|
_props$trigger = props.trigger,
|
|
146
147
|
trigger = _props$trigger === void 0 ? 'click' : _props$trigger,
|
|
147
148
|
_props$placement = props.placement,
|
|
148
|
-
placement = _props$placement === void 0 ?
|
|
149
|
+
placement = _props$placement === void 0 ? DEFAULT_PLACEMENT : _props$placement,
|
|
149
150
|
_props$gap = props.gap,
|
|
150
151
|
defaultGap = _props$gap === void 0 ? 4 : _props$gap,
|
|
151
152
|
_props$scrollHidden = props.scrollHidden,
|
|
@@ -242,10 +243,15 @@ function usePopper(locatorElement, popperElement, props) {
|
|
|
242
243
|
_useState16 = (0, _slicedToArray2.default)(_useState15, 2),
|
|
243
244
|
align = _useState16[0],
|
|
244
245
|
setAlign = _useState16[1];
|
|
245
|
-
var _useState17 = (0, _react.useState)(placement),
|
|
246
|
+
var _useState17 = (0, _react.useState)((0, _includes.default)(Placements).call(Placements, placement) ? placement : DEFAULT_PLACEMENT),
|
|
246
247
|
_useState18 = (0, _slicedToArray2.default)(_useState17, 2),
|
|
247
248
|
nextPlacement = _useState18[0],
|
|
248
249
|
setNextPlacement = _useState18[1];
|
|
250
|
+
(0, _react.useEffect)(function () {
|
|
251
|
+
if (nextPlacement !== placement && (0, _includes.default)(Placements).call(Placements, placement)) {
|
|
252
|
+
setNextPlacement(placement);
|
|
253
|
+
}
|
|
254
|
+
}, [placement]);
|
|
249
255
|
var alignPopper = (0, _react.useCallback)(function () {
|
|
250
256
|
var realDom = getRealDom(locatorRef, locatorElement);
|
|
251
257
|
if (realDom && (popperRef === null || popperRef === void 0 ? void 0 : popperRef.current)) {
|
|
@@ -259,6 +265,10 @@ function usePopper(locatorElement, popperElement, props) {
|
|
|
259
265
|
right = _realDom$getBoundingC.right,
|
|
260
266
|
height = _realDom$getBoundingC.height,
|
|
261
267
|
width = _realDom$getBoundingC.width;
|
|
268
|
+
if (height === 0 && width === 0) {
|
|
269
|
+
hidePopper();
|
|
270
|
+
return;
|
|
271
|
+
}
|
|
262
272
|
var _getOffsetPos = getOffsetPos(container),
|
|
263
273
|
containerTop = _getOffsetPos.top,
|
|
264
274
|
containerLeft = _getOffsetPos.left;
|
|
@@ -429,7 +439,7 @@ function usePopper(locatorElement, popperElement, props) {
|
|
|
429
439
|
setArrowPos(_arrowPos);
|
|
430
440
|
setNextPlacement(currentPlacement);
|
|
431
441
|
}
|
|
432
|
-
}, [locatorRef, popperRef, container, trigger, mousePos, autoPlacement, gap, arrowOffset, arrowSize, arrowWidth, align === null || align === void 0 ? void 0 : align.left, align === null || align === void 0 ? void 0 : align.top]);
|
|
442
|
+
}, [locatorRef, popperRef, container, trigger, mousePos, autoPlacement, gap, arrowOffset, arrowSize, arrowWidth, align === null || align === void 0 ? void 0 : align.left, align === null || align === void 0 ? void 0 : align.top, nextPlacement]);
|
|
433
443
|
(0, _react.useEffect)(function () {
|
|
434
444
|
if (canAlign) {
|
|
435
445
|
alignPopper();
|
|
@@ -554,13 +564,9 @@ function usePopper(locatorElement, popperElement, props) {
|
|
|
554
564
|
}, 10);
|
|
555
565
|
window.addEventListener('resize', alignPopper);
|
|
556
566
|
document.addEventListener('scroll', scrollAlign, true);
|
|
557
|
-
locatorNode === null || locatorNode === void 0 ? void 0 : locatorNode.addEventListener('DOMSubtreeModified', alignPopper);
|
|
558
|
-
exist && (popperNode === null || popperNode === void 0 ? void 0 : popperNode.addEventListener('DOMSubtreeModified', alignPopper));
|
|
559
567
|
return function () {
|
|
560
568
|
window.removeEventListener('resize', alignPopper);
|
|
561
569
|
document.removeEventListener('scroll', scrollAlign, true);
|
|
562
|
-
locatorNode === null || locatorNode === void 0 ? void 0 : locatorNode.removeEventListener('DOMSubtreeModified', alignPopper);
|
|
563
|
-
exist && (popperNode === null || popperNode === void 0 ? void 0 : popperNode.removeEventListener('DOMSubtreeModified', alignPopper));
|
|
564
570
|
};
|
|
565
571
|
}
|
|
566
572
|
}, [alignPopper, exist, onVisibleChange, popperNode, props.visible, scrollHidden, locatorNode, visible, popperRef]);
|
|
@@ -162,7 +162,7 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
|
|
|
162
162
|
if (newText === '') {
|
|
163
163
|
triggerChange(null);
|
|
164
164
|
setViewDate(null);
|
|
165
|
-
} else if (newText && newText.length
|
|
165
|
+
} else if (newText && newText.length >= _format.length) {
|
|
166
166
|
var inputTempDate = (0, _dateFns.parseDate)(newText, _format);
|
|
167
167
|
if (inputTempDate && (!disabledDate || !disabledDate(inputTempDate))) {
|
|
168
168
|
if (picker !== 'year') {
|
|
@@ -229,6 +229,9 @@ var InternalDatePicker = function InternalDatePicker(props, ref) {
|
|
|
229
229
|
if (valueText !== text) {
|
|
230
230
|
resetText();
|
|
231
231
|
}
|
|
232
|
+
if (hoverValue) {
|
|
233
|
+
onLeave();
|
|
234
|
+
}
|
|
232
235
|
} else {
|
|
233
236
|
setInnerPicker(undefined);
|
|
234
237
|
}
|
|
@@ -36,8 +36,6 @@ function usePickerInput(_ref) {
|
|
|
36
36
|
},
|
|
37
37
|
onKeyDown: function onKeyDown(e) {
|
|
38
38
|
var _context;
|
|
39
|
-
setTyping(true);
|
|
40
|
-
triggerOpen(true);
|
|
41
39
|
switch (e.which) {
|
|
42
40
|
case _KeyCode.default.ENTER:
|
|
43
41
|
{
|
|
@@ -53,8 +51,9 @@ function usePickerInput(_ref) {
|
|
|
53
51
|
{
|
|
54
52
|
if (typing && open && !e.shiftKey) {
|
|
55
53
|
setTyping(false);
|
|
56
|
-
e.preventDefault()
|
|
54
|
+
// e.preventDefault()
|
|
57
55
|
}
|
|
56
|
+
|
|
58
57
|
return;
|
|
59
58
|
}
|
|
60
59
|
case _KeyCode.default.ESC:
|
|
@@ -241,7 +241,7 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
|
|
|
241
241
|
var inputTempDate;
|
|
242
242
|
if (newText === '') {
|
|
243
243
|
triggerChange((0, _utils2.updateValues)(selectedValue, null, index), index);
|
|
244
|
-
} else if (newText && newText.length
|
|
244
|
+
} else if (newText && newText.length >= _format.length) {
|
|
245
245
|
inputTempDate = (0, _dateFns.parseDate)(newText, _format);
|
|
246
246
|
var disabledFunc = index === 0 ? disabledStartDate : disabledEndDate;
|
|
247
247
|
if (inputTempDate && (!disabledFunc || !disabledFunc(inputTempDate))) {
|
|
@@ -457,6 +457,8 @@ var InternalRangePicker = function InternalRangePicker(props, ref) {
|
|
|
457
457
|
setSelectedValue(dateValue);
|
|
458
458
|
setViewDate(null, 0);
|
|
459
459
|
setViewDate(null, 1);
|
|
460
|
+
resetStartText();
|
|
461
|
+
resetEndText();
|
|
460
462
|
setHoverRangedValue([null, null]);
|
|
461
463
|
} else {
|
|
462
464
|
setInnerPicker(undefined);
|
|
@@ -477,10 +477,12 @@ var setYearOrMonthOfDate = function setYearOrMonthOfDate(date1, date2) {
|
|
|
477
477
|
var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'year';
|
|
478
478
|
var d1 = new Date(date1 || 0);
|
|
479
479
|
var d2 = new Date(date2 || 0);
|
|
480
|
-
if (type === 'year') {
|
|
480
|
+
if (type === 'year' && d1.getFullYear() !== d2.getFullYear()) {
|
|
481
|
+
d1.setDate(1);
|
|
481
482
|
d1.setFullYear(d2.getFullYear());
|
|
482
483
|
}
|
|
483
|
-
if (type === 'month') {
|
|
484
|
+
if (type === 'month' && d1.getMonth() !== d2.getMonth()) {
|
|
485
|
+
d1.setDate(1);
|
|
484
486
|
d1.setMonth(d2.getMonth());
|
|
485
487
|
}
|
|
486
488
|
return d1;
|