Migrate more components

package-lock.json

@@ -71,6 +71,7 @@
         "@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-dom": "^16.9.24",
         "@types/uuid": "^9.0.7",
         "@vitejs/plugin-react": "^4.2.0",
@@ -4831,6 +4832,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-aria-modal": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/react-aria-modal/-/react-aria-modal-4.0.9.tgz",
+      "integrity": "sha512-H8SU5QoB+1ldMGYRHNm1MXfzD5oD+ZdYTrwVzT+KEiFrkTqQG2QdwVc6Ro4/RixnU4LNtMpvF5HKAIfzzGJGjw==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-dom": {
       "version": "16.9.24",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.24.tgz",

package.json

@@ -100,6 +100,7 @@
     "@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-dom": "^16.9.24",
     "@types/uuid": "^9.0.7",
     "@vitejs/plugin-react": "^4.2.0",

src/components/FieldDocLabel.tsx

@@ -1,26 +1,27 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-
 import {MdInfoOutline, MdHighlightOff} from 'react-icons/md'
 
-export default class FieldDocLabel extends React.Component {
+type FieldDocLabelProps = {
-  static propTypes = {
+  label: object | string
-    label: PropTypes.oneOfType([
+  fieldSpec?: {
-      PropTypes.object,
+    doc?: string
-      PropTypes.string
-    ]).isRequired,
-    fieldSpec: PropTypes.object,
-    onToggleDoc: PropTypes.func,
   }
+  onToggleDoc?(...args: unknown[]): unknown
+};
 
-  constructor (props) {
+type FieldDocLabelState = {
+  open: boolean
+};
+
+export default class FieldDocLabel extends React.Component<FieldDocLabelProps, FieldDocLabelState> {
+  constructor (props: FieldDocLabelProps) {
     super(props);
     this.state = {
       open: false,
     }
   }
 
-  onToggleDoc = (open) => {
+  onToggleDoc = (open: boolean) => {
     this.setState({
       open,
     }, () => {

src/components/Fieldset.tsx

@@ -1,13 +1,23 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import FieldDocLabel from './FieldDocLabel'
 import Doc from './Doc'
 
+type FieldsetProps = {
+  label: string,
+  fieldSpec?: { doc?: string },
+  action?: string,
+};
+
+type FieldsetState = {
+  showDoc: boolean
+};
 
 let IDX = 0;
 
-export default class Fieldset extends React.Component {
+export default class Fieldset extends React.Component<FieldsetProps, FieldsetState> {
-  constructor (props) {
+  _labelId: string;
+
+  constructor (props: FieldsetProps) {
     super(props);
     this._labelId = `fieldset_label_${(IDX++)}`;
     this.state = {
@@ -15,15 +25,13 @@ export default class Fieldset extends React.Component {
     }
   }
 
-  onToggleDoc = (val) => {
+  onToggleDoc = (val: boolean) => {
     this.setState({
       showDoc: val
     });
   }
 
   render () {
-    const {props} = this;
-
     return <div className="maputnik-input-block" role="group" aria-labelledby={this._labelId}>
       {this.props.fieldSpec &&
         <div className="maputnik-input-block-label">
@@ -36,14 +44,14 @@ export default class Fieldset extends React.Component {
       }
       {!this.props.fieldSpec &&
         <div className="maputnik-input-block-label">
-          {props.label}
+          {this.props.label}
         </div>
       }
       <div className="maputnik-input-block-action">
         {this.props.action}
       </div>
       <div className="maputnik-input-block-content">
-        {props.children}
+        {this.props.children}
       </div>
       {this.props.fieldSpec &&
         <div

src/components/Modal.tsx

@@ -1,22 +1,21 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import {MdClose} from 'react-icons/md'
 import AriaModal from 'react-aria-modal'
 import classnames from 'classnames';
 
 
-export default class Modal extends React.Component {
+type ModalProps = {
-  static propTypes = {
+  "data-wd-key"?: string
-    "data-wd-key": PropTypes.string,
+  isOpen: boolean
-    isOpen: PropTypes.bool.isRequired,
+  title: string
-    title: PropTypes.string.isRequired,
+  onOpenToggle(...args: unknown[]): unknown
-    onOpenToggle: PropTypes.func.isRequired,
+  underlayClickExits?: boolean
-    children: PropTypes.node,
+  underlayProps?: any
-    underlayClickExits: PropTypes.bool,
+  className?: string
-    underlayProps: PropTypes.object,
+};
-    className: PropTypes.string,
-  }
 
+
+export default class Modal extends React.Component<ModalProps> {
   static defaultProps = {
     underlayClickExits: true
   }
@@ -24,7 +23,7 @@ export default class Modal extends React.Component {
   // See <https://github.com/maputnik/editor/issues/416>
   onClose = () => {
     if (document.activeElement) {
-      document.activeElement.blur();
+      (document.activeElement as HTMLElement).blur();
     }
 
     setTimeout(() => {
@@ -37,6 +36,7 @@ export default class Modal extends React.Component {
       return <AriaModal
         titleText={this.props.title}
         underlayClickExits={this.props.underlayClickExits}
+        // @ts-ignore
         underlayProps={this.props.underlayProps}
         data-wd-key={this.props["data-wd-key"]}
         verticallyCenter={true}

src/components/ScrollContainer.jsx

@@ -1,15 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-export default class ScrollContainer extends React.Component {
-  static propTypes = {
-    children: PropTypes.node
-  }
-
-  render() {
-    return <div className="maputnik-scroll-container">
-      {this.props.children}
-    </div>
-  }
-}
-

src/components/ScrollContainer.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+type ScrollContainerProps = {
+  children?: React.ReactNode
+};
+
+export default class ScrollContainer extends React.Component<ScrollContainerProps> {
+  render() {
+    return <div className="maputnik-scroll-container">
+      {this.props.children}
+    </div>
+  }
+}
+