• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2021-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 { BreadData } from '../../../databases/model/FileData'
17
18@Styles function pressedStyles () {
19  .backgroundColor($r('app.color.hicloud_hmos_bg'))
20  .borderRadius($r('app.float.common_borderRadius8'))
21}
22
23@Styles function normalStyles () {
24  .backgroundColor($r('app.color.transparent_color'))
25  .borderRadius($r('app.float.common_borderRadius8'))
26}
27
28@Component
29export struct BreadCrumb {
30  @Link @Watch("onDireListUpdated") direList: BreadData[]
31  scroller: Scroller = new Scroller()
32
33  // 监听面包屑变化，滚动到指定位置
34  onDireListUpdated(): void {
35    setTimeout(() => {
36      this.scroller.scrollEdge(Edge.End)
37    }, 10);
38  }
39
40  build() {
41    Row() {
42      Row() {
43        Text($r('app.string.myPhone'))
44          .fontSize($r('app.float.common_font_size12'))
45          .opacity($r('app.float.common_opacity9'))
46          .height($r('app.float.common_size30'))
47          .fontColor(this.direList.length ? $r('app.color.detail_path_text_color') : $r('app.color.black'))
48          .textOverflow({ overflow: TextOverflow.Ellipsis })
49          .stateStyles({
50            pressed: pressedStyles,
51            normal: normalStyles
52          })
53        if (this.direList.length) {
54          Image($r("app.media.ic_arrow_right"))
55            .objectFit(ImageFit.Contain)
56            .height($r('app.float.common_size15'))
57            .width($r('app.float.common_size15'))
58            .interpolation(ImageInterpolation.Medium)
59        }
60      }
61      .onClick(() => {
62        if (!this.direList.length) {
63          return
64        }
65        this.direList = []
66      })
67
68      Scroll(this.scroller) {
69        Row() {
70          ForEach(this.direList, (item, index) => {
71            BreadCrumbItem({
72              direItem: item,
73              index: index,
74              direList: $direList,
75            })
76          }, item => item.url.toString())
77        }
78      }
79      .layoutWeight(1)
80      .align(Alignment.TopStart)
81      .scrollBar(BarState.Off)
82      .scrollable(ScrollDirection.Horizontal)
83    }
84    .padding({ left: $r('app.float.common_padding16'), right: $r('app.float.common_padding16') })
85  }
86}
87
88@Component
89struct BreadCrumbItem {
90  direItem: BreadData
91  index: number
92  @Link direList: BreadData[]
93
94  getTitle(breadCrumb: string) {
95    const breadCrumbMaxLength = 10
96    return breadCrumb.length > breadCrumbMaxLength ? breadCrumb.substring(0, breadCrumbMaxLength) + '...' : breadCrumb
97  }
98
99  isLast(): boolean {
100    return this.index === this.direList.length - 1
101  }
102
103  build() {
104    Row() {
105      Text(this.getTitle('' + this.direItem.title))
106        .fontSize($r('app.float.common_font_size12'))
107        .opacity($r('app.float.common_opacity9'))
108        .fontColor(this.isLast() ? $r('app.color.black') : $r('app.color.detail_path_text_color'))
109        .height($r('app.float.common_size30'))
110        .margin({ left: $r('app.float.common_size4'), right: $r('app.float.common_size4') })
111        .textOverflow({ overflow: TextOverflow.Ellipsis })
112        .textAlign(TextAlign.Center)
113        .maxLines(1)
114        .stateStyles({
115          pressed: pressedStyles,
116          normal: normalStyles
117        })
118      if (!this.isLast()) {
119        Image($r("app.media.ic_arrow_right"))
120          .objectFit(ImageFit.Contain)
121          .autoResize(false)
122          .height($r('app.float.common_size15'))
123          .width($r('app.float.common_size15'))
124      }
125    }
126    .height($r('app.float.common_size30'))
127    .onClick(() => {
128      if (this.isLast()) {
129        return
130      }
131      this.direList.splice(this.index + 1)
132    })
133  }
134}
135
136