From a86d908eb9b22dffcfb7b8c22574b2c91ed6ee1f Mon Sep 17 00:00:00 2001 From: Gerzon Z Date: Fri, 8 Jan 2021 12:09:27 -0400 Subject: [PATCH 1/9] Updated ServerDropdown and ServerItem --- app/presentation/ServerItem/index.js | 31 ++++++++++------ app/presentation/ServerItem/styles.js | 11 ++++-- app/views/RoomsListView/ServerDropdown.js | 45 +++-------------------- 3 files changed, 31 insertions(+), 56 deletions(-) diff --git a/app/presentation/ServerItem/index.js b/app/presentation/ServerItem/index.js index 53163a43c15..15c09baca09 100644 --- a/app/presentation/ServerItem/index.js +++ b/app/presentation/ServerItem/index.js @@ -1,23 +1,30 @@ 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'; export { ROW_HEIGHT }; const ServerItem = React.memo(({ - server, item, onPress, hasCheck, theme + item, onPress, onLongPress, hasCheck, theme }) => ( - ({ + backgroundColor: isIOS && pressed + ? themes[theme].bannerBackground + : 'transparent' + })} > {item.iconURL @@ -27,14 +34,14 @@ const ServerItem = React.memo(({ uri: item.iconURL, priority: FastImage.priority.high }} - defaultSource={{ uri: 'logo' }} + defaultSource={require('../../static/images/logo.png')} style={styles.serverIcon} - onError={() => console.log('err_loading_server_icon')} + onError={() => console.warn('error loading serverIcon')} /> ) : ( ) @@ -43,16 +50,16 @@ const ServerItem = React.memo(({ {item.name || item.id} {item.id} - {item.id === server && hasCheck ? : null} + {hasCheck ? : null} - + )); ServerItem.propTypes = { onPress: PropTypes.func.isRequired, + onLongPress: PropTypes.func.isRequired, item: PropTypes.object.isRequired, hasCheck: PropTypes.bool, - server: PropTypes.string, theme: PropTypes.string }; diff --git a/app/presentation/ServerItem/styles.js b/app/presentation/ServerItem/styles.js index 34ed0c15857..4453a51e49b 100644 --- a/app/presentation/ServerItem/styles.js +++ b/app/presentation/ServerItem/styles.js @@ -11,13 +11,16 @@ export default StyleSheet.create({ }, serverItemContainer: { flexDirection: 'row', - alignItems: 'center' + alignItems: 'center', + height: 68 }, serverIcon: { width: 44, height: 44, - marginHorizontal: 15, - borderRadius: 4 + marginHorizontal: 12, + marginVertical: 13, + borderRadius: 4, + resizeMode: 'contain' }, serverTextContainer: { flex: 1, @@ -29,7 +32,7 @@ export default StyleSheet.create({ ...sharedStyles.textSemibold }, serverUrl: { - fontSize: 15, + fontSize: 16, ...sharedStyles.textRegular } }); diff --git a/app/views/RoomsListView/ServerDropdown.js b/app/views/RoomsListView/ServerDropdown.js index 0f49cef82c7..691c6896c7e 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,8 @@ 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} - - + this.select(item.id)} onLongPress={() => (item.id === server || this.remove(item.id))} hasCheck={item.id === server} theme={theme} /> + ); } From 02d454463d9f8de86950677ef7494c5721fb773d Mon Sep 17 00:00:00 2001 From: Gerzon Z Date: Mon, 11 Jan 2021 13:51:53 -0400 Subject: [PATCH 2/9] Added ServerItem stories --- .../__snapshots__/Storyshots.test.js.snap | 442 ++++++++++++++++++ app/presentation/ServerItem/index.js | 4 +- storybook/stories/ServerItem.js | 42 ++ storybook/stories/index.js | 3 + 4 files changed, 489 insertions(+), 2 deletions(-) create mode 100644 storybook/stories/ServerItem.js diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index d2bba5818b1..188b780f24f 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -61221,6 +61221,448 @@ exports[`Storyshots RoomItem list roomitem 1`] = ` `; +exports[`Storyshots ServerItem list serveritem 1`] = ` + + + + Unchecked server + + + + + + + + + https://open.rocket.chat/ + + + gerzon.canario + + + + + + Checked server + + + + + + + + + https://open.rocket.chat/ + + + gerzon.canario + + + +  + + + + + No icon + + + + + + + + + https://open.rocket.chat/ + + + gerzon.canario + + + + + + +`; + exports[`Storyshots Thread Messages.Item badge 1`] = ` diff --git a/app/presentation/ServerItem/index.js b/app/presentation/ServerItem/index.js index 15c09baca09..581be8e1472 100644 --- a/app/presentation/ServerItem/index.js +++ b/app/presentation/ServerItem/index.js @@ -47,8 +47,8 @@ const ServerItem = React.memo(({ ) } - {item.name || item.id} - {item.id} + {item.name || item.id} + {item.id} {hasCheck ? : null} diff --git a/storybook/stories/ServerItem.js b/storybook/stories/ServerItem.js new file mode 100644 index 00000000000..de51b6d189e --- /dev/null +++ b/storybook/stories/ServerItem.js @@ -0,0 +1,42 @@ +import React from 'react'; +import { ScrollView } from 'react-native'; + +import { themes } from '../../app/constants/colors'; +import ServerItemComponent from '../../app/presentation/ServerItem'; +import StoriesSeparator from './StoriesSeparator'; + +let _theme = 'light'; + +const item = { + name: 'https://open.rocket.chat/', + id: 'gerzon.canario', + iconURL: 'https://open.rocket.chat/images/logo/android-chrome-512x512.png' +}; + + +const ServerItem = props => ( + +); + +// eslint-disable-next-line react/prop-types +const Separator = ({ title }) => ; + +// eslint-disable-next-line react/prop-types +export default ({ theme }) => { + _theme = theme; + return ( + + + + + + + + + + + ); +}; diff --git a/storybook/stories/index.js b/storybook/stories/index.js index 693e921b1b7..88ff9aa9354 100644 --- a/storybook/stories/index.js +++ b/storybook/stories/index.js @@ -5,6 +5,7 @@ import { createStore, combineReducers } from 'redux'; import { storiesOf } from '@storybook/react-native'; import RoomItem from './RoomItem'; +import ServerItem from './ServerItem'; import './List'; import Message from './Message'; import UiKitMessage from './UiKitMessage'; @@ -74,6 +75,8 @@ const messageDecorator = story => ( storiesOf('RoomItem', module) .addDecorator(story => {story()}) .add('list roomitem', () => ); +storiesOf('ServerItem', module) + .add('list serveritem', () => ); storiesOf('Message', module) .addDecorator(story => {story()}) .addDecorator(messageDecorator) From 2bd1cf4c7ae04713e1737fcb99339fb925b03eb4 Mon Sep 17 00:00:00 2001 From: Gerzon Z Date: Wed, 13 Jan 2021 15:55:36 -0400 Subject: [PATCH 3/9] Update ServerDropdown.js --- app/views/RoomsListView/ServerDropdown.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/app/views/RoomsListView/ServerDropdown.js b/app/views/RoomsListView/ServerDropdown.js index 6390b85a866..95d6603bda9 100644 --- a/app/views/RoomsListView/ServerDropdown.js +++ b/app/views/RoomsListView/ServerDropdown.js @@ -202,8 +202,13 @@ class ServerDropdown extends Component { const { server, theme } = this.props; return ( - this.select(item.id)} onLongPress={() => (item.id === server || this.remove(item.id))} hasCheck={item.id === server} theme={theme} /> - + this.select(item.id)} + onLongPress={() => (item.id === server || this.remove(item.id))} + hasCheck={item.id === server} + theme={theme} + /> ); } From 574e9aa0dcc6df4a06805d1328c4286a3e34f684 Mon Sep 17 00:00:00 2001 From: Gerzon Z Date: Wed, 13 Jan 2021 18:25:02 -0400 Subject: [PATCH 4/9] Updated ServerItem stories --- .../__snapshots__/Storyshots.test.js.snap | 2227 ++++++++++++++--- app/presentation/ServerItem/styles.js | 2 + storybook/stories/ServerItem.js | 99 +- storybook/stories/index.js | 4 +- 4 files changed, 1954 insertions(+), 378 deletions(-) diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index 188b780f24f..56507d78c56 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -61221,446 +61221,1977 @@ exports[`Storyshots RoomItem list roomitem 1`] = ` `; -exports[`Storyshots ServerItem list serveritem 1`] = ` - - - + - Unchecked server - + + - - - - - + - - https://open.rocket.chat/ - - - gerzon.canario - - - + "backgroundColor": "transparent", + "fontFamily": "System", + "fontSize": 16, + "fontWeight": "400", + "marginRight": 18, + "textAlign": "left", + }, + Object { + "color": "#9ca2a8", + }, + ] + } + > + some.user + - Checked server +  + + +`; + +exports[`Storyshots ServerItem unselected server 1`] = ` + + - + + + - - + + some.user + + + + +`; + +exports[`Storyshots ServerItem with FlatList 1`] = ` + + + + + + + > + + + + + + https://open.rocket.chat/ + + + some.user + + + + + - - https://open.rocket.chat/ - - + + + + + https://open.rocket.chat/ + + + some.user + + + + + + + + - gerzon.canario - + + + + + + https://open.rocket.chat/ + + + some.user + + + - + + + + + + + + + https://open.rocket.chat/ + + + some.user + + + + + + + + + + + + + + https://open.rocket.chat/ + + + some.user + + + + + + + + + + + + + + https://open.rocket.chat/ + + + some.user + + + + + + + + + + + + + + https://open.rocket.chat/ + + + some.user + + + + + + + + + + + + + + https://open.rocket.chat/ + + + some.user + + + + + + + + + + + + + + https://open.rocket.chat/ + + + some.user + + + + + + + + + + + + + + https://open.rocket.chat/ + + + some.user + + + + + + + + + +`; + +exports[`Storyshots ServerItem with black theme 1`] = ` + + + + + + + + https://open.rocket.chat/ + + + some.user + + + +  + + + +`; + +exports[`Storyshots ServerItem with dark theme 1`] = ` + + + + -  - - + } + style={ + Object { + "bottom": 0, + "left": 0, + "position": "absolute", + "right": 0, + "top": 0, + } + } + /> + + + + https://open.rocket.chat/ + + + some.user + - No icon +  + + +`; + +exports[`Storyshots ServerItem with long url and username 1`] = ` + + - + + + - - - - + - - https://open.rocket.chat/ - - - gerzon.canario - - - + "backgroundColor": "transparent", + "fontFamily": "System", + "fontSize": 16, + "fontWeight": "400", + "marginRight": 18, + "textAlign": "left", + }, + Object { + "color": "#9ca2a8", + }, + ] + } + > + superlongusername.tologintoasuperlongservername + - + `; exports[`Storyshots Thread Messages.Item badge 1`] = ` diff --git a/app/presentation/ServerItem/styles.js b/app/presentation/ServerItem/styles.js index 4453a51e49b..8b0d64d82d7 100644 --- a/app/presentation/ServerItem/styles.js +++ b/app/presentation/ServerItem/styles.js @@ -29,10 +29,12 @@ export default StyleSheet.create({ }, serverName: { fontSize: 18, + marginRight: 16, ...sharedStyles.textSemibold }, serverUrl: { fontSize: 16, + marginRight: 18, ...sharedStyles.textRegular } }); diff --git a/storybook/stories/ServerItem.js b/storybook/stories/ServerItem.js index de51b6d189e..2f2c2b767ee 100644 --- a/storybook/stories/ServerItem.js +++ b/storybook/stories/ServerItem.js @@ -1,42 +1,87 @@ +/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions, react/prop-types */ import React from 'react'; -import { ScrollView } from 'react-native'; +import { SafeAreaView, FlatList } from 'react-native'; +import { storiesOf } from '@storybook/react-native'; -import { themes } from '../../app/constants/colors'; -import ServerItemComponent from '../../app/presentation/ServerItem'; -import StoriesSeparator from './StoriesSeparator'; +import ServerItem from '../../app/presentation/ServerItem'; +import { ThemeContext } from '../../app/theme'; -let _theme = 'light'; +const stories = storiesOf('ServerItem', module); + +const themes = { + light: 'light', + dark: 'dark', + black: 'black' +}; const item = { name: 'https://open.rocket.chat/', - id: 'gerzon.canario', + id: 'some.user', iconURL: 'https://open.rocket.chat/images/logo/android-chrome-512x512.png' }; +const item2 = { + name: 'https://superlongservername.rocket.chat/', + id: 'superlongusername.tologintoasuperlongservername' +}; -const ServerItem = props => ( - ( + alert('Hi')} + onLongPress={() => alert('Deleted')} + theme={themes.light} /> -); +)); + +stories.add('selected server', () => ( + alert('Hi')} + onLongPress={() => alert('Deleted')} + hasCheck + theme={themes.light} + /> +)); -// eslint-disable-next-line react/prop-types -const Separator = ({ title }) => ; +stories.add('with long url and username', () => ( + alert('Hi')} + onLongPress={() => alert('Deleted')} + theme={themes.light} + /> +)); -// eslint-disable-next-line react/prop-types -export default ({ theme }) => { - _theme = theme; - return ( - - - +const ThemeStory = ({ theme }) => ( + + alert('Hi')} + onLongPress={() => alert('Deleted')} + theme={theme} + hasCheck + /> + +); - - +stories.add('with dark theme', () => ); - - - - ); -}; +stories.add('with black theme', () => ); + +stories.add('with FlatList', () => ( + + ( + alert('Hi')} + onLongPress={() => alert('Deleted')} + theme={themes.light} + /> + )} + keyExtractor={index => index} + /> + +)); diff --git a/storybook/stories/index.js b/storybook/stories/index.js index 88ff9aa9354..8edb159ba6b 100644 --- a/storybook/stories/index.js +++ b/storybook/stories/index.js @@ -5,8 +5,8 @@ import { createStore, combineReducers } from 'redux'; import { storiesOf } from '@storybook/react-native'; import RoomItem from './RoomItem'; -import ServerItem from './ServerItem'; import './List'; +import './ServerItem'; import Message from './Message'; import UiKitMessage from './UiKitMessage'; import UiKitModal from './UiKitModal'; @@ -75,8 +75,6 @@ const messageDecorator = story => ( storiesOf('RoomItem', module) .addDecorator(story => {story()}) .add('list roomitem', () => ); -storiesOf('ServerItem', module) - .add('list serveritem', () => ); storiesOf('Message', module) .addDecorator(story => {story()}) .addDecorator(messageDecorator) From 557680138b62848b4e5bcda880b9941bf89fe5e4 Mon Sep 17 00:00:00 2001 From: Gerzon Z Date: Tue, 19 Jan 2021 08:49:29 -0400 Subject: [PATCH 5/9] Updated ServerItem stories and ServerItem component --- .../__snapshots__/Storyshots.test.js.snap | 2325 +++++++++-------- app/presentation/ServerItem/index.js | 17 +- app/presentation/ServerItem/styles.js | 15 +- storybook/stories/ServerItem.js | 73 +- 4 files changed, 1319 insertions(+), 1111 deletions(-) diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index 185cc6383be..932eaee8c3b 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -61007,260 +61007,472 @@ exports[`Storyshots RoomItem list roomitem 1`] = ` `; -exports[`Storyshots ServerItem selected server 1`] = ` - +exports[`Storyshots ServerItem content 1`] = ` +Array [ - - - - - https://open.rocket.chat/ - + + + + + Rocket.Chat + + + https://open.rocket.chat/ + + - some.user +  - -  - - - -`; - -exports[`Storyshots ServerItem unselected server 1`] = ` - + , - - - - - 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 pressable 1`] = ` + + + + + + + + Rocket.Chat + + - some.user + https://open.rocket.chat/ `; -exports[`Storyshots ServerItem with FlatList 1`] = ` - - - + - - - - - - - - https://open.rocket.chat/ - - - some.user - - - - + } + /> - - + - - - - - - https://open.rocket.chat/ - - - some.user - - - - + "backgroundColor": "transparent", + "fontFamily": "System", + "fontSize": 16, + "fontWeight": "400", + "textAlign": "left", + }, + Object { + "color": "#9ca2a8", + }, + ] + } + > + https://open.rocket.chat/ + + +  + + + , + + - - - - - - - - https://open.rocket.chat/ - - - some.user - - - - + } + /> - + Rocket.Chat + + + https://open.rocket.chat/ + + + +  + + + , + + + + + + + + Rocket.Chat + + + https://open.rocket.chat/ + + + +  + + + , +] +`; + +exports[`Storyshots ServerItem with FlatList 1`] = ` + + + + + @@ -61738,8 +62011,7 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` Object { "borderRadius": 4, "height": 44, - "marginHorizontal": 12, - "marginVertical": 13, + "margin": 12, "resizeMode": "contain", "width": 44, }, @@ -61773,6 +62045,7 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` "flex": 1, "flexDirection": "column", "justifyContent": "center", + "paddingRight": 18, } } > @@ -61785,7 +62058,6 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` "fontFamily": "System", "fontSize": 18, "fontWeight": "600", - "marginRight": 16, "textAlign": "left", }, Object { @@ -61794,7 +62066,7 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` ] } > - https://open.rocket.chat/ + Rocket.Chat - some.user + https://open.rocket.chat/ @@ -61841,14 +62112,13 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` "backgroundColor": "transparent", } } - testID="rooms-list-header-server-some.user" + testID="rooms-list-header-server-https://open.rocket.chat/" > @@ -61861,8 +62131,7 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` Object { "borderRadius": 4, "height": 44, - "marginHorizontal": 12, - "marginVertical": 13, + "margin": 12, "resizeMode": "contain", "width": 44, }, @@ -61896,6 +62165,7 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` "flex": 1, "flexDirection": "column", "justifyContent": "center", + "paddingRight": 18, } } > @@ -61908,7 +62178,6 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` "fontFamily": "System", "fontSize": 18, "fontWeight": "600", - "marginRight": 16, "textAlign": "left", }, Object { @@ -61917,7 +62186,7 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` ] } > - https://open.rocket.chat/ + Rocket.Chat - some.user + https://open.rocket.chat/ @@ -61964,14 +62232,13 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` "backgroundColor": "transparent", } } - testID="rooms-list-header-server-some.user" + testID="rooms-list-header-server-https://open.rocket.chat/" > @@ -61984,8 +62251,7 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` Object { "borderRadius": 4, "height": 44, - "marginHorizontal": 12, - "marginVertical": 13, + "margin": 12, "resizeMode": "contain", "width": 44, }, @@ -62019,6 +62285,7 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` "flex": 1, "flexDirection": "column", "justifyContent": "center", + "paddingRight": 18, } } > @@ -62031,7 +62298,6 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` "fontFamily": "System", "fontSize": 18, "fontWeight": "600", - "marginRight": 16, "textAlign": "left", }, Object { @@ -62040,7 +62306,7 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` ] } > - https://open.rocket.chat/ + Rocket.Chat - some.user + https://open.rocket.chat/ @@ -62087,14 +62352,13 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` "backgroundColor": "transparent", } } - testID="rooms-list-header-server-some.user" + testID="rooms-list-header-server-https://open.rocket.chat/" > @@ -62107,8 +62371,7 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` Object { "borderRadius": 4, "height": 44, - "marginHorizontal": 12, - "marginVertical": 13, + "margin": 12, "resizeMode": "contain", "width": 44, }, @@ -62142,6 +62405,7 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` "flex": 1, "flexDirection": "column", "justifyContent": "center", + "paddingRight": 18, } } > @@ -62154,7 +62418,6 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` "fontFamily": "System", "fontSize": 18, "fontWeight": "600", - "marginRight": 16, "textAlign": "left", }, Object { @@ -62163,7 +62426,7 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` ] } > - https://open.rocket.chat/ + Rocket.Chat - some.user + https://open.rocket.chat/ @@ -62210,14 +62472,13 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` "backgroundColor": "transparent", } } - testID="rooms-list-header-server-some.user" + testID="rooms-list-header-server-https://open.rocket.chat/" > @@ -62230,8 +62491,7 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` Object { "borderRadius": 4, "height": 44, - "marginHorizontal": 12, - "marginVertical": 13, + "margin": 12, "resizeMode": "contain", "width": 44, }, @@ -62265,6 +62525,7 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` "flex": 1, "flexDirection": "column", "justifyContent": "center", + "paddingRight": 18, } } > @@ -62277,7 +62538,6 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` "fontFamily": "System", "fontSize": 18, "fontWeight": "600", - "marginRight": 16, "textAlign": "left", }, Object { @@ -62286,7 +62546,7 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` ] } > - https://open.rocket.chat/ + Rocket.Chat - some.user + https://open.rocket.chat/ @@ -62333,14 +62592,13 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` "backgroundColor": "transparent", } } - testID="rooms-list-header-server-some.user" + testID="rooms-list-header-server-https://open.rocket.chat/" > @@ -62353,8 +62611,7 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` Object { "borderRadius": 4, "height": 44, - "marginHorizontal": 12, - "marginVertical": 13, + "margin": 12, "resizeMode": "contain", "width": 44, }, @@ -62388,6 +62645,7 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` "flex": 1, "flexDirection": "column", "justifyContent": "center", + "paddingRight": 18, } } > @@ -62400,7 +62658,6 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` "fontFamily": "System", "fontSize": 18, "fontWeight": "600", - "marginRight": 16, "textAlign": "left", }, Object { @@ -62409,7 +62666,7 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` ] } > - https://open.rocket.chat/ + Rocket.Chat - some.user + https://open.rocket.chat/ @@ -62456,14 +62712,13 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` "backgroundColor": "transparent", } } - testID="rooms-list-header-server-some.user" + testID="rooms-list-header-server-https://open.rocket.chat/" > @@ -62476,8 +62731,7 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` Object { "borderRadius": 4, "height": 44, - "marginHorizontal": 12, - "marginVertical": 13, + "margin": 12, "resizeMode": "contain", "width": 44, }, @@ -62511,6 +62765,7 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` "flex": 1, "flexDirection": "column", "justifyContent": "center", + "paddingRight": 18, } } > @@ -62523,7 +62778,6 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` "fontFamily": "System", "fontSize": 18, "fontWeight": "600", - "marginRight": 16, "textAlign": "left", }, Object { @@ -62532,7 +62786,7 @@ exports[`Storyshots ServerItem with FlatList 1`] = ` ] } > - https://open.rocket.chat/ + Rocket.Chat - some.user + https://open.rocket.chat/ - - - -`; - -exports[`Storyshots ServerItem with black theme 1`] = ` - - - - - - - - https://open.rocket.chat/ - - - some.user - - - -  - - - -`; - -exports[`Storyshots ServerItem with dark theme 1`] = ` - - - - - - - + + + + + + + Rocket.Chat + + + https://open.rocket.chat/ + + + + + + + + + + + + + + Rocket.Chat + + + https://open.rocket.chat/ + + + + + + - https://open.rocket.chat/ - - - some.user - - - -  - - - -`; - -exports[`Storyshots ServerItem with long url and username 1`] = ` - - - - + + + + + + + Rocket.Chat + + + https://open.rocket.chat/ + + + + + + - - - https://superlongservername.rocket.chat/ - - - superlongusername.tologintoasuperlongservername - - - - + + `; exports[`Storyshots Thread Messages.Item badge 1`] = ` diff --git a/app/presentation/ServerItem/index.js b/app/presentation/ServerItem/index.js index 581be8e1472..0054749fa21 100644 --- a/app/presentation/ServerItem/index.js +++ b/app/presentation/ServerItem/index.js @@ -7,15 +7,18 @@ 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(({ item, onPress, onLongPress, hasCheck, theme }) => ( onLongPress?.()} testID={`rooms-list-header-server-${ item.id }`} android_ripple={{ color: themes[theme].bannerBackground @@ -34,14 +37,14 @@ const ServerItem = React.memo(({ uri: item.iconURL, priority: FastImage.priority.high }} - defaultSource={require('../../static/images/logo.png')} + defaultSource={defaultLogo} style={styles.serverIcon} - onError={() => console.warn('error loading serverIcon')} + onError={() => console.log('err_loading_server_icon')} /> ) : ( ) @@ -56,11 +59,11 @@ const ServerItem = React.memo(({ )); ServerItem.propTypes = { - onPress: PropTypes.func.isRequired, - onLongPress: PropTypes.func.isRequired, item: PropTypes.object.isRequired, + onPress: PropTypes.func.isRequired, + onLongPress: PropTypes.func, hasCheck: PropTypes.bool, 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 8b0d64d82d7..ece4105dff1 100644 --- a/app/presentation/ServerItem/styles.js +++ b/app/presentation/ServerItem/styles.js @@ -5,36 +5,29 @@ 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', - height: 68 + alignItems: 'center' }, serverIcon: { width: 44, height: 44, - marginHorizontal: 12, - marginVertical: 13, + margin: 12, borderRadius: 4, resizeMode: 'contain' }, serverTextContainer: { flex: 1, flexDirection: 'column', - justifyContent: 'center' + justifyContent: 'center', + paddingRight: 18 }, serverName: { fontSize: 18, - marginRight: 16, ...sharedStyles.textSemibold }, serverUrl: { fontSize: 16, - marginRight: 18, ...sharedStyles.textRegular } }); diff --git a/storybook/stories/ServerItem.js b/storybook/stories/ServerItem.js index 2f2c2b767ee..e2320011f90 100644 --- a/storybook/stories/ServerItem.js +++ b/storybook/stories/ServerItem.js @@ -15,59 +15,68 @@ const themes = { }; const item = { - name: 'https://open.rocket.chat/', - id: 'some.user', + name: 'Rocket.Chat', + id: 'https://open.rocket.chat/', iconURL: 'https://open.rocket.chat/images/logo/android-chrome-512x512.png' }; const item2 = { - name: 'https://superlongservername.rocket.chat/', - id: 'superlongusername.tologintoasuperlongservername' + name: 'Super Long Server Name in Rocket.Chat', + id: 'https://superlongservername.tologintoasuperlongservername/' }; -stories.add('unselected server', () => ( - alert('Hi')} - onLongPress={() => alert('Deleted')} - theme={themes.light} - /> -)); +const item3 = { + id: 'https://stable.rocket.chat/' +}; -stories.add('selected server', () => ( +stories.add('pressable', () => ( alert('Hi')} - onLongPress={() => alert('Deleted')} - hasCheck - theme={themes.light} + onPress={() => alert('Press')} + onLongPress={() => alert('Long Press')} /> )); -stories.add('with long url and username', () => ( - alert('Hi')} - onLongPress={() => alert('Deleted')} - theme={themes.light} - /> +stories.add('content', () => ( + <> + alert('Press')} + onLongPress={() => alert('Long Press')} + /> + alert('Press')} + onLongPress={() => alert('Long Press')} + /> + alert('Press')} + onLongPress={() => alert('Long Press')} + /> + )); const ThemeStory = ({ theme }) => ( - + alert('Hi')} - onLongPress={() => alert('Deleted')} + onPress={() => alert('Press')} + onLongPress={() => alert('Long Press')} theme={theme} hasCheck /> ); -stories.add('with dark theme', () => ); - -stories.add('with black theme', () => ); +stories.add('themes', () => ( + <> + + + + +)); stories.add('with FlatList', () => ( @@ -76,8 +85,8 @@ stories.add('with FlatList', () => ( renderItem={() => ( alert('Hi')} - onLongPress={() => alert('Deleted')} + onPress={() => alert('Press')} + onLongPress={() => alert('Long Press')} theme={themes.light} /> )} From baad093ad8d8d2f84a5bb9d15f1e60f3f606b997 Mon Sep 17 00:00:00 2001 From: Gerzon Z Date: Wed, 20 Jan 2021 15:27:09 -0400 Subject: [PATCH 6/9] Updated SelectServerView, ServerItem and ServerItem stories --- .../__snapshots__/Storyshots.test.js.snap | 36 +++++++++---------- app/presentation/ServerItem/index.js | 2 +- app/views/SelectServerView.js | 3 +- storybook/stories/ServerItem.js | 31 +++++++--------- 4 files changed, 32 insertions(+), 40 deletions(-) diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index 932eaee8c3b..ee7355df212 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -61023,7 +61023,7 @@ Array [ onStartShouldSetResponder={[Function]} style={ Object { - "backgroundColor": "transparent", + "backgroundColor": "#ffffff", } } testID="rooms-list-header-server-https://open.rocket.chat/" @@ -61165,7 +61165,7 @@ Array [ onStartShouldSetResponder={[Function]} style={ Object { - "backgroundColor": "transparent", + "backgroundColor": "#ffffff", } } testID="rooms-list-header-server-https://superlongservername.tologintoasuperlongservername/" @@ -61273,7 +61273,7 @@ Array [ onStartShouldSetResponder={[Function]} style={ Object { - "backgroundColor": "transparent", + "backgroundColor": "#ffffff", } } testID="rooms-list-header-server-https://stable.rocket.chat/" @@ -61370,7 +61370,7 @@ Array [ ] `; -exports[`Storyshots ServerItem pressable 1`] = ` +exports[`Storyshots ServerItem long press 1`] = ` ({ backgroundColor: isIOS && pressed ? themes[theme].bannerBackground - : 'transparent' + : themes[theme].backgroundColor })} > diff --git a/app/views/SelectServerView.js b/app/views/SelectServerView.js index f956feba5af..72a6b939f58 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 index e2320011f90..cc2261a4f9d 100644 --- a/storybook/stories/ServerItem.js +++ b/storybook/stories/ServerItem.js @@ -3,7 +3,7 @@ import React from 'react'; import { SafeAreaView, FlatList } from 'react-native'; import { storiesOf } from '@storybook/react-native'; -import ServerItem from '../../app/presentation/ServerItem'; +import ServerItemComponent from '../../app/presentation/ServerItem'; import { ThemeContext } from '../../app/theme'; const stories = storiesOf('ServerItem', module); @@ -29,9 +29,17 @@ const item3 = { id: 'https://stable.rocket.chat/' }; -stories.add('pressable', () => ( - ( + alert('Press')} + hasCheck={false} + {...props} + /> +); + +stories.add('long press', () => ( + alert('Press')} onLongPress={() => alert('Long Press')} /> @@ -40,20 +48,13 @@ stories.add('pressable', () => ( stories.add('content', () => ( <> alert('Press')} - onLongPress={() => alert('Long Press')} /> alert('Press')} - onLongPress={() => alert('Long Press')} /> alert('Press')} - onLongPress={() => alert('Long Press')} /> )); @@ -61,9 +62,6 @@ stories.add('content', () => ( const ThemeStory = ({ theme }) => ( alert('Press')} - onLongPress={() => alert('Long Press')} theme={theme} hasCheck /> @@ -83,12 +81,7 @@ stories.add('with FlatList', () => ( ( - alert('Press')} - onLongPress={() => alert('Long Press')} - theme={themes.light} - /> + )} keyExtractor={index => index} /> From 1ab0ee2431ebc3c380a88eaa7235b92785921073 Mon Sep 17 00:00:00 2001 From: Gerzon Z Date: Wed, 20 Jan 2021 15:38:58 -0400 Subject: [PATCH 7/9] Updated ServerItem stories --- storybook/stories/ServerItem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/storybook/stories/ServerItem.js b/storybook/stories/ServerItem.js index cc2261a4f9d..b0e3a0b8d53 100644 --- a/storybook/stories/ServerItem.js +++ b/storybook/stories/ServerItem.js @@ -83,7 +83,7 @@ stories.add('with FlatList', () => ( renderItem={() => ( )} - keyExtractor={index => index} + keyExtractor={index => String(index)} /> )); From 1701d7803e7d02d8a55123387a17be6d19c41151 Mon Sep 17 00:00:00 2001 From: Gerzon Z Date: Wed, 20 Jan 2021 15:54:42 -0400 Subject: [PATCH 8/9] Updated ServerItem stories --- storybook/stories/ServerItem.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/storybook/stories/ServerItem.js b/storybook/stories/ServerItem.js index b0e3a0b8d53..e97e4fa37d1 100644 --- a/storybook/stories/ServerItem.js +++ b/storybook/stories/ServerItem.js @@ -39,10 +39,7 @@ const ServerItem = props => ( ); stories.add('long press', () => ( - alert('Press')} - onLongPress={() => alert('Long Press')} - /> + alert('Long Press')} /> )); stories.add('content', () => ( From f3074615cee93926bb0754b75d095ce730ae49df Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Wed, 20 Jan 2021 17:42:59 -0300 Subject: [PATCH 9/9] Update tests --- .../__snapshots__/Storyshots.test.js.snap | 1669 ++++------------- storybook/stories/ServerItem.js | 45 +- 2 files changed, 338 insertions(+), 1376 deletions(-) diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index ee7355df212..9d9a30e357f 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -61195,8 +61195,15 @@ Array [ } > - - - - - - - Rocket.Chat - - - https://open.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/ - - - - - - - - - - - - - - Rocket.Chat - - - https://open.rocket.chat/ - - - - - - - - - - - - - - Rocket.Chat - - - https://open.rocket.chat/ - - - - - - - - - - - - - - Rocket.Chat - - - https://open.rocket.chat/ - - - - - - - - - - - - - - Rocket.Chat - - - https://open.rocket.chat/ - - - - - - - - - - - - - - Rocket.Chat - - - https://open.rocket.chat/ - - - - + https://open.rocket.chat/ + + + , + + - - - - - - - - Rocket.Chat - - - https://open.rocket.chat/ - - - - + } + /> - - + + https://open.rocket.chat/ + + + + , + + + + - - - - - - Rocket.Chat - - - https://open.rocket.chat/ - - - - + } + style={ + Object { + "bottom": 0, + "left": 0, + "position": "absolute", + "right": 0, + "top": 0, + } + } + /> + > + + Rocket.Chat + + + https://open.rocket.chat/ + + - - + , +] `; exports[`Storyshots Thread Messages.Item badge 1`] = ` diff --git a/storybook/stories/ServerItem.js b/storybook/stories/ServerItem.js index e97e4fa37d1..d1c53ee01c4 100644 --- a/storybook/stories/ServerItem.js +++ b/storybook/stories/ServerItem.js @@ -1,6 +1,5 @@ /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions, react/prop-types */ import React from 'react'; -import { SafeAreaView, FlatList } from 'react-native'; import { storiesOf } from '@storybook/react-native'; import ServerItemComponent from '../../app/presentation/ServerItem'; @@ -20,42 +19,42 @@ const item = { iconURL: 'https://open.rocket.chat/images/logo/android-chrome-512x512.png' }; -const item2 = { - name: 'Super Long Server Name in Rocket.Chat', - id: 'https://superlongservername.tologintoasuperlongservername/' -}; - -const item3 = { - id: 'https://stable.rocket.chat/' -}; - const ServerItem = props => ( alert('Press')} hasCheck={false} {...props} /> ); -stories.add('long press', () => ( - alert('Long Press')} /> -)); - stories.add('content', () => ( <> )); +stories.add('touchable', () => ( + <> + alert('Long Press')} onPress={() => alert('Press')} /> + alert('Press')} /> + alert('Long Press')} /> + +)); + const ThemeStory = ({ theme }) => ( ( )); - -stories.add('with FlatList', () => ( - - ( - - )} - keyExtractor={index => String(index)} - /> - -));