[Plugins] Finish plugin settings
This commit is contained in:
parent
715e6f9bc4
commit
70a60a5b33
2 changed files with 79 additions and 4 deletions
|
@ -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")} />
|
||||
|
|
73
src/ui/settings/components/PluginSettings.tsx
Normal file
73
src/ui/settings/components/PluginSettings.tsx
Normal 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>
|
||||
)
|
||||
}
|
Loading…
Reference in a new issue