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 DeviceUtil from '../utils/DeviceUtil';
16
17/**
18 * Custom pop-up menu buttons
19 */
20@Component
21export struct MoreMenu {
22    @StorageLink('curBp') curBp: string = 'sm'
23    @Consume menuItems: Array<any>;
24    private menuImage: Resource = $rawfile('icon/ic_public_more.svg');
25    private placement: Placement = Placement.Bottom;
26    private defaultColor: Resource = $r('sys.color.ohos_id_color_dialog_bg');
27    private menuText: Resource = null;
28    private menuTextColor: Resource = $r('sys.color.ohos_id_color_text_primary');
29
30    @Builder
31    PopupBuilder() {
32        Column() {
33            List() {
34                ForEach(this.menuItems, (item, index) => {
35                    ListItem() {
36                        Button({ type: ButtonType.Normal, stateEffect: item.enabled }) {
37                            Text(item.value)
38                                .fontSize(16)
39                                .lineHeight(21)
40                                .width('100%')
41                                .height(48)
42                                .padding({ left: 12, right: 12 })
43                                .fontWeight(FontWeight.Regular)
44                                .fontColor(item.enabled ? $r('sys.color.ohos_id_color_text_primary') :
45                                $r('sys.color.ohos_id_color_text_tertiary'))
46                        }
47                        .width('100%')
48                        .height(48)
49                        .borderRadius(16)
50                        .backgroundColor($r('sys.color.ohos_id_color_foreground_contrary'))
51                        .onClick(() => {
52                            if (item.enabled) {
53                                item.action();
54                            }
55                        })
56                    }
57                }, item => JSON.stringify(item))
58            }
59            .listDirection(Axis.Vertical) // Arrange Direction
60            .divider({
61                strokeWidth: 0.5,
62                color: $r('sys.color.ohos_id_color_list_separator'),
63                startMargin: 12,
64                endMargin: 12
65            }) // Demarcation line between each row
66            .edgeEffect(EdgeEffect.Spring) // Slide to Edge Effect
67            .chainAnimation(false) // Disable linkage special effects.
68        }
69        .backgroundColor(this.defaultColor)
70        .width(this.curBp == 'lg' ? 186 : 144)
71        .borderRadius(16)
72        .padding({ top: 4, bottom: 4, left: 4, right: 4 })
73    }
74
75    build() {
76        Column() {
77            Image(this.menuImage)
78                .width(24)
79                .height(24)
80            if (this.menuText != null) {
81                Text(this.menuText)
82                    .fontSize(10)
83                    .lineHeight(14)
84                    .fontColor(this.menuTextColor)
85                    .margin({ top: 3 })
86                    .fontSize($r('sys.float.ohos_id_text_size_caption'))
87                    .fontWeight(FontWeight.Medium)
88                    .fontColor($r('sys.color.ohos_id_color_toolbar_text'))
89            }
90        }
91        .bindMenu(this.PopupBuilder)
92    }
93}