sergiodt
/
vn-verdnaturachat
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add mention mark by the unread number (#98)

This commit is contained in:
Rodrigo Nascimento 2017-11-22 14:40:59 -02:00 committed by Guilherme Gazzo
parent 45890e6c15
commit 9dc16c8adb
6 changed files with 379 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
__tests__/__snapshots__/RoomItem.js.snap
View File

@ -87,13 +87,16 @@ exports[`render channel 1`] = `
ellipsizeMode="tail"
numberOfLines={1}
style={
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
}
Array [
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
},
undefined,
]
}
>
general
@ -163,13 +166,16 @@ exports[`render no icon 1`] = `
ellipsizeMode="tail"
numberOfLines={1}
style={
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
}
Array [
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
},
undefined,
]
}
>
name
@ -239,13 +245,16 @@ exports[`render private group 1`] = `
ellipsizeMode="tail"
numberOfLines={1}
style={
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
}
Array [
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
},
undefined,
]
}
>
private-group
@ -351,13 +360,16 @@ exports[`render unread +999 1`] = `
ellipsizeMode="tail"
numberOfLines={1}
style={
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
}
Array [
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
},
undefined,
]
}
>
name
@ -386,13 +398,13 @@ exports[`render unread +999 1`] = `
style={
Object {
"backgroundColor": "#1d74f5",
"borderRadius": 5,
"borderRadius": 3,
"color": "#fff",
"fontSize": 14,
"minWidth": 20,
"overflow": "hidden",
"paddingLeft": 5,
"paddingRight": 5,
"paddingHorizontal": 5,
"paddingVertical": 2,
"textAlign": "center",
}
}
@ -483,13 +495,16 @@ exports[`render unread 1`] = `
ellipsizeMode="tail"
numberOfLines={1}
style={
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
}
Array [
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
},
undefined,
]
}
>
name
@ -518,13 +533,13 @@ exports[`render unread 1`] = `
style={
Object {
"backgroundColor": "#1d74f5",
"borderRadius": 5,
"borderRadius": 3,
"color": "#fff",
"fontSize": 14,
"minWidth": 20,
"overflow": "hidden",
"paddingLeft": 5,
"paddingRight": 5,
"paddingHorizontal": 5,
"paddingVertical": 2,
"textAlign": "center",
}
}
@ -615,13 +630,16 @@ exports[`renders correctly 1`] = `
ellipsizeMode="tail"
numberOfLines={1}
style={
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
}
Array [
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
},
undefined,
]
}
>
name

355
__tests__/__snapshots__/Storyshots.test.js.snap
View File

@ -253,13 +253,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
ellipsizeMode="tail"
numberOfLines={1}
style={
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
}
Array [
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
},
undefined,
]
}
>
rocket.cat
@ -381,13 +384,18 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
ellipsizeMode="tail"
numberOfLines={1}
style={
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
}
Array [
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
},
Object {
"fontWeight": "bold",
},
]
}
>
rocket.cat
@ -509,13 +517,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
ellipsizeMode="tail"
numberOfLines={1}
style={
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
}
Array [
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
},
undefined,
]
}
>
rocket.cat
@ -544,13 +555,13 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
style={
Object {
"backgroundColor": "#1d74f5",
"borderRadius": 5,
"borderRadius": 3,
"color": "#fff",
"fontSize": 14,
"minWidth": 20,
"overflow": "hidden",
"paddingLeft": 5,
"paddingRight": 5,
"paddingHorizontal": 5,
"paddingVertical": 2,
"textAlign": "center",
}
}
@ -657,13 +668,18 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
ellipsizeMode="tail"
numberOfLines={1}
style={
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
}
Array [
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
},
Object {
"fontWeight": "bold",
},
]
}
>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
@ -692,13 +708,13 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
style={
Object {
"backgroundColor": "#1d74f5",
"borderRadius": 5,
"borderRadius": 3,
"color": "#fff",
"fontSize": 14,
"minWidth": 20,
"overflow": "hidden",
"paddingLeft": 5,
"paddingRight": 5,
"paddingHorizontal": 5,
"paddingVertical": 2,
"textAlign": "center",
}
}
@ -805,13 +821,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
ellipsizeMode="tail"
numberOfLines={1}
style={
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
}
Array [
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
},
undefined,
]
}
>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
@ -840,13 +859,13 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
style={
Object {
"backgroundColor": "#1d74f5",
"borderRadius": 5,
"borderRadius": 3,
"color": "#fff",
"fontSize": 14,
"minWidth": 20,
"overflow": "hidden",
"paddingLeft": 5,
"paddingRight": 5,
"paddingHorizontal": 5,
"paddingVertical": 2,
"textAlign": "center",
}
}
@ -953,13 +972,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
ellipsizeMode="tail"
numberOfLines={1}
style={
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
}
Array [
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
},
undefined,
]
}
>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
@ -988,13 +1010,13 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
style={
Object {
"backgroundColor": "#1d74f5",
"borderRadius": 5,
"borderRadius": 3,
"color": "#fff",
"fontSize": 14,
"minWidth": 20,
"overflow": "hidden",
"paddingLeft": 5,
"paddingRight": 5,
"paddingHorizontal": 5,
"paddingVertical": 2,
"textAlign": "center",
}
}
@ -1101,13 +1123,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
ellipsizeMode="tail"
numberOfLines={1}
style={
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
}
Array [
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
},
undefined,
]
}
>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
@ -1136,13 +1161,13 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
style={
Object {
"backgroundColor": "#1d74f5",
"borderRadius": 5,
"borderRadius": 3,
"color": "#fff",
"fontSize": 14,
"minWidth": 20,
"overflow": "hidden",
"paddingLeft": 5,
"paddingRight": 5,
"paddingHorizontal": 5,
"paddingVertical": 2,
"textAlign": "center",
}
}
@ -1150,6 +1175,157 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
999+
</Text>
</View>
<View
accessibilityComponentType={undefined}
accessibilityLabel={undefined}
accessibilityTraits={undefined}
accessible={true}
collapsable={undefined}
hitSlop={undefined}
isTVSelectable={true}
nativeID={undefined}
onLayout={undefined}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"alignItems": "center",
"flexDirection": "row",
"height": 56,
"opacity": 1,
"paddingLeft": 16,
"paddingRight": 16,
}
}
testID={undefined}
tvParallaxProperties={undefined}
>
<View
style={
Array [
Object {
"alignItems": "center",
"justifyContent": "center",
"overflow": "hidden",
},
Object {
"backgroundColor": "#795548",
"borderRadius": 4,
"height": 40,
"width": 40,
},
undefined,
]
}
>
<Text
accessible={true}
allowFontScaling={true}
ellipsizeMode="tail"
style={
Array [
Object {
"color": "#ffffff",
},
Object {
"fontSize": 20,
},
]
}
>
LC
</Text>
<CachedImage
source={
Object {
"uri": "https://demo.rocket.chat/avatar/Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries",
}
}
style={
Array [
Object {
"position": "absolute",
},
Object {
"borderRadius": 4,
"height": 40,
"width": 40,
},
]
}
/>
</View>
<View
style={
Object {
"flex": 1,
"marginLeft": 16,
"marginRight": 4,
}
}
>
<Text
accessible={true}
allowFontScaling={true}
ellipsizeMode="tail"
numberOfLines={1}
style={
Array [
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
},
undefined,
]
}
>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</Text>
<Text
accessible={true}
allowFontScaling={true}
ellipsizeMode="tail"
numberOfLines={1}
style={
Object {
"color": "#888",
"flex": 1,
"fontSize": 10,
"height": 10,
}
}
>
11-10-2017 10:00:00
</Text>
</View>
<Text
accessible={true}
allowFontScaling={true}
ellipsizeMode="tail"
style={
Object {
"backgroundColor": "#1d74f5",
"borderRadius": 3,
"color": "#fff",
"fontSize": 14,
"minWidth": 20,
"overflow": "hidden",
"paddingHorizontal": 5,
"paddingVertical": 2,
"textAlign": "center",
}
}
>
@ 999+
</Text>
</View>
<View
accessibilityComponentType={undefined}
accessibilityLabel={undefined}
@ -1230,13 +1406,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
ellipsizeMode="tail"
numberOfLines={1}
style={
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
}
Array [
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
},
undefined,
]
}
>
W
@ -1339,13 +1518,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
ellipsizeMode="tail"
numberOfLines={1}
style={
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
}
Array [
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
},
undefined,
]
}
>
WW
@ -1448,13 +1630,16 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
ellipsizeMode="tail"
numberOfLines={1}
style={
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
}
Array [
Object {
"color": "#444",
"flex": 1,
"fontSize": 16,
"height": 16,
"paddingTop": 10,
},
undefined,
]
}
>

5
app/lib/realm.js
View File

@ -41,6 +41,7 @@ const subscriptionSchema = {
properties: {
_id: 'string',
_server: 'servers',
f: { type: 'bool', optional: true },
t: 'string',
ts: { type: 'date', optional: true },
ls: { type: 'date', optional: true },
@ -51,6 +52,7 @@ const subscriptionSchema = {
alert: { type: 'bool', optional: true },
// roles: [ 'owner' ],
unread: { type: 'int', optional: true },
userMentions: { type: 'int', optional: true },
// userMentions: 0,
// groupMentions: 0,
_updatedAt: { type: 'date', optional: true }
@ -131,7 +133,8 @@ const realm = new Realm({
roomsSchema,
attachment,
messagesEditedBySchema
]
],
deleteRealmIfMigrationNeeded: true
});
export default realm;

31
app/presentation/RoomItem.js
View File

@ -17,14 +17,14 @@ const styles = StyleSheet.create({
},
number: {
minWidth: 20,
borderRadius: 5,
borderRadius: 3,
backgroundColor: '#1d74f5',
color: '#fff',
textAlign: 'center',
overflow: 'hidden',
fontSize: 14,
paddingLeft: 5,
paddingRight: 5
paddingHorizontal: 5,
paddingVertical: 2
},
roomNameView: {
flex: 1,
@ -38,6 +38,12 @@ const styles = StyleSheet.create({
height: 16,
color: '#444'
},
alert: {
fontWeight: 'bold'
},
favorite: {
// backgroundColor: '#eee'
},
update: {
flex: 1,
fontSize: 10,
@ -67,7 +73,10 @@ export default class RoomItem extends React.PureComponent {
type: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
_updatedAt: PropTypes.instanceOf(Date),
favorite: PropTypes.bool,
alert: PropTypes.bool,
unread: PropTypes.number,
userMentions: PropTypes.number,
baseUrl: PropTypes.string,
onPress: PropTypes.func,
dateFormat: PropTypes.string
@ -101,7 +110,7 @@ export default class RoomItem extends React.PureComponent {
);
}
renderNumber = (unread) => {
renderNumber = (unread, userMentions) => {
if (!unread || unread <= 0) {
return;
}
@ -110,6 +119,10 @@ export default class RoomItem extends React.PureComponent {
unread = '999+';
}
if (userMentions > 0) {
unread = `@ ${ unread }`;
}
return (
<Text style={styles.number}>
{ unread }
@ -118,16 +131,18 @@ export default class RoomItem extends React.PureComponent {
}
render() {
const { unread, name, _updatedAt } = this.props;
const {
favorite, alert, unread, userMentions, name, _updatedAt
} = this.props;
return (
<TouchableOpacity onPress={this.props.onPress} style={styles.container}>
<TouchableOpacity onPress={this.props.onPress} style={[styles.container, favorite && styles.favorite]}>
{this.icon}
<View style={styles.roomNameView}>
<Text style={styles.roomName} ellipsizeMode='tail' numberOfLines={1}>{ name }</Text>
<Text style={[styles.roomName, alert && styles.alert]} ellipsizeMode='tail' numberOfLines={1}>{ name }</Text>
{_updatedAt ? <Text style={styles.update} ellipsizeMode='tail' numberOfLines={1}>{ moment(_updatedAt).format(this.props.dateFormat) }</Text> : null}
</View>
{this.renderNumber(unread)}
{this.renderNumber(unread, userMentions)}
</TouchableOpacity>
);
}

3
app/views/RoomsListView.js
View File

@ -254,7 +254,10 @@ export default class RoomsListView extends React.Component {
renderItem = item => (
<RoomItem
alert={item.alert}
unread={item.unread}
userMentions={item.userMentions}
favorite={item.f}
name={item.name}
_updatedAt={item._updatedAt}
key={item._id}

13
storybook/stories/Channels/DirectMessage.js
View File

@ -18,6 +18,7 @@ export default (
<RoomItem
type='d'
unread={0}
alert
_updatedAt={date}
dateFormat={dateFormat}
name='rocket.cat'
@ -34,6 +35,7 @@ export default (
<RoomItem
type='d'
unread={9}
alert
_updatedAt={date}
dateFormat={dateFormat}
name="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
@ -50,6 +52,7 @@ export default (
<RoomItem
type='d'
unread={100}
userMentions={0}
_updatedAt={date}
dateFormat={dateFormat}
name="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
@ -58,6 +61,16 @@ export default (
<RoomItem
type='d'
unread={100000}
userMentions={0}
_updatedAt={date}
dateFormat={dateFormat}
name="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"
baseUrl='https://demo.rocket.chat'
/>
<RoomItem
type='d'
unread={100000}
userMentions={1}
_updatedAt={date}
dateFormat={dateFormat}
name="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries"