fix: thorw error when audio lists is empty #308

__tests__/setup.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 const Enzyme = require('enzyme')
 const Adapter = require('enzyme-adapter-react-16')
+const sortablejs = require('sortablejs')
 const {
   AUDIO_READY_STATE,
   AUDIO_NETWORK_STATE,
@@ -61,3 +62,12 @@ if (typeof window !== 'undefined') {
 }
 
 Enzyme.configure({ adapter: new Adapter() })
+
+jest.mock('sortablejs', () => {
+  return jest.fn().mockImplementation(() => {
+    return { destroy: jest.fn() }
+  })
+})
+
+sortablejs.Swap = jest.fn()
+sortablejs.mount = jest.fn()

__tests__/tests/sort.test.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { mount } from 'enzyme'
+import Sortable from 'sortablejs'
 import ReactJkMusicPlayer from '../../src'
 
 const createPlayer = (props) => {
@@ -52,4 +53,11 @@ describe('Audio lists Sort test', () => {
       '[Deprecated] onAudioListsDragEnd is deprecated. please use onAudioListsSortEnd(oldIndex, newIndex){}',
     )
   })
+
+  it('should render correctly when audio lists is empty', () => {
+    Sortable.mockClear()
+    const errorSpy = jest.spyOn(console, 'error')
+    createPlayer({ audioLists: [] })
+    expect(errorSpy).not.toThrowError()
+  })
 })

example/example.js

@@ -261,6 +261,9 @@ const options = {
     fadeOut: 1000,
   },
 
+  // https://github.com/SortableJS/Sortable#options
+  sortableOptions: {},
+
   // Music is downloaded handle
   onAudioDownload(audioInfo) {
     console.log('audio download', audioInfo)

package.json

@@ -127,7 +127,6 @@
     "@semantic-release/git": "^9.0.0",
     "@types/jest": "^26.0.20",
     "@types/sortablejs": "^1.10.6",
-    "all-contributors-cli": "^6.19.0",
     "autoprefixer": "^10.2.4",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
@@ -148,7 +147,7 @@
     "enzyme-adapter-react-16": "^1.15.6",
     "enzyme-to-json": "^3.6.1",
     "esbuild-webpack-plugin": "^1.1.0",
-    "eslint": "^7.19.0",
+    "eslint": "^7.20.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-babel": "^5.3.1",
@@ -158,7 +157,7 @@
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
     "file-loader": "^6.2.0",
-    "html-loader": "^1.3.2",
+    "html-loader": "^2.0.0",
     "html-webpack-plugin": "^5.1.0",
     "husky": "^5.0.9",
     "jest": "^26.6.3",
@@ -167,7 +166,7 @@
     "less": "^4.1.1",
     "less-loader": "^8.0.0",
     "lint-staged": "^10.5.4",
-    "mini-css-extract-plugin": "^1.3.6",
+    "mini-css-extract-plugin": "^1.3.7",
     "postcss": "^8.2.6",
     "postcss-loader": "^5.0.0",
     "power-assert": "^1.6.1",
@@ -179,13 +178,13 @@
     "react-hot-loader": "^4.13.0",
     "react-loader": "^2.4.7",
     "rimraf": "^3.0.2",
-    "semantic-release": "^17.3.8",
+    "semantic-release": "^17.3.9",
     "style-loader": "~2.0.0",
     "stylelint": "^13.10.0",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^20.0.0",
     "uglifyjs-webpack-plugin": "^2.2.0",
-    "webpack": "^5.21.2",
+    "webpack": "^5.22.0",
     "webpack-bundle-analyzer": "^4.4.0",
     "webpack-cli": "^4.5.0",
     "webpack-dev-server": "^3.11.2"

src/config/sortable.js

@@ -3,4 +3,5 @@ export default {
   swapClass: 'audio-lists-panel-sortable-highlight-bg',
   swap: true,
   animation: 100,
+  easing: 'cubic-bezier(0.43, -0.1, 0.16, 1.1)',
 }

src/index.js

@@ -71,6 +71,8 @@ import {
   uuId,
 } from './utils'
 
+Sortable.mount(new Swap())
+
 const IS_MOBILE = getIsMobile()
 
 const DEFAULT_ICON = {
@@ -2368,15 +2370,17 @@ export default class ReactJkMusicPlayer extends PureComponent {
   }
 
   initSortableAudioLists = () => {
-    if (process.env.NODE_ENV === 'test') {
+    const { audioLists, sortableOptions } = this.props
+    const { selector, ...defaultOptions } = SORTABLE_CONFIG
+    const container = document.querySelector(`.${selector}`)
+    if ((Array.isArray(audioLists) && !audioLists.length) || !container) {
       return
     }
 
-    Sortable.mount(new Swap())
-
-    const { sortableOptions } = this.props
-    const { selector, ...defaultOptions } = SORTABLE_CONFIG
-    this.sortable = new Sortable(document.querySelector(`.${selector}`), {
+    if (this.sortable) {
+      this.sortable.destroy()
+    }
+    this.sortable = new Sortable(container, {
       onEnd: this.onAudioListsSortEnd,
       ...defaultOptions,
       ...sortableOptions,
@@ -2402,6 +2406,8 @@ export default class ReactJkMusicPlayer extends PureComponent {
     } = nextProps
     const isEqualAudioLists = arrayEqual(audioLists)(this.props.audioLists)
     if (!isEqualAudioLists) {
+      this.initSortableAudioLists()
+
       if (clearPriorAudioLists) {
         this.changeAudioLists(nextProps)
       } else {