antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2026-01-20 20:01:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

added prop-types for children-cloning in production

Browse Source
This commit is contained in:
Anton 2023-08-22 22:38:06 +02:00
parent 0128ef4b79
commit 9b01977cd3
8 changed files with 34 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

11
src/Components/Map/ItemForm.tsx
View File

@ -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?
}</div>
)
}
ItemForm.propTypes = {
children: PropTypes.node,
__TYPE: PropTypes.string,
};
ItemForm.defaultProps = {
__TYPE: 'ItemForm',
};

11
src/Components/Map/ItemView.tsx
View File

@ -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?
</div>
)
}
ItemView.propTypes = {
children: PropTypes.node,
__TYPE: PropTypes.string,
};
ItemView.defaultProps = {
__TYPE: 'ItemView',
};

12
src/Components/Map/Layer.tsx
View File

@ -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<ItemFormPopupProps | null>(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" ?
<ItemViewPopup key={place.id} item={place} setItemFormPopup={props.setItemFormPopup} >{child}</ItemViewPopup>
: ""
)
@ -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" ?
<ItemFormPopup key={props.setItemFormPopup?.name} position={props.itemFormPopup!.position} layer={props.itemFormPopup!.layer} setItemFormPopup={setItemFormPopup} item={props.itemFormPopup!.item} api={props.api} >{child}</ItemFormPopup>
: ""
)

2
src/Components/Map/Subcomponents/ItemFormPopup.tsx
View File

@ -84,7 +84,7 @@ export function ItemFormPopup(props: ItemFormPopupProps) {
}}
position={props.position}>
<form ref={formRef} onReset={resetPopup} onSubmit={e => handleSubmit(e)}>
{props.item ? <div className='tw-h-2'></div>
{props.item ? <div className='tw-h-3'></div>
:
<div className='tw-flex tw-justify-center'><b className="tw-text-xl tw-font-bold">New {props.layer.name}</b></div>
}

2
src/Components/Map/UtopiaMap.tsx
View File

@ -64,7 +64,7 @@ function UtopiaMap({
<MarkerClusterGroup showCoverageOnHover chunkedLoading maxClusterRadius={50}>
{
React.Children.toArray(children).map((child) =>
React.isValidElement<{ setItemFormPopup: React.Dispatch<React.SetStateAction<ItemFormPopupProps>>, itemFormPopup: ItemFormPopupProps | null }>(child) && typeof child.type !== "string" && child.type.name === "Layer" ?
React.isValidElement<{ setItemFormPopup: React.Dispatch<React.SetStateAction<ItemFormPopupProps>>, itemFormPopup: ItemFormPopupProps | null }>(child) ?
React.cloneElement(child, { setItemFormPopup: setItemFormPopup, itemFormPopup: itemFormPopup }) : child
)
}

4
src/Components/Typography/Subtitle.tsx
View File

@ -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(
<div className={`tw-text-xl tw-font-semibold ${styleClass}`}>{children}</div>
)