Chore: Migrate ThemeView to Typescript (#3522)
Co-authored-by: AlexAlexandre <alexalexandrejr@gmail.com>
This commit is contained in:
parent
afaa185fe7
commit
ceeca5952d
|
@ -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 (
|
||||||
<>
|
<>
|
Loading…
Reference in New Issue