Skip to content

Commit 6847c48

Browse files
antoine92190antoine92190
committed
(props) add showNewMessagesDivider
1 parent df56ddf commit 6847c48

File tree

4 files changed

+37
-29
lines changed

4 files changed

+37
-29
lines changed

‎README.md

Lines changed: 31 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -87,28 +87,29 @@ You can import it as a custom component:
8787

8888
## Props API
8989

90-
| Prop | Type | Required | Default |
91-
| ------------------------- | ---------------- | -------- | ------- |
92-
| height | String | - | 600px |
93-
| currentUserId (1) | [String, Number] | true | - |
94-
| rooms | Array | - | [ ] |
95-
| loadingRooms (2) | Boolean | - | false |
96-
| roomId (3) | [String, Number] | - | null |
97-
| messages | Array | - | [ ] |
98-
| roomMessage (4) | Object | - | null |
99-
| messagesLoaded (5) | Boolean | - | false |
100-
| menuActions (6) | Array | - | [ ] |
101-
| messageActions (7) | Array | - | (4) |
102-
| showAddRoom | Boolean | - | true |
103-
| showFiles | Boolean | - | true |
104-
| showEmojis | Boolean | - | true |
105-
| showReactionEmojis | Boolean | - | true |
106-
| textMessages (8) | Object | - | null |
107-
| textFormatting (9) | Boolean | - | true |
108-
| responsiveBreakpoint (10) | Number | - | 900 |
109-
| singleRoom (11) | Boolean | - | false |
110-
| theme (12) | Sring | - | light |
111-
| styles (13) | Object | - | (10) |
90+
| Prop | Type | Required | Default |
91+
| -------------------------- | ---------------- | -------- | ------- |
92+
| height | String | - | 600px |
93+
| currentUserId (1) | [String, Number] | true | - |
94+
| rooms | Array | - | [ ] |
95+
| loadingRooms (2) | Boolean | - | false |
96+
| roomId (3) | [String, Number] | - | null |
97+
| messages | Array | - | [ ] |
98+
| roomMessage (4) | Object | - | null |
99+
| messagesLoaded (5) | Boolean | - | false |
100+
| menuActions (6) | Array | - | [ ] |
101+
| messageActions (7) | Array | - | (4) |
102+
| showAddRoom | Boolean | - | true |
103+
| showFiles | Boolean | - | true |
104+
| showEmojis | Boolean | - | true |
105+
| showReactionEmojis | Boolean | - | true |
106+
| showNewMessagesDivider (8) | Boolean | - | true |
107+
| textMessages (9) | Object | - | null |
108+
| textFormatting (10) | Boolean | - | true |
109+
| responsiveBreakpoint (11) | Number | - | 900 |
110+
| singleRoom (12) | Boolean | - | false |
111+
| theme (13) | Sring | - | light |
112+
| styles (14) | Object | - | (10) |
112113

113114
(1) `currentUserId` is required to display UI and trigger actions according to the user using the chat (ex: messages position on the right, etc.)
114115

@@ -180,7 +181,9 @@ messageActions="[
180181
]"
181182
```
182183

183-
(8) `textMessages` can be used to replace default i18n texts. Ex:
184+
(8) `showNewMessagesDivider` can be used to show/hide the blue line divider between seen and unseen messages.
185+
186+
(9) `textMessages` can be used to replace default i18n texts. Ex:
184187

185188
```javascript
186189
textMessages="{
@@ -193,7 +196,7 @@ textMessages="{
193196
}"
194197
```
195198

196-
(9) `textFormatting` can be used to add text formatting. Currently, bold, italic, strikethrough, underline, inline code and multiline code formatting are available and can be used in conjonction. You can disable text formatting by passing the prop as `:textFormatting="false"`.
199+
(10) `textFormatting` can be used to add text formatting. Currently, bold, italic, strikethrough, underline, inline code and multiline code formatting are available and can be used in conjonction. You can disable text formatting by passing the prop as `:textFormatting="false"`.
197200

198201
| Style | Syntax | Example | Output |
199202
| ----------------- | --------------- | -------------------------------------- | -------------------------------------- |
@@ -220,13 +223,13 @@ This is
220223
multiline code
221224
```
222225

223-
(10) `responsiveBreakpoint` can be used to collapse the rooms list on the left when then viewport size goes below the specified width.
226+
(11) `responsiveBreakpoint` can be used to collapse the rooms list on the left when then viewport size goes below the specified width.
224227

225-
(11) `singleRoom` can be used if you never want to show the rooms list on the left. You still need to pass the `rooms` prop as an array with a single element.
228+
(12) `singleRoom` can be used if you never want to show the rooms list on the left. You still need to pass the `rooms` prop as an array with a single element.
226229

227-
(12) `theme` can be used to change the chat theme. Currently, only `light` and `dark` are available.
230+
(13) `theme` can be used to change the chat theme. Currently, only `light` and `dark` are available.
228231

229-
(13) `styles` can be used to customize your own theme. Ex:
232+
(14) `styles` can be used to customize your own theme. Ex:
230233

231234
```javascript
232235
styles="{

‎src/ChatWindow/ChatWindow.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
:showFiles="showFiles"
3333
:showEmojis="showEmojis"
3434
:showReactionEmojis="showReactionEmojis"
35+
:showNewMessagesDivider="showNewMessagesDivider"
3536
:textMessages="t"
3637
:singleRoom="singleRoom"
3738
:showRoomsList="showRoomsList"
@@ -97,6 +98,7 @@ export default {
9798
showFiles: { type: Boolean, default: true },
9899
showEmojis: { type: Boolean, default: true },
99100
showReactionEmojis: { type: Boolean, default: true },
101+
showNewMessagesDivider: { type: Boolean, default: true },
100102
textFormatting: { type: Boolean, default: true },
101103
newMessage: { type: Object, default: null },
102104
roomMessage: { type: String, default: '' }

‎src/ChatWindow/Message.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -252,6 +252,7 @@ export default {
252252
roomFooterRef: { type: HTMLDivElement },
253253
newMessages: { type: Array },
254254
showReactionEmojis: { type: Boolean, required: true },
255+
showNewMessagesDivider: { type: Boolean, required: true },
255256
textFormatting: { type: Boolean, required: true },
256257
emojisList: { type: Object, required: true },
257258
hideOptions: { type: Boolean, required: true }
@@ -281,7 +282,7 @@ export default {
281282
}
282283
},
283284
newMessages(val) {
284-
if (!val.length) return
285+
if (!val.length || !this.showNewMessagesDivider) return
285286
this.newMessage = val.reduce((res, obj) =>
286287
obj.index < res.index ? obj : res
287288
)

‎src/ChatWindow/Room.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@
9494
:roomFooterRef="$refs.roomFooter"
9595
:newMessages="newMessages"
9696
:showReactionEmojis="showReactionEmojis"
97+
:showNewMessagesDivider="showNewMessagesDivider"
9798
:textFormatting="textFormatting"
9899
:emojisList="emojisList"
99100
:hideOptions="hideOptions"
@@ -266,6 +267,7 @@ export default {
266267
showFiles: { type: Boolean, required: true },
267268
showEmojis: { type: Boolean, required: true },
268269
showReactionEmojis: { type: Boolean, required: true },
270+
showNewMessagesDivider: { type: Boolean, required: true },
269271
textFormatting: { type: Boolean, required: true },
270272
loadingRooms: { type: Boolean, required: true },
271273
roomInfo: { type: Function }

0 commit comments

Comments
 (0)