diff --git a/js/components/PlaylistWindow/PlaylistResizeTarget.js b/js/components/PlaylistWindow/PlaylistResizeTarget.js
new file mode 100644
index 00000000..09837ebc
--- /dev/null
+++ b/js/components/PlaylistWindow/PlaylistResizeTarget.js
@@ -0,0 +1,20 @@
+import { connect } from "react-redux";
+import ResizeTarget from "../ResizeTarget";
+import { PLAYLIST_SIZE_CHANGED } from "../../actionTypes";
+import {
+ PLAYLIST_RESIZE_SEGMENT_WIDTH,
+ PLAYLIST_RESIZE_SEGMENT_HEIGHT
+} from "../../constants";
+
+const mapStateToProps = state => ({
+ currentSize: state.display.playlistSize,
+ resizeSegmentWidth: PLAYLIST_RESIZE_SEGMENT_WIDTH,
+ resizeSegmentHeight: PLAYLIST_RESIZE_SEGMENT_HEIGHT,
+ id: "playlist-resize-target"
+});
+
+const mapDispatchToProps = {
+ setPlaylistSize: size => ({ type: PLAYLIST_SIZE_CHANGED, size })
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ResizeTarget);
diff --git a/js/components/PlaylistWindow/PlaylistShade.js b/js/components/PlaylistWindow/PlaylistShade.js
index 789f3714..7418719d 100644
--- a/js/components/PlaylistWindow/PlaylistShade.js
+++ b/js/components/PlaylistWindow/PlaylistShade.js
@@ -17,7 +17,7 @@ import {
UTF8_ELLIPSIS
} from "../../constants";
import CharacterString from "../CharacterString";
-import ResizeTarget from "./ResizeTarget";
+import PlaylistResizeTarget from "./PlaylistResizeTarget";
class PlaylistShade extends React.Component {
_addedWidth() {
@@ -70,7 +70,7 @@ class PlaylistShade extends React.Component {
{this._time()}
-
+
diff --git a/js/components/PlaylistWindow/index.js b/js/components/PlaylistWindow/index.js
index cb8af65e..fc58d2a1 100644
--- a/js/components/PlaylistWindow/index.js
+++ b/js/components/PlaylistWindow/index.js
@@ -31,7 +31,7 @@ import RemoveMenu from "./RemoveMenu";
import SelectionMenu from "./SelectionMenu";
import MiscMenu from "./MiscMenu";
import ListMenu from "./ListMenu";
-import ResizeTarget from "./ResizeTarget";
+import PlaylistResizeTarget from "./PlaylistResizeTarget";
import PlaylistActionArea from "./PlaylistActionArea";
import TrackList from "./TrackList";
import ScrollBar from "./ScrollBar";
@@ -137,7 +137,7 @@ class PlaylistWindow extends React.Component {
id="playlist-scroll-down-button"
onClick={this.props.scrollDownFourTracks}
/>
-
+
diff --git a/js/components/PlaylistWindow/ResizeTarget.js b/js/components/ResizeTarget.js
similarity index 56%
rename from js/components/PlaylistWindow/ResizeTarget.js
rename to js/components/ResizeTarget.js
index 0b99a62e..d34968a6 100644
--- a/js/components/PlaylistWindow/ResizeTarget.js
+++ b/js/components/ResizeTarget.js
@@ -1,12 +1,7 @@
import React from "react";
-import { connect } from "react-redux";
-import { PLAYLIST_SIZE_CHANGED } from "../../actionTypes";
-import {
- PLAYLIST_RESIZE_SEGMENT_WIDTH,
- PLAYLIST_RESIZE_SEGMENT_HEIGHT
-} from "../../constants";
+import PropTypes from "prop-types";
-class ResizeTarget extends React.Component {
+export default class ResizeTarget extends React.Component {
constructor(props) {
super(props);
this.handleMouseDown = this.handleMouseDown.bind(this);
@@ -14,7 +9,7 @@ class ResizeTarget extends React.Component {
handleMouseDown(e) {
// Prevent dragging from highlighting text.
e.preventDefault();
- const [width, height] = this.props.playlistSize;
+ const [width, height] = this.props.currentSize;
const mouseStart = {
x: e.clientX,
y: e.clientY
@@ -26,12 +21,12 @@ class ResizeTarget extends React.Component {
const newWidth = Math.max(
0,
- width + Math.round(x / PLAYLIST_RESIZE_SEGMENT_WIDTH)
+ width + Math.round(x / this.props.resizeSegmentWidth)
);
const newHeight = this.props.widthOnly
? width
- : Math.max(0, height + Math.round(y / PLAYLIST_RESIZE_SEGMENT_HEIGHT));
+ : Math.max(0, height + Math.round(y / this.props.resizeSegmentHeight));
const newSize = [newWidth, newHeight];
@@ -48,19 +43,17 @@ class ResizeTarget extends React.Component {
return (
(this.node = node)}
- id="playlist-resize-target"
+ id={this.props.id}
onMouseDown={this.handleMouseDown}
/>
);
}
}
-const mapStateToProps = state => ({
- playlistSize: state.display.playlistSize
-});
-
-const mapDispatchToProps = {
- setPlaylistSize: size => ({ type: PLAYLIST_SIZE_CHANGED, size })
+ResizeTarget.propTypes = {
+ currentSize: PropTypes.arrayOf(PropTypes.number).isRequired,
+ resizeSegmentWidth: PropTypes.number.isRequired,
+ resizeSegmentHeight: PropTypes.number.isRequired,
+ setPlaylistSize: PropTypes.func.isRequired,
+ widthOnly: PropTypes.bool
};
-
-export default connect(mapStateToProps, mapDispatchToProps)(ResizeTarget);