@kdcloudjs/kdesign 1.5.5 → 1.5.8

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 +65 -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 +66 -38
  10. package/lib/_utils/usePopper.js +66 -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,51 @@ 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) {
298
+ var _context5;
299
+
293
300
  if (top - gap - popperHeight <= 5 && bottom + gap + popperHeight < document.body.clientHeight - 5) {
294
- _currentPlacement = _currentPlacement.replace('top', 'bottom');
301
+ currentPlacement = currentPlacement.replace('top', 'bottom');
295
302
  }
296
303
 
297
304
  if (bottom + gap + popperHeight >= document.body.clientHeight - 5 && top - gap - popperHeight > 5) {
298
- _currentPlacement = _currentPlacement.replace('bottom', 'top');
305
+ currentPlacement = currentPlacement.replace('bottom', 'top');
299
306
  }
300
307
 
301
308
  if (left + popperWidth >= document.body.clientWidth - 5 && right - popperWidth > 5) {
302
- _currentPlacement = _currentPlacement.replace('Left', 'Right');
309
+ currentPlacement = currentPlacement.replace('Left', 'Right');
303
310
  }
304
311
 
305
312
  if (right - popperWidth <= 5 && left + popperWidth < document.body.clientWidth - 5) {
306
- _currentPlacement = _currentPlacement.replace('Right', 'Left');
313
+ currentPlacement = currentPlacement.replace('Right', 'Left');
307
314
  }
308
315
 
309
316
  if (top + popperHeight >= document.body.clientHeight - 5 && bottom - popperHeight > 5) {
310
- _currentPlacement = _currentPlacement.replace('Top', 'Bottom');
317
+ currentPlacement = currentPlacement.replace('Top', 'Bottom');
311
318
  }
312
319
 
313
320
  if (bottom - popperHeight <= 5 && top + popperHeight < document.body.clientHeight - 5) {
314
- _currentPlacement = _currentPlacement.replace('Bottom', 'Top');
321
+ currentPlacement = currentPlacement.replace('Bottom', 'Top');
315
322
  }
316
323
 
317
324
  if (left - gap - popperWidth <= 5 && right + gap + popperWidth < document.body.clientWidth - 5) {
318
- _currentPlacement = _currentPlacement.replace('left', 'right');
325
+ currentPlacement = currentPlacement.replace('left', 'right');
319
326
  }
320
327
 
321
328
  if (right + gap + popperWidth >= document.body.clientWidth - 5 && left - gap - popperWidth > 5) {
322
- _currentPlacement = _currentPlacement.replace('right', 'left');
329
+ currentPlacement = currentPlacement.replace('right', 'left');
330
+ }
331
+
332
+ if (_includesInstanceProperty(_context5 = ['top', 'bottom']).call(_context5, currentPlacement)) {
333
+ if (right - width / 2 + popperWidth / 2 >= document.body.clientWidth - 5 && right - popperWidth > 5) {
334
+ currentPlacement += 'Right';
335
+ }
336
+
337
+ if (left - width / 2 - popperWidth / 2 <= 5 && left + popperWidth < document.body.clientWidth - 5) {
338
+ currentPlacement += 'Left';
339
+ }
323
340
  }
324
341
  }
325
342
 
@@ -381,16 +398,16 @@ function usePopper(locatorElement, popperElement, props) {
381
398
  top: topBottom
382
399
  }
383
400
  };
384
- var alignPos = mapAlign[_currentPlacement];
401
+ var alignPos = mapAlign[currentPlacement];
385
402
  var _arrowPos = {
386
403
  top: 0,
387
404
  left: 0
388
405
  };
389
406
 
390
- if (/left/.test(_currentPlacement) || /right/.test(_currentPlacement)) {
391
- if (/Top/.test(_currentPlacement)) {
407
+ if (/left/.test(currentPlacement) || /right/.test(currentPlacement)) {
408
+ if (/Top/.test(currentPlacement)) {
392
409
  _arrowPos.top = arrowOffset;
393
- } else if (/Bottom/.test(_currentPlacement)) {
410
+ } else if (/Bottom/.test(currentPlacement)) {
394
411
  _arrowPos.top = popperHeight - arrowOffset - 2 * arrowSize;
395
412
  } else {
396
413
  _arrowPos.top = (popperHeight - arrowWidth) / 2 - 1;
@@ -417,29 +434,40 @@ function usePopper(locatorElement, popperElement, props) {
417
434
  _arrowPos.top += scrollBottom - document.body.clientHeight;
418
435
  }
419
436
  }
420
- }
421
-
422
- if (/top/.test(_currentPlacement) || /bottom/.test(_currentPlacement)) {
423
- if (/Left/.test(_currentPlacement)) {
437
+ } else if (/top/.test(currentPlacement) || /bottom/.test(currentPlacement)) {
438
+ if (/Left/.test(currentPlacement)) {
424
439
  _arrowPos.left = arrowOffset;
425
- } else if (/Right/.test(_currentPlacement)) {
440
+ } else if (/Right/.test(currentPlacement)) {
426
441
  _arrowPos.left = popperWidth - arrowOffset - 2 * arrowSize;
427
442
  } else {
428
443
  _arrowPos.left = (popperWidth - arrowWidth) / 2 - 1;
429
444
  }
445
+
446
+ if (left <= 0) {
447
+ alignPos.left = locatorPos.left;
448
+ _arrowPos.left = arrowOffset;
449
+ } else if (right >= document.body.clientWidth) {
450
+ alignPos.left = locatorPos.right - popperWidth;
451
+ alignPos.right = -360;
452
+ _arrowPos.left = popperWidth - arrowOffset - 2 * arrowSize;
453
+ }
430
454
  }
431
455
 
432
456
  setAlign(alignPos);
433
457
  setArrowPos(_arrowPos);
434
- setCurrentPlacement(_currentPlacement);
458
+ setNextPlacement(currentPlacement);
435
459
  }
436
- }, [locatorRef, popperRef, container, trigger, mousePos, placement, gap, arrowOffset, arrowSize, arrowWidth, autoPlacement]);
460
+ }, [locatorRef, popperRef, container, trigger, mousePos, autoPlacement, gap, arrowOffset, arrowSize, arrowWidth]);
437
461
  useEffect(function () {
438
462
  if (canAlign) {
439
463
  alignPopper();
440
464
  setCanAlign(false);
441
465
  props.visible === undefined && setVisible(true);
442
466
  onVisibleChange && onVisibleChange(true);
467
+ setActive(true);
468
+ setTimeout(function () {
469
+ return setActive(false);
470
+ }, 200);
443
471
  }
444
472
  }, [alignPopper, canAlign, onVisibleChange, props]);
445
473
  var arrowStyle = (_arrowStyle = {}, _defineProperty(_arrowStyle, "--arrowSize", arrowSize + 'px'), _defineProperty(_arrowStyle, "--arrowSpill", arrowWidth / -2 + 'px'), _arrowStyle);
@@ -453,10 +481,10 @@ function usePopper(locatorElement, popperElement, props) {
453
481
  var popperProps = {
454
482
  ref: popperRef,
455
483
  style: popperContainerStyle,
456
- className: classNames(prefixCls, popperClassName, currentPlacement, _defineProperty({
484
+ className: classNames(prefixCls, popperClassName, nextPlacement, _defineProperty({
457
485
  arrow: arrow,
458
486
  hidden: !visible
459
- }, "".concat(currentPlacement, "-active"), visible))
487
+ }, "".concat(nextPlacement, "-active"), active))
460
488
  };
461
489
  var popperNode = popperRef.current;
462
490
  var locatorNode = locatorRef.current;
@@ -499,10 +527,10 @@ function usePopper(locatorElement, popperElement, props) {
499
527
  var triggerNode = getTriggerElement(locatorRef.current);
500
528
  var triggerRect = triggerNode.getBoundingClientRect();
501
529
  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;
530
+ var left = /left/.test(nextPlacement) ? popperRect.right : triggerRect.left;
531
+ var right = /right/.test(nextPlacement) ? popperRect.left : triggerRect.right;
532
+ var top = /top/.test(nextPlacement) ? popperRect.bottom : triggerRect.top;
533
+ var bottom = /bottom/.test(nextPlacement) ? popperRect.top : triggerRect.bottom;
506
534
  var X = e.clientX,
507
535
  Y = e.clientY;
508
536
  var inTriggerRect = X > left - 2 && X < right + 2 && Y > top - 2 && Y < bottom + 2;
@@ -535,7 +563,7 @@ function usePopper(locatorElement, popperElement, props) {
535
563
  }) : document.removeEventListener(mapEvent[trigger], debounceHidePopper);
536
564
  };
537
565
  }
538
- }, [currentPlacement, evType, exist, getTriggerElement, hidePopper, locatorRef, mouseLeaveDelay, popperRef, visible]);
566
+ }, [nextPlacement, evType, exist, getTriggerElement, hidePopper, locatorRef, mouseLeaveDelay, popperRef, visible]);
539
567
  useEffect(function () {
540
568
  if (visible) {
541
569
  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,51 @@ 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) {
334
+ var _context5;
335
+
329
336
  if (top - gap - popperHeight <= 5 && bottom + gap + popperHeight < document.body.clientHeight - 5) {
330
- _currentPlacement = _currentPlacement.replace('top', 'bottom');
337
+ currentPlacement = currentPlacement.replace('top', 'bottom');
331
338
  }
332
339
 
333
340
  if (bottom + gap + popperHeight >= document.body.clientHeight - 5 && top - gap - popperHeight > 5) {
334
- _currentPlacement = _currentPlacement.replace('bottom', 'top');
341
+ currentPlacement = currentPlacement.replace('bottom', 'top');
335
342
  }
336
343
 
337
344
  if (left + popperWidth >= document.body.clientWidth - 5 && right - popperWidth > 5) {
338
- _currentPlacement = _currentPlacement.replace('Left', 'Right');
345
+ currentPlacement = currentPlacement.replace('Left', 'Right');
339
346
  }
340
347
 
341
348
  if (right - popperWidth <= 5 && left + popperWidth < document.body.clientWidth - 5) {
342
- _currentPlacement = _currentPlacement.replace('Right', 'Left');
349
+ currentPlacement = currentPlacement.replace('Right', 'Left');
343
350
  }
344
351
 
345
352
  if (top + popperHeight >= document.body.clientHeight - 5 && bottom - popperHeight > 5) {
346
- _currentPlacement = _currentPlacement.replace('Top', 'Bottom');
353
+ currentPlacement = currentPlacement.replace('Top', 'Bottom');
347
354
  }
348
355
 
349
356
  if (bottom - popperHeight <= 5 && top + popperHeight < document.body.clientHeight - 5) {
350
- _currentPlacement = _currentPlacement.replace('Bottom', 'Top');
357
+ currentPlacement = currentPlacement.replace('Bottom', 'Top');
351
358
  }
352
359
 
353
360
  if (left - gap - popperWidth <= 5 && right + gap + popperWidth < document.body.clientWidth - 5) {
354
- _currentPlacement = _currentPlacement.replace('left', 'right');
361
+ currentPlacement = currentPlacement.replace('left', 'right');
355
362
  }
356
363
 
357
364
  if (right + gap + popperWidth >= document.body.clientWidth - 5 && left - gap - popperWidth > 5) {
358
- _currentPlacement = _currentPlacement.replace('right', 'left');
365
+ currentPlacement = currentPlacement.replace('right', 'left');
366
+ }
367
+
368
+ if ((0, _includes.default)(_context5 = ['top', 'bottom']).call(_context5, currentPlacement)) {
369
+ if (right - width / 2 + popperWidth / 2 >= document.body.clientWidth - 5 && right - popperWidth > 5) {
370
+ currentPlacement += 'Right';
371
+ }
372
+
373
+ if (left - width / 2 - popperWidth / 2 <= 5 && left + popperWidth < document.body.clientWidth - 5) {
374
+ currentPlacement += 'Left';
375
+ }
359
376
  }
360
377
  }
361
378
 
@@ -417,16 +434,16 @@ function usePopper(locatorElement, popperElement, props) {
417
434
  top: topBottom
418
435
  }
419
436
  };
420
- var alignPos = mapAlign[_currentPlacement];
437
+ var alignPos = mapAlign[currentPlacement];
421
438
  var _arrowPos = {
422
439
  top: 0,
423
440
  left: 0
424
441
  };
425
442
 
426
- if (/left/.test(_currentPlacement) || /right/.test(_currentPlacement)) {
427
- if (/Top/.test(_currentPlacement)) {
443
+ if (/left/.test(currentPlacement) || /right/.test(currentPlacement)) {
444
+ if (/Top/.test(currentPlacement)) {
428
445
  _arrowPos.top = arrowOffset;
429
- } else if (/Bottom/.test(_currentPlacement)) {
446
+ } else if (/Bottom/.test(currentPlacement)) {
430
447
  _arrowPos.top = popperHeight - arrowOffset - 2 * arrowSize;
431
448
  } else {
432
449
  _arrowPos.top = (popperHeight - arrowWidth) / 2 - 1;
@@ -453,29 +470,40 @@ function usePopper(locatorElement, popperElement, props) {
453
470
  _arrowPos.top += scrollBottom - document.body.clientHeight;
454
471
  }
455
472
  }
456
- }
457
-
458
- if (/top/.test(_currentPlacement) || /bottom/.test(_currentPlacement)) {
459
- if (/Left/.test(_currentPlacement)) {
473
+ } else if (/top/.test(currentPlacement) || /bottom/.test(currentPlacement)) {
474
+ if (/Left/.test(currentPlacement)) {
460
475
  _arrowPos.left = arrowOffset;
461
- } else if (/Right/.test(_currentPlacement)) {
476
+ } else if (/Right/.test(currentPlacement)) {
462
477
  _arrowPos.left = popperWidth - arrowOffset - 2 * arrowSize;
463
478
  } else {
464
479
  _arrowPos.left = (popperWidth - arrowWidth) / 2 - 1;
465
480
  }
481
+
482
+ if (left <= 0) {
483
+ alignPos.left = locatorPos.left;
484
+ _arrowPos.left = arrowOffset;
485
+ } else if (right >= document.body.clientWidth) {
486
+ alignPos.left = locatorPos.right - popperWidth;
487
+ alignPos.right = -360;
488
+ _arrowPos.left = popperWidth - arrowOffset - 2 * arrowSize;
489
+ }
466
490
  }
467
491
 
468
492
  setAlign(alignPos);
469
493
  setArrowPos(_arrowPos);
470
- setCurrentPlacement(_currentPlacement);
494
+ setNextPlacement(currentPlacement);
471
495
  }
472
- }, [locatorRef, popperRef, container, trigger, mousePos, placement, gap, arrowOffset, arrowSize, arrowWidth, autoPlacement]);
496
+ }, [locatorRef, popperRef, container, trigger, mousePos, autoPlacement, gap, arrowOffset, arrowSize, arrowWidth]);
473
497
  (0, _react.useEffect)(function () {
474
498
  if (canAlign) {
475
499
  alignPopper();
476
500
  setCanAlign(false);
477
501
  props.visible === undefined && setVisible(true);
478
502
  onVisibleChange && onVisibleChange(true);
503
+ setActive(true);
504
+ setTimeout(function () {
505
+ return setActive(false);
506
+ }, 200);
479
507
  }
480
508
  }, [alignPopper, canAlign, onVisibleChange, props]);
481
509
  var arrowStyle = (_arrowStyle = {}, (0, _defineProperty2.default)(_arrowStyle, "--arrowSize", arrowSize + 'px'), (0, _defineProperty2.default)(_arrowStyle, "--arrowSpill", arrowWidth / -2 + 'px'), _arrowStyle);
@@ -487,10 +515,10 @@ function usePopper(locatorElement, popperElement, props) {
487
515
  var popperProps = {
488
516
  ref: popperRef,
489
517
  style: popperContainerStyle,
490
- className: (0, _classnames.default)(prefixCls, popperClassName, currentPlacement, (0, _defineProperty2.default)({
518
+ className: (0, _classnames.default)(prefixCls, popperClassName, nextPlacement, (0, _defineProperty2.default)({
491
519
  arrow: arrow,
492
520
  hidden: !visible
493
- }, "".concat(currentPlacement, "-active"), visible))
521
+ }, "".concat(nextPlacement, "-active"), active))
494
522
  };
495
523
  var popperNode = popperRef.current;
496
524
  var locatorNode = locatorRef.current;
@@ -533,10 +561,10 @@ function usePopper(locatorElement, popperElement, props) {
533
561
  var triggerNode = getTriggerElement(locatorRef.current);
534
562
  var triggerRect = triggerNode.getBoundingClientRect();
535
563
  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;
564
+ var left = /left/.test(nextPlacement) ? popperRect.right : triggerRect.left;
565
+ var right = /right/.test(nextPlacement) ? popperRect.left : triggerRect.right;
566
+ var top = /top/.test(nextPlacement) ? popperRect.bottom : triggerRect.top;
567
+ var bottom = /bottom/.test(nextPlacement) ? popperRect.top : triggerRect.bottom;
540
568
  var X = e.clientX,
541
569
  Y = e.clientY;
542
570
  var inTriggerRect = X > left - 2 && X < right + 2 && Y > top - 2 && Y < bottom + 2;
@@ -569,7 +597,7 @@ function usePopper(locatorElement, popperElement, props) {
569
597
  }) : document.removeEventListener(mapEvent[trigger], debounceHidePopper);
570
598
  };
571
599
  }
572
- }, [currentPlacement, evType, exist, getTriggerElement, hidePopper, locatorRef, mouseLeaveDelay, popperRef, visible]);
600
+ }, [nextPlacement, evType, exist, getTriggerElement, hidePopper, locatorRef, mouseLeaveDelay, popperRef, visible]);
573
601
  (0, _react.useEffect)(function () {
574
602
  if (visible) {
575
603
  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.8",
4
4
  "description": "KDesign 金蝶前端react 组件库",
5
5
  "title": "kdesign",
6
6
  "keywords": [