• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/**
2 * Copyright (c) 2023-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 {
17  ResourceManager,
18  Log,
19  StyleConstants,
20  CheckEmptyUtils,
21  CardItemInfo
22} from '@ohos/common';
23import ThisStyleConstants from '../constants/StyleConstants';
24import Curves from '@ohos.curves';
25import { PageDesktopViewModel } from '../../../../../../../pagedesktop/src/main/ets/default/viewmodel/PageDesktopViewModel';
26
27const TAG = 'ServiceFormItem';
28
29@Component
30export default struct ServiceFormItem {
31  @StorageProp('cornerRadiusDefaultL') mRadius: number = px2vp(ResourceManager.getInstance()
32    .getNumberByResource($r('sys.float.ohos_id_corner_radius_default_l')));
33  @State showFormName: boolean = true;
34  @State isAllowUpdate: boolean = true;
35  @State isShow: boolean = true;
36  @State isHover: boolean = false;
37  @State mFormItemWidth: number = 0;
38  @State mFormItemHeight: number = 0;
39  @State iconScale: number = 1;
40  @State iconOpacity: number = 1;
41  @State animateParam: AnimateParam = {
42    duration: 200,
43    tempo: 1,
44    curve: Curves.springCurve(0.5, 1, 350, 35)
45  };
46  private idIndex: number = 0;
47  private formItem: CardItemInfo = new CardItemInfo();
48  private formId: number = 0;
49  getFormId: (id: number) => void = (id: number) => {};
50  @State opacityValue: number = 1;
51  @State blurValue: number = 50;
52
53  public aboutToAppear(): void {
54    Log.showInfo(TAG, `enter aboutToAppear , bundlename is ${this.formItem.bundleName}`);
55  }
56
57  public aboutToDisappear(): void {
58    Log.showInfo(TAG, `enter aboutToDisappear , bundlename is ${this.formItem.bundleName}`);
59  }
60
61  build() {
62    Column() {
63      Stack() {
64        FormComponent({
65          id: this.formItem.cardId as number,
66          name: this.formItem.cardName as string,
67          bundle: this.formItem.bundleName as string,
68          ability: this.formItem.abilityName as string,
69          module: this.formItem.moduleName as string,
70          dimension: this.formItem.cardDimension
71        })
72          .hoverEffect(HoverEffect.None)
73          .clip(new Rect({ width: this.mFormItemWidth, height: this.mFormItemHeight, radius: this.mRadius }))
74          .size({ width: this.mFormItemWidth, height: this.mFormItemHeight })
75          .allowUpdate(this.isAllowUpdate)
76          .visibility(this.isShow ? Visibility.Visible : Visibility.None)
77          .onAcquired((form) => {
78            Log.showInfo(TAG, `FormComponent card id is: ${form.id} , bundleName:${this.formItem.bundleName}`);
79            this.formItem.cardId = form.id;
80            this.formId = form.id;
81            if (this.getFormId) {
82              this.getFormId(form.id);
83            }
84          })
85          .onError((error) => {
86            Log.showInfo(TAG, `FormComponent error msg: ${error.msg}`);
87          })
88          .onUninstall((info) => {
89            Log.showInfo(TAG, `FormComponent uninstall formid: ${info.id}, bundleName:${this.formItem.bundleName}`);
90          })
91          .onLoad(() => {
92            Log.showInfo(TAG, `FormComponent load success: bundleName:${this.formItem.bundleName}`);
93            animateTo({
94              delay: 150,
95              curve: Curve.Friction,
96              duration: 250
97            }, () => {
98              this.opacityValue = 0;
99              this.blurValue = 0;
100            })
101          })
102          .blur(this.blurValue)
103
104        Column()
105          .backgroundColor(Color.White)
106          .opacity(this.opacityValue)
107          .clip(new Rect({ width: this.mFormItemWidth, height: this.mFormItemHeight, radius: this.mRadius }))
108          .size({ width: this.mFormItemWidth, height: this.mFormItemHeight })
109      }
110      .onTouch((event: TouchEvent) => {
111        if (event.type === TouchType.Down) {
112          this.iconScale = 0.9;
113        } else if (event.type === TouchType.Up) {
114          this.iconScale = 1;
115        }
116      })
117      .scale({ x: this.iconScale, y: this.iconScale})
118      .opacity(this.iconOpacity)
119      .animation(this.animateParam)
120
121      Column() {
122        ServiceFormName({
123          bundleName: this.formItem.bundleName,
124          moduleName: this.formItem.moduleName,
125          labelId: this.formItem.appLabelId,
126          appName: this.formItem.appName,
127          formNum: this.formItem.totalDimensionCount,
128          idIndex: this.idIndex
129        })
130      }
131      .visibility(this.showFormName ? Visibility.Visible : Visibility.Hidden)
132    }
133    .onHover((isHover: boolean) => {
134      Log.showInfo(TAG, `Form onHover isHover: ${isHover}`);
135      this.isHover = isHover;
136    })
137    .onDisAppear(() => {
138      Log.showInfo(TAG, `formItemComponent onDisAppear: ${this.formId}, bundleName: ${this.formItem.bundleName}`);
139    })
140  }
141}
142
143@Component
144struct ServiceFormName {
145  private nameLines: number = PageDesktopViewModel.getInstance().getPageDesktopStyleConfig().mNameLines;
146  bundleName: string = '';
147  moduleName: string = '';
148  labelId: number = 0;
149  @State @Watch('updateName') appName: string = '';
150  formNum: number = 0;
151  useCache: boolean = true;
152  private mResourceManager = ResourceManager.getInstance();
153  private idIndex: number = 0;
154
155  public aboutToAppear(): void {
156    this.mResourceManager = ResourceManager.getInstance();
157    this.updateName();
158  }
159
160  public appNameLoadCallback = (name: string) => {
161    this.appName = name;
162  }
163
164  public updateName() {
165    if (CheckEmptyUtils.isEmpty(this.appName)) {
166      this.mResourceManager.getAppNameWithCache(this.labelId, this.bundleName, this.moduleName,
167      this.appName, this.appNameLoadCallback);
168    }
169  }
170
171  build() {
172    Row() {
173      Text(this.appName)
174        .id(`${TAG}_ServiceFormName_${this.idIndex}_Text_${this.appName}`)
175        .fontSize($r('sys.float.ohos_id_text_size_body2'))
176        .fontColor($r('sys.color.ohos_id_color_text_primary_contrary'))
177        .fontWeight(this.mResourceManager.getFontWeightRegular())
178        .lineHeight(ThisStyleConstants.FORM_SERVICE_FORM_NAME_LINE_HEIGHT)
179        .textAlign(TextAlign.Center)
180        .textOverflow({overflow: TextOverflow.Ellipsis})
181        .maxLines(this.nameLines)
182        .constraintSize({maxWidth: StyleConstants.PERCENTAGE_80})
183
184      Text(String(this.formNum))
185        .id(`${TAG}_ServiceFormName_${this.idIndex}_Text_${this.formNum}`)
186        .fontSize($r('sys.float.ohos_id_text_size_body3'))
187        .fontColor($r('sys.color.ohos_id_color_text_secondary_contrary'))
188        .fontWeight(this.mResourceManager.getFontWeightMedium())
189        .lineHeight(ThisStyleConstants.FORM_SERVICE_FORM_NAME_NUM_LINE_HEIGHT)
190        .margin({left: ThisStyleConstants.FORM_SERVICE_FROM_NAME_NUMBER_MARGIN})
191        .textAlign(TextAlign.Center)
192        .maxLines(this.nameLines)
193    }
194    .alignItems(VerticalAlign.Center)
195    .justifyContent(FlexAlign.Center)
196    .width(StyleConstants.PERCENTAGE_100)
197    .margin({top: ThisStyleConstants.FORM_SERVICE_FORM_ICON_NAME_MARGIN_TOP})
198  }
199}