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 +}