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 && !(this.item.conversation.isDraft)) { 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 } 167 } 168 .alignItems(VerticalAlign.Center) 169 .width('100%') 170 .height('100%') 171 .offset({ 172 x: this.item.conversation.itemLeft 173 }) 174 //Swipe left to delete icon 175 if (!this.isMultipleSelectState) { 176 Flex({ 177 direction: FlexDirection.Row, 178 justifyContent: FlexAlign.SpaceEvenly, 179 alignItems: ItemAlign.Center 180 }) { 181 if (this.item.conversation.countOfUnread > 0) { 182 Image($rawfile('icon/msg_done.svg')) 183 .width(40) 184 .height(40) 185 .onClick(this.onClickFirstSlipBtn) 186 } 187 Image($rawfile('icon/msg_delete.svg')) 188 .width(40) 189 .height(40) 190 .onClick(this.onClickSecondSlipBtn) 191 } 192 .width(this.item.conversation.countOfUnread > 0 ? 128 : 80) 193 .height('100%') 194 .flexShrink(0) 195 .backgroundColor($r('sys.color.ohos_id_color_background')) 196 .offset({ 197 x: this.item.conversation.itemLeft 198 }) 199 } 200 } 201 .width('100%') 202 .height('100%') 203 .gesture(PanGesture({ 204 direction: this.item.conversation.isDelShow ? PanDirection.Right : PanDirection.Left 205 }) 206 .onActionStart(this.onTouchStart) 207 .onActionUpdate(this.onTouchUpdate) 208 .onActionEnd(this.onTouchEnd) 209 ) 210 } 211 .onClick(this.onClickBody) 212 .gesture(LongPressGesture().onAction(this.onItemLongPress)) 213 } 214}
