Pressable Table + Html Webview (47) (#692)

* Added ability to press Table Rows and Cells

* SImplified passing of html to webview to ease integration into draftbit

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/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/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}