From 71ee06965ce12fc6794f6b8750cf5b1ba8fe9a2f Mon Sep 17 00:00:00 2001 From: Cheliangzhao Date: Sun, 15 Sep 2024 14:41:35 +0800 Subject: [PATCH] feat: add chat messages component --- .../src/components/chat/ChatMessage.cj | 74 ++----------------- .../chat/chatMessages/ChatMessageMe.cj | 41 ++++++++++ .../chat/chatMessages/ChatMessageSys.cj | 44 +++++++++++ .../chat/chatMessages/ChatMessageYou.cj | 44 +++++++++++ .../cangjie/src/components/home/HomeBottom.cj | 18 +++++ .../src/components/home/HomeBottomBar.cj | 4 - .../cangjie/src/components/home/HomeMain.cj | 19 +++++ .../src/components/home/HomeMessageContent.cj | 4 - .../cangjie/src/components/home/HomeTitle.cj | 16 +++- .../src/main/cangjie/src/components/index.cj | 4 + entry/src/main/cangjie/src/index.cj | 1 - entry/src/main/cangjie/src/pages/HomePage.cj | 12 ++- 12 files changed, 202 insertions(+), 79 deletions(-) create mode 100644 entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageMe.cj create mode 100644 entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageSys.cj create mode 100644 entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageYou.cj create mode 100644 entry/src/main/cangjie/src/components/home/HomeBottom.cj delete mode 100644 entry/src/main/cangjie/src/components/home/HomeBottomBar.cj create mode 100644 entry/src/main/cangjie/src/components/home/HomeMain.cj delete mode 100644 entry/src/main/cangjie/src/components/home/HomeMessageContent.cj create mode 100644 entry/src/main/cangjie/src/components/index.cj diff --git a/entry/src/main/cangjie/src/components/chat/ChatMessage.cj b/entry/src/main/cangjie/src/components/chat/ChatMessage.cj index 4809586..56a9fe3 100644 --- a/entry/src/main/cangjie/src/components/chat/ChatMessage.cj +++ b/entry/src/main/cangjie/src/components/chat/ChatMessage.cj @@ -8,10 +8,15 @@ import ohos.component.* import ohos.state_macro_manage.* import ohos.state_manage.* import ohos.base.* +import ohos_app_cangjie_entry.components.chat.chatMessages.* public enum EChatSource { | ME | YOU + + operator func == (right: EChatSource) { + + } } @Component @@ -21,73 +26,10 @@ public class ChatMessage { @Prop var source: EChatSource - @State - var radiusMap: HashMap = HashMap() - - protected func aboutToAppear() { - this.radiusMap = this.messageRadius() - } - - func fontColor() { - match (this.source) { - case EChatSource.ME => Color.WHITE - case EChatSource.YOU => Color.BLACK - } - } - - func bgColor() { - match (this.source) { - case EChatSource.YOU => Color.WHITE - case EChatSource.ME => Color.BLUE - } - } - - func orient() { - match (this.source) { - case EChatSource.YOU => FlexAlign.Start - case EChatSource.ME => FlexAlign.End - } - } - - func messageRadius(): HashMap { - match (this.source) { - case EChatSource.YOU => HashMap( - [ - ("topLeft", 12.vp), - ("topRight", 12.vp), - ("bottomLeft", 0.vp), - ("bottomRight", 12.vp) - ] - ) - case EChatSource.ME => HashMap( - [ - ("topLeft", 12.vp), - ("topRight", 12.vp), - ("bottomLeft", 12.vp), - ("bottomRight", 0.vp) - ] - ) - } - } - func build() { - Row() { - Row() { - Text(message) - .fontColor(this.fontColor()) - .backgroundColor(this.bgColor()) - .padding(top: 8, right: 16,bottom: 8, left: 16) - .borderRadius( - topLeft: this.radiusMap['topLeft'], - topRight: this.radiusMap['topRight'], - bottomLeft: this.radiusMap['bottomLeft'], - bottomRight: this.radiusMap['bottomRight'], - ) - } - .width(60.percent) - .justifyContent(this.orient()) + if (this.source == EChatSource.ME) { + ChatMessageMe(message: this.message)} + else {ChatMessageYou(message: this.message)} } - .width(100.percent) - .justifyContent(this.orient()) } } diff --git a/entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageMe.cj b/entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageMe.cj new file mode 100644 index 0000000..702289f --- /dev/null +++ b/entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageMe.cj @@ -0,0 +1,41 @@ +package ohos_app_cangjie_entry.components.chat.chatMessages + +import std.collection.* +import ohos.component.* +import ohos.state_macro_manage.* +import ohos.state_manage.* +import ohos.base.* + +@Component +public class ChatMessageMe { + let fontColor: Color = Color.WHITE + let bgColor: Color = Color.BLUE + let orient: FlexAlign = FlexAlign.End + + @Prop + var message: String + + @State + var radiusMap: HashMap = HashMap( + [ + ("topLeft", 12.vp), + ("topRight", 12.vp), + ("bottomLeft", 12.vp), + ("bottomRight", 0.vp) + ] + ) + + func build() { + Row() { + Row() { + Text(message).fontColor(this.fontColor).backgroundColor(this.bgColor).padding(top: 8, right: 16, + bottom: 8, left: 16).borderRadius( + topLeft: this.radiusMap['topLeft'], + topRight: this.radiusMap['topRight'], + bottomLeft: this.radiusMap['bottomLeft'], + bottomRight: this.radiusMap['bottomRight'], + ) + }.width(60.percent).justifyContent(this.orient) + }.width(100.percent).justifyContent(this.orient) + } +} diff --git a/entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageSys.cj b/entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageSys.cj new file mode 100644 index 0000000..c2aa271 --- /dev/null +++ b/entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageSys.cj @@ -0,0 +1,44 @@ +/** + * Created on 2024/9/13 + */ +package ohos_app_cangjie_entry.components.chat.chatMessages + +import std.collection.* +import ohos.component.* +import ohos.state_macro_manage.* +import ohos.state_manage.* +import ohos.base.* + +@Component +public class ChatMessageSys { + let fontColor: Color = Color.BLACK + let bgColor: Color = Color.WHITE + let orient: FlexAlign = FlexAlign.Start + + @Prop + var message: String + + @State + var radiusMap: HashMap = HashMap( + [ + ("topLeft", 12.vp), + ("topRight", 12.vp), + ("bottomLeft", 0.vp), + ("bottomRight", 12.vp) + ] + ) + + func build() { + Row() { + Row() { + Text(message).fontColor(this.fontColor).backgroundColor(this.bgColor).padding(top: 8, right: 16, + bottom: 8, left: 16).borderRadius( + topLeft: this.radiusMap['topLeft'], + topRight: this.radiusMap['topRight'], + bottomLeft: this.radiusMap['bottomLeft'], + bottomRight: this.radiusMap['bottomRight'], + ) + }.width(60.percent).justifyContent(this.orient) + }.width(100.percent).justifyContent(this.orient) + } +} diff --git a/entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageYou.cj b/entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageYou.cj new file mode 100644 index 0000000..cc2ced4 --- /dev/null +++ b/entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageYou.cj @@ -0,0 +1,44 @@ +/** + * Created on 2024/9/13 + */ +package ohos_app_cangjie_entry.components.chat.chatMessages + +import std.collection.* +import ohos.component.* +import ohos.state_macro_manage.* +import ohos.state_manage.* +import ohos.base.* + +@Component +public class ChatMessageYou { + let fontColor: Color = Color.BLACK + let bgColor: Color = Color.WHITE + let orient: FlexAlign = FlexAlign.Start + + @Prop + var message: String + + @State + var radiusMap: HashMap = HashMap( + [ + ("topLeft", 12.vp), + ("topRight", 12.vp), + ("bottomLeft", 0.vp), + ("bottomRight", 12.vp) + ] + ) + + func build() { + Row() { + Row() { + Text(message).fontColor(this.fontColor).backgroundColor(this.bgColor).padding(top: 8, right: 16, + bottom: 8, left: 16).borderRadius( + topLeft: this.radiusMap['topLeft'], + topRight: this.radiusMap['topRight'], + bottomLeft: this.radiusMap['bottomLeft'], + bottomRight: this.radiusMap['bottomRight'], + ) + }.width(60.percent).justifyContent(this.orient) + }.width(100.percent).justifyContent(this.orient) + } +} diff --git a/entry/src/main/cangjie/src/components/home/HomeBottom.cj b/entry/src/main/cangjie/src/components/home/HomeBottom.cj new file mode 100644 index 0000000..4cabd5f --- /dev/null +++ b/entry/src/main/cangjie/src/components/home/HomeBottom.cj @@ -0,0 +1,18 @@ +/** + * Created on 2024/9/8 + */ +package ohos_app_cangjie_entry.components.home + +internal import ohos.base.* +internal import ohos.component.* +internal import ohos.state_manage.* +import ohos.state_macro_manage.* + +@Component +public class HomeBottom { + func build() { + Row { + Text("HomeBottom") + }.width(100.percent) + } +} diff --git a/entry/src/main/cangjie/src/components/home/HomeBottomBar.cj b/entry/src/main/cangjie/src/components/home/HomeBottomBar.cj deleted file mode 100644 index 3a60196..0000000 --- a/entry/src/main/cangjie/src/components/home/HomeBottomBar.cj +++ /dev/null @@ -1,4 +0,0 @@ -/** - * Created on 2024/9/8 - */ -package ohos_app_cangjie_entry.components.home \ No newline at end of file diff --git a/entry/src/main/cangjie/src/components/home/HomeMain.cj b/entry/src/main/cangjie/src/components/home/HomeMain.cj new file mode 100644 index 0000000..05626a9 --- /dev/null +++ b/entry/src/main/cangjie/src/components/home/HomeMain.cj @@ -0,0 +1,19 @@ +/** + * Created on 2024/9/8 + */ +package ohos_app_cangjie_entry.components.home + +internal import ohos.base.* +internal import ohos.component.* +internal import ohos.state_manage.* +import ohos.state_macro_manage.* +import ohos_app_cangjie_entry.components.chat.ChatList + +@Component +public class HomeMain { + func build() { + Column { + ChatList() + }.width(100.percent).height(100.percent).padding(right: 8.vp, left: 8.vp) + } +} diff --git a/entry/src/main/cangjie/src/components/home/HomeMessageContent.cj b/entry/src/main/cangjie/src/components/home/HomeMessageContent.cj deleted file mode 100644 index 3a60196..0000000 --- a/entry/src/main/cangjie/src/components/home/HomeMessageContent.cj +++ /dev/null @@ -1,4 +0,0 @@ -/** - * Created on 2024/9/8 - */ -package ohos_app_cangjie_entry.components.home \ No newline at end of file diff --git a/entry/src/main/cangjie/src/components/home/HomeTitle.cj b/entry/src/main/cangjie/src/components/home/HomeTitle.cj index 3a60196..63a6f7e 100644 --- a/entry/src/main/cangjie/src/components/home/HomeTitle.cj +++ b/entry/src/main/cangjie/src/components/home/HomeTitle.cj @@ -1,4 +1,18 @@ /** * Created on 2024/9/8 */ -package ohos_app_cangjie_entry.components.home \ No newline at end of file +package ohos_app_cangjie_entry.components.home + +internal import ohos.base.* +internal import ohos.component.* +internal import ohos.state_manage.* +import ohos.state_macro_manage.* + +@Component +public class HomeTitle { + func build() { + Row { + Text("Home Title") + }.width(100.percent) + } +} diff --git a/entry/src/main/cangjie/src/components/index.cj b/entry/src/main/cangjie/src/components/index.cj new file mode 100644 index 0000000..ecf127a --- /dev/null +++ b/entry/src/main/cangjie/src/components/index.cj @@ -0,0 +1,4 @@ +/** + * Created on 2024/9/12 + */ +package ohos_app_cangjie_entry.components \ No newline at end of file diff --git a/entry/src/main/cangjie/src/index.cj b/entry/src/main/cangjie/src/index.cj index e8d4590..ddb3776 100644 --- a/entry/src/main/cangjie/src/index.cj +++ b/entry/src/main/cangjie/src/index.cj @@ -19,7 +19,6 @@ class MyView { func build() { Row { HomePage() - SidePage() }.height(100.percent).width(100.percent) } } diff --git a/entry/src/main/cangjie/src/pages/HomePage.cj b/entry/src/main/cangjie/src/pages/HomePage.cj index 001d0fe..4f7de7e 100644 --- a/entry/src/main/cangjie/src/pages/HomePage.cj +++ b/entry/src/main/cangjie/src/pages/HomePage.cj @@ -3,10 +3,12 @@ */ package ohos_app_cangjie_entry.pages -internal import ohos.base.* +import ohos.state_macro_manage.* +import ohos_app_cangjie_entry.components.home.* +import ohos.state_macro_manage.* internal import ohos.component.* internal import ohos.state_manage.* -import ohos.state_macro_manage.* +internal import ohos.base.* @Component public class HomePage { @@ -14,6 +16,10 @@ public class HomePage { protected func aboutToAppear() { } func build() { - Row() + Column(10) { + HomeTitle() + HomeMain() + HomeBottom() + }.width(100.percent).height(100.percent) } }