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 }); 68 69 onDeleteClick() { 70 HiLog.i(TAG, 'onDeleteClick'); 71 this.deleteDialogControler.open(); 72 } 73 74 onShareClick() { 75 HiLog.i(TAG, 'onShareClick'); 76 this.shareDialogControler.open(); 77 } 78 79 @Builder MenuBuilder() { 80 Column() { 81 if (this.item.title) { 82 Text(this.item.title) 83 .textAlign(TextAlign.Start) 84 .fontSize($r("sys.float.ohos_id_text_size_headline8")) 85 .fontColor($r("sys.color.ohos_id_color_text_primary")) 86 .fontWeight(FontWeight.Medium) 87 .textOverflow({ overflow: TextOverflow.Ellipsis }) 88 .maxLines(1) 89 .height($r("app.float.id_item_height_max")) 90 } 91 Button({ type: ButtonType.Normal, stateEffect: true }) { 92 Text($r("app.string.delete")) 93 .width('100%') 94 .height($r("app.float.id_item_height_mid")) 95 .textAlign(TextAlign.Start) 96 .fontSize($r("sys.float.ohos_id_text_size_body1")) 97 .fontColor($r("sys.color.ohos_id_color_text_primary")) 98 .fontWeight(FontWeight.Regular) 99 } 100 .backgroundColor(Color.White) 101 .onClick(() => { 102 this.presenter.setCurItem(this.item); 103 ContextMenu.close(); 104 this.deleteDialogControler.open(); 105 }) 106 } 107 .alignItems(HorizontalAlign.Start) 108 .borderRadius($r("sys.float.ohos_id_corner_radius_card")) 109 .width($r("app.float.contact_longpress_dialog_width")) 110 .padding({ 111 left: $r("app.float.id_card_margin_max"), 112 right: $r("app.float.id_card_margin_max"), 113 top: $r("app.float.id_card_margin_mid"), 114 bottom: $r("app.float.id_card_margin_mid") 115 }) 116 } 117 118 build() { 119 Row() { 120 Row() { 121 if (StringUtil.isEmpty(this.item.nameSuffix)) { 122 Image(StringUtil.isEmpty(this.item.portraitPath) ? $r("app.media.ic_user_portrait") : this.item.portraitPath) 123 .width($r("app.float.id_card_image_mid")) 124 .height($r("app.float.id_card_image_mid")) 125 .objectFit(ImageFit.Contain) 126 .borderRadius($r("app.float.id_card_image_mid")) 127 .backgroundColor(this.item.portraitColor) 128 } else { 129 Text(this.item.nameSuffix.toUpperCase()) 130 .fontSize(30) 131 .fontWeight(FontWeight.Bold) 132 .fontColor(Color.White) 133 .backgroundColor(this.item.portraitColor) 134 .height($r("app.float.id_card_image_mid")) 135 .width($r("app.float.id_card_image_mid")) 136 .textAlign(TextAlign.Center) 137 .borderRadius($r("app.float.id_card_image_mid")) 138 } 139 } 140 .height($r("app.float.id_card_image_mid")) 141 .width($r("app.float.id_card_image_mid")) 142 143 Column() { 144 Text(this.item.title) 145 .fontColor($r("sys.color.ohos_id_color_text_primary")) 146 .fontSize($r("sys.float.ohos_id_text_size_body1")) 147 .fontWeight(FontWeight.Medium) 148 .margin({ bottom: $r("app.float.id_card_margin_sm") }) 149 .textOverflow({ overflow: TextOverflow.Ellipsis }) 150 .maxLines(2) 151 152 if (this.item.subTitle) { 153 Text(this.item.subTitle) 154 .width('100%') 155 .fontColor($r("sys.color.ohos_id_color_text_tertiary")) 156 .fontSize($r("sys.float.ohos_id_text_size_body2")) 157 .fontWeight(FontWeight.Regular) 158 .textOverflow({ overflow: TextOverflow.Ellipsis }) 159 .maxLines(2) 160 } 161 } 162 .alignItems(HorizontalAlign.Start) 163 .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") }) 164 .margin({ left: $r("app.float.id_card_margin_xl"), right: $r("app.float.id_card_margin_xl") }) 165 } 166 .constraintSize({ minHeight: $r("app.float.id_item_height_max") }) 167 .width('100%') 168 .padding({ top: this.showIndex ? 4 : 0, 169 bottom: this.showDivifer ? 4 : 0, 170 left: this.curBp === 'lg' ? $r("app.float.id_card_margin_max") : 0, 171 right: $r("app.float.id_card_margin_max") }) 172 .backgroundColor(Color.White) 173 .borderRadius({ 174 topLeft: this.showIndex ? 24 : 0, 175 topRight: this.showIndex ? 24 : 0, 176 bottomLeft: this.showDivifer ? 0 : 24, 177 bottomRight: this.showDivifer ? 0 : 24 178 }) 179 .onClick(() => { 180 router.push( 181 { 182 url: "pages/contacts/details/ContactDetail", 183 params: { 184 sourceHasId: true, 185 contactId: this.item.contactId 186 } 187 } 188 ); 189 }) 190 .bindContextMenu(this.MenuBuilder, ResponseType.LongPress) 191 } 192}