this._blockEl = el}>
+
{this._blockEl = el}}>
{this.props.children}
{this.props.fieldSpec &&
diff --git a/src/components/FieldDocLabel.tsx b/src/components/FieldDocLabel.tsx
index e32fc21e..7bd34b58 100644
--- a/src/components/FieldDocLabel.tsx
+++ b/src/components/FieldDocLabel.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { JSX } from 'react'
import {MdInfoOutline, MdHighlightOff} from 'react-icons/md'
type FieldDocLabelProps = {
diff --git a/src/components/IconBackground.tsx b/src/components/IconBackground.tsx
index c822bba1..e0960034 100644
--- a/src/components/IconBackground.tsx
+++ b/src/components/IconBackground.tsx
@@ -1,13 +1,10 @@
-import React from 'react'
-import IconBase from 'react-icon-base'
+import React, { type CSSProperties } from 'react'
+import { BsDiamondFill } from 'react-icons/bs';
-
-export default class IconBackground extends React.Component {
- render() {
- return (
-
-
-
- )
- }
+const IconBackground: React.FC<{style: CSSProperties | undefined}> = (props) => {
+ return (
+
+ )
}
+
+export default IconBackground;
diff --git a/src/components/IconCircle.tsx b/src/components/IconCircle.tsx
index cb7af8f5..302a0450 100644
--- a/src/components/IconCircle.tsx
+++ b/src/components/IconCircle.tsx
@@ -1,13 +1,9 @@
-import React from 'react'
-import IconBase from 'react-icon-base'
+import React, { type CSSProperties } from 'react'
+import {MdOutlineCircle} from 'react-icons/md'
-
-export default class IconCircle extends React.Component {
- render() {
- return (
-
-
-
- )
- }
+const IconCircle: React.FC<{style: CSSProperties | undefined}> = (props) => {
+ return (
+
+ )
}
+export default IconCircle;
diff --git a/src/components/IconFill.tsx b/src/components/IconFill.tsx
index 4aee10d4..b766b95f 100644
--- a/src/components/IconFill.tsx
+++ b/src/components/IconFill.tsx
@@ -1,13 +1,10 @@
-import React from 'react'
-import IconBase from 'react-icon-base'
+import React, { type CSSProperties } from 'react'
+import { BsDiamond } from 'react-icons/bs';
-export default class IconFill extends React.Component {
- render() {
- return (
-
-
-
- )
- }
+const IconFill: React.FC<{style: CSSProperties | undefined}> = (props) => {
+ return (
+
+ )
}
+export default IconFill;
diff --git a/src/components/IconLayer.tsx b/src/components/IconLayer.tsx
index ba0980dc..f8691449 100644
--- a/src/components/IconLayer.tsx
+++ b/src/components/IconLayer.tsx
@@ -6,27 +6,28 @@ import IconSymbol from './IconSymbol'
import IconBackground from './IconBackground'
import IconCircle from './IconCircle'
import IconMissing from './IconMissing'
+import type {CSSProperties} from 'react'
type IconLayerProps = {
type: string
- style?: object
+ style?: CSSProperties
className?: string
};
-export default class IconLayer extends React.Component
{
- render() {
- const iconProps = { style: this.props.style }
- switch(this.props.type) {
- case 'fill-extrusion': return
- case 'raster': return
- case 'hillshade': return
- case 'heatmap': return
- case 'fill': return
- case 'background': return
- case 'line': return
- case 'symbol': return
- case 'circle': return
- default: return
- }
+const IconLayer: React.FC = (props) => {
+ const iconProps = { style: props.style }
+ switch(props.type) {
+ case 'fill-extrusion': return
+ case 'raster': return
+ case 'hillshade': return
+ case 'heatmap': return
+ case 'fill': return
+ case 'background': return
+ case 'line': return
+ case 'symbol': return
+ case 'circle': return
+ default: return
}
}
+
+export default IconLayer;
diff --git a/src/components/IconLine.tsx b/src/components/IconLine.tsx
index 62d1fd8c..0284b674 100644
--- a/src/components/IconLine.tsx
+++ b/src/components/IconLine.tsx
@@ -1,13 +1,11 @@
-import React from 'react'
-import IconBase from 'react-icon-base'
+import React, { type CSSProperties } from 'react'
+import { IoAnalyticsOutline } from 'react-icons/io5';
-export default class IconLine extends React.Component {
- render() {
- return (
-
-
-
- )
- }
+const IconLine: React.FC<{style: CSSProperties | undefined}> = (props) => {
+ return (
+
+ )
}
+
+export default IconLine;
diff --git a/src/components/IconMissing.tsx b/src/components/IconMissing.tsx
index 0ac5f7d7..f119fd7d 100644
--- a/src/components/IconMissing.tsx
+++ b/src/components/IconMissing.tsx
@@ -1,11 +1,9 @@
-import React from 'react'
+import React, { type CSSProperties } from 'react'
import {MdPriorityHigh} from 'react-icons/md'
-
-export default class IconMissing extends React.Component {
- render() {
- return (
-
- )
- }
+const IconMissing: React.FC<{style: CSSProperties | undefined}> = (props) => {
+ return (
+
+ )
}
+export default IconMissing;
diff --git a/src/components/IconSymbol.tsx b/src/components/IconSymbol.tsx
index 8bc3add6..f2f29120 100644
--- a/src/components/IconSymbol.tsx
+++ b/src/components/IconSymbol.tsx
@@ -1,15 +1,10 @@
-import React from 'react'
-import IconBase from 'react-icon-base'
+import React, { type CSSProperties } from 'react'
+import { BsFonts } from 'react-icons/bs';
-export default class IconSymbol extends React.Component {
- render() {
- return (
-
-
-
-
-
- )
- }
+const IconSymbol: React.FC<{style: CSSProperties | undefined}> = (props) => {
+ return (
+
+ )
}
+export default IconSymbol;
diff --git a/src/components/InputColor.tsx b/src/components/InputColor.tsx
index d40284d5..c3e3ab27 100644
--- a/src/components/InputColor.tsx
+++ b/src/components/InputColor.tsx
@@ -122,7 +122,7 @@ export default class InputColor extends React.Component {
spellCheck="false"
autoComplete="off"
className="maputnik-color"
- ref={(input) => this.colorInput = input}
+ ref={(input) => {this.colorInput = input}}
onClick={this.togglePicker}
style={this.props.style}
name={this.props.name}
diff --git a/src/components/InputJson.tsx b/src/components/InputJson.tsx
index 08174cd4..55e9e1e6 100644
--- a/src/components/InputJson.tsx
+++ b/src/components/InputJson.tsx
@@ -173,7 +173,7 @@ class InputJsonInternal extends React.Component
this._el = el}
+ ref={(el) => {this._el = el}}
style={style}
/>
diff --git a/src/components/InputUrl.tsx b/src/components/InputUrl.tsx
index 7353e2e3..af7456ab 100644
--- a/src/components/InputUrl.tsx
+++ b/src/components/InputUrl.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { JSX } from 'react'
import InputString from './InputString'
import SmallError from './SmallError'
import { Trans, WithTranslation, withTranslation } from 'react-i18next';
diff --git a/src/components/LayerList.tsx b/src/components/LayerList.tsx
index dc382526..edc13d80 100644
--- a/src/components/LayerList.tsx
+++ b/src/components/LayerList.tsx
@@ -28,7 +28,7 @@ type LayerListContainerProps = {
layers: LayerSpecification[]
selectedLayerIndex: number
onLayersChange(layers: LayerSpecification[]): unknown
- onLayerSelect(...args: unknown[]): unknown
+ onLayerSelect(index: number): void;
onLayerDestroy?(...args: unknown[]): unknown
onLayerCopy(...args: unknown[]): unknown
onLayerVisibilityToggle(...args: unknown[]): unknown
@@ -50,7 +50,7 @@ class LayerListContainerInternal extends React.Component {},
}
selectedItemRef: React.RefObject;
- scrollContainerRef: React.RefObject;
+ scrollContainerRef: React.RefObject;
constructor(props: LayerListContainerInternalProps) {
super(props);
@@ -276,6 +276,7 @@ class LayerListContainerInternal extends React.Component = (props) => {