• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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}