diff --git a/js/components/PlaylistWindow/ScrollBar.js b/js/components/PlaylistWindow/ScrollBar.js deleted file mode 100644 index c7680dd6..00000000 --- a/js/components/PlaylistWindow/ScrollBar.js +++ /dev/null @@ -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 = () =>
; - -const ScrollBar = props => ( - -); - -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); diff --git a/js/components/PlaylistWindow/ScrollBar.tsx b/js/components/PlaylistWindow/ScrollBar.tsx new file mode 100644 index 00000000..a096d60d --- /dev/null +++ b/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 = () =>
; + +const ScrollBar = (props: StateProps & DispatchProps) => ( + +); + +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); 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" >