From 60418b75a409d5ecab05eb97c31223eab13ff2a4 Mon Sep 17 00:00:00 2001 From: Diego Mello Date: Mon, 20 May 2019 17:43:50 -0300 Subject: [PATCH] Message render performance (#880) - Refactored Message component to use React.memo and re-render only what's necessary - Added a test mode to toggle markdown parse by long press drawer (it'll be removed in the next release) --- .../__snapshots__/Storyshots.test.js.snap | 27723 ++++++++-------- app/actions/index.js | 7 - app/containers/FileModal.js | 121 + app/containers/HeaderButton.js | 4 +- app/containers/MessageBox/ReplyPreview.js | 7 +- app/containers/MessageBox/UploadModal.js | 1 + app/containers/ReactionsModal.js | 151 + app/containers/message/Attachments.js | 44 + app/containers/message/Audio.js | 73 +- app/containers/message/Broadcast.js | 43 + app/containers/message/Content.js | 48 + app/containers/message/Discussion.js | 58 + app/containers/message/Emoji.js | 45 +- app/containers/message/Image.js | 138 +- app/containers/message/Markdown.js | 69 +- app/containers/message/Message.js | 684 +- app/containers/message/MessageAvatar.js | 37 + app/containers/message/MessageError.js | 26 + app/containers/message/PhotoModal.js | 94 - app/containers/message/Reactions.js | 105 + app/containers/message/ReactionsModal.js | 140 - app/containers/message/RepliedThread.js | 58 + app/containers/message/Reply.js | 169 +- app/containers/message/Thread.js | 46 + app/containers/message/{Url.js => Urls.js} | 34 +- app/containers/message/User.js | 42 +- app/containers/message/Video.js | 109 +- app/containers/message/constants.js | 2 + app/containers/message/index.js | 182 +- app/containers/message/styles.js | 17 +- app/containers/message/utils.js | 116 + app/i18n/locales/en.js | 3 +- app/i18n/locales/pt-BR.js | 1 + app/lib/methods/getCustomEmojis.js | 7 +- .../helpers/mergeSubscriptionsRooms.js | 3 +- app/lib/methods/helpers/normalizeMessage.js | 2 +- app/lib/methods/subscriptions/room.js | 2 +- app/lib/realm.js | 47 +- app/lib/rocketchat.js | 13 - app/lib/utils.js | 3 + app/reducers/customEmojis.js | 17 - app/reducers/index.js | 2 - app/sagas/rooms.js | 8 +- app/sagas/selectServer.js | 2 - app/views/MessagesView/index.js | 42 +- app/views/OAuthView.js | 6 +- app/views/RoomMembersView/index.js | 2 +- app/views/RoomView/Header/RightButtons.js | 4 +- app/views/RoomView/List.js | 6 +- app/views/RoomView/index.js | 125 +- app/views/RoomsListView/index.js | 21 +- app/views/SearchMessagesView/index.js | 14 +- app/views/ThreadMessagesView/index.js | 34 +- ios/RocketChatRN/AppDelegate.m | 4 - package.json | 1 + storybook/stories/Message.js | 111 +- yarn.lock | 5 + 57 files changed, 15504 insertions(+), 15374 deletions(-) create mode 100644 app/containers/FileModal.js create mode 100644 app/containers/ReactionsModal.js create mode 100644 app/containers/message/Attachments.js create mode 100644 app/containers/message/Broadcast.js create mode 100644 app/containers/message/Content.js create mode 100644 app/containers/message/Discussion.js create mode 100644 app/containers/message/MessageAvatar.js create mode 100644 app/containers/message/MessageError.js delete mode 100644 app/containers/message/PhotoModal.js create mode 100644 app/containers/message/Reactions.js delete mode 100644 app/containers/message/ReactionsModal.js create mode 100644 app/containers/message/RepliedThread.js create mode 100644 app/containers/message/Thread.js rename app/containers/message/{Url.js => Urls.js} (76%) create mode 100644 app/containers/message/constants.js create mode 100644 app/containers/message/utils.js create mode 100644 app/lib/utils.js delete mode 100644 app/reducers/customEmojis.js diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index 219faa3a2f..fdde76eed8 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -224,113 +224,103 @@ exports[`Storyshots Message list 1`] = ` Simple - + - + > + + - - + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - - - - - - Message + + + Message + - + @@ -430,113 +430,103 @@ exports[`Storyshots Message list 1`] = ` Long message - + - + > + + - - + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + - + @@ -636,113 +636,103 @@ exports[`Storyshots Message list 1`] = ` Grouped messages - + - - - - + > + + + + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - - - - - - … + + + … + - + - + - + > + + - - - + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + 10:00 AM - - 10:00 AM - - - - - - Different user + + + Different user + - + - + - + - - This is the third message + + + This is the third message + - + - + - + - - This is the second message + + + This is the second message + - + - + - + > + + - - + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - - - - - - This is the first message + + + This is the first message + - + @@ -1394,88 +1394,88 @@ exports[`Storyshots Message list 1`] = ` Without header - + - + - - Message + + + Message + - + @@ -1500,113 +1500,103 @@ exports[`Storyshots Message list 1`] = ` With alias - + - + > + + - - - - Diego Mello - @ - diego.mello + Diego Mello + + @ + diego.mello + + + + 10:00 AM - - 10:00 AM - - - - - - Message + + + Message + - + - + - + > + + - - - - Diego Mello - @ - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Diego Mello + + @ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + - - - - 10:00 AM - - - - + - - Message - + 10:00 AM - - - - - - - + + + + + Message + + + + + + + + + + - + - + > + + - - - - diego.mello - - - - 10:00 AM - - - - + + diego.mello + + - - Message - + 10:00 AM + + - (edited) + + + Message + + - + @@ -2141,113 +2128,103 @@ exports[`Storyshots Message list 1`] = ` Static avatar - + - + > + + - - + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - - - - - - Message + + + Message + - + @@ -2347,113 +2334,103 @@ exports[`Storyshots Message list 1`] = ` Full name - + + Array [ + Object { + "flexDirection": "column", + "paddingHorizontal": 14, + "paddingVertical": 4, + "width": "100%", + }, + undefined, + undefined, + ] + } + > - + > + + - - + + + Diego Mello + + - Diego Mello + 10:00 AM - - 10:00 AM - - - - - - Message + + + Message + - + @@ -2553,113 +2540,103 @@ exports[`Storyshots Message list 1`] = ` Mentions - + - - - - + Array [ + Object { + "overflow": "hidden", + }, + Object { + "borderRadius": 4, + "height": 36, + "width": 36, + }, + ] + } + > + + + + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - - - - -   - rocket.cat -   - - - - - -   - diego.mello -   - - - - - +   + rocket.cat +   + + + + + -   - all -   - - - - - +   + diego.mello +   + + + + + -   - here -   - - - - - +   + all +   + + + + + -  # - general -   + > +   + here +   + + + + + +  # + general +   + - + @@ -2843,113 +2830,103 @@ exports[`Storyshots Message list 1`] = ` Emojis - + - + > + + - - + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - - - - - - 👊🤙👏 + + + 👊🤙👏 + - + @@ -3049,113 +3036,103 @@ exports[`Storyshots Message list 1`] = ` Custom Emojis - + - + > + + - - + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - - - - - - - - - + - - - - + + + + + /> + + + + + - + @@ -3297,113 +3284,103 @@ exports[`Storyshots Message list 1`] = ` Time format - + - + Array [ + Object { + "overflow": "hidden", + }, + Object { + "borderRadius": 4, + "height": 36, + "width": 36, + }, + ] + } + > + + - - + + + diego.mello + + - diego.mello + 10 November 2017 - - 10 November 2017 - - - - - - Testing + + + Testing + - + @@ -3503,113 +3490,103 @@ exports[`Storyshots Message list 1`] = ` Reactions - + - + > + + - - - - diego.mello - - - - 10:00 AM - - - - + + diego.mello + + - - Reactions - + 10:00 AM - - - + - - - 😂 - - 3 + + Reactions + - + - + + 😂 + + + 3 + + + + - + - 13 - - - - + + + 13 + + + - - 🤔 - - - 1 - + > + 🤔 + + + 1 + + - - - -  - + +  + + @@ -4007,841 +3988,841 @@ exports[`Storyshots Message list 1`] = ` Multiple reactions - + - - - - - - - - diego.mello - - - - 10:00 AM - - - - - - - Multiple Reactions - - - + /> + - - 1 + diego.mello + + 10:00 AM + - - - 1 + + Multiple Reactions + - + - - + - 1 - + + + 1 + + - - - - ❤️ - - - 1 - + style={ + Object { + "height": 19, + "marginLeft": 7, + "width": 19, + } + } + /> + + 1 + + - - - - 🐶 - - - 1 - + style={ + Object { + "height": 19, + "marginLeft": 7, + "width": 19, + } + } + /> + + 1 + + - - - - 😀 - - - 1 - + > + ❤️ + + + 1 + + - - + testID="message-reaction-:dog:" + > + + + 🐶 + + + 1 + + + - - 😬 - - - 1 - + > + 😀 + + + 1 + + - - - - 😁 - - - 1 - + > + 😬 + + + 1 + + - - - + + 😁 + + + 1 + + + + + -  - + +  + + @@ -4868,113 +4849,103 @@ exports[`Storyshots Message list 1`] = ` Intercalated users - + - + > + + - - + + + rocket.cat + + - rocket.cat + 10:00 AM - - 10:00 AM - - - - - - Fourth message + + + Fourth message + - + - + - + > + + - - + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - - - - - - Third message + + + Third message + - + - + + + + + + - - - - - + + + rocket.cat + + - rocket.cat + 10:00 AM - - 10:00 AM - - - - - - Second message + + + Second message + - + - + - - - - + > + + + + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - - - - - - First message + + + First message + - + @@ -5638,113 +5619,103 @@ exports[`Storyshots Message list 1`] = ` Date and Unread separators - + - + > + + - - + + + rocket.cat + + - rocket.cat + 10:00 AM - - 10:00 AM - - - - - - Fourth message + + + Fourth message + - + @@ -5891,113 +5872,103 @@ exports[`Storyshots Message list 1`] = ` - + - + > + + - - + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - - - - - - Third message + + + Third message + - + @@ -6126,201 +6107,191 @@ exports[`Storyshots Message list 1`] = ` /> - + - + - - Second message + + + Second message + - + - + - + > + + - - + + + rocket.cat + + - rocket.cat + 10:00 AM - - 10:00 AM - - - - - - Second message + + + Second message + - + @@ -6441,113 +6422,103 @@ exports[`Storyshots Message list 1`] = ` - + - + > + + - - + + + diego.mello + + - diego.mello - - - - 10:00 AM - - - - + 10:00 AM + + + - - First message + + + First message + - + @@ -6647,172 +6628,54 @@ exports[`Storyshots Message list 1`] = ` With image - + - - - - - - - - diego.mello - - - - 10:00 AM - - - @@ -6839,7 +6696,8 @@ exports[`Storyshots Message list 1`] = ` resizeMode="cover" source={ Object { - "uri": "https://open.rocket.chat/file-upload/2ZrxuwcGeTrsoh376/Clipboard%2520-%2520September%25205,%25202018%25204:10%2520PM?rc_uid=y8bd77ptZswPj3EW8&rc_token=79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz", + "priority": "high", + "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&width=50&height=50&rc_token=79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz&rc_uid=y8bd77ptZswPj3EW8", } } style={ @@ -6853,535 +6711,213 @@ exports[`Storyshots Message list 1`] = ` } /> + + - - - This is a description - + diego.mello + + + 10:00 AM - - - - + - - This is a title - - - This is a description - + /> - - - - - - - - - - - - - - - - - - - - - - - - - - - - + } + > + + This is a description + + + - + - + - - - - - - - - diego.mello - - - - 10:00 AM - - - @@ -7408,7 +6938,8 @@ exports[`Storyshots Message list 1`] = ` resizeMode="cover" source={ Object { - "uri": "https://open.rocket.chat/file-upload/sxLXBzjwuqxMnebyP/Clipboard%2520-%252029%2520de%2520Agosto%2520de%25202018%2520%25C3%25A0s%252018:10?rc_uid=y8bd77ptZswPj3EW8&rc_token=79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz", + "priority": "high", + "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&width=50&height=50&rc_token=79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz&rc_uid=y8bd77ptZswPj3EW8", } } style={ @@ -7422,63 +6953,75 @@ exports[`Storyshots Message list 1`] = ` } /> + + - - - This is a description - + diego.mello + + + 10:00 AM - - - - + - - This is a title - - - This is a description - + /> - - - + + This is a description + + - - - - - - - - - - - - - - - - - - - - - - - - - + } + /> + + - + @@ -7803,113 +7143,103 @@ exports[`Storyshots Message list 1`] = ` With video - + - - - - - + + + + + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - - - - This is a description + This is a description + - - - - View - - - - With audio - - + - + > + + - - + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - - - - View - + + + + + + With audio + + + + + + + + + + + + - + + diego.mello + + + + > + 10:00 AM + + + + View - + +  + + + - - - 00:00 - - - - + value={0} + > + + + + + - - This is a description + 00:00 + + + + + + + This is a description + + - + - + - + - - First message + + + First message + - + - + > + - View - -  - - - +  + + + - - - + - + - - - 00:00 - - - - + "width": 0, + } + } + /> + + + + 00:00 + + + + - - This is a description + + + This is a description + - + - + - View - -  - - - +  + + + - - - + - + + + + + + > + 00:00 + - - 00:00 - - + - View - -  - - - +  + + + - - - + - + + + + + + > + 00:00 + - - 00:00 - @@ -9399,113 +8885,103 @@ exports[`Storyshots Message list 1`] = ` Message with reply - + - + > + + - - + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - - - - - - I’m fine! - - - - - + + + I’m fine! + + + + - - I'm a very long long title and I'll break - - - 10:00 AM - - - - @@ -9674,17 +9115,62 @@ exports[`Storyshots Message list 1`] = ` Object { "backgroundColor": "transparent", "color": "#2F343D", + "flex": 1, "fontFamily": "System", "fontSize": 16, - "fontWeight": "400", + "fontWeight": "500", } } > - - How are you? + I'm a very long long title and I'll break + + + 10:00 AM + + + + + + + How are you? + - + @@ -9693,220 +9179,111 @@ exports[`Storyshots Message list 1`] = ` - + - - - - - - - diego.mello - - - - 10:00 AM - - - - - - - I’m fine! - - - + style={ + Object { + "bottom": 0, + "left": 0, + "position": "absolute", + "right": 0, + "top": 0, + } + } + /> + @@ -9920,46 +9297,110 @@ exports[`Storyshots Message list 1`] = ` } > - rocket.cat + diego.mello + + + 10:00 AM + + + + - 10:00 AM + + I’m fine! + - + + + - @@ -9968,17 +9409,75 @@ exports[`Storyshots Message list 1`] = ` Object { "backgroundColor": "transparent", "color": "#2F343D", + "flex": 1, "fontFamily": "System", "fontSize": 16, - "fontWeight": "400", + "fontWeight": "500", } } > - - How are you? + rocket.cat + + + 10:00 AM + + + + + + + How are you? + + - + @@ -10005,113 +9504,103 @@ exports[`Storyshots Message list 1`] = ` Message with thread - + - - - - + > + + + + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - - - - - - How are you? + + + How are you? + - - - + - -  - + +  + + + 1 reply + + - 1 reply + Nov 10 - - Nov 10 - - + - + > + + - - + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - - - - - - How are you? + + + How are you? + - - - + - -  - + +  + + + +999 replies + + - +999 replies - - - - Nov 10 - + > + Nov 10 + + - - - -  - - - How are you? - - - - - + - - + + How are you? + + + @@ -10736,216 +10150,215 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "flex": 1, - "marginLeft": 46, + "flexDirection": "row", }, Object { - "marginLeft": 10, + "alignItems": "center", }, - false, - false, - false, ] } > - - - - I’m fine! - - - + /> + - - - - - - - - -  - - - Thread with emoji 🙂 😂 - - - + > + + + + + I’m fine! + + + + + + + + + - - + + Thread with emoji 🙂 😂 + + + @@ -10955,216 +10368,215 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "flex": 1, - "marginLeft": 46, + "flexDirection": "row", }, Object { - "marginLeft": 10, + "alignItems": "center", }, - false, - false, - false, ] } > - - - - I’m fine! - - - + /> + - - - - - - - - -  - - - Markdown: link block code - - - + > + + + + + I’m fine! + + + + + + + + + - - + + Markdown: link block code + + + @@ -11174,216 +10586,215 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "flex": 1, - "marginLeft": 46, + "flexDirection": "row", }, Object { - "marginLeft": 10, + "alignItems": "center", }, - false, - false, - false, ] } > - + + + + + - - I’m fine! + + + I’m fine! + - + - - - -  - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - - - - + - - + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + @@ -11393,216 +10804,215 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "flex": 1, - "marginLeft": 46, + "flexDirection": "row", }, Object { - "marginLeft": 10, + "alignItems": "center", }, - false, - false, - false, ] } > - + + + + + - - I’m fine! + + + I’m fine! + - + - - - -  - - - How are you? - - - - - + - - + + How are you? + + + @@ -11612,183 +11022,228 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "flex": 1, - "marginLeft": 46, + "flexDirection": "row", }, Object { - "marginLeft": 10, + "alignItems": "center", }, - false, - false, - false, ] } > - + + + + + - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + - + - + - -  - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - +  + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + > + + - - - + + style={ + Object { + "bottom": 0, + "left": 0, + "position": "absolute", + "right": 0, + "top": 0, + } + } + /> + - - - + - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + - + - - - -  - - - Thread with attachment - - - - - + - - + + Thread with attachment + + + @@ -12050,31 +11458,91 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "flex": 1, - "marginLeft": 46, + "flexDirection": "row", }, Object { - "marginLeft": 10, + "alignItems": "center", }, - false, - false, - false, ] } > - + + + + + - Sent an attachment - + + Sent an attachment + + @@ -12098,113 +11566,103 @@ exports[`Storyshots Message list 1`] = ` Sequential thread messages following thread button - + - + > + + - - + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - - - - - - How are you? + + + How are you? + - - - - - + + - -  - + +  + + + 1 reply + + - 1 reply + Nov 10 - - Nov 10 - - + @@ -12424,12 +11868,10 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "borderRadius": 2, - "height": 20, - "width": 20, + "flexDirection": "row", }, Object { - "marginLeft": 16, + "alignItems": "center", }, ] } @@ -12437,129 +11879,274 @@ exports[`Storyshots Message list 1`] = ` - + + + + + + + > + + + I’m fine! + + + + + + + + + + - + + + + + + - - I’m fine! + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + - + - + @@ -12567,12 +12154,10 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "borderRadius": 2, - "height": 20, - "width": 20, + "flexDirection": "row", }, Object { - "marginLeft": 16, + "alignItems": "center", }, ] } @@ -12580,175 +12165,202 @@ exports[`Storyshots Message list 1`] = ` - + > + + - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - + Sent an attachment + + Sequential thread messages following thread reply + - + - - + + How are you? + + + @@ -12758,168 +12370,285 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "flex": 1, - "marginLeft": 46, + "flexDirection": "row", }, Object { - "marginLeft": 10, + "alignItems": "center", }, - false, - false, - false, ] } > - + + + + + - Sent an attachment - + + + + + I’m fine! + + + + + - - Sequential thread messages following thread reply - - + - -  - - - How are you? - - - + + + + + + > + + + + + Cool! + + + + + + + + + @@ -12927,12 +12656,10 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "borderRadius": 2, - "height": 20, - "width": 20, + "flexDirection": "row", }, Object { - "marginLeft": 16, + "alignItems": "center", }, ] } @@ -12940,129 +12667,131 @@ exports[`Storyshots Message list 1`] = ` - + > + + - - - + - - I’m fine! + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + - + - + @@ -13070,12 +12799,10 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "borderRadius": 2, - "height": 20, - "width": 20, + "flexDirection": "row", }, Object { - "marginLeft": 16, + "alignItems": "center", }, ] } @@ -13083,482 +12810,473 @@ exports[`Storyshots Message list 1`] = ` - - - - + > + + + - - - Cool! - - + Sent an attachment + + Discussion + - + - + + + + + + + + diego.mello + + + + 10:00 AM + + + - - - - + > + Started a discussion: + + This is a discussion + + + + +  + + + No messages yet + + - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - - + /> + - + - - - - - - - Sent an attachment - - - - - - - Discussion - - - - - - + + /> + - - + + + diego.mello + + - diego.mello + 10:00 AM - 10:00 AM + Started a discussion: - - - Started a discussion: - - - This is a discussion - - - + This is a discussion + + - -  - + +  + + + 1 message + + - No messages yet + Nov 10 - - + - + - + > + + - - + + + diego.mello + + - diego.mello + 10:00 AM - 10:00 AM + Started a discussion: - - - Started a discussion: - - - This is a discussion - - - + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + - -  - + +  + + + 10 messages + + - 1 message - - - - Nov 10 - + > + Nov 10 + + - + - + > + + - - + + + diego.mello + + - diego.mello + 10:00 AM - 10:00 AM + Started a discussion: - - - Started a discussion: - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - - + This is a discussion + + - + +  + + -  - + "fontFamily": "System", + "fontSize": 14, + "fontWeight": "500", + } + } + > + +999 messages + + - 10 messages + Nov 10 - - Nov 10 - + + URL + - + - + > + + - - - - diego.mello - - - - 10:00 AM - - - - Started a discussion: - - - This is a discussion - - + + diego.mello + + + + 10:00 AM + + - -  - - + + - +999 messages - + + Rocket.Chat - Free, Open Source, Enterprise Team Chat + + + Rocket.Chat is the leading open source team chat software solution. Free, unlimited and completely customizable with on-premises and SaaS cloud hosting. + + - - Nov 10 - - - - - - - - URL - - - - - - - - - - - - - diego.mello - + + Google + + + Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for. + + - - 10:00 AM - + + + + + + + + + + + + + diego.mello + + - Rocket.Chat - Free, Open Source, Enterprise Team Chat + 10:00 AM + + - Rocket.Chat is the leading open source team chat software solution. Free, unlimited and completely customizable with on-premises and SaaS cloud hosting. + + + Message + + + + + + + Google + + + Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for. + + + + + + + + + + + - - Google - - - Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for. - + > + Google + + + Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for. + + @@ -14900,220 +14737,111 @@ exports[`Storyshots Message list 1`] = ` Custom fields - + - - - - - - - diego.mello - - - - 10:00 AM - - - - - - - Message - - - + /> + @@ -15127,86 +14855,111 @@ exports[`Storyshots Message list 1`] = ` } > - rocket.cat - - - 10:00 AM + diego.mello - + 10:00 AM + + + + - - - Custom fields - + + Message - + + + - Field 1 + rocket.cat - Value 1 + 10:00 AM - Field 2 - - - Value 2 + > + + Custom fields + + - - Field 3 - - + Field 1 + + + Value 1 + + + - Value 3 - - - - + Field 2 + + - Field 4 - - + Value 2 + + + - Value 4 - - - - + Field 3 + + + Value 3 + + + - Field 5 - - + Field 4 + + + Value 4 + + + - Value 5 - + + Field 5 + + + Value 5 + + @@ -15422,113 +15259,103 @@ exports[`Storyshots Message list 1`] = ` Two short custom fields - + - + > + + - - + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - - - - + + + Message + + + + + - - - Message - - - - - + + + rocket.cat + + + 10:00 AM + + + + + + + Custom fields + + + + + + + + Field 1 + + + Value 1 + + + + + Field 2 + + + Value 2 + + + + + - - rocket.cat - - - 10:00 AM - - - - @@ -15697,141 +15685,283 @@ exports[`Storyshots Message list 1`] = ` Object { "backgroundColor": "transparent", "color": "#2F343D", + "flex": 1, "fontFamily": "System", "fontSize": 16, - "fontWeight": "400", + "fontWeight": "500", } } > - - Custom fields - + rocket.cat - - - - - Field 1 + 10:00 AM + + - Value 1 + + + Custom fields 2 + + - - Field 2 - - + Field 1 + + + Value 1 + + + - Value 2 - + + Field 2 + + + Value 2 + + + + + + + + Broadcast + + + + + + + + + + @@ -15845,155 +15975,145 @@ exports[`Storyshots Message list 1`] = ` } > - rocket.cat - - - 10:00 AM + diego.mello - + 10:00 AM + + + + - - - Custom fields 2 - + + Broadcasted message - + + + - - - Field 1 - - - Value 1 - - - - - Field 2 - - + - Value 2 - - + } + > + Reply + @@ -16006,127 +16126,117 @@ exports[`Storyshots Message list 1`] = ` Array [ Object { "fontSize": 20, - "fontWeight": "300", - "marginLeft": 10, - "marginTop": 30, - }, - Object { - "marginBottom": 0, - "marginTop": 30, - }, - ] - } - > - Broadcast - - - + Archived + + + } + > + - + > + + - - - - diego.mello - - - - 10:00 AM - - - - + + diego.mello + + - - Broadcasted message - + 10:00 AM - - - + -  - - - Reply + > + + This message is inside an archived room + + @@ -16300,7 +16343,7 @@ exports[`Storyshots Message list 1`] = ` ] } > - Archived + Error + +  + + + - This message is inside an archived room - - - - - - - - - - Error - - - - -  - - - - - - - - - - This message has error too + This message has error @@ -16684,17 +16609,9 @@ exports[`Storyshots Message list 1`] = ` - - - - - + } + > - - - - diego.mello - - - - 10:00 AM - - @@ -16859,7 +16672,7 @@ exports[`Storyshots Message list 1`] = ` } > - This message has error + This message has error too @@ -16887,115 +16700,105 @@ exports[`Storyshots Message list 1`] = ` Temp - + - + > + + - - + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - - - - - - Temp message + + + Temp message + - + @@ -17095,115 +16908,103 @@ exports[`Storyshots Message list 1`] = ` Editing - + - + > + + - - + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - - - - - - Message being edited + + + Message being edited + - + @@ -17303,44 +17114,32 @@ exports[`Storyshots Message list 1`] = ` Removed - + @@ -17348,12 +17147,10 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "borderRadius": 2, - "height": 20, - "width": 20, + "flexDirection": "row", }, Object { - "marginLeft": 16, + "alignItems": "center", }, ] } @@ -17361,67 +17158,81 @@ exports[`Storyshots Message list 1`] = ` - + > + + - - - - Message removed - + + Message removed + + @@ -17445,44 +17256,32 @@ exports[`Storyshots Message list 1`] = ` Joined - + @@ -17490,12 +17289,10 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "borderRadius": 2, - "height": 20, - "width": 20, + "flexDirection": "row", }, Object { - "marginLeft": 16, + "alignItems": "center", }, ] } @@ -17503,67 +17300,81 @@ exports[`Storyshots Message list 1`] = ` - + > + + - - - - Has joined the channel - + + Has joined the channel + + @@ -17587,44 +17398,32 @@ exports[`Storyshots Message list 1`] = ` Room name changed - + @@ -17632,12 +17431,10 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "borderRadius": 2, - "height": 20, - "width": 20, + "flexDirection": "row", }, Object { - "marginLeft": 16, + "alignItems": "center", }, ] } @@ -17645,67 +17442,81 @@ exports[`Storyshots Message list 1`] = ` - + > + + - - - - Room name changed to: New name by diego.mello - + + Room name changed to: New name by diego.mello + + @@ -17729,44 +17540,32 @@ exports[`Storyshots Message list 1`] = ` Message pinned - + @@ -17774,12 +17573,10 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "borderRadius": 2, - "height": 20, - "width": 20, + "flexDirection": "row", }, Object { - "marginLeft": 16, + "alignItems": "center", }, ] } @@ -17787,67 +17584,81 @@ exports[`Storyshots Message list 1`] = ` - + > + + - - - - Message pinned - + + Message pinned + + @@ -17871,44 +17682,32 @@ exports[`Storyshots Message list 1`] = ` Has left the channel - + @@ -17916,12 +17715,10 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "borderRadius": 2, - "height": 20, - "width": 20, + "flexDirection": "row", }, Object { - "marginLeft": 16, + "alignItems": "center", }, ] } @@ -17930,67 +17727,81 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "overflow": "hidden", + "borderRadius": 2, + "height": 20, + "width": 20, + }, + Object { + "marginLeft": 16, + }, + ] + } + > + + + + + - + > + Has left the channel + - - - Has left the channel - - @@ -18013,44 +17824,32 @@ exports[`Storyshots Message list 1`] = ` User removed - + @@ -18058,12 +17857,10 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "borderRadius": 2, - "height": 20, - "width": 20, + "flexDirection": "row", }, Object { - "marginLeft": 16, + "alignItems": "center", }, ] } @@ -18071,67 +17868,81 @@ exports[`Storyshots Message list 1`] = ` - + > + + - - - - User rocket.cat removed by diego.mello - + + User rocket.cat removed by diego.mello + + @@ -18155,44 +17966,32 @@ exports[`Storyshots Message list 1`] = ` User added - + @@ -18200,12 +17999,10 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "borderRadius": 2, - "height": 20, - "width": 20, + "flexDirection": "row", }, Object { - "marginLeft": 16, + "alignItems": "center", }, ] } @@ -18214,67 +18011,81 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "overflow": "hidden", + "borderRadius": 2, + "height": 20, + "width": 20, + }, + Object { + "marginLeft": 16, + }, + ] + } + > + + + + + - + > + User rocket.cat added by diego.mello + - - - User rocket.cat added by diego.mello - - @@ -18297,44 +18108,32 @@ exports[`Storyshots Message list 1`] = ` User muted - + @@ -18342,12 +18141,10 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "borderRadius": 2, - "height": 20, - "width": 20, + "flexDirection": "row", }, Object { - "marginLeft": 16, + "alignItems": "center", }, ] } @@ -18355,67 +18152,81 @@ exports[`Storyshots Message list 1`] = ` - + > + + - - - - User rocket.cat muted by diego.mello - + + User rocket.cat muted by diego.mello + + @@ -18439,44 +18250,32 @@ exports[`Storyshots Message list 1`] = ` User unmuted - + @@ -18484,12 +18283,10 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "borderRadius": 2, - "height": 20, - "width": 20, + "flexDirection": "row", }, Object { - "marginLeft": 16, + "alignItems": "center", }, ] } @@ -18498,67 +18295,81 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "overflow": "hidden", + "borderRadius": 2, + "height": 20, + "width": 20, + }, + Object { + "marginLeft": 16, + }, + ] + } + > + + + + + - + > + User rocket.cat unmuted by diego.mello + - - - User rocket.cat unmuted by diego.mello - - @@ -18581,44 +18392,32 @@ exports[`Storyshots Message list 1`] = ` Role added - + @@ -18626,12 +18425,10 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "borderRadius": 2, - "height": 20, - "width": 20, + "flexDirection": "row", }, Object { - "marginLeft": 16, + "alignItems": "center", }, ] } @@ -18639,67 +18436,81 @@ exports[`Storyshots Message list 1`] = ` - + > + + - - - - rocket.cat was set admin by diego.mello - + + rocket.cat was set admin by diego.mello + + @@ -18723,44 +18534,32 @@ exports[`Storyshots Message list 1`] = ` Role removed - + @@ -18768,12 +18567,10 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "borderRadius": 2, - "height": 20, - "width": 20, + "flexDirection": "row", }, Object { - "marginLeft": 16, + "alignItems": "center", }, ] } @@ -18782,67 +18579,81 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "overflow": "hidden", + "borderRadius": 2, + "height": 20, + "width": 20, + }, + Object { + "marginLeft": 16, + }, + ] + } + > + + + + + - + > + rocket.cat is no longer admin by diego.mello + - - - rocket.cat is no longer admin by diego.mello - - @@ -18865,44 +18676,32 @@ exports[`Storyshots Message list 1`] = ` Changed description - + @@ -18910,12 +18709,10 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "borderRadius": 2, - "height": 20, - "width": 20, + "flexDirection": "row", }, Object { - "marginLeft": 16, + "alignItems": "center", }, ] } @@ -18923,67 +18720,81 @@ exports[`Storyshots Message list 1`] = ` - + > + + - - - - Room description changed to: new description by diego.mello - + + Room description changed to: new description by diego.mello + + @@ -19007,44 +18818,32 @@ exports[`Storyshots Message list 1`] = ` Changed announcement - + @@ -19052,12 +18851,10 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "borderRadius": 2, - "height": 20, - "width": 20, + "flexDirection": "row", }, Object { - "marginLeft": 16, + "alignItems": "center", }, ] } @@ -19066,67 +18863,81 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "overflow": "hidden", + "borderRadius": 2, + "height": 20, + "width": 20, + }, + Object { + "marginLeft": 16, + }, + ] + } + > + + + + + - + > + Room announcement changed to: new announcement by diego.mello + - - - Room announcement changed to: new announcement by diego.mello - - @@ -19149,44 +18960,32 @@ exports[`Storyshots Message list 1`] = ` Changed topic - + @@ -19194,12 +18993,10 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "borderRadius": 2, - "height": 20, - "width": 20, + "flexDirection": "row", }, Object { - "marginLeft": 16, + "alignItems": "center", }, ] } @@ -19207,67 +19004,81 @@ exports[`Storyshots Message list 1`] = ` - + > + + - - - - Room topic changed to: new topic by diego.mello - + + Room topic changed to: new topic by diego.mello + + @@ -19291,44 +19102,32 @@ exports[`Storyshots Message list 1`] = ` Changed type - + @@ -19336,12 +19135,10 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "borderRadius": 2, - "height": 20, - "width": 20, + "flexDirection": "row", }, Object { - "marginLeft": 16, + "alignItems": "center", }, ] } @@ -19350,67 +19147,81 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "overflow": "hidden", + "borderRadius": 2, + "height": 20, + "width": 20, + }, + Object { + "marginLeft": 16, + }, + ] + } + > + + + + + - + > + Room type changed to: public by diego.mello + - - - Room type changed to: public by diego.mello - - @@ -19433,118 +19244,108 @@ exports[`Storyshots Message list 1`] = ` Custom style - + - - + > + + - - + + + diego.mello + + - diego.mello - - - - 10:00 AM - - - - + + - - Message + + + Message + - + @@ -19644,113 +19455,103 @@ exports[`Storyshots Message list 1`] = ` Markdown emphasis - + - + > + + - - + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - - - - - - Italic with - - asterisks + Italic with - - - or - - + + asterisks + + + + or + + + > + + underscores + + - underscores + . Bold with - - - . Bold with - - + > + + asterisks + + - asterisks + or - - - or - - + > + + underscores + + - underscores + . - - - . - - - - Strikethrough + > + + Strikethrough + - + @@ -19917,332 +19728,332 @@ exports[`Storyshots Message list 1`] = ` Markdown headers - + - - - - - - - diego.mello - - - - 10:00 AM - - - - - - - H1 - - - - - - - H2 - - + Object { + "bottom": 0, + "left": 0, + "position": "absolute", + "right": 0, + "top": 0, + } + } + /> + + - + + diego.mello + + + - - H3 - + 10:00 AM - - - H4 + + + H1 + - - - + - + + + H2 + + + + - - H5 + + + H3 + - - - + - + + + H4 + + + + - - H6 + + + H5 + + + + + + + H6 + - + @@ -20268,113 +20079,103 @@ exports[`Storyshots Message list 1`] = ` Markdown links - + - + > + + - - + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - - - - - - Support - - Google + Support - - - - - + > + + Google + + - I\`m an inline-style link + + + + + I\`m an inline-style link + + + + https://google.com - - - https://google.com - + @@ -20510,113 +20321,103 @@ exports[`Storyshots Message list 1`] = ` Markdown image - + - + > + + - - + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - - - - - - + > + + + @@ -20715,113 +20526,103 @@ exports[`Storyshots Message list 1`] = ` Markdown code - + - + > + + - - + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - - - - - - Inline - - code - - - has - - + Inline + + - back-ticks around - - - it. + > + code + + + has + + + back-ticks around + + + it. + - - - Code block + > + Code block - + + @@ -20969,113 +20780,103 @@ exports[`Storyshots Message list 1`] = ` Markdown quote - + - + - + > + + - - + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - - - - - - Quote + + + Quote + - + @@ -21186,113 +20997,103 @@ exports[`Storyshots Message list 1`] = ` Markdown table - + - + + style={ + Object { + "bottom": 0, + "left": 0, + "position": "absolute", + "right": 0, + "top": 0, + } + } + /> + - - + + + diego.mello + + - diego.mello + 10:00 AM - - 10:00 AM - - - @@ -21372,183 +21171,195 @@ exports[`Storyshots Message list 1`] = ` style={ Array [ Object { - "flex": 1, - "padding": 5, + "borderBottomWidth": 1, + "borderColor": "#000000", + "flexDirection": "row", }, ] } > - - - First Header + + + First Header + - - - - + - - Second Header + + + Second Header + - + - - - + - - - Content from cell 1 + + + Content from cell 1 + - - - - + - - Content from cell 2 + + + Content from cell 2 + - + - - - - - Content in the first column + + + Content in the first column + - - - - + - - Content in the second column + + + Content in the second column + - + diff --git a/app/actions/index.js b/app/actions/index.js index 634d049cb3..ca322276ad 100644 --- a/app/actions/index.js +++ b/app/actions/index.js @@ -40,13 +40,6 @@ export function setAllSettings(settings) { }; } -export function setCustomEmojis(emojis) { - return { - type: types.SET_CUSTOM_EMOJIS, - payload: emojis - }; -} - export function login() { return { type: 'LOGIN' diff --git a/app/containers/FileModal.js b/app/containers/FileModal.js new file mode 100644 index 0000000000..d51e8030c0 --- /dev/null +++ b/app/containers/FileModal.js @@ -0,0 +1,121 @@ +import React from 'react'; +import { + View, Text, TouchableWithoutFeedback, ActivityIndicator, StyleSheet, SafeAreaView +} from 'react-native'; +import FastImage from 'react-native-fast-image'; +import PropTypes from 'prop-types'; +import Modal from 'react-native-modal'; +import ImageViewer from 'react-native-image-zoom-viewer'; +import VideoPlayer from 'react-native-video-controls'; + +import sharedStyles from '../views/Styles'; +import { COLOR_WHITE } from '../constants/colors'; +import { formatAttachmentUrl } from '../lib/utils'; + +const styles = StyleSheet.create({ + safeArea: { + flex: 1 + }, + modal: { + margin: 0 + }, + titleContainer: { + width: '100%', + alignItems: 'center', + marginVertical: 10 + }, + title: { + color: COLOR_WHITE, + textAlign: 'center', + fontSize: 16, + ...sharedStyles.textSemibold + }, + description: { + color: COLOR_WHITE, + textAlign: 'center', + fontSize: 14, + ...sharedStyles.textMedium + }, + indicator: { + flex: 1 + } +}); + +const Indicator = React.memo(() => ( + +)); + +const ModalContent = React.memo(({ + attachment, onClose, user, baseUrl +}) => { + if (attachment && attachment.image_url) { + const url = formatAttachmentUrl(attachment.image_url, user.id, user.token, baseUrl); + return ( + + + + {attachment.title} + {attachment.description ? {attachment.description} : null} + + + null} + renderImage={props => } + loadingRender={() => } + /> + + ); + } + if (attachment && attachment.video_url) { + const uri = formatAttachmentUrl(attachment.video_url, user.id, user.token, baseUrl); + return ( + + + + ); + } + return null; +}); + +const FileModal = React.memo(({ + isVisible, onClose, attachment, user, baseUrl +}) => ( + + + +), (prevProps, nextProps) => prevProps.isVisible === nextProps.isVisible); + +FileModal.propTypes = { + isVisible: PropTypes.bool, + attachment: PropTypes.object, + user: PropTypes.object, + baseUrl: PropTypes.string, + onClose: PropTypes.func +}; +FileModal.displayName = 'FileModal'; + +ModalContent.propTypes = { + attachment: PropTypes.object, + user: PropTypes.object, + baseUrl: PropTypes.string, + onClose: PropTypes.func +}; +ModalContent.displayName = 'FileModalContent'; + +export default FileModal; diff --git a/app/containers/HeaderButton.js b/app/containers/HeaderButton.js index 3ad9675f97..b31fb814e8 100644 --- a/app/containers/HeaderButton.js +++ b/app/containers/HeaderButton.js @@ -20,9 +20,9 @@ export const CustomHeaderButtons = React.memo(props => ( /> )); -export const DrawerButton = React.memo(({ navigation, testID }) => ( +export const DrawerButton = React.memo(({ navigation, testID, ...otherProps }) => ( - + )); diff --git a/app/containers/MessageBox/ReplyPreview.js b/app/containers/MessageBox/ReplyPreview.js index dd24b0d126..6477a4a514 100644 --- a/app/containers/MessageBox/ReplyPreview.js +++ b/app/containers/MessageBox/ReplyPreview.js @@ -5,6 +5,7 @@ import moment from 'moment'; import { connect } from 'react-redux'; import Markdown from '../message/Markdown'; +import { getCustomEmoji } from '../message/utils'; import { CustomIcon } from '../../lib/Icons'; import sharedStyles from '../../views/Styles'; import { @@ -49,7 +50,6 @@ const styles = StyleSheet.create({ @connect(state => ({ Message_TimeFormat: state.settings.Message_TimeFormat, - customEmojis: state.customEmojis, baseUrl: state.settings.Site_Url || state.server ? state.server.server : '' })) export default class ReplyPreview extends Component { @@ -57,7 +57,6 @@ export default class ReplyPreview extends Component { message: PropTypes.object.isRequired, Message_TimeFormat: PropTypes.string.isRequired, close: PropTypes.func.isRequired, - customEmojis: PropTypes.object.isRequired, baseUrl: PropTypes.string.isRequired, username: PropTypes.string.isRequired } @@ -73,7 +72,7 @@ export default class ReplyPreview extends Component { render() { const { - message, Message_TimeFormat, customEmojis, baseUrl, username + message, Message_TimeFormat, baseUrl, username } = this.props; const time = moment(message.ts).format(Message_TimeFormat); return ( @@ -83,7 +82,7 @@ export default class ReplyPreview extends Component { {message.u.username} {time} - + diff --git a/app/containers/MessageBox/UploadModal.js b/app/containers/MessageBox/UploadModal.js index 82b0ac7dc2..6bb29470b5 100644 --- a/app/containers/MessageBox/UploadModal.js +++ b/app/containers/MessageBox/UploadModal.js @@ -179,6 +179,7 @@ export default class UploadModal extends Component { animationOut='fadeOut' useNativeDriver hideModalContentWhileAnimating + avoidKeyboard > diff --git a/app/containers/ReactionsModal.js b/app/containers/ReactionsModal.js new file mode 100644 index 0000000000..ff3d14a172 --- /dev/null +++ b/app/containers/ReactionsModal.js @@ -0,0 +1,151 @@ +import React from 'react'; +import { + View, Text, FlatList, StyleSheet, SafeAreaView +} from 'react-native'; +import PropTypes from 'prop-types'; +import Modal from 'react-native-modal'; +import Touchable from 'react-native-platform-touchable'; + +import Emoji from './message/Emoji'; +import I18n from '../i18n'; +import { CustomIcon } from '../lib/Icons'; +import sharedStyles from '../views/Styles'; +import { COLOR_WHITE } from '../constants/colors'; + +const styles = StyleSheet.create({ + titleContainer: { + alignItems: 'center', + paddingVertical: 10 + }, + title: { + color: COLOR_WHITE, + textAlign: 'center', + fontSize: 16, + ...sharedStyles.textSemibold + }, + reactCount: { + color: COLOR_WHITE, + fontSize: 13, + ...sharedStyles.textRegular + }, + peopleReacted: { + color: COLOR_WHITE, + fontSize: 14, + ...sharedStyles.textMedium + }, + peopleItemContainer: { + flex: 1, + flexDirection: 'column', + justifyContent: 'center' + }, + emojiContainer: { + width: 50, + height: 50, + alignItems: 'center', + justifyContent: 'center' + }, + itemContainer: { + height: 50, + flexDirection: 'row' + }, + listContainer: { + flex: 1 + }, + closeButton: { + position: 'absolute', + left: 0, + top: 10, + color: COLOR_WHITE + } +}); +const standardEmojiStyle = { fontSize: 20 }; +const customEmojiStyle = { width: 20, height: 20 }; + +const Item = React.memo(({ item, user, baseUrl }) => { + const count = item.usernames.length; + let usernames = item.usernames.slice(0, 3) + .map(username => (username === user.username ? I18n.t('you') : username)).join(', '); + if (count > 3) { + usernames = `${ usernames } ${ I18n.t('and_more') } ${ count - 3 }`; + } else { + usernames = usernames.replace(/,(?=[^,]*$)/, ` ${ I18n.t('and') }`); + } + return ( + + + + + + + {count === 1 ? I18n.t('1_person_reacted') : I18n.t('N_people_reacted', { n: count })} + + { usernames } + + + ); +}); + +const ModalContent = React.memo(({ message, onClose, ...props }) => { + if (message && message.reactions) { + return ( + + + + + {I18n.t('Reactions')} + + + } + keyExtractor={item => item.emoji} + /> + + ); + } + return null; +}); + +const ReactionsModal = React.memo(({ isVisible, onClose, ...props }) => ( + + + +), (prevProps, nextProps) => prevProps.isVisible === nextProps.isVisible); + +ReactionsModal.propTypes = { + isVisible: PropTypes.bool, + onClose: PropTypes.func +}; +ReactionsModal.displayName = 'ReactionsModal'; + +ModalContent.propTypes = { + message: PropTypes.object, + onClose: PropTypes.func +}; +ModalContent.displayName = 'ReactionsModalContent'; + +Item.propTypes = { + item: PropTypes.object, + user: PropTypes.object, + baseUrl: PropTypes.string +}; +Item.displayName = 'ReactionsModalItem'; + +export default ReactionsModal; diff --git a/app/containers/message/Attachments.js b/app/containers/message/Attachments.js new file mode 100644 index 0000000000..38b2006fb2 --- /dev/null +++ b/app/containers/message/Attachments.js @@ -0,0 +1,44 @@ +import React from 'react'; +import isEqual from 'lodash/isEqual'; +import PropTypes from 'prop-types'; + +import Image from './Image'; +import Audio from './Audio'; +import Video from './Video'; +import Reply from './Reply'; + +const Attachments = React.memo(({ + attachments, timeFormat, user, baseUrl, useMarkdown, onOpenFileModal, getCustomEmoji +}) => { + if (!attachments || attachments.length === 0) { + return null; + } + + return attachments.map((file, index) => { + if (file.image_url) { + return ; + } + if (file.audio_url) { + return