@douyinfe/semi-foundation 2.65.2-alpha.1 → 2.66.0-alpha.0

package/lib/cjs/overflowList/foundation.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _get2 = _interopRequireDefault(require("lodash/get"));
-var _fastCopy = _interopRequireDefault(require("fast-copy"));
 var _foundation = _interopRequireDefault(require("../base/foundation"));
 var _constants = require("./constants");
+var _fastCopy = _interopRequireDefault(require("fast-copy"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Boundary = _constants.strings.BOUNDARY_MAP;
 const OverflowDirection = _constants.strings.OVERFLOW_DIR;
@@ -39,7 +39,8 @@ class OverflowListFoundation extends _foundation.default {
     if (!this.isScrollMode()) {
       return overflow;
     }
-    const visibleStateArr = items.map(_ref => {
+    const cloneItems = (0, _fastCopy.default)(items);
+    const visibleStateArr = cloneItems.map(_ref => {
       let {
         key
       } = _ref;
@@ -48,8 +49,8 @@ class OverflowListFoundation extends _foundation.default {
     const visibleStart = visibleStateArr.indexOf(true);
     const visibleEnd = visibleStateArr.lastIndexOf(true);
     const overflowList = [];
-    overflowList[0] = visibleStart >= 0 ? items.slice(0, visibleStart) : [];
-    overflowList[1] = visibleEnd >= 0 ? items.slice(visibleEnd + 1, items.length) : items.slice();
+    overflowList[0] = visibleStart >= 0 ? cloneItems.slice(0, visibleStart) : [];
+    overflowList[1] = visibleEnd >= 0 ? cloneItems.slice(visibleEnd + 1, cloneItems.length) : cloneItems;
     return overflowList;
   }
   handleIntersect(entries) {

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

@@ -49,6 +49,7 @@ export interface TooltipAdapter<P = Record<string, any>, S = Record<string, any>
     getTriggerNode(): any;
     setId(): void;
     getTriggerDOM(): HTMLElement | null;
+    getAnimatingState(): boolean;
 }
 export type Position = ArrayElement<typeof strings.POSITION_SET>;
 export interface PopupContainerDOMRect extends DOMRectLikeType {

package/lib/cjs/tooltip/foundation.js

@@ -60,6 +60,9 @@ class Tooltip extends _foundation.default {
       }
     };
     this.show = () => {
+      if (this._adapter.getAnimatingState()) {
+        return;
+      }
       const content = this.getProp('content');
       const trigger = this.getProp('trigger');
       const clickTriggerToHide = this.getProp('clickTriggerToHide');

package/lib/es/overflowList/foundation.js

@@ -1,7 +1,7 @@
 import _get from "lodash/get";
-import copy from 'fast-copy';
 import BaseFoundation from '../base/foundation';
 import { strings } from './constants';
+import copy from 'fast-copy';
 const Boundary = strings.BOUNDARY_MAP;
 const OverflowDirection = strings.OVERFLOW_DIR;
 class OverflowListFoundation extends BaseFoundation {
@@ -32,7 +32,8 @@ class OverflowListFoundation extends BaseFoundation {
     if (!this.isScrollMode()) {
       return overflow;
     }
-    const visibleStateArr = items.map(_ref => {
+    const cloneItems = copy(items);
+    const visibleStateArr = cloneItems.map(_ref => {
       let {
         key
       } = _ref;
@@ -41,8 +42,8 @@ class OverflowListFoundation extends BaseFoundation {
     const visibleStart = visibleStateArr.indexOf(true);
     const visibleEnd = visibleStateArr.lastIndexOf(true);
     const overflowList = [];
-    overflowList[0] = visibleStart >= 0 ? items.slice(0, visibleStart) : [];
-    overflowList[1] = visibleEnd >= 0 ? items.slice(visibleEnd + 1, items.length) : items.slice();
+    overflowList[0] = visibleStart >= 0 ? cloneItems.slice(0, visibleStart) : [];
+    overflowList[1] = visibleEnd >= 0 ? cloneItems.slice(visibleEnd + 1, cloneItems.length) : cloneItems;
     return overflowList;
   }
   handleIntersect(entries) {

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

@@ -49,6 +49,7 @@ export interface TooltipAdapter<P = Record<string, any>, S = Record<string, any>
     getTriggerNode(): any;
     setId(): void;
     getTriggerDOM(): HTMLElement | null;
+    getAnimatingState(): boolean;
 }
 export type Position = ArrayElement<typeof strings.POSITION_SET>;
 export interface PopupContainerDOMRect extends DOMRectLikeType {

package/lib/es/tooltip/foundation.js

@@ -53,6 +53,9 @@ export default class Tooltip extends BaseFoundation {
       }
     };
     this.show = () => {
+      if (this._adapter.getAnimatingState()) {
+        return;
+      }
       const content = this.getProp('content');
       const trigger = this.getProp('trigger');
       const clickTriggerToHide = this.getProp('clickTriggerToHide');

package/overflowList/foundation.ts

@@ -1,7 +1,7 @@
-import copy from 'fast-copy';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { strings } from './constants';
 import { get, cloneDeep } from 'lodash';
+import copy from 'fast-copy';
 
 const Boundary = strings.BOUNDARY_MAP;
 const OverflowDirection = strings.OVERFLOW_DIR;
@@ -33,13 +33,15 @@ class OverflowListFoundation extends BaseFoundation<OverflowListAdapter> {
             return overflow;
         }
 
-        const visibleStateArr = items.map(({ key }: { key: string }) => Boolean(visibleState.get(key)));
+        const cloneItems = copy(items);
+
+        const visibleStateArr = cloneItems.map(({ key }: { key: string }) => Boolean(visibleState.get(key)));
         const visibleStart = visibleStateArr.indexOf(true);
         const visibleEnd = visibleStateArr.lastIndexOf(true);
 
         const overflowList = [];
-        overflowList[0] = visibleStart >= 0 ? items.slice(0, visibleStart) : [];
-        overflowList[1] = visibleEnd >= 0 ? items.slice(visibleEnd + 1, items.length) : items.slice();
+        overflowList[0] = visibleStart >= 0 ? cloneItems.slice(0, visibleStart) : [];
+        overflowList[1] = visibleEnd >= 0 ? cloneItems.slice(visibleEnd + 1, cloneItems.length) : cloneItems;
         return overflowList;
     }
 

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.65.2-alpha.1",
+    "version": "2.66.0-alpha.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.65.2-alpha.1",
+        "@douyinfe/semi-animation": "2.66.0-alpha.0",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -28,7 +28,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "083b1f5da4743d7beb9565811c56eca5edabdbb4",
+    "gitHead": "0e7074a7bfa97bcab89ffe43127c4315c02b4c6b",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/tooltip/foundation.ts

@@ -67,7 +67,8 @@ export interface TooltipAdapter<P = Record<string, any>, S = Record<string, any>
     notifyEscKeydown(event: any): void;
     getTriggerNode(): any;
     setId(): void;
-    getTriggerDOM(): HTMLElement|null
+    getTriggerDOM(): HTMLElement|null;
+    getAnimatingState(): boolean
 }
 
 export type Position = ArrayElement<typeof strings.POSITION_SET>;
@@ -180,7 +181,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     _reducePos(position = '') {
         // if cur position consists of two directions, remove the last position
         const found = ['Top', 'Bottom', 'Left', 'Right'].find(pos => position.endsWith(pos));
-        return found ? position.replace(found, ''): position;
+        return found ? position.replace(found, '') : position;
     }
 
     clearDelayTimer() {
@@ -311,6 +312,9 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
     };
 
     show = () => {
+        if (this._adapter.getAnimatingState()) {
+            return;
+        }
         const content = this.getProp('content');
         const trigger = this.getProp('trigger');
 
@@ -334,7 +338,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
             this.calcPosition();
         });
 
-        if (trigger==="hover") {
+        if (trigger === "hover") {
             const checkTriggerIsHover = () => {
                 const triggerDOM = this._adapter.getTriggerDOM();
                 if (trigger && !triggerDOM?.matches?.(":hover")) {
@@ -474,13 +478,13 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
         const isWrapperWidthOverflow = wrapperRect.width > innerWidth;
         const scaled = Math.abs(wrapperRect?.width - this._adapter.getContainer()?.clientWidth) > 1;
         if (scaled) {
-            SPACING = SPACING * wrapperRect.width/this._adapter.getContainer().clientWidth;
+            SPACING = SPACING * wrapperRect.width / this._adapter.getContainer().clientWidth;
         }
         switch (position) {
             case 'top':
                 // left = middleX;
                 // top = triggerRect.top - SPACING;
-                left = isWidthOverFlow ? (isTriggerNearLeft ? containerRect.left + wrapperRect.width / 2 : containerRect.right - wrapperRect.width / 2 + offsetWidth): middleX + ANO_SPACING;
+                left = isWidthOverFlow ? (isTriggerNearLeft ? containerRect.left + wrapperRect.width / 2 : containerRect.right - wrapperRect.width / 2 + offsetWidth) : middleX + ANO_SPACING;
                 top = isHeightOverFlow ? containerRect.bottom + offsetHeight : triggerRect.top - SPACING;
                 translateX = -0.5;
                 translateY = -1;
@@ -505,7 +509,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
                 // top = middleY;
                 // left = isWidthOverFlow? containerRect.right - SPACING : triggerRect.left - SPACING;
                 left = isWidthOverFlow ? containerRect.right + offsetWidth - SPACING + offsetXWithArrow : triggerRect.left - SPACING;
-                top = isHeightOverFlow ? (isTriggerNearTop ? containerRect.top + wrapperRect.height / 2 : containerRect.bottom - wrapperRect.height / 2 + offsetHeight): middleY + ANO_SPACING;
+                top = isHeightOverFlow ? (isTriggerNearTop ? containerRect.top + wrapperRect.height / 2 : containerRect.bottom - wrapperRect.height / 2 + offsetHeight) : middleY + ANO_SPACING;
                 translateX = -1;
                 translateY = -0.5;
                 break;
@@ -519,22 +523,22 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
             case 'leftBottom':
                 // left = triggerRect.left - SPACING;
                 // top = pointAtCenter ? middleY + offsetYWithArrow : triggerRect.bottom;
-                left = isWidthOverFlow ? containerRect.right + offsetWidth - SPACING + offsetXWithArrow: triggerRect.left - SPACING;
-                top = isHeightOverFlow ? containerRect.bottom + offsetHeight: (pointAtCenter ? middleY + offsetYWithArrow + ANO_SPACING : triggerRect.bottom + ANO_SPACING);
+                left = isWidthOverFlow ? containerRect.right + offsetWidth - SPACING + offsetXWithArrow : triggerRect.left - SPACING;
+                top = isHeightOverFlow ? containerRect.bottom + offsetHeight : (pointAtCenter ? middleY + offsetYWithArrow + ANO_SPACING : triggerRect.bottom + ANO_SPACING);
                 translateX = -1;
                 translateY = -1;
                 break;
             case 'bottom':
                 // left = middleX;
                 // top = triggerRect.top + triggerRect.height + SPACING;
-                left = isWidthOverFlow ? (isTriggerNearLeft ? containerRect.left + wrapperRect.width / 2 : containerRect.right - wrapperRect.width / 2 + offsetWidth): middleX + ANO_SPACING;
-                top = isHeightOverFlow ? containerRect.top + offsetYWithArrow - SPACING: triggerRect.top + triggerRect.height + SPACING;
+                left = isWidthOverFlow ? (isTriggerNearLeft ? containerRect.left + wrapperRect.width / 2 : containerRect.right - wrapperRect.width / 2 + offsetWidth) : middleX + ANO_SPACING;
+                top = isHeightOverFlow ? containerRect.top + offsetYWithArrow - SPACING : triggerRect.top + triggerRect.height + SPACING;
                 translateX = -0.5;
                 break;
             case 'bottomLeft':
                 // left = pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
                 // top = triggerRect.bottom + SPACING;
-                left = isWidthOverFlow ? (isWrapperWidthOverflow ? containerRect.left : containerRect.right - wrapperRect.width ) : (pointAtCenter ? middleX - offsetXWithArrow + ANO_SPACING: triggerRect.left + ANO_SPACING);
+                left = isWidthOverFlow ? (isWrapperWidthOverflow ? containerRect.left : containerRect.right - wrapperRect.width ) : (pointAtCenter ? middleX - offsetXWithArrow + ANO_SPACING : triggerRect.left + ANO_SPACING);
                 top = isHeightOverFlow ? containerRect.top + offsetYWithArrow - SPACING : triggerRect.top + triggerRect.height + SPACING;
                 break;
             case 'bottomRight':
@@ -596,11 +600,11 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
         top = top - containerRect.top;
 
         if (scaled) {
-            left /= wrapperRect.width/this._adapter.getContainer().clientWidth;
+            left /= wrapperRect.width / this._adapter.getContainer().clientWidth;
         }
 
         if (scaled) {
-            top /= wrapperRect.height/this._adapter.getContainer().clientHeight;
+            top /= wrapperRect.height / this._adapter.getContainer().clientHeight;
         }
 
         /**
@@ -820,7 +824,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
             const shouldViewReverseLeft = clientLeft - marginLeft < wrapperRect.width + spacing && restClientRight - marginRight > wrapperRect.width + spacing;
             const shouldViewReverseBottom = restClientBottom - marginBottom < wrapperRect.height + spacing && clientTop - marginTop > wrapperRect.height + spacing;
             const shouldViewReverseRight = restClientRight - marginRight < wrapperRect.width + spacing && clientLeft - marginLeft > wrapperRect.width + spacing;
-            const shouldViewReverseTopOver = restClientTop - marginBottom< wrapperRect.height + spacing && clientBottom - marginTop> wrapperRect.height + spacing;
+            const shouldViewReverseTopOver = restClientTop - marginBottom < wrapperRect.height + spacing && clientBottom - marginTop > wrapperRect.height + spacing;
             const shouldViewReverseBottomOver = clientBottom - marginTop < wrapperRect.height + spacing && restClientTop - marginBottom > wrapperRect.height + spacing;
 
             const shouldViewReverseTopSide = restClientTop < wrapperRect.height + ano_spacing && clientBottom > wrapperRect.height + ano_spacing;