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: evaluate `ThemeView` (#4086) 

* chore: evaluate `ThemeView`

* update: `IThemeViewProps` to extend `IBaseScreen`

* update: `ThemeView` interface

* update: dependency array

* update: use `useLayoutEffect` instead
This commit is contained in:
Gerzon Z 2022-05-05 11:24:36 -04:00 committed by GitHub
parent 305f360b40
commit 88b4a3f672
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 48 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/stacks/InsideStack.tsx
View File

@ -175,7 +175,7 @@ const SettingsStackNavigator = () => {
options={E2EEncryptionSecurityView.navigationOptions} options={E2EEncryptionSecurityView.navigationOptions}
/> />
<SettingsStack.Screen name='LanguageView' component={LanguageView} options={LanguageView.navigationOptions} /> <SettingsStack.Screen name='LanguageView' component={LanguageView} options={LanguageView.navigationOptions} />
<SettingsStack.Screen name='ThemeView' component={ThemeView} options={ThemeView.navigationOptions} /> <SettingsStack.Screen name='ThemeView' component={ThemeView} />
<SettingsStack.Screen <SettingsStack.Screen
name='DefaultBrowserView' name='DefaultBrowserView'
component={DefaultBrowserView} component={DefaultBrowserView}

2
app/stacks/MasterDetailStack/index.tsx
View File

@ -178,7 +178,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
options={props => SettingsView.navigationOptions!({ ...props, isMasterDetail: true })} options={props => SettingsView.navigationOptions!({ ...props, isMasterDetail: true })}
/> />
<ModalStack.Screen name='LanguageView' component={LanguageView} options={LanguageView.navigationOptions} /> <ModalStack.Screen name='LanguageView' component={LanguageView} options={LanguageView.navigationOptions} />
<ModalStack.Screen name='ThemeView' component={ThemeView} options={ThemeView.navigationOptions} /> <ModalStack.Screen name='ThemeView' component={ThemeView} />
<ModalStack.Screen <ModalStack.Screen
name='DefaultBrowserView' name='DefaultBrowserView'
component={DefaultBrowserView} component={DefaultBrowserView}

2
app/theme.tsx
View File

@ -8,7 +8,7 @@ import { colors } from './lib/constants';
export type TSupportedThemes = keyof typeof colors; export type TSupportedThemes = keyof typeof colors;
export type TColors = typeof colors[TSupportedThemes]; export type TColors = typeof colors[TSupportedThemes];
interface IThemeContextProps { export interface IThemeContextProps {
theme: TSupportedThemes; theme: TSupportedThemes;
themePreferences?: IThemePreference; themePreferences?: IThemePreference;
setTheme?: (newTheme?: {}) => void; setTheme?: (newTheme?: {}) => void;

95
app/views/ThemeView.tsx
View File

@ -1,8 +1,8 @@
import React from 'react'; import React, { useLayoutEffect } from 'react';
import { StackNavigationOptions } from '@react-navigation/stack';
import { SettingsStackParamList } from '../stacks/types';
import I18n from '../i18n'; import I18n from '../i18n';
import { TSupportedThemes, withTheme } from '../theme'; import { useTheme } from '../theme';
import StatusBar from '../containers/StatusBar'; import StatusBar from '../containers/StatusBar';
import * as List from '../containers/List'; import * as List from '../containers/List';
import { supportSystemTheme } from '../utils/deviceInfo'; import { supportSystemTheme } from '../utils/deviceInfo';
@ -11,6 +11,7 @@ import UserPreferences from '../lib/methods/userPreferences';
import { events, logEvent } from '../utils/log'; import { events, logEvent } from '../utils/log';
import { IThemePreference, TThemeMode, TDarkLevel } from '../definitions/ITheme'; import { IThemePreference, TThemeMode, TDarkLevel } from '../definitions/ITheme';
import { THEME_PREFERENCES_KEY, themes } from '../lib/constants'; import { THEME_PREFERENCES_KEY, themes } from '../lib/constants';
import { IBaseScreen } from '../definitions';
const THEME_GROUP = 'THEME_GROUP'; const THEME_GROUP = 'THEME_GROUP';
const DARK_GROUP = 'DARK_GROUP'; const DARK_GROUP = 'DARK_GROUP';
@ -57,21 +58,20 @@ interface ITheme {
group: string; group: string;
} }
interface IThemeViewProps { type IThemeViewProps = IBaseScreen<SettingsStackParamList, 'ThemeView'>;
theme: TSupportedThemes;
themePreferences: IThemePreference;
setTheme(newTheme?: IThemePreference): void;
}
class ThemeView extends React.Component<IThemeViewProps> { const ThemeView = ({ navigation }: IThemeViewProps): React.ReactElement => {
static navigationOptions = (): StackNavigationOptions => ({ const { theme, themePreferences, setTheme } = useTheme();
title: I18n.t('Theme')
});
isSelected = (item: ITheme) => { useLayoutEffect(() => {
const { themePreferences } = this.props; navigation.setOptions({
title: I18n.t('Theme')
});
}, [navigation]);
const isSelected = (item: ITheme) => {
const { group } = item; const { group } = item;
const { darkLevel, currentTheme } = themePreferences; const { darkLevel, currentTheme } = themePreferences as IThemePreference;
if (group === THEME_GROUP) { if (group === THEME_GROUP) {
return item.value === currentTheme; return item.value === currentTheme;
} }
@ -80,9 +80,8 @@ class ThemeView extends React.Component<IThemeViewProps> {
} }
}; };
onClick = (item: ITheme) => { const onClick = (item: ITheme) => {
const { themePreferences } = this.props; const { darkLevel, currentTheme } = themePreferences as IThemePreference;
const { darkLevel, currentTheme } = themePreferences;
const { value, group } = item; const { value, group } = item;
let changes: Partial<IThemePreference> = {}; let changes: Partial<IThemePreference> = {};
if (group === THEME_GROUP && currentTheme !== value) { if (group === THEME_GROUP && currentTheme !== value) {
@ -93,53 +92,49 @@ class ThemeView extends React.Component<IThemeViewProps> {
logEvent(events.THEME_SET_DARK_LEVEL, { dark_level: value }); logEvent(events.THEME_SET_DARK_LEVEL, { dark_level: value });
changes = { darkLevel: value as TDarkLevel }; changes = { darkLevel: value as TDarkLevel };
} }
this.setTheme(changes); _setTheme(changes);
}; };
setTheme = (theme: Partial<IThemePreference>) => { const _setTheme = (theme: Partial<IThemePreference>) => {
const { setTheme, themePreferences } = this.props; const newTheme: IThemePreference = { ...(themePreferences as IThemePreference), ...theme };
const newTheme = { ...themePreferences, ...theme }; if (setTheme) {
setTheme(newTheme); setTheme(newTheme);
UserPreferences.setMap(THEME_PREFERENCES_KEY, newTheme); UserPreferences.setMap(THEME_PREFERENCES_KEY, newTheme);
}
}; };
renderIcon = () => { const renderIcon = () => <List.Icon name='check' color={themes[theme].tintColor} />;
const { theme } = this.props;
return <List.Icon name='check' color={themes[theme].tintColor} />;
};
renderItem = ({ item }: { item: ITheme }) => { const renderItem = ({ item }: { item: ITheme }) => {
const { label, value } = item; const { label, value } = item;
return ( return (
<> <>
<List.Item <List.Item
title={label} title={label}
onPress={() => this.onClick(item)} onPress={() => onClick(item)}
testID={`theme-view-${value}`} testID={`theme-view-${value}`}
right={() => (this.isSelected(item) ? this.renderIcon() : null)} right={() => (isSelected(item) ? renderIcon() : null)}
/> />
<List.Separator /> <List.Separator />
</> </>
); );
}; };
render() { return (
return ( <SafeAreaView testID='theme-view'>
<SafeAreaView testID='theme-view'> <StatusBar />
<StatusBar /> <List.Container>
<List.Container> <List.Section title='Theme'>
<List.Section title='Theme'> <List.Separator />
<List.Separator /> <>{themeGroup.map(item => renderItem({ item }))}</>
<>{themeGroup.map(item => this.renderItem({ item }))}</> </List.Section>
</List.Section> <List.Section title='Dark_level'>
<List.Section title='Dark_level'> <List.Separator />
<List.Separator /> <>{darkGroup.map(item => renderItem({ item }))}</>
<>{darkGroup.map(item => this.renderItem({ item }))}</> </List.Section>
</List.Section> </List.Container>
</List.Container> </SafeAreaView>
</SafeAreaView> );
); };
}
}
export default withTheme(ThemeView); export default ThemeView;