Chore: Migrate ThemeView to Typescript (#3522)

Co-authored-by: AlexAlexandre <alexalexandrejr@gmail.com>
This commit is contained in:
Reinaldo Neto 2021-12-02 10:33:27 -03:00 committed by GitHub
parent afaa185fe7
commit ceeca5952d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 14 deletions

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import { StackNavigationOptions } from '@react-navigation/stack';
import I18n from '../i18n'; import I18n from '../i18n';
import { withTheme } from '../theme'; import { withTheme } from '../theme';
@ -51,18 +51,29 @@ if (supportSystemTheme()) {
const themeGroup = THEMES.filter(item => item.group === THEME_GROUP); const themeGroup = THEMES.filter(item => item.group === THEME_GROUP);
const darkGroup = THEMES.filter(item => item.group === DARK_GROUP); const darkGroup = THEMES.filter(item => item.group === DARK_GROUP);
class ThemeView extends React.Component { interface ITheme {
static navigationOptions = () => ({ label: string;
value: string;
group: string;
}
interface IThemePreference {
currentTheme?: string;
darkLevel?: string;
}
interface IThemeViewProps {
theme: string;
themePreferences: IThemePreference;
setTheme(newTheme?: IThemePreference): void;
}
class ThemeView extends React.Component<IThemeViewProps> {
static navigationOptions = (): StackNavigationOptions => ({
title: I18n.t('Theme') title: I18n.t('Theme')
}); });
static propTypes = { isSelected = (item: ITheme) => {
theme: PropTypes.string,
themePreferences: PropTypes.object,
setTheme: PropTypes.func
};
isSelected = item => {
const { themePreferences } = this.props; const { themePreferences } = this.props;
const { group } = item; const { group } = item;
const { darkLevel, currentTheme } = themePreferences; const { darkLevel, currentTheme } = themePreferences;
@ -74,11 +85,11 @@ class ThemeView extends React.Component {
} }
}; };
onClick = item => { onClick = (item: ITheme) => {
const { themePreferences } = this.props; const { themePreferences } = this.props;
const { darkLevel, currentTheme } = themePreferences; const { darkLevel, currentTheme } = themePreferences;
const { value, group } = item; const { value, group } = item;
let changes = {}; let changes: IThemePreference = {};
if (group === THEME_GROUP && currentTheme !== value) { if (group === THEME_GROUP && currentTheme !== value) {
logEvent(events.THEME_SET_THEME_GROUP, { theme_group: value }); logEvent(events.THEME_SET_THEME_GROUP, { theme_group: value });
changes = { currentTheme: value }; changes = { currentTheme: value };
@ -90,7 +101,7 @@ class ThemeView extends React.Component {
this.setTheme(changes); this.setTheme(changes);
}; };
setTheme = async theme => { setTheme = async (theme: IThemePreference) => {
const { setTheme, themePreferences } = this.props; const { setTheme, themePreferences } = this.props;
const newTheme = { ...themePreferences, ...theme }; const newTheme = { ...themePreferences, ...theme };
setTheme(newTheme); setTheme(newTheme);
@ -102,7 +113,7 @@ class ThemeView extends React.Component {
return <List.Icon name='check' color={themes[theme].tintColor} />; return <List.Icon name='check' color={themes[theme].tintColor} />;
}; };
renderItem = ({ item }) => { renderItem = ({ item }: { item: ITheme }) => {
const { label, value } = item; const { label, value } = item;
return ( return (
<> <>