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_RenameDialog';
24
25@CustomDialog
26export struct RenameDialog {
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('app.color.dialog_divider_h_color_182431');
36  @State dividerWidth: string = '1vp';
37  private inputName: string = '';
38  private isPcDevice: boolean = AppStorage.get<string>('deviceType') === Constants.PC_DEVICE_TYPE;
39
40  aboutToAppear(): void {
41    Log.info(TAG, 'aboutToAppear');
42    this.inputName = this.renameFileName;
43    this.isNull = this.inputName === '';
44    if (this.inputName.length === Constants.RENAME_MAX_LENGTH) {
45      UiUtil.showToast($r('app.string.Maximum_length_reached'));
46    }
47  }
48
49  build() {
50    Column() {
51      Row() {
52        Text($r('app.string.rename'))
53          .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle'))
54          .fontWeight(FontWeight.Medium)
55          .fontColor($r('sys.color.ohos_id_color_text_primary'))
56      }.alignItems(VerticalAlign.Center)
57      .height($r('app.float.dialog_title_height'))
58      .margin({
59        left: $r('app.float.dialog_content_margin'), right: $r('app.float.dialog_content_margin')
60      })
61
62      Row() {
63        Column() {
64          TextInput({ placeholder: '', text: this.inputName })
65            .key('RenameDialogTextInput')
66            .fontSize($r('sys.float.ohos_id_text_size_body1'))
67            .fontFamily($r('app.string.id_text_font_family_regular'))
68            .fontColor($r('sys.color.ohos_id_color_text_primary'))
69            .maxLength(Constants.RENAME_MAX_LENGTH)
70            .enterKeyType(EnterKeyType.Done)
71            .backgroundColor($r('app.color.transparent'))
72            .onChange((value: string) => {
73              Log.info(TAG, `TextInput onChange : ${value}`)
74              this.inputName = value
75              if (value.length === Constants.RENAME_MAX_LENGTH) {
76                UiUtil.showToast($r('app.string.Maximum_length_reached'));
77              }
78              this.isNull = this.inputName === '';
79            })
80            .margin({
81              left: $r('app.float.input_text_margin'), right: $r('app.float.input_text_margin')
82            })
83
84          Divider().vertical(false).strokeWidth(1)
85            .color($r('sys.color.ohos_id_color_secondary'))
86            .margin({
87              left: $r('app.float.dialog_content_margin'), right: $r('app.float.dialog_content_margin')
88            })
89        }
90      }.margin({
91        bottom: $r('sys.float.ohos_id_elements_margin_vertical_l') })
92
93      Stack({ alignContent: Alignment.Top }) {
94        Row() {
95          Column() {
96            Button() {
97              Text($r('app.string.no'))
98                .fontSize($r('sys.float.ohos_id_text_size_button1'))
99                .fontColor($r('app.color.color_control_highlight'))
100                .fontWeight(FontWeight.Medium)
101                .width('100%')
102                .textAlign(TextAlign.Center)
103            }
104            .key('RenameDialogCancelButton')
105            .margin({ right: $r('app.float.dialog_double_buttons_margin_right') })
106            .backgroundColor(this.isPcDevice ? $r('sys.color.ohos_id_color_button_normal') : $r('app.color.transparent'))
107            .borderRadius($r('sys.float.ohos_id_corner_radius_button'))
108            .height($r('app.float.details_dialog_button_height'))
109            .onClick(() => {
110              this.dialogCallback && this.dialogCallback.cancelCallback();
111              this.controller?.close();
112            })
113          }.width('50%')
114
115          if (!this.isPcDevice) {
116            Divider()
117              .vertical(true)
118              .color(Constants.DEFAULT_DIVIDER_COLOR)
119              .height(Constants.DEFAULT_DIVIDER_HEIGHT)
120          }
121
122          Column() {
123            Button() {
124              Text($r('app.string.yes'))
125                .fontSize($r('sys.float.ohos_id_text_size_button1'))
126                .fontColor($r('app.color.color_control_highlight'))
127                .fontWeight(FontWeight.Medium)
128                .width('100%')
129                .textAlign(TextAlign.Center)
130            }
131            .key('RenameDialogConfirmButton')
132            .enabled(!this.isNull)
133            .opacity(this.isNull ? $r('app.float.disable_button_opacity') : 1)
134            .margin({ left: $r('app.float.dialog_double_buttons_margin_left') })
135            .backgroundColor(this.isPcDevice ? $r('sys.color.ohos_id_color_button_normal') : $r('app.color.transparent'))
136            .borderRadius($r('sys.float.ohos_id_corner_radius_button'))
137            .height($r('app.float.details_dialog_button_height'))
138            .onClick(() => {
139              let passCheck = StringUtil.checkNameInvalid(this.inputName);
140              if (passCheck) {
141                UiUtil.showToast($r('app.string.specific_characters_not_supported'));
142                return;
143              }
144              if (this.inputName == this.renameFileName) {
145                this.controller?.close();
146                return;
147              }
148              this.dialogCallback && this.dialogCallback.confirmCallback(this.inputName);
149              this.controller?.close();
150            })
151          }.width('50%')
152        }
153      }
154      .height($r('app.float.details_dialog_button_area_height'))
155      .margin({
156        left: $r('app.float.dialog_double_buttons_margin'), right: $r('app.float.dialog_double_buttons_margin')
157      })
158    }
159    .alignItems(HorizontalAlign.Start)
160    .borderRadius($r('sys.float.ohos_id_corner_radius_default_l'))
161    .width(this.isPcDevice ? $r('app.float.pc_dialog_width') : ScreenManager.getInstance()
162                                                                 .getColumnsWidth(ColumnSize.COLUMN_FOUR))
163    .backgroundColor($r('app.color.white'))
164    .margin({
165      right: $r('app.float.dialog_content_margin'),
166      left: $r('app.float.dialog_content_margin'),
167      bottom: this.isHorizontal || this.isSidebar ? 0 : Constants.DIALOG_BOTTOM_OFFSET + this.leftBlank[3]
168    })
169    .shadow({
170      radius: $r('app.float.dialog_defult_shadow_m_radio'),
171      color: $r('app.color.dialog_defult_shadow_m_color'),
172      offsetX: $r('app.float.dialog_defult_shadow_m_offsetX'),
173      offsetY: $r('app.float.dialog_defult_shadow_m_offsetY')
174    })
175  }
176}
177