diff --git a/README.md b/README.md index 7321a58..fb178b8 100644 --- a/README.md +++ b/README.md @@ -137,7 +137,7 @@ import { MessageBox } from 'react-chat-elements' | forwarded | none | boolean | message forward icon | | replyButton | none | boolean | message reply icon | | removeButton | none | boolean | message remove icon | -| status | none | string | message status info (waiting, sent, received, read) | +| status | none | string | message status info (waiting, sent, received, read, error) | | notch | true | boolean | message box notch | | avatar | none | url | message box avatar url | | renderAddCmp | none | function (component) | adding custom components to message box | diff --git a/example/components/MessageListExample.tsx b/example/components/MessageListExample.tsx index 506e5dd..723cc59 100644 --- a/example/components/MessageListExample.tsx +++ b/example/components/MessageListExample.tsx @@ -40,7 +40,7 @@ function MessageListExample() { break case 1: Addmtype = 'file' - setStatus('sent') + setStatus('error') break case 2: Addmtype = 'system' diff --git a/example/utils/MessageTypes.ts b/example/utils/MessageTypes.ts index a37ee1f..c1cf701 100644 --- a/example/utils/MessageTypes.ts +++ b/example/utils/MessageTypes.ts @@ -84,7 +84,7 @@ export const fileMessage: MessageType = { }, size: '100MB', }, - status: 'sent', + status: 'error', statusTitle: token() >= 5 ? 'Desktop' : 'Mobile', id: String(Math.random()), position: token() >= 1 ? 'right' : 'left', diff --git a/src/MessageBox/MessageBox.tsx b/src/MessageBox/MessageBox.tsx index d99c79b..196405f 100644 --- a/src/MessageBox/MessageBox.tsx +++ b/src/MessageBox/MessageBox.tsx @@ -16,7 +16,7 @@ import Avatar from '../Avatar/Avatar' import { RiShareForwardFill } from 'react-icons/ri' import { IoIosDoneAll } from 'react-icons/io' -import { MdAccessTime, MdCheck, MdMessage, MdDelete, MdBlock, MdDoneAll } from 'react-icons/md' +import { MdAccessTime, MdCheck, MdMessage, MdDelete, MdBlock, MdDoneAll, MdError } from 'react-icons/md' import { TiArrowForward } from 'react-icons/ti' import { format } from 'timeago.js' @@ -193,6 +193,8 @@ const MessageBox: React.FC = ({ focus = false, notch = true, sty {props.status === 'received' && } {props.status === 'read' && } + + {props.status === 'error' && } )} diff --git a/src/type.d.ts b/src/type.d.ts index a716bca..8e5d7c5 100644 --- a/src/type.d.ts +++ b/src/type.d.ts @@ -172,7 +172,7 @@ export interface IMessage { forwarded: boolean replyButton: boolean removeButton: boolean - status: 'waiting' | 'sent' | 'received' | 'read' + status: 'waiting' | 'sent' | 'received' | 'read' | 'error' statusTitle?: string notch: boolean copiableDate?: boolean