@kdcloudjs/kdesign 1.5.5 → 1.5.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.
Files changed (11) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/kdesign.css +1 -1
  3. package/dist/kdesign.css.map +1 -1
  4. package/dist/kdesign.js +63 -39
  5. package/dist/kdesign.js.map +1 -1
  6. package/dist/kdesign.min.css +1 -1
  7. package/dist/kdesign.min.js +3 -3
  8. package/dist/kdesign.min.js.map +1 -1
  9. package/es/_utils/usePopper.js +62 -38
  10. package/lib/_utils/usePopper.js +62 -38
  11. package/package.json +1 -1
package/es/_utils/usePopper.js CHANGED
@@ -219,6 +219,11 @@ function usePopper(locatorElement, popperElement, props) {
219
219
  visible = _useState10[0],
220
220
  setVisible = _useState10[1];
221
221
 
222
+ var _useState11 = useState(false),
223
+ _useState12 = _slicedToArray(_useState11, 2),
224
+ active = _useState12[0],
225
+ setActive = _useState12[1];
226
+
222
227
  useEffect(function () {
223
228
  if (props.visible) {
224
229
  !exist && setExist(true);
@@ -229,20 +234,20 @@ function usePopper(locatorElement, popperElement, props) {
229
234
  }
230
235
  }, [exist, props.visible]);
231
236
 
232
- var _useState11 = useState(''),
233
- _useState12 = _slicedToArray(_useState11, 2),
234
- evType = _useState12[0],
235
- setEvType = _useState12[1];
236
-
237
- var _useState13 = useState(),
237
+ var _useState13 = useState(''),
238
238
  _useState14 = _slicedToArray(_useState13, 2),
239
- align = _useState14[0],
240
- setAlign = _useState14[1];
239
+ evType = _useState14[0],
240
+ setEvType = _useState14[1];
241
241
 
242
- var _useState15 = useState(placement),
242
+ var _useState15 = useState(),
243
243
  _useState16 = _slicedToArray(_useState15, 2),
244
- currentPlacement = _useState16[0],
245
- setCurrentPlacement = _useState16[1];
244
+ align = _useState16[0],
245
+ setAlign = _useState16[1];
246
+
247
+ var _useState17 = useState(placement),
248
+ _useState18 = _slicedToArray(_useState17, 2),
249
+ nextPlacement = _useState18[0],
250
+ setNextPlacement = _useState18[1];
246
251
 
247
252
  var alignPopper = useCallback(function () {
248
253
  if ((locatorRef === null || locatorRef === void 0 ? void 0 : locatorRef.current) && (popperRef === null || popperRef === void 0 ? void 0 : popperRef.current)) {
@@ -287,39 +292,47 @@ function usePopper(locatorElement, popperElement, props) {
287
292
  bottom: locatorTop + borderTop + translateTop + height - containerTop - scrollTop
288
293
  };
289
294
  var currentPos = trigger === 'contextMenu' ? mousePos : locatorPos;
290
- var _currentPlacement = placement;
295
+ var currentPlacement = nextPlacement;
291
296
 
292
297
  if (autoPlacement) {
293
298
  if (top - gap - popperHeight <= 5 && bottom + gap + popperHeight < document.body.clientHeight - 5) {
294
- _currentPlacement = _currentPlacement.replace('top', 'bottom');
299
+ currentPlacement = currentPlacement.replace('top', 'bottom');
295
300
  }
296
301
 
297
302
  if (bottom + gap + popperHeight >= document.body.clientHeight - 5 && top - gap - popperHeight > 5) {
298
- _currentPlacement = _currentPlacement.replace('bottom', 'top');
303
+ currentPlacement = currentPlacement.replace('bottom', 'top');
299
304
  }
300
305
 
301
306
  if (left + popperWidth >= document.body.clientWidth - 5 && right - popperWidth > 5) {
302
- _currentPlacement = _currentPlacement.replace('Left', 'Right');
307
+ currentPlacement = currentPlacement.replace('Left', 'Right');
303
308
  }
304
309
 
305
310
  if (right - popperWidth <= 5 && left + popperWidth < document.body.clientWidth - 5) {
306
- _currentPlacement = _currentPlacement.replace('Right', 'Left');
311
+ currentPlacement = currentPlacement.replace('Right', 'Left');
307
312
  }
308
313
 
309
314
  if (top + popperHeight >= document.body.clientHeight - 5 && bottom - popperHeight > 5) {
310
- _currentPlacement = _currentPlacement.replace('Top', 'Bottom');
315
+ currentPlacement = currentPlacement.replace('Top', 'Bottom');
311
316
  }
312
317
 
313
318
  if (bottom - popperHeight <= 5 && top + popperHeight < document.body.clientHeight - 5) {
314
- _currentPlacement = _currentPlacement.replace('Bottom', 'Top');
319
+ currentPlacement = currentPlacement.replace('Bottom', 'Top');
315
320
  }
316
321
 
317
322
  if (left - gap - popperWidth <= 5 && right + gap + popperWidth < document.body.clientWidth - 5) {
318
- _currentPlacement = _currentPlacement.replace('left', 'right');
323
+ currentPlacement = currentPlacement.replace('left', 'right');
319
324
  }
320
325
 
321
326
  if (right + gap + popperWidth >= document.body.clientWidth - 5 && left - gap - popperWidth > 5) {
322
- _currentPlacement = _currentPlacement.replace('right', 'left');
327
+ currentPlacement = currentPlacement.replace('right', 'left');
328
+ }
329
+
330
+ if (right - width / 2 + popperWidth / 2 >= document.body.clientWidth - 5 && right - popperWidth > 5) {
331
+ currentPlacement += 'Right';
332
+ }
333
+
334
+ if (left - width / 2 - popperWidth / 2 <= 5 && left + popperWidth < document.body.clientWidth - 5) {
335
+ currentPlacement += 'Left';
323
336
  }
324
337
  }
325
338
 
@@ -381,16 +394,16 @@ function usePopper(locatorElement, popperElement, props) {
381
394
  top: topBottom
382
395
  }
383
396
  };
384
- var alignPos = mapAlign[_currentPlacement];
397
+ var alignPos = mapAlign[currentPlacement];
385
398
  var _arrowPos = {
386
399
  top: 0,
387
400
  left: 0
388
401
  };
389
402
 
390
- if (/left/.test(_currentPlacement) || /right/.test(_currentPlacement)) {
391
- if (/Top/.test(_currentPlacement)) {
403
+ if (/left/.test(currentPlacement) || /right/.test(currentPlacement)) {
404
+ if (/Top/.test(currentPlacement)) {
392
405
  _arrowPos.top = arrowOffset;
393
- } else if (/Bottom/.test(_currentPlacement)) {
406
+ } else if (/Bottom/.test(currentPlacement)) {
394
407
  _arrowPos.top = popperHeight - arrowOffset - 2 * arrowSize;
395
408
  } else {
396
409
  _arrowPos.top = (popperHeight - arrowWidth) / 2 - 1;
@@ -417,29 +430,40 @@ function usePopper(locatorElement, popperElement, props) {
417
430
  _arrowPos.top += scrollBottom - document.body.clientHeight;
418
431
  }
419
432
  }
420
- }
421
-
422
- if (/top/.test(_currentPlacement) || /bottom/.test(_currentPlacement)) {
423
- if (/Left/.test(_currentPlacement)) {
433
+ } else if (/top/.test(currentPlacement) || /bottom/.test(currentPlacement)) {
434
+ if (/Left/.test(currentPlacement)) {
424
435
  _arrowPos.left = arrowOffset;
425
- } else if (/Right/.test(_currentPlacement)) {
436
+ } else if (/Right/.test(currentPlacement)) {
426
437
  _arrowPos.left = popperWidth - arrowOffset - 2 * arrowSize;
427
438
  } else {
428
439
  _arrowPos.left = (popperWidth - arrowWidth) / 2 - 1;
429
440
  }
441
+
442
+ if (left <= 0) {
443
+ alignPos.left = locatorPos.left;
444
+ _arrowPos.left = arrowOffset;
445
+ } else if (right >= document.body.clientWidth) {
446
+ alignPos.left = locatorPos.right - popperWidth;
447
+ alignPos.right = -360;
448
+ _arrowPos.left = popperWidth - arrowOffset - 2 * arrowSize;
449
+ }
430
450
  }
431
451
 
432
452
  setAlign(alignPos);
433
453
  setArrowPos(_arrowPos);
434
- setCurrentPlacement(_currentPlacement);
454
+ setNextPlacement(currentPlacement);
435
455
  }
436
- }, [locatorRef, popperRef, container, trigger, mousePos, placement, gap, arrowOffset, arrowSize, arrowWidth, autoPlacement]);
456
+ }, [locatorRef, popperRef, container, trigger, mousePos, autoPlacement, gap, arrowOffset, arrowSize, arrowWidth]);
437
457
  useEffect(function () {
438
458
  if (canAlign) {
439
459
  alignPopper();
440
460
  setCanAlign(false);
441
461
  props.visible === undefined && setVisible(true);
442
462
  onVisibleChange && onVisibleChange(true);
463
+ setActive(true);
464
+ setTimeout(function () {
465
+ return setActive(false);
466
+ }, 200);
443
467
  }
444
468
  }, [alignPopper, canAlign, onVisibleChange, props]);
445
469
  var arrowStyle = (_arrowStyle = {}, _defineProperty(_arrowStyle, "--arrowSize", arrowSize + 'px'), _defineProperty(_arrowStyle, "--arrowSpill", arrowWidth / -2 + 'px'), _arrowStyle);
@@ -453,10 +477,10 @@ function usePopper(locatorElement, popperElement, props) {
453
477
  var popperProps = {
454
478
  ref: popperRef,
455
479
  style: popperContainerStyle,
456
- className: classNames(prefixCls, popperClassName, currentPlacement, _defineProperty({
480
+ className: classNames(prefixCls, popperClassName, nextPlacement, _defineProperty({
457
481
  arrow: arrow,
458
482
  hidden: !visible
459
- }, "".concat(currentPlacement, "-active"), visible))
483
+ }, "".concat(nextPlacement, "-active"), active))
460
484
  };
461
485
  var popperNode = popperRef.current;
462
486
  var locatorNode = locatorRef.current;
@@ -499,10 +523,10 @@ function usePopper(locatorElement, popperElement, props) {
499
523
  var triggerNode = getTriggerElement(locatorRef.current);
500
524
  var triggerRect = triggerNode.getBoundingClientRect();
501
525
  var popperRect = popperRef.current.getBoundingClientRect();
502
- var left = /left/.test(currentPlacement) ? popperRect.right : triggerRect.left;
503
- var right = /right/.test(currentPlacement) ? popperRect.left : triggerRect.right;
504
- var top = /top/.test(currentPlacement) ? popperRect.bottom : triggerRect.top;
505
- var bottom = /bottom/.test(currentPlacement) ? popperRect.top : triggerRect.bottom;
526
+ var left = /left/.test(nextPlacement) ? popperRect.right : triggerRect.left;
527
+ var right = /right/.test(nextPlacement) ? popperRect.left : triggerRect.right;
528
+ var top = /top/.test(nextPlacement) ? popperRect.bottom : triggerRect.top;
529
+ var bottom = /bottom/.test(nextPlacement) ? popperRect.top : triggerRect.bottom;
506
530
  var X = e.clientX,
507
531
  Y = e.clientY;
508
532
  var inTriggerRect = X > left - 2 && X < right + 2 && Y > top - 2 && Y < bottom + 2;
@@ -535,7 +559,7 @@ function usePopper(locatorElement, popperElement, props) {
535
559
  }) : document.removeEventListener(mapEvent[trigger], debounceHidePopper);
536
560
  };
537
561
  }
538
- }, [currentPlacement, evType, exist, getTriggerElement, hidePopper, locatorRef, mouseLeaveDelay, popperRef, visible]);
562
+ }, [nextPlacement, evType, exist, getTriggerElement, hidePopper, locatorRef, mouseLeaveDelay, popperRef, visible]);
539
563
  useEffect(function () {
540
564
  if (visible) {
541
565
  var scrollAlign = debounce(function (e) {
package/lib/_utils/usePopper.js CHANGED
@@ -255,6 +255,11 @@ function usePopper(locatorElement, popperElement, props) {
255
255
  visible = _useState10[0],
256
256
  setVisible = _useState10[1];
257
257
 
258
+ var _useState11 = (0, _react.useState)(false),
259
+ _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
260
+ active = _useState12[0],
261
+ setActive = _useState12[1];
262
+
258
263
  (0, _react.useEffect)(function () {
259
264
  if (props.visible) {
260
265
  !exist && setExist(true);
@@ -265,20 +270,20 @@ function usePopper(locatorElement, popperElement, props) {
265
270
  }
266
271
  }, [exist, props.visible]);
267
272
 
268
- var _useState11 = (0, _react.useState)(''),
269
- _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
270
- evType = _useState12[0],
271
- setEvType = _useState12[1];
272
-
273
- var _useState13 = (0, _react.useState)(),
273
+ var _useState13 = (0, _react.useState)(''),
274
274
  _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
275
- align = _useState14[0],
276
- setAlign = _useState14[1];
275
+ evType = _useState14[0],
276
+ setEvType = _useState14[1];
277
277
 
278
- var _useState15 = (0, _react.useState)(placement),
278
+ var _useState15 = (0, _react.useState)(),
279
279
  _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
280
- currentPlacement = _useState16[0],
281
- setCurrentPlacement = _useState16[1];
280
+ align = _useState16[0],
281
+ setAlign = _useState16[1];
282
+
283
+ var _useState17 = (0, _react.useState)(placement),
284
+ _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
285
+ nextPlacement = _useState18[0],
286
+ setNextPlacement = _useState18[1];
282
287
 
283
288
  var alignPopper = (0, _react.useCallback)(function () {
284
289
  if ((locatorRef === null || locatorRef === void 0 ? void 0 : locatorRef.current) && (popperRef === null || popperRef === void 0 ? void 0 : popperRef.current)) {
@@ -323,39 +328,47 @@ function usePopper(locatorElement, popperElement, props) {
323
328
  bottom: locatorTop + borderTop + translateTop + height - containerTop - scrollTop
324
329
  };
325
330
  var currentPos = trigger === 'contextMenu' ? mousePos : locatorPos;
326
- var _currentPlacement = placement;
331
+ var currentPlacement = nextPlacement;
327
332
 
328
333
  if (autoPlacement) {
329
334
  if (top - gap - popperHeight <= 5 && bottom + gap + popperHeight < document.body.clientHeight - 5) {
330
- _currentPlacement = _currentPlacement.replace('top', 'bottom');
335
+ currentPlacement = currentPlacement.replace('top', 'bottom');
331
336
  }
332
337
 
333
338
  if (bottom + gap + popperHeight >= document.body.clientHeight - 5 && top - gap - popperHeight > 5) {
334
- _currentPlacement = _currentPlacement.replace('bottom', 'top');
339
+ currentPlacement = currentPlacement.replace('bottom', 'top');
335
340
  }
336
341
 
337
342
  if (left + popperWidth >= document.body.clientWidth - 5 && right - popperWidth > 5) {
338
- _currentPlacement = _currentPlacement.replace('Left', 'Right');
343
+ currentPlacement = currentPlacement.replace('Left', 'Right');
339
344
  }
340
345
 
341
346
  if (right - popperWidth <= 5 && left + popperWidth < document.body.clientWidth - 5) {
342
- _currentPlacement = _currentPlacement.replace('Right', 'Left');
347
+ currentPlacement = currentPlacement.replace('Right', 'Left');
343
348
  }
344
349
 
345
350
  if (top + popperHeight >= document.body.clientHeight - 5 && bottom - popperHeight > 5) {
346
- _currentPlacement = _currentPlacement.replace('Top', 'Bottom');
351
+ currentPlacement = currentPlacement.replace('Top', 'Bottom');
347
352
  }
348
353
 
349
354
  if (bottom - popperHeight <= 5 && top + popperHeight < document.body.clientHeight - 5) {
350
- _currentPlacement = _currentPlacement.replace('Bottom', 'Top');
355
+ currentPlacement = currentPlacement.replace('Bottom', 'Top');
351
356
  }
352
357
 
353
358
  if (left - gap - popperWidth <= 5 && right + gap + popperWidth < document.body.clientWidth - 5) {
354
- _currentPlacement = _currentPlacement.replace('left', 'right');
359
+ currentPlacement = currentPlacement.replace('left', 'right');
355
360
  }
356
361
 
357
362
  if (right + gap + popperWidth >= document.body.clientWidth - 5 && left - gap - popperWidth > 5) {
358
- _currentPlacement = _currentPlacement.replace('right', 'left');
363
+ currentPlacement = currentPlacement.replace('right', 'left');
364
+ }
365
+
366
+ if (right - width / 2 + popperWidth / 2 >= document.body.clientWidth - 5 && right - popperWidth > 5) {
367
+ currentPlacement += 'Right';
368
+ }
369
+
370
+ if (left - width / 2 - popperWidth / 2 <= 5 && left + popperWidth < document.body.clientWidth - 5) {
371
+ currentPlacement += 'Left';
359
372
  }
360
373
  }
361
374
 
@@ -417,16 +430,16 @@ function usePopper(locatorElement, popperElement, props) {
417
430
  top: topBottom
418
431
  }
419
432
  };
420
- var alignPos = mapAlign[_currentPlacement];
433
+ var alignPos = mapAlign[currentPlacement];
421
434
  var _arrowPos = {
422
435
  top: 0,
423
436
  left: 0
424
437
  };
425
438
 
426
- if (/left/.test(_currentPlacement) || /right/.test(_currentPlacement)) {
427
- if (/Top/.test(_currentPlacement)) {
439
+ if (/left/.test(currentPlacement) || /right/.test(currentPlacement)) {
440
+ if (/Top/.test(currentPlacement)) {
428
441
  _arrowPos.top = arrowOffset;
429
- } else if (/Bottom/.test(_currentPlacement)) {
442
+ } else if (/Bottom/.test(currentPlacement)) {
430
443
  _arrowPos.top = popperHeight - arrowOffset - 2 * arrowSize;
431
444
  } else {
432
445
  _arrowPos.top = (popperHeight - arrowWidth) / 2 - 1;
@@ -453,29 +466,40 @@ function usePopper(locatorElement, popperElement, props) {
453
466
  _arrowPos.top += scrollBottom - document.body.clientHeight;
454
467
  }
455
468
  }
456
- }
457
-
458
- if (/top/.test(_currentPlacement) || /bottom/.test(_currentPlacement)) {
459
- if (/Left/.test(_currentPlacement)) {
469
+ } else if (/top/.test(currentPlacement) || /bottom/.test(currentPlacement)) {
470
+ if (/Left/.test(currentPlacement)) {
460
471
  _arrowPos.left = arrowOffset;
461
- } else if (/Right/.test(_currentPlacement)) {
472
+ } else if (/Right/.test(currentPlacement)) {
462
473
  _arrowPos.left = popperWidth - arrowOffset - 2 * arrowSize;
463
474
  } else {
464
475
  _arrowPos.left = (popperWidth - arrowWidth) / 2 - 1;
465
476
  }
477
+
478
+ if (left <= 0) {
479
+ alignPos.left = locatorPos.left;
480
+ _arrowPos.left = arrowOffset;
481
+ } else if (right >= document.body.clientWidth) {
482
+ alignPos.left = locatorPos.right - popperWidth;
483
+ alignPos.right = -360;
484
+ _arrowPos.left = popperWidth - arrowOffset - 2 * arrowSize;
485
+ }
466
486
  }
467
487
 
468
488
  setAlign(alignPos);
469
489
  setArrowPos(_arrowPos);
470
- setCurrentPlacement(_currentPlacement);
490
+ setNextPlacement(currentPlacement);
471
491
  }
472
- }, [locatorRef, popperRef, container, trigger, mousePos, placement, gap, arrowOffset, arrowSize, arrowWidth, autoPlacement]);
492
+ }, [locatorRef, popperRef, container, trigger, mousePos, autoPlacement, gap, arrowOffset, arrowSize, arrowWidth]);
473
493
  (0, _react.useEffect)(function () {
474
494
  if (canAlign) {
475
495
  alignPopper();
476
496
  setCanAlign(false);
477
497
  props.visible === undefined && setVisible(true);
478
498
  onVisibleChange && onVisibleChange(true);
499
+ setActive(true);
500
+ setTimeout(function () {
501
+ return setActive(false);
502
+ }, 200);
479
503
  }
480
504
  }, [alignPopper, canAlign, onVisibleChange, props]);
481
505
  var arrowStyle = (_arrowStyle = {}, (0, _defineProperty2.default)(_arrowStyle, "--arrowSize", arrowSize + 'px'), (0, _defineProperty2.default)(_arrowStyle, "--arrowSpill", arrowWidth / -2 + 'px'), _arrowStyle);
@@ -487,10 +511,10 @@ function usePopper(locatorElement, popperElement, props) {
487
511
  var popperProps = {
488
512
  ref: popperRef,
489
513
  style: popperContainerStyle,
490
- className: (0, _classnames.default)(prefixCls, popperClassName, currentPlacement, (0, _defineProperty2.default)({
514
+ className: (0, _classnames.default)(prefixCls, popperClassName, nextPlacement, (0, _defineProperty2.default)({
491
515
  arrow: arrow,
492
516
  hidden: !visible
493
- }, "".concat(currentPlacement, "-active"), visible))
517
+ }, "".concat(nextPlacement, "-active"), active))
494
518
  };
495
519
  var popperNode = popperRef.current;
496
520
  var locatorNode = locatorRef.current;
@@ -533,10 +557,10 @@ function usePopper(locatorElement, popperElement, props) {
533
557
  var triggerNode = getTriggerElement(locatorRef.current);
534
558
  var triggerRect = triggerNode.getBoundingClientRect();
535
559
  var popperRect = popperRef.current.getBoundingClientRect();
536
- var left = /left/.test(currentPlacement) ? popperRect.right : triggerRect.left;
537
- var right = /right/.test(currentPlacement) ? popperRect.left : triggerRect.right;
538
- var top = /top/.test(currentPlacement) ? popperRect.bottom : triggerRect.top;
539
- var bottom = /bottom/.test(currentPlacement) ? popperRect.top : triggerRect.bottom;
560
+ var left = /left/.test(nextPlacement) ? popperRect.right : triggerRect.left;
561
+ var right = /right/.test(nextPlacement) ? popperRect.left : triggerRect.right;
562
+ var top = /top/.test(nextPlacement) ? popperRect.bottom : triggerRect.top;
563
+ var bottom = /bottom/.test(nextPlacement) ? popperRect.top : triggerRect.bottom;
540
564
  var X = e.clientX,
541
565
  Y = e.clientY;
542
566
  var inTriggerRect = X > left - 2 && X < right + 2 && Y > top - 2 && Y < bottom + 2;
@@ -569,7 +593,7 @@ function usePopper(locatorElement, popperElement, props) {
569
593
  }) : document.removeEventListener(mapEvent[trigger], debounceHidePopper);
570
594
  };
571
595
  }
572
- }, [currentPlacement, evType, exist, getTriggerElement, hidePopper, locatorRef, mouseLeaveDelay, popperRef, visible]);
596
+ }, [nextPlacement, evType, exist, getTriggerElement, hidePopper, locatorRef, mouseLeaveDelay, popperRef, visible]);
573
597
  (0, _react.useEffect)(function () {
574
598
  if (visible) {
575
599
  var scrollAlign = (0, _debounce.default)(function (e) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kdcloudjs/kdesign",
3
- "version": "1.5.5",
3
+ "version": "1.5.6",
4
4
  "description": "KDesign 金蝶前端react 组件库",
5
5
  "title": "kdesign",
6
6
  "keywords": [