feat(SettingsPageItem): Can now render children

src/layouts/SettingsPageItem/SettingsPageItem.tsx

@@ -1,6 +1,6 @@
 import { isMobile } from '@bluebase/core';
 import React from 'react';
-import { TextStyle } from 'react-native';
+import { TextStyle, ViewStyle } from 'react-native';
 
 import { SettingsPageItemDesktop } from './SettingsPageItemDesktop';
 import { SettingsPageItemMobile } from './SettingsPageItemMobile';
@@ -12,10 +12,10 @@ export interface SettingsPageItemProps {
 	/**
 	 * Name of the component, or the component itself to render.
 	 */
-	component: string | React.ComponentType<any>;
+	component?: string | React.ComponentType<any>;
 
 	/** A slug to identify the item */
-	name: string;
+	name?: string;
 
 	/** The title of the segment */
 	title?: React.ReactNode;
@@ -28,6 +28,9 @@ export interface SettingsPageItemProps {
 
 	/** Styles to apply to the description component */
 	descriptionStyle?: TextStyle;
+
+	children?: React.ReactNode;
+	style?: ViewStyle;
 }
 
 export const SettingsPageItem = (props: SettingsPageItemProps) => {

src/layouts/SettingsPageItem/SettingsPageItemDesktop.tsx

@@ -1,5 +1,5 @@
 import { Body1, Body2, View } from '@bluebase/components';
-import { Theme, useComponent, useIntl, useStyles } from '@bluebase/core';
+import { Theme, useBlueBase, useIntl, useStyles } from '@bluebase/core';
 import React from 'react';
 import { Platform, TextStyle, ViewStyle } from 'react-native';
 
@@ -52,9 +52,11 @@ const defaultStyles = (theme: Theme): SettingsPageItemDesktopStyles => ({
 });
 
 export const SettingsPageItemDesktop = (props: SettingsPageItemDesktopProps) => {
-	const { description, descriptionStyle, title, titleStyle } = props;
-	const ItemComponent = useComponent(props.component);
+	const { description, descriptionStyle, title, titleStyle, style, component, children } = props;
 	const { __ } = useIntl();
+	const BB = useBlueBase();
+
+	const ItemComponent = component ? BB.Components.resolveFromCache(component) : null;
 
 	const styles = useStyles('SettingsPageItemDesktop', props, defaultStyles);
 
@@ -73,7 +75,7 @@ export const SettingsPageItemDesktop = (props: SettingsPageItemDesktopProps) =>
 		);
 
 	return (
-		<View style={styles.root}>
+		<View style={[styles.root, style]}>
 			{titleNode || descNode
 				? (
 					<View style={styles.header}>
@@ -85,7 +87,7 @@ export const SettingsPageItemDesktop = (props: SettingsPageItemDesktopProps) =>
 			}
 
 			<View style={styles.content}>
-				<ItemComponent />
+				{ItemComponent ? <ItemComponent /> : children}
 			</View>
 		</View>
 	);

src/layouts/SettingsPageItem/SettingsPageItemMobile.tsx

@@ -1,5 +1,5 @@
 import { Caption, List, View } from '@bluebase/components';
-import { Theme, useComponent, useIntl, useStyles } from '@bluebase/core';
+import { Theme, useBlueBase, useIntl, useStyles } from '@bluebase/core';
 import React from 'react';
 import { TextStyle, ViewStyle } from 'react-native';
 
@@ -38,9 +38,11 @@ const defaultStyles = (theme: Theme): SettingsPageItemMobileStyles => ({
 });
 
 export const SettingsPageItemMobile = (props: SettingsPageItemMobileProps) => {
-	const { description, descriptionStyle, title, titleStyle } = props;
-	const ItemComponent = useComponent(props.component);
+	const { description, descriptionStyle, title, titleStyle, style, children, component } = props;
 	const { __ } = useIntl();
+	const BB = useBlueBase();
+
+	const ItemComponent = component ? BB.Components.resolveFromCache(component) : null;
 
 	const styles = useStyles('SettingsPageItemDesktop', props, defaultStyles);
 
@@ -59,13 +61,13 @@ export const SettingsPageItemMobile = (props: SettingsPageItemMobileProps) => {
 		);
 
 	return (
-		<View style={styles.root}>
+		<View style={[styles.root, style]}>
 			<View style={styles.header}>
 				{titleNode}
 				{descNode}
 			</View>
 			<View style={styles.contentStyles}>
-				<ItemComponent />
+				{ItemComponent ? <ItemComponent /> : children}
 			</View>
 		</View>
 	);