1/**
2 * Copyright (c) 2021-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
16import ComponentConfig from './ComponentConfig';
17
18/**
19 * Standard dialog button layout, which contains two choice buttons.
20 * Click events can be defined by two parameters: firstClickEvent and secondClickEvent.
21 */
22@Component
23export struct DialogButtonLayout {
24  @State secondButtonState: boolean = true;
25  private firstTitle: string | Resource = $r("app.string.cancel");
26  private secondTitle: string | Resource = $r("app.string.confirm");
27
28  build() {
29    DialogButtonLayoutWithState({
30      firstTitle: this.firstTitle,
31      secondTitle: this.secondTitle,
32      firstClickEvent: this.firstClickEvent,
33      secondClickEvent: this.secondClickEvent,
34      secondButtonState: this.secondButtonState,
35    })
36  }
37
38  private firstClickEvent: (event: ClickEvent) => void = (event: ClickEvent) => {
39  };
40  private secondClickEvent: (event: ClickEvent) => void = (event: ClickEvent) => {
41  };
42}
43
44/**
45 * Standard dialog button layout, which contains two choices buttons.
46 *
47 * @secondButtonState the click state of second button.
48 */
49@Component
50export struct DialogButtonLayoutWithState {
51  @Prop secondButtonState: boolean = true;
52  private firstTitle: string | Resource = $r("app.string.cancel");
53  private secondTitle: string | Resource = $r("app.string.add");
54
55  build() {
56    Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
57      Button(this.firstTitle)
58        .backgroundColor(Color.White)
59        .fontSize($r("app.float.font_16"))
60        .fontColor($r("app.color.font_color_007DFF"))
61        .fontWeight(FontWeight.Medium)
62        .width(ComponentConfig.WH_50_100)
63        .onClick((event) => this.firstClickEvent(event as ClickEvent))
64        .height($r("app.float.wh_value_40"))
65
66      Divider()
67        .strokeWidth('1vp')
68        .color($r("sys.color.ohos_id_color_list_separator"))
69        .vertical(true)
70        .height($r("app.float.wh_value_40"))
71        .opacity($r("app.float.opacity_0_2"))
72
73      Button(this.secondTitle)
74        .backgroundColor(Color.White)
75        .fontSize($r("app.float.font_16"))
76        .fontColor($r("app.color.font_color_007DFF"))
77        .fontWeight(FontWeight.Medium)
78        .width(ComponentConfig.WH_50_100)
79        .enabled(this.secondButtonState)
80        .opacity(this.secondButtonState ? 1 : 0.5)
81        .onClick(event => this.secondClickEvent(event as ClickEvent))
82        .height($r("app.float.wh_value_40"))
83    }
84    .margin({ bottom: $r("app.float.wh_value_16") })
85  }
86
87  private firstClickEvent: (event: ClickEvent) => void = (event: ClickEvent) => {
88  };
89  private secondClickEvent: (event: ClickEvent) => void = (event: ClickEvent) => {
90  };
91}