[Plugins] Finish plugin settings

This commit is contained in:
Beef 2023-01-07 03:13:28 +00:00
parent 715e6f9bc4
commit 70a60a5b33
2 changed files with 79 additions and 4 deletions

View file

@ -1,13 +1,12 @@
import { ReactNative as RN, stylesheet } from "@metro/common";
import { ReactNative as RN, stylesheet, navigation } from "@metro/common";
import { Forms, General } from "@ui/components";
import { Plugin } from "@types";
import { getAssetIDByName } from "@ui/assets";
import { getSettings, startPlugin, stopPlugin } from "@lib/plugins";
import { findByProps } from "@metro/filters";
import PluginSettings from "@ui/settings/components/PluginSettings";
const { FormRow, FormSwitch } = Forms;
const { TouchableOpacity, Image } = General;
const navigation = findByProps("pushLazy");
const styles = stylesheet.createThemedStyleSheet({
card: {
@ -62,7 +61,10 @@ export default function PluginCard({ plugin }: PluginCardProps) {
<RN.View style={styles.actions}>
{Settings && <TouchableOpacity
onPress={() => {
navigation.push(Settings);
navigation.push(PluginSettings, {
plugin: plugin,
children: Settings,
});
}}
>
<Image style={styles.icon} source={getAssetIDByName("settings")} />

View file

@ -0,0 +1,73 @@
import { Plugin } from "@types";
import { navigation, navigationStack, NavigationNative, stylesheet, constants } from "@metro/common";
import { General } from "@ui/components";
import { getAssetIDByName } from "@ui/assets";
interface PluginSettingsProps {
plugin: Plugin;
children: JSX.Element;
}
const styles = stylesheet.createThemedStyleSheet({
container: {
backgroundColor: stylesheet.ThemeColorMap.BACKGROUND_MOBILE_SECONDARY,
flex: 1,
},
cardStyle: {
backgroundColor: stylesheet.ThemeColorMap.BACKGROUND_MOBILE_PRIMARY,
color: stylesheet.ThemeColorMap.TEXT_NORMAL,
},
header: {
backgroundColor: stylesheet.ThemeColorMap.BACKGROUND_MOBILE_SECONDARY,
shadowColor: "transparent",
elevation: 0,
},
headerTitleContainer: {
color: stylesheet.ThemeColorMap.HEADER_PRIMARY,
},
headerTitle: {
fontFamily: constants.Fonts.PRIMARY_BOLD,
color: stylesheet.ThemeColorMap.HEADER_PRIMARY,
},
backIcon: {
tintColor: stylesheet.ThemeColorMap.INTERACTIVE_ACTIVE,
marginLeft: 15,
marginRight: 20,
}
});
export const Settings = navigationStack.createStackNavigator();
const { TouchableOpacity, Image } = General;
export default function PluginSettings({ plugin, children }: PluginSettingsProps) {
return (
<NavigationNative.NavigationContainer>
<Settings.Navigator
initialRouteName={plugin.manifest.name}
style={styles.container}
screenOptions={{
cardOverlayEnabled: false,
cardShadowEnabled: false,
cardStyle: styles.cardStyle,
headerStyle: styles.header,
headerTitleContainerStyle: styles.headerTitleContainer,
}}
>
<Settings.Screen
name={plugin.manifest.name}
component={children}
options={{
headerTitleStyle: styles.headerTitle,
headerLeft: () => (
<TouchableOpacity
onPress={() => navigation.pop()}
>
<Image style={styles.backIcon} source={getAssetIDByName("back-icon")} />
</TouchableOpacity>
),
}}
/>
</Settings.Navigator>
</NavigationNative.NavigationContainer>
)
}