verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chore: Improve code and migrate some props to hooks on ThemeView (#4414) 

Co-authored-by: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com>
This commit is contained in:
Gleidson Daniel Silva 2022-09-12 10:16:00 -03:00 committed by GitHub
parent 07f0618ab4
commit 989ced89bc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 61 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
app/views/ThemeView.tsx
View File

@ -1,17 +1,16 @@
import React, { useLayoutEffect } from 'react';
import { useNavigation } from '@react-navigation/native';
import { SettingsStackParamList } from '../stacks/types';
import I18n from '../i18n';
import { useTheme } from '../theme';
import StatusBar from '../containers/StatusBar';
import * as List from '../containers/List';
import { supportSystemTheme } from '../lib/methods/helpers';
import SafeAreaView from '../containers/SafeAreaView';
import UserPreferences from '../lib/methods/userPreferences';
import StatusBar from '../containers/StatusBar';
import { IThemePreference, TDarkLevel, TThemeMode } from '../definitions/ITheme';
import I18n from '../i18n';
import { THEME_PREFERENCES_KEY } from '../lib/constants';
import { supportSystemTheme } from '../lib/methods/helpers';
import { events, logEvent } from '../lib/methods/helpers/log';
import { IThemePreference, TThemeMode, TDarkLevel } from '../definitions/ITheme';
import { THEME_PREFERENCES_KEY, themes } from '../lib/constants';
import { IBaseScreen } from '../definitions';
import UserPreferences from '../lib/methods/userPreferences';
import { useTheme } from '../theme';
const THEME_GROUP = 'THEME_GROUP';
const DARK_GROUP = 'DARK_GROUP';
@ -58,16 +57,40 @@ interface ITheme {
group: string;
}
type IThemeViewProps = IBaseScreen<SettingsStackParamList, 'ThemeView'>;
const Item = ({
onPress,
label,
value,
isSelected
}: {
onPress: () => void;
label: string;
value: string;
isSelected: boolean;
}) => {
const { colors } = useTheme();
return (
<>
<List.Item
title={label}
onPress={onPress}
testID={`theme-view-${value}`}
right={() => (isSelected ? <List.Icon name='check' color={colors.tintColor} /> : null)}
/>
<List.Separator />
</>
);
};
const ThemeView = ({ navigation }: IThemeViewProps): React.ReactElement => {
const { theme, themePreferences, setTheme } = useTheme();
const ThemeView = (): React.ReactElement => {
const { themePreferences, setTheme } = useTheme();
const { setOptions } = useNavigation();
useLayoutEffect(() => {
navigation.setOptions({
setOptions({
title: I18n.t('Theme')
});
}, [navigation]);
}, []);
const isSelected = (item: ITheme) => {
const { group } = item;
@ -92,10 +115,10 @@ const ThemeView = ({ navigation }: IThemeViewProps): React.ReactElement => {
logEvent(events.THEME_SET_DARK_LEVEL, { dark_level: value });
changes = { darkLevel: value as TDarkLevel };
}
_setTheme(changes);
handleTheme(changes);
};
const _setTheme = (theme: Partial<IThemePreference>) => {
const handleTheme = (theme: Partial<IThemePreference>) => {
const newTheme: IThemePreference = { ...(themePreferences as IThemePreference), ...theme };
if (setTheme) {
setTheme(newTheme);
@ -103,34 +126,37 @@ const ThemeView = ({ navigation }: IThemeViewProps): React.ReactElement => {
}
};
const renderIcon = () => <List.Icon name='check' color={themes[theme].tintColor} />;
const renderItem = ({ item }: { item: ITheme }) => {
const { label, value } = item;
return (
<>
<List.Item
title={label}
onPress={() => onClick(item)}
testID={`theme-view-${value}`}
right={() => (isSelected(item) ? renderIcon() : null)}
/>
<List.Separator />
</>
);
};
return (
<SafeAreaView testID='theme-view'>
<StatusBar />
<List.Container>
<List.Section title='Theme'>
<List.Separator />
<>{themeGroup.map(item => renderItem({ item }))}</>
<>
{themeGroup.map(theme => (
<Item
onPress={() => onClick(theme)}
label={theme.label}
value={theme.value}
isSelected={!!isSelected(theme)}
key={theme.label}
/>
))}
</>
</List.Section>
<List.Section title='Dark_level'>
<List.Separator />
<>{darkGroup.map(item => renderItem({ item }))}</>
<>
{darkGroup.map(theme => (
<Item
onPress={() => onClick(theme)}
label={theme.label}
value={theme.value}
isSelected={!!isSelected(theme)}
key={theme.label}
/>
))}
</>
</List.Section>
</List.Container>
</SafeAreaView>