More jsx to tsx migration

package.json

@@ -106,6 +106,7 @@
     "@types/react": "^16.14.52",
     "@types/react-aria-modal": "^4.0.9",
     "@types/react-autocomplete": "^1.8.9",
+    "@types/react-collapse": "^5.0.4",
     "@types/react-color": "^3.0.10",
     "@types/react-dom": "^16.9.24",
     "@types/react-file-reader-input": "^2.0.4",

src/components/Collapse.jsx → src/components/Collapse.tsx

@@ -1,15 +1,15 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { Collapse as ReactCollapse } from 'react-collapse'
-import {reducedMotionEnabled} from '../../libs/accessibility'
+import {reducedMotionEnabled} from '../libs/accessibility'
 
 
-export default class Collapse extends React.Component {
-  static propTypes = {
-    isActive: PropTypes.bool.isRequired,
-    children: PropTypes.element.isRequired
-  }
+type CollapseProps = {
+  isActive: boolean
+  children: React.ReactElement
+};
+
 
+export default class Collapse extends React.Component<CollapseProps> {
   static defaultProps = {
     isActive: true
   }

src/components/Collapser.jsx → src/components/Collapser.tsx

@@ -1,13 +1,12 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import {MdArrowDropDown, MdArrowDropUp} from 'react-icons/md'
 
-export default class Collapser extends React.Component {
-  static propTypes = {
-    isCollapsed: PropTypes.bool.isRequired,
-    style: PropTypes.object,
-  }
+type CollapserProps = {
+  isCollapsed: boolean
+  style?: object
+};
 
+export default class Collapser extends React.Component<CollapserProps> {
   render() {
     const iconStyle = {
       width: 20,

src/components/FieldAutocomplete.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import Block from './Block'
+import InputAutocomplete, { InputAutocompleteProps } from './InputAutocomplete'
+
+
+type FieldAutocompleteProps = InputAutocompleteProps & {
+  label?: string;
+};
+
+
+export default class FieldAutocomplete extends React.Component<FieldAutocompleteProps> {
+  render() {
+    const {props} = this;
+
+    return <Block label={props.label}>
+      <InputAutocomplete {...props} />
+    </Block>
+  }
+}
+

src/components/FieldComment.jsx → src/components/FieldComment.tsx

@@ -1,15 +1,14 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import Block from './Block'
 import InputString from './InputString'
 
-export default class FieldComment extends React.Component {
-  static propTypes = {
-    value: PropTypes.string,
-    onChange: PropTypes.func.isRequired,
-  }
+type FieldCommentProps = {
+  value?: string
+  onChange(...args: unknown[]): unknown
+};
 
+export default class FieldComment extends React.Component<FieldCommentProps> {
   render() {
     const fieldSpec = {
       doc: "Comments for the current layer. This is non-standard and not in the spec."

src/libs/accessibility.ts

@@ -1,8 +1,8 @@
 import throttle from 'lodash.throttle'
 
-export default {
-  // Throttle for 3 seconds so when a user enables it they don't have to refresh the page.
-  reducedMotionEnabled: throttle(() => {
-    return window.matchMedia("(prefers-reduced-motion: reduce)").matches
-  }, 3000)
-}
+// Throttle for 3 seconds so when a user enables it they don't have to refresh the page.
+const reducedMotionEnabled = throttle(() => {
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches
+}, 3000)
+
+export { reducedMotionEnabled }