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