Abstact resize target for future use in gen windows

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);

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 {
             <CharacterString id="playlist-shade-time">
               {this._time()}
             </CharacterString>
-            <ResizeTarget widthOnly />
+            <PlaylistResizeTarget widthOnly />
             <div id="playlist-shade-button" onClick={toggleShade} />
             <div id="playlist-close-button" onClick={close} />
           </div>

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}
             />
-            <ResizeTarget />
+            <PlaylistResizeTarget />
           </div>
         </div>
       </DropTarget>

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 (
       <div
         ref={node => (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);