Type scrollbar (#677)

* Type ScrollBar

* Fix typing to avoid extra import

js/components/PlaylistWindow/ScrollBar.js

@@ -1,39 +0,0 @@
-import React from "react";
-import { connect } from "react-redux";
-import Slider from "rc-slider/lib/Slider";
-
-import { setPlaylistScrollPosition } from "../../actionCreators";
-import { getVisibleTrackIds, getPlaylistScrollPosition } from "../../selectors";
-
-const Handle = () => <div className="playlist-scrollbar-handle" />;
-
-const ScrollBar = props => (
-  <Slider
-    className="playlist-scrollbar"
-    type="range"
-    min={0}
-    max={100}
-    step={1}
-    value={props.playlistScrollPosition}
-    onChange={props.setPlaylistScrollPosition}
-    vertical
-    handle={Handle}
-    disabled={props.allTracksAreVisible}
-  />
-);
-
-const mapDispatchToProps = {
-  setPlaylistScrollPosition: position =>
-    setPlaylistScrollPosition(100 - position)
-};
-
-const mapStateToProps = state => ({
-  playlistScrollPosition: getPlaylistScrollPosition(state),
-  allTracksAreVisible:
-    getVisibleTrackIds(state).length === state.playlist.length
-});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ScrollBar);

js/components/PlaylistWindow/ScrollBar.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { connect } from "react-redux";
+
+// Here we import the rc-slider class just to get it's type.
+// We expect the Typescript compiler to not actually include this in the bundle.
+import RcSlider from "rc-slider";
+// @ts-ignore
+import SliderComponent from "rc-slider/lib/Slider";
+// Here we inform TypeScript to use the default export's type for our partial import.
+const Slider = SliderComponent as typeof RcSlider;
+
+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: StateProps & DispatchProps) => (
+  <Slider
+    className="playlist-scrollbar"
+    min={0}
+    max={100}
+    step={1}
+    value={props.playlistScrollPosition}
+    onChange={props.setPlaylistScrollPosition}
+    vertical
+    handle={Handle}
+    disabled={props.allTracksAreVisible}
+  />
+);
+
+const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
+  return {
+    setPlaylistScrollPosition: position =>
+      dispatch(setPlaylistScrollPosition(100 - position))
+  };
+};
+
+const mapStateToProps = (state: AppState): StateProps => ({
+  playlistScrollPosition: getPlaylistScrollPosition(state),
+  allTracksAreVisible:
+    getVisibleTrackIds(state).length === state.playlist.trackOrder.length
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ScrollBar);

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"