@douyinfe/semi-foundation 2.24.3 → 2.25.0-alpha.0

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";
@@ -5,47 +8,87 @@ const NOT_CLOSE_TARGETS = ["icon", "footer"];
 const STOP_CLOSE_TARGET = ["icon", "footer", "header"];
 export default class PreviewInnerFoundation extends BaseFoundation {
   constructor(adapter) {
+    var _this;
     super(Object.assign({}, adapter));
-
+    _this = this;
+    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.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.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.clearTimer = () => {
+      if (this._timer) {
+        clearTimeout(this._timer);
+        this._timer = null;
       }
     };
-
-    this.handleMouseMove = e => {
-      this._adapter.setMouseActiveTime(new Date().getTime());
-
-      this.setState({
-        viewerVisible: true
-      });
+    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 {
         maskClosable
@@ -55,50 +98,42 @@ export default class PreviewInnerFoundation extends BaseFoundation {
         clientX,
         clientY
       } = e;
-
       const {
         x,
         y
-      } = this._adapter.getStartMouseDown(); // 对鼠标移动做容错处理，当 x 和 y 方向在 mouseUp 的时候移动距离都小于等于 5px 时候就可以关闭预览
+      } = 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 做判断，鼠标在用户点击时候无意识的轻微移动无法关闭预览，不符合用户预期
       // 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._adapter.notifyVisibleChange(false);
       }
     };
-
     this.handleMouseDown = e => {
       const {
         clientX,
         clientY
       } = e;
-
-      this._adapter.setStartMouseDown(clientX, clientY);
+      this._startMouseDown = {
+        x: clientX,
+        y: 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 +142,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,43 +152,34 @@ 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,
         imgSrc
       } = this.getStates();
+      const setDownloadName = this._adapter.getSetDownloadFunc();
       const downloadSrc = imgSrc[currentIndex];
-      const downloadName = downloadSrc.slice(downloadSrc.lastIndexOf("/") + 1);
-      downloadImage(downloadSrc, downloadName);
-
+      const downloadName = setDownloadName ? setDownloadName(downloadSrc) : downloadSrc.slice(downloadSrc.lastIndexOf("/") + 1).split('?')[0];
+      downloadImage(downloadSrc, downloadName, this._adapter.notifyDownloadError);
       this._adapter.notifyDownload(downloadSrc, currentIndex);
     };
-
-    this.handlePreviewClose = () => {
+    this.handlePreviewClose = e => {
       this._adapter.notifyVisibleChange(false);
-
       this._adapter.notifyClose();
+      handlePrevent(e);
     };
-
     this.handleAdjustRatio = type => {
       this.setState({
         ratio: type
       });
-
       this._adapter.notifyRatioChange(type);
     };
-
     this.handleRotateImage = direction => {
       const {
         rotation
@@ -164,21 +188,21 @@ export default class PreviewInnerFoundation extends BaseFoundation {
       this.setState({
         rotation: newRotation
       });
-
       this._adapter.notifyRotateChange(newRotation);
     };
-
-    this.handleZoomImage = newZoom => {
+    this.handleZoomImage = function (newZoom) {
+      let notify = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
       const {
         zoom
-      } = this.getStates();
-
-      this._adapter.notifyZoom(newZoom, newZoom > zoom);
-
-      this.setState({
-        zoom: newZoom
-      });
-    }; // 当 visible 改变之后，预览组件完成首张图片加载后，启动预加载
+      } = _this.getStates();
+      if (zoom !== newZoom) {
+        notify && _this._adapter.notifyZoom(newZoom, newZoom > zoom);
+        _this.setState({
+          zoom: newZoom
+        });
+      }
+    };
+    // 当 visible 改变之后，预览组件完成首张图片加载后，启动预加载
     // 如： 1，2，3，4，5，6，7，8张图片， 点击第 4 张图片，preLoadGap 为 2
     // 当 visible 从 false 变为 true ，首先加载第 4 张图片，当第 4 张图片加载完成后，
     // 再按照 5，3，6，2的顺序预先加载这几张图片
@@ -186,8 +210,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 +220,29 @@ 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);
+      if (preloadImages.length === 0) {
+        return;
+      }
       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 +252,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 +264,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 +297,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,23 +318,14 @@ export default class PreviewInnerFoundation extends BaseFoundation {
       }
     };
   }
-
   beforeShow() {
     this._adapter.registerKeyDownListener();
-
     this._adapter.disabledBodyScroll();
+    this.updateTimer();
   }
-
   afterHide() {
     this._adapter.unregisterKeyDownListener();
-
     this._adapter.enabledBodyScroll();
+    this.clearTimer();
   }
-
-  handleRatio(type) {
-    this.setState({
-      ratio: type
-    });
-  }
-
 }

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

@@ -1,4 +1,4 @@
 export declare const isTargetEmit: (event: any, targetClasses: any) => boolean;
-export declare const downloadImage: (src: string, filename: string) => void;
+export declare const downloadImage: (src: string, filename: string, downloadErrorCb: (src: string) => void) => Promise<void>;
 export declare const crossMerge: (leftArr?: any[], rightArr?: any[]) => any[];
 export declare const getPreloadImagArr: (imgSrc: string[], currentIndex: number, preLoadGap: number, infinite: boolean) => any[];

package/lib/es/image/utils.js

@@ -1,3 +1,30 @@
+var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
 export const isTargetEmit = (event, targetClasses) => {
   // event.path usage is discouraged, use event.composedPath() as it's standard and is more future-proof
   // path is the event-triggered bubbling path, which stores each node through which bubbling passes.
@@ -7,33 +34,29 @@ export const isTargetEmit = (event, targetClasses) => {
     if (node.className && typeof node.className === "string") {
       return targetClasses.some(c => node.className.includes(c));
     }
-
     return false;
   });
   return isTarget;
 };
-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;
-    eleLink.style.display = "none";
-    eleLink.download = filename;
-    eleLink.href = src;
-    const canvas = document.createElement("canvas");
-    canvas.width = image.width;
-    canvas.height = image.height;
-    const context = canvas.getContext("2d");
-    context.drawImage(image, 0, 0, image.width, image.height);
-    eleLink.href = canvas.toDataURL("image/jpeg");
-    document.body.appendChild(eleLink);
-    eleLink.click();
-    document.body.removeChild(eleLink);
-  };
-};
+export const downloadImage = (src, filename, downloadErrorCb) => __awaiter(void 0, void 0, void 0, function* () {
+  try {
+    const response = yield fetch(src);
+    if (response.ok) {
+      const blob = yield response.blob();
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = filename;
+      link.click();
+      URL.revokeObjectURL(url);
+      link.remove();
+    } else {
+      downloadErrorCb(src);
+    }
+  } catch (error) {
+    downloadErrorCb(src);
+  }
+});
 export const crossMerge = function () {
   let leftArr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   let rightArr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -45,13 +68,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 +81,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 +106,6 @@ export const getPreloadImagArr = (imgSrc, currentIndex, preLoadGap, infinite) =>
       }
     }
   }
-
   const result = crossMerge(leftArr.reverse(), rightArr);
   const duplicateResult = Array.from(new Set(result));
   return duplicateResult;

package/lib/es/image/variables.scss

@@ -27,7 +27,7 @@ $height-image_preview_icon: 40px; // 图像预览footer操作区icon高度
 $height-image_preview_header_close: 30px; // 图像预览header部分的关闭热区高度
 
 $radius-image: var(--semi-border-radius-small); // 图像圆角
-$radius-image_preview_footer: 6px; // 图像预览footer操作区圆角
+$radius-image_preview_footer: var(--semi-border-radius-medium); // 图像预览footer操作区圆角
 
 $color-image_mask-bg: var(--semi-color-overlay-bg); // 图像蒙层背景色
 $color-image_mask_info_text: var(--semi-color-white); // 图像蒙层文字颜色

package/lib/es/input/constants.js

@@ -1,6 +1,6 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-input")
+  PREFIX: `${BASE_CLASS_PREFIX}-input`
 };
 const strings = {
   SIZE: ['small', 'large', 'default'],