1/*
2 * Copyright (c) 2024 Shenzhen Kaihong Digital Industry Development 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 common from '@ohos.app.ability.common'
17
18const TOOL_WIDTH: SizeOptions = { width: 150, height: 38 }
19
20class ResourceObjectType {
21  value!: Resource;
22}
23
24/**
25 * Slider in item style
26 *
27 * @param changeValue slide to change
28 */
29@Component
30export struct CommonItemSlider {
31  @Link changeValue: number;
32  private min: number = 0;
33  private max: number = 0;
34  private name: ResourceStr = '';
35  private step: number = 1;
36  private testId: string = 'test_colorSelect';
37  private vpTest: string = 'vp';
38
39  build() {
40    Row() {
41      Text(this.name)
42      Slider({
43        value: this.changeValue,
44        step: this.step,
45        min: this.min,
46        max: this.max })
47        .id(this.testId)
48        .layoutWeight(1)
49        .onChange((value: number) => {
50          this.changeValue = value
51          console.log('Sample_ComponentCollection' + String(value))
52        }).onClick((event: ClickEvent) => {
53        let text = '  screenX:' + event.screenX + '  screenY:' + event.screenY
54        console.log('Sample_ComponentCollection' + text)
55      })
56      Text(`${Math.trunc(this.changeValue)}` + this.vpTest)
57    }
58    .id(this.testId)
59    .width('100%')
60    .height(40)
61    .justifyContent(FlexAlign.SpaceAround)
62  }
63}
64
65/**
66 *  New Slider style to two row
67 *  Text Name at the top left of the slider
68 *  ChangeValue at the top right of the slider
69 * @param changeValue slide to change
70 */
71@Component
72export struct CommonItemTwoRowSlider {
73  @Link changeValue: number;
74  private min: number = 0;
75  private max: number = 0;
76  private name: ResourceStr = '';
77  private step: number = 1;
78  private testId: string = 'test_colorSelect';
79  private vpTest: string = 'vp';
80
81  build() {
82    Column() {
83      Row() {
84        Text(this.name)
85        Text(`${Math.trunc(this.changeValue)}` + this.vpTest)
86      }
87      .justifyContent(FlexAlign.SpaceBetween)
88      .margin({ bottom: 4 })
89      .width('100%')
90
91      Slider({
92        value: this.changeValue,
93        step: this.step,
94        min: this.min,
95        max: this.max })
96        .id(this.testId)
97        .width('100%')
98        .onChange((value: number) => {
99          this.changeValue = value
100          console.log('Sample_ComponentCollection' + String(value))
101        }).onClick((event: ClickEvent) => {
102        let text = '  screenX:' + event.screenX + '  screenY:' + event.screenY
103        console.log('Sample_ComponentCollection' + text)
104      })
105    }
106    .width('100%')
107    .height(60)
108    .justifyContent(FlexAlign.SpaceAround)
109  }
110}
111
112/**
113 * Select in item style, provide multiple choices based on menuList
114 */
115@Component
116export struct CommonItemSelect {
117  private selects: ResourceStr[] = [];
118  private callback: (index: number, value: string) => void = (index: number, value: string) => {};
119  private selectOption: SelectOption[] = [];
120  private name: ResourceStr = '';
121  private testId: string = 'test_itemSelect';
122  private selectIndex: number = 0;
123  private fontSize: Font = { size: 15, weight: FontWeight.Medium };
124  private isItemStyle: boolean = true;
125  private text: string = "请选择";
126
127  aboutToAppear() {
128    this.selects.forEach((selects, index) => {
129      this.selectOption[index] = { value: selects }
130    })
131  }
132
133  build() {
134    Row() {
135      Text(this.name)
136        .margin({ left: this.isItemStyle ? 0 : 12, right: this.isItemStyle ? 0 : 12 })
137      Blank()
138      Select(this.selectOption)
139        .id(this.testId)
140        .value(this.text)
141        .backgroundColor($r('app.color.background_shallow_grey'))
142        .borderRadius(19)
143        .constraintSize({ minWidth: 150 })
144        .selected(this.selectIndex)
145        .font(this.fontSize)
146        .optionFont(this.fontSize)
147        .onSelect((index, value) => {
148          this.callback(index, value)
149          this.selectIndex = index
150        })
151        .height('100%')
152    }
153    .size({ width: '100%', height: this.isItemStyle ? 42 : 70 })
154    .padding({ left: this.isItemStyle ? 0 : 12, right: this.isItemStyle ? 0 : 12 })
155    .borderRadius(this.isItemStyle ? 0 : 24)
156    .backgroundColor(this.isItemStyle ? Color.Transparent : Color.White)
157    .margin({ bottom: 6 })
158  }
159}
160
161/**
162 * Select Color
163 *
164 * @param color change color
165 */
166@Component
167export struct CommonItemColorSelect {
168  @Link selectColor: Resource;
169  @State selectIndex: number = 0;
170  private testId: string = 'test_colorSelect';
171  private name!: Resource;
172  private isItemStyle: boolean = true;
173  private colorNames: Array<ResourceObjectType> = [{ value: $r('app.string.divider_color_blue') }, {
174    value: $r('app.string.divider_color_green')
175  }, { value: $r('app.string.divider_color_orange') }, { value: $r('app.string.divider_color_pink') }];
176
177  changeResourceToString(resourceData: Resource) {
178    let context = getContext(this) as common.UIAbilityContext
179    return context.resourceManager.getStringSync(resourceData.id)
180  }
181
182  build() {
183    Row() {
184      Text(this.name)
185        .margin({ left: this.isItemStyle ? 0 : 12, right: this.isItemStyle ? 0 : 12 })
186      Blank()
187      Select(this.colorNames)
188        .value(this.changeResourceToString(this.colorNames[this.selectIndex].value))
189        .borderRadius(19)
190        .font({ size: 20 })
191        .optionFont({ size: 20 })
192        .constraintSize({ minWidth: 150 })
193        .selected(this.selectIndex)
194        .selectedOptionFont({ size: 20 })
195        .backgroundColor($r('app.color.background_shallow_grey'))
196        .padding({ left: 20, right: 20, top: 8, bottom: 8 })
197        .onSelect((index) => {
198          this.selectIndex = index
199          switch (index) {
200            case 0:
201              this.selectColor = $r('app.color.background_blue')
202              break
203            case 1:
204              this.selectColor = $r('app.color.background_green')
205              break
206            case 2:
207              this.selectColor = $r('app.color.background_orange')
208              break
209            case 3:
210              this.selectColor = $r('app.color.background_pink')
211              break
212            default:
213              this.selectColor = $r('app.color.background_dark')
214          }
215        })
216        .id(this.testId)
217    }
218    .margin({ bottom: 6 })
219    .borderRadius(this.isItemStyle ? 0 : 24)
220    .size({ width: '100%', height: this.isItemStyle ? 42 : 70 })
221    .padding({ left: this.isItemStyle ? 0 : 12, right: this.isItemStyle ? 0 : 12 })
222    .backgroundColor(this.isItemStyle ? Color.Transparent : Color.White)
223  }
224}
225
226/**
227 * TextInput of change panel
228 *
229 * @param inputValue change inputValue
230 */
231@Component
232export struct CommonItemInput {
233  @Link inputValue: string;
234  private name!: Resource;
235  private placeholder?: ResourceStr = '';
236
237  build() {
238    Row() {
239      Text(this.name)
240        .margin({ left: 12, right: 12 })
241      Blank()
242      TextInput({ placeholder: this.placeholder })
243        .size(TOOL_WIDTH)
244        .onChange(value => {
245          this.inputValue = value
246        }).id('test_input')
247        .enableKeyboardOnFocus(false)
248    }
249    .size({ width: '100%', height: 70 })
250    .padding({ left: 12, right: 12 })
251    .borderRadius(24)
252    .backgroundColor($r('app.color.white'))
253    .margin({ top: 12, bottom: 12 })
254  }
255}
256
257
258@Component
259export struct CommonSwitcher {
260  @Link bool: boolean;
261  private name: ResourceStr = '';
262  private testId: string = '';
263  private testID: string = '';
264
265  build() {
266    Row() {
267      Text(this.name)
268      Blank()
269      Toggle({ type: ToggleType.Switch, isOn: this.bool })
270        .onChange((isOn) => {
271          this.bool = isOn
272        })
273        .id(this.testId || this.testID)
274    }.width('100%')
275    .height(40)
276  }
277}
278
279@Component
280export struct ImageItemSlider {
281  @Link changeValue: number;
282  private min: number = 0;
283  private max: number = 0;
284  private name: ResourceStr = '';
285
286  build() {
287    Row() {
288      Text(this.name)
289      Slider({
290        value: this.changeValue,
291        step: 1,
292        min: this.min,
293        max: this.max })
294        .layoutWeight(1)
295        .onChange((value: number) => {
296          this.changeValue = value
297          console.log('Sample_ComponentCollection' + String(value))
298        }).onClick((event: ClickEvent) => {
299        let text = '  screenX:' + event.screenX + '  screenY:' + event.screenY
300        console.log('Sample_ComponentCollection' + text)
301      })
302      Text(`${Math.trunc(this.changeValue)}`)
303    }
304    .width('100%')
305    .height(40)
306    .justifyContent(FlexAlign.SpaceAround)
307  }
308}
309