@douyinfe/semi-foundation 2.36.0-alpha.0 → 2.36.0

package/lib/cjs/image/previewImageFoundation.js

@@ -4,17 +4,11 @@ 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,
   height: 0,
@@ -26,60 +20,46 @@ const DefaultDOMRect = {
   y: 0,
   toJSON: () => ({})
 };
-
 class PreviewImageFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign({}, adapter));
-
     this._isImageVertical = () => this.getProp("rotation") % 180 !== 0;
-
     this._getImageBounds = () => {
       const imageDOM = this._adapter.getImage();
-
       if (imageDOM) {
         return imageDOM.getBoundingClientRect();
       }
-
       return DefaultDOMRect;
     };
-
     this._getContainerBounds = () => {
       const containerDOM = this._adapter.getContainer();
-
       if (containerDOM) {
         return containerDOM.getBoundingClientRect();
       }
-
       return DefaultDOMRect;
     };
-
     this._getOffset = e => {
       const {
         left,
         top
       } = this._getImageBounds();
-
       return {
         x: e.clientX - left,
         y: e.clientY - top
       };
     };
-
     this.setLoading = loading => {
       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");
@@ -88,32 +68,27 @@ class PreviewImageFoundation extends _foundation.default {
         }
       }
     };
-
     this.handleLoad = e => {
       if (e.target) {
         const {
           width: w,
           height: h
         } = e.target;
-
         this._adapter.setOriginImageSize({
           originImageWidth: w,
           originImageHeight: h
         });
-
         this.setState({
           loading: false
         });
         this.handleResizeImage();
       }
-
       const {
         src,
         onLoad
       } = this.getProps();
       onLoad && onLoad(src);
     };
-
     this.handleError = e => {
       const {
         onError,
@@ -124,43 +99,33 @@ class PreviewImageFoundation extends _foundation.default {
       });
       onError && onError(src);
     };
-
     this.handleResizeImage = () => {
       const horizontal = !this._isImageVertical();
-
       const {
         originImageWidth,
         originImageHeight
       } = this._adapter.getOriginImageSize();
-
       const imgWidth = horizontal ? originImageWidth : originImageHeight;
       const imgHeight = horizontal ? originImageHeight : originImageWidth;
       const {
         onZoom
       } = this.getProps();
-
       const containerDOM = this._adapter.getContainer();
-
       if (containerDOM) {
         const {
           width: containerWidth,
           height: containerHeight
         } = this._getContainerBounds();
-
         const reservedWidth = containerWidth - 80;
         const reservedHeight = containerHeight - 80;
-
         const _zoom = Number(Math.min(reservedWidth / imgWidth, reservedHeight / imgHeight).toFixed(2));
-
         onZoom(_zoom);
       }
     };
-
     this.handleRightClickImage = e => {
       const {
         disableDownload
       } = this.getProps();
-
       if (disableDownload) {
         e.preventDefault();
         e.stopPropagation();
@@ -168,15 +133,13 @@ class PreviewImageFoundation extends _foundation.default {
       } else {
         return true;
       }
-    }; // e: WheelEvent<HTMLImageElement>
-
-
+    };
+    // e: WheelEvent<HTMLImageElement>
     this.handleWheel = e => {
       this.onWheel(e);
       (0, _a11y.handlePrevent)(e);
-    }; // e: WheelEvent<HTMLImageElement>
-
-
+    };
+    // e: WheelEvent<HTMLImageElement>
     this.onWheel = (0, _throttle2.default)(e => {
       const {
         onZoom,
@@ -187,9 +150,7 @@ class PreviewImageFoundation extends _foundation.default {
       const {
         currZoom
       } = this.getStates();
-
       let _zoom;
-
       if (e.deltaY < 0) {
         /* zoom in */
         if (currZoom + zoomStep <= maxZoom) {
@@ -201,12 +162,10 @@ class PreviewImageFoundation extends _foundation.default {
           _zoom = Number((currZoom - zoomStep).toFixed(2));
         }
       }
-
       if (!(0, _isUndefined2.default)(_zoom)) {
         onZoom(_zoom);
       }
     }, 50);
-
     this.calcCanDragDirection = () => {
       const {
         width,
@@ -215,54 +174,43 @@ class PreviewImageFoundation extends _foundation.default {
       const {
         rotation
       } = this.getProps();
-
       const {
         width: containerWidth,
         height: containerHeight
       } = this._getContainerBounds();
-
       let canDragHorizontal = width > containerWidth;
       let canDragVertical = height > containerHeight;
-
       if (this._isImageVertical()) {
         canDragHorizontal = height > containerWidth;
         canDragVertical = width > containerHeight;
       }
-
       return {
         canDragVertical,
         canDragHorizontal
       };
     };
-
     this.handleZoomChange = (newZoom, e) => {
       const imageDOM = this._adapter.getImage();
-
       const {
         originImageWidth,
         originImageHeight
       } = this._adapter.getOriginImageSize();
-
       const {
         canDragVertical,
         canDragHorizontal
       } = this.calcCanDragDirection();
       const canDrag = canDragVertical || canDragHorizontal;
-
       const {
         width: containerWidth,
         height: containerHeight
       } = this._getContainerBounds();
-
       const newWidth = Math.floor(originImageWidth * newZoom);
-      const newHeight = Math.floor(originImageHeight * newZoom); // debugger;
-
+      const newHeight = Math.floor(originImageHeight * newZoom);
+      // debugger;
       let _offset;
-
       const horizontal = !this._isImageVertical();
       let newTop = 0;
       let newLeft = 0;
-
       if (horizontal) {
         _offset = {
           x: 0.5 * (containerWidth - newWidth),
@@ -278,7 +226,6 @@ class PreviewImageFoundation extends _foundation.default {
         newLeft = _offset.x - (newWidth - newHeight) / 2;
         newTop = _offset.y + (newWidth - newHeight) / 2;
       }
-
       this.setState({
         width: newWidth,
         height: newHeight,
@@ -287,79 +234,63 @@ class PreviewImageFoundation extends _foundation.default {
         top: newTop,
         currZoom: newZoom
       });
-
       if (imageDOM) {
         this._adapter.setImageCursor(canDrag);
       }
     };
-
     this.calcExtremeBounds = () => {
       const {
         width,
         height
       } = this.getStates();
-
       const {
         width: containerWidth,
         height: containerHeight
       } = this._getContainerBounds();
-
       let extremeLeft = containerWidth - width;
       let extremeTop = containerHeight - height;
-
       if (this._isImageVertical()) {
         extremeLeft = containerWidth - height;
         extremeTop = containerHeight - width;
       }
-
       return {
         left: extremeLeft,
         top: extremeTop
       };
     };
-
     this.handleMoveImage = e => {
       const {
         offset,
         width,
         height
       } = this.getStates();
-
       const startMouseMove = this._adapter.getMouseMove();
-
       const startMouseOffset = this._adapter.getMouseOffset();
-
       const {
         canDragVertical,
         canDragHorizontal
       } = this.calcCanDragDirection();
-
       if (startMouseMove && (canDragVertical || canDragHorizontal)) {
         const {
           clientX,
           clientY
         } = e;
-
         const {
           left: containerLeft,
           top: containerTop
         } = this._getContainerBounds();
-
         const {
           left: extremeLeft,
           top: extremeTop
         } = this.calcExtremeBounds();
         let newX = canDragHorizontal ? clientX - containerLeft - startMouseOffset.x : offset.x;
         let newY = canDragVertical ? clientY - containerTop - startMouseOffset.y : offset.y;
-
         if (canDragHorizontal) {
           newX = newX > 0 ? 0 : newX < extremeLeft ? extremeLeft : newX;
         }
-
         if (canDragVertical) {
           newY = newY > 0 ? 0 : newY < extremeTop ? extremeTop : newY;
         }
-
         const _offset = {
           x: newX,
           y: newY
@@ -371,18 +302,13 @@ class PreviewImageFoundation extends _foundation.default {
         });
       }
     };
-
     this.handleImageMouseDown = e => {
       this._adapter.setStartMouseOffset(this._getOffset(e));
-
       this._adapter.setStartMouseMove(true);
     };
-
     this.handleImageMouseUp = () => {
       this._adapter.setStartMouseMove(false);
     };
   }
-
 }
-
 exports.default = PreviewImageFoundation;

package/lib/cjs/image/previewInnerFoundation.js

@@ -4,61 +4,45 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-
 var _keyCode = _interopRequireDefault(require("../utils/keyCode"));
-
 var _utils = require("./utils");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const NOT_CLOSE_TARGETS = ["icon", "footer"];
 const STOP_CLOSE_TARGET = ["icon", "footer", "header"];
-
 class PreviewInnerFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign({}, adapter));
-
     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({
           viewerVisible: false
         });
       }
     };
-
     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._adapter.setMouseActiveTime(new Date().getTime());
-
       this.setState({
         viewerVisible: true
       });
     };
-
     this.handleMouseUp = e => {
       const {
         maskClosable
@@ -68,50 +52,39 @@ class PreviewInnerFoundation extends _foundation.default {
         clientX,
         clientY
       } = e;
-
       const {
         x,
         y
-      } = this._adapter.getStartMouseDown(); // 对鼠标移动做容错处理，当 x 和 y 方向在 mouseUp 的时候移动距离都小于等于 5px 时候就可以关闭预览
+      } = this._adapter.getStartMouseDown();
+      // 对鼠标移动做容错处理，当 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 做判断，鼠标在用户点击时候无意识的轻微移动无法关闭预览，不符合用户预期
       // If you do not do fault-tolerant processing, but directly use clientX !== x || y !== clientY to make judgments, the slight movement of the mouse when the user clicks will not be able to close the preview, which does not meet the user's expectations.
-
-
       if (Math.abs(clientX - x) > 5 || Math.abs(y - clientY) > 5) {
         couldClose = false;
       }
-
       if (couldClose && maskClosable) {
         this.handlePreviewClose();
       }
     };
-
     this.handleMouseDown = e => {
       const {
         clientX,
         clientY
       } = e;
-
       this._adapter.setStartMouseDown(clientX, clientY);
     };
-
     this.handleKeyDown = e => {
       const {
         closeOnEsc
       } = this.getProps();
-
       if (closeOnEsc && e.keyCode === _keyCode.default.ESC) {
         e.stopPropagation();
-
         this._adapter.notifyVisibleChange(false);
-
         this._adapter.notifyClose();
-
         return;
       }
     };
-
     this.handleSwitchImage = direction => {
       const step = direction === "prev" ? -1 : 1;
       const {
@@ -120,11 +93,9 @@ class PreviewInnerFoundation extends _foundation.default {
       } = this.getStates();
       const srcLength = imgSrc.length;
       const newIndex = (currentIndexInState + step + srcLength) % srcLength;
-
       if ("currentIndex" in this.getProps()) {
         if (this._adapter.getIsInGroup()) {
           const setCurrentIndex = this._adapter.getContext("setCurrentIndex");
-
           setCurrentIndex(newIndex);
         }
       } else {
@@ -132,17 +103,13 @@ class PreviewInnerFoundation extends _foundation.default {
           currentIndex: newIndex
         });
       }
-
       this._adapter.notifyChange(newIndex, direction);
-
       this.setState({
         direction,
         rotation: 0
       });
-
       this._adapter.notifyRotateChange(0);
     };
-
     this.handleDownload = () => {
       const {
         currentIndex,
@@ -151,24 +118,18 @@ class PreviewInnerFoundation extends _foundation.default {
       const downloadSrc = imgSrc[currentIndex];
       const downloadName = downloadSrc.slice(downloadSrc.lastIndexOf("/") + 1);
       (0, _utils.downloadImage)(downloadSrc, downloadName);
-
       this._adapter.notifyDownload(downloadSrc, currentIndex);
     };
-
     this.handlePreviewClose = () => {
       this._adapter.notifyVisibleChange(false);
-
       this._adapter.notifyClose();
     };
-
     this.handleAdjustRatio = type => {
       this.setState({
         ratio: type
       });
-
       this._adapter.notifyRatioChange(type);
     };
-
     this.handleRotateImage = direction => {
       const {
         rotation
@@ -177,21 +138,18 @@ class PreviewInnerFoundation extends _foundation.default {
       this.setState({
         rotation: newRotation
       });
-
       this._adapter.notifyRotateChange(newRotation);
     };
-
     this.handleZoomImage = newZoom => {
       const {
         zoom
       } = this.getStates();
-
       this._adapter.notifyZoom(newZoom, newZoom > zoom);
-
       this.setState({
         zoom: newZoom
       });
-    }; // 当 visible 改变之后，预览组件完成首张图片加载后，启动预加载
+    };
+    // 当 visible 改变之后，预览组件完成首张图片加载后，启动预加载
     // 如： 1，2，3，4，5，6，7，8张图片， 点击第 4 张图片，preLoadGap 为 2
     // 当 visible 从 false 变为 true ，首先加载第 4 张图片，当第 4 张图片加载完成后，
     // 再按照 5，3，6，2的顺序预先加载这几张图片
@@ -199,8 +157,6 @@ class PreviewInnerFoundation extends _foundation.default {
     // Such as: 1, 2, 3, 4, 5, 6, 7, 8 pictures, click the 4th picture, preLoadGap is 2
     // When visible changes from false to true , load the 4th image first, when the 4th image is loaded,
     // Preload these pictures in the order of 5, 3, 6, 2
-
-
     this.preloadGapImage = () => {
       const {
         preLoad,
@@ -211,31 +167,26 @@ class PreviewInnerFoundation extends _foundation.default {
       const {
         imgSrc
       } = this.getStates();
-
       if (!preLoad || typeof preLoadGap !== "number" || preLoadGap < 1) {
         return;
       }
-
       const preloadImages = (0, _utils.getPreloadImagArr)(imgSrc, currentIndex, preLoadGap, infinite);
       const Img = new Image();
       let index = 0;
-
       function callback(e) {
         index++;
-
         if (index < preloadImages.length) {
           Img.src = preloadImages[index];
         }
       }
-
       Img.onload = e => {
         this.setLoadSuccessStatus(Img.src);
         callback(e);
       };
-
       Img.onerror = callback;
       Img.src = preloadImages[0];
-    }; // 在切换左右图片时，当被切换图片完成加载后，根据方向决定下一个预加载的图片
+    };
+    // 在切换左右图片时，当被切换图片完成加载后，根据方向决定下一个预加载的图片
     // 如： 1，2，3，4，5，6，7，8张图片
     // 当 preLoadGap 为 2， 从第 5 张图片进行切换
     // - 如果向 右 切换到第 6 张，则第 6 张图片加载动作结束后（无论加载成功 or 失败），会预先加载第 8 张；
@@ -245,8 +196,6 @@ class PreviewInnerFoundation extends _foundation.default {
     // When preLoadGap is 2, switch from the 5th picture
     // - If you switch to the 6th image(direction is next), the 8th image will be preloaded after the 6th image is loaded (whether it succeeds or fails to load);
     // - If you switch to the 4th image(direction is prev), the second image will be preloaded after the 4th image is loaded (whether it succeeds or fails to load);
-
-
     this.preloadSingleImage = () => {
       const {
         preLoad,
@@ -259,36 +208,29 @@ class PreviewInnerFoundation extends _foundation.default {
         direction,
         imgLoadStatus
       } = this.getStates();
-
       if (!preLoad || typeof preLoadGap !== "number" || preLoadGap < 1) {
         return;
-      } // 根据方向决定preload那个index
+      }
+      // 根据方向决定preload那个index
       // Determine the index of preload according to the direction
-
-
       let preloadIndex = currentIndex + (direction === "prev" ? -1 : 1) * preLoadGap;
-
       if (preloadIndex < 0 || preloadIndex >= imgSrc.length) {
         if (infinite) {
           preloadIndex = (preloadIndex + imgSrc.length) % imgSrc.length;
         } else {
           return;
         }
-      } // 如果图片没有加载成功过，则进行预加载
+      }
+      // 如果图片没有加载成功过，则进行预加载
       // If the image has not been loaded successfully, preload it
-
-
       if (!imgLoadStatus[preloadIndex]) {
         const Img = new Image();
-
         Img.onload = e => {
           this.setLoadSuccessStatus(imgSrc[preloadIndex]);
         };
-
         Img.src = imgSrc[preloadIndex];
       }
     };
-
     this.setLoadSuccessStatus = src => {
       const {
         imgLoadStatus
@@ -299,18 +241,17 @@ class PreviewInnerFoundation extends _foundation.default {
         imgLoadStatus: status
       });
     };
-
     this.onImageLoad = src => {
       const {
         preloadAfterVisibleChange
       } = this.getStates();
-      this.setLoadSuccessStatus(src); // 当 preview 中当前加载的图片加载完成后，
+      this.setLoadSuccessStatus(src);
+      // 当 preview 中当前加载的图片加载完成后，
       // 如果是在visible change之后的第一次加载，则启动加载该currentIndex左右preloadGap范围的图片
       // 如果是非第一次加载，是在左右切换图片，则根据方向预先加载单张图片
       // When the currently loaded image in Preview is loaded,
       // - It is the first load after visible change, start loading the images in the preloadGap range around the currentIndex
       // - It is not the first load, the image is switched left and right, and a single image is preloaded according to the direction
-
       if (preloadAfterVisibleChange) {
         this.preloadGapImage();
         this.setState({
@@ -321,19 +262,13 @@ class PreviewInnerFoundation extends _foundation.default {
       }
     };
   }
-
   beforeShow() {
     this._adapter.registerKeyDownListener();
-
     this._adapter.disabledBodyScroll();
   }
-
   afterHide() {
     this._adapter.unregisterKeyDownListener();
-
     this._adapter.enabledBodyScroll();
   }
-
 }
-
 exports.default = PreviewInnerFoundation;