Updated how children types is checked + small fix to MapCallout (47) (#690)

* Fixed default Map callout size being too small

* Updated how type of children components is checked

Author: YoussefHenna

packages/core/src/components/SwipeableItem/SwipeableItem.tsx

@@ -20,7 +20,9 @@ import { SwipeRow } from "react-native-swipe-list-view";
 import { IconSlot } from "../../interfaces/Icon";
 import type { Theme } from "../../styles/DefaultTheme";
 import { withTheme } from "../../theming";
-import { SwipeableItemButtonProps } from "./SwipeableItemButton";
+import SwipeableItemButton, {
+  SwipeableItemButtonProps,
+} from "./SwipeableItemButton";
 import { SwipeableListContext } from "./SwipeableList";
 import {
   RightSwipeProps,
@@ -87,12 +89,6 @@ const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
   disableRightSwipe,
   ...rest
 }) => {
-  const instanceOfSwipeableItemButtonProps = (
-    object: any
-  ): object is SwipeableItemButtonProps => {
-    return "title" in object && "revealSwipeDirection" in object;
-  };
-
   const isEmptyObject = (object: object) => {
     return Object.keys(object).length === 0;
   };
@@ -131,7 +127,7 @@ const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
       React.Children.toArray(children).filter(
         (child) =>
           React.isValidElement(child) &&
-          instanceOfSwipeableItemButtonProps(child.props) &&
+          child.type === SwipeableItemButton &&
           child.props.revealSwipeDirection === "left"
       ) as React.ReactElement<SwipeableItemButtonProps>[],
     [children]
@@ -142,7 +138,7 @@ const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
       React.Children.toArray(children).filter(
         (child) =>
           React.isValidElement(child) &&
-          instanceOfSwipeableItemButtonProps(child.props) &&
+          child.type === SwipeableItemButton &&
           child.props.revealSwipeDirection === "right"
       ) as React.ReactElement<SwipeableItemButtonProps>[],
     [children]
@@ -152,8 +148,7 @@ const SwipeableItem: React.FC<React.PropsWithChildren<Props>> = ({
     () =>
       React.Children.toArray(children).filter(
         (child) =>
-          React.isValidElement(child) &&
-          !instanceOfSwipeableItemButtonProps(child.props)
+          React.isValidElement(child) && child.type !== SwipeableItemButton
       ),
     [children]
   );

packages/core/src/components/TabView/TabView.tsx

@@ -8,7 +8,7 @@ import {
   Route,
 } from "react-native-tab-view";
 
-import { TabViewItemProps } from "./TabViewItem";
+import TabViewItem from "./TabViewItem";
 import type { IconSlot } from "../../interfaces/Icon";
 import { withTheme } from "../../theming";
 import type { Theme } from "../../styles/DefaultTheme";
@@ -62,23 +62,14 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
 
   const { textStyles, viewStyles } = extractStyles(style);
 
-  //Check type of child using props
-  //Regular '.type' cannot work because Draftbit strips the type in Draft view
-  const instanceOfTabViewItemProps = (
-    object: any
-  ): object is TabViewItemProps => {
-    return "title" in object;
-  };
-
   //Populate routes and scenes based on children
   React.useEffect(() => {
     const newRoutes: Route[] = [];
     const scenes: { [key: string]: React.ReactElement } = {};
 
     React.Children.toArray(children)
       .filter(
-        (child) =>
-          React.isValidElement(child) && instanceOfTabViewItemProps(child.props)
+        (child) => React.isValidElement(child) && child.type === TabViewItem
       )
       .forEach((item: any, idx) => {
         const child = item as React.ReactElement;

packages/core/src/components/TabView/TabViewItem.tsx

@@ -1,8 +1,7 @@
 import React from "react";
 import { StyleProp, ViewStyle, StyleSheet, View } from "react-native";
 
-//Props used by parent (TabView) to create tabs
-export interface TabViewItemProps {
+interface TabViewItemProps {
   title: string;
   icon?: string;
   accessibilityLabel?: string;

packages/maps/src/components/MapMarker.tsx

@@ -57,9 +57,11 @@ export function renderMarker(
   if (calloutChildren.length === 0 && (title || description)) {
     calloutChildren.push(
       <MapCallout showTooltip>
-        <View>
-          {title && <Text style={style.title}>{title}</Text>}
-          {description && <Text style={style.description}>{description}</Text>}
+        <View style={styles.defaultCalloutContainer}>
+          {title && <Text style={styles.defaultCalloutTitle}>{title}</Text>}
+          {description && (
+            <Text style={styles.defaultCalloutDescription}>{description}</Text>
+          )}
         </View>
       </MapCallout>
     );
@@ -98,13 +100,17 @@ export function renderMarker(
   );
 }
 
-const style = StyleSheet.create({
-  title: {
+const styles = StyleSheet.create({
+  defaultCalloutContainer: {
+    flex: 1,
+  },
+  defaultCalloutTitle: {
     fontWeight: "600",
     textAlign: "center",
+    maxWidth: 250,
   },
-  description: {
-    textAlign: "center",
+  defaultCalloutDescription: {
+    maxWidth: 250,
   },
 });