mirror of
https://github.com/heyarne/airsonic-ui.git
synced 2026-05-07 02:33:39 +02:00
First sloppy import of code from heyarne/reagent-movable
This commit is contained in:
parent
53748941c0
commit
7eeceb2786
4 changed files with 167 additions and 114 deletions
207
package-lock.json
generated
207
package-lock.json
generated
|
|
@ -4,6 +4,14 @@
|
|||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": {
|
||||
"version": "7.3.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.4.tgz",
|
||||
"integrity": "sha512-IvfvnMdSaLBateu0jfsYIpZTxAc2cKEXEMiezGGN75QcBcecDUKd3PgLAncT0oOgxKy8dd8hrJKj9MfzgfZd6g==",
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.12.0"
|
||||
}
|
||||
},
|
||||
"@hugojosefson/color-hash": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@hugojosefson/color-hash/-/color-hash-2.0.3.tgz",
|
||||
|
|
@ -215,12 +223,6 @@
|
|||
"integrity": "sha1-FziZ0//Rx9k4PkR5Ul2+J4yrXys=",
|
||||
"dev": true
|
||||
},
|
||||
"array-slice": {
|
||||
"version": "0.2.3",
|
||||
"resolved": "https://registry.npmjs.org/array-slice/-/array-slice-0.2.3.tgz",
|
||||
"integrity": "sha1-3Tz7gO15c6dRF82sabC5nshhhvU=",
|
||||
"dev": true
|
||||
},
|
||||
"array-union": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
|
||||
|
|
@ -843,12 +845,6 @@
|
|||
"safe-buffer": "^5.0.1"
|
||||
}
|
||||
},
|
||||
"circular-json": {
|
||||
"version": "0.5.9",
|
||||
"resolved": "https://registry.npmjs.org/circular-json/-/circular-json-0.5.9.tgz",
|
||||
"integrity": "sha512-4ivwqHpIFJZBuhN3g/pEcdbnGUywkBblloGbkglyloVjjR3uT6tieI89MVOfbP2tHX5sgb01FuLgAOzebNlJNQ==",
|
||||
"dev": true
|
||||
},
|
||||
"class-utils": {
|
||||
"version": "0.3.6",
|
||||
"resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
|
||||
|
|
@ -1007,15 +1003,6 @@
|
|||
"integrity": "sha512-mmGt/1pZqYRjMxB1axhTo16/snVZ5krrKkcmMeVKxzECMMXoCgnvTPp10QgHfcbQZw8Dq2jMNG6je4JlWU0gWg==",
|
||||
"dev": true
|
||||
},
|
||||
"combine-lists": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/combine-lists/-/combine-lists-1.0.1.tgz",
|
||||
"integrity": "sha1-RYwH4J4NkA/Ci3Cj/sLazR0st/Y=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lodash": "^4.5.0"
|
||||
}
|
||||
},
|
||||
"combined-stream": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.7.tgz",
|
||||
|
|
@ -1121,9 +1108,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"core-js": {
|
||||
"version": "2.6.4",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.4.tgz",
|
||||
"integrity": "sha512-05qQ5hXShcqGkPZpXEFLIpxayZscVD2kuMBZewxiIPPEagukO4mqgPA9CWhUvFBJfy3ODdK2p9xyHh7FTU9/7A==",
|
||||
"version": "2.6.5",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz",
|
||||
"integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A==",
|
||||
"dev": true
|
||||
},
|
||||
"core-util-is": {
|
||||
|
|
@ -1255,9 +1242,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"date-format": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/date-format/-/date-format-1.2.0.tgz",
|
||||
"integrity": "sha1-YV6CjiM90aubua4JUODOzPpuytg=",
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/date-format/-/date-format-2.0.0.tgz",
|
||||
"integrity": "sha512-M6UqVvZVgFYqZL1SfHsRGIQSz3ZL+qgbsV5Lp1Vj61LZVYuEwcMXYay7DRDtYs2HQQBK5hQtQ0fD9aEJ89V0LA==",
|
||||
"dev": true
|
||||
},
|
||||
"date-now": {
|
||||
|
|
@ -1700,34 +1687,6 @@
|
|||
"strip-eof": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"expand-braces": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/expand-braces/-/expand-braces-0.1.2.tgz",
|
||||
"integrity": "sha1-SIsdHSRRyz06axks/AMPRMWFX+o=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"array-slice": "^0.2.3",
|
||||
"array-unique": "^0.2.1",
|
||||
"braces": "^0.1.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"array-unique": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz",
|
||||
"integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=",
|
||||
"dev": true
|
||||
},
|
||||
"braces": {
|
||||
"version": "0.1.5",
|
||||
"resolved": "https://registry.npmjs.org/braces/-/braces-0.1.5.tgz",
|
||||
"integrity": "sha1-wIVxEIUpHYt1/ddOqw+FlygHEeY=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"expand-range": "^0.1.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"expand-brackets": {
|
||||
"version": "2.1.4",
|
||||
"resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
|
||||
|
|
@ -1763,30 +1722,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"expand-range": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/expand-range/-/expand-range-0.1.1.tgz",
|
||||
"integrity": "sha1-TLjtoJk8pW+k9B/ELzy7TMrf8EQ=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-number": "^0.1.1",
|
||||
"repeat-string": "^0.2.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"is-number": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/is-number/-/is-number-0.1.1.tgz",
|
||||
"integrity": "sha1-aaevEWlj1HIG7JvZtIoUIW8eOAY=",
|
||||
"dev": true
|
||||
},
|
||||
"repeat-string": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-0.2.2.tgz",
|
||||
"integrity": "sha1-x6jTI2BoNiBZp+RlH8aITosftK4=",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"extend": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
|
||||
|
|
@ -2040,22 +1975,28 @@
|
|||
"dev": true
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.6.1",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.6.1.tgz",
|
||||
"integrity": "sha512-t2JCjbzxQpWvbhts3l6SH1DKzSrx8a+SsaVf4h6bG4kOXUuPYS/kg2Lr4gQSb7eemaHqJkOThF1BGyjlUkO1GQ==",
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.7.0.tgz",
|
||||
"integrity": "sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"debug": "=3.1.0"
|
||||
"debug": "^3.2.6"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
|
||||
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
|
||||
"version": "3.2.6",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
|
||||
"integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
"ms": "^2.1.1"
|
||||
}
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
|
||||
"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -2862,9 +2803,9 @@
|
|||
}
|
||||
},
|
||||
"lodash": {
|
||||
"version": "4.17.10",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
|
||||
"integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==",
|
||||
"version": "4.17.11",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
|
||||
"integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
|
|
@ -3154,7 +3095,7 @@
|
|||
},
|
||||
"http-errors": {
|
||||
"version": "1.6.3",
|
||||
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
|
||||
"resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
|
||||
"integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
|
|
@ -3355,6 +3296,14 @@
|
|||
"through": "^2.3.6"
|
||||
}
|
||||
},
|
||||
"invariant": {
|
||||
"version": "2.2.4",
|
||||
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
|
||||
"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"invert-kv": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
|
||||
|
|
@ -3826,28 +3775,27 @@
|
|||
}
|
||||
},
|
||||
"karma": {
|
||||
"version": "3.1.4",
|
||||
"resolved": "https://registry.npmjs.org/karma/-/karma-3.1.4.tgz",
|
||||
"integrity": "sha512-31Vo8Qr5glN+dZEVIpnPCxEGleqE0EY6CtC2X9TagRV3rRQ3SNrvfhddICkJgUK3AgqpeKSZau03QumTGhGoSw==",
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/karma/-/karma-4.0.1.tgz",
|
||||
"integrity": "sha512-ind+4s03BqIXas7ZmraV3/kc5+mnqwCd+VDX1FndS6jxbt03kQKX2vXrWxNLuCjVYmhMwOZosAEKMM0a2q7w7A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"bluebird": "^3.3.0",
|
||||
"body-parser": "^1.16.1",
|
||||
"braces": "^2.3.2",
|
||||
"chokidar": "^2.0.3",
|
||||
"colors": "^1.1.0",
|
||||
"combine-lists": "^1.0.0",
|
||||
"connect": "^3.6.0",
|
||||
"core-js": "^2.2.0",
|
||||
"di": "^0.0.1",
|
||||
"dom-serialize": "^2.2.0",
|
||||
"expand-braces": "^0.1.1",
|
||||
"flatted": "^2.0.0",
|
||||
"glob": "^7.1.1",
|
||||
"graceful-fs": "^4.1.2",
|
||||
"http-proxy": "^1.13.0",
|
||||
"isbinaryfile": "^3.0.0",
|
||||
"lodash": "^4.17.5",
|
||||
"log4js": "^3.0.0",
|
||||
"lodash": "^4.17.11",
|
||||
"log4js": "^4.0.0",
|
||||
"mime": "^2.3.1",
|
||||
"minimatch": "^3.0.2",
|
||||
"optimist": "^0.6.1",
|
||||
|
|
@ -4004,16 +3952,16 @@
|
|||
"dev": true
|
||||
},
|
||||
"log4js": {
|
||||
"version": "3.0.6",
|
||||
"resolved": "https://registry.npmjs.org/log4js/-/log4js-3.0.6.tgz",
|
||||
"integrity": "sha512-ezXZk6oPJCWL483zj64pNkMuY/NcRX5MPiB0zE6tjZM137aeusrOnW1ecxgF9cmwMWkBMhjteQxBPoZBh9FDxQ==",
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/log4js/-/log4js-4.0.2.tgz",
|
||||
"integrity": "sha512-KE7HjiieVDPPdveA3bJZSuu0n8chMkFl8mIoisBFxwEJ9FmXe4YzNuiqSwYUiR1K8q8/5/8Yd6AClENY1RA9ww==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"circular-json": "^0.5.5",
|
||||
"date-format": "^1.2.0",
|
||||
"date-format": "^2.0.0",
|
||||
"debug": "^3.1.0",
|
||||
"flatted": "^2.0.0",
|
||||
"rfdc": "^1.1.2",
|
||||
"streamroller": "0.7.0"
|
||||
"streamroller": "^1.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
|
|
@ -5179,7 +5127,6 @@
|
|||
"version": "15.6.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.1.tgz",
|
||||
"integrity": "sha512-4ec7bY1Y66LymSUOH/zARVYObB23AT2h8cf6e/O6ZALB/N0sqZFEx7rq6EYPX2MkOdKORuooI/H5k9TlR4q7kQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"fbjs": "^0.8.16",
|
||||
"loose-envify": "^1.3.1",
|
||||
|
|
@ -5419,6 +5366,16 @@
|
|||
"prop-types": "^15.6.0"
|
||||
}
|
||||
},
|
||||
"react-sortable-hoc": {
|
||||
"version": "1.6.1",
|
||||
"resolved": "https://registry.npmjs.org/react-sortable-hoc/-/react-sortable-hoc-1.6.1.tgz",
|
||||
"integrity": "sha512-ZIt3wjGeHQETMyv/dE9Wfk9a6T9IP9kGO++00vIiQkol+w7Gh6sUarBNWkGINgwYqwMWV0ALPAQdq4Ixwur8jw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.2.0",
|
||||
"invariant": "^2.2.4",
|
||||
"prop-types": "^15.5.7"
|
||||
}
|
||||
},
|
||||
"read-pkg": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
|
||||
|
|
@ -5499,6 +5456,11 @@
|
|||
"strip-indent": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"regenerator-runtime": {
|
||||
"version": "0.12.1",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
|
||||
"integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
|
||||
},
|
||||
"regex-not": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
|
||||
|
|
@ -5680,7 +5642,7 @@
|
|||
},
|
||||
"safe-regex": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
|
||||
"resolved": "http://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
|
||||
"integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
|
|
@ -6809,17 +6771,27 @@
|
|||
}
|
||||
},
|
||||
"streamroller": {
|
||||
"version": "0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/streamroller/-/streamroller-0.7.0.tgz",
|
||||
"integrity": "sha512-WREzfy0r0zUqp3lGO096wRuUp7ho1X6uo/7DJfTlEi0Iv/4gT7YHqXDjKC2ioVGBZtE8QzsQD9nx1nIuoZ57jQ==",
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/streamroller/-/streamroller-1.0.3.tgz",
|
||||
"integrity": "sha512-P7z9NwP51EltdZ81otaGAN3ob+/F88USJE546joNq7bqRNTe6jc74fTBDyynxP4qpIfKlt/CesEYicuMzI0yJg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"date-format": "^1.2.0",
|
||||
"async": "^2.6.1",
|
||||
"date-format": "^2.0.0",
|
||||
"debug": "^3.1.0",
|
||||
"mkdirp": "^0.5.1",
|
||||
"readable-stream": "^2.3.0"
|
||||
"fs-extra": "^7.0.0",
|
||||
"lodash": "^4.17.10"
|
||||
},
|
||||
"dependencies": {
|
||||
"async": {
|
||||
"version": "2.6.2",
|
||||
"resolved": "https://registry.npmjs.org/async/-/async-2.6.2.tgz",
|
||||
"integrity": "sha512-H1qVYh1MYhEEFLsP97cVKqCGo7KfCyTt6uEWqsTBr9SO84oK9Uwbyd/yCW+6rKJLHksBNUVWZDAjfS+Ccx0Bbg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lodash": "^4.17.11"
|
||||
}
|
||||
},
|
||||
"debug": {
|
||||
"version": "3.2.6",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
|
||||
|
|
@ -6829,6 +6801,17 @@
|
|||
"ms": "^2.1.1"
|
||||
}
|
||||
},
|
||||
"fs-extra": {
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
|
||||
"integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"graceful-fs": "^4.1.2",
|
||||
"jsonfile": "^4.0.0",
|
||||
"universalify": "^0.1.0"
|
||||
}
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
|
||||
|
|
|
|||
|
|
@ -30,11 +30,12 @@
|
|||
"create-react-class": "^15.6.3",
|
||||
"open-iconic": "^1.1.1",
|
||||
"react": "^16.8.1",
|
||||
"react-dom": "^16.8.1"
|
||||
"react-dom": "^16.8.1",
|
||||
"react-sortable-hoc": "^1.6.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"gh-pages": "^1.2.0",
|
||||
"karma": "^3.1.4",
|
||||
"karma": "^4.0.1",
|
||||
"karma-chrome-launcher": "^2.2.0",
|
||||
"karma-cljs-test": "^0.1.0",
|
||||
"karma-notify-reporter": "^1.1.0",
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
(ns airsonic-ui.components.current-queue.views
|
||||
(:require [re-frame.core :refer [subscribe]]
|
||||
[airsonic-ui.views.song :as song]
|
||||
[airsonic-ui.components.sortable.views :as sortable]
|
||||
[airsonic-ui.routes :as r]))
|
||||
|
||||
(defn current-queue []
|
||||
[:section.section>div.container
|
||||
[:h1.title "Current Queue"]
|
||||
[sortable/sortable-component]
|
||||
(if-let [playlist @(subscribe [:audio/playlist])]
|
||||
[song/listing (:queue playlist)]
|
||||
[:p "You are currently not playing anything. Use the search or go to your "
|
||||
|
|
|
|||
67
src/cljs/airsonic_ui/components/sortable/views.cljs
Normal file
67
src/cljs/airsonic_ui/components/sortable/views.cljs
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
(ns airsonic-ui.components.sortable.views
|
||||
(:require [reagent.core :as r]
|
||||
["react-sortable-hoc" :refer [SortableHandle SortableElement
|
||||
SortableContainer]]))
|
||||
|
||||
(defonce state
|
||||
(r/atom {:items (vec (map #(str "Item " %) (range 1 51)))
|
||||
:sort-enabled? true}))
|
||||
|
||||
;; this code is taken from https://github.com/reagent-project/reagent/blob/72c95257c13e5de1531e16d1a06da7686041d3f4/examples/react-sortable-hoc/src/example/core.cljs
|
||||
(def DragHandle
|
||||
(SortableHandle.
|
||||
;; Alternative to r/reactify-component, which doens't convert props and hiccup,
|
||||
;; is to just provide fn as component and use as-element or create-element
|
||||
;; to return React elements from the component.
|
||||
(fn []
|
||||
(r/as-element [:span {:style {:WebkitTouchCallout "none"
|
||||
:WebkitUserSelect "none"
|
||||
:KhtmlUserSelect "none"
|
||||
:MozUserSelect "none"
|
||||
;; NOTE: lowercase "ms" prefix
|
||||
;; https://www.andismith.com/blogs/2012/02/modernizr-prefixed/
|
||||
:msUserSelect "none"
|
||||
:userSelect "none"}}
|
||||
"::"]))))
|
||||
|
||||
(def SortableItem
|
||||
(SortableElement.
|
||||
(r/reactify-component
|
||||
(fn [{:keys [value]}]
|
||||
[:tr
|
||||
[:td "Hi, I am a table"]
|
||||
[:td value]
|
||||
(when (:sort-enabled? @state)
|
||||
[:td [:> DragHandle]])]))))
|
||||
|
||||
(def SortableList
|
||||
(SortableContainer.
|
||||
(r/reactify-component
|
||||
(fn [{:keys [items]}]
|
||||
[:table.table
|
||||
(for [[idx value] (map-indexed vector items)]
|
||||
;; No :> or adapt-react-class here because that would convert value to JS
|
||||
(r/create-element
|
||||
SortableItem
|
||||
#js {:key (str "item-" idx)
|
||||
:index idx
|
||||
:value value}))]))))
|
||||
|
||||
(defn vector-move [coll prev-index new-index]
|
||||
(let [items (into (subvec coll 0 prev-index)
|
||||
(subvec coll (inc prev-index)))]
|
||||
(-> (subvec items 0 new-index)
|
||||
(conj (get coll prev-index))
|
||||
(into (subvec items new-index)))))
|
||||
|
||||
(comment
|
||||
(= [0 2 3 4 1 5] (vector-move [0 1 2 3 4 5] 1 4)))
|
||||
|
||||
(defn sortable-component []
|
||||
(fn []
|
||||
(r/create-element
|
||||
SortableList
|
||||
#js {:items (:items @state)
|
||||
:onSortEnd (fn [event]
|
||||
(swap! state update :items vector-move (.-oldIndex event) (.-newIndex event)))
|
||||
:useDragHandle true})))
|
||||
Loading…
Add table
Add a link
Reference in a new issue