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 { StringUtil } from '../../../../../../../common/src/main/ets/util/StringUtil'; 16 17/** 18 * Select the contact item component, which is responsible for displaying a single contact. 19 */ 20@Component 21export default struct BatchSelectContactItemView { 22 @State private single: boolean = false; 23 @State private item: { [key: string]: any } = {}; 24 private onContactItemClicked: Function; 25 private onSingleContactItemClick: Function; 26 private index: number; 27 @State private showIndex: boolean = false; 28 @State private showDivifer: boolean = false; 29 30 build() { 31 Column() { 32 Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) { 33 Row() { 34 if (StringUtil.isEmpty(this.item.nameSuffix)) { 35 Image(StringUtil.isEmpty(this.item.portraitPath) ? $r("app.media.ic_user_portrait") : this.item.portraitPath) 36 .width($r("app.float.id_card_image_mid")) 37 .height($r("app.float.id_card_image_mid")) 38 .objectFit(ImageFit.Contain) 39 .borderRadius($r("app.float.id_card_image_mid")) 40 .backgroundColor(this.item.portraitColor) 41 } else { 42 Text(this.item.nameSuffix.toUpperCase()) 43 .fontSize(30) 44 .fontWeight(FontWeight.Bold) 45 .fontColor(Color.White) 46 .backgroundColor(this.item.portraitColor) 47 .height($r("app.float.id_card_image_mid")) 48 .width($r("app.float.id_card_image_mid")) 49 .textAlign(TextAlign.Center) 50 .borderRadius($r("app.float.id_card_image_mid")) 51 } 52 } 53 .width($r("app.float.id_card_image_mid")) 54 .height($r("app.float.id_card_image_mid")) 55 .margin({ left: $r("app.float.id_card_margin_max") }) 56 .flexShrink(0) 57 58 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Center }) { 59 Text(StringUtil.isEmpty(this.item.showName) ? this.item.phoneNum : this.item.showName) 60 .fontColor($r("sys.color.ohos_id_color_text_primary")) 61 .fontSize($r("sys.float.ohos_id_text_size_body1")) 62 .fontWeight(FontWeight.Medium) 63 .margin({ left: $r("app.float.id_card_margin_xl"), bottom: $r("app.float.id_card_margin_sm") }) 64 .textOverflow({ overflow: TextOverflow.Ellipsis }) 65 .maxLines(2) 66 67 Text(this.item.phoneNumbers[0].labelName) 68 .fontColor($r("sys.color.ohos_id_color_text_tertiary")) 69 .fontSize($r("sys.float.ohos_id_text_size_body2")) 70 .fontWeight(FontWeight.Regular) 71 .margin({ left: $r("app.float.id_card_margin_xl") }) 72 .textOverflow({ overflow: TextOverflow.Ellipsis }) 73 .maxLines(2) 74 } 75 .flexGrow(1) 76 .flexShrink(1) 77 .padding({ top: $r("app.float.id_card_margin_mid"), bottom: $r("app.float.id_card_margin_mid") }) 78 .constraintSize({ minHeight: $r("app.float.id_item_height_max") }) 79 80 Toggle({ 81 type: ToggleType.Checkbox, 82 isOn: (this.item.phoneNumbers[0].checked == undefined) ? false : this.item.phoneNumbers[0].checked 83 }) 84 .width(20) 85 .height(20) 86 .flexShrink(0) 87 .enabled(false) 88 .margin({ left: $r("app.float.id_card_margin_max"), right: $r("app.float.id_card_margin_max") }) 89 .selectedColor($r("sys.color.ohos_id_color_connected")) 90 .visibility(!this.single ? Visibility.Visible : Visibility.None) 91 } 92 .width('100%') 93 .height($r("app.float.id_item_height_max")) 94 .onClick(() => { 95 if (!this.single) { 96 this.onContactItemClicked(this.index, 0); 97 } else { 98 this.onSingleContactItemClick(this.item.phoneNumbers[0].phoneNumber, this.item.showName); 99 } 100 }) 101 102 List({ space: 0, initialIndex: 0 }) { 103 ForEach(this.item.phoneNumbers, (item, index) => { 104 ListItem() { 105 if (index != 0) { 106 Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) { 107 Row() { 108 } 109 .width($r("app.float.id_card_image_mid")) 110 .height($r("app.float.id_card_image_mid")) 111 .margin({ left: $r("app.float.id_card_margin_max") }) 112 .visibility(Visibility.Hidden) 113 114 Flex({ 115 direction: FlexDirection.Column, 116 alignItems: ItemAlign.Start, 117 justifyContent: FlexAlign.Center 118 }) { 119 120 Text(item.labelName) 121 .fontColor($r("sys.color.ohos_id_color_text_tertiary")) 122 .fontSize($r("sys.float.ohos_id_text_size_body2")) 123 .fontWeight(FontWeight.Regular) 124 .margin({ left: $r("app.float.id_card_margin_xl") }) 125 } 126 .flexGrow(1) 127 .height($r("app.float.id_item_height_mid")) 128 } 129 .width('100%') 130 .height($r("app.float.id_item_height_mid")) 131 .onClick(() => { 132 if (!this.single) { 133 this.onContactItemClicked(this.index, index); 134 } else { 135 this.onSingleContactItemClick(this.item.phoneNumbers[index].phoneNumber, this.item.showName); 136 } 137 }) 138 } 139 } 140 }, (item, index) => JSON.stringify(item)) 141 } 142 .listDirection(Axis.Vertical) 143 .edgeEffect(EdgeEffect.Spring) 144 .divider({ 145 strokeWidth: 0.5, 146 color: $r('sys.color.ohos_id_color_list_separator'), 147 startMargin: 76, 148 endMargin: $r("app.float.id_card_margin_max"), 149 }) 150 } 151 .padding({ top: this.showIndex ? 4 : 0, 152 bottom: this.showDivifer ? 4 : 0, 153 }) 154 .backgroundColor(Color.White) 155 .clip(new Rect({ 156 width: "100%", 157 height: "100%", 158 radius: [[this.showIndex ? 24 : 0, this.showIndex ? 24 : 0], 159 [this.showIndex ? 24 : 0, this.showIndex ? 24 : 0], 160 [this.showDivifer ? 0 : 24, this.showDivifer ? 0 : 24], 161 [this.showDivifer ? 0 : 24, this.showDivifer ? 0 : 24]] 162 })) 163 } 164} 165