From a52c63ea427b895e7267dc8207a5f31b43e7b9ee Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Thu, 11 Oct 2018 20:33:46 -0700
Subject: [PATCH] Type ScrollBar

---
 .../{ScrollBar.js => ScrollBar.tsx}           | 27 +++++++++++++------
 .../__snapshots__/index.test.js.snap          |  2 +-
 package.json                                  |  1 +
 yarn.lock                                     | 13 +++++++++
 4 files changed, 34 insertions(+), 9 deletions(-)
 rename js/components/PlaylistWindow/{ScrollBar.js => ScrollBar.tsx} (52%)

diff --git a/js/components/PlaylistWindow/ScrollBar.js b/js/components/PlaylistWindow/ScrollBar.tsx
similarity index 52%
rename from js/components/PlaylistWindow/ScrollBar.js
rename to js/components/PlaylistWindow/ScrollBar.tsx
index c7680dd6..9a6a4d64 100644
--- a/js/components/PlaylistWindow/ScrollBar.js
+++ b/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(
diff --git a/js/components/PlaylistWindow/__snapshots__/index.test.js.snap b/js/components/PlaylistWindow/__snapshots__/index.test.js.snap
index 0ad3db3b..0fca32e0 100644
--- a/js/components/PlaylistWindow/__snapshots__/index.test.js.snap
+++ b/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]}
diff --git a/package.json b/package.json
index 693e5c78..becad6a5 100644
--- a/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index 01cada18..5e848bbc 100644
--- a/yarn.lock
+++ b/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"