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

package/lib/es/image/previewImageFoundation.js

@@ -16,56 +16,43 @@ const DefaultDOMRect = {
 export default class PreviewImageFoundation extends BaseFoundation {
   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");
@@ -74,32 +61,27 @@ export default class PreviewImageFoundation extends BaseFoundation {
         }
       }
     };
-
     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,
@@ -110,43 +92,33 @@ export default class PreviewImageFoundation extends BaseFoundation {
       });
       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();
@@ -154,15 +126,13 @@ export default class PreviewImageFoundation extends BaseFoundation {
       } else {
         return true;
       }
-    }; // e: WheelEvent<HTMLImageElement>
-
-
+    };
+    // e: WheelEvent<HTMLImageElement>
     this.handleWheel = e => {
       this.onWheel(e);
       handlePrevent(e);
-    }; // e: WheelEvent<HTMLImageElement>
-
-
+    };
+    // e: WheelEvent<HTMLImageElement>
     this.onWheel = _throttle(e => {
       const {
         onZoom,
@@ -173,9 +143,7 @@ export default class PreviewImageFoundation extends BaseFoundation {
       const {
         currZoom
       } = this.getStates();
-
       let _zoom;
-
       if (e.deltaY < 0) {
         /* zoom in */
         if (currZoom + zoomStep <= maxZoom) {
@@ -187,12 +155,10 @@ export default class PreviewImageFoundation extends BaseFoundation {
           _zoom = Number((currZoom - zoomStep).toFixed(2));
         }
       }
-
       if (!_isUndefined(_zoom)) {
         onZoom(_zoom);
       }
     }, 50);
-
     this.calcCanDragDirection = () => {
       const {
         width,
@@ -201,54 +167,43 @@ export default class PreviewImageFoundation extends BaseFoundation {
       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),
@@ -264,7 +219,6 @@ export default class PreviewImageFoundation extends BaseFoundation {
         newLeft = _offset.x - (newWidth - newHeight) / 2;
         newTop = _offset.y + (newWidth - newHeight) / 2;
       }
-
       this.setState({
         width: newWidth,
         height: newHeight,
@@ -273,79 +227,63 @@ export default class PreviewImageFoundation extends BaseFoundation {
         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
@@ -357,16 +295,12 @@ 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);
     };
   }
-
 }

package/lib/es/image/previewInnerFoundation.js

@@ -6,46 +6,36 @@ const STOP_CLOSE_TARGET = ["icon", "footer", "header"];
 export default class PreviewInnerFoundation extends BaseFoundation {
   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 = 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
@@ -55,50 +45,39 @@ export default class PreviewInnerFoundation extends BaseFoundation {
         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.ESC) {
         e.stopPropagation();
-
         this._adapter.notifyVisibleChange(false);
-
         this._adapter.notifyClose();
-
         return;
       }
     };
-
     this.handleSwitchImage = direction => {
       const step = direction === "prev" ? -1 : 1;
       const {
@@ -107,11 +86,9 @@ export default class PreviewInnerFoundation extends BaseFoundation {
       } = 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 {
@@ -119,17 +96,13 @@ export default class PreviewInnerFoundation extends BaseFoundation {
           currentIndex: newIndex
         });
       }
-
       this._adapter.notifyChange(newIndex, direction);
-
       this.setState({
         direction,
         rotation: 0
       });
-
       this._adapter.notifyRotateChange(0);
     };
-
     this.handleDownload = () => {
       const {
         currentIndex,
@@ -138,24 +111,18 @@ export default class PreviewInnerFoundation extends BaseFoundation {
       const downloadSrc = imgSrc[currentIndex];
       const downloadName = downloadSrc.slice(downloadSrc.lastIndexOf("/") + 1);
       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
@@ -164,21 +131,18 @@ export default class PreviewInnerFoundation extends BaseFoundation {
       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的顺序预先加载这几张图片
@@ -186,8 +150,6 @@ export default class PreviewInnerFoundation extends BaseFoundation {
     // 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,
@@ -198,31 +160,26 @@ export default class PreviewInnerFoundation extends BaseFoundation {
       const {
         imgSrc
       } = this.getStates();
-
       if (!preLoad || typeof preLoadGap !== "number" || preLoadGap < 1) {
         return;
       }
-
       const preloadImages = 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 张；
@@ -232,8 +189,6 @@ export default class PreviewInnerFoundation extends BaseFoundation {
     // 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,
@@ -246,36 +201,29 @@ export default class PreviewInnerFoundation extends BaseFoundation {
         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
@@ -286,18 +234,17 @@ export default class PreviewInnerFoundation extends BaseFoundation {
         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({
@@ -308,17 +255,12 @@ export default class PreviewInnerFoundation extends BaseFoundation {
       }
     };
   }
-
   beforeShow() {
     this._adapter.registerKeyDownListener();
-
     this._adapter.disabledBodyScroll();
   }
-
   afterHide() {
     this._adapter.unregisterKeyDownListener();
-
     this._adapter.enabledBodyScroll();
   }
-
 }

package/lib/es/image/utils.js

@@ -7,7 +7,6 @@ export const isTargetEmit = (event, targetClasses) => {
     if (node.className && typeof node.className === "string") {
       return targetClasses.some(c => node.className.includes(c));
     }
-
     return false;
   });
   return isTarget;
@@ -16,7 +15,6 @@ export const downloadImage = (src, filename) => {
   const image = new Image();
   image.src = src;
   image.crossOrigin = "anonymous";
-
   image.onload = e => {
     const eleLink = document.createElement("a");
     eleLink.download = filename;
@@ -45,13 +43,11 @@ export const crossMerge = function () {
     newArr.push(rightArr[index]);
     newArr.push(leftArr[index]);
   });
-
   if (leftLen > rightLen) {
     newArr = newArr.concat(leftArr.slice(rightLen, leftLen));
   } else if (leftLen < rightLen) {
     newArr = newArr.concat(rightArr.slice(leftLen, rightLen));
   }
-
   return newArr;
 };
 export const getPreloadImagArr = (imgSrc, currentIndex, preLoadGap, infinite) => {
@@ -60,7 +56,6 @@ export const getPreloadImagArr = (imgSrc, currentIndex, preLoadGap, infinite) =>
   const srcLength = imgSrc.length;
   let leftArr = [];
   let rightArr = [];
-
   if (preLoadGap >= Math.floor(srcLength / 2)) {
     if (infinite) {
       leftArr = imgSrc.concat(imgSrc).slice(beginIndex + srcLength < 0 ? 0 : beginIndex + srcLength, currentIndex + srcLength);
@@ -86,7 +81,6 @@ export const getPreloadImagArr = (imgSrc, currentIndex, preLoadGap, infinite) =>
       }
     }
   }
-
   const result = crossMerge(leftArr.reverse(), rightArr);
   const duplicateResult = Array.from(new Set(result));
   return duplicateResult;