From bf2c021d7f2197ba500c506836ae513d46852f8d Mon Sep 17 00:00:00 2001
From: VicKun <mincheng4937@126.com>
Date: Tue, 28 May 2024 20:57:35 +0800
Subject: [PATCH] =?UTF-8?q?feat(message):=20add=20some=20option=20property?=
 =?UTF-8?q?=20for=20meesage,=20it=20use=20for=20custo=E2=80=A6=20(#2340)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(message): add some option property for meesage, it use for custom message

* fix(rename): rename the enum value

---------

Co-authored-by: VicKun <minchengcheng@univer.ai>
---
 .../design/src/components/message/Message.tsx   | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/design/src/components/message/Message.tsx b/packages/design/src/components/message/Message.tsx
index 8409e158b1e..08cde6ce768 100644
--- a/packages/design/src/components/message/Message.tsx
+++ b/packages/design/src/components/message/Message.tsx
@@ -16,8 +16,9 @@
 
 /* eslint-disable react-refresh/only-export-components */
 
-import { ErrorSingle, SuccessSingle, WarningSingle } from '@univerjs/icons';
+import { ErrorSingle, Loading, SuccessSingle, WarningSingle } from '@univerjs/icons';
 import { render } from 'rc-util/lib/React/render';
+import type { CSSProperties, ReactElement } from 'react';
 import React from 'react';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import type { IDisposable } from '../../type';
@@ -29,12 +30,15 @@ export enum MessageType {
     Info = 'info',
     Warning = 'warning',
     Error = 'error',
+    Loading = 'loading',
 }
 
 export interface IMessageProps {
     key: string;
     type: MessageType;
     content: string;
+    icon?: ReactElement;
+    style?: CSSProperties;
 }
 
 export interface IMessageOptions extends
@@ -48,15 +52,16 @@ const iconMap = {
     [MessageType.Info]: <WarningSingle className={styles.messageIconInfo} />,
     [MessageType.Warning]: <WarningSingle className={styles.messageIconWarning} />,
     [MessageType.Error]: <ErrorSingle className={styles.messageIconError} />,
+    [MessageType.Loading]: <Loading className={styles.messageIconError} />,
 };
 
 const MessageItem = (props: IMessageProps) => {
-    const { type, content } = props;
+    const { type, content, icon, style } = props;
 
     const messageElement = (
-        <div className={styles.messageItem}>
+        <div className={styles.messageItem} style={style}>
             <div className={styles.messageContent}>
-                <span className={styles.messageIcon}>{iconMap[type]}</span>
+                <span className={styles.messageIcon}>{icon || iconMap[type]}</span>
                 <span>{content}</span>
             </div>
         </div>
@@ -141,4 +146,8 @@ export class Message {
     error(options: IMessageOptions): IDisposable {
         return this.append(MessageType.Error, options);
     }
+
+    loading(options: IMessageOptions): IDisposable {
+        return this.append(MessageType.Loading, options);
+    }
 }