From d607a769fc12b6a1f4041da7afb8d54a4b32fc64 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Mon, 17 Sep 2018 08:32:52 -0700
Subject: [PATCH] Convert some non-connected components to Typescript

---
 ...CharacterString.js => CharacterString.tsx} | 13 +++++----
 .../{ClickedDiv.js => ClickedDiv.tsx}         | 13 +++++++--
 .../{DropTarget.js => DropTarget.tsx}         | 27 ++++++++++++-------
 3 files changed, 34 insertions(+), 19 deletions(-)
 rename js/components/{CharacterString.js => CharacterString.tsx} (67%)
 rename js/components/{ClickedDiv.js => ClickedDiv.tsx} (79%)
 rename js/components/{DropTarget.js => DropTarget.tsx} (59%)

diff --git a/js/components/CharacterString.js b/js/components/CharacterString.tsx
similarity index 67%
rename from js/components/CharacterString.js
rename to js/components/CharacterString.tsx
index 2097e34e..ae20ede8 100644
--- a/js/components/CharacterString.js
+++ b/js/components/CharacterString.tsx
@@ -1,9 +1,12 @@
 import React from "react";
-import PropTypes from "prop-types";
 import Character from "./Character";
 
-class CharacterString extends React.Component {
-  shouldComponentUpdate(nextProps) {
+interface Props {
+  children: string;
+}
+
+class CharacterString extends React.Component<Props> {
+  shouldComponentUpdate(nextProps: Props) {
     return nextProps.children !== this.props.children;
   }
 
@@ -16,8 +19,4 @@ class CharacterString extends React.Component {
   }
 }
 
-CharacterString.propsTypes = {
-  children: PropTypes.string
-};
-
 export default CharacterString;
diff --git a/js/components/ClickedDiv.js b/js/components/ClickedDiv.tsx
similarity index 79%
rename from js/components/ClickedDiv.js
rename to js/components/ClickedDiv.tsx
index 5a938dfe..aa5876b1 100644
--- a/js/components/ClickedDiv.js
+++ b/js/components/ClickedDiv.tsx
@@ -1,14 +1,23 @@
 import React from "react";
 import classnames from "classnames";
 
+interface Props {
+  className?: string;
+  onMouseDown?: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+interface State {
+  clicked: boolean;
+}
+
 // Winamp has a strange behavior for the buttons at the top of the main window.
 // It shows through to the main background sprite until the first time that it's
 // clicked, and then it shows the dedicated undepressed sprite thereafter.
 // This component is an abstraction that tracks if a div has ever been clicked.
 // Look in `skinSelectors` for CSS selectors that look like `#some-id.clicked`
 // for examples of this functionality in use.
-export default class ClickedDiv extends React.Component {
-  constructor(props) {
+export default class ClickedDiv extends React.Component<Props, State> {
+  constructor(props: Props) {
     super(props);
     this.state = { clicked: false };
   }
diff --git a/js/components/DropTarget.js b/js/components/DropTarget.tsx
similarity index 59%
rename from js/components/DropTarget.js
rename to js/components/DropTarget.tsx
index 67d32080..080c7ee0 100644
--- a/js/components/DropTarget.js
+++ b/js/components/DropTarget.tsx
@@ -1,24 +1,32 @@
 import React from "react";
 
-export default class DropTarget extends React.Component {
-  supress(e) {
+interface Coord {
+  x: number;
+  y: number;
+}
+
+interface Props {
+  loadFilesFromReferences: () => void;
+  handleDrop(e: React.DragEvent<HTMLDivElement>, coord: Coord): void;
+}
+
+export default class DropTarget extends React.Component<Props> {
+  supress(e: React.DragEvent<HTMLDivElement>) {
     e.stopPropagation();
     e.preventDefault();
     e.dataTransfer.dropEffect = "link";
     e.dataTransfer.effectAllowed = "link";
   }
 
-  handleDrop = e => {
+  handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
     this.supress(e);
-    if (!this._node) {
+    const { target } = e;
+    if (!(target instanceof Element)) {
       return;
     }
-    const { x, y } = this._node.getBoundingClientRect();
-    this.props.handleDrop(e, { x, y });
-  };
 
-  _ref = node => {
-    this._node = node;
+    const { left: x, top: y } = target.getBoundingClientRect();
+    this.props.handleDrop(e, { x, y });
   };
 
   render() {
@@ -36,7 +44,6 @@ export default class DropTarget extends React.Component {
         onDragEnter={this.supress}
         onDragOver={this.supress}
         onDrop={this.handleDrop}
-        ref={this._ref}
       />
     );
   }