Merge remote-tracking branch 'origin/47' into youssef/p-3546-add-section-list-component47

Author: YoussefHenna

example/src/WebViewExample.js

@@ -14,12 +14,7 @@ const WebViewExample = () => (
       />
     </Section>
     <Section title="With custom HTML">
-      <WebView
-        style={style.webView}
-        source={{
-          html: "<div> Hello! </div>",
-        }}
-      />
+      <WebView style={style.webView} html="<div> Hello! </div>" />
     </Section>
   </Container>
 );

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/core/src/components/Table/TableCell.tsx

@@ -5,8 +5,10 @@ import {
   TableProps,
   TableStyleContext,
 } from "./TableCommon";
+import Pressable from "../Pressable";
 
 export interface Props extends TableProps {
+  onPress?: () => void;
   style?: StyleProp<ViewStyle>;
 }
 
@@ -21,6 +23,7 @@ const TableCell: React.FC<React.PropsWithChildren<Props>> = ({
   cellVerticalPadding,
   cellHorizontalPadding,
   children,
+  onPress,
   style,
 }) => {
   const parentContextValue = React.useContext(TableStyleContext);
@@ -34,8 +37,11 @@ const TableCell: React.FC<React.PropsWithChildren<Props>> = ({
     drawStartBorder,
     drawEndBorder,
   });
+
+  const ContainerComponent = onPress ? Pressable : View;
   return (
-    <View
+    <ContainerComponent
+      onPress={onPress}
       style={[
         styles.cellContainer,
         borderViewStyle,
@@ -49,7 +55,7 @@ const TableCell: React.FC<React.PropsWithChildren<Props>> = ({
       ]}
     >
       {children}
-    </View>
+    </ContainerComponent>
   );
 };
 

packages/core/src/components/Table/TableRow.tsx

@@ -8,8 +8,10 @@ import {
 } from "./TableCommon";
 import { Theme } from "../../styles/DefaultTheme";
 import { withTheme } from "../../theming";
+import Pressable from "../Pressable";
 
 export interface Props extends TableProps {
+  onPress?: () => void;
   isTableHeader?: boolean;
   style?: StyleProp<ViewStyle>;
   theme: Theme;
@@ -27,6 +29,7 @@ const TableRow: React.FC<React.PropsWithChildren<Props>> = ({
   cellHorizontalPadding,
   isTableHeader = false,
   children,
+  onPress,
   style,
   theme,
 }) => {
@@ -52,9 +55,12 @@ const TableRow: React.FC<React.PropsWithChildren<Props>> = ({
     drawStartBorder,
     drawEndBorder,
   });
+
+  const ContainerComponent = onPress ? Pressable : View;
   return (
     <TableStyleContext.Provider value={contextValue}>
-      <View
+      <ContainerComponent
+        onPress={onPress}
         style={[
           borderViewStyle,
           isTableHeader ? { backgroundColor: theme.colors.primary } : {},
@@ -63,7 +69,7 @@ const TableRow: React.FC<React.PropsWithChildren<Props>> = ({
         ]}
       >
         {children}
-      </View>
+      </ContainerComponent>
     </TableStyleContext.Provider>
   );
 };

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,
   },
 });
 

packages/native/src/components/WebView.tsx

@@ -39,7 +39,8 @@ const injectFirst = `
 `;
 
 interface WebViewProps {
-  source: WebViewSourceUri | WebViewSourceHtml;
+  source?: WebViewSourceUri | WebViewSourceHtml;
+  html?: string;
   style?: ViewStyle;
   optimizeVideoChat?: boolean;
   // Advancted Builder Config Props
@@ -80,7 +81,7 @@ interface WebViewProps {
 }
 
 const NativeWebView = React.forwardRef<any, WebViewProps>(
-  ({ source, style, optimizeVideoChat, ...otherWebViewProps }, ref) => {
+  ({ source, html, style, optimizeVideoChat, ...otherWebViewProps }, ref) => {
     const [height, setHeight] = useState(0);
 
     const [cameraPermissions, setCameraPermissions] =
@@ -149,6 +150,12 @@ const NativeWebView = React.forwardRef<any, WebViewProps>(
       }
     };
 
+    if (!source && !html) {
+      throw new Error(
+        "'source' or 'html' props need to be provided to render WebView"
+      );
+    }
+
     const selectComponent = () => {
       if (
         !optimizeVideoChat ||
@@ -157,7 +164,7 @@ const NativeWebView = React.forwardRef<any, WebViewProps>(
         return (
           <WebView
             ref={ref}
-            source={source}
+            source={source || { html: html!! }}
             style={{ ...style, width: getFinalWidth() }}
             injectedJavaScript={injectFirst}
             onMessage={onMessage}