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 { Log } from '../utils/Log';
17import { AppBubble } from './AppBubble';
18import { AppItemInfo } from '../bean/AppItemInfo';
19import { AppGridStyleConfig } from '../layoutconfig/AppGridStyleConfig';
20import { MenuInfo } from '../bean';
21
22const TAG = 'AppGrid';
23
24@Component
25export struct AppGrid {
26  @Link appGridList: Array<AppItemInfo>;
27  @Link appGridStyleConfig: AppGridStyleConfig;
28  onItemClick: Function = (event: ClickEvent, item: AppItemInfo) => {};
29  buildMenu: Function = (item: AppItemInfo): MenuInfo[] => [];
30  @State isScroll: boolean = false;
31
32  aboutToDisappear(): void {
33  }
34
35  private getColumnsTemplate() {
36    let columnsTemplate = '';
37    for (let i = 0; i < this.appGridStyleConfig.mColumns; i++) {
38      columnsTemplate += ' 1fr';
39    }
40    return columnsTemplate;
41  }
42
43  private getRowsTemplate() {
44    let rowsTemplate = '';
45    if (this.isScroll) {
46      return rowsTemplate;
47    }
48    for (let i = 0; i < this.appGridStyleConfig.mRows; i++) {
49      rowsTemplate += ' 1fr';
50    }
51    return rowsTemplate;
52  }
53
54  build() {
55    Grid() {
56      ForEach(this.appGridList, (item: AppItemInfo) => {
57        GridItem() {
58          Column() {
59            AppBubble({
60              iconSize: this.appGridStyleConfig.mIconSize,
61              nameSize: this.appGridStyleConfig.mNameSize,
62              nameFontColor: this.appGridStyleConfig.mNameFontColor,
63              nameHeight: this.appGridStyleConfig.mNameHeight,
64              appName: item.appName,
65              bundleName: item.bundleName,
66              moduleName: item.moduleName,
67              abilityName: item.abilityName,
68              appIconId: item.appIconId,
69              appLabelId: item.appLabelId,
70              badgeNumber: item.badgeNumber,
71              menuInfo: this.buildMenu(item),
72              nameLines: this.appGridStyleConfig.mNameLines,
73              mPaddingTop: this.appGridStyleConfig.mIconMarginVertical,
74              dragStart: () => {}
75            })
76          }
77          .onClick((event: ClickEvent) => {
78            this.onItemClick(event, item);
79          })
80          .onMouse((event: MouseEvent) => {
81            Log.showInfo(TAG, `onMouse MouseType: ${event.button}`);
82            if (event.button == MouseButton.Right) {
83              event.stopPropagation();
84            }
85          })
86        }
87        .width(this.appGridStyleConfig.mAppItemSize)
88        .height(this.appGridStyleConfig.mAppItemSize)
89        .transition({ scale: { x: 0.5, y: 0.5 } })
90      }, (item: AppItemInfo) => JSON.stringify(item))
91    }
92    .columnsTemplate(this.getColumnsTemplate())
93    .rowsTemplate(this.getRowsTemplate())
94    .columnsGap(this.appGridStyleConfig.mColumnsGap)
95    .rowsGap(this.appGridStyleConfig.mRowsGap)
96  }
97}