@douyinfe/semi-foundation 2.27.1 → 2.28.0-beta.0

package/lib/es/image/previewInnerFoundation.js

@@ -1,330 +0,0 @@
-import BaseFoundation from "../base/foundation";
-import KeyCode from "../utils/keyCode";
-import { getPreloadImagArr, downloadImage, isTargetEmit } from "./utils";
-const NOT_CLOSE_TARGETS = ["icon", "footer"];
-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
-      } = this.getProps();
-      let couldClose = !isTargetEmit(e, NOT_CLOSE_TARGETS);
-      const {
-        clientX,
-        clientY
-      } = e;
-
-      const {
-        x,
-        y
-      } = 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 {
-        imgSrc,
-        currentIndex: currentIndexInState
-      } = 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 {
-        this.setState({
-          currentIndex: newIndex
-        });
-      }
-
-      this._adapter.notifyChange(newIndex, direction);
-
-      this.setState({
-        direction,
-        rotation: 0
-      });
-
-      this._adapter.notifyRotateChange(0);
-    };
-
-    this.handleDownload = () => {
-      const {
-        currentIndex,
-        imgSrc
-      } = this.getStates();
-      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
-      } = this.getStates();
-      const newRotation = rotation + (direction === "left" ? 90 : -90);
-      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 改变之后，预览组件完成首张图片加载后，启动预加载
-    // 如： 1，2，3，4，5，6，7，8张图片， 点击第 4 张图片，preLoadGap 为 2
-    // 当 visible 从 false 变为 true ，首先加载第 4 张图片，当第 4 张图片加载完成后，
-    // 再按照 5，3，6，2的顺序预先加载这几张图片
-    // When visible changes, the preview component finishes loading the first image and starts preloading
-    // 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,
-        preLoadGap,
-        infinite,
-        currentIndex
-      } = this.getProps();
-      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 张；
-    // - 如果向 左 切换到第 4 张，则第 4 张图片加载动作结束后（无论加载成功 or 失败），会预先加载第 2 张；
-    // When switching the left and right pictures, when the switched picture is loaded, the next preloaded picture is determined according to the direction
-    // Such as: 1, 2, 3, 4, 5, 6, 7, 8 pictures
-    // 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,
-        preLoadGap,
-        infinite
-      } = this.getProps();
-      const {
-        imgSrc,
-        currentIndex,
-        direction,
-        imgLoadStatus
-      } = this.getStates();
-
-      if (!preLoad || typeof preLoadGap !== "number" || preLoadGap < 1) {
-        return;
-      } // 根据方向决定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
-      } = this.getStates();
-      const status = Object.assign({}, imgLoadStatus);
-      status[src] = true;
-      this.setState({
-        imgLoadStatus: status
-      });
-    };
-
-    this.onImageLoad = src => {
-      const {
-        preloadAfterVisibleChange
-      } = this.getStates();
-      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({
-          preloadAfterVisibleChange: false
-        });
-      } else {
-        this.preloadSingleImage();
-      }
-    };
-  }
-
-  beforeShow() {
-    this._adapter.registerKeyDownListener();
-
-    this._adapter.disabledBodyScroll();
-  }
-
-  afterHide() {
-    this._adapter.unregisterKeyDownListener();
-
-    this._adapter.enabledBodyScroll();
-  }
-
-  handleRatio(type) {
-    this.setState({
-      ratio: type
-    });
-  }
-
-}

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

@@ -1,4 +0,0 @@
-export declare const isTargetEmit: (event: any, targetClasses: any) => boolean;
-export declare const downloadImage: (src: string, filename: string) => 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,93 +0,0 @@
-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.
-  // path.length-4 is to remove elements above the root node, such as body, html, document, window
-  const path = event === null || event === void 0 ? void 0 : event.composedPath();
-  const isTarget = path === null || path === void 0 ? void 0 : path.slice(0, path.length - 4).some(node => {
-    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 crossMerge = function () {
-  let leftArr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  let rightArr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  let newArr = [];
-  const leftLen = leftArr.length;
-  const rightLen = rightArr.length;
-  const crossLength = leftLen <= rightLen ? leftLen : rightLen;
-  new Array(crossLength).fill(0).forEach((item, index) => {
-    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) => {
-  const beginIndex = currentIndex - preLoadGap;
-  const endIndex = currentIndex + preLoadGap;
-  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);
-      rightArr = imgSrc.concat(imgSrc).slice(currentIndex + 1, endIndex + 1 < 2 * srcLength ? endIndex + 1 : 2 * srcLength);
-    } else {
-      leftArr = imgSrc.slice(0, currentIndex);
-      rightArr = imgSrc.slice(currentIndex + 1, srcLength);
-    }
-  } else {
-    if (infinite) {
-      leftArr = imgSrc.concat(imgSrc).slice(beginIndex + srcLength, currentIndex + srcLength);
-      rightArr = imgSrc.concat(imgSrc).slice(currentIndex + 1, endIndex + 1);
-    } else {
-      if (beginIndex >= 0 && endIndex < srcLength) {
-        leftArr = imgSrc.slice(beginIndex, currentIndex);
-        rightArr = imgSrc.slice(currentIndex + 1, endIndex + 1);
-      } else if (beginIndex < 0) {
-        leftArr = imgSrc.slice(0, currentIndex);
-        rightArr = imgSrc.slice(currentIndex + 1, 2 * preLoadGap + 1);
-      } else {
-        rightArr = imgSrc.slice(currentIndex + 1, srcLength);
-        leftArr = imgSrc.slice(srcLength - 2 * preLoadGap - 1, currentIndex);
-      }
-    }
-  }
-
-  const result = crossMerge(leftArr.reverse(), rightArr);
-  const duplicateResult = Array.from(new Set(result));
-  return duplicateResult;
-};

package/lib/es/input/constants.d.ts

@@ -1,12 +0,0 @@
-declare const cssClasses: {
-    readonly PREFIX: "semi-input";
-};
-declare const strings: {
-    readonly SIZE: readonly ["small", "large", "default"];
-    readonly DEFAULT_SIZE: "default";
-    readonly STATUS: readonly ["default", "error", "warning", "success"];
-    readonly CLEARBTN_CLICKED_EVENT_FLAG: "__fromClearBtn";
-    readonly MODE: readonly ["password"];
-};
-declare const numbers: {};
-export { cssClasses, strings, numbers };

package/lib/es/input/constants.js

@@ -1,13 +0,0 @@
-import { BASE_CLASS_PREFIX } from '../base/constants';
-const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-input")
-};
-const strings = {
-  SIZE: ['small', 'large', 'default'],
-  DEFAULT_SIZE: 'default',
-  STATUS: ['default', 'error', 'warning', 'success'],
-  CLEARBTN_CLICKED_EVENT_FLAG: '__fromClearBtn',
-  MODE: ['password']
-};
-const numbers = {};
-export { cssClasses, strings, numbers };

package/lib/es/input/foundation.d.ts

@@ -1,82 +0,0 @@
-import BaseFoundation, { DefaultAdapter, noopFunction } from '../base/foundation';
-export interface InputDefaultAdapter {
-    notifyChange: noopFunction;
-    setValue: noopFunction;
-}
-export interface InputAdapter extends Partial<DefaultAdapter>, Partial<InputDefaultAdapter> {
-    setMinLength(minLength: number): void;
-    notifyClear(e: any): void;
-    notifyBlur(value: any, e: any): void;
-    setEyeClosed(eyeClosed: boolean): void;
-    toggleFocusing(focused: boolean): void;
-    focusInput(): void;
-    notifyFocus(value: any, e: any): void;
-    notifyInput(e: any): void;
-    notifyKeyDown(e: any): void;
-    notifyKeyUp(e: any): void;
-    notifyKeyPress(e: any): void;
-    notifyEnterPress(e: any): void;
-    isEventTarget(e: any): boolean;
-}
-declare class InputFoundation extends BaseFoundation<InputAdapter> {
-    static get inputDefaultAdapter(): {
-        notifyChange: (...args: any[]) => void;
-        setValue: (...args: any[]) => void;
-    };
-    _timer: number | null;
-    constructor(adapter: InputAdapter);
-    init(): void;
-    destroy(): void;
-    setDisable(): void;
-    _setInitValue(): void;
-    setValue(value: any): void;
-    handleChange(value: any, e: any): void;
-    /**
-     * Modify minLength to trigger browser check for minimum length
-     * Controlled mode is not checked
-     * @param {String} value
-     */
-    handleVisibleMinLength(value: any): void;
-    /**
-     * Handle input emoji characters beyond maxLength
-     * Controlled mode is not checked
-     * @param {String} value
-     */
-    handleVisibleMaxLength(value: any): any;
-    /**
-     * Truncate input values based on maximum length
-     * @param {String} value
-     * @param {Number} maxLength
-     * @returns {String}
-     */
-    handleTruncateValue(value: any, maxLength: number): any;
-    handleClear(e: any): void;
-    /**
-     * trigger when click input wrapper
-     * @param {Event} e
-     */
-    handleClick(e: any): void;
-    handleModeChange(mode: string): void;
-    handleClickEye(e: any): void;
-    handleInputType(type: string): string;
-    handleMouseDown(e: any): void;
-    handleMouseUp(e: any): void;
-    handleBlur(e: any): void;
-    handleFocus(e: any): void;
-    handleInput(e: any): void;
-    handleKeyDown(e: any): void;
-    handleKeyUp(e: any): void;
-    handleKeyPress(e: any): void;
-    isAllowClear(): any;
-    handleClickPrefixOrSuffix(e: any): void;
-    /**
-     * Blocking mousedown events prevents input from losing focus
-     * @param {Event} e
-     */
-    handlePreventMouseDown(e: any): void;
-    /**
-     * A11y: simulate password button click
-     */
-    handleModeEnterPress(e: any): void;
-}
-export default InputFoundation;