sergiodt
/
vn-verdnaturachat
0
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}
/>
<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
name='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 })}
/>
<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
name='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 TColors = typeof colors[TSupportedThemes];
interface IThemeContextProps {
export interface IThemeContextProps {
theme: TSupportedThemes;
themePreferences?: IThemePreference;
setTheme?: (newTheme?: {}) => void;

95
app/views/ThemeView.tsx
View File

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