Type ScrollBar

js/components/PlaylistWindow/ScrollBar.tsx

@@ -1,16 +1,25 @@
 import React from "react";
 import { connect } from "react-redux";
-import Slider from "rc-slider/lib/Slider";
+import Slider from "rc-slider";
 
 import { setPlaylistScrollPosition } from "../../actionCreators";
 import { getVisibleTrackIds, getPlaylistScrollPosition } from "../../selectors";
+import { AppState, Dispatch } from "../../types";
+
+interface StateProps {
+  playlistScrollPosition: number;
+  allTracksAreVisible: boolean;
+}
+
+interface DispatchProps {
+  setPlaylistScrollPosition: (value: number) => void;
+}
 
 const Handle = () => <div className="playlist-scrollbar-handle" />;
 
-const ScrollBar = props => (
+const ScrollBar = (props: StateProps & DispatchProps) => (
   <Slider
     className="playlist-scrollbar"
-    type="range"
     min={0}
     max={100}
     step={1}
@@ -22,15 +31,17 @@ const ScrollBar = props => (
   />
 );
 
-const mapDispatchToProps = {
-  setPlaylistScrollPosition: position =>
-    setPlaylistScrollPosition(100 - position)
+const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
+  return {
+    setPlaylistScrollPosition: position =>
+      dispatch(setPlaylistScrollPosition(100 - position))
+  };
 };
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state: AppState): StateProps => ({
   playlistScrollPosition: getPlaylistScrollPosition(state),
   allTracksAreVisible:
-    getVisibleTrackIds(state).length === state.playlist.length
+    getVisibleTrackIds(state).length === state.playlist.trackOrder.length
 });
 
 export default connect(

js/components/PlaylistWindow/__snapshots__/index.test.js.snap

@@ -86,7 +86,7 @@ exports[`PlaylistWindow renders to snapshot 1`] = `
       className="playlist-middle-right draggable"
     >
       <div
-        className="rc-slider rc-slider-vertical playlist-scrollbar"
+        className="rc-slider rc-slider-disabled rc-slider-vertical playlist-scrollbar"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}

package.json

@@ -67,6 +67,7 @@
     "@types/react": "^16.4.18",
     "@types/react-dom": "^16.0.9",
     "@types/react-redux": "^6.0.9",
+    "@types/rc-slider": "^8.6.0",
     "@types/webaudioapi": "^0.0.27",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^9.0.0-beta.3",

yarn.lock

@@ -753,6 +753,19 @@
   dependencies:
     "@types/react" "*"
 
+"@types/rc-slider@^8.6.0":
+  version "8.6.0"
+  resolved "https://registry.yarnpkg.com/@types/rc-slider/-/rc-slider-8.6.0.tgz#7f061a920b067825c8455cf481c57b0927889c72"
+  dependencies:
+    "@types/rc-tooltip" "*"
+    "@types/react" "*"
+
+"@types/rc-tooltip@*":
+  version "3.4.12"
+  resolved "https://registry.yarnpkg.com/@types/rc-tooltip/-/rc-tooltip-3.4.12.tgz#7a7aeb036e7378f5adeb6afcba1a905c1804d8a8"
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@^16.0.9":
   version "16.0.9"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.9.tgz#73ceb7abe6703822eab6600e65c5c52efd07fb91"