ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2026-01-20 12:20:03 +00:00
Code Issues Projects Releases Wiki Activity

Update React to 19 (#1360)

Browse Source 
## Launch Checklist

This updates React to 19.
It removes the unmaintained `react-icon-base` package and uses icons
from the existing one (also removes the svgs).
It also updates the other packages so that everything should be up to
date.

 - [x] Briefly describe the changes in this PR.

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
This commit is contained in:
Harel M
2025-09-10 01:52:52 +03:00
committed by GitHub
parent 7bfc3188f7
commit 3725f83b48
22 changed files with 117 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
cypress/e2e/layers.cy.ts
View File

@@ -606,7 +606,8 @@ describe("layers", () => {
id: "c",
type: "background",
});
when.dragAndDrop(get.elementByTestId("layer-list-item:" + firstId), get.elementByTestId("layer-list-item:" + thirdId));
when.dragAndDropWithWait("layer-list-item:" + firstId, "layer-list-item:" + thirdId);
then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [

9
cypress/e2e/maputnik-cypress-helper.ts
View File

@@ -1,4 +1,6 @@
/// <reference types="cypress-real-events" />
import { CypressHelper } from "@shellygo/cypress-test-utils";
import 'cypress-real-events/support';
export default class MaputnikCypressHelper {
private helper = new CypressHelper({ defaultDataAttribute: "data-wd-key" });
@@ -12,6 +14,13 @@ export default class MaputnikCypressHelper {
};
public when = {
dragAndDropWithWait: (element: string, targetElement: string) => {
this.helper.get.elementByTestId(element).realMouseDown({ button: "left", position: "center" });
this.helper.get.elementByTestId(element).realMouseMove(0, 10, { position: "center" });
this.helper.get.elementByTestId(targetElement).realMouseMove(0, 0, { position: "center" })
this.helper.when.wait(1);
this.helper.get.elementByTestId(targetElement).realMouseUp();
},
...this.helper.when,
};

133
package-lock.json generated
View File

@@ -46,16 +46,15 @@
"ol-mapbox-style": "^13.1.0",
"pmtiles": "^4.3.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react": "^19.1.1",
"react-accessible-accordion": "^5.0.1",
"react-aria-menubutton": "^7.0.3",
"react-aria-modal": "^5.0.2",
"react-collapse": "^5.1.1",
"react-color": "^2.19.3",
"react-dom": "^18.2.0",
"react-dom": "^19.1.1",
"react-file-reader-input": "^2.0.0",
"react-i18next": "^15.7.3",
"react-icon-base": "^2.1.2",
"react-icons": "^5.5.0",
"reconnecting-websocket": "^4.4.0",
"slugify": "^1.6.6",
@@ -81,14 +80,13 @@
"@types/lodash.isequal": "^4.5.8",
"@types/lodash.throttle": "^4.1.9",
"@types/randomcolor": "^0.5.9",
"@types/react": "^18.2.67",
"@types/react": "^19.1.12",
"@types/react-aria-menubutton": "^6.2.14",
"@types/react-aria-modal": "^5.0.0",
"@types/react-collapse": "^5.0.4",
"@types/react-color": "^3.0.13",
"@types/react-dom": "^18.2.22",
"@types/react-dom": "^19.1.9",
"@types/react-file-reader-input": "^2.0.4",
"@types/react-icon-base": "^2.1.6",
"@types/string-hash": "^1.1.3",
"@types/uuid": "^10.0.0",
"@types/wicg-file-system-access": "^2023.10.6",
@@ -2785,56 +2783,6 @@
"cypress": ">=12.17.3"
}
},
"node_modules/@shellygo/cypress-test-utils/node_modules/@types/react": {
"version": "19.1.8",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
"integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
"dev": true,
"license": "MIT",
"dependencies": {
"csstype": "^3.0.2"
}
},
"node_modules/@shellygo/cypress-test-utils/node_modules/@types/react-dom": {
"version": "19.1.9",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.9.tgz",
"integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
"dev": true,
"license": "MIT",
"peerDependencies": {
"@types/react": "^19.0.0"
}
},
"node_modules/@shellygo/cypress-test-utils/node_modules/react": {
"version": "19.1.0",
"resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
"integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/@shellygo/cypress-test-utils/node_modules/react-dom": {
"version": "19.1.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
"integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
"dev": true,
"license": "MIT",
"dependencies": {
"scheduler": "^0.26.0"
},
"peerDependencies": {
"react": "^19.1.0"
}
},
"node_modules/@shellygo/cypress-test-utils/node_modules/scheduler": {
"version": "0.26.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
"integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
"dev": true,
"license": "MIT"
},
"node_modules/@simonsmith/cypress-image-snapshot": {
"version": "9.1.0",
"resolved": "https://registry.npmjs.org/@simonsmith/cypress-image-snapshot/-/cypress-image-snapshot-9.1.0.tgz",
@@ -3128,12 +3076,6 @@
"@types/node": "*"
}
},
"node_modules/@types/prop-types": {
"version": "15.7.11",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
"integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
"dev": true
},
"node_modules/@types/randomcolor": {
"version": "0.5.9",
"resolved": "https://registry.npmjs.org/@types/randomcolor/-/randomcolor-0.5.9.tgz",
@@ -3147,13 +3089,12 @@
"license": "MIT"
},
"node_modules/@types/react": {
"version": "18.3.20",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.20.tgz",
"integrity": "sha512-IPaCZN7PShZK/3t6Q87pfTkRm6oLTd4vztyoj+cbHUF1g3FfVb2tFIL79uCRKEfv16AhqDMBywP2VW3KIZUvcg==",
"version": "19.1.12",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz",
"integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/prop-types": "*",
"csstype": "^3.0.2"
}
},
@@ -3200,12 +3141,13 @@
}
},
"node_modules/@types/react-dom": {
"version": "18.2.22",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.22.tgz",
"integrity": "sha512-fHkBXPeNtfvri6gdsMYyW+dW7RXFo6Ad09nLFK0VQWR7yGLai/Cyvyj696gbwYvBnhGtevUG9cET0pmUbMtoPQ==",
"version": "19.1.9",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.9.tgz",
"integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
"dev": true,
"dependencies": {
"@types/react": "*"
"license": "MIT",
"peerDependencies": {
"@types/react": "^19.0.0"
}
},
"node_modules/@types/react-file-reader-input": {
@@ -3217,15 +3159,6 @@
"@types/react": "*"
}
},
"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/reactcss": {
"version": "1.2.12",
"resolved": "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.12.tgz",
@@ -10716,13 +10649,10 @@
}
},
"node_modules/react": {
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
"integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
"version": "19.1.1",
"resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
"integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
"license": "MIT",
"dependencies": {
"loose-envify": "^1.1.0"
},
"engines": {
"node": ">=0.10.0"
}
@@ -10789,16 +10719,15 @@
}
},
"node_modules/react-dom": {
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
"integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
"version": "19.1.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
"integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
"license": "MIT",
"dependencies": {
"loose-envify": "^1.1.0",
"scheduler": "^0.23.2"
"scheduler": "^0.26.0"
},
"peerDependencies": {
"react": "^18.3.1"
"react": "^19.1.1"
}
},
"node_modules/react-file-reader-input": {
@@ -10874,15 +10803,6 @@
}
}
},
"node_modules/react-icon-base": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/react-icon-base/-/react-icon-base-2.1.2.tgz",
"integrity": "sha512-NRlRo0RPxWRMQT7osj8UCBSSXsGOxhF1pre84ildhuft5S2U382NOs7tg29osWSjbO90L2a3VTCqadA/LnAzHQ==",
"peerDependencies": {
"prop-types": "*",
"react": "*"
}
},
"node_modules/react-icons": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
@@ -11440,13 +11360,10 @@
}
},
"node_modules/scheduler": {
"version": "0.23.2",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
"integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
"license": "MIT",
"dependencies": {
"loose-envify": "^1.1.0"
}
"version": "0.26.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
"integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
"license": "MIT"
},
"node_modules/semver": {
"version": "7.7.1",

10
package.json
View File

@@ -61,16 +61,15 @@
"ol-mapbox-style": "^13.1.0",
"pmtiles": "^4.3.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react": "^19.1.1",
"react-accessible-accordion": "^5.0.1",
"react-aria-menubutton": "^7.0.3",
"react-aria-modal": "^5.0.2",
"react-collapse": "^5.1.1",
"react-color": "^2.19.3",
"react-dom": "^18.2.0",
"react-dom": "^19.1.1",
"react-file-reader-input": "^2.0.0",
"react-i18next": "^15.7.3",
"react-icon-base": "^2.1.2",
"react-icons": "^5.5.0",
"reconnecting-websocket": "^4.4.0",
"slugify": "^1.6.6",
@@ -113,14 +112,13 @@
"@types/lodash.isequal": "^4.5.8",
"@types/lodash.throttle": "^4.1.9",
"@types/randomcolor": "^0.5.9",
"@types/react": "^18.2.67",
"@types/react": "^19.1.12",
"@types/react-aria-menubutton": "^6.2.14",
"@types/react-aria-modal": "^5.0.0",
"@types/react-collapse": "^5.0.4",
"@types/react-color": "^3.0.13",
"@types/react-dom": "^18.2.22",
"@types/react-dom": "^19.1.9",
"@types/react-file-reader-input": "^2.0.4",
"@types/react-icon-base": "^2.1.6",
"@types/string-hash": "^1.1.3",
"@types/uuid": "^10.0.0",
"@types/wicg-file-system-access": "^2023.10.6",

2
src/components/App.tsx
View File

@@ -696,7 +696,7 @@ export default class App extends React.Component<any, AppState> {
{...mapProps}
onChange={this.onMapChange}
debugToolbox={this.state.openlayersDebugOptions.debugToolbox}
onLayerSelect={this.onLayerSelect}
onLayerSelect={(layerId) => this.onLayerSelect(+layerId)}
/>
} else {

2
src/components/AppMessagePanel.tsx
View File

@@ -7,7 +7,7 @@ type AppMessagePanelInternalProps = {
errors?: unknown[]
infos?: string[]
mapStyle?: StyleSpecification
onLayerSelect?(...args: unknown[]): unknown
onLayerSelect?(index: number): void;
currentLayer?: LayerSpecification
selectedLayerIndex?: number
} & WithTranslation;

2
src/components/Block.tsx
View File

@@ -88,7 +88,7 @@ export default class Block extends React.Component<BlockProps, BlockState> {
<div className="maputnik-input-block-action">
{this.props.action}
</div>
<div className="maputnik-input-block-content" ref={el => this._blockEl = el}>
<div className="maputnik-input-block-content" ref={el => {this._blockEl = el}}>
{this.props.children}
</div>
{this.props.fieldSpec &&

2
src/components/FieldDocLabel.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react'
import React, { JSX } from 'react'
import {MdInfoOutline, MdHighlightOff} from 'react-icons/md'
type FieldDocLabelProps = {

19
src/components/IconBackground.tsx
View File

@@ -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 (
<IconBase viewBox="0 0 20 20" {...this.props}>
<path d="m 1.821019,10.255581 7.414535,5.020197 c 0.372277,0.25206 0.958697,0.239771 1.30985,-0.02745 L 17.539255,9.926162 C 17.89041,9.658941 17.873288,9.238006 17.501015,8.985946 L 10.08648,3.9657402 C 9.714204,3.7136802 9.127782,3.7259703 8.776627,3.9931918 L 1.782775,9.315365 c -0.3511551,0.267221 -0.3340331,0.688156 0.03824,0.940216 z" />
</IconBase>
)
}
const IconBackground: React.FC<{style: CSSProperties | undefined}> = (props) => {
return (
<BsDiamondFill {...props} />
)
}
export default IconBackground;

18
src/components/IconCircle.tsx
View File

@@ -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 (
<IconBase viewBox="0 0 20 20" {...this.props}>
<path transform="translate(2 2)" d="M7.5,0C11.6422,0,15,3.3578,15,7.5S11.6422,15,7.5,15 S0,11.6422,0,7.5S3.3578,0,7.5,0z M7.5,1.6666c-3.2217,0-5.8333,2.6117-5.8333,5.8334S4.2783,13.3334,7.5,13.3334 s5.8333-2.6117,5.8333-5.8334S10.7217,1.6666,7.5,1.6666z"></path>
</IconBase>
)
}
const IconCircle: React.FC<{style: CSSProperties | undefined}> = (props) => {
return (
<MdOutlineCircle {...props} />
)
}
export default IconCircle;

17
src/components/IconFill.tsx
View File

@@ -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 (
<IconBase viewBox="0 0 20 20" {...this.props}>
<path d="M 2.84978,9.763512 9.462149,4.7316391 16.47225,9.478015 9.859886,14.509879 2.84978,9.763512 m -1.028761,0.492069 7.414535,5.020197 c 0.372277,0.25206 0.958697,0.239771 1.30985,-0.02745 L 17.539255,9.926162 C 17.89041,9.658941 17.873288,9.238006 17.501015,8.985946 L 10.08648,3.9657402 C 9.714204,3.7136802 9.127782,3.7259703 8.776627,3.9931918 L 1.782775,9.315365 c -0.3511551,0.267221 -0.3340331,0.688156 0.03824,0.940216 l 0,0 z" />
</IconBase>
)
}
const IconFill: React.FC<{style: CSSProperties | undefined}> = (props) => {
return (
<BsDiamond {...props} />
)
}
export default IconFill;

33
src/components/IconLayer.tsx
View File

@@ -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<IconLayerProps> {
render() {
const iconProps = { style: this.props.style }
switch(this.props.type) {
case 'fill-extrusion': return <IconBackground {...iconProps} />
case 'raster': return <IconFill {...iconProps} />
case 'hillshade': return <IconFill {...iconProps} />
case 'heatmap': return <IconFill {...iconProps} />
case 'fill': return <IconFill {...iconProps} />
case 'background': return <IconBackground {...iconProps} />
case 'line': return <IconLine {...iconProps} />
case 'symbol': return <IconSymbol {...iconProps} />
case 'circle': return <IconCircle {...iconProps} />
default: return <IconMissing {...iconProps} />
}
const IconLayer: React.FC<IconLayerProps> = (props) => {
const iconProps = { style: props.style }
switch(props.type) {
case 'fill-extrusion': return <IconBackground {...iconProps} />
case 'raster': return <IconFill {...iconProps} />
case 'hillshade': return <IconFill {...iconProps} />
case 'heatmap': return <IconFill {...iconProps} />
case 'fill': return <IconFill {...iconProps} />
case 'background': return <IconBackground {...iconProps} />
case 'line': return <IconLine {...iconProps} />
case 'symbol': return <IconSymbol {...iconProps} />
case 'circle': return <IconCircle {...iconProps} />
default: return <IconMissing {...iconProps} />
}
}
export default IconLayer;

18
src/components/IconLine.tsx
View File

@@ -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 (
<IconBase viewBox="0 0 20 20" {...this.props}>
<path d="M 12.34,1.29 C 12.5114,1.1076 12.7497,1.0029 13,1 13.5523,1 14,1.4477 14,2 14.0047,2.2478 13.907,2.4866 13.73,2.66 9.785626,6.5516986 6.6148407,9.7551593 2.65,13.72 2.4793,13.8963 2.2453,13.9971 2,14 1.4477,14 1,13.5523 1,13 0.9953,12.7522 1.093,12.5134 1.27,12.34 4.9761967,8.7018093 9.0356422,4.5930579 12.34,1.29 Z" transform="translate(2,2)" />
</IconBase>
)
}
const IconLine: React.FC<{style: CSSProperties | undefined}> = (props) => {
return (
<IoAnalyticsOutline {...props} />
)
}
export default IconLine;

14
src/components/IconMissing.tsx
View File

@@ -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 (
<MdPriorityHigh {...this.props} />
)
}
const IconMissing: React.FC<{style: CSSProperties | undefined}> = (props) => {
return (
<MdPriorityHigh {...props} />
)
}
export default IconMissing;

19
src/components/IconSymbol.tsx
View File

@@ -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 (
<IconBase viewBox="0 0 20 20" {...this.props}>
<g transform="matrix(1.2718518,0,0,1.2601269,16.559526,-7.4065264)">
<path d="m -9.7959773,11.060163 c -0.3734787,-0.724437 -0.3580577,-1.2147051 -0.00547,-1.8767873 l 8.6034029,-0.019416 c 0.39670292,0.6865644 0.38365934,1.4750693 -0.011097,1.8864953 l -3.1359613,-0.0033 -0.013695,7.1305 c -0.4055357,0.397083 -1.3146432,0.397083 -1.7769191,-0.02274 l 0.030226,-7.104422 z" />
</g>
</IconBase>
)
}
const IconSymbol: React.FC<{style: CSSProperties | undefined}> = (props) => {
return (
<BsFonts {...props} />
)
}
export default IconSymbol;

2
src/components/InputColor.tsx
View File

@@ -122,7 +122,7 @@ export default class InputColor extends React.Component<InputColorProps> {
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}

2
src/components/InputJson.tsx
View File

@@ -173,7 +173,7 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
</div>
<div
className={classnames("codemirror-container", this.props.className)}
ref={(el) => this._el = el}
ref={(el) => {this._el = el}}
style={style}
/>
</div>

2
src/components/InputUrl.tsx
View File

@@ -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';

5
src/components/LayerList.tsx
View File

@@ -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<LayerListContainerInter
onLayerSelect: () => {},
}
selectedItemRef: React.RefObject<any>;
scrollContainerRef: React.RefObject<HTMLElement>;
scrollContainerRef: React.RefObject<HTMLElement | null>;
constructor(props: LayerListContainerInternalProps) {
super(props);
@@ -276,6 +276,7 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
return <section
className="maputnik-layer-list"
data-wd-key="layer-list"
role="complementary"
aria-label={t("Layers list")}
ref={this.scrollContainerRef}

3
src/components/LayerListItem.tsx
View File

@@ -21,6 +21,7 @@ const DraggableLabel: React.FC<DraggableLabelProps> = (props) => {
<IconLayer
className="layer-handle__icon"
type={props.layerType}
style={{ width: '1em', height: '1em', verticalAlign: 'middle' }}
/>
<button className="maputnik-layer-list-item-id">
{props.layerId}
@@ -79,7 +80,7 @@ type LayerListItemProps = {
isSelected?: boolean
visibility?: string
className?: string
onLayerSelect(...args: unknown[]): unknown
onLayerSelect(index: number): void;
onLayerCopy?(...args: unknown[]): unknown
onLayerDestroy?(...args: unknown[]): unknown
onLayerVisibilityToggle?(...args: unknown[]): unknown

4
src/components/MapMaplibreGl.tsx
View File

@@ -61,7 +61,7 @@ function buildInspectStyle(originalMapStyle: StyleSpecification, coloredLayers:
type MapMaplibreGlInternalProps = {
onDataChange?(event: {map: Map | null}): unknown
onLayerSelect(...args: unknown[]): unknown
onLayerSelect(index: number): void
mapStyle: StyleSpecification
inspectModeEnabled: boolean
highlightedLayer?: HighlightedLayer
@@ -306,7 +306,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
className="maputnik-map__map"
role="region"
aria-label={t("Map view")}
ref={x => this.container = x}
ref={x => {this.container = x}}
data-wd-key="maplibre:map"
></div>
}

6
src/components/MapOpenLayers.tsx
View File

@@ -29,7 +29,7 @@ type MapOpenLayersInternalProps = {
mapStyle: object
accessToken?: string
style?: object
onLayerSelect(...args: unknown[]): unknown
onLayerSelect(layerId: string): void
debugToolbox: boolean
replaceAccessTokens(...args: unknown[]): unknown
onChange(...args: unknown[]): unknown
@@ -156,7 +156,7 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
const t = this.props.t;
return <div className="maputnik-ol-container">
<div
ref={x => this.popupContainer = x}
ref={x => {this.popupContainer = x}}
style={{background: "black"}}
className="maputnik-popup"
>
@@ -193,7 +193,7 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
}
<div
className="maputnik-ol"
ref={x => this.container = x}
ref={x => {this.container = x}}
role="region"
aria-label={t("Map view")}
style={{