Skip to content

Commit d08240c

Browse files
antoine92190antoine92190
authored
Merge pull request #83 from LouisMazel/master
feat(options): Add prop API to choose file types allowed 🔥
2 parents 254df33 + e722cf8 commit d08240c

15 files changed

+214
-161
lines changed

‎README.md

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ fetchMessages({ room, options }) {
165165
## Props API
166166

167167
| Prop | Type | Required | Default |
168-
| -------------------------- | ---------------- | -------- | ------- |
168+
|----------------------------|------------------|----------|---------|
169169
| height | String | - | 600px |
170170
| currentUserId (1) | [String, Number] | true | - |
171171
| rooms | Array | - | [ ] |
@@ -189,7 +189,8 @@ fetchMessages({ room, options }) {
189189
| responsiveBreakpoint (12) | Number | - | 900 |
190190
| singleRoom (13) | Boolean | - | false |
191191
| theme (14) | Sring | - | light |
192-
| styles (15) | Object | - | (10) |
192+
| acceptedFiles (15) | String | - | "*" |
193+
| styles (16) | Object | - | (10) |
193194

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

@@ -286,7 +287,7 @@ textMessages="{
286287
(11) `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"`.
287288

288289
| Style | Syntax | Example | Output |
289-
| ----------------- | --------------- | -------------------------------------- | -------------------------------------- |
290+
|-------------------|-----------------|----------------------------------------|----------------------------------------|
290291
| Bold | `* *` | `*This is bold text*` | **This is bold text** |
291292
| Italic | `_ _` | `_This text is italicized_` | _This text is italicized_ |
292293
| Strikethrough | `~ ~` | `~This was mistaken text~` | ~~This was mistaken text~~ |
@@ -316,7 +317,11 @@ multiline code
316317

317318
(14) `theme` can be used to change the chat theme. Currently, only `light` and `dark` are available.
318319

319-
(15) `styles` can be used to customize your own theme. Ex:
320+
(15) `acceptedFiles` can be used to set specifics file types allowed in chat. By default, all file types are allowed: `"*"`.
321+
322+
Example: set `"accepted-files="image/png, image/jpeg, application/pdf"` to allow `JPG` `PNG` and `PDF` files
323+
324+
(16) `styles` can be used to customize your own theme. Ex:
320325

321326
```javascript
322327
styles="{
@@ -556,7 +561,7 @@ messages="[
556561
## Events API
557562

558563
| Event | Params | Fires when |
559-
| ------------------------- | --------------------------------------------------------------- | ----------------------------------------------------- |
564+
|---------------------------|-----------------------------------------------------------------|-------------------------------------------------------|
560565
| fetchMessages (1) | `{ room, options }` | A user has scrolled on top to load more messages |
561566
| sendMessage | `{ roomId, content, file (5), replyMessage (6) }` | A user has sent a message |
562567
| editMessage | `{ roomId, messageId, newContent, file (5), replyMessage (6) }` | A user has edited a message |
@@ -621,11 +626,11 @@ Example:
621626
</template>
622627
```
623628

624-
| Slot | Action | Data | Overridden slots |
625-
| -------------------------- | ----------------------------------------------------------- | ----------------------------- | ---------------------------------------------------------------------------------------------------- |
626-
| rooms-header | Add a template on top of rooms list (above the search bar) | - | - |
627-
| room-list-item | Replace the template of the room list items | rooms | - |
628-
| room-header | Replace the template of the room header | room, typingUsers, userStatus | room-options, menu-icon, toggle-icon |
629+
| Slot | Action | Data | Overridden slots |
630+
|----------------|------------------------------------------------------------|-------------------------------|--------------------------------------|
631+
| rooms-header | Add a template on top of rooms list (above the search bar) | - | - |
632+
| room-list-item | Replace the template of the room list items | rooms | - |
633+
| room-header | Replace the template of the room header | room, typingUsers, userStatus | room-options, menu-icon, toggle-icon |
629634
| room-header-info | Replace the template of the room header text | room, typingUsers, userStatus |
630635
| room-options | Replace the template of the room options | - | menu-icon |
631636
| message | Replace the template of the message box | message | deleted-icon, eye-icon, document-icon, pencil-icon, checkmark-icon, dropdown-icon, emoji-picker-icon |

0 commit comments

Comments
 (0)