verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Chore: Hooks app/views/DefaultBrowserView (#4424) 

* Chore: Hooks app/views/DefaultBrowserView

* fix type

* minor tweak

* item on new file

* minor tweaks

* minor tweak
This commit is contained in:
Reinaldo Neto 2022-08-19 10:46:58 -03:00 committed by GitHub
parent 6b3006d29f
commit ded2f3792a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 146 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/stacks/InsideStack.tsx
View File

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

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

@ -177,11 +177,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
/> />
<ModalStack.Screen name='LanguageView' component={LanguageView} options={LanguageView.navigationOptions} /> <ModalStack.Screen name='LanguageView' component={LanguageView} options={LanguageView.navigationOptions} />
<ModalStack.Screen name='ThemeView' component={ThemeView} /> <ModalStack.Screen name='ThemeView' component={ThemeView} />
<ModalStack.Screen <ModalStack.Screen name='DefaultBrowserView' component={DefaultBrowserView} />
name='DefaultBrowserView'
component={DefaultBrowserView}
options={DefaultBrowserView.navigationOptions}
/>
<ModalStack.Screen <ModalStack.Screen
name='ScreenLockConfigView' name='ScreenLockConfigView'
component={ScreenLockConfigView} component={ScreenLockConfigView}

153
app/views/DefaultBrowserView.tsx
View File

@ -1,153 +0,0 @@
import React from 'react';
import { StackNavigationOptions } from '@react-navigation/stack';
import { FlatList, Linking } from 'react-native';
import { SettingsStackParamList } from '../stacks/types';
import { IBaseScreen } from '../definitions';
import I18n from '../i18n';
import { withTheme } from '../theme';
import { themes } from '../lib/constants';
import StatusBar from '../containers/StatusBar';
import * as List from '../containers/List';
import { DEFAULT_BROWSER_KEY } from '../lib/methods/helpers/openLink';
import { isIOS } from '../lib/methods/helpers';
import SafeAreaView from '../containers/SafeAreaView';
import UserPreferences from '../lib/methods/userPreferences';
import { events, logEvent } from '../lib/methods/helpers/log';
type TValue = 'inApp' | 'systemDefault:' | 'googlechrome:' | 'firefox:' | 'brave:';
interface IBrowsersValues {
title: string;
value: TValue;
}
const DEFAULT_BROWSERS: IBrowsersValues[] = [
{
title: 'In_app',
value: 'inApp'
},
{
title: isIOS ? 'Safari' : 'Browser',
value: 'systemDefault:'
}
];
const BROWSERS: IBrowsersValues[] = [
{
title: 'Chrome',
value: 'googlechrome:'
},
{
title: 'Firefox',
value: 'firefox:'
},
{
title: 'Brave',
value: 'brave:'
}
];
interface IDefaultBrowserViewState {
browser: string | null;
supported: IBrowsersValues[];
}
type IDefaultBrowserViewProps = IBaseScreen<SettingsStackParamList, 'DefaultBrowserView'>;
class DefaultBrowserView extends React.Component<IDefaultBrowserViewProps, IDefaultBrowserViewState> {
static navigationOptions = (): StackNavigationOptions => ({
title: I18n.t('Default_browser')
});
constructor(props: IDefaultBrowserViewProps) {
super(props);
this.state = {
browser: null,
supported: []
};
if (isIOS) {
this.init();
}
}
componentDidMount() {
const browser = UserPreferences.getString(DEFAULT_BROWSER_KEY);
this.setState({ browser });
}
init = () => {
BROWSERS.forEach(browser => {
const { value } = browser;
Linking.canOpenURL(value).then(installed => {
if (installed) {
this.setState(({ supported }) => ({ supported: [...supported, browser] }));
}
});
});
};
isSelected = (value: TValue) => {
const { browser } = this.state;
if (!browser && value === 'systemDefault:') {
return true;
}
return browser === value;
};
changeDefaultBrowser = (newBrowser: TValue) => {
logEvent(events.DB_CHANGE_DEFAULT_BROWSER, { browser: newBrowser });
try {
const browser = newBrowser || 'systemDefault:';
UserPreferences.setString(DEFAULT_BROWSER_KEY, browser);
this.setState({ browser });
} catch {
logEvent(events.DB_CHANGE_DEFAULT_BROWSER_F);
}
};
renderIcon = () => {
const { theme } = this.props;
return <List.Icon name='check' color={themes[theme].tintColor} />;
};
renderItem = ({ item }: { item: IBrowsersValues }) => {
const { title, value } = item;
return (
<List.Item
title={I18n.t(title, { defaultValue: title })}
onPress={() => this.changeDefaultBrowser(value)}
testID={`default-browser-view-${title}`}
right={() => (this.isSelected(value) ? this.renderIcon() : null)}
translateTitle={false}
/>
);
};
renderHeader = () => (
<>
<List.Header title='Choose_where_you_want_links_be_opened' />
<List.Separator />
</>
);
render() {
const { supported } = this.state;
return (
<SafeAreaView testID='default-browser-view'>
<StatusBar />
<FlatList
data={DEFAULT_BROWSERS.concat(supported)}
keyExtractor={item => item.value}
contentContainerStyle={List.styles.contentContainerStyleFlatList}
renderItem={this.renderItem}
ListHeaderComponent={this.renderHeader}
ListFooterComponent={List.Separator}
ItemSeparatorComponent={List.Separator}
/>
</SafeAreaView>
);
}
}
export default withTheme(DefaultBrowserView);

34
app/views/DefaultBrowserView/Item.tsx Normal file
View File

@ -0,0 +1,34 @@
import React from 'react';
import I18n from '../../i18n';
import { useTheme } from '../../theme';
import * as List from '../../containers/List';
import { IBrowsersValues, TValue } from '.';
interface IRenderItem extends IBrowsersValues {
browser: string | null;
changeDefaultBrowser: (newBrowser: TValue) => void;
}
const Item = ({ title, value, browser, changeDefaultBrowser }: IRenderItem) => {
const { colors } = useTheme();
let isSelected = false;
if (!browser && value === 'systemDefault:') {
isSelected = true;
} else {
isSelected = browser === value;
}
return (
<List.Item
title={I18n.t(title, { defaultValue: title })}
onPress={() => changeDefaultBrowser(value)}
testID={`default-browser-view-${title}`}
right={() => (isSelected ? <List.Icon name='check' color={colors.tintColor} /> : null)}
translateTitle={false}
/>
);
};
export default Item;

110
app/views/DefaultBrowserView/index.tsx Normal file
View File

@ -0,0 +1,110 @@
import React, { useCallback, useEffect, useLayoutEffect, useState } from 'react';
import { FlatList, Linking } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import I18n from '../../i18n';
import StatusBar from '../../containers/StatusBar';
import * as List from '../../containers/List';
import { DEFAULT_BROWSER_KEY } from '../../lib/methods/helpers/openLink';
import { isIOS } from '../../lib/methods/helpers';
import SafeAreaView from '../../containers/SafeAreaView';
import UserPreferences from '../../lib/methods/userPreferences';
import { events, logEvent } from '../../lib/methods/helpers/log';
import Item from './Item';
export type TValue = 'inApp' | 'systemDefault:' | 'googlechrome:' | 'firefox:' | 'brave:';
export interface IBrowsersValues {
title: string;
value: TValue;
}
const DEFAULT_BROWSERS: IBrowsersValues[] = [
{
title: 'In_app',
value: 'inApp'
},
{
title: isIOS ? 'Safari' : 'Browser',
value: 'systemDefault:'
}
];
const BROWSERS: IBrowsersValues[] = [
{
title: 'Chrome',
value: 'googlechrome:'
},
{
title: 'Firefox',
value: 'firefox:'
},
{
title: 'Brave',
value: 'brave:'
}
];
const DefaultBrowserView = () => {
const [browser, setBrowser] = useState<string | null>(null);
const [supported, setSupported] = useState<IBrowsersValues[]>([]);
const navigation = useNavigation();
useLayoutEffect(() => {
navigation.setOptions({
title: I18n.t('Close_Chat')
});
}, [navigation]);
useEffect(() => {
const getBrowser = UserPreferences.getString(DEFAULT_BROWSER_KEY);
setBrowser(getBrowser);
if (isIOS) {
BROWSERS.forEach(browser => {
const { value } = browser;
Linking.canOpenURL(value).then(installed => {
if (installed) {
setSupported(supported => [...supported, browser]);
}
});
});
}
}, []);
const changeDefaultBrowser = useCallback((newBrowser: TValue) => {
logEvent(events.DB_CHANGE_DEFAULT_BROWSER, { browser: newBrowser });
try {
const browser = newBrowser || 'systemDefault:';
UserPreferences.setString(DEFAULT_BROWSER_KEY, browser);
setBrowser(browser);
} catch {
logEvent(events.DB_CHANGE_DEFAULT_BROWSER_F);
}
}, []);
return (
<SafeAreaView testID='default-browser-view'>
<StatusBar />
<FlatList
data={DEFAULT_BROWSERS.concat(supported)}
keyExtractor={item => item.value}
contentContainerStyle={List.styles.contentContainerStyleFlatList}
renderItem={({ item }) => (
<Item browser={browser} changeDefaultBrowser={changeDefaultBrowser} title={item.title} value={item.value} />
)}
ListHeaderComponent={
<>
<List.Header title='Choose_where_you_want_links_be_opened' />
<List.Separator />
</>
}
ListFooterComponent={List.Separator}
ItemSeparatorComponent={List.Separator}
/>
</SafeAreaView>
);
};
export default DefaultBrowserView;