fix: review

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-photo-view",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "description": "一款精致的 React 的图片预览组件",
   "author": "MinJieLiu",
   "license": "MIT",

src/PhotoSlider.tsx

@@ -4,7 +4,7 @@ import debounce from 'lodash.debounce';
 import PhotoView from './PhotoView';
 import SlideWrap from './components/SlideWrap';
 import VisibleAnimationHandle from './components/VisibleAnimationHandle';
-import CloseSVG from './components/CloseSVG';
+import Close from './components/Close';
 import ArrowLeft from './components/ArrowLeft';
 import ArrowRight from './components/ArrowRight';
 import isTouchDevice from './utils/isTouchDevice';
@@ -169,7 +169,7 @@ export default class PhotoSlider extends React.Component<IPhotoSliderProps, Phot
         };
       }
       const offsetClientY = Math.abs(clientY - lastClientY);
-      const opacity = Math.max(Math.min(defaultOpacity, defaultOpacity - offsetClientY / 100 / 2), 0);
+      const opacity = Math.max(Math.min(defaultOpacity, defaultOpacity - offsetClientY / 100 / 4), 0);
       return {
         touched: true,
         lastClientY,
@@ -354,7 +354,7 @@ export default class PhotoSlider extends React.Component<IPhotoSliderProps, Phot
                       {photoIndex + 1} / {imageLength}
                     </div>
                     <div className="PhotoView-PhotoSlider__BannerRight">
-                      <CloseSVG className="PhotoView-PhotoSlider__Close" onClick={this.handleClose} />
+                      <Close className="PhotoView-PhotoSlider__Close" onClick={this.handleClose} />
                     </div>
                   </div>
                 )}

src/components/CloseSVG.tsx → src/components/Close.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-function CloseSVG(props) {
+function Close(props) {
   return (
     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 768 768" {...props}>
       <path
@@ -11,4 +11,4 @@ function CloseSVG(props) {
   );
 }
 
-export default CloseSVG;
+export default Close;

src/components/SlideWrap.tsx

@@ -4,32 +4,27 @@ import classNames from 'classnames';
 import './SlideWrap.less';
 
 const SlideWrap: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ className, children, ...restProps }) => {
-  const dialogNode = React.useMemo(() => {
-    // 容器
-    const dialogNode = document.createElement('section');
-    document.body.appendChild(dialogNode);
-    return dialogNode;
-  }, [] as readonly []);
+  const dialogNode = React.useRef<HTMLElement>(document.createElement('section'));
   const originalOverflowCallback = React.useRef('');
 
   React.useEffect(() => {
+    document.body.appendChild(dialogNode.current);
     const { style } = document.body;
     originalOverflowCallback.current = style.overflow;
     style.overflow = 'hidden';
 
     return () => {
-      const { style } = document.body;
       style.overflow = originalOverflowCallback.current;
       // 清除容器
-      document.body.removeChild(dialogNode);
+      document.body.removeChild(dialogNode.current);
     };
   }, [] as readonly []);
 
   return createPortal(
     <div className={classNames('PhotoView-SlideWrap', className)} {...restProps}>
       {children}
     </div>,
-    dialogNode,
+    dialogNode.current,
   );
 };
 

src/utils/correctSuitablePosition.ts

@@ -1,7 +1,15 @@
 /**
  * 纠正缩放后偏离中心区域位置
  */
-export default function correctSuitablePosition({ x, y, scale }: { x: number; y: number; scale: number }) {
+export default function correctSuitablePosition({
+  x,
+  y,
+  scale,
+}: {
+  x: number;
+  y: number;
+  scale: number;
+}): { x: number; y: number } {
   if (scale <= 1) {
     return {
       x: 0,