ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2026-08-01 10:47:26 +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
cypress/e2e/layers.cy.ts
+2 -1
View File
@@ -606,7 +606,8 @@ describe("layers", () => {
id: "c", id: "c",
type: "background", 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({ then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
layers: [ layers: [
cypress/e2e/maputnik-cypress-helper.ts
+9
View File
@@ -1,4 +1,6 @@
/// <reference types="cypress-real-events" />
import { CypressHelper } from "@shellygo/cypress-test-utils"; import { CypressHelper } from "@shellygo/cypress-test-utils";
import 'cypress-real-events/support';
export default class MaputnikCypressHelper { export default class MaputnikCypressHelper {
private helper = new CypressHelper({ defaultDataAttribute: "data-wd-key" }); private helper = new CypressHelper({ defaultDataAttribute: "data-wd-key" });
@@ -12,6 +14,13 @@ export default class MaputnikCypressHelper {
}; };
public when = { 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, ...this.helper.when,
}; };
package-lock.json
Generated
+25 -108
View File
@@ -46,16 +46,15 @@
"ol-mapbox-style": "^13.1.0", "ol-mapbox-style": "^13.1.0",
"pmtiles": "^4.3.0", "pmtiles": "^4.3.0",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react": "^18.2.0", "react": "^19.1.1",
"react-accessible-accordion": "^5.0.1", "react-accessible-accordion": "^5.0.1",
"react-aria-menubutton": "^7.0.3", "react-aria-menubutton": "^7.0.3",
"react-aria-modal": "^5.0.2", "react-aria-modal": "^5.0.2",
"react-collapse": "^5.1.1", "react-collapse": "^5.1.1",
"react-color": "^2.19.3", "react-color": "^2.19.3",
"react-dom": "^18.2.0", "react-dom": "^19.1.1",
"react-file-reader-input": "^2.0.0", "react-file-reader-input": "^2.0.0",
"react-i18next": "^15.7.3", "react-i18next": "^15.7.3",
"react-icon-base": "^2.1.2",
"react-icons": "^5.5.0", "react-icons": "^5.5.0",
"reconnecting-websocket": "^4.4.0", "reconnecting-websocket": "^4.4.0",
"slugify": "^1.6.6", "slugify": "^1.6.6",
@@ -81,14 +80,13 @@
"@types/lodash.isequal": "^4.5.8", "@types/lodash.isequal": "^4.5.8",
"@types/lodash.throttle": "^4.1.9", "@types/lodash.throttle": "^4.1.9",
"@types/randomcolor": "^0.5.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-menubutton": "^6.2.14",
"@types/react-aria-modal": "^5.0.0", "@types/react-aria-modal": "^5.0.0",
"@types/react-collapse": "^5.0.4", "@types/react-collapse": "^5.0.4",
"@types/react-color": "^3.0.13", "@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-file-reader-input": "^2.0.4",
"@types/react-icon-base": "^2.1.6",
"@types/string-hash": "^1.1.3", "@types/string-hash": "^1.1.3",
"@types/uuid": "^10.0.0", "@types/uuid": "^10.0.0",
"@types/wicg-file-system-access": "^2023.10.6", "@types/wicg-file-system-access": "^2023.10.6",
@@ -2785,56 +2783,6 @@
"cypress": ">=12.17.3" "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": { "node_modules/@simonsmith/cypress-image-snapshot": {
"version": "9.1.0", "version": "9.1.0",
"resolved": "https://registry.npmjs.org/@simonsmith/cypress-image-snapshot/-/cypress-image-snapshot-9.1.0.tgz", "resolved": "https://registry.npmjs.org/@simonsmith/cypress-image-snapshot/-/cypress-image-snapshot-9.1.0.tgz",
@@ -3128,12 +3076,6 @@
"@types/node": "*" "@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": { "node_modules/@types/randomcolor": {
"version": "0.5.9", "version": "0.5.9",
"resolved": "https://registry.npmjs.org/@types/randomcolor/-/randomcolor-0.5.9.tgz", "resolved": "https://registry.npmjs.org/@types/randomcolor/-/randomcolor-0.5.9.tgz",
@@ -3147,13 +3089,12 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/@types/react": { "node_modules/@types/react": {
"version": "18.3.20", "version": "19.1.12",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.20.tgz", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz",
"integrity": "sha512-IPaCZN7PShZK/3t6Q87pfTkRm6oLTd4vztyoj+cbHUF1g3FfVb2tFIL79uCRKEfv16AhqDMBywP2VW3KIZUvcg==", "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@types/prop-types": "*",
"csstype": "^3.0.2" "csstype": "^3.0.2"
} }
}, },
@@ -3200,12 +3141,13 @@
} }
}, },
"node_modules/@types/react-dom": { "node_modules/@types/react-dom": {
"version": "18.2.22", "version": "19.1.9",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.22.tgz", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.9.tgz",
"integrity": "sha512-fHkBXPeNtfvri6gdsMYyW+dW7RXFo6Ad09nLFK0VQWR7yGLai/Cyvyj696gbwYvBnhGtevUG9cET0pmUbMtoPQ==", "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
"dev": true, "dev": true,
"dependencies": { "license": "MIT",
"@types/react": "*" "peerDependencies": {
"@types/react": "^19.0.0"
} }
}, },
"node_modules/@types/react-file-reader-input": { "node_modules/@types/react-file-reader-input": {
@@ -3217,15 +3159,6 @@
"@types/react": "*" "@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": { "node_modules/@types/reactcss": {
"version": "1.2.12", "version": "1.2.12",
"resolved": "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.12.tgz", "resolved": "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.12.tgz",
@@ -10716,13 +10649,10 @@
} }
}, },
"node_modules/react": { "node_modules/react": {
"version": "18.3.1", "version": "19.1.1",
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
"integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
"license": "MIT", "license": "MIT",
"dependencies": {
"loose-envify": "^1.1.0"
},
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
} }
@@ -10789,16 +10719,15 @@
} }
}, },
"node_modules/react-dom": { "node_modules/react-dom": {
"version": "18.3.1", "version": "19.1.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
"integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"loose-envify": "^1.1.0", "scheduler": "^0.26.0"
"scheduler": "^0.23.2"
}, },
"peerDependencies": { "peerDependencies": {
"react": "^18.3.1" "react": "^19.1.1"
} }
}, },
"node_modules/react-file-reader-input": { "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": { "node_modules/react-icons": {
"version": "5.5.0", "version": "5.5.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
@@ -11440,13 +11360,10 @@
} }
}, },
"node_modules/scheduler": { "node_modules/scheduler": {
"version": "0.23.2", "version": "0.26.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
"integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
"license": "MIT", "license": "MIT"
"dependencies": {
"loose-envify": "^1.1.0"
}
}, },
"node_modules/semver": { "node_modules/semver": {
"version": "7.7.1", "version": "7.7.1",
package.json
+4 -6
View File
@@ -61,16 +61,15 @@
"ol-mapbox-style": "^13.1.0", "ol-mapbox-style": "^13.1.0",
"pmtiles": "^4.3.0", "pmtiles": "^4.3.0",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react": "^18.2.0", "react": "^19.1.1",
"react-accessible-accordion": "^5.0.1", "react-accessible-accordion": "^5.0.1",
"react-aria-menubutton": "^7.0.3", "react-aria-menubutton": "^7.0.3",
"react-aria-modal": "^5.0.2", "react-aria-modal": "^5.0.2",
"react-collapse": "^5.1.1", "react-collapse": "^5.1.1",
"react-color": "^2.19.3", "react-color": "^2.19.3",
"react-dom": "^18.2.0", "react-dom": "^19.1.1",
"react-file-reader-input": "^2.0.0", "react-file-reader-input": "^2.0.0",
"react-i18next": "^15.7.3", "react-i18next": "^15.7.3",
"react-icon-base": "^2.1.2",
"react-icons": "^5.5.0", "react-icons": "^5.5.0",
"reconnecting-websocket": "^4.4.0", "reconnecting-websocket": "^4.4.0",
"slugify": "^1.6.6", "slugify": "^1.6.6",
@@ -113,14 +112,13 @@
"@types/lodash.isequal": "^4.5.8", "@types/lodash.isequal": "^4.5.8",
"@types/lodash.throttle": "^4.1.9", "@types/lodash.throttle": "^4.1.9",
"@types/randomcolor": "^0.5.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-menubutton": "^6.2.14",
"@types/react-aria-modal": "^5.0.0", "@types/react-aria-modal": "^5.0.0",
"@types/react-collapse": "^5.0.4", "@types/react-collapse": "^5.0.4",
"@types/react-color": "^3.0.13", "@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-file-reader-input": "^2.0.4",
"@types/react-icon-base": "^2.1.6",
"@types/string-hash": "^1.1.3", "@types/string-hash": "^1.1.3",
"@types/uuid": "^10.0.0", "@types/uuid": "^10.0.0",
"@types/wicg-file-system-access": "^2023.10.6", "@types/wicg-file-system-access": "^2023.10.6",
src/components/App.tsx
+1 -1
View File
@@ -696,7 +696,7 @@ export default class App extends React.Component<any, AppState> {
{...mapProps} {...mapProps}
onChange={this.onMapChange} onChange={this.onMapChange}
debugToolbox={this.state.openlayersDebugOptions.debugToolbox} debugToolbox={this.state.openlayersDebugOptions.debugToolbox}
onLayerSelect={this.onLayerSelect} onLayerSelect={(layerId) => this.onLayerSelect(+layerId)}
/> />
} else { } else {
src/components/AppMessagePanel.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ type AppMessagePanelInternalProps = {
errors?: unknown[] errors?: unknown[]
infos?: string[] infos?: string[]
mapStyle?: StyleSpecification mapStyle?: StyleSpecification
onLayerSelect?(...args: unknown[]): unknown onLayerSelect?(index: number): void;
currentLayer?: LayerSpecification currentLayer?: LayerSpecification
selectedLayerIndex?: number selectedLayerIndex?: number
} & WithTranslation; } & WithTranslation;
src/components/Block.tsx
+1 -1
View File
@@ -88,7 +88,7 @@ export default class Block extends React.Component<BlockProps, BlockState> {
<div className="maputnik-input-block-action"> <div className="maputnik-input-block-action">
{this.props.action} {this.props.action}
</div> </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} {this.props.children}
</div> </div>
{this.props.fieldSpec && {this.props.fieldSpec &&
src/components/FieldDocLabel.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import React from 'react' import React, { JSX } from 'react'
import {MdInfoOutline, MdHighlightOff} from 'react-icons/md' import {MdInfoOutline, MdHighlightOff} from 'react-icons/md'
type FieldDocLabelProps = { type FieldDocLabelProps = {
src/components/IconBackground.tsx
+8 -11
View File
@@ -1,13 +1,10 @@
import React from 'react' import React, { type CSSProperties } from 'react'
import IconBase from 'react-icon-base' import { BsDiamondFill } from 'react-icons/bs';
const IconBackground: React.FC<{style: CSSProperties | undefined}> = (props) => {
export default class IconBackground extends React.Component { return (
render() { <BsDiamondFill {...props} />
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>
)
}
} }
export default IconBackground;
src/components/IconCircle.tsx
+7 -11
View File
@@ -1,13 +1,9 @@
import React from 'react' import React, { type CSSProperties } from 'react'
import IconBase from 'react-icon-base' import {MdOutlineCircle} from 'react-icons/md'
const IconCircle: React.FC<{style: CSSProperties | undefined}> = (props) => {
export default class IconCircle extends React.Component { return (
render() { <MdOutlineCircle {...props} />
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>
)
}
} }
export default IconCircle;
src/components/IconFill.tsx
+7 -10
View File
@@ -1,13 +1,10 @@
import React from 'react' import React, { type CSSProperties } from 'react'
import IconBase from 'react-icon-base' import { BsDiamond } from 'react-icons/bs';
export default class IconFill extends React.Component { const IconFill: React.FC<{style: CSSProperties | undefined}> = (props) => {
render() { return (
return ( <BsDiamond {...props} />
<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>
)
}
} }
export default IconFill;
src/components/IconLayer.tsx
+17 -16
View File
@@ -6,27 +6,28 @@ import IconSymbol from './IconSymbol'
import IconBackground from './IconBackground' import IconBackground from './IconBackground'
import IconCircle from './IconCircle' import IconCircle from './IconCircle'
import IconMissing from './IconMissing' import IconMissing from './IconMissing'
import type {CSSProperties} from 'react'
type IconLayerProps = { type IconLayerProps = {
type: string type: string
style?: object style?: CSSProperties
className?: string className?: string
}; };
export default class IconLayer extends React.Component<IconLayerProps> { const IconLayer: React.FC<IconLayerProps> = (props) => {
render() { const iconProps = { style: props.style }
const iconProps = { style: this.props.style } switch(props.type) {
switch(this.props.type) { case 'fill-extrusion': return <IconBackground {...iconProps} />
case 'fill-extrusion': return <IconBackground {...iconProps} /> case 'raster': return <IconFill {...iconProps} />
case 'raster': return <IconFill {...iconProps} /> case 'hillshade': return <IconFill {...iconProps} />
case 'hillshade': return <IconFill {...iconProps} /> case 'heatmap': return <IconFill {...iconProps} />
case 'heatmap': return <IconFill {...iconProps} /> case 'fill': return <IconFill {...iconProps} />
case 'fill': return <IconFill {...iconProps} /> case 'background': return <IconBackground {...iconProps} />
case 'background': return <IconBackground {...iconProps} /> case 'line': return <IconLine {...iconProps} />
case 'line': return <IconLine {...iconProps} /> case 'symbol': return <IconSymbol {...iconProps} />
case 'symbol': return <IconSymbol {...iconProps} /> case 'circle': return <IconCircle {...iconProps} />
case 'circle': return <IconCircle {...iconProps} /> default: return <IconMissing {...iconProps} />
default: return <IconMissing {...iconProps} />
}
} }
} }
export default IconLayer;
src/components/IconLine.tsx
+8 -10
View File
@@ -1,13 +1,11 @@
import React from 'react' import React, { type CSSProperties } from 'react'
import IconBase from 'react-icon-base' import { IoAnalyticsOutline } from 'react-icons/io5';
export default class IconLine extends React.Component { const IconLine: React.FC<{style: CSSProperties | undefined}> = (props) => {
render() { return (
return ( <IoAnalyticsOutline {...props} />
<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>
)
}
} }
export default IconLine;
src/components/IconMissing.tsx
+6 -8
View File
@@ -1,11 +1,9 @@
import React from 'react' import React, { type CSSProperties } from 'react'
import {MdPriorityHigh} from 'react-icons/md' import {MdPriorityHigh} from 'react-icons/md'
const IconMissing: React.FC<{style: CSSProperties | undefined}> = (props) => {
export default class IconMissing extends React.Component { return (
render() { <MdPriorityHigh {...props} />
return ( )
<MdPriorityHigh {...this.props} />
)
}
} }
export default IconMissing;
src/components/IconSymbol.tsx
+7 -12
View File
@@ -1,15 +1,10 @@
import React from 'react' import React, { type CSSProperties } from 'react'
import IconBase from 'react-icon-base' import { BsFonts } from 'react-icons/bs';
export default class IconSymbol extends React.Component { const IconSymbol: React.FC<{style: CSSProperties | undefined}> = (props) => {
render() { return (
return ( <BsFonts {...props} />
<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>
)
}
} }
export default IconSymbol;
src/components/InputColor.tsx
+1 -1
View File
@@ -122,7 +122,7 @@ export default class InputColor extends React.Component<InputColorProps> {
spellCheck="false" spellCheck="false"
autoComplete="off" autoComplete="off"
className="maputnik-color" className="maputnik-color"
ref={(input) => this.colorInput = input} ref={(input) => {this.colorInput = input}}
onClick={this.togglePicker} onClick={this.togglePicker}
style={this.props.style} style={this.props.style}
name={this.props.name} name={this.props.name}
src/components/InputJson.tsx
+1 -1
View File
@@ -173,7 +173,7 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
</div> </div>
<div <div
className={classnames("codemirror-container", this.props.className)} className={classnames("codemirror-container", this.props.className)}
ref={(el) => this._el = el} ref={(el) => {this._el = el}}
style={style} style={style}
/> />
</div> </div>
src/components/InputUrl.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import React from 'react' import React, { JSX } from 'react'
import InputString from './InputString' import InputString from './InputString'
import SmallError from './SmallError' import SmallError from './SmallError'
import { Trans, WithTranslation, withTranslation } from 'react-i18next'; import { Trans, WithTranslation, withTranslation } from 'react-i18next';
src/components/LayerList.tsx
+3 -2
View File
@@ -28,7 +28,7 @@ type LayerListContainerProps = {
layers: LayerSpecification[] layers: LayerSpecification[]
selectedLayerIndex: number selectedLayerIndex: number
onLayersChange(layers: LayerSpecification[]): unknown onLayersChange(layers: LayerSpecification[]): unknown
onLayerSelect(...args: unknown[]): unknown onLayerSelect(index: number): void;
onLayerDestroy?(...args: unknown[]): unknown onLayerDestroy?(...args: unknown[]): unknown
onLayerCopy(...args: unknown[]): unknown onLayerCopy(...args: unknown[]): unknown
onLayerVisibilityToggle(...args: unknown[]): unknown onLayerVisibilityToggle(...args: unknown[]): unknown
@@ -50,7 +50,7 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
onLayerSelect: () => {}, onLayerSelect: () => {},
} }
selectedItemRef: React.RefObject<any>; selectedItemRef: React.RefObject<any>;
scrollContainerRef: React.RefObject<HTMLElement>; scrollContainerRef: React.RefObject<HTMLElement | null>;
constructor(props: LayerListContainerInternalProps) { constructor(props: LayerListContainerInternalProps) {
super(props); super(props);
@@ -276,6 +276,7 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
return <section return <section
className="maputnik-layer-list" className="maputnik-layer-list"
data-wd-key="layer-list"
role="complementary" role="complementary"
aria-label={t("Layers list")} aria-label={t("Layers list")}
ref={this.scrollContainerRef} ref={this.scrollContainerRef}
src/components/LayerListItem.tsx
+2 -1
View File
@@ -21,6 +21,7 @@ const DraggableLabel: React.FC<DraggableLabelProps> = (props) => {
<IconLayer <IconLayer
className="layer-handle__icon" className="layer-handle__icon"
type={props.layerType} type={props.layerType}
style={{ width: '1em', height: '1em', verticalAlign: 'middle' }}
/> />
<button className="maputnik-layer-list-item-id"> <button className="maputnik-layer-list-item-id">
{props.layerId} {props.layerId}
@@ -79,7 +80,7 @@ type LayerListItemProps = {
isSelected?: boolean isSelected?: boolean
visibility?: string visibility?: string
className?: string className?: string
onLayerSelect(...args: unknown[]): unknown onLayerSelect(index: number): void;
onLayerCopy?(...args: unknown[]): unknown onLayerCopy?(...args: unknown[]): unknown
onLayerDestroy?(...args: unknown[]): unknown onLayerDestroy?(...args: unknown[]): unknown
onLayerVisibilityToggle?(...args: unknown[]): unknown onLayerVisibilityToggle?(...args: unknown[]): unknown
src/components/MapMaplibreGl.tsx
+2 -2
View File
@@ -61,7 +61,7 @@ function buildInspectStyle(originalMapStyle: StyleSpecification, coloredLayers:
type MapMaplibreGlInternalProps = { type MapMaplibreGlInternalProps = {
onDataChange?(event: {map: Map | null}): unknown onDataChange?(event: {map: Map | null}): unknown
onLayerSelect(...args: unknown[]): unknown onLayerSelect(index: number): void
mapStyle: StyleSpecification mapStyle: StyleSpecification
inspectModeEnabled: boolean inspectModeEnabled: boolean
highlightedLayer?: HighlightedLayer highlightedLayer?: HighlightedLayer
@@ -306,7 +306,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
className="maputnik-map__map" className="maputnik-map__map"
role="region" role="region"
aria-label={t("Map view")} aria-label={t("Map view")}
ref={x => this.container = x} ref={x => {this.container = x}}
data-wd-key="maplibre:map" data-wd-key="maplibre:map"
></div> ></div>
} }
src/components/MapOpenLayers.tsx
+3 -3
View File
@@ -29,7 +29,7 @@ type MapOpenLayersInternalProps = {
mapStyle: object mapStyle: object
accessToken?: string accessToken?: string
style?: object style?: object
onLayerSelect(...args: unknown[]): unknown onLayerSelect(layerId: string): void
debugToolbox: boolean debugToolbox: boolean
replaceAccessTokens(...args: unknown[]): unknown replaceAccessTokens(...args: unknown[]): unknown
onChange(...args: unknown[]): unknown onChange(...args: unknown[]): unknown
@@ -156,7 +156,7 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
const t = this.props.t; const t = this.props.t;
return <div className="maputnik-ol-container"> return <div className="maputnik-ol-container">
<div <div
ref={x => this.popupContainer = x} ref={x => {this.popupContainer = x}}
style={{background: "black"}} style={{background: "black"}}
className="maputnik-popup" className="maputnik-popup"
> >
@@ -193,7 +193,7 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
} }
<div <div
className="maputnik-ol" className="maputnik-ol"
ref={x => this.container = x} ref={x => {this.container = x}}
role="region" role="region"
aria-label={t("Map view")} aria-label={t("Map view")}
style={{ style={{