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
16/**
17 * Custom pop-up menu
18 */
19@Component
20export struct DetailMenu {
21  @State showPopup: boolean = false;
22  private menuItems: Array<{ [key: string]: any }>
23  private menuImage: Resource = $r('app.media.ic_public_more');
24  private sizeType: SizeType = SizeType.LG;
25  private placement: Placement = Placement.BottomLeft;
26  private menuText: Resource = null;
27  private menuTextColor: Resource = $r('sys.color.ohos_id_color_text_primary');
28
29  @Builder PopupBuilder() {
30    Column() {
31      List() {
32        ForEach(this.menuItems, (item, index) => {
33          ListItem() {
34            Button({ type: ButtonType.Normal, stateEffect: true }) {
35              Text(item.value)
36                .fontSize($r('sys.float.ohos_id_text_size_body1'))
37                .lineHeight(21)
38                .width('100%')
39                .height($r('app.float.id_item_height_mid'))
40                .padding({ left: $r('app.float.id_card_margin_max'), right: $r('app.float.id_card_margin_max') })
41                .fontWeight(FontWeight.Regular)
42                .fontColor($r('sys.color.ohos_id_color_text_primary'))
43            }
44            .width('100%')
45            .height($r('app.float.id_item_height_mid'))
46            .borderRadius(16)
47            .backgroundColor($r('sys.color.ohos_id_color_foreground_contrary'))
48            .onClick(() => {
49              item.action();
50            })
51          }
52        }, item => JSON.stringify(item))
53      }
54      .listDirection(Axis.Vertical)
55      .divider({ strokeWidth: 0.5, color: $r('sys.color.ohos_id_color_list_separator'),
56        startMargin: $r('app.float.id_card_margin_max'), endMargin: $r('app.float.id_card_margin_max') })
57      .scrollBar(BarState.Off)
58      .edgeEffect(EdgeEffect.None)
59      .chainAnimation(false)
60    }
61    .backgroundColor(Color.White)
62    .width(this.sizeType == SizeType.LG ? 186 : 144)
63    .borderRadius(16)
64    .padding({ top: $r('app.float.id_card_margin_mid'), bottom: $r('app.float.id_card_margin_mid'),
65      left: $r('app.float.id_card_margin_mid'), right: $r('app.float.id_card_margin_mid') })
66  }
67
68  build() {
69    Column() {
70      Image(this.menuImage)
71        .width($r('app.float.id_card_image_small'))
72        .height($r('app.float.id_card_image_small'))
73      if (this.menuText != null) {
74        Text(this.menuText)
75          .fontSize(10)
76          .lineHeight(14)
77          .fontColor(this.menuTextColor)
78          .margin({ top: $r('app.float.id_card_margin_mid') })
79      }
80    }
81    .margin({ right: $r('app.float.id_card_margin_max') })
82    .onClick(() => {
83      this.showPopup = !this.showPopup;
84    })
85    .bindPopup(this.showPopup, {
86      builder: this.PopupBuilder,
87      placement: this.placement,
88      maskColor:'#00ffffff',
89      popupColor: $r('sys.color.ohos_id_color_background'),
90      enableArrow: false,
91      onStateChange: (e) => {
92        if (!e.isVisible) {
93          this.showPopup = false;
94        }
95      }
96    })
97  }
98}