diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap
index 6d1aa6a60..9d9a30e35 100644
--- a/__tests__/__snapshots__/Storyshots.test.js.snap
+++ b/__tests__/__snapshots__/Storyshots.test.js.snap
@@ -61007,6 +61007,1157 @@ exports[`Storyshots RoomItem list roomitem 1`] = `
`;
+exports[`Storyshots ServerItem content 1`] = `
+Array [
+
+
+
+
+
+
+
+ Rocket.Chat
+
+
+ https://open.rocket.chat/
+
+
+
+
+
+
+ ,
+
+
+
+
+
+
+
+ Super Long Server Name in Rocket.Chat
+
+
+ https://superlongservername.tologintoasuperlongservername/
+
+
+
+ ,
+
+
+
+
+
+
+
+ https://stable.rocket.chat/
+
+
+ https://stable.rocket.chat/
+
+
+
+ ,
+]
+`;
+
+exports[`Storyshots ServerItem themes 1`] = `
+Array [
+
+
+
+
+
+
+
+ Rocket.Chat
+
+
+ https://open.rocket.chat/
+
+
+
+
+
+
+ ,
+
+
+
+
+
+
+
+ Rocket.Chat
+
+
+ https://open.rocket.chat/
+
+
+
+
+
+
+ ,
+
+
+
+
+
+
+
+ Rocket.Chat
+
+
+ https://open.rocket.chat/
+
+
+
+
+
+
+ ,
+]
+`;
+
+exports[`Storyshots ServerItem touchable 1`] = `
+Array [
+
+
+
+
+
+
+
+ Rocket.Chat
+
+
+ https://open.rocket.chat/
+
+
+
+ ,
+
+
+
+
+
+
+
+ Rocket.Chat
+
+
+ https://open.rocket.chat/
+
+
+
+ ,
+
+
+
+
+
+
+
+ Rocket.Chat
+
+
+ https://open.rocket.chat/
+
+
+
+ ,
+]
+`;
+
exports[`Storyshots Thread Messages.Item badge 1`] = `
diff --git a/app/presentation/ServerItem/index.js b/app/presentation/ServerItem/index.js
index d71b16e7d..ab69020f2 100644
--- a/app/presentation/ServerItem/index.js
+++ b/app/presentation/ServerItem/index.js
@@ -1,23 +1,33 @@
import React from 'react';
import PropTypes from 'prop-types';
-import { View, Text } from 'react-native';
+import { View, Text, Pressable } from 'react-native';
import FastImage from '@rocket.chat/react-native-fast-image';
-import Touch from '../../utils/touch';
import Check from '../../containers/Check';
import styles, { ROW_HEIGHT } from './styles';
import { themes } from '../../constants/colors';
+import { isIOS } from '../../utils/deviceInfo';
+import { withTheme } from '../../theme';
export { ROW_HEIGHT };
+const defaultLogo = require('../../static/images/logo.png');
+
const ServerItem = React.memo(({
- server, item, onPress, hasCheck, theme
+ item, onPress, onLongPress, hasCheck, theme
}) => (
- onLongPress?.()}
testID={`rooms-list-header-server-${ item.id }`}
- theme={theme}
+ android_ripple={{
+ color: themes[theme].bannerBackground
+ }}
+ style={({ pressed }) => ({
+ backgroundColor: isIOS && pressed
+ ? themes[theme].bannerBackground
+ : themes[theme].backgroundColor
+ })}
>
{item.iconURL
@@ -27,33 +37,33 @@ const ServerItem = React.memo(({
uri: item.iconURL,
priority: FastImage.priority.high
}}
- defaultSource={require('../../static/images/logo.png')}
+ defaultSource={defaultLogo}
style={styles.serverIcon}
onError={() => console.log('err_loading_server_icon')}
/>
)
: (
)
}
- {item.name || item.id}
- {item.id}
+ {item.name || item.id}
+ {item.id}
- {item.id === server && hasCheck ? : null}
+ {hasCheck ? : null}
-
+
));
ServerItem.propTypes = {
- onPress: PropTypes.func.isRequired,
item: PropTypes.object.isRequired,
+ onPress: PropTypes.func.isRequired,
+ onLongPress: PropTypes.func,
hasCheck: PropTypes.bool,
- server: PropTypes.string,
theme: PropTypes.string
};
-export default ServerItem;
+export default withTheme(ServerItem);
diff --git a/app/presentation/ServerItem/styles.js b/app/presentation/ServerItem/styles.js
index 34ed0c158..ece4105df 100644
--- a/app/presentation/ServerItem/styles.js
+++ b/app/presentation/ServerItem/styles.js
@@ -5,10 +5,6 @@ import sharedStyles from '../../views/Styles';
export const ROW_HEIGHT = 56;
export default StyleSheet.create({
- serverItem: {
- height: ROW_HEIGHT,
- justifyContent: 'center'
- },
serverItemContainer: {
flexDirection: 'row',
alignItems: 'center'
@@ -16,20 +12,22 @@ export default StyleSheet.create({
serverIcon: {
width: 44,
height: 44,
- marginHorizontal: 15,
- borderRadius: 4
+ margin: 12,
+ borderRadius: 4,
+ resizeMode: 'contain'
},
serverTextContainer: {
flex: 1,
flexDirection: 'column',
- justifyContent: 'center'
+ justifyContent: 'center',
+ paddingRight: 18
},
serverName: {
fontSize: 18,
...sharedStyles.textSemibold
},
serverUrl: {
- fontSize: 15,
+ fontSize: 16,
...sharedStyles.textRegular
}
});
diff --git a/app/views/RoomsListView/ServerDropdown.js b/app/views/RoomsListView/ServerDropdown.js
index 66ac731cb..95d6603bd 100644
--- a/app/views/RoomsListView/ServerDropdown.js
+++ b/app/views/RoomsListView/ServerDropdown.js
@@ -1,6 +1,6 @@
import React, { Component } from 'react';
import {
- View, Text, Animated, Easing, TouchableWithoutFeedback, TouchableOpacity, FlatList, Image, Pressable
+ View, Text, Animated, Easing, TouchableWithoutFeedback, TouchableOpacity, FlatList
} from 'react-native';
import PropTypes from 'prop-types';
import { connect, batch } from 'react-redux';
@@ -14,12 +14,12 @@ import styles from './styles';
import RocketChat from '../../lib/rocketchat';
import I18n from '../../i18n';
import EventEmitter from '../../utils/events';
-import Check from '../../containers/Check';
+import ServerItem from '../../presentation/ServerItem';
import database from '../../lib/database';
import { themes } from '../../constants/colors';
import { withTheme } from '../../theme';
import { KEY_COMMAND, handleCommandSelectServer } from '../../commands';
-import { isTablet, isIOS } from '../../utils/deviceInfo';
+import { isTablet } from '../../utils/deviceInfo';
import { localAuthenticate } from '../../utils/localAuthentication';
import { showConfirmationAlert } from '../../utils/info';
import { logEvent, events } from '../../utils/log';
@@ -202,43 +202,13 @@ class ServerDropdown extends Component {
const { server, theme } = this.props;
return (
- this.select(item.id)}
onLongPress={() => (item.id === server || this.remove(item.id))}
- testID={`rooms-list-header-server-${ item.id }`}
- android_ripple={{
- color: themes[theme].bannerBackground
- }}
- style={({ pressed }) => ({
- backgroundColor: isIOS && pressed
- ? themes[theme].bannerBackground
- : 'transparent'
- })}
- >
-
- {item.iconURL
- ? (
- console.warn('error loading serverIcon')}
- />
- )
- : (
-
- )
- }
-
- {item.name || item.id}
- {item.id}
-
- {item.id === server ? : null}
-
-
+ hasCheck={item.id === server}
+ theme={theme}
+ />
);
}
diff --git a/app/views/SelectServerView.js b/app/views/SelectServerView.js
index f956feba5..72a6b939f 100644
--- a/app/views/SelectServerView.js
+++ b/app/views/SelectServerView.js
@@ -65,10 +65,9 @@ class SelectServerView extends React.Component {
const { server, theme } = this.props;
return (
this.select(item.id)}
item={item}
- hasCheck
+ hasCheck={item.id === server}
theme={theme}
/>
);
diff --git a/storybook/stories/ServerItem.js b/storybook/stories/ServerItem.js
new file mode 100644
index 000000000..d1c53ee01
--- /dev/null
+++ b/storybook/stories/ServerItem.js
@@ -0,0 +1,73 @@
+/* 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 { ThemeContext } from '../../app/theme';
+
+const stories = storiesOf('ServerItem', module);
+
+const themes = {
+ light: 'light',
+ dark: 'dark',
+ black: 'black'
+};
+
+const item = {
+ name: 'Rocket.Chat',
+ id: 'https://open.rocket.chat/',
+ iconURL: 'https://open.rocket.chat/images/logo/android-chrome-512x512.png'
+};
+
+const ServerItem = props => (
+
+);
+
+stories.add('content', () => (
+ <>
+
+
+
+
+));
+
+stories.add('touchable', () => (
+ <>
+ alert('Long Press')} onPress={() => alert('Press')} />
+ alert('Press')} />
+ alert('Long Press')} />
+
+));
+
+const ThemeStory = ({ theme }) => (
+
+
+
+);
+
+stories.add('themes', () => (
+ <>
+
+
+
+
+));
diff --git a/storybook/stories/index.js b/storybook/stories/index.js
index 693e921b1..8edb159ba 100644
--- a/storybook/stories/index.js
+++ b/storybook/stories/index.js
@@ -6,6 +6,7 @@ import { storiesOf } from '@storybook/react-native';
import RoomItem from './RoomItem';
import './List';
+import './ServerItem';
import Message from './Message';
import UiKitMessage from './UiKitMessage';
import UiKitModal from './UiKitModal';