feat: Added setting groups

BlueBaseJS · Dec 31, 2023 · b6613c7 · b6613c7
1 parent d5ecf06
commit b6613c7
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 7 deletions.
diff --git a/src/configs/defaultConfigs.ts b/src/configs/defaultConfigs.ts
@@ -1,4 +1,6 @@
 export const defaultConfigs = {
+	'plugin.settings-app.group-sort-order': ['General', 'Appearance', 'Account', 'Advanced', 'About'],
+
 	/** Support email. If set, Email option is show in Support section of About page */
 	'plugin.settings-app.support.email': null,
 

diff --git a/src/layouts/SettingsLayoutDesktop/SettingsLayoutDesktop.tsx b/src/layouts/SettingsLayoutDesktop/SettingsLayoutDesktop.tsx
@@ -16,10 +16,11 @@ export interface SettingsLayoutDesktopStyles {
 
 export interface SettingsLayoutDesktopProps extends CreateSettingsRoutesOptions {
 	page?: string;
+	groupSortOrder?: string[];
 }
 
 export const SettingsLayoutDesktop = (props: SettingsLayoutDesktopProps) => {
-	const { pages, page, filter, mainRoute } = props;
+	const { pages, page, filter, mainRoute, groupSortOrder } = props;
 	const { theme } = useTheme();
 	const { rtl } = useIntl();
 
@@ -52,7 +53,7 @@ export const SettingsLayoutDesktop = (props: SettingsLayoutDesktopProps) => {
 			<View style={styles.menuColumn}>
 				<ScrollView>
 					<SafeAreaView>
-						<SettingsPageList pages={pages} name={mainRoute.name} />
+						<SettingsPageList pages={pages} name={mainRoute.name} groupSortOrder={groupSortOrder} />
 					</SafeAreaView>
 				</ScrollView>
 			</View>

diff --git a/src/layouts/SettingsPage/index.ts b/src/layouts/SettingsPage/index.ts
@@ -9,7 +9,9 @@ import { SettingsPageItemProps } from '../SettingsPageItem';
  */
 export type SettingsPageProps = RouteConfig & {
 	filter?: string;
+	group?: string;
 	items: SettingsPageItemProps[];
+
 	onPress?: () => void;
 	right?: ReactNode;
 

diff --git a/src/layouts/SettingsPageList/SettingsPageList.tsx b/src/layouts/SettingsPageList/SettingsPageList.tsx
@@ -17,6 +17,7 @@ export interface SettingsPageListProps {
 	filter?: string;
 	name: string;
 	pages: SettingsPageProps[];
+	groupSortOrder?: string[];
 }
 
 // function getTitle(options: StackNavigationOptions) {
@@ -75,20 +76,52 @@ export const SettingsPageList = (props: SettingsPageListProps) => {
 			left,
 			onPress: url ? openUrl : onPress,
 			right: url ? openUrlIcon : right,
-			title
+			title,
+			group: page.group,
 		};
 	});
 
 	const { loading, value: items, error } = useFilter(`${name}.settings.list.items`, listItems);
 
+	// Make groups
+	const groupSortOrder = props.groupSortOrder || [];
+	const groups: any[][] = groupSortOrder.map(() => []);
+	const ungrouped: any[] = [];
+
+	items.forEach((item: any) => {
+		if (item.group) {
+			// Find group index based on sortOrder, if not found, push group in sortOrder and use that index
+			let index = groupSortOrder.indexOf(item.group);
+			if (index === -1) {
+				groupSortOrder.push(item.group);
+				groups.push([]);
+				index = groupSortOrder.length - 1;
+			}
+
+			groups[index].push(item);
+		}
+		else {
+			ungrouped.push(item);
+		}
+	});
+
 	return (
 		<React.Fragment>
 			<HeaderComponent />
 			<StatefulComponent loading={loading} error={error} data={items}>
 				<List key={locale}>
-					{items.map(({ Component, key, title, ...rest }, index) => (
+					{ungrouped.map(({ Component, key, title, ...rest }, index) => (
 						<Component key={key || index} title={__(title)} {...rest} />
 					))}
+
+					{groupSortOrder.map((group, index) => groups[index].length > 0 && (
+						<React.Fragment key={group}>
+							<List.Subheader>{__(group)}</List.Subheader>
+							{groups[index].map(({ Component, key, title, ...rest }: any, index: number) => (
+								<Component key={key || index} title={__(title)} {...rest} />
+							))}
+						</React.Fragment>
+					))}
 				</List>
 			</StatefulComponent>
 			<FooterComponent />

diff --git a/src/layouts/SettingsScreen/SettingsScreen.tsx b/src/layouts/SettingsScreen/SettingsScreen.tsx
@@ -1,4 +1,4 @@
-import { isMobile } from '@bluebase/core';
+import { isMobile, useConfig } from '@bluebase/core';
 import React from 'react';
 import { ViewStyle } from 'react-native';
 
@@ -19,11 +19,15 @@ export interface SettingsScreenProps extends CreateSettingsRoutesOptions {
 }
 
 export const SettingsScreen = (props: SettingsScreenProps) => {
+
+	const [groupSortOrder] = useConfig('plugin.settings-app.group-sort-order');
+	// const sortKeys = ['General', 'Appearance', 'Account', 'Advanced', 'About'];
+
 	if (isMobile()) {
-		return <SettingsPageList {...props} />;
+		return <SettingsPageList groupSortOrder={groupSortOrder} {...props} />;
 	}
 
-	return <SettingsLayoutDesktop {...props} />;
+	return <SettingsLayoutDesktop groupSortOrder={groupSortOrder} {...props} />;
 };
 
 SettingsScreen.displayName = 'SettingsScreen';