From 9b01977cd3dddb3873d122e477bff9b4d142b2ad Mon Sep 17 00:00:00 2001 From: Anton Date: Tue, 22 Aug 2023 22:38:06 +0200 Subject: [PATCH] added prop-types for children-cloning in production --- package-lock.json | 5 ++--- package.json | 1 + src/Components/Map/ItemForm.tsx | 11 +++++++++++ src/Components/Map/ItemView.tsx | 11 +++++++++++ src/Components/Map/Layer.tsx | 12 +++++------- src/Components/Map/Subcomponents/ItemFormPopup.tsx | 2 +- src/Components/Map/UtopiaMap.tsx | 2 +- src/Components/Typography/Subtitle.tsx | 4 ++-- 8 files changed, 34 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index 94d48303..99e15c8a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "dependencies": { "@heroicons/react": "^2.0.17", "leaflet": "^1.9.4", + "prop-types": "^15.8.1", "react-leaflet": "^4.2.1", "react-leaflet-cluster": "^2.1.0", "react-router-dom": "^6.11.2", @@ -3712,7 +3713,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -3777,8 +3777,7 @@ "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/react-leaflet": { "version": "4.2.1", diff --git a/package.json b/package.json index c66c5b17..405af650 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "dependencies": { "@heroicons/react": "^2.0.17", "leaflet": "^1.9.4", + "prop-types": "^15.8.1", "react-leaflet": "^4.2.1", "react-leaflet-cluster": "^2.1.0", "react-router-dom": "^6.11.2", diff --git a/src/Components/Map/ItemForm.tsx b/src/Components/Map/ItemForm.tsx index 6a161a37..823bf535 100644 --- a/src/Components/Map/ItemForm.tsx +++ b/src/Components/Map/ItemForm.tsx @@ -1,5 +1,7 @@ import * as React from 'react' import { Item } from '../../types' +import * as PropTypes from 'prop-types' + export const ItemForm = ({ children, item }: { children?: React.ReactNode, item?: Item }) => { return ( @@ -12,3 +14,12 @@ export const ItemForm = ({ children, item }: { children?: React.ReactNode, item? } ) } + +ItemForm.propTypes = { + children: PropTypes.node, + __TYPE: PropTypes.string, +}; + +ItemForm.defaultProps = { + __TYPE: 'ItemForm', +}; diff --git a/src/Components/Map/ItemView.tsx b/src/Components/Map/ItemView.tsx index 600071ce..354613ba 100644 --- a/src/Components/Map/ItemView.tsx +++ b/src/Components/Map/ItemView.tsx @@ -1,5 +1,7 @@ import * as React from 'react' import { Item } from '../../types' +import * as PropTypes from 'prop-types' + export const ItemView = ({ children, item }: { children?: React.ReactNode, item?: Item }) => { return ( @@ -12,3 +14,12 @@ export const ItemView = ({ children, item }: { children?: React.ReactNode, item? ) } + +ItemView.propTypes = { + children: PropTypes.node, + __TYPE: PropTypes.string, +}; + +ItemView.defaultProps = { + __TYPE: 'ItemView', +}; diff --git a/src/Components/Map/Layer.tsx b/src/Components/Map/Layer.tsx index 0907c6d0..bf8627b2 100644 --- a/src/Components/Map/Layer.tsx +++ b/src/Components/Map/Layer.tsx @@ -9,6 +9,7 @@ import { useEffect, useState } from 'react' import { useAddLayer } from './hooks/useLayers' import { ItemFormPopupProps, ItemFormPopup } from './Subcomponents/ItemFormPopup' + export const Layer = (props: LayerProps) => { const [itemFormPopup, setItemFormPopup] = useState(null); @@ -17,9 +18,6 @@ export const Layer = (props: LayerProps) => { const tags = useTags(); - - - // create a JS-Map with all Tags const tagMap = new Map(tags?.map(key => [key.id, key])); @@ -90,9 +88,9 @@ export const Layer = (props: LayerProps) => { { - (props.children && React.Children.toArray(props.children).some(e => React.isValidElement(e) && typeof e.type !== "string" && e.type.name === "ItemView") ? + (props.children && React.Children.toArray(props.children).some(child => React.isValidElement(child) && child.props.__TYPE === "ItemView") ? React.Children.toArray(props.children).map((child) => - React.isValidElement(child) && typeof child.type !== "string" && child.type.name === "ItemView" ? + React.isValidElement(child) && child.props.__TYPE === "ItemView" ? {child} : "" ) @@ -109,9 +107,9 @@ export const Layer = (props: LayerProps) => { {//{props.children}} } {props.itemFormPopup && props.itemFormPopup.layer!.name == props.name && - (props.children && React.Children.toArray(props.children).some(e => React.isValidElement(e) && typeof e.type !== "string" && e.type.name === "ItemForm") ? + (props.children && React.Children.toArray(props.children).some(child => React.isValidElement(child) && child.props.__TYPE === "ItemForm") ? React.Children.toArray(props.children).map((child) => - React.isValidElement(child) && typeof child.type !== "string" && child.type.name === "ItemForm" ? + React.isValidElement(child) && child.props.__TYPE === "ItemForm" ? {child} : "" ) diff --git a/src/Components/Map/Subcomponents/ItemFormPopup.tsx b/src/Components/Map/Subcomponents/ItemFormPopup.tsx index 906f19f6..fd7a7dba 100644 --- a/src/Components/Map/Subcomponents/ItemFormPopup.tsx +++ b/src/Components/Map/Subcomponents/ItemFormPopup.tsx @@ -84,7 +84,7 @@ export function ItemFormPopup(props: ItemFormPopupProps) { }} position={props.position}>
handleSubmit(e)}> - {props.item ?
+ {props.item ?
:
New {props.layer.name}
} diff --git a/src/Components/Map/UtopiaMap.tsx b/src/Components/Map/UtopiaMap.tsx index 15e812ae..029bc737 100644 --- a/src/Components/Map/UtopiaMap.tsx +++ b/src/Components/Map/UtopiaMap.tsx @@ -64,7 +64,7 @@ function UtopiaMap({ { React.Children.toArray(children).map((child) => - React.isValidElement<{ setItemFormPopup: React.Dispatch>, itemFormPopup: ItemFormPopupProps | null }>(child) && typeof child.type !== "string" && child.type.name === "Layer" ? + React.isValidElement<{ setItemFormPopup: React.Dispatch>, itemFormPopup: ItemFormPopupProps | null }>(child) ? React.cloneElement(child, { setItemFormPopup: setItemFormPopup, itemFormPopup: itemFormPopup }) : child ) } diff --git a/src/Components/Typography/Subtitle.tsx b/src/Components/Typography/Subtitle.tsx index cb7aa7dd..1b44b888 100644 --- a/src/Components/Typography/Subtitle.tsx +++ b/src/Components/Typography/Subtitle.tsx @@ -1,6 +1,6 @@ - import * as React from "react" +import * as React from "react" - function Subtitle({styleClass, children}){ + function Subtitle({styleClass, children}:{styleClass:string, children: React.ReactNode}){ return(
{children}
)