• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 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 */
15import deviceManager from '@ohos.distributedDeviceManager';
16import Logger from '../utils/Logger'
17
18const TAG: string = 'Sample_DeviceDialog'
19
20@CustomDialog
21export struct DeviceDialog {
22  controller?: CustomDialogController;
23  @StorageLink('deviceList') deviceList: Array<deviceManager.DeviceBasicInfo> = AppStorage.get('deviceList')!;
24  private selectedIndex: number | undefined = 0;
25  private onSelectedIndexChange: (selectedIndex: number | undefined) => void = () => {
26  }
27  @State deviceDialogWidth: number = 0
28
29  build() {
30    Column() {
31      Text($r('app.string.choiceDevice'))
32        .fontSize(px2vp(30))
33        .width('100%')
34        .height('20%')
35        .fontColor(Color.Black)
36        .textAlign(TextAlign.Start)
37      List() {
38        ForEach(this.deviceList, (item: deviceManager.DeviceBasicInfo, index: number | undefined) => {
39          ListItem() {
40            Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {
41              Text(item.deviceName)
42                .fontSize(px2vp(30))
43                .width('100%')
44                .fontColor(Color.Black)
45            }
46            .margin({ top: 17 })
47            .enabled(true)
48            .backgroundColor(Color.Gray)
49            .onClick(() => {
50              Logger.info(TAG, `select device: ${item.deviceId}`)
51              if (this.selectedIndex !== undefined) {
52                Logger.info(TAG, `onSelectedIndexChange: ${index}`)
53                console.log(TAG, this.onSelectedIndexChange);
54                this.selectedIndex = index
55                this.onSelectedIndexChange(this.selectedIndex)
56              }
57            })
58          }
59          .width('100%')
60          .height('50%')
61        }, (item: deviceManager.DeviceBasicInfo) => item.deviceName)
62      }
63      .height('60%')
64      .width('100%')
65      .layoutWeight(1)
66
67      Button() {
68        Text($r('app.string.cancel'))
69          .width('90%')
70          .fontSize(21)
71          .fontColor('#ff0d64fb')
72          .textAlign(TextAlign.Center)
73      }
74      .type(ButtonType.Capsule)
75      .backgroundColor(Color.White)
76      .onClick(() => {
77        if (this.controller !== undefined) {
78          this.controller.close()
79        }
80      })
81    }
82    .margin({ bottom: 15 })
83    .onAreaChange((oldArea: Area, newArea: Area) => {
84      this.deviceDialogWidth =
85        (newArea.width > newArea.height ? newArea.height : newArea.width) as number * 0.1 //percentage
86    })
87    .width('80%')
88    .height(px2vp(240))
89    .padding({ left: 18, right: 32 })
90    .backgroundColor(Color.White)
91    .border({ color: Color.White, radius: 20 })
92  }
93}