138 lines
4 KiB
JavaScript
Executable file
138 lines
4 KiB
JavaScript
Executable file
// Import Stuff
|
|
/// React Native
|
|
import * as React from 'react'
|
|
import { useState } from "react"
|
|
import { Alert, AsyncStorage, Text, TextInput, UseState, View } from 'react-native'
|
|
import { SafeAreaView } from 'react-native-safe-area-context'
|
|
import { WebView } from 'react-native-webview'
|
|
import Modal from "react-native-modal"
|
|
|
|
/// React Native Navigation
|
|
import { NavigationContainer } from '@react-navigation/native'
|
|
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
|
|
|
|
/// Expo Modules
|
|
import * as SystemUI from 'expo-system-ui'
|
|
|
|
/// Options
|
|
import ScreenOptions from './options/TabOptions'
|
|
|
|
/// Stylesheets
|
|
import Styles from './stylesheets/style'
|
|
|
|
// Others
|
|
SystemUI.setBackgroundColorAsync("black")
|
|
const Tab = createMaterialTopTabNavigator()
|
|
|
|
let InstanceURL = 'https://design.penpot.app/'
|
|
|
|
// App
|
|
export default function App() {
|
|
const [isModalVisible, setModalVisible] = useState(false);
|
|
|
|
const ToggleSettingModal = () => {
|
|
setModalVisible(!isModalVisible);
|
|
};
|
|
|
|
const [tabs, setTabs] = React.useState([
|
|
{
|
|
name : "1",
|
|
component : TabScreen,
|
|
}
|
|
])
|
|
const addNewTab = () => {
|
|
setTabs(tabs => [
|
|
...tabs,
|
|
{
|
|
name : "" + (parseInt(tabs.pop().name.replace("", "")) + 1),
|
|
component : TabScreen,
|
|
}
|
|
])
|
|
}
|
|
const remove = (route) => {setTabs(tabs => tabs.filter(tab => tab.name !== route.name))}
|
|
|
|
function Loading() {
|
|
return (
|
|
<View>
|
|
<Text>Loading</Text>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
function TabScreen({route}) {
|
|
return (
|
|
<SafeAreaView style={Styles.Container}>
|
|
<WebView
|
|
onError={(syntheticEvent) => {const { nativeEvent } = syntheticEvent}}
|
|
renderError={() => Alert.alert("Something went wrong", "The page you are trying to load has either crashed or there is no connection. Please check your Instance setting to make sure the URL is correct.", [{text: 'OK'}])}
|
|
renderLoading={() => <Loading />}
|
|
startInLoadingState={true}
|
|
source={{ uri: InstanceURL }}
|
|
javaScriptEnabled={true}
|
|
javaScriptEnabledAndroid={true}
|
|
scalesPageToFit={false}
|
|
bounces={false}
|
|
pullToRefreshEnabled={false}
|
|
contentMode={'desktop'}
|
|
androidLayerType={'software'}
|
|
allowsBackForwardNavigationGestures
|
|
style={{backgroundColor: '#202020'}}
|
|
/>
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<NavigationContainer>
|
|
<Tab.Navigator
|
|
optimizationsEnabled={true}
|
|
backBehavior='none'
|
|
keyboardDismissMode='none'
|
|
screenOptions={{
|
|
tabBarGap: 10,
|
|
tabBarAndroidRipple: { borderless: false },
|
|
}}
|
|
{...{ screenOptions }}>
|
|
{
|
|
tabs.map(tab => <Tab.Screen
|
|
key={tab.name}
|
|
name={tab.name}
|
|
component={tab.component}
|
|
/>)
|
|
}
|
|
</Tab.Navigator>
|
|
{/* {route.name !== "tab-1" && <Text onPress={() => remove(route)}>close me</Text>} */}
|
|
<Text
|
|
style={Styles.AddButton}
|
|
onPress={addNewTab}
|
|
>+</Text>
|
|
<Text
|
|
style={Styles.SettingButton}
|
|
onPress={ToggleSettingModal}
|
|
>Settings</Text>
|
|
|
|
<Modal
|
|
animationIn={'fadeIn'}
|
|
animationOut={'fadeOut'}
|
|
isVisible={isModalVisible}
|
|
onBackButtonPress={ToggleSettingModal}
|
|
onBackdropPress={ToggleSettingModal}
|
|
>
|
|
<View style={Styles.Settings}>
|
|
<Text>Instance</Text>
|
|
<TextInput
|
|
style={Styles.InstanceForm}
|
|
type="text"
|
|
onChange={(e) => SetInstance(e.target.value)}
|
|
placeholder="https://design.penpot.app/"
|
|
aria-label="InstanceURL"
|
|
/>
|
|
<View style={{flexDirection:"row", alignSelf: 'flex-end'}}>
|
|
<Text style={Styles.InstanceCancel} onPress={ToggleSettingModal}>Cancel</Text>
|
|
<TextInput style={Styles.InstanceSubmit} type="submit" value="Submit"></TextInput>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
</NavigationContainer>
|
|
)
|
|
}
|