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

package/lib/cjs/image/previewImageFoundation.js

@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
-var _throttle2 = _interopRequireDefault(require("lodash/throttle"));
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-var _a11y = require("../utils/a11y");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const DefaultDOMRect = {
   bottom: 0,
@@ -23,6 +20,12 @@ const DefaultDOMRect = {
 class PreviewImageFoundation extends _foundation.default {
   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();
@@ -52,32 +55,18 @@ class PreviewImageFoundation extends _foundation.default {
       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
         });
@@ -102,13 +91,14 @@ class PreviewImageFoundation extends _foundation.default {
     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) {
@@ -118,8 +108,44 @@ class PreviewImageFoundation extends _foundation.default {
         } = 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 => {
@@ -134,38 +160,6 @@ class PreviewImageFoundation extends _foundation.default {
         return true;
       }
     };
-    // e: WheelEvent<HTMLImageElement>
-    this.handleWheel = e => {
-      this.onWheel(e);
-      (0, _a11y.handlePrevent)(e);
-    };
-    // e: WheelEvent<HTMLImageElement>
-    this.onWheel = (0, _throttle2.default)(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 (!(0, _isUndefined2.default)(_zoom)) {
-        onZoom(_zoom);
-      }
-    }, 50);
     this.calcCanDragDirection = () => {
       const {
         width,
@@ -189,12 +183,8 @@ class PreviewImageFoundation extends _foundation.default {
         canDragHorizontal
       };
     };
-    this.handleZoomChange = (newZoom, e) => {
+    this.calculatePreviewImage = (newZoom, e) => {
       const imageDOM = this._adapter.getImage();
-      const {
-        originImageWidth,
-        originImageHeight
-      } = this._adapter.getOriginImageSize();
       const {
         canDragVertical,
         canDragHorizontal
@@ -204,8 +194,8 @@ class PreviewImageFoundation extends _foundation.default {
         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();
@@ -264,13 +254,13 @@ class PreviewImageFoundation extends _foundation.default {
         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
@@ -283,8 +273,8 @@ class PreviewImageFoundation extends _foundation.default {
           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;
         }
@@ -303,11 +293,7 @@ class PreviewImageFoundation extends _foundation.default {
       }
     };
     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/cjs/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/cjs/image/previewInnerFoundation.js

@@ -4,6 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _throttle2 = _interopRequireDefault(require("lodash/throttle"));
+var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
+var _a11y = require("../utils/a11y");
 var _foundation = _interopRequireDefault(require("../base/foundation"));
 var _keyCode = _interopRequireDefault(require("../utils/keyCode"));
 var _utils = require("./utils");
@@ -13,35 +16,83 @@ const STOP_CLOSE_TARGET = ["icon", "footer", "header"];
 class PreviewInnerFoundation extends _foundation.default {
   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 = (0, _utils.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 = (0, _throttle2.default)(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);
+      (0, _a11y.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 (!(0, _isUndefined2.default)(_zoom)) {
+        this.handleZoomImage(_zoom);
+      }
     };
     this.handleMouseUp = e => {
       const {
@@ -55,7 +106,7 @@ class PreviewInnerFoundation extends _foundation.default {
       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 做判断，鼠标在用户点击时候无意识的轻微移动无法关闭预览，不符合用户预期
@@ -72,7 +123,10 @@ class PreviewInnerFoundation extends _foundation.default {
         clientX,
         clientY
       } = e;
-      this._adapter.setStartMouseDown(clientX, clientY);
+      this._startMouseDown = {
+        x: clientX,
+        y: clientY
+      };
     };
     this.handleKeyDown = e => {
       const {
@@ -145,10 +199,12 @@ class PreviewInnerFoundation extends _foundation.default {
       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
@@ -266,10 +322,12 @@ class PreviewInnerFoundation extends _foundation.default {
   beforeShow() {
     this._adapter.registerKeyDownListener();
     this._adapter.disabledBodyScroll();
+    this.updateTimer();
   }
   afterHide() {
     this._adapter.unregisterKeyDownListener();
     this._adapter.enabledBodyScroll();
+    this.clearTimer();
   }
 }
 exports.default = PreviewInnerFoundation;

package/lib/cjs/select/foundation.js

@@ -337,6 +337,7 @@ class SelectFoundation extends _foundation.default {
       this.close(e);
       this._notifyBlur(e);
       this._adapter.updateFocusState(false);
+      this._adapter.unregisterClickOutsideHandler();
     });
   }
   toggle2SearchInput(isShow) {
@@ -354,7 +355,6 @@ class SelectFoundation extends _foundation.default {
     this._adapter.setIsFocusInContainer(false);
     // this.unBindKeyBoardEvent();
     // this._notifyBlur(e);
-    this._adapter.unregisterClickOutsideHandler();
     // this._adapter.updateFocusState(false);
     const isFilterable = this._isFilterable();
     if (isFilterable) {

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

@@ -1,6 +1,5 @@
 import BaseFoundation, { DefaultAdapter } from "../base/foundation";
 export interface PreviewFooterAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
-    setStartMouseOffset: (time: number) => void;
 }
 export default class PreviewFooterFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PreviewFooterAdapter<P, S>, P, S> {
     changeSliderValue: (type: string) => void;

package/lib/es/image/previewFooterFoundation.js

@@ -28,7 +28,6 @@ export default class PreviewFooterFoundation extends BaseFoundation {
       } else {
         onZoomOut(Number((value / 100).toFixed(2)));
       }
-      this._adapter.setStartMouseOffset(value);
     };
     this.handleRatioClick = () => {
       const {

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

@@ -1,26 +1,7 @@
-/// <reference types="lodash" />
 import BaseFoundation, { DefaultAdapter } from "../base/foundation";
 export interface PreviewImageAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
-    getOriginImageSize: () => {
-        originImageWidth: number;
-        originImageHeight: number;
-    };
-    setOriginImageSize: (size: {
-        originImageWidth: number;
-        originImageHeight: number;
-    }) => void;
     getContainer: () => HTMLDivElement;
     getImage: () => HTMLImageElement;
-    getMouseMove: () => boolean;
-    setStartMouseMove: (move: boolean) => void;
-    getMouseOffset: () => {
-        x: number;
-        y: number;
-    };
-    setStartMouseOffset: (offset: {
-        x: number;
-        y: number;
-    }) => void;
     setLoading: (loading: boolean) => void;
     setImageCursor: (canDrag: boolean) => void;
 }
@@ -38,6 +19,12 @@ export interface ImageOffset {
 }
 export default class PreviewImageFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PreviewImageAdapter<P, S>, P, S> {
     constructor(adapter: PreviewImageAdapter<P, S>);
+    startMouseOffset: {
+        x: number;
+        y: number;
+    };
+    originImageWidth: any;
+    originImageHeight: any;
     _isImageVertical: () => boolean;
     _getImageBounds: () => DOMRect;
     _getContainerBounds: () => DOMRect;
@@ -47,13 +34,11 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
     handleLoad: (e: any) => void;
     handleError: (e: any) => void;
     handleResizeImage: () => void;
+    handleRatioChange: () => void;
     handleRightClickImage: (e: any) => boolean;
-    handleWheel: (e: any) => void;
-    onWheel: import("lodash").DebouncedFunc<(e: any) => void>;
     calcCanDragDirection: () => DragDirection;
-    handleZoomChange: (newZoom: number, e: any) => void;
+    calculatePreviewImage: (newZoom: number, e: any) => void;
     calcExtremeBounds: () => ExtremeBounds;
     handleMoveImage: (e: any) => void;
     handleImageMouseDown: (e: any) => void;
-    handleImageMouseUp: () => void;
 }