Fix console errors

This commit is contained in:
HarelM
2024-03-13 17:34:57 +02:00
parent b9102148d0
commit f2ce223802
3 changed files with 16 additions and 14 deletions
+4 -4
View File
@@ -11,7 +11,7 @@
"dependencies": { "dependencies": {
"@mapbox/mapbox-gl-rtl-text": "^0.2.3", "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
"@maplibre/maplibre-gl-geocoder": "^1.5.0", "@maplibre/maplibre-gl-geocoder": "^1.5.0",
"@maplibre/maplibre-gl-inspect": "^1.6.0", "@maplibre/maplibre-gl-inspect": "^1.6.1",
"@maplibre/maplibre-gl-style-spec": "^20.1.0", "@maplibre/maplibre-gl-style-spec": "^20.1.0",
"@mdi/js": "^6.6.96", "@mdi/js": "^6.6.96",
"@mdi/react": "^1.5.0", "@mdi/react": "^1.5.0",
@@ -2592,9 +2592,9 @@
} }
}, },
"node_modules/@maplibre/maplibre-gl-inspect": { "node_modules/@maplibre/maplibre-gl-inspect": {
"version": "1.6.0", "version": "1.6.1",
"resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-inspect/-/maplibre-gl-inspect-1.6.0.tgz", "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-inspect/-/maplibre-gl-inspect-1.6.1.tgz",
"integrity": "sha512-RKxj/GIHQP7qz4ptuyqsAq7SI57wuougE75Sk1DO7drBKSKuayzjPwZSWzqYFceIEQOGR2kUCECnAjUqTkQtoA==", "integrity": "sha512-PDzeNTIAXqsHDiBk8pmwUfTMvk+QRmaNfpC32o9Or6fS/2UwOXlT03dGzILUTJUonOfwiVYcZxgsYCZq9LRcKw==",
"dependencies": { "dependencies": {
"lodash.isequal": "^4.5.0", "lodash.isequal": "^4.5.0",
"randomcolor": "^0.6.2" "randomcolor": "^0.6.2"
+1 -1
View File
@@ -22,7 +22,7 @@
"dependencies": { "dependencies": {
"@mapbox/mapbox-gl-rtl-text": "^0.2.3", "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
"@maplibre/maplibre-gl-geocoder": "^1.5.0", "@maplibre/maplibre-gl-geocoder": "^1.5.0",
"@maplibre/maplibre-gl-inspect": "^1.6.0", "@maplibre/maplibre-gl-inspect": "^1.6.1",
"@maplibre/maplibre-gl-style-spec": "^20.1.0", "@maplibre/maplibre-gl-style-spec": "^20.1.0",
"@mdi/js": "^6.6.96", "@mdi/js": "^6.6.96",
"@mdi/react": "^1.5.0", "@mdi/react": "^1.5.0",
@@ -15,25 +15,25 @@ function displayValue(value: string | number | Date | object | undefined) {
return value; return value;
} }
function renderKeyValueTableRow(key: string, value: string | undefined) { function renderKeyValueTableRow(key: string, value: string | undefined, idx: number) {
return <tr key={key}> return <tr key={`${key}-${value}-${idx}`}>
<td className="maputnik-popup-table-cell">{key}</td> <td className="maputnik-popup-table-cell">{key}</td>
<td className="maputnik-popup-table-cell">{value}</td> <td className="maputnik-popup-table-cell">{value}</td>
</tr> </tr>
} }
function renderFeature(feature: InspectFeature, idx: number) { function renderFeature(feature: InspectFeature, idx: number) {
return <> return <React.Fragment key={idx}>
<tr key={`${feature.sourceLayer}-${idx}`}> <tr key={`counter-${idx}`}>
<td colSpan={2} className="maputnik-popup-layer-id">{feature.layer['source']}: {feature.layer['source-layer']}{feature.inspectModeCounter && <span> × {feature.inspectModeCounter}</span>}</td> <td colSpan={2} className="maputnik-popup-layer-id">{feature.layer['source']}: {feature.layer['source-layer']}{feature.inspectModeCounter && <span> × {feature.inspectModeCounter}</span>}</td>
</tr> </tr>
{renderKeyValueTableRow("$type", feature.geometry.type)} {renderKeyValueTableRow("$type", feature.geometry.type, idx)}
{renderKeyValueTableRow("Feature ID", displayValue(feature.id))} {renderKeyValueTableRow("Feature ID", displayValue(feature.id), idx)}
{Object.keys(feature.properties).map(propertyName => { {Object.keys(feature.properties).map(propertyName => {
const property = feature.properties[propertyName]; const property = feature.properties[propertyName];
return renderKeyValueTableRow(propertyName, displayValue(property)) return renderKeyValueTableRow(propertyName, displayValue(property), idx)
})} })}
</> </React.Fragment>
} }
function removeDuplicatedFeatures(features: InspectFeature[]) { function removeDuplicatedFeatures(features: InspectFeature[]) {
@@ -68,7 +68,9 @@ class FeaturePropertyPopup extends React.Component<FeaturePropertyPopupProps> {
const features = removeDuplicatedFeatures(this.props.features) const features = removeDuplicatedFeatures(this.props.features)
return <div className="maputnik-feature-property-popup"> return <div className="maputnik-feature-property-popup">
<table className="maputnik-popup-table"> <table className="maputnik-popup-table">
{features.map(renderFeature)} <tbody>
{features.map(renderFeature)}
</tbody>
</table> </table>
</div> </div>
} }