react-native-boxes 1.3.24 → 1.3.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-boxes",
-  "version": "1.3.24",
+  "version": "1.3.26",
   "description": "A react native library for rapid development of UI using boxes",
   "main": "src/index.js",
   "scripts": {
@@ -34,6 +34,7 @@
     "typescript": "^5.4.3"
   },
   "dependencies": {
-    "@react-native-async-storage/async-storage": "^1.23.1"
+    "@react-native-async-storage/async-storage": "^1.23.1",
+    "expo-web-browser": "^13.0.3"
   }
 }

package/src/Bar.tsx

@@ -131,15 +131,16 @@ export function TransparentCenterToolbar(props: SimpleToolbarProps) {
     const theme = useContext(ThemeContext)
     return (
         <SimpleToolbar
+            {...props}
             style={[{
                 width: '100%'
             }, props.style]}
             textStyle={{
                 color: theme.colors.text
             }}
-            homeIcon="" title={props.title}
+            homeIcon={props.homeIcon || ""}
+            title={props.title}
             backgroundColor={theme.colors.transparent}
-            {...props}
         />
     )
 }

package/src/Modal.tsx

@@ -1,14 +1,16 @@
-//@ts-nocheck
 import * as React from 'react';
 import { useContext, useEffect, useRef, useState } from 'react';
-import { Animated, Button, Easing, LayoutChangeEvent, Modal, Platform, Pressable, ScrollView, StyleProp, StyleSheet, TextStyle, TouchableHighlight, TouchableOpacity, View, ViewProps } from 'react-native';
+import { Animated, Button, Easing, LayoutChangeEvent, Linking, Modal, Platform, Pressable, ScrollView, StyleProp, StyleSheet, TextStyle, TouchableHighlight, TouchableOpacity, View, ViewProps } from 'react-native';
 import { Icon, IconProps } from './Image';
-import { isDesktop } from './utils';
+import { getNavParamsFromDeeplink, isDesktop, isWeb } from './utils';
 import { ThemeContext } from './ThemeContext';
-import { Center, HBox, VBox } from './Box';
+import { Center, HBox, VBox, VPage } from './Box';
 import { Subtitle, TextView, Title } from './Text';
-import { ButtonView, ButtonViewProps, PressableView, TertiaryButtonView } from './Button';
-import { CompositeTextInputView, CompositeTextInputViewProps } from './Input';
+import { ButtonView, ButtonViewProps, LoadingButton, PressableView, TertiaryButtonView } from './Button';
+import { CompositeTextInputView } from './Input';
+import * as WebBrowser from 'expo-web-browser';
+import { TransparentCenterToolbar } from './Bar';
+
 
 export type BottomSheetProps = {
     visible: boolean,
@@ -340,6 +342,7 @@ export const DropDownView = (props: DropDownViewProps) => {
             <select
                 defaultValue={props.selectedId}
                 onChange={(e) => {
+                    //@ts-ignore
                     props.onSelect(e.target.value, props.options.find(o => o.id == e.target.value)?.value)
                 }}
                 //@ts-ignore
@@ -370,7 +373,7 @@ export const DropDownView = (props: DropDownViewProps) => {
         return (
             <VBox style={props.style}>
                 <BottomSheet
-                    visible={visible}
+                    visible={visible as boolean}
                     onDismiss={() => {
                         setVisible(false)
                     }}
@@ -423,6 +426,7 @@ export const DropDownView = (props: DropDownViewProps) => {
                                 onIconPress={() => { setVisible(true) }}
                                 icon={"caret-down"}
                                 pointerEvents="none"
+                                //@ts-ignore
                                 _textInputProps={{
                                     caretHidden: true,
                                     placeholder: props.title || 'select',
@@ -484,4 +488,82 @@ export function ConfirmationDialog(props: ConfirmationDialogProps) {
 
         </BottomSheet>
     )
-}
+}
+
+
+export function WebBrowserView(props: {
+    url: string,
+    title?: string,
+    openMessage?: string,
+    retryMessage?: string,
+    cancelMessage?: string;
+    onCancel: () => void,
+    navigation: {
+        navigate: (path: string, params: any) => void
+    }
+}) {
+    const [result, setResult] = useState(null);
+    const [loading, setLoading] = useState(false)
+    const _handlePressButtonAsync = async () => {
+        if (isWeb()) {
+            setLoading(true)
+            setTimeout(() => {
+                setLoading(false)
+            }, 5000)
+            //@ts-ignore
+            window.location.href = props.url
+        } else {
+            let result: any = await WebBrowser.openBrowserAsync(props.url);
+            setResult(result);
+        }
+    };
+
+    useEffect(() => {
+        if (result == null)
+            _handlePressButtonAsync()
+    }, [])
+    const theme = useContext(ThemeContext)
+    Linking.addEventListener('url', (url) => {
+        if (url?.url) {
+            let path = url?.url.split("://")[1]
+            if (path) {
+                const [root, params] = getNavParamsFromDeeplink(path)
+                props.navigation?.navigate(root, params)
+            }
+            Linking.removeAllListeners('url')
+        }
+    });
+    return (
+        <VPage >
+            <TransparentCenterToolbar title={props.title || ''} />
+            <Center style={{
+                paddingBottom: theme.dimens.space.xl,
+                flex: 1,
+            }}>
+                <Center style={{
+                    paddingBottom: theme.dimens.space.xl * 2,
+                }}>
+                    <Icon name="globe" size={theme.dimens.icon.xxl} />
+                    <Subtitle style={{
+                        padding: theme.dimens.space.xl,
+                        paddingTop: theme.dimens.space.lg,
+                        textAlign: 'center'
+                    }}>{props.openMessage || "Open in browser to continue."}</Subtitle>
+                </Center>
+                <LoadingButton
+                    loading={loading}
+                    onPress={() => {
+                        _handlePressButtonAsync()
+                    }}
+                    style={{
+                        width: '80%'
+                    }}>{props.retryMessage || "Retry"}</LoadingButton>
+                <TertiaryButtonView
+                    onPress={() => {
+                        props.onCancel && props.onCancel()
+                    }}
+                    text={props.cancelMessage || "Cancel"} />
+            </Center>
+        </VPage>
+    );
+}

package/src/utils.ts

@@ -2,6 +2,48 @@ import { Platform } from "react-native";
 import { Dimensions } from 'react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
+
+export function getNavParamsFromDeeplink(url: string) {
+    let parts = url.split("/");
+
+    let root, rootParams: any = {};
+    root = parts[0];
+    if (parts.length > 1) {
+
+        let obj = {
+            screen: '',
+            params: {}
+        };
+        let lastCloneObj = undefined;
+        for (let i = 1; i < parts.length; i++) {
+            const part = parts[i];
+            let cloneObj = Object.assign({}, obj);
+
+            if (part?.indexOf("?") > -1) {
+                cloneObj.screen = part.split("?")[0];
+                const query = part.split("?")[1];
+                const params: any = {};
+                const queryParams = query.split("&");
+                queryParams?.forEach((pk) => {
+                    const [value, key] = pk.split("=")
+                    params[key] = value;
+                });
+                cloneObj.params = params;
+            } else {
+                cloneObj.screen = part;
+            }
+            if (lastCloneObj == undefined) {
+                lastCloneObj = cloneObj;
+            } else {
+                lastCloneObj.params = cloneObj;
+            }
+        }
+        rootParams = lastCloneObj;
+    }
+    return [root, rootParams];
+}
+
+
 export const Storage = {
     async getKeyAsync(key: string) {
         return await AsyncStorage.getItem(key);