More jsx to tsx migration

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.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.jsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Block from './Block'
-import InputAutocomplete from './InputAutocomplete'
-
-
-export default class FieldAutocomplete extends React.Component {
-  static propTypes = {
-    ...InputAutocomplete.propTypes,
-  }
-
-  render() {
-    const {props} = this;
-
-    return <Block label={props.label}>
-      <InputAutocomplete {...props} />
-    </Block>
-  }
-}
-

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.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 }