@kdcloudjs/kdesign 1.5.6 → 1.5.7

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