More components migration

package-lock.json

@@ -72,7 +72,9 @@
         "@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-dom": "^16.9.24",
+        "@types/react-icon-base": "^2.1.6",
         "@types/uuid": "^9.0.7",
         "@vitejs/plugin-react": "^4.2.0",
         "cors": "^2.8.5",
@@ -4841,6 +4843,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-autocomplete": {
+      "version": "1.8.9",
+      "resolved": "https://registry.npmjs.org/@types/react-autocomplete/-/react-autocomplete-1.8.9.tgz",
+      "integrity": "sha512-Il8qJEKvPU0uW+HOPiRHIKxGF61RM6cM5tEnZDmM5ek78OK5kfv04AZbNyqdPsuTnwp8HIRgBnQH2RhgKILjcg==",
+      "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",
@@ -4850,6 +4861,15 @@
         "@types/react": "^16"
       }
     },
+    "node_modules/@types/react-icon-base": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@types/react-icon-base/-/react-icon-base-2.1.6.tgz",
+      "integrity": "sha512-ebbN1JjCm6RxBd3HdI1+8VCdiOI4qMjnl9DIHWJFrB/eYLF4mzIgdL34PIqCJBLY3vlwil9v6IHQvzsa8vgMsg==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.20.6",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.6.tgz",

package.json

@@ -101,7 +101,9 @@
     "@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-dom": "^16.9.24",
+    "@types/react-icon-base": "^2.1.6",
     "@types/uuid": "^9.0.7",
     "@vitejs/plugin-react": "^4.2.0",
     "cors": "^2.8.5",

src/components/Block.tsx

@@ -9,7 +9,7 @@ type BlockProps = {
   label?: string
   action?: React.ReactElement
   style?: object
-  onChange(...args: unknown[]): unknown
+  onChange?(...args: unknown[]): unknown
   fieldSpec?: object
   wideMode?: boolean
   error?: unknown[]
@@ -32,7 +32,9 @@ export default class Block extends React.Component<BlockProps, BlockState> {
 
   onChange(e: React.BaseSyntheticEvent<Event, HTMLInputElement, HTMLInputElement>) {
     const value = e.target.value
-    return this.props.onChange(value === "" ? undefined : value)
+    if (this.props.onChange) {
+      return this.props.onChange(value === "" ? undefined : value)
+    }
   }
 
   onToggleDoc = (val: boolean) => {

src/components/FieldUrl.jsx

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

src/components/FieldUrl.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import InputUrl, {FieldUrlProps as InputUrlProps} from './InputUrl'
+import Block from './Block'
+
+
+type FieldUrlProps = InputUrlProps & {
+  label: string;
+};
+
+
+export default class FieldUrl extends React.Component<FieldUrlProps> {
+  render () {
+    const {props} = this;
+
+    return (
+      <Block label={this.props.label}>
+        <InputUrl {...props} />
+      </Block>
+    );
+  }
+}
+

src/components/InputAutocomplete.tsx

@@ -1,24 +1,25 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import Autocomplete from 'react-autocomplete'
 
 
 const MAX_HEIGHT = 140;
 
-export default class InputAutocomplete extends React.Component {
+type InputAutocompleteProps = {
-  static propTypes = {
+  value?: string
-    value: PropTypes.string,
+  options: any[]
-    options: PropTypes.array,
+  onChange(...args: unknown[]): unknown
-    onChange: PropTypes.func,
+  keepMenuWithinWindowBounds?: boolean
-    keepMenuWithinWindowBounds: PropTypes.bool,
+  'aria-label'?: string
-    'aria-label': PropTypes.string,
+};
-  }
 
+export default class InputAutocomplete extends React.Component<InputAutocompleteProps> {
   state = {
     maxHeight: MAX_HEIGHT
   }
 
+  autocompleteMenuEl: HTMLDivElement | null = null;
+
   static defaultProps = {
     onChange: () => {},
     options: [],
@@ -26,7 +27,7 @@ export default class InputAutocomplete extends React.Component {
 
   calcMaxHeight() {
     if(this.props.keepMenuWithinWindowBounds) {
-      const maxHeight = window.innerHeight - this.autocompleteMenuEl.getBoundingClientRect().top;
+      const maxHeight = window.innerHeight - this.autocompleteMenuEl!.getBoundingClientRect().top;
       const limitedMaxHeight = Math.min(maxHeight, MAX_HEIGHT);
 
       if(limitedMaxHeight != this.state.maxHeight) {
@@ -45,7 +46,7 @@ export default class InputAutocomplete extends React.Component {
     this.calcMaxHeight();
   }
 
-  onChange (v) {
+  onChange(v: string) {
     this.props.onChange(v === "" ? undefined : v);
   }
 
@@ -64,7 +65,7 @@ export default class InputAutocomplete extends React.Component {
         }}
         wrapperProps={{
           className: "maputnik-autocomplete",
-          style: null
+          style: {}
         }}
         inputProps={{
           'aria-label': this.props['aria-label'],
@@ -75,11 +76,12 @@ export default class InputAutocomplete extends React.Component {
         items={this.props.options}
         getItemValue={(item) => item[0]}
         onSelect={v => this.onChange(v)}
-        onChange={(e, v) => this.onChange(v)}
+        onChange={(_e, v) => this.onChange(v)}
         shouldItemRender={(item, value="") => {
           if (typeof(value) === "string") {
             return item[0].toLowerCase().indexOf(value.toLowerCase()) > -1
           }
+          return false
         }}
         renderItem={(item, isHighlighted) => (
           <div

src/components/InputUrl.tsx

@@ -1,16 +1,15 @@
-import React, {Fragment} from 'react'
+import React from 'react'
-import PropTypes from 'prop-types'
 import InputString from './InputString'
 import SmallError from './SmallError'
 
 
-function validate (url) {
+function validate(url: string) {
   if (url === "") {
     return;
   }
 
   let error;
-  const getProtocol = (url) => {
+  const getProtocol = (url: string) => {
     try {
       const urlObj = new URL(url);
       return urlObj.protocol;
@@ -48,38 +47,42 @@ function validate (url) {
   return error;
 }
 
-export default class FieldUrl extends React.Component {
+export type FieldUrlProps = {
-  static propTypes = {
+  "data-wd-key"?: string
-    "data-wd-key": PropTypes.string,
+  value: string
-    value: PropTypes.string,
+  style?: object
-    style: PropTypes.object,
+  default?: string
-    default: PropTypes.string,
+  onChange(...args: unknown[]): unknown
-    onChange: PropTypes.func,
+  onInput(...args: unknown[]): unknown
-    onInput: PropTypes.func,
+  multi?: boolean
-    multi: PropTypes.bool,
+  required?: boolean
-    required: PropTypes.bool,
+  'aria-label'?: string
-    'aria-label': PropTypes.string,
+};
-  }
 
+type FieldUrlState = {
+  error?: React.ReactNode
+}
+
+export default class FieldUrl extends React.Component<FieldUrlProps, FieldUrlState> {
   static defaultProps = {
     onInput: () => {},
   }
 
-  constructor (props) {
+  constructor (props: FieldUrlProps) {
     super(props);
     this.state = {
       error: validate(props.value)
     };
   }
 
-  onInput = (url) => {
+  onInput = (url: string) => {
     this.setState({
       error: validate(url)
     });
     this.props.onInput(url);
   }
 
-  onChange = (url) => {
+  onChange = (url: string) => {
     this.setState({
       error: validate(url)
     });