Merge pull request #114 from utopia-os/remove-defaultProps

fix(source): use JavaScript default parameters instead defaultProps

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 = {
+ItemForm.__TYPE = 'ItemForm'
-  children: node,
-  __TYPE: string,
-}
-
-ItemForm.defaultProps = {
-  __TYPE: 'ItemForm',
-}

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?
     <div>
       {children
         ? Children.toArray(children).map((child) =>
-            isValidElement<{ item: Item }>(child) ? cloneElement(child, { item }) : '',
+            isValidElement<{ item: Item }>(child) ? cloneElement(child, { item }) : null,
           )
-        : ''}
+        : null}
     </div>
   )
 }
 
-ItemView.propTypes = {
+ItemView.__TYPE = 'ItemView'
-  children: node,
-  __TYPE: string,
-}
-
-ItemView.defaultProps = {
-  __TYPE: 'ItemView',
-}

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' ? (
                         <ItemViewPopup
                           ref={(r) => {
                             if (!(item.id in leafletRefs && leafletRefs[item.id].popup === r)) {
@@ -300,9 +301,7 @@ export const Layer = ({
                         >
                           {child}
                         </ItemViewPopup>
-                      ) : (
+                      ) : null,
-                        ''
-                      ),
                     )
                   ) : (
                     <>
@@ -318,6 +317,7 @@ export const Layer = ({
                       />
                     </>
                   )}
+
                   <Tooltip offset={[0, -38]} direction='top'>
                     {item.name ? item.name : getValue(item, itemNameField)}
                   </Tooltip>
@@ -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' ? (
               <ItemFormPopup
                 key={setItemFormPopup?.name}
                 position={itemFormPopup.position}
@@ -362,3 +362,7 @@ export const Layer = ({
     </>
   )
 }
+
+function isComponentWithType(node: ReactNode): node is ReactElement & { type: { __TYPE: string } } {
+  return isValidElement(node) && typeof node.type !== 'string' && '__TYPE' in node.type
+}