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

package/descriptions/variables.scss

@@ -13,3 +13,13 @@ $color-descriptions_value-text-default: var(--semi-color-text-0); // value 文
 
 $spacing-descriptions_value_plain-paddingLeft: 8px; // 普通显示 plain 模式下 value 左侧内边距
 $spacing-descriptions_item_double-padding: 0; // 双行显示右侧 item 内边距
+
+
+$font-descriptions_key_small-fontSize:$font-size-small; // 双行显示 key 文字大小 - 小尺寸
+$font-descriptions_value_small-fontSize:$font-size-header-6; // 双行显示 value 文字大小 - 小尺寸
+
+$font-descriptions_key_medium-fontSize:$font-size-regular; // 双行显示 key 文字大小 - 小尺寸
+$font-descriptions_value_medium-fontSize:$font-size-header-4; // 双行显示 value 文字大小 - 小尺寸
+
+$font-descriptions_key_large-fontSize:$font-size-regular; // 双行显示 key 文字大小 - 小尺寸
+$font-descriptions_value_large-fontSize:$font-size-header-2; // 双行显示 value 文字大小 - 小尺寸

package/dropdown/constants.ts

@@ -9,7 +9,7 @@ const cssClasses = {
 
 const strings = {
     POSITION_SET: tooltipStrings.POSITION_SET,
-    TRIGGER_SET: ['hover', 'focus', 'click', 'custom'],
+    TRIGGER_SET: ['hover', 'focus', 'click', 'custom', 'contextMenu'],
     DEFAULT_LEAVE_DELAY: 100,
     ITEM_TYPE: ['primary', 'secondary', 'tertiary', 'warning', 'danger'],
 };

package/dropdown/dropdown.scss

@@ -7,6 +7,7 @@ $module: #{$prefix}-dropdown;
 .#{$module} {
     @include font-size-regular;
     &-wrapper {
+        overflow-y:auto; // prevent flow out of the radius limit area
         @include shadow-elevated;
         position: relative;
         z-index: $z-dropdown;
@@ -47,6 +48,10 @@ $module: #{$prefix}-dropdown;
         transition: background-color $transition_duration-dropdown_item-bg $transition_function-dropdown_item-bg
             $transition_delay-dropdown_item-bg;
 
+        &-hover {
+            background-color: $color-dropdown_item-bg-hover;
+        }
+
         &:not(.#{$module}-item-active):hover {
             background-color: $color-dropdown_item-bg-hover;
             cursor: pointer;

package/dropdown/foundation.ts

@@ -13,7 +13,7 @@ export default class DropdownFoundation extends BaseFoundation<DropdownAdapter>
         this._adapter.notifyVisibleChange(visible);
 
         const { trigger } = this.getProps();
-        if (visible && trigger === "click"){
+        if (visible && trigger === "click") {
             const popupId = this._adapter.getPopupId();
             this.setFocusToFirstMenuItem(popupId);
         }
@@ -37,6 +37,7 @@ export default class DropdownFoundation extends BaseFoundation<DropdownAdapter>
 
     handleKeyDown(event: any): void {
         const id = event.target?.attributes['data-popupid']?.value;
+        const { visible } = this._adapter.getStates();
         switch (event.key) {
             case ' ':
             case 'Enter':
@@ -46,11 +47,11 @@ export default class DropdownFoundation extends BaseFoundation<DropdownAdapter>
                 break;
             case 'ArrowDown':
                 this.setFocusToFirstMenuItem(id);
-                handlePrevent(event);
+                visible && handlePrevent(event);
                 break;
             case 'ArrowUp':
                 this.setFocusToLastMenuItem(id);
-                handlePrevent(event);
+                visible && handlePrevent(event);
                 break;
             default:
                 break;

package/dropdown/menuFoundation.ts

@@ -8,7 +8,7 @@ export default class DropdownMenuFoundation extends BaseFoundation<Partial<Defau
 
     handleEscape(menu: Element): void {
         const trigger = this._adapter.getContext('trigger');
-        if (trigger === 'custom'){
+        if (trigger === 'custom') {
             const menuButton = menu && getMenuButton(document.querySelectorAll(`[data-popupid]`), menu.id); 
             menuButton.focus();
         }
@@ -25,11 +25,11 @@ export default class DropdownMenuFoundation extends BaseFoundation<Partial<Defau
     onMenuKeydown(event: any): void {
         const menu = getAncestorNodeByRole(event.target, 'tooltip');
         
-        if (!this.menuItemNodes){
+        if (!this.menuItemNodes) {
             this.menuItemNodes = [...(event.target.parentNode).getElementsByTagName('li')].filter(item => item.ariaDisabled !== "true");
         }
 
-        if (this.firstChars.length === 0){
+        if (this.firstChars.length === 0) {
             this.menuItemNodes.forEach((item: Element) => {
                 // the menuItemNodes can be an component and not exit textContent
                 this.firstChars.push(item.textContent.trim()[0]?.toLowerCase());

package/form/constants.ts

@@ -8,7 +8,8 @@ const strings = {
     LAYOUT: ['horizontal', 'vertical'],
     LABEL_POS: ['left', 'top', 'inset'],
     LABEL_ALIGN: ['left', 'right'],
-    EXTRA_POS: ['middle', 'bottom']
+    EXTRA_POS: ['middle', 'bottom'],
+    DEFAULT_TRIGGER: 'change',
 };
 
 const numbers = {};

package/form/form.scss

@@ -92,6 +92,7 @@ $rating: #{$prefix}-rating;
         font-weight: $font-form_label-fontWeight;
         color: $color-form_label-text-default;
         margin-bottom: $spacing-form_label-marginBottom;
+        margin-top: $spacing-form_label-marginTop;
         padding-right: $spacing-form_label-paddingRight;
         display: inline-block;
         vertical-align: middle;
@@ -256,11 +257,11 @@ $rating: #{$prefix}-rating;
         margin-bottom: 0;
         padding-top: $spacing-form_field_group_vertical-paddingTop;
         padding-bottom: $spacing-form_field_group_vertical-paddingBottom;
+        overflow: hidden;
     }
 }
 
 .#{$form}-field-group {
-
     &[x-label-pos="top"] {
     }
 
@@ -285,11 +286,13 @@ $rating: #{$prefix}-rating;
         margin-block-start: 0;
         margin-block-end: 0;
         @include font-size-header-5;
-        font-weight: 600;
+        font-weight: $font-weight-bold;
         width: 100%;
         padding-bottom: $spacing-form_section_text-paddingBottom;
+        padding-top: $spacing-form_section_text-paddingTop;
         border-bottom: $width-form_section-border solid $color-form_section-border-default;
         margin-bottom: $spacing-form_section_text-marginBottom;
+        margin-top: $spacing-form_section_text-marginTop;
         color: $color-form_section-text-default;
     }
 

package/form/foundation.ts

@@ -1,10 +1,9 @@
-/* eslint-disable prefer-const, max-len */
 import BaseFoundation from '../base/foundation';
 import * as ObjectUtil from '../utils/object';
 import isPromise from '../utils/isPromise';
 import { isValid } from './utils';
 import { isUndefined, isFunction, toPath } from 'lodash';
-import scrollIntoView, { Options as scrollIntoViewOptions } from 'scroll-into-view-if-needed';
+import scrollIntoView, { Options as ScrollIntoViewOptions } from 'scroll-into-view-if-needed';
 
 import { BaseFormAdapter, FormState, CallOpts, FieldState, FieldStaff, ComponentProps, setValuesConfig, ArrayFieldStaff } from './interface';
 
@@ -175,14 +174,16 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
                 maybePromisedErrors = errors;
             }
             if (!maybePromisedErrors) {
-                resolve(values);
+                const _values = this._adapter.cloneDeep(values);
+                resolve(_values);
                 this.injectErrorToField({});
             } else if (isPromise(maybePromisedErrors)) {
                 maybePromisedErrors.then(
                     (result: any) => {
                         // validate success，clear error
                         if (!result) {
-                            resolve(values);
+                            const _values = this._adapter.cloneDeep(values);
+                            resolve(_values);
                             this.injectErrorToField({});
                         } else {
                             this.data.errors = result;
@@ -237,7 +238,8 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
                 this._adapter.forceUpdate();
                 const errors = this.getError();
                 if (this._isValid(targetFields)) {
-                    resolve(values);
+                    const _values = this._adapter.cloneDeep(values);
+                    resolve(_values);
                 } else {
                     this._autoScroll();
                     reject(errors);
@@ -246,19 +248,19 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
         });
     }
 
-    submit(): void {
+    submit(e?: any): void {
         const { values } = this.data;
         // validate form
         this.validate()
             .then((resolveValues: any) => {
                 // if valid do submit
                 const _values = this._adapter.cloneDeep(resolveValues);
-                this._adapter.notifySubmit(_values);
+                this._adapter.notifySubmit(_values, e);
             })
             .catch(errors => {
                 const _errors = this._adapter.cloneDeep(errors);
                 const _values = this._adapter.cloneDeep(values);
-                this._adapter.notifySubmitFail(_errors, _values);
+                this._adapter.notifySubmitFail(_errors, _values, e);
             });
     }
 
@@ -694,7 +696,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
         }
     }
 
-    _getErrorFieldAndScroll(scrollOpts?: scrollIntoViewOptions | boolean): void {
+    _getErrorFieldAndScroll(scrollOpts?: ScrollIntoViewOptions | boolean): void {
         const errorDOM = this._adapter.getAllErrorDOM();
         if (errorDOM && errorDOM.length) {
             try {
@@ -704,7 +706,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
         }
     }
 
-    scrollToField(field: string, scrollOpts = { behavior: 'smooth', block: 'start' } as scrollIntoViewOptions): void {
+    scrollToField(field: string, scrollOpts = { behavior: 'smooth', block: 'start' } as ScrollIntoViewOptions): void {
         if (this.getFieldExist(field)) {
             const fieldDOM = this._adapter.getFieldDOM(field);
             scrollIntoView(fieldDOM as Element, scrollOpts);

package/form/interface.ts

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-types */
-/* eslint-disable max-len */
 import { DefaultAdapter } from '../base/foundation';
-import { Options as scrollIntoViewOptions } from 'scroll-into-view-if-needed';
+import { Options as ScrollIntoViewOptions } from 'scroll-into-view-if-needed';
 
 export type BasicTriggerType = 'blur' | 'change' | 'custom' | 'mount';
 
@@ -13,8 +12,8 @@ export type BasicFieldError = Array<any>;
 
 export interface BaseFormAdapter<P = Record<string, any>, S = Record<string, any>, Values extends object = any> extends DefaultAdapter<P, S> {
     cloneDeep: (val: any, ...rest: any[]) => any;
-    notifySubmit: (values: any) => void;
-    notifySubmitFail: (errors: Record<keyof Values, BasicFieldError>, values: Partial<Values>) => void;
+    notifySubmit: (values: any, e?: any) => void;
+    notifySubmitFail: (errors: Record<keyof Values, BasicFieldError>, values: Partial<Values>, e?: any) => void;
     forceUpdate: (callback?: () => void) => void;
     notifyChange: (formState: FormState) => void;
     notifyValueChange: (values: any, changedValues: any) => void;
@@ -58,7 +57,7 @@ export interface BaseFormApi<T extends object = any> {
     /** submit form manual */
     submitForm: () => void;
     /** reset form manual */
-    reset: () => void;
+    reset: (fields?: Array<string>) => void;
     /** trigger validate  manual */
     validate: <K extends keyof T, Params extends Array<K>, V extends Params[number]>(fields?: Params) => Promise<{ [R in V]: T[R] }>;
     getInitValue: <K extends keyof T>(field: K) => any;
@@ -66,7 +65,7 @@ export interface BaseFormApi<T extends object = any> {
     getValues: () => T;
     /** set value of multiple fields */
     setValues: (fieldsValue: Partial<T>, config?: setValuesConfig) => void;
-    scrollToField: <K extends keyof T>(field: K, scrollConfig?: scrollIntoViewOptions) => void
+    scrollToField: <K extends keyof T>(field: K, scrollConfig?: ScrollIntoViewOptions) => void
 }
 
 export interface CallOpts {

package/form/utils.ts

@@ -1,9 +1,8 @@
-/* eslint-disable prefer-destructuring */
-/* eslint-disable prefer-const */
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import AsyncValidator from 'async-validator';
-import { cloneDeep, toPath } from 'lodash';
+import { toPath, isUndefined } from 'lodash';
 import { FieldValidateTriggerType, BasicTriggerType, ComponentProps, WithFieldOption } from './interface';
+import { strings } from './constants';
+import copy from 'fast-copy';
 
 /**
  * 
@@ -53,17 +52,43 @@ export function isValid(errors: any): boolean {
     return valid;
 }
 
-// Compatible with String and Array
-function transformTrigger(trigger: FieldValidateTriggerType): Array<BasicTriggerType> {
-    let result: BasicTriggerType[] = [];
-    if (Array.isArray(trigger)) {
-        result = trigger;
+/**
+ * trigger transform rule
+    1. If the user has set fieldProps, follow the user's fieldProps
+    2. If the user does not set fieldProps, follow formProps
+    3. If there is no formProps, follow the change
+    4. If it is an array, follow the array, if it is not an array (pure string), convert it to a string array
+ */
+
+export function transformTrigger(fieldTrigger: FieldValidateTriggerType, formTrigger: FieldValidateTriggerType): Array<BasicTriggerType> {
+    let result: BasicTriggerType[] | FieldValidateTriggerType = [];
+    let finalResult = [];
+    if (!isUndefined(fieldTrigger)) {
+        result = fieldTrigger;
+    } else if (!isUndefined(formTrigger)) {
+        result = formTrigger;
+    } else {
+        result = strings.DEFAULT_TRIGGER as BasicTriggerType;
+    }
+
+    if (Array.isArray(result)) {
+        finalResult = result;
     }
 
-    if (typeof trigger === 'string') {
-        result[0] = trigger;
+    if (typeof result === 'string') {
+        finalResult[0] = result;
+    }
+    return finalResult;
+}
+
+export function transformDefaultBooleanAPI(fieldProp: boolean, formProp: boolean, defaultVal = false) {
+    if (!isUndefined(fieldProp)) {
+        return fieldProp;
+    } else if (!isUndefined(formProp)) {
+        return formProp;
+    } else {
+        return defaultVal;
     }
-    return result;
 }
 
 export function mergeOptions(opts: WithFieldOption, props: ComponentProps) {
@@ -88,7 +113,6 @@ export function mergeOptions(opts: WithFieldOption, props: ComponentProps) {
 
 export function mergeProps(props: any) {
     const defaultProps = {
-        trigger: 'change',
         // validateStatus: 'default',
         allowEmptyString: false,
         allowEmpty: false,
@@ -96,7 +120,6 @@ export function mergeProps(props: any) {
         noLabel: false,
         noErrorMessage: false,
         isInInputGroup: false,
-        stopValidateWithError: false,
     };
     let {
         field,
@@ -150,11 +173,11 @@ export function mergeProps(props: any) {
     delete rest.checked;
 
     if (typeof initValue !== 'undefined') {
-        initValue = cloneDeep(initValue);
+        initValue = copy(initValue);
     }
 
     const required = isRequired(rules);
-    trigger = transformTrigger(trigger);
+
     emptyValue = typeof emptyValue !== 'undefined' ? emptyValue : '';
     return {
         field,

package/form/variables.scss

@@ -10,6 +10,7 @@ $spacing-form_field_group_vertical-paddingBottom: $spacing-base-tight; // 垂直
 $spacing-form_label-paddingRight: $spacing-base; // 表单项标签右侧边距（水平布局）
 $spacing-form_label-paddingTop: ($height-control-default - 20px) * 0.5; // 表单项标签顶部内边距（水平布局）
 $spacing-form_label-marginBottom: $spacing-extra-tight; // 表单项标签底部外边距
+$spacing-form_label-marginTop: 0px; // 表单项标签顶部外边距
 $spacing-form_label_extra-marginLeft: $spacing-extra-tight; // 表单项标签额外信息左侧边距
 $spacing-form_label_required-marginLeft: $spacing-extra-tight; // 表单项标签必填标志左侧边距
 $spacing-form_label_posLeft-marginRight: 0; // 表单项左侧标签右侧外边距
@@ -47,4 +48,6 @@ $width-form_section-border: $border-thickness-control; // 表单分组标题底
 $spacing-form_section-marginTop: $spacing-super-loose - $spacing-base-tight; // 表单分组顶部内边距
 $spacing-form_section_text-paddingBottom: $spacing-tight; // 表单分组标题底部内边距
 $spacing-form_section_text-marginBottom: $spacing-extra-tight; // 表单分组标题底部外边距
+$spacing-form_section_text-paddingTop: 0px; // 表单分组标题顶部内边距
+$spacing-form_section_text-marginTop: 0px; // 表单分组标题顶部外边距
 

package/grid/grid.scss

@@ -19,7 +19,7 @@ $module: #{$prefix};
     }
 }
 
-.#{$module}-col-0 {
+.#{$module}-col-0, .#{$module}-col-xs-0, .#{$module}-col-sm-0, .#{$module}-col-md-0, .#{$module}-col-lg-0, .#{$module}-col-xl-0, .#{$module}-col-xxl-0 {
     display: none;
 }
 

package/image/constants.ts

@@ -4,4 +4,8 @@ const cssClasses = {
     PREFIX: `${BASE_CLASS_PREFIX}-image`,
 } as const;
 
-export { cssClasses };
+const numbers = {
+    DEFAULT_Z_INDEX: 1070,
+};
+
+export { cssClasses, numbers };

package/image/image.scss

@@ -11,7 +11,7 @@ $module: #{$prefix}-image;
     overflow: hidden;
 
     &-img {
-        vertical-align: middle;
+        vertical-align: top;
         border-radius: inherit;
         user-select: none;
 
@@ -123,10 +123,14 @@ $module: #{$prefix}-image;
     &-footer {
         display: flex;
         align-items: center;
-        padding: $spacing-image_preview_footer-paddingY $spacing-image_preview_footer-paddingX;
-        background: $color-image_preview_footer-bg;
-        border-radius: $radius-image_preview_footer;
-        height: $height-image_preview_footer;
+
+        &-content {
+            padding: $spacing-image_preview_footer-paddingY $spacing-image_preview_footer-paddingX;
+            background: $color-image_preview_footer-bg;
+            border-radius: $radius-image_preview_footer;
+            height: $height-image_preview_footer;
+        }
+        
 
         &-wrapper {
             position: absolute;

package/image/previewFooterFoundation.ts

@@ -1,8 +1,6 @@
 import BaseFoundation, { DefaultAdapter } from "../base/foundation";
 
-export interface PreviewFooterAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
-    setStartMouseOffset: (time: number) => void
-}
+export interface PreviewFooterAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S>{}
 
 export default class PreviewFooterFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<PreviewFooterAdapter<P, S>, P, S> {
     
@@ -24,7 +22,6 @@ export default class PreviewFooterFoundation<P = Record<string, any>, S = Record
         } else {
             onZoomOut(Number((value / 100).toFixed(2)));
         }
-        this._adapter.setStartMouseOffset(value);
     };
 
     handleRatioClick = (): void => {

package/image/previewFoundation.ts

@@ -2,7 +2,7 @@ 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) => {
+    handleVisibleChange = (newVisible: boolean) => {
         const { visible, onVisibleChange } = this.getProps();
         if (!(visible in this.getProps())) {
             this.setState({

package/image/previewImageFoundation.ts

@@ -1,16 +1,8 @@
 import BaseFoundation, { DefaultAdapter } from "../base/foundation";
-import { handlePrevent } from "../utils/a11y";
-import { throttle, isUndefined } from "lodash";
 
 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;
     getContainer: () => HTMLDivElement;
     getImage: () => HTMLImageElement;
-    getMouseMove: () => boolean;
-    setStartMouseMove: (move: boolean) => void;
-    getMouseOffset: () => { x: number; y: number };
-    setStartMouseOffset: (offset: { x: number; y: number }) => void;
     setLoading: (loading: boolean) => void;
     setImageCursor: (canDrag: boolean) => void
 }
@@ -46,6 +38,10 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
         super({ ...adapter });
     }
 
+    startMouseOffset = { x: 0, y: 0 };
+    originImageWidth = null;
+    originImageHeight = null;
+
     _isImageVertical = (): boolean => this.getProp("rotation") % 180 !== 0;
 
     _getImageBounds = (): DOMRect => {
@@ -77,26 +73,22 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
     }
 
     handleWindowResize = (): void => {
-        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();
-            } 
+        if (this.originImageWidth && this.originImageHeight) {
+            this.handleResizeImage();
         }
     };
 
     handleLoad = (e: any): void => {
         if (e.target) {
-            const { width: w, height: h } = e.target as any;
-            this._adapter.setOriginImageSize({ originImageWidth: w, originImageHeight: h });
+            const { naturalWidth: w, naturalHeight: h } = e.target as any;
+            this.originImageHeight = h;
+            this.originImageWidth = w;
             this.setState({
                 loading: false,
             } as any);
-            this.handleResizeImage();
+            // 图片初次加载，计算 zoom，zoom 改变不需要通过回调透出
+            // When the image is loaded for the first time, zoom is calculated, and zoom changes do not need to be exposed through callbacks.
+            this.handleResizeImage(false);
         }
         const { src, onLoad } = this.getProps();
         onLoad && onLoad(src);
@@ -110,21 +102,52 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
         onError && onError(src);
     }
 
-    handleResizeImage = () => {
+    handleResizeImage = (notify: boolean = true) => {
         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 { currZoom } = this.getStates();
+        const imgWidth = horizontal ? this.originImageWidth : this.originImageHeight;
+        const imgHeight = horizontal ? this.originImageHeight : this.originImageWidth;
+        const { onZoom, setRatio, ratio } = 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);
+            let _zoom = 1;
+            if (imgWidth > reservedWidth || imgHeight > reservedHeight) {
+                _zoom = Number(
+                    Math.min(reservedWidth / imgWidth, reservedHeight / imgHeight).toFixed(2)
+                );
+            }
+            if (currZoom === _zoom) {
+                this.calculatePreviewImage(_zoom, null);
+            } else {
+                onZoom(_zoom, notify);
+            }
+        }
+    }
+
+    handleRatioChange = () => {
+        if (this.originImageWidth && this.originImageHeight) {
+            const { currZoom } = this.getStates();
+            const { ratio, onZoom } = this.getProps();
+            let _zoom: number;
+            if (ratio === 'adaptation') {
+                const horizontal = !this._isImageVertical();
+                const imgWidth = horizontal ? this.originImageWidth : this.originImageHeight;
+                const imgHeight = horizontal ? this.originImageHeight : this.originImageWidth;
+                const { width: containerWidth, height: containerHeight } = this._getContainerBounds();
+                const reservedWidth = containerWidth - 80;
+                const reservedHeight = containerHeight - 80;
+                _zoom = Number(
+                    Math.min(reservedWidth / imgWidth, reservedHeight / imgHeight).toFixed(2)
+                );
+            } else {
+                _zoom = 1;
+            }
+            if (currZoom !== _zoom) {
+                onZoom(_zoom);
+            }
         }
     }
 
@@ -139,33 +162,6 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
         }
     };
 
-    // e: WheelEvent<HTMLImageElement>
-    handleWheel = (e: any) => {
-        this.onWheel(e);
-        handlePrevent(e);
-    }
-
-    // e: WheelEvent<HTMLImageElement>
-    onWheel = throttle((e: any): void => {
-        const { onZoom, zoomStep, maxZoom, minZoom } = this.getProps();
-        const { currZoom } = this.getStates();
-        let _zoom:number;
-        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);
-
     calcCanDragDirection = (): DragDirection => {
         const { width, height } = this.getStates();
         const { rotation } = this.getProps();
@@ -182,14 +178,13 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
         };
     };
 
-    handleZoomChange = (newZoom: number, e: any): void => {
+    calculatePreviewImage = (newZoom: number, e: any): void => {
         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);
+        const newWidth = Math.floor(this.originImageWidth * newZoom);
+        const newHeight = Math.floor(this.originImageHeight * newZoom);
 
         // debugger;
         let _offset;
@@ -243,15 +238,15 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
 
     handleMoveImage = (e: any): void => {
         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)) {
+        // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
+        const mouseLeftPress = e.buttons === 1;
+        if (mouseLeftPress && (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;
+            let newX = canDragHorizontal ? clientX - containerLeft - this.startMouseOffset.x : offset.x;
+            let newY = canDragVertical ? clientY - containerTop - this.startMouseOffset.y : offset.y;
             if (canDragHorizontal) {
                 newX = newX > 0 ? 0 : newX < extremeLeft ? extremeLeft : newX;
             }
@@ -271,11 +266,7 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
     };
 
     handleImageMouseDown = (e: any): void => {
-        this._adapter.setStartMouseOffset(this._getOffset(e));
-        this._adapter.setStartMouseMove(true);
+        this.startMouseOffset = this._getOffset(e);
     };
 
-    handleImageMouseUp = (): void => {
-        this._adapter.setStartMouseMove(false);
-    };
 }