clz/himi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add chat messages component

Browse Source
This commit is contained in:
Cheliangzhao 2024-09-15 14:41:35 +08:00
parent c680b15eeb
commit 71ee06965c
12 changed files with 202 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
entry/src/main/cangjie/src/components/chat/ChatMessage.cj
View File

@ -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<String, Length> = HashMap<String, Length>()
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<String, Length> {
match (this.source) {
case EChatSource.YOU => HashMap<String, Length>(
[
("topLeft", 12.vp),
("topRight", 12.vp),
("bottomLeft", 0.vp),
("bottomRight", 12.vp)
]
)
case EChatSource.ME => HashMap<String, Length>(
[
("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'],
)
if (this.source == EChatSource.ME) {
ChatMessageMe(message: this.message)}
else {ChatMessageYou(message: this.message)}
}
.width(60.percent)
.justifyContent(this.orient())
}
.width(100.percent)
.justifyContent(this.orient())
}
}

41
entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageMe.cj Normal file
View File

@ -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<String, Length> = HashMap<String, Length>(
[
("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)
}
}

44
entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageSys.cj Normal file
View File

@ -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<String, Length> = HashMap<String, Length>(
[
("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)
}
}

44
entry/src/main/cangjie/src/components/chat/chatMessages/ChatMessageYou.cj Normal file
View File

@ -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<String, Length> = HashMap<String, Length>(
[
("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)
}
}

18
entry/src/main/cangjie/src/components/home/HomeBottom.cj Normal file
View File

@ -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)
}
}

4
entry/src/main/cangjie/src/components/home/HomeBottomBar.cj
View File

@ -1,4 +0,0 @@
/**
* Created on 2024/9/8
*/
package ohos_app_cangjie_entry.components.home

19
entry/src/main/cangjie/src/components/home/HomeMain.cj Normal file
View File

@ -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)
}
}

4
entry/src/main/cangjie/src/components/home/HomeMessageContent.cj
View File

@ -1,4 +0,0 @@
/**
* Created on 2024/9/8
*/
package ohos_app_cangjie_entry.components.home

14
entry/src/main/cangjie/src/components/home/HomeTitle.cj
View File

@ -2,3 +2,17 @@
* 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 HomeTitle {
func build() {
Row {
Text("Home Title")
}.width(100.percent)
}
}

4
entry/src/main/cangjie/src/components/index.cj Normal file
View File

@ -0,0 +1,4 @@
/**
* Created on 2024/9/12
*/
package ohos_app_cangjie_entry.components

1
entry/src/main/cangjie/src/index.cj
View File

@ -19,7 +19,6 @@ class MyView {
func build() {
Row {
HomePage()
SidePage()
}.height(100.percent).width(100.percent)
}
}

12
entry/src/main/cangjie/src/pages/HomePage.cj
View File

@ -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)
}
}