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 */ 15 16import router from '@ohos.router'; 17import { ContactVo } from '../../model/bean/ContactVo'; 18import DeleteDialogEx from '../../pages/dialog/DeleteDialogEx'; 19import ShareDialogEx from '../../pages/dialog/ShareDialogEx'; 20import { StringUtil } from '../../../../../../common/src/main/ets/util/StringUtil'; 21import { HiLog } from '../../../../../../common/src/main/ets/util/HiLog'; 22import ContactListPresenter from '../../presenter/contact/ContactListPresenter'; 23import EnvironmentProp from '../../feature/EnvironmentProp'; 24 25const TAG = 'ContactListItemView '; 26 27/** 28 * The contact item component is used to display a single contact. 29 */ 30@Component 31export default struct ContactListItemView { 32 private presenter: ContactListPresenter = ContactListPresenter.getInstance(); 33 @State item: ContactVo = new ContactVo("", "", "", "", "", "", true, "", ""); 34 @State private index: number = 0; 35 @State showIndex: boolean = false; 36 @State showDivifer: boolean = false; 37 @LocalStorageProp('breakpoint') curBp: string = 'sm'; 38 shareDialogControler: CustomDialogController = new CustomDialogController({ 39 builder: ShareDialogEx({ 40 itemList: this.presenter.shareList, 41 cancel: () => { 42 this.presenter.onShareDialogCancel(); 43 }, 44 title: $r("app.string.dialog_share"), 45 cancelText: $r("app.string.dialog_cancel") 46 }), 47 autoCancel: false, 48 alignment: (EnvironmentProp.isTablet() ? DialogAlignment.Center : DialogAlignment.Bottom), 49 gridCount: 4 50 }); 51 deleteDialogControler: CustomDialogController = new CustomDialogController({ 52 builder: DeleteDialogEx({ 53 cancel: () => { 54 this.presenter.onDeleteDialogCancel(); 55 }, 56 confirm: () => { 57 this.presenter.onDeleteDialogConfirm(this.index, this.item); 58 }, 59 title: $r("app.string.delete_dialog_title"), 60 cancalText: $r("app.string.dialog_cancel"), 61 confrimText: $r("app.string.dialog_delete") 62 }), 63 autoCancel: false, 64 alignment: (EnvironmentProp.isTablet() ? DialogAlignment.Center : DialogAlignment.Bottom), 65 offset: { dx: 0, dy: -16 }, 66 gridCount: 4, 67 closeAnimation: { duration: 100 } 68 }); 69 70 onDeleteClick() { 71 HiLog.i(TAG, 'onDeleteClick'); 72 this.deleteDialogControler.open(); 73 } 74 75 onShareClick() { 76 HiLog.i(TAG, 'onShareClick'); 77 this.shareDialogControler.open(); 78 } 79 80 @Builder MenuBuilder() { 81 Column() { 82 if (this.item.title) { 83 Text(this.item.title) 84 .textAlign(TextAlign.Start) 85 .fontSize($r("sys.float.ohos_id_text_size_headline8")) 86 .fontColor($r("sys.color.ohos_id_color_text_primary")) 87 .fontWeight(FontWeight.Medium) 88 .textOverflow({ overflow: TextOverflow.Ellipsis }) 89 .maxLines(1) 90 .height($r("app.float.id_item_height_max")) 91 } 92 Button({ type: ButtonType.Normal, stateEffect: true }) { 93 Text($r("app.string.delete")) 94 .width('100%') 95 .height($r("app.float.id_item_height_mid")) 96 .textAlign(TextAlign.Start) 97 .fontSize($r("sys.float.ohos_id_text_size_body1")) 98 .fontColor($r("sys.color.ohos_id_color_text_primary")) 99 .fontWeight(FontWeight.Regular) 100 } 101 .backgroundColor(Color.White) 102 .onClick(() => { 103 this.presenter.setCurItem(this.item); 104 ContextMenu.close(); 105 this.deleteDialogControler.open(); 106 }) 107 } 108 .alignItems(HorizontalAlign.Start) 109 .borderRadius($r("sys.float.ohos_id_corner_radius_card")) 110 .width($r("app.float.contact_longpress_dialog_width")) 111 .padding({ 112 left: $r("app.float.id_card_margin_max"), 113 right: $r("app.float.id_card_margin_max"), 114 top: $r("app.float.id_card_margin_mid"), 115 bottom: $r("app.float.id_card_margin_mid") 116 }) 117 } 118 119 build() { 120 Row() { 121 Row() { 122 if (StringUtil.isEmpty(this.item.nameSuffix)) { 123 Image(StringUtil.isEmpty(this.item.portraitPath) ? $r("app.media.ic_user_portrait") : this.item.portraitPath) 124 .width($r("app.float.id_card_image_mid")) 125 .height($r("app.float.id_card_image_mid")) 126 .objectFit(ImageFit.Contain) 127 .borderRadius($r("app.float.id_card_image_mid")) 128 .backgroundColor(this.item.portraitColor) 129 } else { 130 Text(this.item.nameSuffix.toUpperCase()) 131 .fontSize(30) 132 .fontWeight(FontWeight.Bold) 133 .fontColor(Color.White) 134 .backgroundColor(this.item.portraitColor) 135 .height($r("app.float.id_card_image_mid")) 136 .width($r("app.float.id_card_image_mid")) 137 .textAlign(TextAlign.Center) 138 .borderRadius($r("app.float.id_card_image_mid")) 139 } 140 } 141 .height($r("app.float.id_card_image_mid")) 142 .width($r("app.float.id_card_image_mid")) 143 144 Column() { 145 Text(this.item.title) 146 .fontColor($r("sys.color.ohos_id_color_text_primary")) 147 .fontSize($r("sys.float.ohos_id_text_size_body1")) 148 .fontWeight(FontWeight.Medium) 149 .margin({ bottom: $r("app.float.id_card_margin_sm") }) 150 .textOverflow({ overflow: TextOverflow.Ellipsis }) 151 .maxLines(2) 152 153 if (this.item.subTitle) { 154 Text(this.item.subTitle) 155 .width('100%') 156 .fontColor($r("sys.color.ohos_id_color_text_tertiary")) 157 .fontSize($r("sys.float.ohos_id_text_size_body2")) 158 .fontWeight(FontWeight.Regular) 159 .textOverflow({ overflow: TextOverflow.Ellipsis }) 160 .maxLines(2) 161 } 162 } 163 .alignItems(HorizontalAlign.Start) 164 .padding({ top: $r("app.float.id_card_margin_mid"), bottom: $r("app.float.id_card_margin_mid"), right: $r("app.float.id_card_margin_xl") }) 165 .margin({ left: $r("app.float.id_card_margin_xl"), right: $r("app.float.id_card_margin_xl") }) 166 } 167 .constraintSize({ minHeight: $r("app.float.id_item_height_max") }) 168 .width('100%') 169 .padding({ top: this.showIndex ? 4 : 0, 170 bottom: this.showDivifer ? 4 : 0, 171 left: this.curBp === 'lg' ? $r("app.float.id_card_margin_max") : 0, 172 right: $r("app.float.id_card_margin_max") }) 173 .backgroundColor(Color.White) 174 .borderRadius({ 175 topLeft: this.showIndex ? 24 : 0, 176 topRight: this.showIndex ? 24 : 0, 177 bottomLeft: this.showDivifer ? 0 : 24, 178 bottomRight: this.showDivifer ? 0 : 24 179 }) 180 .onClick(() => { 181 router.push( 182 { 183 url: "pages/contacts/details/ContactDetail", 184 params: { 185 sourceHasId: true, 186 contactId: this.item.contactId 187 } 188 } 189 ); 190 }) 191 .bindContextMenu(this.MenuBuilder, ResponseType.LongPress) 192 } 193}