1/**
2 * Copyright (c) 2024-2024 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 router from '@ohos.router';
17import common from '@ohos.app.ability.common';
18import Constants from '../constants/ComConstant';
19
20@Component
21export default struct TitleBar {
22  private context = getContext(this) as common.UIAbilityContext;
23  @Prop title: string = '';
24  @State isBackOnTouch: boolean = false;
25  @Prop isSplitMode: boolean = false;
26  onBackClick?: () => void;
27
28  build() {
29    //   In column mode, the homepage does not display a return button
30    Column() {
31      Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
32        Row() {
33          Image($r('app.media.ic_back'))
34            .fillColor($r('sys.color.ohos_id_color_primary'))
35            .objectFit(ImageFit.Contain)
36            .height(Constants.TITLE_BAR_IMAGE_HEIGHT)
37            .width(Constants.TITLE_BAR_IMAGE_WIDTH)
38            .draggable(false)
39        }
40        .width(Constants.CLICK_SHADOW_LENGTH)
41        .height(Constants.CLICK_SHADOW_LENGTH)
42        .borderRadius($r('sys.float.ohos_id_corner_radius_clicked'))
43        .flexShrink(0)
44        .alignItems(VerticalAlign.Center)
45        .justifyContent(FlexAlign.Center)
46        .visibility(this.isSplitMode ? Visibility.None : Visibility.Visible)
47        .backgroundColor(this.isBackOnTouch ? $r('sys.color.ohos_id_color_click_effect') : '')
48        .hoverEffect(HoverEffect.Highlight)
49        .onTouch(event => {
50          if (event === undefined) {
51            return;
52          }
53          if (event.type === TouchType.Down) {
54            this.isBackOnTouch = true;
55          }
56          if (event.type === TouchType.Up) {
57            this.isBackOnTouch = false;
58          }
59        })
60        .onClick(() => {
61          let length = router.getLength();
62          Number(length) === 1 ? this.context.terminateSelf() : router.back();
63        })
64
65        Text(JSON.parse(this.title))
66          .align(Alignment.Start)
67          .fontColor($r('sys.color.ohos_id_color_titlebar_text'))
68          .maxLines(Constants.MAXIMUM_HEADER_LINES)
69          .textOverflow({ overflow: TextOverflow.Ellipsis })
70          .maxFontSize(this.isSplitMode ? $r('sys.float.ohos_id_text_size_headline7') : $r('sys.float.ohos_id_text_size_headline8'))
71          .minFontSize(14)
72          .heightAdaptivePolicy(TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST)
73          .flexGrow(Constants.FLEX_GROW)
74          .fontWeight(FontWeight.Medium)
75          .margin({ left: this.isSplitMode ? 12 : 4 })
76      }
77    }
78    .height(Constants.TITLE_BAR_HEIGHT)
79    .constraintSize({ minHeight: Constants.TITLE_BAR_MIN_HEIGHT })
80    .alignItems(HorizontalAlign.Start)
81    .justifyContent(FlexAlign.Center)
82    .backgroundColor($r('sys.color.ohos_id_color_sub_background'))
83  }
84}
85