1/*
2 * Copyright (c) 2024 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 curves from '@ohos.curves';
17import { Route, RouteGroup } from 'common/src/main/ets/common/route';
18import { ContainersDestination, containersRoute } from 'feature/src/main/ets/pages/containers';
19import { DisplaysDestination, displaysRoute } from 'feature/src/main/ets/pages/displays';
20import { OperatesDestination, operatesRoute } from 'feature/src/main/ets/pages/operates';
21import { PickersDestination, pickersRoute } from 'feature/src/main/ets/pages/pickers';
22import { InputsDestination, inputsRoute } from 'feature/src/main/ets/pages/inputs';
23import { NavigatesDestination, navigatesRoute } from 'feature/src/main/ets/pages/navigates';
24import { KeyboardAvoidMode } from '@kit.ArkUI';
25import { BlankAndDividerDestination, blankAndDividerRoute } from 'feature/src/main/ets/pages/blankanddivider';
26
27@Styles
28function CardPressedStyle() {
29  .backgroundColor('rgba(0,0,0,0.1)')
30  .opacity(1)
31  .animation({ curve: curves.cubicBezierCurve(0.33, 0, 0.67, 1), duration: 100 })
32}
33
34@Styles
35function CardNormalStyle() {
36  .backgroundColor('rgba(0,0,0,0)')
37  .opacity(1)
38  .animation({ curve: curves.cubicBezierCurve(0.33, 0, 0.67, 1), duration: 100 })
39
40}
41
42@Styles
43function CardDisabledStyle() {
44  .backgroundColor('rgba(0,0,0,0)')
45  .opacity(0.5)
46  .animation({ curve: curves.cubicBezierCurve(0.33, 0, 0.67, 1), duration: 100 })
47}
48
49@Builder
50function Destination(name: string, route: Route) {
51  if (name.startsWith('containers/')) {
52    ContainersDestination(name, route)
53  } else if (name.startsWith('displays/')) {
54    DisplaysDestination(name, route)
55  } else if (name.startsWith('operates/')) {
56    OperatesDestination(name, route)
57  } else if (name.startsWith('pickers/')) {
58    PickersDestination(name, route)
59  } else if (name.startsWith('inputs/')) {
60    InputsDestination(name, route)
61  } else if (name.startsWith('navigates/')) {
62    NavigatesDestination(name, route)
63  } else if (name.startsWith('blankanddivider/')) {
64    BlankAndDividerDestination(name, route)
65  }
66}
67
68@Entry
69@Component
70struct Index {
71  @Provide('router') router: NavPathStack = new NavPathStack();
72  @State routes: RouteGroup[] = [
73    containersRoute,
74    displaysRoute,
75    operatesRoute,
76    pickersRoute,
77    inputsRoute,
78    navigatesRoute,
79    blankAndDividerRoute
80  ];
81  @State selection: string | null = null;
82
83  @Builder
84  ListItemGroupHeader(route: RouteGroup) {
85    Row() {
86      Text(route.label)
87        .fontColor($r('sys.color.ohos_id_color_text_primary'))
88        .fontWeight(FontWeight.Medium)
89
90      Blank()
91
92      Text(`${route.children.length}`)
93        .fontColor($r('sys.color.ohos_id_color_text_secondary'))
94        .opacity(this.selection === route.name ? 0 : 1)
95
96      Image($r('sys.media.ohos_ic_public_arrow_right'))
97        .fillColor($r('sys.color.ohos_id_color_fourth'))
98        .height(24)
99        .width(24)
100        .rotate({ angle: this.selection === route.name ? 90 : 0 })
101        .animation({ curve: curves.interpolatingSpring(0, 1, 228, 30) })
102    }
103    .borderRadius(20)
104    .width('100%')
105    .padding({
106      left: 8,
107      right: 8,
108      top: 18,
109      bottom: 18
110    })
111    .enabled(!!route.children.length)
112    .stateStyles({
113      pressed: CardPressedStyle,
114      normal: CardNormalStyle,
115      disabled: CardDisabledStyle,
116    })
117    .onTouch((event) => {
118      if (event.type === TouchType.Up) {
119        animateTo(
120          { curve: curves.interpolatingSpring(0, 1, 228, 25) },
121          () => {
122            if (this.selection === route.name) {
123              this.selection = null;
124            } else {
125              this.selection = route.name;
126            }
127          });
128      }
129    })
130  }
131
132  aboutToAppear(): void{
133    this.getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE);
134  }
135  build() {
136    Navigation(this.router) {
137      Text('ArkUI 是 OpenHarmony 的控件底座，这是一个 ArkUI 控件检视应用，你可以查阅目前版本的控件能力与默认样式。')
138        .fontSize(16)
139        .margin({ left: 16, right: 10, bottom: 24 })
140
141      List({ space: 12 }) {
142        ForEach(this.routes, (routeGroup: RouteGroup) => {
143          ListItemGroup({
144            header: this.ListItemGroupHeader(routeGroup),
145            style: ListItemGroupStyle.CARD,
146          }) {
147            if (routeGroup.name === this.selection) {
148              ForEach(routeGroup.children, (route: Route) => {
149                ListItem() {
150                  Row() {
151                    Text(route.label).fontSize(16)
152                    Blank()
153                    Image($r('sys.media.ohos_ic_public_arrow_right'))
154                      .fillColor($r('sys.color.ohos_id_color_fourth'))
155                      .height(24)
156                      .width(24)
157                  }
158                  .stateStyles({
159                    pressed: CardPressedStyle,
160                    normal: CardNormalStyle,
161                    disabled: CardDisabledStyle,
162                  })
163                  .borderRadius(20)
164                  .padding({
165                    left: 8,
166                    right: 8,
167                    top: 13,
168                    bottom: 13
169                  })
170                  .transition(
171                    TransitionEffect.OPACITY.animation({
172                      curve: curves.interpolatingSpring(0, 1, 228, 30)
173                    })
174                  )
175                  .width('100%')
176                  .onClick(() => {
177                    const name = `${routeGroup.name}/${route.name}`;
178                    const pathNames = this.router.getAllPathName();
179                    if (pathNames[pathNames.length-1] !== name) {
180                      this.router.pushPath({ name, param: route });
181                    }
182                  })
183                }
184                .width('100%')
185              })
186            }
187          }
188          .padding(4)
189          .divider({ strokeWidth: 0.5 })
190        })
191      }
192    }
193    .title('Component')
194    .backgroundColor($r('sys.color.ohos_id_color_sub_background'))
195    .navDestination(Destination)
196  }
197}