• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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 { StyleConstants } from '../constants/StyleConstants';
17import { amsMissionManager }from '../manager/AmsMissionManager'
18
19@Component
20export struct ScrollerComponent {
21  @StorageLink('snapshotList') dataList: {
22    name: any,
23    image: any,
24    missionId: number,
25    boxSize: number,
26    bundleName: string,
27    left?: number,
28    right?: number,
29  }[] = [];
30  @StorageLink('snapShotWidth') listWidth: number = 0;
31  scroller: Scroller= new Scroller() ;
32  private screenWidth = 800;
33  popupHide: Function = null;
34  updateData: Function = null;
35
36  aboutToDisappear(): void {
37    this.popupHide = null;
38    this.updateData = null;
39  }
40
41  build() {
42    Row() {
43      Column() {
44        Button({ type: ButtonType.Circle, stateEffect: true }) {
45          Image($r('app.media.ic_public_arrow_left'))
46            .width(20)
47            .height(20)
48            .objectFit(ImageFit.Contain)
49        }
50        .width(24)
51        .height(24)
52        .backgroundColor('#00000005')
53        .onClick((event: ClickEvent) => {
54          this.scroller.scrollPage({ next: false })
55        })
56      }
57      .alignItems(HorizontalAlign.Center)
58      .justifyContent(FlexAlign.Center)
59      .width(StyleConstants.DEFAULT_56)
60      .height(StyleConstants.DEFAULT_SMART_DOCK_MISSION_HEIGHT)
61      .visibility(this.listWidth > this.screenWidth ? Visibility.Visible : Visibility.None)
62
63      Scroll(this.scroller) {
64        Row({ space: StyleConstants.DEFAULT_14 }) {
65          ForEach(this.dataList, (item) => {
66            Column() {
67              Row() {
68                Text(item.name.toString())
69                  .height(StyleConstants.DEFAULT_24)
70                  .textOverflow({ overflow: TextOverflow.Ellipsis })
71                  .fontSize(StyleConstants.DEFAULT_14)
72                  .textAlign(TextAlign.Start)
73                  .maxLines(StyleConstants.DEFAULT_1)
74                  .width(item.boxSize - StyleConstants.DEFAULT_30)
75                  .hoverEffect(HoverEffect.None)
76                  .fontWeight(FontWeight.Medium)
77
78                Image($r('app.media.ic_public_cancel'))
79                  .width(StyleConstants.DEFAULT_16)
80                  .height(StyleConstants.DEFAULT_16)
81                  .objectFit(ImageFit.Contain)
82                  .margin({ right: StyleConstants.DEFAULT_4 })
83                  .onClick((event: ClickEvent) => {
84                    if (this.dataList.length <= 1) {
85                      this.updateData(false, "", () => amsMissionManager.clearMission(item.missionId));
86                      return
87                    }
88                    this.updateData(true, item.bundleName, () => amsMissionManager.clearMission(item.missionId));
89                  })
90              }
91              .alignItems(VerticalAlign.Center)
92              .justifyContent(FlexAlign.SpaceBetween)
93              .width(item.boxSize)
94
95              Image(item.image)
96                .height(StyleConstants.DEFAULT_SMART_DOCK_MISSION_IMAGE_HEIGHT)
97                .objectFit(ImageFit.Contain)
98                .borderRadius(StyleConstants.DEFAULT_8)
99                .hoverEffect(HoverEffect.None)
100            }
101            .onClick((event: ClickEvent) => {
102              this.popupHide();
103              amsMissionManager.moveMissionToFront(item.missionId);
104            })
105            .width(item.boxSize)
106            .borderRadius(StyleConstants.DEFAULT_5)
107            .justifyContent(FlexAlign.Center)
108          }, item => JSON.stringify(item))
109        }
110        .alignItems(VerticalAlign.Center)
111        .margin({
112          left: this.listWidth > this.screenWidth ? StyleConstants.DEFAULT_0 : StyleConstants.DEFAULT_14,
113          right: this.listWidth > this.screenWidth ? StyleConstants.DEFAULT_0 : StyleConstants.DEFAULT_14
114        })
115      }
116      .constraintSize({
117        maxWidth: this.screenWidth,
118        maxHeight: StyleConstants.DEFAULT_SMART_DOCK_MISSION_HEIGHT
119      })
120      .scrollable(ScrollDirection.Horizontal)
121      .scrollBar(BarState.Off)
122      .height(StyleConstants.DEFAULT_SMART_DOCK_MISSION_HEIGHT)
123
124      Column() {
125        Button({ type: ButtonType.Circle, stateEffect: true }) {
126          Image($r('app.media.ic_public_arrow_right'))
127            .width(20)
128            .height(20)
129            .objectFit(ImageFit.Contain)
130        }
131        .width(24)
132        .height(24)
133        .backgroundColor('#00000005')
134        .onClick((event: ClickEvent) => {
135          this.scroller.scrollPage({ next: true })
136        })
137      }
138      .alignItems(HorizontalAlign.Center)
139      .justifyContent(FlexAlign.Center)
140      .width(StyleConstants.DEFAULT_56)
141      .height(StyleConstants.DEFAULT_SMART_DOCK_MISSION_HEIGHT)
142      .visibility(this.listWidth > this.screenWidth ? Visibility.Visible : Visibility.None)
143    }
144    .alignItems(VerticalAlign.Center)
145    .justifyContent(FlexAlign.SpaceBetween)
146    .constraintSize({
147      maxWidth: this.screenWidth + 2 * StyleConstants.DEFAULT_56,
148      maxHeight: StyleConstants.DEFAULT_SMART_DOCK_MISSION_HEIGHT
149    })
150    .height(StyleConstants.DEFAULT_SMART_DOCK_MISSION_HEIGHT)
151    .visibility(this.dataList.length < 1 ? Visibility.None : Visibility.Visible)
152  }
153}