Skip to content

Commit

Permalink
(docs) add room options dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
@antoine92190
antoine92190 committed Jan 24, 2021
1 parent 68b505e commit fb9fbbb
Showing 1 changed file with 59 additions and 29 deletions.
88 changes: 59 additions & 29 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,7 @@ fetchMessages({ room, options }) {
}, 0)
}
```

<br>

## Props API
Expand All @@ -179,23 +180,24 @@ fetchMessages({ room, options }) {
| `messages` | Array | - | `[]` |
| `room-message`(6) | String | - | `null` |
| `messages-loaded`(7) | Boolean | - | `false` |
| `menu-actions`(8) | Array | - | `[]` |
| `message-actions`(9) | Array | - | (9) |
| `room-actions`(8) | Array | - | `[]` |
| `menu-actions`(9) | Array | - | `[]` |
| `message-actions`(10) | Array | - | (10) |
| `show-add-room` | Boolean | - | `true` |
| `show-send-icon` | Boolean | - | `true` |
| `show-files` | Boolean | - | `true` |
| `show-audio` | Boolean | - | `true` |
| `show-emojis` | Boolean | - | `true` |
| `show-reaction-emojis` | Boolean | - | `true` |
| `show-new-messages-divider`(10) | Boolean | - | `true` |
| `show-footer`(11) | Boolean | - | `true` |
| `text-messages`(12) | Object | - | `null` |
| `text-formatting`(13) | Boolean | - | `true` |
| `responsive-breakpoint`(14) | Number | - | `900` |
| `single-room`(15) | Boolean | - | `false` |
| `theme`(16) | Sring | - | `light` |
| `accepted-files`(17) | String | - | `*` |
| `styles`(18) | Object | - | (18) |
| `show-new-messages-divider`(11) | Boolean | - | `true` |
| `show-footer`(12) | Boolean | - | `true` |
| `text-messages`(13) | Object | - | `null` |
| `text-formatting`(14) | Boolean | - | `true` |
| `responsive-breakpoint`(15) | Number | - | `900` |
| `single-room`(16) | Boolean | - | `false` |
| `theme`(17) | Sring | - | `light` |
| `accepted-files`(18) | String | - | `*` |
| `styles`(19) | Object | - | (19) |

**(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.)

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

**(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

**(8)** `menu-actions` can be used to display your own buttons when clicking the vertical dots icon inside a room.<br>
**(8)** `room-actions` can be used to display your own buttons when clicking the dropdown icon of each room inside the rooms list.<br>
You can then use the [room-action-handler](#events-api) event to call your own action after clicking a button. Ex:

```javascript
menu-actions="[
{
name: 'archiveRoom',
title: 'Archive Room'
}
]"
```

**(9)** `menu-actions` can be used to display your own buttons when clicking the vertical dots icon inside a room.<br>
You can then use the [menu-action-handler](#events-api) event to call your own action after clicking a button. Ex:

```javascript
Expand All @@ -231,7 +245,7 @@ menu-actions="[
]"
```

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

```javascript
Expand Down Expand Up @@ -271,11 +285,11 @@ messageActions="[
]"
```

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

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

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

```javascript
text-messages="{
Expand All @@ -293,7 +307,7 @@ text-messages="{
}"
```

**(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"`.
**(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"`.

| Style | Syntax | Example | Output |
| ----------------- | --------------- | -------------------------------------- | -------------------------------------- |
Expand Down Expand Up @@ -469,18 +483,19 @@ messages="[
| ------------------------------------ | ----------------------------------------------------------------------- | ----------------------------------------------- |
| `fetch-messages`(1) | `{ room, options }` | Scrolled on top to load more messages |
| `fetch-more-rooms`(2) | - | Scrolled to load more rooms |
| `send-message` | `{ roomId, content, file(7), replyMessage(8), usersTag }` | Sent a message |
| `edit-message` | `{ roomId, messageId, newContent, file(6), replyMessage(8) ,usersTag }` | Edited a message |
| `send-message` | `{ roomId, content, file(8), replyMessage(9), usersTag }` | Sent a message |
| `edit-message` | `{ roomId, messageId, newContent, file(7), replyMessage(9) ,usersTag }` | Edited a message |
| `delete-message` | `{ roomId, messageId }` | Deleted a message |
| `open-file` | `{ message, action }` | Clicked to view or download a file |
| `open-user-tag`(3) | `{ user }` | Clicked on a user tag inside a message |
| `add-room` | - | Clicked on the plus icon next to searchbar |
| `menu-action-handler`(4) | `{ roomId, action }` | Clicked on the vertical dots icon inside a room |
| `message-action-handler`(5) | `{ roomId, action, message }` | Clicked on the dropdown icon inside a message |
| `room-action-handler`(4) | `{ roomId, action }` | Clicked on the vertical dots icon inside a room |
| `menu-action-handler`(5) | `{ roomId, action }` | Clicked on the vertical dots icon inside a room |
| `message-action-handler`(6) | `{ roomId, action, message }` | Clicked on the dropdown icon inside a message |
| `send-message-reaction` | `{ roomId, messageId, reaction, remove }` | Clicked on the emoji icon inside a message |
| `room-info` | `room` | Clicked the room header bar |
| `toggle-rooms-list` | `{ opened }` | Clicked on the toggle icon inside a room header |
| `textarea-action-handler`(6) | `{ roomId, message }` | Clicked on custom icon inside the footer |
| `textarea-action-handler`(7) | `{ roomId, message }` | Clicked on custom icon inside the footer |
| `typing-message` | `{ message, roomId }` | Started typing a message |

**(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>
Expand All @@ -497,7 +512,20 @@ messages="[
This will make the tag clickable inside a message. Ex: [message tag content](#messages-collection-inside-a-room-document)<br>
`send-message` and `edit-message` events will handle that pattern for you and pass it in the `content` param.

**(4)** `menu-action-handler` is the result of the [`menu-actions`](#props-api) prop.<br>
**(4)** `room-action-handler` is the result of the [`room-actions`](#props-api) prop.<br>
When clicking a button from your `room-actions` array, `room-action-handler` will give you the name of the button that was click.
Then you can do whatever you want with it. Ex:

```javascript
menuActionHandler({ roomId, action }) {
switch (action.name) {
case 'archiveRoom':
// call a method to archive the room
}
}
```

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

Expand All @@ -514,8 +542,8 @@ menuActionHandler({ roomId, action }) {
}
```

**(5)** `message-action-handler` is the result of the `message-actions` prop.<br>
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.
**(6)** `message-action-handler` is the result of the [`message-actions`](#props-api) prop.<br>
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.
Then you can do whatever you want with it. Ex:

```javascript
Expand All @@ -529,11 +557,11 @@ messageActionHandler({ roomId, action, message }) {
}
```

**(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.
**(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.

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

**(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.
**(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.

<br>

Expand All @@ -550,7 +578,8 @@ Example:
| <div style="width:230px">Slot</div> | Action | Data | Overridden slots |
| ----------------------------------- | ----------------------------------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| `rooms-header` | Add a template on top of rooms list (above the search bar) | - | - |
| `room-list-item` | Replace the template of the room list items | `room` | - |
| `room-list-item` | Replace the template of the room list items | `room` | `room-list-options` |
| `room-list-options` | Replace the template of the list room options | `room` | `room-list-options-icon` |
| `room-header` | Replace the template of the room header | `room`, `typingUsers`, `userStatus` | `room-options`, `menu-icon`, `toggle-icon` |
| `room-header-avatar` | Replace the template of the room header avatar | `room` |
| `room-header-info` | Replace the template of the room header text | `room`, `typingUsers`, `userStatus` |
Expand Down Expand Up @@ -579,6 +608,7 @@ Example:
| `microphone-icon` | Replace the microphone icon | | - |
| `microphone-off-icon` | Replace the microphone-off icon | | - |
| `dropdown-icon` | Replace the dropdown icon | - | - |
| `room-list-options-icon` | Replace the room list options dropdown icon | - | - |
| `search-icon` | Replace the search icon | - | - |
| `add-icon` | Replace the add room icon | - | - |

Expand Down

0 comments on commit fb9fbbb

Please sign in to comment.