Skip to content

Commit fb9fbbb

Browse files
antoine92190antoine92190
committed
(docs) add room options dropdown
1 parent 68b505e commit fb9fbbb

File tree

1 file changed

+59
-29
lines changed

1 file changed

+59
-29
lines changed

‎README.md

Lines changed: 59 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,7 @@ fetchMessages({ room, options }) {
163163
}, 0)
164164
}
165165
```
166+
166167
<br>
167168

168169
## Props API
@@ -179,23 +180,24 @@ fetchMessages({ room, options }) {
179180
| `messages` | Array | - | `[]` |
180181
| `room-message`(6) | String | - | `null` |
181182
| `messages-loaded`(7) | Boolean | - | `false` |
182-
| `menu-actions`(8) | Array | - | `[]` |
183-
| `message-actions`(9) | Array | - | (9) |
183+
| `room-actions`(8) | Array | - | `[]` |
184+
| `menu-actions`(9) | Array | - | `[]` |
185+
| `message-actions`(10) | Array | - | (10) |
184186
| `show-add-room` | Boolean | - | `true` |
185187
| `show-send-icon` | Boolean | - | `true` |
186188
| `show-files` | Boolean | - | `true` |
187189
| `show-audio` | Boolean | - | `true` |
188190
| `show-emojis` | Boolean | - | `true` |
189191
| `show-reaction-emojis` | Boolean | - | `true` |
190-
| `show-new-messages-divider`(10) | Boolean | - | `true` |
191-
| `show-footer`(11) | Boolean | - | `true` |
192-
| `text-messages`(12) | Object | - | `null` |
193-
| `text-formatting`(13) | Boolean | - | `true` |
194-
| `responsive-breakpoint`(14) | Number | - | `900` |
195-
| `single-room`(15) | Boolean | - | `false` |
196-
| `theme`(16) | Sring | - | `light` |
197-
| `accepted-files`(17) | String | - | `*` |
198-
| `styles`(18) | Object | - | (18) |
192+
| `show-new-messages-divider`(11) | Boolean | - | `true` |
193+
| `show-footer`(12) | Boolean | - | `true` |
194+
| `text-messages`(13) | Object | - | `null` |
195+
| `text-formatting`(14) | Boolean | - | `true` |
196+
| `responsive-breakpoint`(15) | Number | - | `900` |
197+
| `single-room`(16) | Boolean | - | `false` |
198+
| `theme`(17) | Sring | - | `light` |
199+
| `accepted-files`(18) | String | - | `*` |
200+
| `styles`(19) | Object | - | (19) |
199201

200202
**(1)** `current-user-id` is required to display UI and trigger actions according to the user using the chat (ex: messages position on the right, etc.)
201203

@@ -211,7 +213,19 @@ fetchMessages({ room, options }) {
211213

212214
**(7)** `messages-loaded` must be set to `true` when all messages of a conversation have been loaded. Meaning the user cannot scroll on top to load more paginated messages
213215

214-
**(8)** `menu-actions` can be used to display your own buttons when clicking the vertical dots icon inside a room.<br>
216+
**(8)** `room-actions` can be used to display your own buttons when clicking the dropdown icon of each room inside the rooms list.<br>
217+
You can then use the [room-action-handler](#events-api) event to call your own action after clicking a button. Ex:
218+
219+
```javascript
220+
menu-actions="[
221+
{
222+
name: 'archiveRoom',
223+
title: 'Archive Room'
224+
}
225+
]"
226+
```
227+
228+
**(9)** `menu-actions` can be used to display your own buttons when clicking the vertical dots icon inside a room.<br>
215229
You can then use the [menu-action-handler](#events-api) event to call your own action after clicking a button. Ex:
216230

217231
```javascript
@@ -231,7 +245,7 @@ menu-actions="[
231245
]"
232246
```
233247

234-
**(9)** `message-actions` can be used to display your own buttons when clicking the dropdown icon inside a message.<br>
248+
**(10)** `message-actions` can be used to display your own buttons when clicking the dropdown icon inside a message.<br>
235249
You can then use the [message-action-handler](#events-api) event to call your own action after clicking a button. Ex:
236250

237251
```javascript
@@ -271,11 +285,11 @@ messageActions="[
271285
]"
272286
```
273287

274-
**(10)** `show-new-messages-divider` can be used to show/hide the blue line divider between seen and unseen messages.
288+
**(11)** `show-new-messages-divider` can be used to show/hide the blue line divider between seen and unseen messages.
275289

276-
**(11)** `show-footer` can be used to hide the room footer. For example to prevent users to send any message or media.
290+
**(12)** `show-footer` can be used to hide the room footer. For example to prevent users to send any message or media.
277291

278-
**(12)** `text-messages` can be used to replace default i18n texts. Ex:
292+
**(13)** `text-messages` can be used to replace default i18n texts. Ex:
279293

280294
```javascript
281295
text-messages="{
@@ -293,7 +307,7 @@ text-messages="{
293307
}"
294308
```
295309

296-
**(13)** `text-formatting` 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"`.
310+
**(14)** `text-formatting` 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"`.
297311

298312
| Style | Syntax | Example | Output |
299313
| ----------------- | --------------- | -------------------------------------- | -------------------------------------- |
@@ -469,18 +483,19 @@ messages="[
469483
| ------------------------------------ | ----------------------------------------------------------------------- | ----------------------------------------------- |
470484
| `fetch-messages`(1) | `{ room, options }` | Scrolled on top to load more messages |
471485
| `fetch-more-rooms`(2) | - | Scrolled to load more rooms |
472-
| `send-message` | `{ roomId, content, file(7), replyMessage(8), usersTag }` | Sent a message |
473-
| `edit-message` | `{ roomId, messageId, newContent, file(6), replyMessage(8) ,usersTag }` | Edited a message |
486+
| `send-message` | `{ roomId, content, file(8), replyMessage(9), usersTag }` | Sent a message |
487+
| `edit-message` | `{ roomId, messageId, newContent, file(7), replyMessage(9) ,usersTag }` | Edited a message |
474488
| `delete-message` | `{ roomId, messageId }` | Deleted a message |
475489
| `open-file` | `{ message, action }` | Clicked to view or download a file |
476490
| `open-user-tag`(3) | `{ user }` | Clicked on a user tag inside a message |
477491
| `add-room` | - | Clicked on the plus icon next to searchbar |
478-
| `menu-action-handler`(4) | `{ roomId, action }` | Clicked on the vertical dots icon inside a room |
479-
| `message-action-handler`(5) | `{ roomId, action, message }` | Clicked on the dropdown icon inside a message |
492+
| `room-action-handler`(4) | `{ roomId, action }` | Clicked on the vertical dots icon inside a room |
493+
| `menu-action-handler`(5) | `{ roomId, action }` | Clicked on the vertical dots icon inside a room |
494+
| `message-action-handler`(6) | `{ roomId, action, message }` | Clicked on the dropdown icon inside a message |
480495
| `send-message-reaction` | `{ roomId, messageId, reaction, remove }` | Clicked on the emoji icon inside a message |
481496
| `room-info` | `room` | Clicked the room header bar |
482497
| `toggle-rooms-list` | `{ opened }` | Clicked on the toggle icon inside a room header |
483-
| `textarea-action-handler`(6) | `{ roomId, message }` | Clicked on custom icon inside the footer |
498+
| `textarea-action-handler`(7) | `{ roomId, message }` | Clicked on custom icon inside the footer |
484499
| `typing-message` | `{ message, roomId }` | Started typing a message |
485500

486501
**(1)** `fetch-messages` is triggered every time a room is opened. If the room is opened for the first time, the `options` param will hold `reset: true`.<br>
@@ -497,7 +512,20 @@ messages="[
497512
This will make the tag clickable inside a message. Ex: [message tag content](#messages-collection-inside-a-room-document)<br>
498513
`send-message` and `edit-message` events will handle that pattern for you and pass it in the `content` param.
499514

500-
**(4)** `menu-action-handler` is the result of the [`menu-actions`](#props-api) prop.<br>
515+
**(4)** `room-action-handler` is the result of the [`room-actions`](#props-api) prop.<br>
516+
When clicking a button from your `room-actions` array, `room-action-handler` will give you the name of the button that was click.
517+
Then you can do whatever you want with it. Ex:
518+
519+
```javascript
520+
menuActionHandler({ roomId, action }) {
521+
switch (action.name) {
522+
case 'archiveRoom':
523+
// call a method to archive the room
524+
}
525+
}
526+
```
527+
528+
**(5)** `menu-action-handler` is the result of the [`menu-actions`](#props-api) prop.<br>
501529
When clicking a button from your `menu-actions` array, `menu-action-handler` will give you the name of the button that was click.
502530
Then you can do whatever you want with it. Ex:
503531

@@ -514,8 +542,8 @@ menuActionHandler({ roomId, action }) {
514542
}
515543
```
516544

517-
**(5)** `message-action-handler` is the result of the `message-actions` prop.<br>
518-
When clicking a message menu button from your `message-actions` array, `message-action-handler` will give you the name of the button that was click and the corresponding message data.
545+
**(6)** `message-action-handler` is the result of the [`message-actions`](#props-api) prop.<br>
546+
When clicking a button from your `message-actions` array, `message-action-handler` will give you the name of the button that was click and the corresponding message data.
519547
Then you can do whatever you want with it. Ex:
520548

521549
```javascript
@@ -529,11 +557,11 @@ messageActionHandler({ roomId, action, message }) {
529557
}
530558
```
531559

532-
**(6)** `textarea-action-handler` can be used to add an extra icon on the right of the textarea, and recieve an event when clicking it.
560+
**(7)** `textarea-action-handler` can be used to add an extra icon on the right of the textarea, and recieve an event when clicking it.
533561

534-
**(7)** All file params contain: `{ blob, localURL, name, size, type, extension }`
562+
**(8)** All file params contain: `{ blob, localURL, name, size, type, extension }`
535563

536-
**(8)** `replyMessage` object is available when the user replied to another message by clicking the corresponding icon, and contains the message information that was clicked.
564+
**(9)** `replyMessage` object is available when the user replied to another message by clicking the corresponding icon, and contains the message information that was clicked.
537565

538566
<br>
539567

@@ -550,7 +578,8 @@ Example:
550578
| <div style="width:230px">Slot</div> | Action | Data | Overridden slots |
551579
| ----------------------------------- | ----------------------------------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
552580
| `rooms-header` | Add a template on top of rooms list (above the search bar) | - | - |
553-
| `room-list-item` | Replace the template of the room list items | `room` | - |
581+
| `room-list-item` | Replace the template of the room list items | `room` | `room-list-options` |
582+
| `room-list-options` | Replace the template of the list room options | `room` | `room-list-options-icon` |
554583
| `room-header` | Replace the template of the room header | `room`, `typingUsers`, `userStatus` | `room-options`, `menu-icon`, `toggle-icon` |
555584
| `room-header-avatar` | Replace the template of the room header avatar | `room` |
556585
| `room-header-info` | Replace the template of the room header text | `room`, `typingUsers`, `userStatus` |
@@ -579,6 +608,7 @@ Example:
579608
| `microphone-icon` | Replace the microphone icon | | - |
580609
| `microphone-off-icon` | Replace the microphone-off icon | | - |
581610
| `dropdown-icon` | Replace the dropdown icon | - | - |
611+
| `room-list-options-icon` | Replace the room list options dropdown icon | - | - |
582612
| `search-icon` | Replace the search icon | - | - |
583613
| `add-icon` | Replace the add room icon | - | - |
584614

0 commit comments

Comments
 (0)