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 ServerItem - TypeScript Migration (#4015) 

* chore: evaluate ServerItem

* update: IServerInfo interface

* chore: move `ServerItem` to `containers` folder

* update: `ServerItem` import on Storybook

* update: `themes` import
This commit is contained in:
Gerzon Z 2022-04-07 13:07:16 -04:00 committed by GitHub
parent e525392713
commit cd0c8abced
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 77 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
app/containers/ServerItem/index.tsx Normal file
View File

@ -0,0 +1,64 @@
import React from 'react';
// @ts-ignore // TODO: Remove on react-native update
import { Pressable, Text, View } from 'react-native';
import FastImage from '@rocket.chat/react-native-fast-image';
import { IServerInfo } from '../../definitions';
import Check from '../Check';
import styles, { ROW_HEIGHT } from './styles';
import { themes } from '../../lib/constants';
import { isIOS } from '../../utils/deviceInfo';
import { useTheme } from '../../theme';
export { ROW_HEIGHT };
interface IServerItem {
item: IServerInfo;
onPress(): void;
onLongPress?(): void;
hasCheck?: boolean;
}
const defaultLogo = require('../../static/images/logo.png');
const ServerItem = React.memo(({ item, onPress, onLongPress, hasCheck }: IServerItem) => {
const { theme } = useTheme();
return (
<Pressable
onPress={onPress}
onLongPress={() => onLongPress?.()}
testID={`rooms-list-header-server-${item.id}`}
android_ripple={{ color: themes[theme].bannerBackground }}
style={({ pressed }: { pressed: boolean }) => ({
backgroundColor: isIOS && pressed ? themes[theme].bannerBackground : themes[theme].backgroundColor
})}>
<View style={styles.serverItemContainer}>
{item.iconURL ? (
<FastImage
source={{
uri: item.iconURL,
priority: FastImage.priority.high
}}
// @ts-ignore TODO: Remove when updating FastImage
defaultSource={defaultLogo}
style={styles.serverIcon}
onError={() => console.log('err_loading_server_icon')}
/>
) : (
<FastImage source={defaultLogo} style={styles.serverIcon} />
)}
<View style={styles.serverTextContainer}>
<Text numberOfLines={1} style={[styles.serverName, { color: themes[theme].titleText }]}>
{item.name || item.id}
</Text>
<Text numberOfLines={1} style={[styles.serverUrl, { color: themes[theme].auxiliaryText }]}>
{item.id}
</Text>
</View>
{hasCheck ? <Check /> : null}
</View>
</Pressable>
);
});
export default ServerItem;

0
app/presentation/ServerItem/styles.ts → app/containers/ServerItem/styles.ts
View File

7
app/definitions/IServer.ts
View File

@ -19,4 +19,11 @@ export interface IServer {
E2E_Enable: boolean;
}
export interface IServerInfo {
id: string;
iconURL: string;
name: string;
useRealName?: boolean;
}
export type TServerModel = IServer & Model;

67
app/presentation/ServerItem/index.tsx
View File

@ -1,67 +0,0 @@
import React from 'react';
// @ts-ignore
import { Pressable, Text, View } from 'react-native';
import FastImage from '@rocket.chat/react-native-fast-image';
import Check from '../../containers/Check';
import styles, { ROW_HEIGHT } from './styles';
import { themes } from '../../lib/constants';
import { isIOS } from '../../utils/deviceInfo';
import { withTheme } from '../../theme';
export { ROW_HEIGHT };
interface IServerItem {
item: {
id: string;
iconURL: string;
name: string;
};
onPress(): void;
onLongPress?(): void;
hasCheck?: boolean;
theme?: string;
}
const defaultLogo = require('../../static/images/logo.png');
const ServerItem = React.memo(({ item, onPress, onLongPress, hasCheck, theme }: IServerItem) => (
<Pressable
onPress={onPress}
onLongPress={() => onLongPress?.()}
testID={`rooms-list-header-server-${item.id}`}
android_ripple={{
color: themes[theme!].bannerBackground
}}
style={({ pressed }: any) => ({
backgroundColor: isIOS && pressed ? themes[theme!].bannerBackground : themes[theme!].backgroundColor
})}>
<View style={styles.serverItemContainer}>
{item.iconURL ? (
<FastImage
source={{
uri: item.iconURL,
priority: FastImage.priority.high
}}
// @ts-ignore
defaultSource={defaultLogo}
style={styles.serverIcon}
onError={() => console.log('err_loading_server_icon')}
/>
) : (
<FastImage source={defaultLogo} style={styles.serverIcon} />
)}
<View style={styles.serverTextContainer}>
<Text numberOfLines={1} style={[styles.serverName, { color: themes[theme!].titleText }]}>
{item.name || item.id}
</Text>
<Text numberOfLines={1} style={[styles.serverUrl, { color: themes[theme!].auxiliaryText }]}>
{item.id}
</Text>
</View>
{hasCheck ? <Check /> : null}
</View>
</Pressable>
));
export default withTheme(ServerItem);

5
app/views/RoomsListView/ServerDropdown.tsx
View File

@ -12,7 +12,7 @@ import { appStart } from '../../actions/app';
import RocketChat from '../../lib/rocketchat';
import I18n from '../../i18n';
import EventEmitter from '../../utils/events';
import ServerItem from '../../presentation/ServerItem';
import ServerItem from '../../containers/ServerItem';
import database from '../../lib/database';
import { themes } from '../../lib/constants';
import { withTheme } from '../../theme';
@ -180,7 +180,7 @@ class ServerDropdown extends Component<IServerDropdownProps, IServerDropdownStat
};
renderServer = ({ item }: { item: { id: string; iconURL: string; name: string; version: string } }) => {
const { server, theme } = this.props;
const { server } = this.props;
return (
<ServerItem
@ -188,7 +188,6 @@ class ServerDropdown extends Component<IServerDropdownProps, IServerDropdownStat
onPress={() => this.select(item.id, item.version)}
onLongPress={() => item.id === server || this.remove(item.id)}
hasCheck={item.id === server}
theme={theme}
/>
);
};

2
app/views/SelectServerView.tsx
View File

@ -6,7 +6,7 @@ import { Q, Model } from '@nozbe/watermelondb';
import I18n from '../i18n';
import StatusBar from '../containers/StatusBar';
import ServerItem, { ROW_HEIGHT } from '../presentation/ServerItem';
import ServerItem, { ROW_HEIGHT } from '../containers/ServerItem';
import { shareExtensionInit } from '../lib/services/shareExtension';
import database from '../lib/database';
import SafeAreaView from '../containers/SafeAreaView';

9
app/views/ShareListView/index.tsx
View File

@ -12,7 +12,7 @@ import database from '../../lib/database';
import { isAndroid, isIOS } from '../../utils/deviceInfo';
import I18n from '../../i18n';
import DirectoryItem, { ROW_HEIGHT } from '../../presentation/DirectoryItem';
import ServerItem from '../../presentation/ServerItem';
import ServerItem from '../../containers/ServerItem';
import * as HeaderButton from '../../containers/HeaderButton';
import ActivityIndicator from '../../containers/ActivityIndicator';
import * as List from '../../containers/List';
@ -24,6 +24,7 @@ import RocketChat from '../../lib/rocketchat';
import { sanitizeLikeString } from '../../lib/database/utils';
import styles from './styles';
import ShareListHeader from './Header';
import { IServerInfo } from '../../definitions';
interface IDataFromShare {
value: string;
@ -52,12 +53,6 @@ interface IChat {
description: string;
}
interface IServerInfo {
id: string;
iconURL: string;
name: string;
useRealName: boolean;
}
interface IState {
searching: boolean;
searchText: string;

3
storybook/stories/ServerItem.js
View File

@ -1,8 +1,7 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions, react/prop-types */
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import ServerItemComponent from '../../app/presentation/ServerItem';
import ServerItemComponent from '../../app/containers/ServerItem';
import { ThemeContext } from '../../app/theme';
const stories = storiesOf('ServerItem', module);