1/*
2 * Copyright (c) 2022-2023 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 { Log } from '../../utils/Log';
17import { DialogCallback } from '../../model/common/DialogUtil';
18import { ColumnSize, ScreenManager } from '../../model/common/ScreenManager';
19import { Constants } from '../../model/common/Constants';
20import { UiUtil } from '../../utils/UiUtil';
21import { StringUtil } from '../../utils/StringUtil';
22
23const TAG: string = 'common_NewAlbumDialog';
24
25@CustomDialog
26export struct NewAlbumDialog {
27  @StorageLink('isHorizontal') isHorizontal: boolean = ScreenManager.getInstance().isHorizontal();
28  @StorageLink('isSidebar') isSidebar: boolean = ScreenManager.getInstance().isSidebar();
29  @StorageLink('leftBlank') leftBlank: number[] =
30    [0, ScreenManager.getInstance().getStatusBarHeight(), 0, ScreenManager.getInstance().getNaviBarHeight()];
31  controller?: CustomDialogController;
32  @Consume renameFileName: string;
33  @Consume dialogCallback: DialogCallback;
34  @State isNull: boolean = false;
35  @State dividerColor: Resource = $r('sys.color.ohos_id_color_primary');
36  @State dividerWidth: string = '1vp';
37  @State isFocusable: boolean = true;
38  private inputName: string = '';
39  private isPcDevice: boolean = AppStorage.get<string>('deviceType') === Constants.PC_DEVICE_TYPE;
40
41  aboutToAppear(): void {
42    Log.info(TAG, 'aboutToAppear');
43    this.inputName = this.renameFileName;
44    this.isNull = this.inputName === '';
45    if (this.inputName.length === Constants.RENAME_MAX_LENGTH) {
46      UiUtil.showToast($r('app.string.Maximum_length_reached'));
47    }
48  }
49
50  build() {
51    Column() {
52      Row() {
53        Text($r('app.string.album_new_album_title'))
54          .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle'))
55          .fontWeight(FontWeight.Medium)
56          .fontColor($r('sys.color.ohos_id_color_text_primary'))
57      }.alignItems(VerticalAlign.Center)
58      .height($r('app.float.dialog_title_height'))
59      .margin({
60        left: $r('app.float.dialog_content_margin'), right: $r('app.float.dialog_content_margin')
61      })
62
63      Row() {
64        Column() {
65          TextInput({ placeholder: '', text: this.inputName })
66            .key('NewAlbumDialogTextInput')
67            .fontSize($r('sys.float.ohos_id_text_size_body1'))
68            .focusable(this.isFocusable)
69            .fontFamily($r('app.string.id_text_font_family_regular'))
70            .fontColor($r('sys.color.ohos_id_color_text_primary'))
71            .maxLength(Constants.RENAME_MAX_LENGTH)
72            .enterKeyType(EnterKeyType.Done)
73            .backgroundColor($r('app.color.transparent'))
74            .onTouch((event?: TouchEvent) => {
75              if ((event as TouchEvent).type == TouchType.Down && !this.isFocusable) {
76                this.isFocusable = true;
77              }
78            })
79            .onChange((value: string) => {
80              Log.info(TAG, `TextInput onChange : ${value}`);
81              this.inputName = value;
82              if (value.length === Constants.RENAME_MAX_LENGTH) {
83                UiUtil.showToast($r('app.string.Maximum_length_reached'));
84              }
85              this.isNull = this.inputName === '';
86            })
87            .margin({
88              left: $r('app.float.input_text_margin'), right: $r('app.float.input_text_margin')
89            })
90
91          Divider().vertical(false).strokeWidth(1)
92            .color($r('sys.color.ohos_id_color_secondary'))
93            .margin({
94              left: $r('app.float.dialog_content_margin'), right: $r('app.float.dialog_content_margin')
95            })
96        }
97      }.margin({
98        bottom: $r('sys.float.ohos_id_elements_margin_vertical_l') })
99
100      Stack({ alignContent: Alignment.Top }) {
101        Row() {
102          Column() {
103            Button() {
104              Text($r('app.string.dialog_cancel'))
105                .fontSize($r('sys.float.ohos_id_text_size_button1'))
106                .fontColor($r('app.color.color_control_highlight'))
107                .width('100%')
108                .fontWeight(FontWeight.Medium)
109                .textAlign(TextAlign.Center)
110            }
111            .key('NewAlbumDialogCancelButton')
112            .margin({ right: $r('app.float.dialog_double_buttons_margin_right') })
113            .backgroundColor(this.isPcDevice ? $r('sys.color.ohos_id_color_button_normal') : $r('app.color.transparent'))
114            .borderRadius($r('sys.float.ohos_id_corner_radius_button'))
115            .height($r('app.float.details_dialog_button_height'))
116            .onClick(() => {
117              this.dialogCallback && this.dialogCallback.cancelCallback();
118              this.controller?.close();
119            })
120          }.width('50%')
121
122          if (!this.isPcDevice) {
123            Divider()
124              .vertical(true)
125              .color(Constants.DEFAULT_DIVIDER_COLOR)
126              .height(Constants.DEFAULT_DIVIDER_HEIGHT)
127          }
128
129          Column() {
130            Button() {
131              Text($r('app.string.yes'))
132                .fontSize($r('sys.float.ohos_id_text_size_button1'))
133                .fontColor($r('app.color.color_control_highlight'))
134                .width('100%')
135                .fontWeight(FontWeight.Medium)
136                .textAlign(TextAlign.Center)
137            }
138            .key('NewAlbumDialogConfirmButton')
139            .enabled(!this.isNull)
140            .opacity(this.isNull ? $r('app.float.disable_button_opacity') : 1)
141            .margin({ left: $r('app.float.dialog_double_buttons_margin_left') })
142            .backgroundColor(this.isPcDevice ? $r('sys.color.ohos_id_color_button_normal') : $r('app.color.transparent'))
143            .borderRadius($r('sys.float.ohos_id_corner_radius_button'))
144            .height($r('app.float.details_dialog_button_height'))
145            .onClick(() => {
146              let passCheck = StringUtil.checkNameInvalid(this.inputName);
147              if (passCheck) {
148                UiUtil.showToast($r('app.string.specific_characters_not_supported'));
149                return;
150              }
151              this.handleConfirmCallback();
152            })
153          }.width('50%')
154        }
155      }
156      .height($r('app.float.details_dialog_button_area_height'))
157      .margin({
158        left: $r('app.float.dialog_double_buttons_margin'), right: $r('app.float.dialog_double_buttons_margin')
159      })
160    }
161    .alignItems(HorizontalAlign.Start)
162    .borderRadius($r('sys.float.ohos_id_corner_radius_default_l'))
163    .width(this.isPcDevice ? $r('app.float.pc_dialog_width') : ScreenManager.getInstance()
164                                                                 .getColumnsWidth(ColumnSize.COLUMN_FOUR))
165    .backgroundColor($r('app.color.white'))
166    .margin({
167      right: $r('app.float.dialog_content_margin'),
168      left: $r('app.float.dialog_content_margin'),
169      bottom: this.isHorizontal || this.isSidebar ? 0 : Constants.DIALOG_BOTTOM_OFFSET + this.leftBlank[3]
170    })
171    .shadow({
172      radius: $r('app.float.dialog_defult_shadow_m_radio'),
173      color: $r('app.color.dialog_defult_shadow_m_color'),
174      offsetX: $r('app.float.dialog_defult_shadow_m_offsetX'),
175      offsetY: $r('app.float.dialog_defult_shadow_m_offsetY')
176    })
177  }
178
179  private handleConfirmCallback() {
180    if (this.dialogCallback === null || this.dialogCallback === undefined) {
181      this.controller?.close();
182      return;
183    }
184    let confirmCb: Promise<Function> =
185      (this.dialogCallback as DialogCallback).confirmCallback(this.inputName) as Promise<Function>;
186    confirmCb.then((res: Function): void => {
187      if (res) {
188        this.controller?.close();
189        return;
190      }
191      Log.warn(TAG, 'new album name is not available!');
192      this.isFocusable = false;
193    })
194  }
195}
196