@kdcloudjs/kdesign 1.5.7 → 1.5.8

package/dist/kdesign.js

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @kdcloudjs/kdesign v1.5.6
+ *   @kdcloudjs/kdesign v1.5.7
  * 
  *   Copyright 2020-present, Kingdee, Inc.
  *   All rights reserved.
@@ -1567,6 +1567,11 @@ function usePopper(locatorElement, popperElement, props) {
       visible = _useState10[0],
       setVisible = _useState10[1];
 
+  var _useState11 = Object(react__WEBPACK_IMPORTED_MODULE_19__["useState"])(false),
+      _useState12 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_6___default()(_useState11, 2),
+      active = _useState12[0],
+      setActive = _useState12[1];
+
   Object(react__WEBPACK_IMPORTED_MODULE_19__["useEffect"])(function () {
     if (props.visible) {
       !exist && setExist(true);
@@ -1577,20 +1582,20 @@ function usePopper(locatorElement, popperElement, props) {
     }
   }, [exist, props.visible]);
 
-  var _useState11 = Object(react__WEBPACK_IMPORTED_MODULE_19__["useState"])(''),
-      _useState12 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_6___default()(_useState11, 2),
-      evType = _useState12[0],
-      setEvType = _useState12[1];
-
-  var _useState13 = Object(react__WEBPACK_IMPORTED_MODULE_19__["useState"])(),
+  var _useState13 = Object(react__WEBPACK_IMPORTED_MODULE_19__["useState"])(''),
       _useState14 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_6___default()(_useState13, 2),
-      align = _useState14[0],
-      setAlign = _useState14[1];
+      evType = _useState14[0],
+      setEvType = _useState14[1];
 
-  var _useState15 = Object(react__WEBPACK_IMPORTED_MODULE_19__["useState"])(placement),
+  var _useState15 = Object(react__WEBPACK_IMPORTED_MODULE_19__["useState"])(),
       _useState16 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_6___default()(_useState15, 2),
-      currentPlacement = _useState16[0],
-      setCurrentPlacement = _useState16[1];
+      align = _useState16[0],
+      setAlign = _useState16[1];
+
+  var _useState17 = Object(react__WEBPACK_IMPORTED_MODULE_19__["useState"])(placement),
+      _useState18 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_6___default()(_useState17, 2),
+      nextPlacement = _useState18[0],
+      setNextPlacement = _useState18[1];
 
   var alignPopper = Object(react__WEBPACK_IMPORTED_MODULE_19__["useCallback"])(function () {
     if (locatorRef !== null && locatorRef !== void 0 && locatorRef.current && popperRef !== null && popperRef !== void 0 && popperRef.current) {
@@ -1635,39 +1640,49 @@ function usePopper(locatorElement, popperElement, props) {
         bottom: locatorTop + borderTop + translateTop + height - containerTop - scrollTop
       };
       var currentPos = trigger === 'contextMenu' ? mousePos : locatorPos;
-      var _currentPlacement = placement;
+      var currentPlacement = nextPlacement;
 
       if (autoPlacement) {
         if (top - gap - popperHeight <= 5 && bottom + gap + popperHeight < document.body.clientHeight - 5) {
-          _currentPlacement = _currentPlacement.replace('top', 'bottom');
+          currentPlacement = currentPlacement.replace('top', 'bottom');
         }
 
         if (bottom + gap + popperHeight >= document.body.clientHeight - 5 && top - gap - popperHeight > 5) {
-          _currentPlacement = _currentPlacement.replace('bottom', 'top');
+          currentPlacement = currentPlacement.replace('bottom', 'top');
         }
 
         if (left + popperWidth >= document.body.clientWidth - 5 && right - popperWidth > 5) {
-          _currentPlacement = _currentPlacement.replace('Left', 'Right');
+          currentPlacement = currentPlacement.replace('Left', 'Right');
         }
 
         if (right - popperWidth <= 5 && left + popperWidth < document.body.clientWidth - 5) {
-          _currentPlacement = _currentPlacement.replace('Right', 'Left');
+          currentPlacement = currentPlacement.replace('Right', 'Left');
         }
 
         if (top + popperHeight >= document.body.clientHeight - 5 && bottom - popperHeight > 5) {
-          _currentPlacement = _currentPlacement.replace('Top', 'Bottom');
+          currentPlacement = currentPlacement.replace('Top', 'Bottom');
         }
 
         if (bottom - popperHeight <= 5 && top + popperHeight < document.body.clientHeight - 5) {
-          _currentPlacement = _currentPlacement.replace('Bottom', 'Top');
+          currentPlacement = currentPlacement.replace('Bottom', 'Top');
         }
 
         if (left - gap - popperWidth <= 5 && right + gap + popperWidth < document.body.clientWidth - 5) {
-          _currentPlacement = _currentPlacement.replace('left', 'right');
+          currentPlacement = currentPlacement.replace('left', 'right');
         }
 
         if (right + gap + popperWidth >= document.body.clientWidth - 5 && left - gap - popperWidth > 5) {
-          _currentPlacement = _currentPlacement.replace('right', 'left');
+          currentPlacement = currentPlacement.replace('right', 'left');
+        }
+
+        if (['top', 'bottom'].includes(currentPlacement)) {
+          if (right - width / 2 + popperWidth / 2 >= document.body.clientWidth - 5 && right - popperWidth > 5) {
+            currentPlacement += 'Right';
+          }
+
+          if (left - width / 2 - popperWidth / 2 <= 5 && left + popperWidth < document.body.clientWidth - 5) {
+            currentPlacement += 'Left';
+          }
         }
       }
 
@@ -1729,16 +1744,16 @@ function usePopper(locatorElement, popperElement, props) {
           top: topBottom
         }
       };
-      var alignPos = mapAlign[_currentPlacement];
+      var alignPos = mapAlign[currentPlacement];
       var _arrowPos = {
         top: 0,
         left: 0
       };
 
-      if (/left/.test(_currentPlacement) || /right/.test(_currentPlacement)) {
-        if (/Top/.test(_currentPlacement)) {
+      if (/left/.test(currentPlacement) || /right/.test(currentPlacement)) {
+        if (/Top/.test(currentPlacement)) {
           _arrowPos.top = arrowOffset;
-        } else if (/Bottom/.test(_currentPlacement)) {
+        } else if (/Bottom/.test(currentPlacement)) {
           _arrowPos.top = popperHeight - arrowOffset - 2 * arrowSize;
         } else {
           _arrowPos.top = (popperHeight - arrowWidth) / 2 - 1;
@@ -1765,29 +1780,40 @@ function usePopper(locatorElement, popperElement, props) {
             _arrowPos.top += scrollBottom - document.body.clientHeight;
           }
         }
-      }
-
-      if (/top/.test(_currentPlacement) || /bottom/.test(_currentPlacement)) {
-        if (/Left/.test(_currentPlacement)) {
+      } else if (/top/.test(currentPlacement) || /bottom/.test(currentPlacement)) {
+        if (/Left/.test(currentPlacement)) {
           _arrowPos.left = arrowOffset;
-        } else if (/Right/.test(_currentPlacement)) {
+        } else if (/Right/.test(currentPlacement)) {
           _arrowPos.left = popperWidth - arrowOffset - 2 * arrowSize;
         } else {
           _arrowPos.left = (popperWidth - arrowWidth) / 2 - 1;
         }
+
+        if (left <= 0) {
+          alignPos.left = locatorPos.left;
+          _arrowPos.left = arrowOffset;
+        } else if (right >= document.body.clientWidth) {
+          alignPos.left = locatorPos.right - popperWidth;
+          alignPos.right = -360;
+          _arrowPos.left = popperWidth - arrowOffset - 2 * arrowSize;
+        }
       }
 
       setAlign(alignPos);
       setArrowPos(_arrowPos);
-      setCurrentPlacement(_currentPlacement);
+      setNextPlacement(currentPlacement);
     }
-  }, [locatorRef, popperRef, container, trigger, mousePos, placement, gap, arrowOffset, arrowSize, arrowWidth, autoPlacement]);
+  }, [locatorRef, popperRef, container, trigger, mousePos, autoPlacement, gap, arrowOffset, arrowSize, arrowWidth]);
   Object(react__WEBPACK_IMPORTED_MODULE_19__["useEffect"])(function () {
     if (canAlign) {
       alignPopper();
       setCanAlign(false);
       props.visible === undefined && setVisible(true);
       onVisibleChange && onVisibleChange(true);
+      setActive(true);
+      setTimeout(function () {
+        return setActive(false);
+      }, 200);
     }
   }, [alignPopper, canAlign, onVisibleChange, props]);
   var arrowStyle = (_arrowStyle = {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_5___default()(_arrowStyle, "--arrowSize", arrowSize + 'px'), _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_5___default()(_arrowStyle, "--arrowSpill", arrowWidth / -2 + 'px'), _arrowStyle);
@@ -1801,10 +1827,10 @@ function usePopper(locatorElement, popperElement, props) {
   var popperProps = {
     ref: popperRef,
     style: popperContainerStyle,
-    className: classnames__WEBPACK_IMPORTED_MODULE_23___default()(prefixCls, popperClassName, currentPlacement, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_5___default()({
+    className: classnames__WEBPACK_IMPORTED_MODULE_23___default()(prefixCls, popperClassName, nextPlacement, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_5___default()({
       arrow: arrow,
       hidden: !visible
-    }, "".concat(currentPlacement, "-active"), visible))
+    }, "".concat(nextPlacement, "-active"), active))
   };
   var popperNode = popperRef.current;
   var locatorNode = locatorRef.current;
@@ -1847,10 +1873,10 @@ function usePopper(locatorElement, popperElement, props) {
         var triggerNode = getTriggerElement(locatorRef.current);
         var triggerRect = triggerNode.getBoundingClientRect();
         var popperRect = popperRef.current.getBoundingClientRect();
-        var left = /left/.test(currentPlacement) ? popperRect.right : triggerRect.left;
-        var right = /right/.test(currentPlacement) ? popperRect.left : triggerRect.right;
-        var top = /top/.test(currentPlacement) ? popperRect.bottom : triggerRect.top;
-        var bottom = /bottom/.test(currentPlacement) ? popperRect.top : triggerRect.bottom;
+        var left = /left/.test(nextPlacement) ? popperRect.right : triggerRect.left;
+        var right = /right/.test(nextPlacement) ? popperRect.left : triggerRect.right;
+        var top = /top/.test(nextPlacement) ? popperRect.bottom : triggerRect.top;
+        var bottom = /bottom/.test(nextPlacement) ? popperRect.top : triggerRect.bottom;
         var X = e.clientX,
             Y = e.clientY;
         var inTriggerRect = X > left - 2 && X < right + 2 && Y > top - 2 && Y < bottom + 2;
@@ -1883,7 +1909,7 @@ function usePopper(locatorElement, popperElement, props) {
         }) : document.removeEventListener(mapEvent[trigger], debounceHidePopper);
       };
     }
-  }, [currentPlacement, evType, exist, getTriggerElement, hidePopper, locatorRef, mouseLeaveDelay, popperRef, visible]);
+  }, [nextPlacement, evType, exist, getTriggerElement, hidePopper, locatorRef, mouseLeaveDelay, popperRef, visible]);
   Object(react__WEBPACK_IMPORTED_MODULE_19__["useEffect"])(function () {
     if (visible) {
       var scrollAlign = lodash_debounce__WEBPACK_IMPORTED_MODULE_22___default()(function (e) {