@douyinfe/semi-foundation 2.63.1 → 2.63.2-alpha.0

package/image/previewInnerFoundation.ts

@@ -20,7 +20,8 @@ export interface PreviewInnerAdapter<P = Record<string, any>, S = Record<string,
     disabledBodyScroll: () => void;
     enabledBodyScroll: () => void;
     getSetDownloadFunc: () => (src: string) => string;
-    isValidTarget: (e: any) => boolean
+    isValidTarget: (e: any) => boolean;
+    changeImageZoom: (zoom: number, e?: WheelEvent) => void
 }
 
 
@@ -90,12 +91,12 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
         }
     }
 
-    handleWheel = (e: any) => {
+    handleWheel = (e: WheelEvent) => {
         this.onWheel(e);
         handlePrevent(e);
     }
 
-    onWheel = (e: any): void => {
+    onWheel = (e: WheelEvent): void => {
         const { zoomStep, maxZoom, minZoom } = this.getProps();
         const { zoom: currZoom } = this.getStates();
         let _zoom: number;
@@ -111,7 +112,7 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
             }
         }
         if (!isUndefined(_zoom)) {
-            this.handleZoomImage(_zoom);
+            this.handleZoomImage(_zoom, true, e);
         }
     };
 
@@ -193,17 +194,21 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
 
     handleRotateImage = (direction: string) => {
         const { rotation } = this.getStates();
-        const newRotation = rotation + (direction === "left" ? 90 : (-90));
+        const ROTATE_STEP = 90;
+        const newRotation = rotation + (direction === "left" ? -ROTATE_STEP : ROTATE_STEP);
+        
         this.setState({
             rotation: newRotation,
         } as any);
         this._adapter.notifyRotateChange(newRotation);
     }
 
-    handleZoomImage = (newZoom: number, notify: boolean = true) => {
+    handleZoomImage = (newZoom: number, notify: boolean = true, e?: WheelEvent) => {
         const { zoom } = this.getStates();
         if (zoom !== newZoom) {
             notify && this._adapter.notifyZoom(newZoom, newZoom > zoom);
+            
+            this._adapter.changeImageZoom(newZoom, e);
             this.setState({
                 zoom: newZoom,
             } as any);

package/lib/cjs/base/foundation.js

@@ -93,7 +93,7 @@ class BaseFoundation {
   _isControlledComponent() {
     let key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'value';
     const props = this.getProps();
-    const isControlComponent = (key in props);
+    const isControlComponent = key in props;
     return isControlComponent;
   }
   // Does the user have incoming props, eg: _isInProps (value)

package/lib/cjs/chat/foundation.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /// <reference types="lodash" />
 import BaseFoundation, { DefaultAdapter } from "../base/foundation";
 export interface Content {
@@ -27,7 +26,7 @@ export interface Message {
     [x: string]: any;
 }
 export interface ChatAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
-    getContainerRef: () => React.RefObject<HTMLDivElement>;
+    getContainerRef: () => HTMLDivElement;
     setWheelScroll: (flag: boolean) => void;
     notifyChatsChange: (chats: Message[]) => void;
     notifyLikeMessage: (message: Message) => void;

package/lib/cjs/chat/foundation.js

@@ -33,16 +33,14 @@ class ChatFoundation extends _foundation.default {
       this._adapter.notifyStopGenerate(e);
     };
     this.scrollToBottomImmediately = () => {
-      const containerRef = this._adapter.getContainerRef();
-      const element = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
+      const element = this._adapter.getContainerRef();
       if (element) {
         element.scrollTop = element.scrollHeight;
       }
     };
     this.scrollToBottomWithAnimation = () => {
       const duration = SCROLL_ANIMATION_TIME;
-      const containerRef = this._adapter.getContainerRef();
-      const element = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
+      const element = this._adapter.getContainerRef();
       if (!element) {
         return;
       }
@@ -68,9 +66,6 @@ class ChatFoundation extends _foundation.default {
       this.animation.start();
     };
     this.containerScroll = e => {
-      if (e.target !== e.currentTarget) {
-        return;
-      }
       e.persist();
       const update = () => {
         this.getScroll(e.target);

package/lib/cjs/checkbox/checkboxGroupFoundation.js

@@ -40,7 +40,7 @@ class CheckboxGroupFoundation extends _foundation.default {
     } else {
       newValue = prevValue.filter((itm, idx) => itm !== evt.target.value);
     }
-    const isControlledMode = ('value' in this.getProps());
+    const isControlledMode = 'value' in this.getProps();
     if (isControlledMode) {
       // Controlled mode only needs to notify
       this.notifyChange(newValue);

package/lib/cjs/datePicker/foundation.js

@@ -265,7 +265,7 @@ class DatePickerFoundation extends _foundation.default {
     const {
       value
     } = this._adapter.getStates();
-    const needResetCachedSelectedValue = !this.isCachedSelectedValueValid(willUpdateDates) || this._adapter.needConfirm() && !this.clickConfirmButton;
+    const needResetCachedSelectedValue = (0, _isNullOrUndefined.default)(willUpdateDates) || !this.isCachedSelectedValueValid(willUpdateDates) || this._adapter.needConfirm() && !this.clickConfirmButton;
     if (needResetCachedSelectedValue) {
       this.resetCachedSelectedValue(value);
     }

package/lib/cjs/image/image.css

@@ -90,6 +90,7 @@
   align-items: center;
   padding: 0 24px;
   z-index: 1;
+  pointer-events: none;
 }
 .semi-image-preview-header-title {
   flex: 1;
@@ -102,6 +103,7 @@
   width: 30px;
   height: 30px;
   border-radius: 50%;
+  pointer-events: auto;
 }
 .semi-image-preview-header-close:hover {
   background-color: rgba(0, 0, 0, 0.75);
@@ -166,11 +168,13 @@
 .semi-image-preview-image {
   position: relative;
   height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .semi-image-preview-image-img {
   position: absolute;
   transform: scale3d(1, 1, 1) var(--semi-transform-rotate-none);
-  transition: transform 300ms 0s;
   z-index: 0;
   user-select: none;
 }

package/lib/cjs/image/image.scss

@@ -100,6 +100,7 @@ $module: #{$prefix}-image;
         align-items: center;
         padding: $spacing-image_preview_header-paddingY $spacing-image_preview_header-paddingX;
         z-index: $z-image_preview_header;
+        pointer-events: none;
 
         &-title {
             flex: 1;
@@ -113,6 +114,7 @@ $module: #{$prefix}-image;
             width: $width-image_preview_header_close;
             height: $height-image_preview_header_close;
             border-radius: 50%;
+            pointer-events: auto;
 
             &:hover {
                 background-color: $color-image_header_close-bg;
@@ -192,11 +194,14 @@ $module: #{$prefix}-image;
     &-image {
         position: relative;
         height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
 
         &-img {
             position: absolute;
             transform: scale3d($transform_scale3d-image_preview_image_img) $transform_rotate-image_preview_image_img;
-            transition: transform $transition_duration-image_preview_image_img  $transition_delay-image_preview_image_img;
+            // transition: transform $transition_duration-image_preview_image_img  $transition_delay-image_preview_image_img;
             z-index: 0;
             user-select: none;
         }

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

@@ -9,36 +9,69 @@ export interface DragDirection {
     canDragVertical: boolean;
     canDragHorizontal: boolean;
 }
-export interface ExtremeBounds {
-    left: number;
-    top: number;
+export interface ExtremeTranslate {
+    x: number;
+    y: number;
 }
-export interface ImageOffset {
+export interface Offset {
     x: number;
     y: number;
 }
+export interface Translate {
+    x: number;
+    y: number;
+}
+interface CalcBoundingRectMouseOffset {
+    offset: Offset;
+    width: number;
+    height: number;
+    rotation?: number;
+}
+export interface BoundingRectSize {
+    width: number;
+    height: 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>);
-    startMouseOffset: {
+    startMouseClientPosition: {
         x: number;
         y: number;
     };
     originImageWidth: any;
     originImageHeight: any;
+    containerWidth: number;
+    containerHeight: number;
+    init(): void;
     _isImageVertical: () => boolean;
-    _getImageBounds: () => DOMRect;
-    _getContainerBounds: () => DOMRect;
-    _getOffset: (e: any) => ImageOffset;
+    _getContainerBoundingRectSize: () => void;
+    _getAdaptationZoom: () => number;
+    _getInitialZoom: () => number;
     setLoading: (loading: boolean) => void;
     handleWindowResize: () => void;
     handleLoad: (e: any) => void;
     handleError: (e: any) => void;
-    handleResizeImage: (notify?: boolean) => void;
     handleRatioChange: () => void;
+    initializeImageZoom: (notify?: boolean) => void;
+    initializeTranslate: () => void;
+    initializeImage: (notify?: boolean) => void;
     handleRightClickImage: (e: any) => boolean;
-    calcCanDragDirection: () => DragDirection;
-    calculatePreviewImage: (newZoom: number, e: any) => void;
-    calcExtremeBounds: () => ExtremeBounds;
-    handleMoveImage: (e: any) => void;
+    calcBoundingRectSize(width?: number, height?: number, rotation?: number): {
+        width: number;
+        height: number;
+    };
+    getCanDragDirection: (width: number, height: number) => DragDirection;
+    changeZoom: (newZoom: number, e?: WheelEvent) => void;
+    getExtremeTranslate: (width: number, height: number) => ExtremeTranslate;
+    getSafeTranslate: (width: number, height: number, translateX: number, translateY: number) => {
+        x: number;
+        y: number;
+    };
+    handleImageMove: (e: MouseEvent) => void;
+    moveImage: (e: MouseEvent) => void;
     handleImageMouseDown: (e: any) => void;
+    calcBoundingRectMouseOffset: (calcBoundingRectMouseOffset: CalcBoundingRectMouseOffset) => {
+        x: number;
+        y: number;
+    };
 }
+export {};