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

package/lib/es/image/previewFooterFoundation.js

@@ -0,0 +1,57 @@
+import BaseFoundation from "../base/foundation";
+export default class PreviewFooterFoundation extends BaseFoundation {
+  constructor() {
+    super(...arguments);
+
+    this.changeSliderValue = type => {
+      const {
+        zoom,
+        step,
+        min,
+        max
+      } = this.getProps();
+      let newValue = type === "plus" ? zoom + step : zoom - step;
+
+      if (newValue > max) {
+        newValue = max;
+      } else if (newValue < min) {
+        newValue = min;
+      }
+
+      this.handleValueChange(newValue);
+    };
+
+    this.handleValueChange = value => {
+      const {
+        onZoomIn,
+        onZoomOut,
+        zoom
+      } = this.getProps();
+
+      if (value > zoom) {
+        onZoomIn(value / 100);
+      } else {
+        onZoomOut(value / 100);
+      }
+
+      this._adapter.setStartMouseOffset(value);
+    };
+
+    this.handleRatioClick = () => {
+      const {
+        ratio,
+        onAdjustRatio
+      } = this.getProps();
+      const type = ratio === "adaptation" ? "realSize" : "adaptation";
+      onAdjustRatio(type);
+    };
+
+    this.handleRotate = direction => {
+      const {
+        onRotate
+      } = this.getProps();
+      onRotate && onRotate(direction);
+    };
+  }
+
+}

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

@@ -0,0 +1,5 @@
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+export default class PreviewFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<Partial<DefaultAdapter>> {
+    handleVisibleChange: (newVisible: boolean) => void;
+    handleCurrentIndexChange: (index: number) => void;
+}

package/lib/es/image/previewFoundation.js

@@ -0,0 +1,37 @@
+import BaseFoundation from "../base/foundation";
+export default class PreviewFoundation extends BaseFoundation {
+  constructor() {
+    super(...arguments);
+
+    this.handleVisibleChange = newVisible => {
+      const {
+        visible,
+        onVisibleChange
+      } = this.getProps();
+
+      if (!(visible in this.getProps())) {
+        this.setState({
+          visible: newVisible
+        });
+      }
+
+      onVisibleChange && onVisibleChange(newVisible);
+    };
+
+    this.handleCurrentIndexChange = index => {
+      const {
+        currentIndex,
+        onChange
+      } = this.getProps();
+
+      if (!(currentIndex in this.getProps())) {
+        this.setState({
+          currentIndex: index
+        });
+      }
+
+      onChange && onChange(index);
+    };
+  }
+
+}

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

@@ -0,0 +1,58 @@
+/// <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;
+    getContainerRef: () => any;
+    getImageRef: () => any;
+    getMouseMove: () => boolean;
+    setStartMouseMove: (move: boolean) => void;
+    getMouseOffset: () => {
+        x: number;
+        y: number;
+    };
+    setStartMouseOffset: (offset: {
+        x: number;
+        y: number;
+    }) => void;
+    setLoading: (loading: boolean) => void;
+}
+export interface DragDirection {
+    canDragVertical: boolean;
+    canDragHorizontal: boolean;
+}
+export interface ExtremeBounds {
+    left: number;
+    top: number;
+}
+export interface ImageOffset {
+    x: number;
+    y: number;
+}
+export default class PreviewImageFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PreviewImageAdapter<P, S>, P, S> {
+    constructor(adapter: PreviewImageAdapter<P, S>);
+    _isImageVertical: () => boolean;
+    _getImageBounds: () => DOMRect;
+    _getContainerBounds: () => DOMRect;
+    _getOffset: (e: any) => ImageOffset;
+    setLoading: (loading: boolean) => void;
+    handleWindowResize: () => void;
+    handleLoad: (e: any) => void;
+    handleError: (e: any) => void;
+    handleResizeImage: () => void;
+    handleRightClickImage: (e: any) => boolean;
+    handleWheel: (e: React.WheelEvent<HTMLImageElement>) => void;
+    onWheel: import("lodash").DebouncedFunc<(e: React.WheelEvent<HTMLImageElement>) => void>;
+    calcCanDragDirection: () => DragDirection;
+    handleZoomChange: (newZoom: number, e: any) => void;
+    calcExtremeBounds: () => ExtremeBounds;
+    handleMoveImage: (e: any) => void;
+    handleImageMouseDown: (e: any) => void;
+    handleImageMouseUp: () => void;
+}

package/lib/es/image/previewImageFoundation.js

@@ -0,0 +1,352 @@
+import _isUndefined from "lodash/isUndefined";
+import _throttle from "lodash/throttle";
+import BaseFoundation from "../base/foundation";
+import { handlePrevent } from "../utils/a11y";
+export default class PreviewImageFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+
+    this._isImageVertical = () => this.getProp("rotation") % 180 !== 0;
+
+    this._getImageBounds = () => {
+      const imageRef = this._adapter.getImageRef();
+
+      return imageRef === null || imageRef === void 0 ? void 0 : imageRef.getBoundingClientRect();
+    };
+
+    this._getContainerBounds = () => {
+      var _a;
+
+      const containerRef = this._adapter.getContainerRef();
+
+      return (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    };
+
+    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 {
+        setRatio
+      } = this.getProps();
+      const {
+        ratio
+      } = this.getProps();
+
+      const {
+        originImageWidth,
+        originImageHeight
+      } = this._adapter.getOriginImageSize();
+
+      if (originImageWidth && originImageHeight) {
+        if (ratio !== "adaptation") {
+          setRatio("adaptation");
+        } else {
+          this.handleResizeImage();
+        }
+      }
+    };
+
+    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,
+        src
+      } = this.getProps();
+      this.setState({
+        loading: false
+      });
+      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 containerRef = this._adapter.getContainerRef();
+
+      if (containerRef && containerRef.current) {
+        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();
+        return false;
+      } else {
+        return true;
+      }
+    };
+
+    this.handleWheel = e => {
+      this.onWheel(e);
+      handlePrevent(e);
+    };
+
+    this.onWheel = _throttle(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 (!_isUndefined(_zoom)) {
+        onZoom(_zoom);
+      }
+    }, 50);
+
+    this.calcCanDragDirection = () => {
+      const {
+        width,
+        height
+      } = this.getStates();
+      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 imageRef = this._adapter.getImageRef();
+
+      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;
+
+      let _offset;
+
+      const horizontal = !this._isImageVertical();
+      let newTop = 0;
+      let newLeft = 0;
+
+      if (horizontal) {
+        _offset = {
+          x: 0.5 * (containerWidth - newWidth),
+          y: 0.5 * (containerHeight - newHeight)
+        };
+        newLeft = _offset.x;
+        newTop = _offset.y;
+      } else {
+        _offset = {
+          x: 0.5 * (containerWidth - newHeight),
+          y: 0.5 * (containerHeight - newWidth)
+        };
+        newLeft = _offset.x - (newWidth - newHeight) / 2;
+        newTop = _offset.y + (newWidth - newHeight) / 2;
+      }
+
+      this.setState({
+        width: newWidth,
+        height: newHeight,
+        offset: _offset,
+        left: newLeft,
+        top: newTop,
+        currZoom: newZoom
+      });
+      imageRef && (imageRef.style.cursor = canDrag ? "grab" : "default");
+    };
+
+    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
+        };
+        this.setState({
+          offset: _offset,
+          left: this._isImageVertical() ? _offset.x - (width - height) / 2 : _offset.x,
+          top: this._isImageVertical() ? _offset.y + (width - height) / 2 : _offset.y
+        });
+      }
+    };
+
+    this.handleImageMouseDown = e => {
+      this._adapter.setStartMouseOffset(this._getOffset(e));
+
+      this._adapter.setStartMouseMove(true);
+    };
+
+    this.handleImageMouseUp = () => {
+      this._adapter.setStartMouseMove(false);
+    };
+  }
+
+}

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

@@ -0,0 +1,44 @@
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+export interface PreviewInnerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    getIsInGroup: () => boolean;
+    notifyChange: (index: number) => void;
+    notifyZoom: (zoom: number, increase: boolean) => void;
+    notifyClose: () => void;
+    notifyVisibleChange: (visible: boolean) => void;
+    notifyRatioChange: (type: string) => void;
+    notifyRotateChange: (angle: number) => void;
+    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;
+}
+export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PreviewInnerAdapter<P, S>, P, S> {
+    constructor(adapter: PreviewInnerAdapter<P, S>);
+    beforeShow(): void;
+    afterHide(): void;
+    handleRatio(type: string): void;
+    handleViewVisibleChange: () => void;
+    handleMouseMoveEvent: (e: any, event: string) => void;
+    handleMouseMove: (e: any) => void;
+    handleMouseUp: (e: any) => void;
+    handleMouseDown: (e: any) => void;
+    handleKeyDown: (e: any) => void;
+    handleSwitchImage: (direction: string) => void;
+    handleDownload: () => void;
+    handlePreviewClose: () => void;
+    handleAdjustRatio: (type: string) => void;
+    handleRotateImage: (direction: string) => void;
+    handleZoomImage: (newZoom: number) => void;
+    preloadGapImage: () => void;
+    preloadSingleImage: () => void;
+    setLoadSuccessStatus: (src: string) => void;
+    onImageLoad: (src: string) => void;
+}