@douyinfe/semi-foundation 2.49.0-beta.0 → 2.49.0

package/lib/es/image/previewImageFoundation.js

@@ -1,7 +1,4 @@
-import _isUndefined from "lodash/isUndefined";
-import _throttle from "lodash/throttle";
 import BaseFoundation from "../base/foundation";
-import { handlePrevent } from "../utils/a11y";
 const DefaultDOMRect = {
   bottom: 0,
   height: 0,
@@ -16,6 +13,12 @@ const DefaultDOMRect = {
 export default class PreviewImageFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
+    this.startMouseOffset = {
+      x: 0,
+      y: 0
+    };
+    this.originImageWidth = null;
+    this.originImageHeight = null;
     this._isImageVertical = () => this.getProp("rotation") % 180 !== 0;
     this._getImageBounds = () => {
       const imageDOM = this._adapter.getImage();
@@ -45,32 +48,18 @@ export default class PreviewImageFoundation extends BaseFoundation {
       this._adapter.setLoading(loading);
     };
     this.handleWindowResize = () => {
-      const {
-        ratio,
-        setRatio
-      } = this.getProps();
-      const {
-        originImageWidth,
-        originImageHeight
-      } = this._adapter.getOriginImageSize();
-      if (originImageWidth && originImageHeight) {
-        if (ratio !== "adaptation") {
-          setRatio("adaptation");
-        } else {
-          this.handleResizeImage();
-        }
+      if (this.originImageWidth && this.originImageHeight) {
+        this.handleResizeImage();
       }
     };
     this.handleLoad = e => {
       if (e.target) {
         const {
-          width: w,
-          height: h
+          naturalWidth: w,
+          naturalHeight: h
         } = e.target;
-        this._adapter.setOriginImageSize({
-          originImageWidth: w,
-          originImageHeight: h
-        });
+        this.originImageHeight = h;
+        this.originImageWidth = w;
         this.setState({
           loading: false
         });
@@ -95,13 +84,14 @@ export default class PreviewImageFoundation extends BaseFoundation {
     this.handleResizeImage = () => {
       const horizontal = !this._isImageVertical();
       const {
-        originImageWidth,
-        originImageHeight
-      } = this._adapter.getOriginImageSize();
-      const imgWidth = horizontal ? originImageWidth : originImageHeight;
-      const imgHeight = horizontal ? originImageHeight : originImageWidth;
+        currZoom
+      } = this.getStates();
+      const imgWidth = horizontal ? this.originImageWidth : this.originImageHeight;
+      const imgHeight = horizontal ? this.originImageHeight : this.originImageWidth;
       const {
-        onZoom
+        onZoom,
+        setRatio,
+        ratio
       } = this.getProps();
       const containerDOM = this._adapter.getContainer();
       if (containerDOM) {
@@ -111,8 +101,44 @@ export default class PreviewImageFoundation extends BaseFoundation {
         } = this._getContainerBounds();
         const reservedWidth = containerWidth - 80;
         const reservedHeight = containerHeight - 80;
-        const _zoom = Number(Math.min(reservedWidth / imgWidth, reservedHeight / imgHeight).toFixed(2));
-        onZoom(_zoom);
+        let _zoom = 1;
+        if (imgWidth > reservedWidth || imgHeight > reservedHeight) {
+          _zoom = Number(Math.min(reservedWidth / imgWidth, reservedHeight / imgHeight).toFixed(2));
+        }
+        if (currZoom === _zoom) {
+          this.calculatePreviewImage(_zoom, null);
+        } else {
+          onZoom(_zoom);
+        }
+      }
+    };
+    this.handleRatioChange = () => {
+      if (this.originImageWidth && this.originImageHeight) {
+        const {
+          currZoom
+        } = this.getStates();
+        const {
+          ratio,
+          onZoom
+        } = this.getProps();
+        let _zoom;
+        if (ratio === 'adaptation') {
+          const horizontal = !this._isImageVertical();
+          const imgWidth = horizontal ? this.originImageWidth : this.originImageHeight;
+          const imgHeight = horizontal ? this.originImageHeight : this.originImageWidth;
+          const {
+            width: containerWidth,
+            height: containerHeight
+          } = this._getContainerBounds();
+          const reservedWidth = containerWidth - 80;
+          const reservedHeight = containerHeight - 80;
+          _zoom = Number(Math.min(reservedWidth / imgWidth, reservedHeight / imgHeight).toFixed(2));
+        } else {
+          _zoom = 1;
+        }
+        if (currZoom !== _zoom) {
+          onZoom(_zoom);
+        }
       }
     };
     this.handleRightClickImage = e => {
@@ -127,38 +153,6 @@ export default class PreviewImageFoundation extends BaseFoundation {
         return true;
       }
     };
-    // e: WheelEvent<HTMLImageElement>
-    this.handleWheel = e => {
-      this.onWheel(e);
-      handlePrevent(e);
-    };
-    // e: WheelEvent<HTMLImageElement>
-    this.onWheel = _throttle(e => {
-      const {
-        onZoom,
-        zoomStep,
-        maxZoom,
-        minZoom
-      } = this.getProps();
-      const {
-        currZoom
-      } = this.getStates();
-      let _zoom;
-      if (e.deltaY < 0) {
-        /* zoom in */
-        if (currZoom + zoomStep <= maxZoom) {
-          _zoom = Number((currZoom + zoomStep).toFixed(2));
-        }
-      } else if (e.deltaY > 0) {
-        /* zoom out */
-        if (currZoom - zoomStep >= minZoom) {
-          _zoom = Number((currZoom - zoomStep).toFixed(2));
-        }
-      }
-      if (!_isUndefined(_zoom)) {
-        onZoom(_zoom);
-      }
-    }, 50);
     this.calcCanDragDirection = () => {
       const {
         width,
@@ -182,12 +176,8 @@ export default class PreviewImageFoundation extends BaseFoundation {
         canDragHorizontal
       };
     };
-    this.handleZoomChange = (newZoom, e) => {
+    this.calculatePreviewImage = (newZoom, e) => {
       const imageDOM = this._adapter.getImage();
-      const {
-        originImageWidth,
-        originImageHeight
-      } = this._adapter.getOriginImageSize();
       const {
         canDragVertical,
         canDragHorizontal
@@ -197,8 +187,8 @@ export default class PreviewImageFoundation extends BaseFoundation {
         width: containerWidth,
         height: containerHeight
       } = this._getContainerBounds();
-      const newWidth = Math.floor(originImageWidth * newZoom);
-      const newHeight = Math.floor(originImageHeight * newZoom);
+      const newWidth = Math.floor(this.originImageWidth * newZoom);
+      const newHeight = Math.floor(this.originImageHeight * newZoom);
       // debugger;
       let _offset;
       const horizontal = !this._isImageVertical();
@@ -257,13 +247,13 @@ export default class PreviewImageFoundation extends BaseFoundation {
         width,
         height
       } = this.getStates();
-      const startMouseMove = this._adapter.getMouseMove();
-      const startMouseOffset = this._adapter.getMouseOffset();
       const {
         canDragVertical,
         canDragHorizontal
       } = this.calcCanDragDirection();
-      if (startMouseMove && (canDragVertical || canDragHorizontal)) {
+      // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
+      const mouseLeftPress = e.buttons === 1;
+      if (mouseLeftPress && (canDragVertical || canDragHorizontal)) {
         const {
           clientX,
           clientY
@@ -276,8 +266,8 @@ export default class PreviewImageFoundation extends BaseFoundation {
           left: extremeLeft,
           top: extremeTop
         } = this.calcExtremeBounds();
-        let newX = canDragHorizontal ? clientX - containerLeft - startMouseOffset.x : offset.x;
-        let newY = canDragVertical ? clientY - containerTop - startMouseOffset.y : offset.y;
+        let newX = canDragHorizontal ? clientX - containerLeft - this.startMouseOffset.x : offset.x;
+        let newY = canDragVertical ? clientY - containerTop - this.startMouseOffset.y : offset.y;
         if (canDragHorizontal) {
           newX = newX > 0 ? 0 : newX < extremeLeft ? extremeLeft : newX;
         }
@@ -296,11 +286,7 @@ export default class PreviewImageFoundation extends BaseFoundation {
       }
     };
     this.handleImageMouseDown = e => {
-      this._adapter.setStartMouseOffset(this._getOffset(e));
-      this._adapter.setStartMouseMove(true);
-    };
-    this.handleImageMouseUp = () => {
-      this._adapter.setStartMouseMove(false);
+      this.startMouseOffset = this._getOffset(e);
     };
   }
 }

package/lib/es/image/previewInnerFoundation.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="lodash" />
 import BaseFoundation, { DefaultAdapter } from "../base/foundation";
 export type RatioType = "adaptation" | "realSize";
 export interface PreviewInnerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
@@ -11,26 +12,27 @@ export interface PreviewInnerAdapter<P = Record<string, any>, S = Record<string,
     notifyDownload: (src: string, index: number) => void;
     registerKeyDownListener: () => void;
     unregisterKeyDownListener: () => void;
-    getMouseActiveTime: () => number;
-    getStopTiming: () => boolean;
-    setStopTiming: (value: boolean) => void;
-    getStartMouseDown: () => {
-        x: number;
-        y: number;
-    };
-    setStartMouseDown: (x: number, y: number) => void;
-    setMouseActiveTime: (time: number) => void;
     disabledBodyScroll: () => void;
     enabledBodyScroll: () => void;
     getSetDownloadFunc: () => (src: string) => string;
+    isValidTarget: (e: any) => boolean;
 }
 export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PreviewInnerAdapter<P, S>, P, S> {
     constructor(adapter: PreviewInnerAdapter<P, S>);
+    _timer: any;
+    _startMouseDown: {
+        x: number;
+        y: number;
+    };
     beforeShow(): void;
     afterHide(): void;
     handleViewVisibleChange: () => void;
-    handleMouseMoveEvent: (e: any, event: string) => void;
     handleMouseMove: (e: any) => void;
+    mouseMoveHandler: import("lodash").DebouncedFunc<(e: any) => void>;
+    updateTimer: () => void;
+    clearTimer: () => void;
+    handleWheel: (e: any) => void;
+    onWheel: (e: any) => void;
     handleMouseUp: (e: any) => void;
     handleMouseDown: (e: any) => void;
     handleKeyDown: (e: any) => void;

package/lib/es/image/previewInnerFoundation.js

@@ -1,3 +1,6 @@
+import _throttle from "lodash/throttle";
+import _isUndefined from "lodash/isUndefined";
+import { handlePrevent } from "../utils/a11y";
 import BaseFoundation from "../base/foundation";
 import KeyCode from "../utils/keyCode";
 import { getPreloadImagArr, downloadImage, isTargetEmit } from "./utils";
@@ -6,35 +9,83 @@ const STOP_CLOSE_TARGET = ["icon", "footer", "header"];
 export default class PreviewInnerFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
+    this._timer = null;
+    this._startMouseDown = {
+      x: 0,
+      y: 0
+    };
     this.handleViewVisibleChange = () => {
-      const nowTime = new Date().getTime();
-      const mouseActiveTime = this._adapter.getMouseActiveTime();
-      const stopTiming = this._adapter.getStopTiming();
-      const {
-        viewerVisibleDelay
-      } = this.getProps();
       const {
         viewerVisible
       } = this.getStates();
-      if (nowTime - mouseActiveTime > viewerVisibleDelay && !stopTiming) {
-        viewerVisible && this.setState({
+      if (viewerVisible) {
+        this.setState({
           viewerVisible: false
         });
+        this.clearTimer();
       }
     };
-    this.handleMouseMoveEvent = (e, event) => {
-      const isTarget = isTargetEmit(e, STOP_CLOSE_TARGET);
-      if (isTarget && event === "over") {
-        this._adapter.setStopTiming(true);
-      } else if (isTarget && event === "out") {
-        this._adapter.setStopTiming(false);
+    this.handleMouseMove = e => {
+      this._persistEvent(e);
+      this.mouseMoveHandler(e);
+    };
+    this.mouseMoveHandler = _throttle(e => {
+      const {
+        viewerVisible
+      } = this.getStates();
+      const isValidTarget = this._adapter.isValidTarget(e);
+      if (isValidTarget) {
+        if (!viewerVisible) {
+          this.setState({
+            viewerVisible: true
+          });
+        }
+        this.updateTimer();
+      } else {
+        this.clearTimer();
       }
+    }, 50);
+    this.updateTimer = () => {
+      const {
+        viewerVisibleDelay
+      } = this.getProps();
+      this.clearTimer();
+      this._timer = setTimeout(this.handleViewVisibleChange, viewerVisibleDelay);
     };
-    this.handleMouseMove = e => {
-      this._adapter.setMouseActiveTime(new Date().getTime());
-      this.setState({
-        viewerVisible: true
-      });
+    this.clearTimer = () => {
+      if (this._timer) {
+        clearTimeout(this._timer);
+        this._timer = null;
+      }
+    };
+    this.handleWheel = e => {
+      this.onWheel(e);
+      handlePrevent(e);
+    };
+    this.onWheel = e => {
+      const {
+        zoomStep,
+        maxZoom,
+        minZoom
+      } = this.getProps();
+      const {
+        zoom: currZoom
+      } = this.getStates();
+      let _zoom;
+      if (e.deltaY < 0) {
+        /* zoom in */
+        if (currZoom + zoomStep <= maxZoom) {
+          _zoom = Number((currZoom + zoomStep).toFixed(2));
+        }
+      } else if (e.deltaY > 0) {
+        /* zoom out */
+        if (currZoom - zoomStep >= minZoom) {
+          _zoom = Number((currZoom - zoomStep).toFixed(2));
+        }
+      }
+      if (!_isUndefined(_zoom)) {
+        this.handleZoomImage(_zoom);
+      }
     };
     this.handleMouseUp = e => {
       const {
@@ -48,7 +99,7 @@ export default class PreviewInnerFoundation extends BaseFoundation {
       const {
         x,
         y
-      } = this._adapter.getStartMouseDown();
+      } = this._startMouseDown;
       // 对鼠标移动做容错处理，当 x 和 y 方向在 mouseUp 的时候移动距离都小于等于 5px 时候就可以关闭预览
       // Error-tolerant processing of mouse movement, when the movement distance in the x and y directions is less than or equal to 5px in mouseUp, the preview can be closed
       // 不做容错处理的话，直接用 clientX !== x || y !== clientY 做判断，鼠标在用户点击时候无意识的轻微移动无法关闭预览，不符合用户预期
@@ -65,7 +116,10 @@ export default class PreviewInnerFoundation extends BaseFoundation {
         clientX,
         clientY
       } = e;
-      this._adapter.setStartMouseDown(clientX, clientY);
+      this._startMouseDown = {
+        x: clientX,
+        y: clientY
+      };
     };
     this.handleKeyDown = e => {
       const {
@@ -138,10 +192,12 @@ export default class PreviewInnerFoundation extends BaseFoundation {
       const {
         zoom
       } = this.getStates();
-      this._adapter.notifyZoom(newZoom, newZoom > zoom);
-      this.setState({
-        zoom: newZoom
-      });
+      if (zoom !== newZoom) {
+        this._adapter.notifyZoom(newZoom, newZoom > zoom);
+        this.setState({
+          zoom: newZoom
+        });
+      }
     };
     // 当 visible 改变之后，预览组件完成首张图片加载后，启动预加载
     // 如： 1，2，3，4，5，6，7，8张图片， 点击第 4 张图片，preLoadGap 为 2
@@ -259,9 +315,11 @@ export default class PreviewInnerFoundation extends BaseFoundation {
   beforeShow() {
     this._adapter.registerKeyDownListener();
     this._adapter.disabledBodyScroll();
+    this.updateTimer();
   }
   afterHide() {
     this._adapter.unregisterKeyDownListener();
     this._adapter.enabledBodyScroll();
+    this.clearTimer();
   }
 }

package/lib/es/select/foundation.js

@@ -328,6 +328,7 @@ export default class SelectFoundation extends BaseFoundation {
       this.close(e);
       this._notifyBlur(e);
       this._adapter.updateFocusState(false);
+      this._adapter.unregisterClickOutsideHandler();
     });
   }
   toggle2SearchInput(isShow) {
@@ -345,7 +346,6 @@ export default class SelectFoundation extends BaseFoundation {
     this._adapter.setIsFocusInContainer(false);
     // this.unBindKeyBoardEvent();
     // this._notifyBlur(e);
-    this._adapter.unregisterClickOutsideHandler();
     // this._adapter.updateFocusState(false);
     const isFilterable = this._isFilterable();
     if (isFilterable) {

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.49.0-beta.0",
+    "version": "2.49.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.49.0-beta.0",
+        "@douyinfe/semi-animation": "2.49.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.29.3",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "aa959f0cd22894b27c019eb78254ba9b991f80b3",
+    "gitHead": "3ae380197586cc24c67bc2e6fb067533638206b2",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/select/foundation.ts

@@ -363,6 +363,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
             this.close(e);
             this._notifyBlur(e);
             this._adapter.updateFocusState(false);
+            this._adapter.unregisterClickOutsideHandler();
         });
     }
 
@@ -383,7 +384,6 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         this._adapter.setIsFocusInContainer(false);
         // this.unBindKeyBoardEvent();
         // this._notifyBlur(e);
-        this._adapter.unregisterClickOutsideHandler();
         // this._adapter.updateFocusState(false);
 
         const isFilterable = this._isFilterable();