Convert ResizeHandle to TypeScript

ui/src/shared/components/ResizeHandle.js

@@ -1,30 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-
-const {func, bool, string} = PropTypes
-const ResizeHandle = React.createClass({
-  propTypes: {
-    onHandleStartDrag: func.isRequired,
-    isDragging: bool.isRequired,
-    theme: string,
-    top: string,
-  },
-
-  render() {
-    const {isDragging, onHandleStartDrag, top, theme} = this.props
-
-    return (
-      <div
-        className={classnames('resizer--handle', {
-          dragging: isDragging,
-          'resizer--malachite': theme === 'kapacitor',
-        })}
-        onMouseDown={onHandleStartDrag}
-        style={{top}}
-      />
-    )
-  },
-})
-
-export default ResizeHandle

ui/src/shared/components/ResizeHandle.tsx

@@ -0,0 +1,27 @@
+import React, {SFC} from 'react'
+import classnames from 'classnames'
+
+interface Props {
+  onHandleStartDrag: () => void
+  isDragging: boolean
+  theme?: string
+  top?: string
+}
+
+const ResizeHandle: SFC<Props> = ({
+  onHandleStartDrag,
+  isDragging,
+  theme,
+  top,
+}) => (
+  <div
+    className={classnames('resizer--handle', {
+      dragging: isDragging,
+      'resizer--malachite': theme === 'kapacitor',
+    })}
+    onMouseDown={onHandleStartDrag}
+    style={{top}}
+  />
+)
+
+export default ResizeHandle