1/** 2 * Copyright (c) 2022 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15import LooseObject from "../data/LooseObject"; 16 17@Component 18export struct MmsListItem { 19 @State item: LooseObject = {}; 20 private isShowHead: boolean = true; 21 @Prop isMultipleSelectState: boolean; 22 onClickHead: (event?: ClickEvent) => void; 23 onClickBody: (event?: ClickEvent) => void; 24 onItemLongPress: (event?: GestureEvent) => void; 25 onTouchStart: (event?: GestureEvent) => void; 26 onTouchUpdate: (event?: GestureEvent) => void; 27 onTouchEnd: (event?: GestureEvent) => void; 28 onClickFirstSlipBtn: (event?: ClickEvent) => void; 29 onClickSecondSlipBtn: (event?: ClickEvent) => void; 30 31 build() { 32 Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.End }) { 33 Row() { 34 Row() { 35 //avatar 36 if (this.isShowHead) { 37 //Whether to add a red dot to the unread flag 38 Stack() { 39 Column() { 40 Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 41 //SMS message type. 0: common; 1: notification 42 if (this.item.conversation.smsType === 0) { 43 if (this.item.conversation.photoFirstName === '') { 44 Image($rawfile("icon/ic_user_portrait.svg")) 45 .objectFit(ImageFit.Fill) 46 .width("40vp") 47 .height("40vp") 48 .clip(new Circle({ width: "40vp", height: "40vp" })) 49 .backgroundColor(this.item.conversation.portraitColor) 50 } else { 51 Text(this.item.conversation.photoFirstName) 52 .fontSize($r("sys.float.ohos_id_text_size_headline8")) 53 .fontWeight(FontWeight.Bold) 54 .fontColor(Color.White) 55 .height("40vp") 56 .width("40vp") 57 .textAlign(TextAlign.Center) 58 .clip(new Circle({ width: "40vp", height: "40vp" })) 59 .backgroundColor(this.item.conversation.portraitColor) 60 } 61 } else { 62 Image($rawfile(this.item.conversation.icon)) 63 .objectFit(ImageFit.Fill) 64 .width("40vp") 65 .height("40vp") 66 } 67 if (this.item.conversation.countOfUnread > 0) { 68 Text(this.item.conversation.countOfUnread < 100 ? 69 this.item.conversation.countOfUnread.toString() : "99+") 70 .fontSize(10) 71 .align(Alignment.Center) 72 .padding({ left: 5, right: 5 }) 73 .height(20) 74 .backgroundColor($r("sys.color.ohos_id_color_badge_red")) 75 .fontColor($r("sys.color.ohos_id_color_background")) 76 .zIndex(2) 77 .position({ x: "60%", y: "-10%" }) 78 .border({ 79 width: 2, 80 color: $r("sys.color.ohos_id_color_background"), 81 radius: 50 82 }) 83 } 84 } 85 .width("40vp") 86 .height("40vp") 87 .onClick(this.onClickHead) 88 }.height("100%").justifyContent(FlexAlign.Center) 89 } 90 } 91 92 //body 93 Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Start }) { 94 Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center }) { 95 Flex({ direction: FlexDirection.Row, 96 justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { 97 //Phone number or first name 98 Text(this.item.conversation.name != '' ? this.item.conversation.name : 99 this.item.conversation.telephoneFormat) 100 .fontSize($r("sys.float.ohos_id_text_size_body1")) 101 .textOverflow({ overflow: TextOverflow.Ellipsis }) 102 .fontColor($r("sys.color.ohos_id_color_text_primary")) 103 .maxLines(1) 104 .fontWeight(FontWeight.Medium) 105 Text().width(16) 106 //Date Time 107 Text(this.item.conversation.time) 108 .fontColor($r("sys.color.ohos_id_color_text_tertiary")) 109 .fontSize("12fp") 110 .maxLines(1) 111 .flexShrink(0) 112 }.width("100%").height(22) 113 114 //Content Abbreviations for Latest News 115 Row() { 116 //Whether the latest message has not been sent successfully. If yes, 117 if (this.item.conversation.sendingFailed) { 118 Text($r("app.string.messageSendFailed")) 119 .fontSize("12fp") 120 .fontColor($r("sys.color.ohos_id_color_warning")) 121 } else { 122 //If it's not 123 Row() { 124 Text() { 125 if (this.item.conversation.isDraft) { 126 Span($r("app.string.draft")) 127 .fontSize("14fp") 128 .fontColor(Color.Red) 129 } 130 //If no, and the number of unread messages is greater than 1. 131 if (!this.item.conversation.isDraft && 132 this.item.conversation.countOfUnread > 1) { 133 Span($r("app.string.multiUnread", this.item.conversation.countOfUnread)) 134 .fontSize("14fp") 135 .fontColor($r("sys.color.ohos_id_color_help_tip_bg")) 136 } 137 //Content Abbreviations for Latest News 138 Span(this.item.conversation.content.replace(/[\r\n]/g, " ")) 139 .fontSize("14fp") 140 .fontColor($r("sys.color.ohos_id_color_text_tertiary")) 141 } 142 .maxLines(1) 143 .textOverflow({ overflow: TextOverflow.Ellipsis }) 144 } 145 } 146 } 147 .alignSelf(ItemAlign.Start) 148 .alignItems(VerticalAlign.Top) 149 .width("100%") 150 .height(19) 151 .margin({ top: "2vp" }) 152 }.width("100%") 153 .height("100%") 154 } 155 .layoutWeight(1) 156 .height("100%") 157 .padding({ left: "12vp" }) 158 159 //CheckBox 160 if (this.isMultipleSelectState) { 161 Toggle({ type: ToggleType.Checkbox, isOn: this.item.conversation.isCbChecked }) 162 .width("20vp") 163 .height("20vp") 164 .selectedColor($r("sys.color.ohos_id_color_activated")) 165 .hitTestBehavior(HitTestMode.None) 166 // .enabled(false) 167 // .margin({ right: -14 }) 168 } 169 } 170 .alignItems(VerticalAlign.Top) 171 .width("100%") 172 .height("100%") 173 .offset({ 174 x: this.item.conversation.itemLeft 175 }) 176 //Swipe left to delete icon 177 if (!this.isMultipleSelectState) { 178 Flex({ 179 direction: FlexDirection.Row, 180 justifyContent: FlexAlign.SpaceEvenly, 181 alignItems: ItemAlign.Center 182 }) { 183 if (this.item.conversation.countOfUnread > 0) { 184 Image($rawfile("icon/msg_done.svg")) 185 .width(40) 186 .height(40) 187 .onClick(this.onClickFirstSlipBtn) 188 } 189 Image($rawfile("icon/msg_delete.svg")) 190 .width(40) 191 .height(40) 192 .onClick(this.onClickSecondSlipBtn) 193 } 194 .width(this.item.conversation.countOfUnread > 0 ? 128 : 80) 195 .height("100%") 196 .flexShrink(0) 197 .backgroundColor($r("sys.color.ohos_id_color_background")) 198 .offset({ 199 x: this.item.conversation.itemLeft 200 }) 201 } 202 } 203 .width("100%") 204 .height("100%") 205 .gesture(PanGesture({ 206 direction: this.item.conversation.isDelShow ? PanDirection.Right : PanDirection.Left 207 }) 208 .onActionStart(this.onTouchStart) 209 .onActionUpdate(this.onTouchUpdate) 210 .onActionEnd(this.onTouchEnd) 211 ) 212 } 213 .onClick(this.onClickBody) 214 .gesture(LongPressGesture().onAction(this.onItemLongPress)) 215 } 216}
