@douyinfe/semi-ui 2.48.0 → 2.49.0

package/lib/cjs/banner/index.d.ts

@@ -26,8 +26,8 @@ export default class Banner extends BaseComponent<BannerProps, BannerState> {
         type: PropTypes.Requireable<string>;
         title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         description: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        icon: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        closeIcon: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        closeIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;

package/lib/cjs/banner/index.js

@@ -167,8 +167,8 @@ Banner.propTypes = {
   type: _propTypes.default.oneOf(types),
   title: _propTypes.default.node,
   description: _propTypes.default.node,
-  icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
-  closeIcon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  icon: _propTypes.default.node,
+  closeIcon: _propTypes.default.node,
   children: _propTypes.default.node,
   style: _propTypes.default.object,
   className: _propTypes.default.string,

package/lib/cjs/breadcrumb/item.d.ts

@@ -29,7 +29,7 @@ export default class BreadcrumbItem extends BaseComponent<BreadcrumbItemProps, B
         children: propTypes.Requireable<propTypes.ReactNodeLike>;
         active: propTypes.Requireable<boolean>;
         shouldRenderSeparator: propTypes.Requireable<boolean>;
-        icon: propTypes.Requireable<NonNullable<propTypes.ReactNodeLike>>;
+        icon: propTypes.Requireable<propTypes.ReactNodeLike>;
         separator: propTypes.Requireable<propTypes.ReactNodeLike>;
         noLink: propTypes.Requireable<boolean>;
     };

package/lib/cjs/breadcrumb/item.js

@@ -188,7 +188,7 @@ BreadcrumbItem.propTypes = {
   children: _propTypes.default.node,
   active: _propTypes.default.bool,
   shouldRenderSeparator: _propTypes.default.bool,
-  icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  icon: _propTypes.default.node,
   separator: _propTypes.default.node,
   noLink: _propTypes.default.bool
 };

package/lib/cjs/calendar/dayCalendar.d.ts

@@ -20,6 +20,7 @@ export default class DayCalendar extends BaseComponent<DayCalendarProps, DayCale
         mode: PropTypes.Requireable<string>;
         renderTimeDisplay: PropTypes.Requireable<(...args: any[]) => any>;
         markWeekend: PropTypes.Requireable<boolean>;
+        minEventHeight: PropTypes.Requireable<number>;
         scrollTop: PropTypes.Requireable<number>;
         width: PropTypes.Requireable<NonNullable<string | number>>;
         height: PropTypes.Requireable<NonNullable<string | number>>;

package/lib/cjs/calendar/dayCalendar.js

@@ -125,7 +125,8 @@ class DayCalendar extends _baseComponent.default {
       height,
       width,
       style,
-      header
+      header,
+      minEventHeight
     } = this.props;
     const dayCls = (0, _classnames.default)(prefixCls, className);
     const dayStyle = Object.assign({
@@ -158,6 +159,7 @@ class DayCalendar extends _baseComponent.default {
       handleClick: this.handleClick,
       showCurrTime: showCurrTime,
       isWeekend: this.isWeekend,
+      minEventHeight: minEventHeight,
       dateGridRender: dateGridRender
     }))));
   }
@@ -172,6 +174,7 @@ DayCalendar.propTypes = {
   mode: _propTypes.default.string,
   renderTimeDisplay: _propTypes.default.func,
   markWeekend: _propTypes.default.bool,
+  minEventHeight: _propTypes.default.number,
   scrollTop: _propTypes.default.number,
   width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   height: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),

package/lib/cjs/calendar/dayCol.d.ts

@@ -17,6 +17,7 @@ export default class DayCol extends BaseComponent<DayColProps, DayColState> {
         currPos: PropTypes.Requireable<number>;
         handleClick: PropTypes.Requireable<(...args: any[]) => any>;
         mode: PropTypes.Requireable<string>;
+        minEventHeight: PropTypes.Requireable<number>;
         isWeekend: PropTypes.Requireable<boolean>;
         dateGridRender: PropTypes.Requireable<(...args: any[]) => any>;
     };
@@ -26,6 +27,7 @@ export default class DayCol extends BaseComponent<DayColProps, DayColState> {
         scrollHeight: number;
         currPos: number;
         mode: string;
+        minEventHeight: number;
     };
     static contextType: React.Context<import("../locale/interface").Locale>;
     foundation: CalendarFoundation;

package/lib/cjs/calendar/dayCol.js

@@ -25,7 +25,8 @@ class DayCol extends _baseComponent.default {
     this.renderEvents = () => {
       const {
         events,
-        scrollHeight
+        scrollHeight,
+        minEventHeight
       } = this.props;
       const list = events.map((event, ind) => {
         const {
@@ -36,12 +37,9 @@ class DayCol extends _baseComponent.default {
         } = event;
         const top = startPos * scrollHeight;
         const height = (endPos - startPos) * scrollHeight;
-        if (!height) {
-          return undefined;
-        }
         const style = {
           top: `${top}px`,
-          height: `${height}px`
+          height: `${Math.max(minEventHeight, height)}px`
         };
         return /*#__PURE__*/_react.default.createElement("li", {
           className: `${_constants.cssClasses.PREFIX}-event-item ${_constants.cssClasses.PREFIX}-event-day`,
@@ -156,6 +154,7 @@ DayCol.propTypes = {
   currPos: _propTypes.default.number,
   handleClick: _propTypes.default.func,
   mode: _propTypes.default.string,
+  minEventHeight: _propTypes.default.number,
   isWeekend: _propTypes.default.bool,
   dateGridRender: _propTypes.default.func
 };
@@ -164,6 +163,7 @@ DayCol.defaultProps = {
   showCurrTime: true,
   scrollHeight: 0,
   currPos: 0,
-  mode: 'dayCol'
+  mode: 'dayCol',
+  minEventHeight: Number.MIN_SAFE_INTEGER
 };
 DayCol.contextType = _context.default;

package/lib/cjs/calendar/index.d.ts

@@ -24,6 +24,7 @@ declare class Calendar extends BaseComponent<CalendarProps, {}> {
         renderTimeDisplay: PropTypes.Requireable<(...args: any[]) => any>;
         renderDateDisplay: PropTypes.Requireable<(...args: any[]) => any>;
         markWeekend: PropTypes.Requireable<boolean>;
+        minEventHeight: PropTypes.Requireable<number>;
         width: PropTypes.Requireable<NonNullable<string | number>>;
         height: PropTypes.Requireable<NonNullable<string | number>>;
         style: PropTypes.Requireable<object>;

package/lib/cjs/calendar/index.js

@@ -69,6 +69,7 @@ Calendar.propTypes = {
   renderTimeDisplay: _propTypes.default.func,
   renderDateDisplay: _propTypes.default.func,
   markWeekend: _propTypes.default.bool,
+  minEventHeight: _propTypes.default.number,
   width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   height: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   style: _propTypes.default.object,

package/lib/cjs/calendar/interface.d.ts

@@ -16,6 +16,7 @@ export interface CalendarProps extends BaseProps {
     onClose?: (e: React.MouseEvent) => void;
     renderTimeDisplay?: (time: number) => React.ReactNode;
     markWeekend?: boolean;
+    minEventHeight?: number;
     width?: number | string;
     height?: number | string;
     renderDateDisplay?: (date: Date) => React.ReactNode;
@@ -23,7 +24,7 @@ export interface CalendarProps extends BaseProps {
     allDayEventsRender?: (events: EventObject[]) => React.ReactNode;
 }
 export type DayCalendarProps = Omit<CalendarProps, 'mode'>;
-type DayCalendarPropsKeys = 'events' | 'displayValue' | 'showCurrTime' | 'mode' | 'dateGridRender';
+type DayCalendarPropsKeys = 'events' | 'displayValue' | 'showCurrTime' | 'mode' | 'dateGridRender' | 'minEventHeight';
 export interface DayColProps extends Pick<CalendarProps, DayCalendarPropsKeys>, BaseProps {
     scrollHeight: number;
     currPos: number;

package/lib/cjs/calendar/rangeCalendar.js

@@ -46,7 +46,8 @@ class RangeCalendar extends _baseComponent.default {
       } = this.RangeData;
       const {
         markWeekend,
-        dateGridRender
+        dateGridRender,
+        minEventHeight
       } = this.props;
       const inner = week.map(day => {
         const dateString = day.date.toString();
@@ -60,7 +61,8 @@ class RangeCalendar extends _baseComponent.default {
           events: parsed.day,
           showCurrTime: this.props.showCurrTime,
           isWeekend: markWeekend && day.isWeekend,
-          dateGridRender: dateGridRender
+          dateGridRender: dateGridRender,
+          minEventHeight: minEventHeight
         });
       });
       return inner;

package/lib/cjs/calendar/weekCalendar.js

@@ -47,7 +47,8 @@ class WeekCalendar extends _baseComponent.default {
       } = this.weeklyData;
       const {
         markWeekend,
-        dateGridRender
+        dateGridRender,
+        minEventHeight
       } = this.props;
       const inner = week.map(day => {
         const dateString = day.date.toString();
@@ -61,7 +62,8 @@ class WeekCalendar extends _baseComponent.default {
           events: parsed.day,
           showCurrTime: this.props.showCurrTime,
           isWeekend: markWeekend && day.isWeekend,
-          dateGridRender: dateGridRender
+          dateGridRender: dateGridRender,
+          minEventHeight: minEventHeight
         });
       });
       return inner;

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

@@ -53,6 +53,8 @@ export interface PreviewProps extends BaseProps {
     zIndex?: number;
     children?: ReactNode;
     crossOrigin?: "anonymous" | "use-credentials";
+    maxZoom?: number;
+    minZoom?: number;
     renderHeader?: (info: any) => ReactNode;
     renderPreviewMenu?: (props: MenuProps) => ReactNode;
     getPopupContainer?: () => HTMLElement;
@@ -138,14 +140,12 @@ export interface FooterProps extends SliderProps {
     onRotate?: (direction: string) => void;
     onDownload?: () => void;
     renderPreviewMenu?: (props: MenuProps) => ReactNode;
+    forwardRef?: React.RefObject<HTMLElement>;
 }
 export interface PreviewImageProps {
     src?: string;
     rotation?: number;
     style?: React.CSSProperties;
-    maxZoom?: number;
-    minZoom?: number;
-    zoomStep?: number;
     zoom?: number;
     ratio?: RatioType;
     disableDownload?: boolean;

package/lib/cjs/image/previewFooter.js

@@ -19,14 +19,9 @@ var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer")
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const prefixCls = _constants.cssClasses.PREFIX;
 const footerPrefixCls = `${_constants.cssClasses.PREFIX}-preview-footer`;
-let mouseActiveTime = 0;
 class Footer extends _baseComponent.default {
   get adapter() {
-    return Object.assign(Object.assign({}, super.adapter), {
-      setStartMouseOffset: time => {
-        mouseActiveTime = time;
-      }
-    });
+    return Object.assign({}, super.adapter);
   }
   constructor(props) {
     super(props);
@@ -266,13 +261,15 @@ class Footer extends _baseComponent.default {
   render() {
     const {
       className,
-      renderPreviewMenu
+      renderPreviewMenu,
+      forwardRef
     } = this.props;
     const menuCls = (0, _classnames.default)(footerPrefixCls, `${footerPrefixCls}-wrapper`, className, {
       [`${footerPrefixCls}-content`]: !Boolean(renderPreviewMenu)
     });
     return /*#__PURE__*/_react.default.createElement("section", {
-      className: menuCls
+      className: menuCls,
+      ref: forwardRef
     }, renderPreviewMenu ? this.customRenderViewMenu() : this.getFooterMenu());
   }
 }

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { HeaderProps } from "./interface";
-declare const Header: React.FC<HeaderProps>;
+declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;
 export default Header;

package/lib/cjs/image/previewHeader.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _semiIcons = require("@douyinfe/semi-icons");
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/image/constants");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -13,14 +13,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const prefixCls = `${_constants.cssClasses.PREFIX}-preview-header`;
-const Header = _ref => {
+const Header = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     onClose,
     titleStyle,
     className,
     renderHeader
   } = _ref;
-  return /*#__PURE__*/React.createElement(_previewContext.PreviewContext.Consumer, null, _ref2 => {
+  return /*#__PURE__*/_react.default.createElement(_previewContext.PreviewContext.Consumer, null, _ref2 => {
     let {
       currentIndex,
       titles
@@ -29,16 +29,17 @@ const Header = _ref => {
     if (titles && typeof currentIndex === "number") {
       title = titles[currentIndex];
     }
-    return /*#__PURE__*/React.createElement("section", {
+    return /*#__PURE__*/_react.default.createElement("section", {
+      ref: ref,
       className: (0, _classnames.default)(prefixCls, className)
-    }, /*#__PURE__*/React.createElement("section", {
+    }, /*#__PURE__*/_react.default.createElement("section", {
       className: `${prefixCls}-title`,
       style: titleStyle
-    }, renderHeader ? renderHeader(title) : title), /*#__PURE__*/React.createElement("section", {
+    }, renderHeader ? renderHeader(title) : title), /*#__PURE__*/_react.default.createElement("section", {
       className: `${prefixCls}-close`,
       onMouseUp: onClose
-    }, /*#__PURE__*/React.createElement(_semiIcons.IconClose, null)));
+    }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, null)));
   });
-};
+});
 var _default = Header;
 exports.default = _default;

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

@@ -8,9 +8,6 @@ export default class PreviewImage extends BaseComponent<PreviewImageProps, Previ
         src: PropTypes.Requireable<string>;
         rotation: PropTypes.Requireable<number>;
         style: PropTypes.Requireable<object>;
-        maxZoom: PropTypes.Requireable<number>;
-        minZoom: PropTypes.Requireable<number>;
-        zoomStep: PropTypes.Requireable<number>;
         zoom: PropTypes.Requireable<number>;
         ratio: PropTypes.Requireable<string>;
         disableDownload: PropTypes.Requireable<boolean>;
@@ -21,29 +18,21 @@ export default class PreviewImage extends BaseComponent<PreviewImageProps, Previ
         onError: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
-        maxZoom: number;
-        minZoom: number;
-        zoomStep: number;
         zoom: any;
     };
     get adapter(): PreviewImageAdapter<PreviewImageProps, PreviewImageStates>;
     containerRef: React.RefObject<HTMLDivElement>;
-    imageRef: HTMLImageElement | null;
+    imageRef: React.RefObject<HTMLImageElement>;
     foundation: PreviewImageFoundation;
     constructor(props: any);
     componentDidMount(): void;
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: PreviewImageProps, prevStates: PreviewImageStates): void;
     onWindowResize: () => void;
-    handleZoomChange: (newZoom: any, e: any) => void;
     handleRightClickImage: (e: any) => void;
-    handleWheel: (e: any) => void;
     handleLoad: (e: any) => void;
     handleError: (e: any) => void;
-    resizeImage: () => void;
     handleMoveImage: (e: any) => void;
-    registryImageRef: (ref: any) => void;
     onImageMouseDown: (e: React.MouseEvent<HTMLImageElement>) => void;
-    onImageMouseUp: () => void;
     render(): JSX.Element;
 }

package/lib/cjs/image/previewImage.js

@@ -13,38 +13,14 @@ var _previewImageFoundation = _interopRequireDefault(require("@douyinfe/semi-fou
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const prefixCls = _constants.cssClasses.PREFIX;
 const preViewImgPrefixCls = `${prefixCls}-preview-image`;
-let originImageWidth = null;
-let originImageHeight = null;
-let startMouseMove = false;
-// startMouseOffset：The offset of the mouse relative to the left and top of the picture
-let startMouseOffset = {
-  x: 0,
-  y: 0
-};
 class PreviewImage extends _baseComponent.default {
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
-      getOriginImageSize: () => ({
-        originImageWidth,
-        originImageHeight
-      }),
-      setOriginImageSize: size => {
-        originImageWidth = size.originImageWidth;
-        originImageHeight = size.originImageHeight;
-      },
       getContainer: () => {
         return this.containerRef.current;
       },
       getImage: () => {
-        return this.imageRef;
-      },
-      getMouseMove: () => startMouseMove,
-      setStartMouseMove: move => {
-        startMouseMove = move;
-      },
-      getMouseOffset: () => startMouseOffset,
-      setStartMouseOffset: offset => {
-        startMouseOffset = offset;
+        return this.imageRef.current;
       },
       setLoading: loading => {
         this.setState({
@@ -52,7 +28,7 @@ class PreviewImage extends _baseComponent.default {
         });
       },
       setImageCursor: canDrag => {
-        this.imageRef.style.cursor = canDrag ? "grab" : "default";
+        this.imageRef.current.style.cursor = canDrag ? "grab" : "default";
       }
     });
   }
@@ -61,52 +37,22 @@ class PreviewImage extends _baseComponent.default {
     this.onWindowResize = () => {
       this.foundation.handleWindowResize();
     };
-    this.handleZoomChange = (newZoom, e) => {
-      this.foundation.handleZoomChange(newZoom, e);
-    };
     // Determine the response method of right click according to the disableDownload parameter in props
     this.handleRightClickImage = e => {
       this.foundation.handleRightClickImage(e);
     };
-    this.handleWheel = e => {
-      this.foundation.handleWheel(e);
-    };
     this.handleLoad = e => {
       this.foundation.handleLoad(e);
     };
     this.handleError = e => {
       this.foundation.handleError(e);
     };
-    this.resizeImage = () => {
-      this.foundation.handleResizeImage();
-    };
     this.handleMoveImage = e => {
       this.foundation.handleMoveImage(e);
     };
-    // 为什么通过ref注册wheel而不是使用onWheel事件？
-    // 因为对于wheel事件，浏览器将 addEventListener 的 passive 默认值更改为 true。如此，事件监听器便不能取消事件，也不会在用户滚动页面时阻止页面呈现。
-    // 这里我们需要保持页面不动，仅放大图片，因此此处需要将 passive 更改设置为 false。
-    // Why register wheel via ref instead of using onWheel event?
-    // Because for wheel events, the browser changes the passive default of addEventListener to true. This way, the event listener cannot cancel the event, nor prevent the page from rendering when the user scrolls.
-    // Here we need to keep the page still and only zoom in on the image, so here we need to set the passive change to false.
-    // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners。
-    this.registryImageRef = ref => {
-      if (this.imageRef) {
-        this.imageRef.removeEventListener("wheel", this.handleWheel);
-      }
-      if (ref) {
-        ref.addEventListener("wheel", this.handleWheel, {
-          passive: false
-        });
-      }
-      this.imageRef = ref;
-    };
     this.onImageMouseDown = e => {
       this.foundation.handleImageMouseDown(e);
     };
-    this.onImageMouseUp = () => {
-      this.foundation.handleImageMouseUp();
-    };
     this.state = {
       width: 0,
       height: 0,
@@ -120,7 +66,7 @@ class PreviewImage extends _baseComponent.default {
       left: 0
     };
     this.containerRef = /*#__PURE__*/_react.default.createRef();
-    this.imageRef = null;
+    this.imageRef = /*#__PURE__*/_react.default.createRef();
     this.foundation = new _previewImageFoundation.default(this.adapter);
   }
   componentDidMount() {
@@ -131,27 +77,22 @@ class PreviewImage extends _baseComponent.default {
   }
   componentDidUpdate(prevProps, prevStates) {
     // If src changes, start a new loading
-    if (this.props.src && this.props.src !== prevProps.src) {
+    const zoomChange = "zoom" in this.props && this.props.zoom !== this.state.currZoom;
+    const srcChange = this.props.src && this.props.src !== prevProps.src;
+    if (srcChange) {
       this.foundation.setLoading(true);
     }
     // If the incoming zoom changes, other content changes are determined based on the new zoom value
-    if ("zoom" in this.props && this.props.zoom !== prevStates.currZoom) {
-      this.handleZoomChange(this.props.zoom, null);
+    if (zoomChange) {
+      this.foundation.calculatePreviewImage(this.props.zoom, null);
     }
-    // When the incoming ratio is changed, if it"s adaptation, then resizeImage is triggered to make the image adapt to the page
-    // else if it"s adaptation is realSize, then onZoom(1) is called to make the image size the original size;
-    if ("ratio" in this.props && this.props.ratio !== prevProps.ratio) {
-      if (originImageWidth && originImageHeight) {
-        if (this.props.ratio === "adaptation") {
-          this.resizeImage();
-        } else {
-          this.props.onZoom(1);
-        }
+    if (!zoomChange && !srcChange && prevProps) {
+      if ("ratio" in this.props && this.props.ratio !== prevProps.ratio) {
+        this.foundation.handleRatioChange();
+      }
+      if ("rotation" in this.props && this.props.rotation !== prevProps.rotation) {
+        this.onWindowResize();
       }
-    }
-    // When the incoming rotation angle of the image changes, it needs to be resized to make the image fit on the page
-    if ("rotation" in this.props && this.props.rotation !== prevProps.rotation) {
-      this.onWindowResize();
     }
   }
   render() {
@@ -173,21 +114,20 @@ class PreviewImage extends _baseComponent.default {
       transform: `rotate(${-rotation}deg)`,
       top,
       left,
-      width: loading ? "auto" : `${width}px`,
-      height: loading ? "auto" : `${height}px`
+      width,
+      height
     };
     return /*#__PURE__*/_react.default.createElement("div", {
       className: `${preViewImgPrefixCls}`,
       ref: this.containerRef
     }, /*#__PURE__*/_react.default.createElement("img", {
-      ref: this.registryImageRef,
+      ref: this.imageRef,
       src: src,
       alt: "previewImag",
       className: `${preViewImgPrefixCls}-img`,
       key: src,
       onMouseMove: this.handleMoveImage,
       onMouseDown: this.onImageMouseDown,
-      onMouseUp: this.onImageMouseUp,
       onContextMenu: this.handleRightClickImage,
       onDragStart: e => e.preventDefault(),
       onLoad: this.handleLoad,
@@ -205,9 +145,9 @@ PreviewImage.propTypes = {
   src: _propTypes.default.string,
   rotation: _propTypes.default.number,
   style: _propTypes.default.object,
-  maxZoom: _propTypes.default.number,
-  minZoom: _propTypes.default.number,
-  zoomStep: _propTypes.default.number,
+  // maxZoom: PropTypes.number,
+  // minZoom: PropTypes.number,
+  // zoomStep: PropTypes.number,
   zoom: _propTypes.default.number,
   ratio: _propTypes.default.string,
   disableDownload: _propTypes.default.bool,
@@ -218,8 +158,8 @@ PreviewImage.propTypes = {
   onError: _propTypes.default.func
 };
 PreviewImage.defaultProps = {
-  maxZoom: 5,
-  minZoom: 0.1,
-  zoomStep: 0.1,
+  // maxZoom: 5,
+  // minZoom: 0.1,
+  // zoomStep: 0.1,
   zoom: undefined
 };

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

@@ -33,6 +33,8 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
         disableDownload: PropTypes.Requireable<boolean>;
         viewerVisibleDelay: PropTypes.Requireable<number>;
         zIndex: PropTypes.Requireable<number>;
+        maxZoom: PropTypes.Requireable<number>;
+        minZoom: PropTypes.Requireable<number>;
         renderHeader: PropTypes.Requireable<(...args: any[]) => any>;
         renderPreviewMenu: PropTypes.Requireable<(...args: any[]) => any>;
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
@@ -58,14 +60,20 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
         zIndex: number;
         maskClosable: boolean;
         viewerVisibleDelay: number;
+        maxZoom: number;
+        minZoom: number;
     };
     private bodyOverflow;
     private scrollBarWidth;
     private originBodyWidth;
     get adapter(): PreviewInnerAdapter<PreviewInnerProps, PreviewInnerStates>;
-    timer: any;
     context: PreviewContextProps;
     foundation: PreviewInnerFoundation;
+    imageWrapRef: React.RefObject<HTMLDivElement>;
+    headerRef: React.RefObject<HTMLElement>;
+    footerRef: React.RefObject<HTMLElement>;
+    leftIconRef: React.RefObject<HTMLDivElement>;
+    rightIconRef: React.RefObject<HTMLDivElement>;
     constructor(props: PreviewInnerProps);
     static getDerivedStateFromProps(props: PreviewInnerProps, state: PreviewInnerStates): Partial<PreviewInnerStates>;
     componentDidMount(): void;
@@ -81,10 +89,11 @@ export default class PreviewInner extends BaseComponent<PreviewInnerProps, Previ
     handleZoomImage: (newZoom: number) => void;
     handleMouseUp: (e: any) => void;
     handleMouseMove: (e: any) => void;
-    handleMouseEvent: (e: any, event: string) => void;
     handleKeyDown: (e: KeyboardEvent) => void;
     onImageError: () => void;
     onImageLoad: (src: any) => void;
     handleMouseDown: (e: any) => void;
+    handleWheel: (e: any) => void;
+    registryImageWrapRef: (ref: any) => void;
     render(): JSX.Element;
 }