fix: 🐛 fix mousewheel passive && scale step

Author: zWingz

.babelrc.js

@@ -2,4 +2,4 @@ import * as React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'
 
-ReactDOM.render(<App></App>, document.getElementById('app'))
+ReactDOM.render(<App />, document.getElementById('app'))

develop/index.html

@@ -1,7 +1,6 @@
 body {
   padding: 20px;
   margin: 0px;
-  background: red;
 }
 
 .container {

develop/index.tsx

@@ -8,7 +8,12 @@ export default {
   typescript: true,
   protocol: process.env.NODE_ENV === 'production' ? 'https' : 'http',
   themeConfig: {
-    mode: 'light'
+    mode: 'light',
+    styles: {
+      sidebar: `
+        z-index: 998;
+      `
+    }
   },
   codeSandbox: false,
   hashRouter: true,

develop/style.scss

@@ -30,7 +30,7 @@ export interface PreviewInstanceInterface {
   preview: PreviewInterface
   show: () => void
   hide: () => void
-  component: ImgPpreview
+  component: ImgPreview
   destroy: () => void
 }
 export interface PreviewInstanceCallback {
@@ -41,7 +41,7 @@ function find<T>(list: T[], arg: T): number {
   return list.findIndex(each => each === arg)
 }
 let observer: IntersectionObserver = null
-export default class ImgPpreview extends PureComponent<{}, PreviewState> {
+export default class ImgPreview extends PureComponent<{}, PreviewState> {
   static newInstance: (callback: PreviewInstanceCallback) => void
   $el: HTMLElement = null
   $close: HTMLElement = null
@@ -106,7 +106,7 @@ export default class ImgPpreview extends PureComponent<{}, PreviewState> {
    * window的按钮监听
    * 监听Esc按钮, 触发隐藏
    * @event
-   * @memberof ImgPpreview
+   * @memberof ImgPreview
    */
   windowKeyUpHandle = (e: KeyboardEvent) => {
     // e.stopPropagation()
@@ -125,7 +125,7 @@ export default class ImgPpreview extends PureComponent<{}, PreviewState> {
    * 隐藏图片浏览器
    * 只有在点击关闭按钮或者浏览器外的地方才触发
    * @event
-   * @memberof ImgPpreview
+   * @memberof ImgPreview
    */
   hideHandle = (e: React.MouseEvent) => {
     const { target } = e
@@ -200,7 +200,7 @@ export default class ImgPpreview extends PureComponent<{}, PreviewState> {
   /**
    * 初始化图片的position以及transform属性
    *
-   * @memberof ImgPpreview
+   * @memberof ImgPreview
    */
   initImage() {
     this.setState(
@@ -282,17 +282,15 @@ export default class ImgPpreview extends PureComponent<{}, PreviewState> {
    * @event
    */
   mouseWheelHandle = (e: React.WheelEvent<HTMLDivElement>) => {
-    e.preventDefault()
-    e.stopPropagation()
     // 放大缩小功能
     // const delta = e.wheelDelta ? e.wheelDelta : -(e.detail || 0)
     let { scale } = this.state
     if (-e.deltaY < 0) {
       // 放大
-      scale *= 1.2
+      scale *= 1.1
     } else {
       // 缩小
-      scale *= 0.8
+      scale *= 0.9
     }
     this.setState({
       scale
@@ -303,7 +301,7 @@ export default class ImgPpreview extends PureComponent<{}, PreviewState> {
    * 监听图片的onLoad事件
    * 设置初始的宽高
    *
-   * @memberof ImgPpreview
+   * @memberof ImgPreview
    */
   imgOnLoad = e => {
     const img = e.target as HTMLImageElement
@@ -344,7 +342,7 @@ export default class ImgPpreview extends PureComponent<{}, PreviewState> {
    * 设置宽高和左边
    *
    * @readonly
-   * @memberof ImgPpreview
+   * @memberof ImgPreview
    */
   get imgSty(): CSSProperties {
     const { rotate, top, left } = this.state
@@ -533,9 +531,9 @@ export default class ImgPpreview extends PureComponent<{}, PreviewState> {
   }
 }
 
-ImgPpreview.newInstance = function newPreviewInstance(callback) {
+ImgPreview.newInstance = function newPreviewInstance(callback) {
   const div = document.createElement('div')
-  function ref(ins: ImgPpreview) {
+  function ref(ins: ImgPreview) {
     callback({
       preview(current, list) {
         ins.exportPreview(current, list)
@@ -554,5 +552,5 @@ ImgPpreview.newInstance = function newPreviewInstance(callback) {
     })
   }
   document.body.appendChild(div)
-  ReactDOM.render(<ImgPpreview ref={ref} />, div)
+  ReactDOM.render(<ImgPreview ref={ref} />, div)
 }

doczrc.js

@@ -141,31 +141,23 @@ describe('test img transform', () => {
   wrapper.update()
   describe('test scale', () => {
     let expectScale = 0.75
-    const preventDefault = jest.fn()
-    const stopPropagation = jest.fn()
     it('test scale down', () => {
       // setTimeout(() => {
       expect(ins.state.scale).toEqual(expectScale)
       container.simulate('wheel', {
-        deltaY: -10,
-        preventDefault,
-        stopPropagation
+        deltaY: -10
       })
-      expect(preventDefault).toBeCalledTimes(1)
-      expect(stopPropagation).toBeCalledTimes(1)
-      expectScale *= 0.8
+      expectScale *= 0.9
       expect(ins.state.scale).toEqual(expectScale)
       // done()
       // }, 50)
     })
     it('test scale up', () => {
       // setTimeout(() => {
       container.simulate('wheel', {
-        deltaY: 10,
-        preventDefault,
-        stopPropagation
+        deltaY: 10
       })
-      expectScale *= 1.2
+      expectScale *= 1.1
       expect(ins.state.scale).toEqual(expectScale)
       // done()
       // }, 50)
@@ -258,15 +250,15 @@ describe('test change index', () => {
     const event = new KeyboardEvent('keyup', {
       keyCode: 39
     } as KeyboardEventInit)
-    window.dispatchEvent(event)
+    window.document.dispatchEvent(event)
     expect(ins.state.current).toEqual(1)
     expect(wrapper.find(imgCurrent).prop('src')).toEqual(src[1])
   })
   it('test keyup code 37 is prev', () => {
     const event = new KeyboardEvent('keyup', {
       keyCode: 37
     } as KeyboardEventInit)
-    window.dispatchEvent(event)
+    window.document.dispatchEvent(event)
     expect(ins.state.current).toEqual(0)
     expect(wrapper.find(imgCurrent).prop('src')).toEqual(src[0])
   })
@@ -322,14 +314,11 @@ describe('test show/hide', () => {
     const event = new KeyboardEvent('keyup', {
       keyCode: 27
     } as KeyboardEventInit)
-    window.dispatchEvent(event)
+    window.document.dispatchEvent(event)
     expect(hide).toBeCalledTimes(1)
     const bodyHideHandle = jest.spyOn(ins, 'hideHandle')
     ins.show()
-    const bodyClickEvent = new MouseEvent('click', {
-      bubbles: true
-    })
-    document.body.dispatchEvent(bodyClickEvent)
+    wrapper.simulate('click')
     expect(bodyHideHandle).toBeCalledTimes(1)
   })
 })

src/lib/ImgPreview/ImgPreview.tsx

@@ -14,10 +14,6 @@ function getInstance(callback: PreviewInstanceCallback) {
     return
   }
   Preview.newInstance((instance: PreviewInstanceInterface) => {
-    if(ins) {
-      callback(ins)
-      return
-    }
     ins = instance
     callback(instance)
   })
@@ -37,7 +33,7 @@ function exec(fun: string) {
   }
 }
 
-export const Api: {destroy: () => void, preview: PreviewInterface, show: () => void, hide: () => void} = {
+const Api: {destroy: () => void, preview: PreviewInterface, show: () => void, hide: () => void} = {
   preview: null,
   show: null,
   hide: null,

src/lib/ImgPreview/__test__/ImgPreview.test.tsx

@@ -37,7 +37,7 @@
 }
 .img-viewer-current {
   position: relative;
-  transition: transform .3s ease-in-out;
+  // transition: transform .1s linear;
   animation: preview-ani 0.3s ease-in-out;
 }
 @keyframes preview-ani {