@douyinfe/semi-foundation 2.21.0 → 2.22.0-alpha.0

package/lib/cjs/modal/modalContentFoundation.d.ts

@@ -28,7 +28,7 @@ export default class ModalContentFoundation extends BaseFoundation<ModalContentA
     destroy(): void;
     handleDialogMouseDown(): void;
     handleMaskMouseUp(): void;
-    handleKeyDown(e: any): void;
+    handleKeyDown: (e: any) => void;
     handleKeyDownEventListenerMount(): void;
     handleKeyDownEventListenerUnmount(): void;
     getMouseState(): void;

package/lib/cjs/modal/modalContentFoundation.js

@@ -14,6 +14,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 class ModalContentFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign(Object.assign({}, ModalContentFoundation.defaultAdapter), adapter));
+
+    this.handleKeyDown = e => {
+      const {
+        closeOnEsc
+      } = this.getProps();
+
+      if (closeOnEsc && e.keyCode === _keyCode.default.ESC) {
+        e.stopPropagation();
+        this.close(e);
+        return;
+      }
+    };
   }
 
   destroy() {
@@ -30,18 +42,6 @@ class ModalContentFoundation extends _foundation.default {
     this._adapter.notifyDialogMouseUp();
   }
 
-  handleKeyDown(e) {
-    const {
-      closeOnEsc
-    } = this.getProps();
-
-    if (closeOnEsc && e.keyCode === _keyCode.default.ESC) {
-      e.stopPropagation();
-      this.close(e);
-      return;
-    }
-  }
-
   handleKeyDownEventListenerMount() {
     this._adapter.addKeyDownEventListener();
   }

package/lib/cjs/tooltip/constants.d.ts

@@ -18,5 +18,6 @@ declare const numbers: {
     readonly MOUSE_ENTER_DELAY: 50;
     readonly MOUSE_LEAVE_DELAY: 50;
     readonly SPACING: 8;
+    readonly MARGIN: 0;
 };
 export { cssClasses, strings, numbers };

package/lib/cjs/tooltip/constants.js

@@ -28,7 +28,7 @@ const numbers = {
   DEFAULT_Z_INDEX: 1060,
   MOUSE_ENTER_DELAY: 50,
   MOUSE_LEAVE_DELAY: 50,
-  SPACING: 8 // Values are consistent with spacing-tight in scss
-
+  SPACING: 8,
+  MARGIN: 0
 };
 exports.numbers = numbers;

package/lib/cjs/tooltip/foundation.d.ts

@@ -69,6 +69,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     _bindResizeEvent(): void;
     _unBindResizeEvent(): void;
     _reversePos(position?: string, isVertical?: boolean): string;
+    _adjustPos(position?: string, shouldReverseArr?: boolean[], isVertical?: boolean): string;
     clearDelayTimer(): void;
     _generateEvent(types: ArrayElement<typeof strings.TRIGGER_SET>): {
         triggerEventSet: {
@@ -83,7 +84,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     _togglePortalVisible(isVisible: boolean): void;
     _roundPixel(pixel: number): number;
     calcTransformOrigin(position: Position, triggerRect: DOMRect, translateX: number, translateY: number): string;
-    calcPosStyle(triggerRect: DOMRect, wrapperRect: DOMRect, containerRect: PopupContainerDOMRect, position?: Position, spacing?: number): Record<string, string | number>;
+    calcPosStyle(triggerRect: DOMRect, wrapperRect: DOMRect, containerRect: PopupContainerDOMRect, position?: Position, spacing?: number, isOverFlow?: [boolean, boolean]): Record<string, string | number>;
     /**
      * 耦合的东西比较多，稍微罗列一下：
      *
@@ -100,7 +101,15 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     calcPosition: (triggerRect?: DOMRect, wrapperRect?: DOMRect, containerRect?: PopupContainerDOMRect, shouldUpdatePos?: boolean) => Record<string, string | number>;
     isLR(position?: string): boolean;
     isTB(position?: string): boolean;
-    adjustPosIfNeed(position: Position | string, style: Record<string, any>, triggerRect: DOMRect, wrapperRect: DOMRect, containerRect: PopupContainerDOMRect): string;
+    isReverse(rowSpace: number, reverseSpace: number, size: number): boolean;
+    isOverFlow(rowSpace: number, reverseSpace: number, size: number): boolean;
+    isHalfOverFlow(posSpace: number, negSpace: number, size: number): boolean;
+    getReverse(viewOvf: boolean, cntrOvf: boolean, shouldRevView: boolean, shouldRevCntr: boolean): boolean;
+    adjustPosIfNeed(position: Position | string, style: Record<string, any>, triggerRect: DOMRect, wrapperRect: DOMRect, containerRect: PopupContainerDOMRect): {
+        position: string;
+        isHeightOverFlow: boolean;
+        isWidthOverFlow: boolean;
+    };
     delayHide: () => void;
     hide: () => void;
     _bindScrollEvent(): void;

package/lib/cjs/tooltip/foundation.js

@@ -130,11 +130,15 @@ class Tooltip extends _foundation.default {
 
       if (_this.getProp('autoAdjustOverflow')) {
         // console.log('style: ', style, '\ntriggerRect: ', triggerRect, '\nwrapperRect: ', wrapperRect);
-        const adjustedPos = _this.adjustPosIfNeed(position, style, triggerRect, wrapperRect, containerRect);
+        const {
+          position: adjustedPos,
+          isHeightOverFlow,
+          isWidthOverFlow
+        } = _this.adjustPosIfNeed(position, style, triggerRect, wrapperRect, containerRect);
 
-        if (position !== adjustedPos) {
+        if (position !== adjustedPos || isHeightOverFlow || isWidthOverFlow) {
           position = adjustedPos;
-          style = _this.calcPosStyle(triggerRect, wrapperRect, containerRect, position);
+          style = _this.calcPosStyle(triggerRect, wrapperRect, containerRect, position, null, [isHeightOverFlow, isWidthOverFlow]);
         }
       }
 
@@ -314,6 +318,28 @@ class Tooltip extends _foundation.default {
     return position;
   }
 
+  _adjustPos() {
+    let position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    let shouldReverseArr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [true, false];
+    let isVertical = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
+    if (isVertical) {
+      if (shouldReverseArr[0]) {
+        return position.concat('Right'); // top -> topRight
+      } else if (shouldReverseArr[1]) {
+        return position.concat('Left'); // top -> topLeft
+      }
+    } else {
+      if (shouldReverseArr[0]) {
+        return position.concat('Bottom'); // left -> leftBottom
+      } else if (shouldReverseArr[1]) {
+        return position.concat('Top'); // left -> leftTop
+      }
+    }
+
+    return position;
+  }
+
   clearDelayTimer() {
     if (this._timer) {
       clearTimeout(this._timer);
@@ -474,7 +500,7 @@ class Tooltip extends _foundation.default {
     return null;
   }
 
-  calcPosStyle(triggerRect, wrapperRect, containerRect, position, spacing) {
+  calcPosStyle(triggerRect, wrapperRect, containerRect, position, spacing, isOverFlow) {
     triggerRect = ((0, _isEmpty2.default)(triggerRect) ? triggerRect : this._adapter.getTriggerBounding()) || Object.assign({}, defaultRect);
     containerRect = ((0, _isEmpty2.default)(containerRect) ? containerRect : this._adapter.getPopupContainerRect()) || Object.assign({}, defaultRect);
     wrapperRect = ((0, _isEmpty2.default)(wrapperRect) ? wrapperRect : this._adapter.getWrapperBounding()) || Object.assign({}, defaultRect); // eslint-disable-next-line
@@ -505,79 +531,112 @@ class Tooltip extends _foundation.default {
     const middleY = triggerRect.top + triggerRect.height / 2;
     const offsetXWithArrow = positionOffsetX + horizontalArrowWidth / 2;
     const offsetYWithArrow = positionOffsetY + verticalArrowHeight / 2;
+    const heightDifference = wrapperRect.height - containerRect.height;
+    const widthDifference = wrapperRect.width - containerRect.width;
+    const offsetHeight = heightDifference > 0 ? heightDifference : 0;
+    const offsetWidth = widthDifference > 0 ? widthDifference : 0;
+    const isHeightOverFlow = isOverFlow && isOverFlow[0];
+    const isWitdhOverFlow = isOverFlow && isOverFlow[1];
+    const isTriggerNearLeft = middleX - containerRect.left < containerRect.right - middleX;
+    const isTriggerNearTop = middleY - containerRect.top < containerRect.bottom - middleY;
 
     switch (position) {
       case 'top':
-        left = middleX;
-        top = triggerRect.top - SPACING;
+        // left = middleX;
+        // top = triggerRect.top - SPACING;
+        left = isWitdhOverFlow ? isTriggerNearLeft ? containerRect.left + wrapperRect.width / 2 : containerRect.right - wrapperRect.width / 2 + offsetWidth : middleX;
+        top = isHeightOverFlow ? containerRect.bottom - SPACING + offsetHeight : triggerRect.top - SPACING;
         translateX = -0.5;
         translateY = -1;
         break;
 
       case 'topLeft':
-        left = pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
-        top = triggerRect.top - SPACING;
+        // left = pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
+        // top = triggerRect.top - SPACING;
+        left = isWitdhOverFlow ? containerRect.left : pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
+        top = isHeightOverFlow ? containerRect.bottom - SPACING + offsetHeight : triggerRect.top - SPACING;
         translateY = -1;
         break;
 
       case 'topRight':
-        left = pointAtCenter ? middleX + offsetXWithArrow : triggerRect.right;
-        top = triggerRect.top - SPACING;
+        // left = pointAtCenter ? middleX + offsetXWithArrow : triggerRect.right;
+        // top = triggerRect.top - SPACING;
+        left = isWitdhOverFlow ? containerRect.right + offsetWidth : pointAtCenter ? middleX + offsetXWithArrow : triggerRect.right;
+        top = isHeightOverFlow ? containerRect.bottom - SPACING + offsetHeight : triggerRect.top - SPACING;
         translateY = -1;
         translateX = -1;
         break;
 
       case 'left':
-        left = triggerRect.left - SPACING;
-        top = middleY;
+        // left = triggerRect.left - SPACING;
+        // top = middleY;
+        // left = isWitdhOverFlow? containerRect.right - SPACING : triggerRect.left - SPACING;
+        left = isWitdhOverFlow ? containerRect.right + offsetWidth - SPACING : triggerRect.left - SPACING;
+        top = isHeightOverFlow ? isTriggerNearTop ? containerRect.top + wrapperRect.height / 2 : containerRect.bottom - wrapperRect.height / 2 + offsetHeight : middleY;
         translateX = -1;
         translateY = -0.5;
         break;
 
       case 'leftTop':
-        left = triggerRect.left - SPACING;
-        top = pointAtCenter ? middleY - offsetYWithArrow : triggerRect.top;
+        // left = triggerRect.left - SPACING;
+        // top = pointAtCenter ? middleY - offsetYWithArrow : triggerRect.top;
+        left = isWitdhOverFlow ? containerRect.right + offsetWidth - SPACING : triggerRect.left - SPACING;
+        top = isHeightOverFlow ? containerRect.top : pointAtCenter ? middleY - offsetYWithArrow : triggerRect.top;
         translateX = -1;
         break;
 
       case 'leftBottom':
-        left = triggerRect.left - SPACING;
-        top = pointAtCenter ? middleY + offsetYWithArrow : triggerRect.bottom;
+        // left = triggerRect.left - SPACING;
+        // top = pointAtCenter ? middleY + offsetYWithArrow : triggerRect.bottom;
+        left = isWitdhOverFlow ? containerRect.right + offsetWidth - SPACING : triggerRect.left - SPACING;
+        top = isHeightOverFlow ? containerRect.bottom + offsetHeight : pointAtCenter ? middleY + offsetYWithArrow : triggerRect.bottom;
         translateX = -1;
         translateY = -1;
         break;
 
       case 'bottom':
-        left = middleX;
-        top = triggerRect.top + triggerRect.height + SPACING;
+        // left = middleX;
+        // top = triggerRect.top + triggerRect.height + SPACING;
+        left = isWitdhOverFlow ? isTriggerNearLeft ? containerRect.left + wrapperRect.width / 2 : containerRect.right - wrapperRect.width / 2 + offsetWidth : middleX;
+        top = isHeightOverFlow ? containerRect.top - SPACING + offsetYWithArrow : triggerRect.top + triggerRect.height + SPACING;
         translateX = -0.5;
         break;
 
       case 'bottomLeft':
-        left = pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
-        top = triggerRect.bottom + SPACING;
+        // left = pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
+        // top = triggerRect.bottom + SPACING;
+        left = isWitdhOverFlow ? containerRect.left : pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
+        top = isHeightOverFlow ? containerRect.top + offsetYWithArrow - SPACING : triggerRect.top + triggerRect.height + SPACING;
         break;
 
       case 'bottomRight':
-        left = pointAtCenter ? middleX + offsetXWithArrow : triggerRect.right;
-        top = triggerRect.bottom + SPACING;
+        // left = pointAtCenter ? middleX + offsetXWithArrow : triggerRect.right;
+        // top = triggerRect.bottom + SPACING;
+        left = isWitdhOverFlow ? containerRect.right + offsetWidth : pointAtCenter ? middleX + offsetXWithArrow : triggerRect.right;
+        top = isHeightOverFlow ? containerRect.top + offsetYWithArrow - SPACING : triggerRect.top + triggerRect.height + SPACING;
         translateX = -1;
         break;
 
       case 'right':
-        left = triggerRect.right + SPACING;
-        top = middleY;
+        // left = triggerRect.right + SPACING;
+        // top = middleY;
+        left = isWitdhOverFlow ? containerRect.left - SPACING + offsetXWithArrow : triggerRect.right + SPACING;
+        top = isHeightOverFlow ? isTriggerNearTop ? containerRect.top + wrapperRect.height / 2 : containerRect.bottom - wrapperRect.height / 2 + offsetHeight : middleY;
         translateY = -0.5;
         break;
 
       case 'rightTop':
-        left = triggerRect.right + SPACING;
-        top = pointAtCenter ? middleY - offsetYWithArrow : triggerRect.top;
+        // left = triggerRect.right + SPACING;
+        // top = pointAtCenter ? middleY - offsetYWithArrow : triggerRect.top;
+        left = isWitdhOverFlow ? containerRect.left - SPACING + offsetXWithArrow : triggerRect.right + SPACING;
+        top = isHeightOverFlow ? containerRect.top : pointAtCenter ? middleY - offsetYWithArrow : triggerRect.top;
         break;
 
       case 'rightBottom':
-        left = triggerRect.right + SPACING;
-        top = pointAtCenter ? middleY + offsetYWithArrow : triggerRect.bottom;
+        // left = triggerRect.right + SPACING;
+        // top = pointAtCenter ? middleY + offsetYWithArrow : triggerRect.bottom;
+        left = isWitdhOverFlow ? containerRect.left - SPACING + offsetXWithArrow : triggerRect.right + SPACING;
+        top = isHeightOverFlow ? containerRect.bottom + offsetHeight : pointAtCenter ? middleY + offsetYWithArrow : triggerRect.bottom;
         translateY = -1;
         break;
 
@@ -684,12 +743,35 @@ class Tooltip extends _foundation.default {
 
   isLR() {
     let position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-    return position.indexOf('left') === 0 || position.indexOf('right') === 0;
+    return position.includes('left') || position.includes('right');
   }
 
   isTB() {
     let position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-    return position.indexOf('top') === 0 || position.indexOf('bottom') === 0;
+    return position.includes('top') || position.includes('bottom');
+  }
+
+  isReverse(rowSpace, reverseSpace, size) {
+    // 原空间不足，反向空间足够
+    return rowSpace < size && reverseSpace > size;
+  }
+
+  isOverFlow(rowSpace, reverseSpace, size) {
+    // 原空间且反向空间都不足
+    return rowSpace < size && reverseSpace < size;
+  }
+
+  isHalfOverFlow(posSpace, negSpace, size) {
+    // 正半空间或者负半空间不足，即表示有遮挡，需要偏移
+    return posSpace < size || negSpace < size;
+  }
+
+  getReverse(viewOvf, cntrOvf, shouldRevView, shouldRevCntr) {
+    // 基于视口和容器一起判断，以下几种情况允许从原方向转到反方向，以判断是否应该由top->bottom为例子
+    // 1. 视口上下空间不足 且 容器上空间❌下空间✅
+    // 2. 视口上空间❌下空间✅ 且 容器上下空间不足
+    // 3. 视口上空间❌下空间✅ 且 容器上空间❌下空间✅
+    return viewOvf && shouldRevCntr || shouldRevView && cntrOvf || shouldRevView && shouldRevCntr;
   } // place the dom correctly
 
 
@@ -701,6 +783,8 @@ class Tooltip extends _foundation.default {
     const {
       spacing
     } = this.getProps();
+    let isHeightOverFlow = false;
+    let isWidthOverFlow = false;
 
     if (wrapperRect.width > 0 && wrapperRect.height > 0) {
       // let clientLeft = left + translateX * wrapperRect.width - containerRect.scrollLeft;
@@ -723,19 +807,90 @@ class Tooltip extends _foundation.default {
       const restClientBottom = innerHeight - clientBottom;
       const widthIsBigger = wrapperRect.width > triggerRect.width;
       const heightIsBigger = wrapperRect.height > triggerRect.height; // The wrapperR ect.top|bottom equivalent cannot be directly used here for comparison, which is easy to cause jitter
-
-      const shouldReverseTop = clientTop < wrapperRect.height + spacing && restClientBottom > wrapperRect.height + spacing;
-      const shouldReverseLeft = clientLeft < wrapperRect.width + spacing && restClientRight > wrapperRect.width + spacing;
-      const shouldReverseBottom = restClientBottom < wrapperRect.height + spacing && clientTop > wrapperRect.height + spacing;
-      const shouldReverseRight = restClientRight < wrapperRect.width + spacing && clientLeft > wrapperRect.width + spacing;
-      const shouldReverseTopOver = restClientTop < wrapperRect.height + spacing && clientBottom > wrapperRect.height + spacing;
-      const shouldReverseBottomOver = clientBottom < wrapperRect.height + spacing && restClientTop > wrapperRect.height + spacing;
-      const shouldReverseTopSide = restClientTop < wrapperRect.height && clientBottom > wrapperRect.height;
-      const shouldReverseBottomSide = clientBottom < wrapperRect.height && restClientTop > wrapperRect.height;
-      const shouldReverseLeftSide = restClientLeft < wrapperRect.width && clientRight > wrapperRect.width;
-      const shouldReverseRightSide = clientRight < wrapperRect.width && restClientLeft > wrapperRect.width;
+      // 基于视口的微调判断
+
+      const shouldViewReverseTop = clientTop < wrapperRect.height + spacing && restClientBottom > wrapperRect.height + spacing;
+      const shouldViewReverseLeft = clientLeft < wrapperRect.width + spacing && restClientRight > wrapperRect.width + spacing;
+      const shouldViewReverseBottom = restClientBottom < wrapperRect.height + spacing && clientTop > wrapperRect.height + spacing;
+      const shouldViewReverseRight = restClientRight < wrapperRect.width + spacing && clientLeft > wrapperRect.width + spacing;
+      const shouldViewReverseTopOver = restClientTop < wrapperRect.height + spacing && clientBottom > wrapperRect.height + spacing;
+      const shouldViewReverseBottomOver = clientBottom < wrapperRect.height + spacing && restClientTop > wrapperRect.height + spacing;
+      const shouldViewReverseTopSide = restClientTop < wrapperRect.height && clientBottom > wrapperRect.height;
+      const shouldViewReverseBottomSide = clientBottom < wrapperRect.height && restClientTop > wrapperRect.height;
+      const shouldViewReverseLeftSide = restClientLeft < wrapperRect.width && clientRight > wrapperRect.width;
+      const shouldViewReverseRightSide = clientRight < wrapperRect.width && restClientLeft > wrapperRect.width;
       const shouldReverseLeftOver = restClientLeft < wrapperRect.width && clientRight > wrapperRect.width;
-      const shouldReverseRightOver = clientRight < wrapperRect.width && restClientLeft > wrapperRect.width;
+      const shouldReverseRightOver = clientRight < wrapperRect.width && restClientLeft > wrapperRect.width; // 基于容器的微调判断
+
+      const clientTopInCntr = clientTop - containerRect.top;
+      const clientLeftInCntr = clientLeft - containerRect.left;
+      const clientBottomInCntr = clientTopInCntr + triggerRect.height;
+      const clientRightInCntr = clientLeftInCntr + triggerRect.width;
+      const restClientBottomInCntr = containerRect.bottom - clientBottom;
+      const restClientRightInCntr = containerRect.right - clientRight;
+      const restClientTopInCntr = restClientBottomInCntr + triggerRect.height;
+      const restClientLeftInCntr = restClientRightInCntr + triggerRect.width; // 当原空间不足，反向空间足够时，可以反向。
+
+      const shouldCntrReverseTop = this.isReverse(clientTopInCntr, restClientBottomInCntr, wrapperRect.height + spacing);
+      const shouldCntrReverseLeft = this.isReverse(clientLeftInCntr, restClientRightInCntr, wrapperRect.width + spacing);
+      const shouldCntrReverseBottom = this.isReverse(restClientBottomInCntr, clientTopInCntr, wrapperRect.height + spacing);
+      const shouldCntrReverseRight = this.isReverse(restClientRightInCntr, clientLeftInCntr, wrapperRect.width + spacing);
+      const shouldCntrReverseTopOver = this.isReverse(restClientTopInCntr, clientBottomInCntr, wrapperRect.height + spacing);
+      const shouldCntrReverseBottomOver = this.isReverse(clientBottomInCntr, restClientTopInCntr, wrapperRect.height + spacing);
+      const shouldCntrReverseTopSide = this.isReverse(restClientTopInCntr, clientBottomInCntr, wrapperRect.height);
+      const shouldCntrReverseBottomSide = this.isReverse(clientBottomInCntr, restClientTopInCntr, wrapperRect.height);
+      const shouldCntrReverseLeftSide = this.isReverse(restClientLeftInCntr, clientRightInCntr, wrapperRect.width);
+      const shouldCntrReverseRightSide = this.isReverse(clientRightInCntr, restClientLeftInCntr, wrapperRect.width);
+      const halfHeight = triggerRect.height / 2;
+      const halfWidth = triggerRect.width / 2; // 视口, 原空间与反向空间是否都不足判断
+
+      const isViewYOvf = this.isOverFlow(clientTop, restClientBottom, wrapperRect.height + spacing);
+      const isViewXOvf = this.isOverFlow(clientLeft, restClientRight, wrapperRect.width + spacing);
+      const isViewYOvfSide = this.isOverFlow(clientBottom, restClientTop, wrapperRect.height + spacing);
+      const isViewXOvfSide = this.isOverFlow(clientRight, restClientLeft, wrapperRect.width + spacing);
+      const isViewYOvfSideHalf = this.isHalfOverFlow(clientBottom - halfHeight, restClientTop - halfHeight, wrapperRect.height / 2);
+      const isViewXOvfSideHalf = this.isHalfOverFlow(clientRight - halfWidth, restClientLeft - halfWidth, wrapperRect.width / 2); // 容器, 原空间与反向空间是否都不足判断
+
+      const isCntrYOvf = this.isOverFlow(clientTopInCntr, restClientBottomInCntr, wrapperRect.height + spacing);
+      const isCntrXOvf = this.isOverFlow(clientLeftInCntr, restClientRightInCntr, wrapperRect.width + spacing);
+      const isCntrYOvfSide = this.isOverFlow(clientBottomInCntr, restClientTopInCntr, wrapperRect.height + spacing);
+      const isCntrXOvfSide = this.isOverFlow(clientRightInCntr, restClientLeftInCntr, wrapperRect.width + spacing);
+      const isCntrYOvfSideHalf = this.isHalfOverFlow(clientBottomInCntr - halfHeight, restClientTopInCntr - halfHeight, wrapperRect.height / 2);
+      const isCntrXOvfSideHalf = this.isHalfOverFlow(clientRightInCntr - halfWidth, restClientLeftInCntr - halfWidth, wrapperRect.width / 2); // 综合 viewport + container 判断微调，即视口 + 容器都放置不行时才能考虑位置调整
+
+      const shouldReverseTop = this.getReverse(isViewYOvf, isCntrYOvf, shouldViewReverseTop, shouldCntrReverseTop);
+      const shouldReverseLeft = this.getReverse(isViewXOvf, isCntrXOvf, shouldViewReverseLeft, shouldCntrReverseLeft);
+      const shouldReverseBottom = this.getReverse(isViewYOvf, isCntrYOvf, shouldViewReverseBottom, shouldCntrReverseBottom);
+      const shouldReverseRight = this.getReverse(isViewXOvf, isCntrXOvf, shouldViewReverseRight, shouldCntrReverseRight);
+      const shouldReverseTopOver = this.getReverse(isViewYOvfSide, isCntrYOvfSide, shouldViewReverseTopOver, shouldCntrReverseTopOver);
+      const shouldReverseBottomOver = this.getReverse(isViewYOvfSide, isCntrYOvfSide, shouldViewReverseBottomOver, shouldCntrReverseBottomOver);
+      const shouldReverseTopSide = this.getReverse(isViewYOvfSide, isCntrYOvfSide, shouldViewReverseTopSide, shouldCntrReverseTopSide);
+      const shouldReverseBottomSide = this.getReverse(isViewYOvfSide, isCntrYOvfSide, shouldViewReverseBottomSide, shouldCntrReverseBottomSide);
+      const shouldReverseLeftSide = this.getReverse(isViewXOvfSide, isCntrXOvfSide, shouldViewReverseLeftSide, shouldCntrReverseLeftSide);
+      const shouldReverseRightSide = this.getReverse(isViewXOvfSide, isCntrXOvfSide, shouldViewReverseRightSide, shouldCntrReverseRightSide);
+      console.log('shouldReverseBottom', shouldReverseBottom, shouldViewReverseBottom, shouldCntrReverseBottom); // 判断溢出
+      // 上下方向
+
+      if (this.isTB(position)) {
+        isHeightOverFlow = isViewYOvf && isCntrYOvf;
+
+        if (position === 'top' || position === 'bottom') {
+          isWidthOverFlow = isViewXOvfSideHalf && isCntrXOvfSideHalf;
+        } else {
+          isWidthOverFlow = isViewXOvfSide && isCntrXOvfSide;
+        }
+      } // 左右方向
+
+
+      if (this.isLR(position)) {
+        isWidthOverFlow = isViewXOvf && isCntrXOvf;
+
+        if (position === 'left' || position === 'right') {
+          isHeightOverFlow = isViewYOvfSideHalf && isCntrYOvfSideHalf;
+        } else {
+          isHeightOverFlow = isViewYOvfSide && isCntrYOvfSide;
+        }
+      }
 
       switch (position) {
         case 'top':
@@ -743,6 +898,10 @@ class Tooltip extends _foundation.default {
             position = this._reversePos(position, true);
           }
 
+          if (shouldReverseLeftSide || shouldReverseRightSide) {
+            position = this._adjustPos(position, [shouldReverseLeftSide, shouldReverseRightSide], true);
+          }
+
           break;
 
         case 'topLeft':
@@ -772,6 +931,10 @@ class Tooltip extends _foundation.default {
             position = this._reversePos(position);
           }
 
+          if (shouldReverseTopSide || shouldReverseBottomSide) {
+            position = this._adjustPos(position, [shouldReverseTopSide, shouldReverseBottomSide]);
+          }
+
           break;
 
         case 'leftTop':
@@ -801,6 +964,10 @@ class Tooltip extends _foundation.default {
             position = this._reversePos(position, true);
           }
 
+          if (shouldReverseLeftSide || shouldReverseRightSide) {
+            position = this._adjustPos(position, [shouldReverseLeftSide, shouldReverseRightSide], true);
+          }
+
           break;
 
         case 'bottomLeft':
@@ -830,6 +997,10 @@ class Tooltip extends _foundation.default {
             position = this._reversePos(position);
           }
 
+          if (shouldReverseTopSide || shouldReverseBottomSide) {
+            position = this._adjustPos(position, [shouldReverseTopSide, shouldReverseBottomSide]);
+          }
+
           break;
 
         case 'rightTop':
@@ -903,7 +1074,11 @@ class Tooltip extends _foundation.default {
       }
     }
 
-    return position;
+    return {
+      position,
+      isHeightOverFlow,
+      isWidthOverFlow
+    };
   }
 
   _bindScrollEvent() {

package/lib/es/modal/modalContentFoundation.d.ts

@@ -28,7 +28,7 @@ export default class ModalContentFoundation extends BaseFoundation<ModalContentA
     destroy(): void;
     handleDialogMouseDown(): void;
     handleMaskMouseUp(): void;
-    handleKeyDown(e: any): void;
+    handleKeyDown: (e: any) => void;
     handleKeyDownEventListenerMount(): void;
     handleKeyDownEventListenerUnmount(): void;
     getMouseState(): void;

package/lib/es/modal/modalContentFoundation.js

@@ -3,6 +3,18 @@ import KeyCode from '../utils/keyCode';
 export default class ModalContentFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign(Object.assign({}, ModalContentFoundation.defaultAdapter), adapter));
+
+    this.handleKeyDown = e => {
+      const {
+        closeOnEsc
+      } = this.getProps();
+
+      if (closeOnEsc && e.keyCode === KeyCode.ESC) {
+        e.stopPropagation();
+        this.close(e);
+        return;
+      }
+    };
   }
 
   destroy() {
@@ -19,18 +31,6 @@ export default class ModalContentFoundation extends BaseFoundation {
     this._adapter.notifyDialogMouseUp();
   }
 
-  handleKeyDown(e) {
-    const {
-      closeOnEsc
-    } = this.getProps();
-
-    if (closeOnEsc && e.keyCode === KeyCode.ESC) {
-      e.stopPropagation();
-      this.close(e);
-      return;
-    }
-  }
-
   handleKeyDownEventListenerMount() {
     this._adapter.addKeyDownEventListener();
   }

package/lib/es/tooltip/constants.d.ts

@@ -18,5 +18,6 @@ declare const numbers: {
     readonly MOUSE_ENTER_DELAY: 50;
     readonly MOUSE_LEAVE_DELAY: 50;
     readonly SPACING: 8;
+    readonly MARGIN: 0;
 };
 export { cssClasses, strings, numbers };

package/lib/es/tooltip/constants.js

@@ -18,7 +18,7 @@ const numbers = {
   DEFAULT_Z_INDEX: 1060,
   MOUSE_ENTER_DELAY: 50,
   MOUSE_LEAVE_DELAY: 50,
-  SPACING: 8 // Values are consistent with spacing-tight in scss
-
+  SPACING: 8,
+  MARGIN: 0
 };
 export { cssClasses, strings, numbers };

package/lib/es/tooltip/foundation.d.ts

@@ -69,6 +69,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     _bindResizeEvent(): void;
     _unBindResizeEvent(): void;
     _reversePos(position?: string, isVertical?: boolean): string;
+    _adjustPos(position?: string, shouldReverseArr?: boolean[], isVertical?: boolean): string;
     clearDelayTimer(): void;
     _generateEvent(types: ArrayElement<typeof strings.TRIGGER_SET>): {
         triggerEventSet: {
@@ -83,7 +84,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     _togglePortalVisible(isVisible: boolean): void;
     _roundPixel(pixel: number): number;
     calcTransformOrigin(position: Position, triggerRect: DOMRect, translateX: number, translateY: number): string;
-    calcPosStyle(triggerRect: DOMRect, wrapperRect: DOMRect, containerRect: PopupContainerDOMRect, position?: Position, spacing?: number): Record<string, string | number>;
+    calcPosStyle(triggerRect: DOMRect, wrapperRect: DOMRect, containerRect: PopupContainerDOMRect, position?: Position, spacing?: number, isOverFlow?: [boolean, boolean]): Record<string, string | number>;
     /**
      * 耦合的东西比较多，稍微罗列一下：
      *
@@ -100,7 +101,15 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     calcPosition: (triggerRect?: DOMRect, wrapperRect?: DOMRect, containerRect?: PopupContainerDOMRect, shouldUpdatePos?: boolean) => Record<string, string | number>;
     isLR(position?: string): boolean;
     isTB(position?: string): boolean;
-    adjustPosIfNeed(position: Position | string, style: Record<string, any>, triggerRect: DOMRect, wrapperRect: DOMRect, containerRect: PopupContainerDOMRect): string;
+    isReverse(rowSpace: number, reverseSpace: number, size: number): boolean;
+    isOverFlow(rowSpace: number, reverseSpace: number, size: number): boolean;
+    isHalfOverFlow(posSpace: number, negSpace: number, size: number): boolean;
+    getReverse(viewOvf: boolean, cntrOvf: boolean, shouldRevView: boolean, shouldRevCntr: boolean): boolean;
+    adjustPosIfNeed(position: Position | string, style: Record<string, any>, triggerRect: DOMRect, wrapperRect: DOMRect, containerRect: PopupContainerDOMRect): {
+        position: string;
+        isHeightOverFlow: boolean;
+        isWidthOverFlow: boolean;
+    };
     delayHide: () => void;
     hide: () => void;
     _bindScrollEvent(): void;