Migration of jsx files to tsx 2

package.json

@@ -99,12 +99,14 @@
     "@types/codemirror": "^5.60.15",
     "@types/color": "^3.0.6",
     "@types/cors": "^2.8.17",
+    "@types/file-saver": "^2.0.7",
     "@types/lodash.capitalize": "^4.2.9",
     "@types/lodash.isequal": "^4.5.8",
     "@types/lodash.throttle": "^4.1.9",
     "@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/AppLayout.jsx → src/components/AppLayout.tsx

@@ -2,16 +2,16 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import ScrollContainer from './ScrollContainer'
 
-class AppLayout extends React.Component {
-  static propTypes = {
-    toolbar: PropTypes.element.isRequired,
-    layerList: PropTypes.element.isRequired,
-    layerEditor: PropTypes.element,
-    map: PropTypes.element.isRequired,
-    bottom: PropTypes.element,
-    modals: PropTypes.node,
-  }
+type AppLayoutProps = {
+  toolbar: React.ReactElement
+  layerList: React.ReactElement
+  layerEditor?: React.ReactElement
+  map: React.ReactElement
+  bottom?: React.ReactElement
+  modals?: React.ReactNode
+};
 
+class AppLayout extends React.Component<AppLayoutProps> {
   static childContextTypes = {
     reactIconBase: PropTypes.object
   }

src/components/AppMessagePanel.jsx → src/components/AppMessagePanel.tsx

@@ -1,29 +1,28 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import {formatLayerId} from '../util/format';
+import { StyleSpecification } from '@maplibre/maplibre-gl-style-spec';
 
-export default class AppMessagePanel extends React.Component {
-  static propTypes = {
-    errors: PropTypes.array,
-    infos: PropTypes.array,
-    mapStyle: PropTypes.object,
-    onLayerSelect: PropTypes.func,
-    currentLayer: PropTypes.object,
-    selectedLayerIndex: PropTypes.number,
-  }
+type AppMessagePanelProps = {
+  errors?: unknown[]
+  infos?: unknown[]
+  mapStyle?: StyleSpecification
+  onLayerSelect?(...args: unknown[]): unknown
+  currentLayer?: object
+  selectedLayerIndex?: number
+};
 
+export default class AppMessagePanel extends React.Component<AppMessagePanelProps> {
   static defaultProps = {
     onLayerSelect: () => {},
   }
 
   render() {
     const {selectedLayerIndex} = this.props;
-    const errors = this.props.errors.map((error, idx) => {
+    const errors = this.props.errors?.map((error: any, idx) => {
       let content;
       if (error.parsed && error.parsed.type === "layer") {
         const {parsed} = error;
-        const {mapStyle, currentLayer} = this.props;
-        const layerId = mapStyle.layers[parsed.data.index].id;
+        const layerId = this.props.mapStyle?.layers[parsed.data.index].id;
         content = (
           <>
             Layer <span>{formatLayerId(layerId)}</span>: {parsed.data.message}
@@ -32,7 +31,7 @@ export default class AppMessagePanel extends React.Component {
                 &nbsp;&mdash;&nbsp;
                 <button
                   className="maputnik-message-panel__switch-button"
-                  onClick={() => this.props.onLayerSelect(parsed.data.index)}
+                  onClick={() => this.props.onLayerSelect!(parsed.data.index)}
                 >
                   switch to layer
                 </button>
@@ -49,7 +48,7 @@ export default class AppMessagePanel extends React.Component {
       </p>
     })
 
-    const infos = this.props.infos.map((m, i) => {
+    const infos = this.props.infos?.map((m, i) => {
       return <p key={"info-"+i}>{m}</p>
     })
 

src/components/AppToolbar.jsx → src/components/AppToolbar.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import {detect} from 'detect-browser';
 
@@ -9,27 +8,28 @@ import pkgJson from '../../package.json'
 
 // This is required because of <https://stackoverflow.com/a/49846426>, there isn't another way to detect support that I'm aware of.
 const browser = detect();
-const colorAccessibilityFiltersEnabled = ['chrome', 'firefox'].indexOf(browser.name) > -1;
+const colorAccessibilityFiltersEnabled = ['chrome', 'firefox'].indexOf(browser!.name) > -1;
 
 
-class IconText extends React.Component {
-  static propTypes = {
-    children: PropTypes.node,
-  }
+type IconTextProps = {
+  children?: React.ReactNode
+};
+
 
+class IconText extends React.Component<IconTextProps> {
   render() {
     return <span className="maputnik-icon-text">{this.props.children}</span>
   }
 }
 
-class ToolbarLink extends React.Component {
-  static propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node,
-    href: PropTypes.string,
-    onToggleModal: PropTypes.func,
-  }
+type ToolbarLinkProps = {
+  className?: string
+  children?: React.ReactNode
+  href?: string
+  onToggleModal?(...args: unknown[]): unknown
+};
 
+class ToolbarLink extends React.Component<ToolbarLinkProps> {
   render() {
     return <a
       className={classnames('maputnik-toolbar-link', this.props.className)}
@@ -42,14 +42,14 @@ class ToolbarLink extends React.Component {
   }
 }
 
-class ToolbarLinkHighlighted extends React.Component {
-  static propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node,
-    href: PropTypes.string,
-    onToggleModal: PropTypes.func
-  }
+type ToolbarLinkHighlightedProps = {
+  className?: string
+  children?: React.ReactNode
+  href?: string
+  onToggleModal?(...args: unknown[]): unknown
+};
 
+class ToolbarLinkHighlighted extends React.Component<ToolbarLinkHighlightedProps> {
   render() {
     return <a
       className={classnames('maputnik-toolbar-link', "maputnik-toolbar-link--highlighted", this.props.className)}
@@ -64,12 +64,12 @@ class ToolbarLinkHighlighted extends React.Component {
   }
 }
 
-class ToolbarSelect extends React.Component {
-  static propTypes = {
-    children: PropTypes.node,
-    wdKey: PropTypes.string
-  }
+type ToolbarSelectProps = {
+  children?: React.ReactNode
+  wdKey?: string
+};
 
+class ToolbarSelect extends React.Component<ToolbarSelectProps> {
   render() {
     return <div
       className='maputnik-toolbar-select'
@@ -80,13 +80,13 @@ class ToolbarSelect extends React.Component {
   }
 }
 
-class ToolbarAction extends React.Component {
-  static propTypes = {
-    children: PropTypes.node,
-    onClick: PropTypes.func,
-    wdKey: PropTypes.string
-  }
+type ToolbarActionProps = {
+  children?: React.ReactNode
+  onClick?(...args: unknown[]): unknown
+  wdKey?: string
+};
 
+class ToolbarAction extends React.Component<ToolbarActionProps> {
   render() {
     return <button
       className='maputnik-toolbar-action'
@@ -98,22 +98,22 @@ class ToolbarAction extends React.Component {
   }
 }
 
-export default class AppToolbar extends React.Component {
-  static propTypes = {
-    mapStyle: PropTypes.object.isRequired,
-    inspectModeEnabled: PropTypes.bool.isRequired,
-    onStyleChanged: PropTypes.func.isRequired,
-    // A new style has been uploaded
-    onStyleOpen: PropTypes.func.isRequired,
-    // A dict of source id's and the available source layers
-    sources: PropTypes.object.isRequired,
-    children: PropTypes.node,
-    onToggleModal: PropTypes.func,
-    onSetMapState: PropTypes.func,
-    mapState: PropTypes.string,
-    renderer: PropTypes.string,
-  }
+type AppToolbarProps = {
+  mapStyle: object
+  inspectModeEnabled: boolean
+  onStyleChanged(...args: unknown[]): unknown
+  // A new style has been uploaded
+  onStyleOpen(...args: unknown[]): unknown
+  // A dict of source id's and the available source layers
+  sources: object
+  children?: React.ReactNode
+  onToggleModal(...args: unknown[]): unknown
+  onSetMapState(...args: unknown[]): unknown
+  mapState?: string
+  renderer?: string
+};
 
+export default class AppToolbar extends React.Component<AppToolbarProps> {
   state = {
     isOpen: {
       settings: false,
@@ -124,16 +124,16 @@ export default class AppToolbar extends React.Component {
     }
   }
 
-  handleSelection(val) {
+  handleSelection(val: string | undefined) {
     this.props.onSetMapState(val);
   }
 
-  onSkip = (target) => {
+  onSkip = (target: string) => {
     if (target === "map") {
-      document.querySelector(".maplibregl-canvas").focus();
+      (document.querySelector(".maplibregl-canvas") as HTMLCanvasElement).focus();
     }
     else {
-      const el = document.querySelector("#skip-target-"+target);
+      const el = document.querySelector("#skip-target-"+target) as HTMLButtonElement;
       el.focus();
     }
   }
@@ -190,21 +190,21 @@ export default class AppToolbar extends React.Component {
           <button
             data-wd-key="root:skip:layer-list"
             className="maputnik-toolbar-skip"
-            onClick={e => this.onSkip("layer-list")}
+            onClick={_e => this.onSkip("layer-list")}
           >
             Layers list
           </button>
           <button
             data-wd-key="root:skip:layer-editor"
             className="maputnik-toolbar-skip"
-            onClick={e => this.onSkip("layer-editor")}
+            onClick={_e => this.onSkip("layer-editor")}
           >
             Layer editor
           </button>
           <button
             data-wd-key="root:skip:map-view"
             className="maputnik-toolbar-skip"
-            onClick={e => this.onSkip("map")}
+            onClick={_e => this.onSkip("map")}
           >
             Map view
           </button>
@@ -246,7 +246,7 @@ export default class AppToolbar extends React.Component {
                 className="maputnik-select"
                 data-wd-key="maputnik-select"
                 onChange={(e) => this.handleSelection(e.target.value)}
-                value={currentView.id}
+                value={currentView?.id}
               >
                 {views.filter(v => v.group === "general").map((item) => {
                   return (

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,