diff --git a/src/Components/Map/ItemForm.tsx b/src/Components/Map/ItemForm.tsx
index d48b33ce..d024ef1e 100644
--- a/src/Components/Map/ItemForm.tsx
+++ b/src/Components/Map/ItemForm.tsx
@@ -1,4 +1,3 @@
-import { node, string } from 'prop-types'
import { Children, cloneElement, isValidElement, useEffect } from 'react'
import type { Item } from '#types/Item'
@@ -33,11 +32,4 @@ export const ItemForm = ({
)
}
-ItemForm.propTypes = {
- children: node,
- __TYPE: string,
-}
-
-ItemForm.defaultProps = {
- __TYPE: 'ItemForm',
-}
+ItemForm.__TYPE = 'ItemForm'
diff --git a/src/Components/Map/ItemView.tsx b/src/Components/Map/ItemView.tsx
index 63a241d6..0b9c2f91 100644
--- a/src/Components/Map/ItemView.tsx
+++ b/src/Components/Map/ItemView.tsx
@@ -1,4 +1,3 @@
-import { node, string } from 'prop-types'
import { Children, cloneElement, isValidElement } from 'react'
import type { Item } from '#types/Item'
@@ -8,18 +7,11 @@ export const ItemView = ({ children, item }: { children?: React.ReactNode; item?
{children
? Children.toArray(children).map((child) =>
- isValidElement<{ item: Item }>(child) ? cloneElement(child, { item }) : '',
+ isValidElement<{ item: Item }>(child) ? cloneElement(child, { item }) : null,
)
- : ''}
+ : null}
)
}
-ItemView.propTypes = {
- children: node,
- __TYPE: string,
-}
-
-ItemView.defaultProps = {
- __TYPE: 'ItemView',
-}
+ItemView.__TYPE = 'ItemView'
diff --git a/src/Components/Map/Layer.tsx b/src/Components/Map/Layer.tsx
index 0ce40aef..7aeadf30 100644
--- a/src/Components/Map/Layer.tsx
+++ b/src/Components/Map/Layer.tsx
@@ -32,6 +32,7 @@ import type { Item } from '#types/Item'
import type { LayerProps } from '#types/LayerProps'
import type { Tag } from '#types/Tag'
import type { Popup } from 'leaflet'
+import type { ReactElement, ReactNode } from 'react'
export const Layer = ({
data,
@@ -284,10 +285,10 @@ export const Layer = ({
>
{children &&
Children.toArray(children).some(
- (child) => isValidElement(child) && child.props.__TYPE === 'ItemView',
+ (child) => isComponentWithType(child) && child.type.__TYPE === 'ItemView',
) ? (
Children.toArray(children).map((child) =>
- isValidElement(child) && child.props.__TYPE === 'ItemView' ? (
+ isComponentWithType(child) && child.type.__TYPE === 'ItemView' ? (
{
if (!(item.id in leafletRefs && leafletRefs[item.id].popup === r)) {
@@ -300,9 +301,7 @@ export const Layer = ({
>
{child}
- ) : (
- ''
- ),
+ ) : null,
)
) : (
<>
@@ -318,6 +317,7 @@ export const Layer = ({
/>
>
)}
+
{item.name ? item.name : getValue(item, itemNameField)}
@@ -332,10 +332,10 @@ export const Layer = ({
itemFormPopup.layer.name === name &&
(children &&
Children.toArray(children).some(
- (child) => isValidElement(child) && child.props.__TYPE === 'ItemForm',
+ (child) => isComponentWithType(child) && child.type.__TYPE === 'ItemForm',
) ? (
Children.toArray(children).map((child) =>
- isValidElement(child) && child.props.__TYPE === 'ItemForm' ? (
+ isComponentWithType(child) && child.type.__TYPE === 'ItemForm' ? (
)
}
+
+function isComponentWithType(node: ReactNode): node is ReactElement & { type: { __TYPE: string } } {
+ return isValidElement(node) && typeof node.type !== 'string' && '__TYPE' in node.type
+}