• 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      .edgeEffect(EdgeEffect.Spring)
58      .chainAnimation(false)
59    }
60    .backgroundColor(Color.White)
61    .width(this.sizeType == SizeType.LG ? 186 : 144)
62    .borderRadius(16)
63    .padding({ top: $r("app.float.id_card_margin_mid"), bottom: $r("app.float.id_card_margin_mid"),
64      left: $r("app.float.id_card_margin_mid"), right: $r("app.float.id_card_margin_mid") })
65  }
66
67  build() {
68    Column() {
69      Image(this.menuImage)
70        .width($r("app.float.id_card_image_small"))
71        .height($r("app.float.id_card_image_small"))
72      if (this.menuText != null) {
73        Text(this.menuText)
74          .fontSize(10)
75          .lineHeight(14)
76          .fontColor(this.menuTextColor)
77          .margin({ top: $r("app.float.id_card_margin_mid") })
78      }
79    }
80    .margin({ right: $r("app.float.id_card_margin_max") })
81    .onClick(() => {
82      this.showPopup = !this.showPopup;
83    })
84    .bindPopup(this.showPopup, {
85      builder: this.PopupBuilder,
86      placement: this.placement,
87      maskColor:"#00ffffff",
88      popupColor: $r("sys.color.ohos_id_color_background"),
89      enableArrow: false,
90      onStateChange: (e) => {
91        if (!e.isVisible) {
92          this.showPopup = false;
93        }
94      }
95    })
96  }
97}