component/contact/ContactListItemView.ets

/**
 * Copyright (c) 2022 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import router from '@ohos.router';
import { ContactVo } from '../../model/bean/ContactVo';
import DeleteDialogEx from '../../pages/dialog/DeleteDialogEx';
import ShareDialogEx from '../../pages/dialog/ShareDialogEx';
import { StringUtil } from '../../../../../../common/src/main/ets/util/StringUtil';
import { HiLog } from '../../../../../../common/src/main/ets/util/HiLog';
import ContactListPresenter from '../../presenter/contact/ContactListPresenter';
import EnvironmentProp from '../../feature/EnvironmentProp';

const TAG = 'ContactListItemView ';

/**
 * The contact item component is used to display a single contact.
 */
@Component
export default struct ContactListItemView {
  private presenter: ContactListPresenter = ContactListPresenter.getInstance();
  @State item: ContactVo = new ContactVo("", "", "", "", "", "", true, "", "");
  @State private index: number = 0;
  @State showIndex: boolean = false;
  @State showDivifer: boolean = false;
  @Link contactListTouchable: boolean;
  @LocalStorageProp('breakpoint') curBp: string = 'sm';
  shareDialogControler: CustomDialogController = new CustomDialogController({
    builder: ShareDialogEx({
      itemList: this.presenter.shareList,
      cancel: () => {
        this.presenter.onShareDialogCancel();
      },
      title: $r("app.string.dialog_share"),
      cancelText: $r("app.string.dialog_cancel")
    }),
    autoCancel: false,
    alignment: (EnvironmentProp.isTablet() ? DialogAlignment.Center : DialogAlignment.Bottom),
    gridCount: 4
  });
  deleteDialogControler: CustomDialogController = new CustomDialogController({
    builder: DeleteDialogEx({
      cancel: () => {
        this.presenter.onDeleteDialogCancel();
      },
      confirm: () => {
        this.presenter.onDeleteDialogConfirm(this.index, this.item);
      },
      title: $r("app.string.delete_dialog_title"),
      cancalText: $r("app.string.dialog_cancel"),
      confrimText: $r("app.string.dialog_delete")
    }),
    autoCancel: false,
    alignment: (EnvironmentProp.isTablet() ? DialogAlignment.Center : DialogAlignment.Bottom),
    offset: { dx: 0, dy: -16 },
    gridCount: 4,
    closeAnimation: { duration: 100 }
  });

  aboutToDisappear() {
    this.shareDialogControler = null;
    this.deleteDialogControler = null;
  }

  onDeleteClick() {
    HiLog.i(TAG, 'onDeleteClick');
    this.deleteDialogControler.open();
  }

  onShareClick() {
    HiLog.i(TAG, 'onShareClick');
    this.shareDialogControler.open();
  }

  @Builder MenuBuilder() {
    Column() {
      if (this.item.title) {
        Text(this.item.title)
          .textAlign(TextAlign.Start)
          .fontSize($r("sys.float.ohos_id_text_size_headline8"))
          .fontColor($r("sys.color.ohos_id_color_text_primary"))
          .fontWeight(FontWeight.Medium)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .maxLines(1)
          .height($r("app.float.id_item_height_max"))
      }
      Button({ type: ButtonType.Normal, stateEffect: true }) {
        Text($r("app.string.delete"))
          .width('100%')
          .height($r("app.float.id_item_height_mid"))
          .textAlign(TextAlign.Start)
          .fontSize($r("sys.float.ohos_id_text_size_body1"))
          .fontColor($r("sys.color.ohos_id_color_text_primary"))
          .fontWeight(FontWeight.Regular)
      }
      .backgroundColor(Color.White)
      .onClick(() => {
        this.presenter.setCurItem(this.item);
        ContextMenu.close();
        this.deleteDialogControler.open();
      })
    }
    .alignItems(HorizontalAlign.Start)
    .borderRadius($r("sys.float.ohos_id_corner_radius_card"))
    .width($r("app.float.contact_longpress_dialog_width"))
    .padding({
      left: $r("app.float.id_card_margin_max"),
      right: $r("app.float.id_card_margin_max"),
      top: $r("app.float.id_card_margin_mid"),
      bottom: $r("app.float.id_card_margin_mid")
    })
  }

  build() {
    Row() {
      Row() {
        if (StringUtil.isEmpty(this.item.nameSuffix)) {
          Image(StringUtil.isEmpty(this.item.portraitPath) ? $r("app.media.ic_user_portrait") : this.item.portraitPath)
            .width($r("app.float.id_card_image_mid"))
            .height($r("app.float.id_card_image_mid"))
            .objectFit(ImageFit.Contain)
            .borderRadius($r("app.float.id_card_image_mid"))
            .backgroundColor(this.item.portraitColor)
        } else {
          Text(this.item.nameSuffix.toUpperCase())
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
            .fontColor(Color.White)
            .backgroundColor(this.item.portraitColor)
            .height($r("app.float.id_card_image_mid"))
            .width($r("app.float.id_card_image_mid"))
            .textAlign(TextAlign.Center)
            .borderRadius($r("app.float.id_card_image_mid"))
        }
      }
      .height($r("app.float.id_card_image_mid"))
      .width($r("app.float.id_card_image_mid"))

      Column() {
        Text(this.item.title)
          .fontColor($r("sys.color.ohos_id_color_text_primary"))
          .fontSize($r("sys.float.ohos_id_text_size_body1"))
          .fontWeight(FontWeight.Medium)
          .margin({ bottom: $r("app.float.id_card_margin_sm") })
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .maxLines(2)

        if (this.item.subTitle) {
          Text(this.item.subTitle)
            .width('100%')
            .fontColor($r("sys.color.ohos_id_color_text_tertiary"))
            .fontSize($r("sys.float.ohos_id_text_size_body2"))
            .fontWeight(FontWeight.Regular)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .maxLines(2)
        }
      }
      .alignItems(HorizontalAlign.Start)
      .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") })
      .margin({ left: $r("app.float.id_card_margin_xl"), right: $r("app.float.id_card_margin_xl") })
    }
    .constraintSize({ minHeight: $r("app.float.id_item_height_max") })
    .width('100%')
    .padding({ top: this.showIndex ? 4 : 0,
               bottom: this.showDivifer ? 4 : 0,
               left: this.curBp === 'lg' ? $r("app.float.id_card_margin_max") : 0,
               right: $r("app.float.id_card_margin_max") })
    .backgroundColor(Color.White)
    .borderRadius({
      topLeft: this.showIndex ? 24 : 0,
      topRight: this.showIndex ? 24 : 0,
      bottomLeft: this.showDivifer ? 0 : 24,
      bottomRight: this.showDivifer ? 0 : 24
    })
    .onClick(() => {
      router.push(
        {
          url: "pages/contacts/details/ContactDetail",
          params: {
            sourceHasId: true,
            contactId: this.item.contactId
          }
        }
      );
    })
    .bindContextMenu(this.MenuBuilder, ResponseType.LongPress, {
      onAppear: () => {
        this.contactListTouchable = false;
      },
      onDisappear: () => {
        this.contactListTouchable = true;
      }
    })
  }
}