fix: call onModeChange and onCoverChange when destroy button clicked …

…if drag disabled
lijinke666 · Aug 27, 2020 · c608cea · c608cea
1 parent ca5c5ff
commit c608cea
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/__tests__/tests/player.test.js b/__tests__/tests/player.test.js
@@ -1307,12 +1307,34 @@ describe('<ReactJkMusicPlayer/>', () => {
     expect(
       wrapper.find('.react-jinke-music-player').hasClass('react-draggable'),
     ).toBeFalsy()
-    wrapper.find('.react-jinke-music-player').simulate('click')
+    wrapper.find('.music-player-controller').simulate('click')
     expect(onModeChange).toHaveBeenCalledTimes(1)
     expect(onCoverClick).toHaveBeenCalledTimes(1)
     expect(wrapper.find('.music-player-panel')).toHaveLength(1)
     expect(wrapper.state().toggle).toBeTruthy()
     wrapper.find('.hide-panel').simulate('click')
     expect(wrapper.state().toggle).toBeFalsy()
   })
+
+  it('should cannot toggle mode if drag disabled and destroy button clicked', () => {
+    const onModeChange = jest.fn()
+    const onCoverClick = jest.fn()
+    const onDestroyed = jest.fn()
+    const wrapper = mount(
+      <ReactJkMusicPlayer
+        mode="mini"
+        drag={false}
+        showDestroy
+        onModeChange={onModeChange}
+        onCoverClick={onCoverClick}
+        onDestroyed={onDestroyed}
+      />,
+    )
+    wrapper.find('.destroy-btn').simulate('click')
+    expect(onModeChange).not.toHaveBeenCalled()
+    expect(onCoverClick).not.toHaveBeenCalled()
+    expect(onDestroyed).toHaveBeenCalledTimes(1)
+    expect(wrapper.find('.music-player-panel')).toHaveLength(0)
+    expect(wrapper.state().toggle).toBeFalsy()
+  })
 })
diff --git a/example/example.js b/example/example.js
@@ -320,9 +320,9 @@ const options = {
   },
 
   onBeforeDestroy(currentPlayId, audioLists, audioInfo) {
-    console.log('currentPlayId: ', currentPlayId)
-    console.log('audioLists: ', audioLists)
-    console.log('audioInfo: ', audioInfo)
+    console.log('onBeforeDestroy currentPlayId: ', currentPlayId)
+    console.log('onBeforeDestroy audioLists: ', audioLists)
+    console.log('onBeforeDestroy audioInfo: ', audioInfo)
     return new Promise((resolve, reject) => {
       // your custom validate
       // eslint-disable-next-line no-alert

diff --git a/src/index.js b/src/index.js
@@ -403,7 +403,6 @@ export default class ReactJkMusicPlayer extends PureComponent {
         className={cls('react-jinke-music-player')}
         style={defaultPosition}
         tabIndex="-1"
-        onClick={!drag ? this.onOpenPanel : undefined}
       >
         <div className={cls('music-player')}>
           {showMiniProcessBar && (
@@ -418,6 +417,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
               'music-player-playing': this.state.playing,
             })}
             {...miniModeCoverConfig}
+            onClick={!drag ? this.onOpenPanel : undefined}
           >
             {loading ? (
               this.iconMap.loading
@@ -1652,7 +1652,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
       if ('removeEventListener' in media) {
         media.removeEventListener('change', handler)
       } else {
-        media.removeListener(handler)
+        media.removeListener && media.removeListener(handler)
       }
     }
   }