• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2023-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 */
15import { LengthMetrics } from '@ohos.arkui.node';
16
17export enum CounterType {
18  LIST = 0,
19  COMPACT = 1,
20  INLINE = 2,
21  INLINE_DATE = 3
22}
23
24enum FocusText {
25  NONE,
26  TEXT1,
27  TEXT2,
28  TEXT3,
29}
30
31export class CommonOptions {
32  public focusable?: boolean;
33  public step?: number;
34  public onHoverIncrease?: (isHover: boolean) => void;
35  public onHoverDecrease?: (isHover: boolean) => void;
36}
37
38export class InlineStyleOptions extends CommonOptions {
39  public value?: number;
40  public min?: number;
41  public max?: number;
42  public textWidth?: number;
43  public onChange?: (value: number) => void;
44}
45
46export class NumberStyleOptions extends InlineStyleOptions {
47  public label?: ResourceStr;
48  public onFocusIncrease?: () => void;
49  public onFocusDecrease?: () => void;
50  public onBlurIncrease?: () => void;
51  public onBlurDecrease?: () => void;
52}
53
54export class DateData {
55  public year: number;
56  public month: number;
57  public day: number;
58
59  constructor(year: number, month: number, day: number) {
60    this.year = year;
61    this.month = month;
62    this.day = day;
63  }
64
65  toString(): string {
66    let date = this.year.toString() + '-';
67    let month = this.month < 10 ? '0' + this.month.toString() : this.month.toString();
68    date += month + '-';
69    let day = this.day < 10 ? '0' + this.day.toString() : this.day.toString();
70    date += day;
71    return date;
72  }
73}
74
75export class DateStyleOptions extends CommonOptions {
76  public year?: number;
77  public month?: number;
78  public day?: number;
79  public onDateChange?: (date: DateData) => void;
80}
81
82export class CounterOptions {
83  public type: CounterType;
84  public direction?: Direction;
85  public numberOptions?: NumberStyleOptions;
86  public inlineOptions?: InlineStyleOptions;
87  public dateOptions?: DateStyleOptions;
88}
89
90class CounterResource {
91  // counter color
92  public static readonly BUTTON_BACKGROUD_COLOR = $r('sys.color.ohos_id_color_button_normal');
93  public static readonly BUTTON_ICON_COLOR = $r('sys.color.ohos_id_color_primary');
94  public static readonly BUTTON_BORDER_FOCUSED_COLOR = $r('sys.color.ohos_id_color_focused_outline');
95  public static readonly COUNTER_TEXT_COLOR = $r('sys.color.ohos_id_color_text_primary');
96  public static readonly COUNTER_BORDER_COLOR = $r('sys.color.ohos_id_color_component_normal');
97  // button icon
98  public static readonly BUTTON_ADD_ICON = $r("sys.media.ohos_ic_public_add");
99  public static readonly BUTTON_SUB_ICON = $r("sys.media.ohos_ic_public_minus");
100  public static readonly BUTTON_ARROW_UP = $r('sys.media.ohos_ic_public_arrow_up');
101  public static readonly BUTTON_ARROW_DOWN = $r('sys.media.ohos_ic_public_arrow_down');
102  // counter size
103  public static readonly BUTTON_BORDER_FOCUSED_WIDTH = '2vp';
104  public static readonly BUTTON_BORDER_BLUR_WIDTH = '0vp';
105  public static readonly COUNTER_BORDER_WIDTH = '1vp';
106  public static readonly COUNTER_BORDER_WIDTH_NUMBER = 1;
107  public static readonly COUNTER_LIST_LABEL_SIZE = $r('sys.float.ohos_id_text_size_body1');
108  public static readonly COUNTER_LIST_NUMBER_SIZE = $r('sys.float.ohos_id_text_size_body1');
109  public static readonly COUNTER_COMPACT_LABEL_SIZE = $r('sys.float.ohos_id_text_size_body2');
110  public static readonly COUNTER_NUMBER_SIZE = $r('sys.float.ohos_id_text_size_body1');
111  public static readonly COUNTER_LIST_LEFT_PADDING = $r('sys.float.ohos_id_default_padding_start');
112  public static readonly COUNTER_LIST_RIGHT_PADDING = $r('sys.float.ohos_id_default_padding_end');
113  public static readonly COUNTER_LIST_PADDING = 12;
114  public static readonly COUNTER_LIST_HEIGHT = '48vp';
115  public static readonly COUNTER_LIST_BUTTON_ICON_SIZE = '20vp';
116  public static readonly COUNTER_LIST_BUTTON_SIZE = '32vp';
117  public static readonly COUNTER_LIST_BUTTON_RADIUS = '16vp';
118  public static readonly COUNTER_LIST_BUTTON_TEXT_DISTANCE = '8vp';
119  public static readonly COUNTER_LIST_BUTTON_TEXT_MARGIN = 8;
120  public static readonly COUNTER_LIST_FOCUS_BORDER_SIZE = '30vp';
121  public static readonly COUNTER_LIST_FOCUS_BORDER_RADIUS = '15vp';
122  public static readonly COUNTER_LIST_BUTTON_HOT_SPOT_X = '-8vp';
123  public static readonly COUNTER_LIST_BUTTON_HOT_SPOT_Y = '-8vp';
124  public static readonly COUNTER_COMPACT_BUTTON_ICON_SIZE = '16vp';
125  public static readonly COUNTER_COMPACT_BUTTON_SIZE = '24vp';
126  public static readonly COUNTER_COMPACT_BUTTON_RADIUS = '12vp';
127  public static readonly COUNTER_COMPACT_BUTTON_TEXT_DISTANCE = '10vp';
128  public static readonly COUNTER_COMPACT_BUTTON_TEXT_MARGIN = 10;
129  public static readonly COUNTER_COMPACT_CONTAINER_HEIGHT = '28vp';
130  public static readonly COUNTER_COMPACT_CONTAINER_RADIUS = '14vp';
131  public static readonly COUNTER_COMPACT_CONTAINER_LABEL_DISTANCE = '8vp';
132  public static readonly COUNTER_COMPACT_FOCUS_BORDER_SIZE = '22vp';
133  public static readonly COUNTER_COMPACT_FOCUS_BORDER_RADIUS = '11vp';
134  public static readonly COUNTER_INLINE_BUTTON_ICON_WIDTH = '24vp';
135  public static readonly COUNTER_INLINE_BUTTON_ICON_HEIGHT = '12vp';
136  public static readonly COUNTER_INLINE_BUTTON_TEXT_DISTANCE = '12vp';
137  public static readonly COUNTER_INLINE_CONTAINER_HEIGHT = '32vp';
138  public static readonly COUNTER_INLINE_BUTTON_WIDTH = '32vp';
139  public static readonly COUNTER_INLINE_BUTTON_HEIGHT = '16vp';
140  public static readonly COUNTER_INLINE_RADIUS = '8vp';
141  public static readonly COUNTER_INLINE_FOCUS_BORDER_WIDTH = '28vp';
142  public static readonly COUNTER_INLINE_FOCUS_BORDER_HEIGHT = '13.5vp';
143  public static readonly COUNTER_INLINE_DATE_TEXT_MARGIN = 12;
144  public static readonly COUNTER_INLINE_INPUT_TEXT_MARGIN = 12;
145  public static readonly COUNTER_BUTTON_INITIAL_OPACITY = 1;
146  public static readonly COUNTER_BUTTON_DISABLE_OPACITY = 0.4;
147}
148
149class CounterConstant {
150  public static readonly COUNTER_MAX_YEAR = 5000;
151  public static readonly COUNTER_MIN_YEAR = 1;
152  public static readonly COUNTER_INITIAL_MONTH = 1;
153  public static readonly COUNTER_INITIAL_DAY = 1;
154  public static readonly COUNTER_INITIAL_STEP = 1;
155  public static readonly COUNTER_TEN_NUMBER = 10;
156  public static readonly COUNTER_MIN_MONTH = 1;
157  public static readonly COUNTER_MAX_MONTH = 12;
158  public static readonly COUNTER_MIN_DAY = 1;
159  public static readonly KEYCODE_DPAD_UP = 2012;
160  public static readonly KEYCODE_DPAD_DOWN = 2013;
161  public static readonly KEYCODE_DPAD_LEFT = 2014;
162  public static readonly KEYCODE_DPAD_RIGHT = 2015;
163  public static readonly KEYCODE_MOVE_HOME = 2081;
164  public static readonly KEYCODE_MOVE_END = 2082;
165  public static readonly KEYCODE_TAB = 2049;
166  public static readonly KEYCODE_ESC = 2070;
167  public static readonly COUNTER_MIN_VALUE = 0;
168  public static readonly COUNTER_MAX_VALUE = 999;
169  public static readonly JANUARY = 1;
170  public static readonly FEBRUARY = 2;
171  public static readonly MARCH = 3;
172  public static readonly APRIL = 4;
173  public static readonly MAY = 5;
174  public static readonly JUNE = 6;
175  public static readonly JULY = 7;
176  public static readonly AUGUST = 8;
177  public static readonly SEPTEMBER = 9;
178  public static readonly OCTOBER = 10;
179  public static readonly NOVEMBER = 11;
180  public static readonly DECEMBER = 12;
181  public static readonly BIG_MONTH_DAYS = 31;
182  public static readonly SMALL_MONTH_DAYS = 30;
183  public static readonly FEBRUARY_DAYS = 28;
184  public static readonly AUSPICIOUS_FEBRUARY_DAYS = 29;
185  public static readonly AUSPICIOUS_FOUR = 4;
186  public static readonly AUSPICIOUS_HUNDRED = 100;
187  public static readonly AUSPICIOUS_FOUR_HUNDRED = 400;
188}
189
190@Component
191export struct CounterComponent {
192  @Prop @Watch('onOptionsChange') options: CounterOptions;
193  @State type: number = -1;
194  @State counterDirection: Direction = Direction.Auto;
195  @State choverEffect: HoverEffect = HoverEffect.Auto;
196  @State focusEnable: boolean = true;
197  @State step: number = CounterConstant.COUNTER_INITIAL_STEP;
198  @State inputValue: string = '0';
199  @State inputYear: number = CounterConstant.COUNTER_MIN_YEAR;
200  @State inputMoon: number = 0;
201  @State inputDay: number = 0;
202  @State inputHour: number = 0;
203  @State inputMinute: number = 0;
204  @State inputSecond: number = 0;
205  @State subOpacity: number = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
206  @State addOpacity: number = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
207  @State subBtnStateEffect: boolean = true;
208  @State addBtnStateEffect: boolean = true;
209  @State focusText: number = FocusText.NONE;
210  @State hasFocusText1: boolean = false
211  @State hasFocusText2: boolean = false
212  @State hasFocusText3: boolean = false
213  @State subBtnFocusWidh: string = '0vp'
214  @State addBtnFocusWidh: string = '0vp'
215  @State value: number | undefined = undefined;
216  @State year: number = 0;
217  @State month: number = 0;
218  @State day: number = 0;
219  @State hour: number = 0;
220  @State minute: number = 0;
221  @State second: number = 0;
222  @State subBtnEnabled: boolean = true
223  @State addBtnEnabled: boolean = true
224  @State hasInputText1: boolean = false;
225  @State hasInputText2: boolean = false;
226  @State hasInputText3: boolean = false;
227  @State textWidth: number = 0;
228  @State min: number = CounterConstant.COUNTER_MIN_VALUE;
229  @State max: number = CounterConstant.COUNTER_MAX_VALUE;
230  private maxYear: number = CounterConstant.COUNTER_MAX_YEAR;
231  private minYear: number = CounterConstant.COUNTER_MIN_YEAR;
232  private numberStrList: Array<string> = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09'];
233  private onHoverIncrease?: (isHover: boolean) => void;
234  private onHoverDecrease?: (isHover: boolean) => void;
235  private onFocusIncrease?: () => void;
236  private onFocusDecrease?: () => void;
237  private onBlurIncrease?: () => void;
238  private onBlurDecrease?: () => void;
239  private onChange?: (value: number) => void;
240  private onDateChange?: (date: DateData) => void;
241  private timeoutID1: number = -1;
242  private timeoutID2: number = -1;
243  private timeoutID3: number = -1;
244  private numberStyleOptions: NumberStyleOptions;
245  private dateStyleOptions: DateStyleOptions;
246  private inlineStyleOptions: InlineStyleOptions;
247  private timeStamp: number = 0;
248  private hasTextWidth: boolean = false;
249  private controller1: TextInputController = new TextInputController();
250  private controller2: TextInputController = new TextInputController();
251  private controller3: TextInputController = new TextInputController();
252
253  convertNumberToString(value: number) {
254    if (value >= 0 && value < CounterConstant.COUNTER_TEN_NUMBER) {
255      return this.numberStrList[value];
256    } else {
257      return value.toString();
258    }
259  }
260
261  aboutToAppear(): void {
262    let dateTime = new Date();
263    this.timeStamp = dateTime.getTime();
264    if (this.options !== undefined && this.options !== null) {
265      this.onOptionsChange();
266    }
267  }
268
269  private updateNumberStyleOptions() {
270    if (this.numberStyleOptions.label === undefined) {
271      this.numberStyleOptions.label = '';
272    }
273    if (this.value === undefined) {
274      this.value = this.numberStyleOptions.value !== undefined ? this.numberStyleOptions.value : 0;
275      this.onChange?.(this.value);
276      this.inputValue = this.value.toString();
277    }
278    if (this.numberStyleOptions.min !== undefined) {
279      this.min = this.numberStyleOptions.min;
280    }
281    if (this.numberStyleOptions.max !== undefined) {
282      this.max = this.numberStyleOptions.max;
283    }
284    if (this.min > this.max) {
285      this.min = this.max;
286    }
287    if (this.numberStyleOptions.textWidth !== undefined) {
288      this.textWidth = this.numberStyleOptions.textWidth;
289      if (this.textWidth < 0) {
290        this.textWidth = 0;
291      }
292      this.hasTextWidth = true;
293    }
294    if (this.value <= this.min) {
295      this.value = this.min;
296      this.onChange?.(this.value);
297      this.inputValue = this.value.toString();
298    }
299    if (this.value >= this.max) {
300      this.value = this.max;
301      this.onChange?.(this.value);
302      this.inputValue = this.value.toString();
303    }
304    if (this.numberStyleOptions.step !== undefined) {
305      if (this.numberStyleOptions.step < 1) {
306        this.step = 1
307      } else {
308        this.step = this.numberStyleOptions.step;
309      }
310    }
311    this.updateButtonStatus()
312    this.updateNumberStyleOptionsEvent();
313  }
314
315  private updateNumberStyleOptionsEvent() {
316    if (this.numberStyleOptions.onHoverIncrease !== undefined) {
317      this.onHoverIncrease = this.numberStyleOptions.onHoverIncrease;
318    }
319    if (this.numberStyleOptions.onHoverDecrease !== undefined) {
320      this.onHoverDecrease = this.numberStyleOptions.onHoverDecrease;
321    }
322    if (this.numberStyleOptions.onFocusIncrease !== undefined) {
323      this.onFocusIncrease = this.numberStyleOptions.onFocusIncrease;
324    }
325    if (this.numberStyleOptions.onFocusDecrease !== undefined) {
326      this.onFocusDecrease = this.numberStyleOptions.onFocusDecrease;
327    }
328    if (this.numberStyleOptions.onBlurIncrease !== undefined) {
329      this.onBlurIncrease = this.numberStyleOptions.onBlurIncrease;
330    }
331    if (this.numberStyleOptions.onBlurDecrease !== undefined) {
332      this.onBlurDecrease = this.numberStyleOptions.onBlurDecrease;
333    }
334    if (this.numberStyleOptions.onChange !== undefined) {
335      this.onChange = this.numberStyleOptions.onChange;
336    }
337    if (this.numberStyleOptions.focusable !== undefined) {
338      this.focusEnable = this.numberStyleOptions.focusable;
339    }
340  }
341
342  private updateInlineStyleOptions() {
343    if (this.value === undefined) {
344      this.value = this.inlineStyleOptions.value !== undefined ? this.inlineStyleOptions.value : 0;
345      this.onChange?.(this.value);
346      this.inputValue = this.value.toString();
347    }
348    if (this.inlineStyleOptions.min !== undefined) {
349      this.min = this.inlineStyleOptions.min;
350    }
351    if (this.inlineStyleOptions.max !== undefined) {
352      this.max = this.inlineStyleOptions.max;
353    }
354    if (this.min > this.max) {
355      this.min = this.max;
356    }
357
358    if (this.inlineStyleOptions.textWidth !== undefined) {
359      this.textWidth = this.inlineStyleOptions.textWidth;
360      if (this.textWidth < 0) {
361        this.textWidth = 0;
362      }
363      this.hasTextWidth = true;
364    }
365    if (this.value <= this.min) {
366      this.value = this.min;
367      this.onChange?.(this.value);
368      this.inputValue = this.value.toString();
369    }
370    if (this.value >= this.max) {
371      this.value = this.max;
372      this.onChange?.(this.value);
373      this.inputValue = this.value.toString();
374    }
375    if (this.inlineStyleOptions.step !== undefined) {
376      if (this.inlineStyleOptions.step < 1) {
377        this.step = 1
378      } else {
379        this.step = this.inlineStyleOptions.step;
380      }
381    }
382    this.updateButtonStatus()
383    this.updateInlineStyleOptionsEvent();
384  }
385
386  private updateInlineStyleOptionsEvent() {
387    if (this.inlineStyleOptions.onHoverIncrease !== undefined) {
388      this.onHoverIncrease = this.inlineStyleOptions.onHoverIncrease;
389    }
390    if (this.inlineStyleOptions.onHoverDecrease !== undefined) {
391      this.onHoverDecrease = this.inlineStyleOptions.onHoverDecrease;
392    }
393    if (this.inlineStyleOptions.onChange !== undefined) {
394      this.onChange = this.inlineStyleOptions.onChange;
395    }
396    if (this.inlineStyleOptions.focusable !== undefined) {
397      this.focusEnable = this.inlineStyleOptions.focusable;
398    }
399  }
400
401  private updateDateStyleOptions() {
402    if (this.dateStyleOptions.step !== undefined) {
403      if (this.dateStyleOptions.step < 1) {
404        this.step = 1
405      } else {
406        this.step = this.dateStyleOptions.step;
407      }
408    }
409    if (this.dateStyleOptions.onHoverIncrease !== undefined) {
410      this.onHoverIncrease = this.dateStyleOptions.onHoverIncrease;
411    }
412    if (this.dateStyleOptions.onHoverDecrease !== undefined) {
413      this.onHoverDecrease = this.dateStyleOptions.onHoverDecrease;
414    }
415    if (this.dateStyleOptions.year !== undefined &&
416      this.dateStyleOptions.year >= this.minYear &&
417      this.dateStyleOptions.year <= this.maxYear) {
418      if (this.year === 0) {
419        this.year = this.dateStyleOptions.year;
420      }
421    } else {
422      this.year = CounterConstant.COUNTER_MIN_YEAR;
423    }
424    if (this.dateStyleOptions.month !== undefined &&
425      this.dateStyleOptions.month <= CounterConstant.COUNTER_MAX_MONTH &&
426      this.dateStyleOptions.month >= CounterConstant.COUNTER_MIN_MONTH) {
427      if (this.month === 0) {
428        this.month = this.dateStyleOptions.month;
429      }
430    } else {
431      this.month = CounterConstant.COUNTER_INITIAL_MONTH;
432    }
433    if (this.dateStyleOptions.day !== undefined &&
434      this.dateStyleOptions.day <= this.getDayNumber() &&
435      this.dateStyleOptions.day >= CounterConstant.COUNTER_MIN_DAY) {
436      if (this.day === 0) {
437        this.day = this.dateStyleOptions.day;
438      }
439    } else {
440      this.day = CounterConstant.COUNTER_INITIAL_DAY;
441    }
442    if (this.dateStyleOptions.onDateChange !== undefined) {
443      this.onDateChange = this.dateStyleOptions.onDateChange;
444    }
445    if (this.dateStyleOptions.focusable !== undefined) {
446      this.focusEnable = this.dateStyleOptions.focusable;
447    }
448    this.updateDay();
449  }
450
451  private onOptionsChange() {
452    this.type = this.options.type;
453    if (this.options.direction) {
454      this.counterDirection = this.options.direction;
455    } else {
456      this.counterDirection = Direction.Auto;
457    }
458
459    if (this.type === CounterType.LIST ||
460      this.type === CounterType.COMPACT) {
461      this.numberStyleOptions = this.options.numberOptions;
462      this.updateNumberStyleOptions();
463    } else if (this.type === CounterType.INLINE) {
464      this.inlineStyleOptions = this.options.inlineOptions;
465      this.updateInlineStyleOptions();
466    } else if (this.type === CounterType.INLINE_DATE) {
467      let options = this.options.dateOptions;
468      options.year = options.year ? options.year : CounterConstant.COUNTER_MIN_YEAR;
469      options.month = options.month ? options.month : CounterConstant.COUNTER_MIN_MONTH;
470      options.day = options.day ? options.day : CounterConstant.COUNTER_MIN_DAY;
471      this.dateStyleOptions = options;
472      this.updateDateStyleOptions();
473    } else {
474
475    }
476  }
477
478  private subValue(): void {
479    if (this.subBtnStateEffect) {
480      this.value -= this.step;
481    }
482    if (!this.addBtnStateEffect) {
483      this.addBtnStateEffect = true;
484      this.addOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
485      this.addBtnEnabled = true;
486    }
487    if (this.value <= this.min) {
488      this.value = this.min;
489      this.subOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
490      this.subBtnStateEffect = false;
491      this.subBtnEnabled = false;
492    } else {
493      if (this.subOpacity === CounterResource.COUNTER_BUTTON_DISABLE_OPACITY) {
494        this.subOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
495      }
496      if (!this.subBtnStateEffect) {
497        this.subBtnStateEffect = true;
498      }
499      if (!this.subBtnEnabled) {
500        this.subBtnEnabled = true;
501      }
502    }
503    this.focusText1();
504  }
505
506  private focusText1() {
507    if (this.type === CounterType.INLINE) {
508      if (this.focusText === FocusText.NONE) {
509        this.focusText = FocusText.TEXT1;
510        this.hasFocusText1 = true;
511        this.focusWithTarget('InlineTextInput' + this.timeStamp.toString());
512      }
513    }
514  }
515
516  private addValue(): void {
517    if (this.addBtnStateEffect) {
518      this.value += this.step;
519    }
520
521    if (!this.subBtnStateEffect) {
522      this.subBtnStateEffect = true;
523      this.subOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
524      this.subBtnEnabled = true;
525    }
526    if (this.value >= this.max) {
527      this.value = this.max;
528      this.addOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
529      this.addBtnStateEffect = false;
530      this.addBtnEnabled = false;
531    } else {
532      if (this.addOpacity === CounterResource.COUNTER_BUTTON_DISABLE_OPACITY) {
533        this.addOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
534      }
535      if (!this.addBtnStateEffect) {
536        this.addBtnStateEffect = true;
537      }
538      if (!this.addBtnEnabled) {
539        this.addBtnEnabled = true;
540      }
541    }
542
543    this.focusText1();
544  }
545
546  private getDayNumber(): number {
547    switch (this.month) {
548      case CounterConstant.JANUARY:
549      case CounterConstant.MARCH:
550      case CounterConstant.MAY:
551      case CounterConstant.JULY:
552      case CounterConstant.AUGUST:
553      case CounterConstant.OCTOBER:
554      case CounterConstant.DECEMBER:
555        return CounterConstant.BIG_MONTH_DAYS;
556        break;
557      case CounterConstant.APRIL:
558      case CounterConstant.JUNE:
559      case CounterConstant.SEPTEMBER:
560      case CounterConstant.NOVEMBER:
561        return CounterConstant.SMALL_MONTH_DAYS;
562        break;
563      case CounterConstant.FEBRUARY:
564        if ((this.year % CounterConstant.AUSPICIOUS_FOUR === 0 &&
565          this.year % CounterConstant.AUSPICIOUS_HUNDRED !== 0) ||
566          this.year % CounterConstant.AUSPICIOUS_FOUR_HUNDRED === 0) {
567          return CounterConstant.AUSPICIOUS_FEBRUARY_DAYS;
568        } else {
569          return CounterConstant.FEBRUARY_DAYS;
570        }
571        break;
572      default:
573        break;
574    }
575  }
576
577  private subDate(): void {
578    if (this.focusText === FocusText.TEXT1) {
579      if (this.subBtnStateEffect) {
580        this.inputYear = this.year;
581        this.year -= this.step;
582        if (!this.hasFocusText1) {
583          this.hasFocusText1 = true;
584        }
585      }
586      if (!this.addBtnStateEffect) {
587        this.addBtnStateEffect = true;
588        this.addOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
589        this.addBtnEnabled = true;
590      }
591      if (this.year <= this.minYear) {
592        this.subOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
593        this.subBtnStateEffect = false;
594        this.subBtnEnabled = false;
595      } else {
596        if (this.subOpacity === CounterResource.COUNTER_BUTTON_DISABLE_OPACITY) {
597          this.subOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
598        }
599        if (!this.subBtnStateEffect) {
600          this.subBtnStateEffect = true;
601        }
602        if (!this.subBtnEnabled) {
603          this.subBtnEnabled = true;
604        }
605      }
606    } else if (this.focusText === FocusText.TEXT2) {
607      this.month -= this.step % CounterConstant.COUNTER_MAX_MONTH;
608      if (this.month < CounterConstant.COUNTER_MIN_MONTH) {
609        this.month += CounterConstant.COUNTER_MAX_MONTH;
610      }
611      if (!this.hasFocusText2) {
612        this.hasFocusText2 = true;
613      }
614    } else if (this.focusText === FocusText.TEXT3) {
615      this.day -= this.step % this.getDayNumber();
616      if (this.day < CounterConstant.COUNTER_MIN_DAY) {
617        this.day += this.getDayNumber();
618      }
619      if (!this.hasFocusText3) {
620        this.hasFocusText3 = true;
621      }
622    } else {
623      this.focusDayWitdhSub();
624    }
625  }
626
627  private focusDayWitdhSub() {
628    this.focusText = FocusText.TEXT3;
629    this.hasFocusText3 = true;
630    this.day -= this.step % this.getDayNumber();
631    if (this.day < CounterConstant.COUNTER_MIN_DAY) {
632      this.day += this.getDayNumber();
633    }
634    this.focusWithTarget('DateTextInput3' + this.timeStamp.toString());
635  }
636
637  private addDate(): void {
638    if (this.focusText === FocusText.TEXT1) {
639      if (this.addBtnStateEffect) {
640        this.inputYear = this.year;
641        this.year += this.step;
642        if (!this.hasFocusText1) {
643          this.hasFocusText1 = true;
644        }
645      }
646      if (!this.subBtnStateEffect) {
647        this.subBtnStateEffect = true;
648        this.subOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
649        this.subBtnEnabled = true;
650      }
651      if (this.year >= this.maxYear) {
652        this.addOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
653        this.addBtnStateEffect = false;
654        this.addBtnEnabled = false;
655      } else {
656        if (this.addOpacity === CounterResource.COUNTER_BUTTON_DISABLE_OPACITY) {
657          this.addOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
658        }
659        if (!this.addBtnStateEffect) {
660          this.addBtnStateEffect = true;
661        }
662        if (!this.addBtnEnabled) {
663          this.addBtnEnabled = true;
664        }
665      }
666    } else if (this.focusText === FocusText.TEXT2) {
667      this.month += this.step % CounterConstant.COUNTER_MAX_MONTH;
668      if (this.month > CounterConstant.COUNTER_MAX_MONTH) {
669        this.month -= CounterConstant.COUNTER_MAX_MONTH;
670      }
671      if (!this.hasFocusText2) {
672        this.hasFocusText2 = true;
673      }
674    } else if (this.focusText === FocusText.TEXT3) {
675      this.day += this.step % this.getDayNumber();
676      if (this.day > this.getDayNumber()) {
677        this.day -= this.getDayNumber();
678      }
679      if (!this.hasFocusText3) {
680        this.hasFocusText3 = true;
681      }
682    } else {
683      this.focusDayWithAdd();
684    }
685  }
686
687  private focusDayWithAdd() {
688    this.focusText = FocusText.TEXT3;
689    this.hasFocusText3 = true;
690    this.day += this.step % this.getDayNumber();
691    if (this.day > this.getDayNumber()) {
692      this.day -= this.getDayNumber();
693    }
694    this.focusWithTarget('DateTextInput3' + this.timeStamp.toString());
695  }
696
697  private updateInlineEnableSate() {
698    if (this.value >= this.max) {
699      this.addOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
700      this.addBtnStateEffect = false;
701      this.addBtnEnabled = false;
702    } else {
703      this.addOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
704      this.addBtnStateEffect = true;
705      this.addBtnEnabled = true;
706    }
707    if (this.value <= this.min) {
708      this.subOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
709      this.subBtnStateEffect = false;
710      this.subBtnEnabled = false;
711    } else {
712      this.subOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
713      this.subBtnStateEffect = true;
714      this.subBtnEnabled = true;
715    }
716  }
717
718  private updateDateEnableSate() {
719    if (this.year === this.maxYear && this.focusText === FocusText.TEXT1) {
720      this.addOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
721      this.addBtnStateEffect = false;
722      this.addBtnEnabled = false;
723    } else {
724      if (this.addOpacity === CounterResource.COUNTER_BUTTON_DISABLE_OPACITY) {
725        this.addOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
726      }
727      if (!this.addBtnStateEffect) {
728        this.addBtnStateEffect = true;
729      }
730      if (!this.addBtnEnabled) {
731        this.addBtnEnabled = true;
732      }
733    }
734    if (this.year === this.minYear && this.focusText === FocusText.TEXT1) {
735      this.subOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
736      this.subBtnStateEffect = false;
737      this.subBtnEnabled = false;
738    } else {
739      if (this.subOpacity === CounterResource.COUNTER_BUTTON_DISABLE_OPACITY) {
740        this.subOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
741      }
742      if (!this.subBtnStateEffect) {
743        this.subBtnStateEffect = true;
744      }
745      if (!this.subBtnEnabled) {
746        this.subBtnEnabled = true;
747      }
748    }
749  }
750
751  private updateDay() {
752    if (this.day > this.getDayNumber()) {
753      this.day = this.getDayNumber();
754    }
755  }
756
757  private resetFocusText() {
758    this.focusText = FocusText.NONE;
759    this.hasFocusText1 = false;
760    this.hasFocusText2 = false;
761    this.hasFocusText3 = false;
762  }
763
764  private resetFocusButton() {
765    if (this.addBtnFocusWidh === CounterResource.BUTTON_BORDER_FOCUSED_WIDTH) {
766      this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
767      this.onBlurIncrease && this.onBlurIncrease();
768    }
769    if (this.subBtnFocusWidh === CounterResource.BUTTON_BORDER_FOCUSED_WIDTH) {
770      this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
771      this.onBlurDecrease && this.onBlurDecrease();
772    }
773  }
774
775  private homeFocusText() {
776    this.focusWithTarget('DateTextInput1' + this.timeStamp.toString());
777  }
778
779  private endFocusText() {
780    this.focusWithTarget('DateTextInput3' + this.timeStamp.toString());
781  }
782
783  private homeFirstValue() {
784    this.value = this.min;
785    if (!this.addBtnStateEffect) {
786      this.addBtnStateEffect = true;
787      this.addOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
788      this.addBtnEnabled = true;
789    }
790  }
791
792  private endLastValue() {
793    this.value = this.max;
794    if (!this.subBtnStateEffect) {
795      this.subBtnStateEffect = true;
796      this.subOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
797      this.subBtnEnabled = true;
798    }
799  }
800
801  private updateButtonStatus() {
802    if (this.value <= this.min) {
803      if (!this.addBtnStateEffect && this.max != this.min) {
804        this.addBtnStateEffect = true;
805        this.addOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
806        this.addBtnEnabled = true;
807      }
808      this.subOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
809      this.subBtnStateEffect = false;
810      this.subBtnEnabled = false;
811    }
812    if (this.value >= this.max) {
813      if (!this.subBtnStateEffect && this.max != this.min) {
814        this.subBtnStateEffect = true;
815        this.subOpacity = CounterResource.COUNTER_BUTTON_INITIAL_OPACITY;
816        this.subBtnEnabled = true;
817      }
818      this.addOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
819      this.addBtnStateEffect = false;
820      this.addBtnEnabled = false;
821    }
822  }
823
824  private getValue() {
825    if (this.inputValue == undefined) {
826      this.inputValue = ''
827    }
828    return this.hasInputText1 ? this.inputValue : this.value.toString();
829  }
830
831  private getValueLength() {
832    return this.getValue().length > 0 ? this.getValue().length : 1;
833  }
834
835  private getYear() {
836    let year: string = this.year.toString();
837    if (year.length === 1) {
838      year = '000' + year;
839    } else if (year.length === 2) {
840      year = '00' + year;
841    } else if (year.length === 3) {
842      year = '0' + year;
843    } else {
844      year = year;
845    }
846    return year;
847  }
848
849  private focusWithTarget(key: string) {
850    setTimeout(() => {
851      var res = focusControl.requestFocus(key);
852      if (res) {
853        console.log('Request success');
854      } else {
855        console.log('Request failed');
856      }
857    });
858  }
859
860  private focusCurrentText(text: FocusText) {
861    if (text === FocusText.TEXT1) {
862      if (this.focusText === FocusText.NONE) {
863        this.focusText = FocusText.TEXT1;
864      }
865      if (!this.hasFocusText1) {
866        this.hasFocusText1 = true;
867      }
868    } else if (text === FocusText.TEXT2) {
869      if (this.focusText === FocusText.NONE) {
870        this.focusText = FocusText.TEXT2;
871      }
872      if (!this.hasFocusText2) {
873        this.hasFocusText2 = true;
874      }
875    } else if (text === FocusText.TEXT3) {
876      if (this.focusText === FocusText.NONE) {
877        this.focusText = FocusText.TEXT3;
878      }
879      if (!this.hasFocusText3) {
880        this.hasFocusText3 = true;
881      }
882    } else {
883
884    }
885  }
886
887  private getMaxLength() {
888    if (this.max.toString().length > this.min.toString().length) {
889      return this.max.toString().length + 1;
890    } else {
891      return this.min.toString().length + 1;
892    }
893  }
894
895  private resourceToVp(value: Resource): number {
896    try {
897      if ((value as Resource).id !== -1) {
898        return px2vp(getContext(this).resourceManager.getNumber((value as Resource).id))
899      } else {
900        return px2vp(getContext(this)
901          .resourceManager
902          .getNumberByName(((value.params as string[])[0]).split('.')[2]))
903      }
904    } catch (error) {
905      return CounterResource.COUNTER_LIST_PADDING
906    }
907  }
908
909  build() {
910    if (this.type === CounterType.LIST) {
911      RelativeContainer() {
912        Text(this.numberStyleOptions.label)
913          .direction(this.counterDirection)
914          .fontSize(CounterResource.COUNTER_LIST_LABEL_SIZE)
915          .fontColor(CounterResource.COUNTER_TEXT_COLOR)
916          .margin({
917            start: LengthMetrics.vp(this.resourceToVp(CounterResource.COUNTER_LIST_LEFT_PADDING))
918          })
919          .alignRules({
920            center: { anchor: '__container__', align: VerticalAlign.Center },
921            start: { anchor: '__container__', align: HorizontalAlign.Start },
922            end: { anchor: 'Row1', align: HorizontalAlign.Start }
923          })
924          .id('Text')
925        Row() {
926          Stack() {
927            Image(CounterResource.BUTTON_SUB_ICON)
928              .direction(this.counterDirection)
929              .width(CounterResource.COUNTER_LIST_BUTTON_ICON_SIZE)
930              .height(CounterResource.COUNTER_LIST_BUTTON_ICON_SIZE)
931              .fillColor(CounterResource.BUTTON_ICON_COLOR)
932              .opacity(this.subOpacity)
933            Button({ type: ButtonType.Circle, stateEffect: this.subBtnStateEffect })
934              .direction(this.counterDirection)
935              .width(CounterResource.COUNTER_LIST_BUTTON_SIZE)
936              .height(CounterResource.COUNTER_LIST_BUTTON_SIZE)
937              .responseRegion({
938                x: CounterResource.COUNTER_LIST_BUTTON_HOT_SPOT_X,
939                y: CounterResource.COUNTER_LIST_BUTTON_HOT_SPOT_Y,
940                width: '150%',
941                height: '150%'
942              })
943              .groupDefaultFocus(true)
944              .backgroundColor(CounterResource.BUTTON_BACKGROUD_COLOR)
945              .opacity(this.subOpacity)
946              .enabled(this.subBtnEnabled)
947              .key('ListSubButton' + this.timeStamp.toString())
948              .onKeyEvent((event: KeyEvent) => {
949                this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_FOCUSED_WIDTH;
950                if (event.keyCode === CounterConstant.KEYCODE_ESC) {
951                  this.resetFocusButton();
952                  event.stopPropagation();
953                }
954                if (event.type === KeyType.Down &&
955                  event.keyCode === CounterConstant.KEYCODE_MOVE_HOME) {
956                  event.stopPropagation();
957                  this.homeFirstValue();
958                  this.focusWithTarget('ListAddButton' + this.timeStamp.toString());
959                }
960                if (event.type === KeyType.Down &&
961                  event.keyCode === CounterConstant.KEYCODE_MOVE_END) {
962                  event.stopPropagation();
963                  if (this.addBtnStateEffect) {
964                    this.addBtnStateEffect = false;
965                    this.addOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
966                    this.addBtnEnabled = false;
967                  }
968                  this.endLastValue();
969                  this.focusWithTarget('ListAddButton' + this.timeStamp.toString());
970                }
971              })
972              .onClick((event: ClickEvent) => {
973                this.subValue();
974                this.onChange?.(this.value);
975                if (event.source === SourceType.Mouse ||
976                  event.source === SourceType.TouchScreen) {
977                  this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
978                }
979              })
980              .gesture(
981                LongPressGesture({ repeat: true })
982                  .onAction((event: GestureEvent) => {
983                    if (event.repeat) {
984                      this.subValue();
985                      this.onChange?.(this.value);
986                    }
987                    this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
988                  })
989              )
990              .hoverEffect(this.choverEffect)
991              .onHover((isHover: boolean) => {
992                this.onHoverDecrease && this.onHoverDecrease(isHover);
993              })
994              .focusable(this.focusEnable)
995              .onFocus(() => {
996                this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_FOCUSED_WIDTH;
997                this.onFocusDecrease && this.onFocusDecrease();
998                this.updateButtonStatus();
999              })
1000              .onBlur(() => {
1001                this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1002                this.onBlurDecrease && this.onBlurDecrease();
1003              })
1004          }
1005          .direction(this.counterDirection)
1006          .width(CounterResource.COUNTER_LIST_BUTTON_SIZE)
1007          .height(CounterResource.COUNTER_LIST_BUTTON_SIZE)
1008          .borderRadius(CounterResource.COUNTER_LIST_BUTTON_RADIUS)
1009          .borderWidth(this.subBtnFocusWidh)
1010          .borderColor(CounterResource.BUTTON_BORDER_FOCUSED_COLOR)
1011          .clip(true)
1012
1013          if (this.hasTextWidth) {
1014            Text(this.value.toString())
1015              .direction(this.counterDirection)
1016              .width(this.textWidth.toString())
1017              .textAlign(TextAlign.Center)
1018              .fontSize(CounterResource.COUNTER_LIST_NUMBER_SIZE)
1019              .fontColor(CounterResource.COUNTER_TEXT_COLOR)
1020              .margin({
1021                start: LengthMetrics.vp(CounterResource.COUNTER_LIST_BUTTON_TEXT_MARGIN),
1022                end: LengthMetrics.vp(CounterResource.COUNTER_LIST_BUTTON_TEXT_MARGIN)
1023              })
1024          } else {
1025            Text(this.value.toString())
1026              .direction(this.counterDirection)
1027              .textAlign(TextAlign.Center)
1028              .fontSize(CounterResource.COUNTER_LIST_NUMBER_SIZE)
1029              .fontColor(CounterResource.COUNTER_TEXT_COLOR)
1030              .margin({
1031                start: LengthMetrics.vp(CounterResource.COUNTER_LIST_BUTTON_TEXT_MARGIN),
1032                end: LengthMetrics.vp(CounterResource.COUNTER_LIST_BUTTON_TEXT_MARGIN)
1033              })
1034          }
1035
1036          Stack() {
1037            Image(CounterResource.BUTTON_ADD_ICON)
1038              .direction(this.counterDirection)
1039              .width(CounterResource.COUNTER_LIST_BUTTON_ICON_SIZE)
1040              .height(CounterResource.COUNTER_LIST_BUTTON_ICON_SIZE)
1041              .fillColor(CounterResource.BUTTON_ICON_COLOR)
1042              .opacity(this.addOpacity)
1043            Button({ type: ButtonType.Circle, stateEffect: this.addBtnStateEffect })
1044              .direction(this.counterDirection)
1045              .width(CounterResource.COUNTER_LIST_BUTTON_SIZE)
1046              .height(CounterResource.COUNTER_LIST_BUTTON_SIZE)
1047              .responseRegion({
1048                x: CounterResource.COUNTER_LIST_BUTTON_HOT_SPOT_X,
1049                y: CounterResource.COUNTER_LIST_BUTTON_HOT_SPOT_Y,
1050                width: '150%',
1051                height: '150%'
1052              })
1053              .backgroundColor(CounterResource.BUTTON_BACKGROUD_COLOR)
1054              .opacity(this.addOpacity)
1055              .enabled(this.addBtnEnabled)
1056              .key('ListAddButton' + this.timeStamp.toString())
1057              .onKeyEvent((event: KeyEvent) => {
1058                this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_FOCUSED_WIDTH
1059                if (event.keyCode === CounterConstant.KEYCODE_ESC) {
1060                  this.resetFocusButton();
1061                  event.stopPropagation();
1062                }
1063                if (event.type === KeyType.Down &&
1064                  event.keyCode === CounterConstant.KEYCODE_MOVE_HOME) {
1065                  event.stopPropagation();
1066                  this.homeFirstValue();
1067                  if (this.subBtnStateEffect) {
1068                    this.subBtnStateEffect = false;
1069                    this.subOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
1070                    this.subBtnEnabled = false;
1071                  }
1072                  this.focusWithTarget('ListAddButton' + this.timeStamp.toString());
1073                }
1074                if (event.type === KeyType.Down &&
1075                  event.keyCode === CounterConstant.KEYCODE_MOVE_END) {
1076                  event.stopPropagation();
1077                  this.endLastValue();
1078                  this.focusWithTarget('ListSubButton' + this.timeStamp.toString());
1079                }
1080              })
1081              .onClick((event: ClickEvent) => {
1082                this.addValue();
1083                this.onChange?.(this.value);
1084                if (event.source === SourceType.Mouse ||
1085                  event.source === SourceType.TouchScreen) {
1086                  this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1087                }
1088              })
1089              .gesture(
1090                LongPressGesture({ repeat: true })
1091                  .onAction((event: GestureEvent) => {
1092                    if (event.repeat) {
1093                      this.addValue();
1094                      this.onChange?.(this.value);
1095                    }
1096                    this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1097                  })
1098              )
1099              .hoverEffect(this.choverEffect)
1100              .onHover((isHover: boolean) => {
1101                this.onHoverIncrease && this.onHoverIncrease(isHover);
1102              })
1103              .focusable(this.focusEnable)
1104              .onFocus(() => {
1105                this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_FOCUSED_WIDTH;
1106                this.onFocusIncrease && this.onFocusIncrease();
1107                this.updateButtonStatus();
1108              })
1109              .onBlur(() => {
1110                this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1111                this.onBlurIncrease && this.onBlurIncrease();
1112              })
1113          }
1114          .direction(this.counterDirection)
1115          .width(CounterResource.COUNTER_LIST_BUTTON_SIZE)
1116          .height(CounterResource.COUNTER_LIST_BUTTON_SIZE)
1117          .borderRadius(CounterResource.COUNTER_LIST_BUTTON_RADIUS)
1118          .borderWidth(this.addBtnFocusWidh)
1119          .borderColor(CounterResource.BUTTON_BORDER_FOCUSED_COLOR)
1120          .clip(true)
1121        }
1122        .direction(this.counterDirection)
1123        .height(CounterResource.COUNTER_LIST_BUTTON_SIZE)
1124        .margin({
1125          end: LengthMetrics.vp(this.resourceToVp(CounterResource.COUNTER_LIST_RIGHT_PADDING))
1126        })
1127        .alignRules({
1128          center: { anchor: '__container__', align: VerticalAlign.Center },
1129          end: { anchor: '__container__', align: HorizontalAlign.End }
1130        })
1131        .tabIndex(0)
1132        .id('Row1')
1133      }
1134      .direction(this.counterDirection)
1135      .width('100%')
1136      .height(CounterResource.COUNTER_LIST_HEIGHT)
1137    } else if (this.type === CounterType.COMPACT) {
1138      Column() {
1139        Row() {
1140          Stack() {
1141            Image(CounterResource.BUTTON_SUB_ICON)
1142              .direction(this.counterDirection)
1143              .width(CounterResource.COUNTER_COMPACT_BUTTON_ICON_SIZE)
1144              .height(CounterResource.COUNTER_COMPACT_BUTTON_ICON_SIZE)
1145              .fillColor(CounterResource.BUTTON_ICON_COLOR)
1146              .opacity(this.subOpacity)
1147            Button({ type: ButtonType.Circle, stateEffect: this.subBtnStateEffect })
1148              .direction(this.counterDirection)
1149              .width(CounterResource.COUNTER_COMPACT_BUTTON_SIZE)
1150              .height(CounterResource.COUNTER_COMPACT_BUTTON_SIZE)
1151              .backgroundColor(CounterResource.BUTTON_BACKGROUD_COLOR)
1152              .opacity(this.subOpacity)
1153              .enabled(this.subBtnEnabled)
1154              .key('CompactSubButton' + this.timeStamp.toString())
1155              .onKeyEvent((event: KeyEvent) => {
1156                this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_FOCUSED_WIDTH
1157                if (event.keyCode === CounterConstant.KEYCODE_ESC) {
1158                  this.resetFocusButton();
1159                  event.stopPropagation();
1160                }
1161                if (event.type === KeyType.Down &&
1162                  event.keyCode === CounterConstant.KEYCODE_MOVE_HOME) {
1163                  event.stopPropagation();
1164                  this.homeFirstValue();
1165                  this.focusWithTarget('CompactAddButton' + this.timeStamp.toString());
1166                }
1167                if (event.type === KeyType.Down &&
1168                  event.keyCode === CounterConstant.KEYCODE_MOVE_END) {
1169                  event.stopPropagation();
1170                  this.endLastValue();
1171                  if (this.addBtnStateEffect) {
1172                    this.addBtnStateEffect = false;
1173                    this.addOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
1174                    this.addBtnEnabled = false;
1175                  }
1176                  this.focusWithTarget('CompactSubButton' + this.timeStamp.toString());
1177                }
1178              })
1179              .onClick((event: ClickEvent) => {
1180                this.subValue();
1181                this.onChange?.(this.value);
1182                if (event.source === SourceType.Mouse ||
1183                  event.source === SourceType.TouchScreen) {
1184                  this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1185                }
1186              })
1187              .gesture(
1188                LongPressGesture({ repeat: true })
1189                  .onAction((event: GestureEvent) => {
1190                    if (event.repeat) {
1191                      this.subValue();
1192                      this.onChange?.(this.value);
1193                    }
1194                    if (event.source === SourceType.Mouse ||
1195                      event.source === SourceType.TouchScreen) {
1196                      this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1197                    }
1198                  })
1199              )
1200              .hoverEffect(this.choverEffect)
1201              .onHover((isHover: boolean) => {
1202                this.onHoverDecrease && this.onHoverDecrease(isHover);
1203              })
1204              .focusable(this.focusEnable)
1205              .groupDefaultFocus(true)
1206              .onFocus(() => {
1207                this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_FOCUSED_WIDTH;
1208                this.onFocusDecrease && this.onFocusDecrease();
1209                this.updateButtonStatus();
1210              })
1211              .onBlur(() => {
1212                this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1213                this.onBlurDecrease && this.onBlurDecrease();
1214              })
1215          }
1216          .width(CounterResource.COUNTER_COMPACT_BUTTON_SIZE)
1217          .height(CounterResource.COUNTER_COMPACT_BUTTON_SIZE)
1218          .borderRadius(CounterResource.COUNTER_COMPACT_BUTTON_RADIUS)
1219          .borderWidth(this.subBtnFocusWidh)
1220          .borderColor(CounterResource.BUTTON_BORDER_FOCUSED_COLOR)
1221          .margin({ start: LengthMetrics.vp(1) })
1222          .clip(true)
1223
1224          if (this.hasTextWidth) {
1225            Text(this.value.toString())
1226              .textAlign(TextAlign.Center)
1227              .fontSize(CounterResource.COUNTER_NUMBER_SIZE)
1228              .fontColor(CounterResource.COUNTER_TEXT_COLOR)
1229              .width(this.textWidth.toString())
1230              .margin({
1231                start: LengthMetrics.vp(CounterResource.COUNTER_COMPACT_BUTTON_TEXT_MARGIN),
1232                end: LengthMetrics.vp(CounterResource.COUNTER_COMPACT_BUTTON_TEXT_MARGIN)
1233              })
1234          } else {
1235            Text(this.value.toString())
1236              .direction(this.counterDirection)
1237              .textAlign(TextAlign.Center)
1238              .fontSize(CounterResource.COUNTER_NUMBER_SIZE)
1239              .fontColor(CounterResource.COUNTER_TEXT_COLOR)
1240              .margin({
1241                start: LengthMetrics.vp(CounterResource.COUNTER_COMPACT_BUTTON_TEXT_MARGIN),
1242                end: LengthMetrics.vp(CounterResource.COUNTER_COMPACT_BUTTON_TEXT_MARGIN)
1243              })
1244          }
1245
1246          Stack() {
1247            Image(CounterResource.BUTTON_ADD_ICON)
1248              .direction(this.counterDirection)
1249              .width(CounterResource.COUNTER_COMPACT_BUTTON_ICON_SIZE)
1250              .height(CounterResource.COUNTER_COMPACT_BUTTON_ICON_SIZE)
1251              .fillColor(CounterResource.BUTTON_ICON_COLOR)
1252              .opacity(this.addOpacity)
1253            Button({ type: ButtonType.Circle, stateEffect: this.addBtnStateEffect })
1254              .direction(this.counterDirection)
1255              .width(CounterResource.COUNTER_COMPACT_BUTTON_SIZE)
1256              .height(CounterResource.COUNTER_COMPACT_BUTTON_SIZE)
1257              .backgroundColor(CounterResource.BUTTON_BACKGROUD_COLOR)
1258              .opacity(this.addOpacity)
1259              .enabled(this.addBtnEnabled)
1260              .key('CompactAddButton' + this.timeStamp.toString())
1261              .onKeyEvent((event: KeyEvent) => {
1262                this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_FOCUSED_WIDTH
1263                if (event.keyCode === CounterConstant.KEYCODE_ESC) {
1264                  this.resetFocusButton();
1265                  event.stopPropagation();
1266                }
1267                if (event.type === KeyType.Down &&
1268                  event.keyCode === CounterConstant.KEYCODE_MOVE_HOME) {
1269                  event.stopPropagation();
1270                  this.homeFirstValue();
1271                  if (this.subBtnStateEffect) {
1272                    this.subBtnStateEffect = false;
1273                    this.subOpacity = CounterResource.COUNTER_BUTTON_DISABLE_OPACITY;
1274                    this.subBtnEnabled = false;
1275                  }
1276                  this.focusWithTarget('CompactAddButton' + this.timeStamp.toString());
1277                }
1278                if (event.type === KeyType.Down &&
1279                  event.keyCode === CounterConstant.KEYCODE_MOVE_END) {
1280                  event.stopPropagation();
1281                  this.endLastValue();
1282                  this.focusWithTarget('CompactSubButton' + this.timeStamp.toString());
1283                }
1284              })
1285              .onClick((event: ClickEvent) => {
1286                this.addValue();
1287                this.onChange?.(this.value);
1288                if (event.source === SourceType.Mouse ||
1289                  event.source === SourceType.TouchScreen) {
1290                  this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1291                }
1292              })
1293              .gesture(
1294                LongPressGesture({ repeat: true })
1295                  .onAction((event: GestureEvent) => {
1296                    if (event.repeat) {
1297                      this.addValue();
1298                      this.onChange?.(this.value);
1299                    }
1300                    if (event.source === SourceType.Mouse ||
1301                      event.source === SourceType.TouchScreen) {
1302                      this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1303                    }
1304                  })
1305              )
1306              .hoverEffect(this.choverEffect)
1307              .onHover((isHover: boolean) => {
1308                this.onHoverIncrease && this.onHoverIncrease(isHover);
1309              })
1310              .focusable(this.focusEnable)
1311              .onFocus(() => {
1312                this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_FOCUSED_WIDTH;
1313                this.onFocusIncrease && this.onFocusIncrease();
1314                this.updateButtonStatus();
1315              })
1316              .onBlur(() => {
1317                this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1318                this.onBlurIncrease && this.onBlurIncrease();
1319              })
1320          }
1321          .direction(this.counterDirection)
1322          .width(CounterResource.COUNTER_COMPACT_BUTTON_SIZE)
1323          .height(CounterResource.COUNTER_COMPACT_BUTTON_SIZE)
1324          .borderRadius(CounterResource.COUNTER_COMPACT_BUTTON_RADIUS)
1325          .borderWidth(this.addBtnFocusWidh)
1326          .borderColor(CounterResource.BUTTON_BORDER_FOCUSED_COLOR)
1327          .margin({ end: LengthMetrics.vp(1) })
1328          .clip(true)
1329        }
1330        .direction(this.counterDirection)
1331        .tabIndex(0)
1332        .height(CounterResource.COUNTER_COMPACT_CONTAINER_HEIGHT)
1333        .align(Alignment.Center)
1334        .borderWidth(CounterResource.COUNTER_BORDER_WIDTH)
1335        .borderColor(CounterResource.COUNTER_BORDER_COLOR)
1336        .borderRadius(CounterResource.COUNTER_COMPACT_CONTAINER_RADIUS)
1337
1338        Text(this.numberStyleOptions.label)
1339          .direction(this.counterDirection)
1340          .margin({ top: CounterResource.COUNTER_COMPACT_CONTAINER_LABEL_DISTANCE })
1341          .fontSize(CounterResource.COUNTER_COMPACT_LABEL_SIZE)
1342          .fontColor(CounterResource.COUNTER_TEXT_COLOR)
1343          .align(Alignment.Top)
1344      }
1345    } else if (this.type === CounterType.INLINE) {
1346      Row() {
1347        if (this.hasTextWidth) {
1348          RelativeContainer() {
1349            TextInput({
1350              text: this.hasInputText1 ? this.inputValue : this.value.toString(),
1351              controller: this.controller1
1352            })
1353              .alignRules({
1354                center: { anchor: '__container__', align: VerticalAlign.Center },
1355                middle: { anchor: '__container__', align: HorizontalAlign.Center }
1356              })
1357              .width(Math.min(this.getValueLength() * 9.6, this.textWidth))
1358              .height('20vp')
1359              .padding(0)
1360              .borderRadius(0)
1361              .textAlign(TextAlign.Center)
1362              .type(InputType.PhoneNumber)
1363              .caretColor(Color.Transparent)
1364              .copyOption(CopyOptions.None)
1365              .fontSize(CounterResource.COUNTER_NUMBER_SIZE)
1366              .fontWeight(FontWeight.Medium)
1367              .fontColor(this.hasFocusText1 ? Color.White : CounterResource.COUNTER_TEXT_COLOR)
1368              .maxLength(this.getMaxLength())
1369              .backgroundColor(this.hasFocusText1 ? CounterResource.BUTTON_BORDER_FOCUSED_COLOR : Color.Transparent)
1370              .key('InlineTextInput' + this.timeStamp.toString())
1371              .onKeyEvent((event: KeyEvent) => {
1372                this.focusCurrentText(FocusText.TEXT1)
1373                if (event.keyCode === CounterConstant.KEYCODE_ESC) {
1374                  this.resetFocusText();
1375                  event.stopPropagation();
1376                }
1377                if (event.type === KeyType.Down &&
1378                  event.keyCode === CounterConstant.KEYCODE_DPAD_UP) {
1379                  this.addValue();
1380                  event.stopPropagation();
1381                }
1382                if (event.type === KeyType.Down &&
1383                  event.keyCode === CounterConstant.KEYCODE_MOVE_HOME) {
1384                  event.stopPropagation();
1385                  this.focusWithTarget('InlineTextInput' + this.timeStamp.toString());
1386                }
1387                if (event.type === KeyType.Down &&
1388                  event.keyCode === CounterConstant.KEYCODE_MOVE_END) {
1389                  event.stopPropagation();
1390                  this.focusWithTarget('InlineTextInput' + this.timeStamp.toString());
1391                }
1392                if (event.type === KeyType.Down &&
1393                  event.keyCode === CounterConstant.KEYCODE_DPAD_DOWN) {
1394                  this.subValue();
1395                  event.stopPropagation();
1396                }
1397                if (event.type === KeyType.Down &&
1398                  event.keyCode === CounterConstant.KEYCODE_DPAD_LEFT) {
1399                  this.focusWithTarget('InlineTextInput' + this.timeStamp.toString());
1400                  event.stopPropagation();
1401                }
1402                if (event.type === KeyType.Down &&
1403                  event.keyCode === CounterConstant.KEYCODE_DPAD_RIGHT) {
1404                  this.focusWithTarget('InlineTextInput' + this.timeStamp.toString());
1405                  event.stopPropagation();
1406                }
1407              })
1408              .onChange((value: string) => {
1409                this.inputValue = value;
1410                for (let i = 0; i < value.length; i++) {
1411                  let c = value[i];
1412                  if (c === '+' || c === '*' || c === '#') {
1413                    this.value -= 1;
1414                    this.value += 1;
1415                    this.inputValue = this.value.toString();
1416                    return;
1417                  }
1418                  if (c === '-' && i !== 0) {
1419                    this.inputValue = c;
1420                    break;
1421                  }
1422                }
1423
1424                this.hasInputText1 = true;
1425                let c = value[value.length - 1];
1426                if (value.length === this.getMaxLength()) {
1427                  this.inputValue = c;
1428                }
1429                if (this.timeoutID1 !== -1) {
1430                  clearTimeout(this.timeoutID1);
1431                  this.timeoutID1 = -1;
1432                }
1433                if (this.inputValue !== '' && Number(this.inputValue) <= this.max &&
1434                  Number(this.inputValue) >= this.min) {
1435                  this.value = Number(this.inputValue);
1436                  this.onChange?.(this.value);
1437                  this.hasInputText1 = false;
1438                } else {
1439                  if (Number(this.inputValue) > this.max ||
1440                    (Number(this.inputValue) < this.min &&
1441                      this.inputValue.length <= this.min.toString().length)) {
1442                    this.inputValue = c;
1443                  }
1444                  if (value.length < this.getMaxLength()) {
1445                    this.timeoutID1 = setTimeout(() => {
1446                      if (this.inputValue !== '' && Number(this.inputValue) <= this.max &&
1447                        Number(this.inputValue) >= this.min) {
1448                        this.value = Number(this.inputValue);
1449                        this.onChange?.(this.value);
1450                      }
1451                      this.inputValue = this.value.toString();
1452                      this.hasInputText1 = false;
1453                      this.updateInlineEnableSate();
1454                    }, 1500);
1455                  }
1456                }
1457                this.updateInlineEnableSate();
1458              })
1459              .onSubmit((enterKey: EnterKeyType) => {
1460                if (this.timeoutID1 != -1) {
1461                  clearTimeout(this.timeoutID1);
1462                  this.timeoutID1 = -1;
1463                }
1464                this.hasInputText1 = false;
1465                this.value -= 1;
1466                if (Number(this.inputValue) >= this.min && Number(this.inputValue) <= this.max) {
1467                  this.value = Number(this.inputValue);
1468                  this.onChange?.(this.value);
1469                  this.updateInlineEnableSate();
1470                } else {
1471                  this.value += 1;
1472                  this.inputValue = this.value.toString();
1473                }
1474              })
1475              .focusable(true)
1476              .focusOnTouch(true)
1477              .onFocus(() => {
1478                this.focusText = FocusText.TEXT1;
1479                this.hasFocusText1 = true;
1480                this.controller1.caretPosition(this.value.toString().length);
1481              })
1482              .onBlur(() => {
1483                this.focusText = FocusText.NONE;
1484                this.hasFocusText1 = false;
1485              })
1486              .onClick((event: ClickEvent) => {
1487                this.focusText = FocusText.TEXT1;
1488                this.hasFocusText1 = true;
1489                this.focusWithTarget('InlineTextInput' + this.timeStamp.toString());
1490                this.controller1.caretPosition(this.value.toString().length);
1491              })
1492          }
1493          .direction(this.counterDirection)
1494          .margin({
1495            start: LengthMetrics.vp(CounterResource.COUNTER_INLINE_INPUT_TEXT_MARGIN),
1496            end: LengthMetrics.vp(CounterResource.COUNTER_INLINE_INPUT_TEXT_MARGIN)
1497          })
1498          .height('100%')
1499          .width(this.textWidth)
1500        } else {
1501          Row() {
1502            TextInput({
1503              text: this.hasInputText1 ? this.inputValue : this.value.toString(),
1504              controller: this.controller1
1505            })
1506              .direction(this.counterDirection)
1507              .width(this.getValueLength() * 9.6)
1508              .height('20vp')
1509              .padding(0)
1510              .borderRadius(0)
1511              .textAlign(TextAlign.Center)
1512              .type(InputType.PhoneNumber)
1513              .caretColor(Color.Transparent)
1514              .copyOption(CopyOptions.None)
1515              .fontSize(CounterResource.COUNTER_NUMBER_SIZE)
1516              .fontWeight(FontWeight.Medium)
1517              .fontColor(this.hasFocusText1 ? Color.White : CounterResource.COUNTER_TEXT_COLOR)
1518              .maxLength(this.getMaxLength())
1519              .backgroundColor(this.hasFocusText1 ? CounterResource.BUTTON_BORDER_FOCUSED_COLOR : Color.Transparent)
1520              .key('InlineTextInput' + this.timeStamp.toString())
1521              .onKeyEvent((event: KeyEvent) => {
1522                this.focusCurrentText(FocusText.TEXT1)
1523                if (event.keyCode === CounterConstant.KEYCODE_ESC) {
1524                  this.resetFocusText();
1525                  event.stopPropagation();
1526                }
1527                if (event.type === KeyType.Down &&
1528                  event.keyCode === CounterConstant.KEYCODE_DPAD_UP) {
1529                  this.addValue();
1530                  event.stopPropagation();
1531                }
1532                if (event.type === KeyType.Down &&
1533                  event.keyCode === CounterConstant.KEYCODE_DPAD_DOWN) {
1534                  this.subValue();
1535                  event.stopPropagation();
1536                }
1537                if (event.type === KeyType.Down &&
1538                  event.keyCode === CounterConstant.KEYCODE_DPAD_LEFT) {
1539                  this.focusWithTarget('InlineTextInput' + this.timeStamp.toString());
1540                  event.stopPropagation();
1541                }
1542                if (event.type === KeyType.Down &&
1543                  event.keyCode === CounterConstant.KEYCODE_DPAD_RIGHT) {
1544                  this.focusWithTarget('InlineTextInput' + this.timeStamp.toString());
1545                  event.stopPropagation();
1546                }
1547              })
1548              .onChange((value: string) => {
1549                this.inputValue = value;
1550                for (let i = 0; i < value.length; i++) {
1551                  let c = value[i];
1552                  if (c === '+' || c === '*' || c === '#') {
1553                    this.value -= 1;
1554                    this.value += 1;
1555                    this.inputValue = this.value.toString();
1556                    return;
1557                  }
1558                  if (c === '-' && i !== 0) {
1559                    this.inputValue = c;
1560                    break;
1561                  }
1562                }
1563
1564                this.hasInputText1 = true;
1565                let c = value[value.length -1];
1566                if (value.length === this.getMaxLength()) {
1567                  this.inputValue = c;
1568                }
1569                if (this.timeoutID1 !== -1) {
1570                  clearTimeout(this.timeoutID1);
1571                  this.timeoutID1 = -1;
1572                }
1573                if (this.inputValue !== '' && Number(this.inputValue) <= this.max &&
1574                  Number(this.inputValue) >= this.min) {
1575                  this.value = Number(this.inputValue);
1576                  this.onChange?.(this.value);
1577                  this.hasInputText1 = false;
1578                } else {
1579                  if (Number(this.inputValue) > this.max ||
1580                    (Number(this.inputValue) < this.min &&
1581                      this.inputValue.length <= this.min.toString().length)) {
1582                    this.inputValue = c;
1583                  }
1584                  if (value.length < this.getMaxLength()) {
1585                    this.timeoutID1 = setTimeout(() => {
1586                      if (this.inputValue !== '' && Number(this.inputValue) <= this.max &&
1587                        Number(this.inputValue) >= this.min) {
1588                        this.value = Number(this.inputValue);
1589                        this.onChange?.(this.value);
1590                      }
1591                      this.inputValue = this.value.toString()
1592                      this.hasInputText1 = false;
1593                      this.updateInlineEnableSate();
1594                    }, 1500);
1595                  }
1596                }
1597                this.updateInlineEnableSate();
1598              })
1599              .onSubmit((enterKey: EnterKeyType) => {
1600                if (this.timeoutID1 !== -1) {
1601                  clearTimeout(this.timeoutID1);
1602                  this.timeoutID1 = -1;
1603                }
1604                this.hasInputText1 = false;
1605                this.value -= 1;
1606                if (Number(this.inputValue) >= this.min && Number(this.inputValue) <= this.max) {
1607                  this.value = Number(this.inputValue);
1608                  this.onChange?.(this.value);
1609                  this.updateInlineEnableSate();
1610                } else {
1611                  this.value += 1;
1612                  this.inputValue = this.value.toString();
1613                }
1614              })
1615              .focusable(true)
1616              .focusOnTouch(true)
1617              .onFocus(() => {
1618                this.focusText = FocusText.TEXT1;
1619                this.hasFocusText1 = true;
1620                this.controller1.caretPosition(this.value.toString().length);
1621              })
1622              .onBlur(() => {
1623                this.focusText = FocusText.NONE;
1624                this.hasFocusText1 = false;
1625              })
1626              .onClick((event: ClickEvent) => {
1627                this.focusText = FocusText.TEXT1;
1628                this.hasFocusText1 = true;
1629                this.focusWithTarget('InlineTextInput' + this.timeStamp.toString());
1630                this.controller1.caretPosition(this.value.toString().length);
1631              })
1632          }
1633          .direction(this.counterDirection)
1634          .margin({
1635            start: LengthMetrics.vp(CounterResource.COUNTER_INLINE_INPUT_TEXT_MARGIN),
1636            end: LengthMetrics.vp(CounterResource.COUNTER_INLINE_INPUT_TEXT_MARGIN)
1637          })
1638        }
1639
1640        Column() {
1641          Stack() {
1642            Rect()
1643              .direction(this.counterDirection)
1644              .width(CounterResource.COUNTER_INLINE_FOCUS_BORDER_WIDTH)
1645              .height(CounterResource.COUNTER_INLINE_FOCUS_BORDER_HEIGHT)
1646              .radius([
1647                ['0vp', '0vp'],
1648                [CounterResource.COUNTER_INLINE_RADIUS, CounterResource.COUNTER_INLINE_RADIUS],
1649                ['0vp', '0vp'],
1650                ['0vp', '0vp']])
1651              .strokeWidth(this.addBtnFocusWidh)
1652              .stroke(CounterResource.BUTTON_BORDER_FOCUSED_COLOR)
1653              .margin({ end: LengthMetrics.vp(2) })
1654              .fillOpacity(0)
1655            Image(CounterResource.BUTTON_ARROW_UP)
1656              .direction(this.counterDirection)
1657              .width(CounterResource.COUNTER_INLINE_BUTTON_ICON_WIDTH)
1658              .height(CounterResource.COUNTER_INLINE_BUTTON_ICON_HEIGHT)
1659              .fillColor(CounterResource.BUTTON_ICON_COLOR)
1660              .opacity(this.addOpacity)
1661
1662            Button({ type: ButtonType.Normal, stateEffect: this.addBtnStateEffect })
1663              .direction(this.counterDirection)
1664              .width(CounterResource.COUNTER_INLINE_BUTTON_WIDTH)
1665              .height(CounterResource.COUNTER_INLINE_BUTTON_HEIGHT)
1666              .backgroundColor(Color.Transparent)
1667              .opacity(this.addOpacity)
1668              .enabled(this.addBtnEnabled)
1669              .onClick((event: ClickEvent) => {
1670                this.addValue();
1671                if (event.source === SourceType.Mouse ||
1672                  event.source === SourceType.TouchScreen) {
1673                  this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1674                }
1675              })
1676              .gesture(
1677                LongPressGesture({ repeat: true })
1678                  .onAction((event: GestureEvent) => {
1679                    if (event.repeat) {
1680                      this.addValue();
1681                    }
1682                    this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1683                  })
1684              )
1685              .hoverEffect(this.choverEffect)
1686              .onHover((isHover: boolean) => {
1687                this.onHoverIncrease && this.onHoverIncrease(isHover);
1688              })
1689              .focusable(false)
1690              .onFocus(() => {
1691                this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_FOCUSED_WIDTH;
1692                this.onFocusIncrease && this.onFocusIncrease();
1693              })
1694              .onBlur(() => {
1695                this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1696                this.onBlurIncrease && this.onBlurIncrease();
1697              })
1698          }
1699          .direction(this.counterDirection)
1700          .width(CounterResource.COUNTER_INLINE_BUTTON_WIDTH)
1701          .height(CounterResource.COUNTER_INLINE_BUTTON_HEIGHT)
1702          .padding({ top: '1vp' })
1703          .borderWidth({ bottom: '1vp' })
1704          .borderColor(CounterResource.COUNTER_BORDER_COLOR)
1705          .clip(true)
1706
1707          Stack() {
1708            Rect()
1709              .direction(this.counterDirection)
1710              .width(CounterResource.COUNTER_INLINE_FOCUS_BORDER_WIDTH)
1711              .height(CounterResource.COUNTER_INLINE_FOCUS_BORDER_HEIGHT)
1712              .radius([
1713                ['0vp', '0vp'],
1714                ['0vp', '0vp'],
1715                [CounterResource.COUNTER_INLINE_RADIUS, CounterResource.COUNTER_INLINE_RADIUS],
1716                ['0vp', '0vp']
1717              ])
1718              .strokeWidth(this.subBtnFocusWidh)
1719              .stroke(CounterResource.BUTTON_BORDER_FOCUSED_COLOR)
1720              .margin({ top: LengthMetrics.vp(1), end: LengthMetrics.vp(1), bottom: LengthMetrics.vp(2) })
1721              .fillOpacity(0)
1722            Image(CounterResource.BUTTON_ARROW_DOWN)
1723              .direction(this.counterDirection)
1724              .width(CounterResource.COUNTER_INLINE_BUTTON_ICON_WIDTH)
1725              .height(CounterResource.COUNTER_INLINE_BUTTON_ICON_HEIGHT)
1726              .fillColor(CounterResource.BUTTON_ICON_COLOR)
1727              .opacity(this.subOpacity)
1728            Button({ type: ButtonType.Normal, stateEffect: this.subBtnStateEffect })
1729              .direction(this.counterDirection)
1730              .width(CounterResource.COUNTER_INLINE_BUTTON_WIDTH)
1731              .height(CounterResource.COUNTER_INLINE_BUTTON_HEIGHT)
1732              .backgroundColor(Color.Transparent)
1733              .opacity(this.subOpacity)
1734              .enabled(this.subBtnEnabled)
1735              .onClick((event: ClickEvent) => {
1736                this.subValue();
1737                if (event.source === SourceType.Mouse ||
1738                  event.source === SourceType.TouchScreen) {
1739                  this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1740                }
1741              })
1742              .gesture(
1743                LongPressGesture({ repeat: true })
1744                  .onAction((event: GestureEvent) => {
1745                    if (event.repeat) {
1746                      this.subValue();
1747                    }
1748                    this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1749                  })
1750              )
1751              .hoverEffect(this.choverEffect)
1752              .onHover((isHover: boolean) => {
1753                this.onHoverDecrease && this.onHoverDecrease(isHover);
1754              })
1755              .focusable(false)
1756              .onFocus(() => {
1757                this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_FOCUSED_WIDTH;
1758                this.onFocusDecrease && this.onFocusDecrease();
1759              })
1760              .onBlur(() => {
1761                this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
1762                this.onBlurDecrease && this.onBlurDecrease();
1763              })
1764          }
1765          .direction(this.counterDirection)
1766          .width(CounterResource.COUNTER_INLINE_BUTTON_WIDTH)
1767          .height(CounterResource.COUNTER_INLINE_BUTTON_HEIGHT)
1768          .clip(true)
1769        }
1770        .direction(this.counterDirection)
1771        .width(CounterResource.COUNTER_INLINE_BUTTON_WIDTH)
1772        .height(CounterResource.COUNTER_INLINE_CONTAINER_HEIGHT)
1773        .borderWidth({ start: LengthMetrics.vp(CounterResource.COUNTER_BORDER_WIDTH_NUMBER) })
1774        .borderColor(CounterResource.COUNTER_BORDER_COLOR)
1775      }
1776      .direction(this.counterDirection)
1777      .height(CounterResource.COUNTER_INLINE_CONTAINER_HEIGHT)
1778      .borderWidth(CounterResource.COUNTER_BORDER_WIDTH)
1779      .borderColor(CounterResource.COUNTER_BORDER_COLOR)
1780      .borderRadius(CounterResource.COUNTER_INLINE_RADIUS)
1781      .clip(true)
1782    } else if (this.type === CounterType.INLINE_DATE) {
1783      Row() {
1784        Row() {
1785          TextInput({
1786            text: this.hasInputText1 ? this.inputYear.toString() : this.getYear(),
1787            controller: this.controller1
1788          })
1789            .direction(this.counterDirection)
1790            .type(InputType.Number)
1791            .caretColor(Color.Transparent)
1792            .copyOption(CopyOptions.None)
1793            .fontSize(CounterResource.COUNTER_NUMBER_SIZE)
1794            .fontWeight(FontWeight.Medium)
1795            .fontColor(this.hasFocusText1 ? Color.White : CounterResource.COUNTER_TEXT_COLOR)
1796            .maxLength(5)
1797            .padding(0)
1798            .backgroundColor(this.hasFocusText1 ? CounterResource.BUTTON_BORDER_FOCUSED_COLOR : Color.Transparent)
1799            .width('38vp')
1800            .height('20vp')
1801            .borderRadius(0)
1802            .borderWidth(0)
1803            .key('DateTextInput1' + this.timeStamp.toString())
1804            .onKeyEvent((event: KeyEvent) => {
1805              this.focusCurrentText(FocusText.TEXT1);
1806              if (event.keyCode === CounterConstant.KEYCODE_ESC) {
1807                this.resetFocusText();
1808                event.stopPropagation();
1809              }
1810              if (event.type === KeyType.Down &&
1811                event.keyCode === CounterConstant.KEYCODE_DPAD_UP) {
1812                this.addDate();
1813                event.stopPropagation();
1814              }
1815              if (event.type === KeyType.Down &&
1816                event.keyCode === CounterConstant.KEYCODE_DPAD_DOWN) {
1817                this.subDate();
1818                event.stopPropagation();
1819              }
1820              if (event.type === KeyType.Down &&
1821                event.keyCode === CounterConstant.KEYCODE_MOVE_HOME) {
1822                this.homeFocusText();
1823                event.stopPropagation();
1824              }
1825              if (event.type === KeyType.Down &&
1826                event.keyCode === CounterConstant.KEYCODE_MOVE_END) {
1827                this.endFocusText();
1828                event.stopPropagation();
1829              }
1830              if (event.type === KeyType.Down &&
1831                event.keyCode === CounterConstant.KEYCODE_DPAD_LEFT) {
1832                this.focusWithTarget('DateTextInput1' + this.timeStamp.toString());
1833                event.stopPropagation();
1834              }
1835              if (event.type === KeyType.Down &&
1836                event.keyCode === CounterConstant.KEYCODE_DPAD_RIGHT) {
1837                this.focusWithTarget('DateTextInput2' + this.timeStamp.toString());
1838              }
1839            })
1840            .onChange((value: string) => {
1841              if (value.length !== 4) {
1842                this.hasInputText1 = true;
1843              }
1844              this.inputYear = Number(value)
1845              if (value.length === 5) {
1846                this.inputYear = this.inputYear % 10;
1847              }
1848
1849              if (this.timeoutID1 !== -1) {
1850                clearTimeout(this.timeoutID1);
1851                this.timeoutID1 = -1;
1852              }
1853
1854              this.timeoutID1 = setTimeout(() => {
1855                this.hasInputText1 = false;
1856                this.inputYear = this.year;
1857                this.updateDateEnableSate();
1858                this.updateDay();
1859              }, 1500);
1860
1861              if (this.inputYear >= this.minYear && this.inputYear <= this.maxYear) {
1862                this.year = this.inputYear;
1863                this.updateDateEnableSate();
1864                this.updateDay();
1865              }
1866
1867              if (value.length === 4) {
1868                let date = new DateData(this.year, this.month, this.day);
1869                this.onDateChange?.(date);
1870              }
1871            })
1872            .onSubmit((enterKey: EnterKeyType) => {
1873              if (this.timeoutID1 !== -1) {
1874                clearTimeout(this.timeoutID1);
1875                this.timeoutID1 = -1;
1876              }
1877              this.hasInputText1 = false;
1878              this.year -= 1;
1879              if (this.inputYear >= this.minYear && this.inputYear <= this.maxYear) {
1880                this.year = this.inputYear;
1881              } else {
1882                this.year += 1;
1883                this.inputYear = this.year;
1884              }
1885              this.updateDateEnableSate();
1886              this.updateDay();
1887            })
1888            .tabIndex(0)
1889            .focusOnTouch(true)
1890            .focusable(true)
1891            .onFocus(() => {
1892              this.focusText = FocusText.TEXT1;
1893              this.hasFocusText1 = true;
1894              this.updateDateEnableSate();
1895              this.controller1.caretPosition(this.getYear().length);
1896            })
1897            .onBlur(() => {
1898              this.focusText = FocusText.NONE;
1899              this.hasFocusText1 = false;
1900              this.updateDateEnableSate();
1901            })
1902            .onClick((event: ClickEvent) => {
1903              this.focusText = FocusText.TEXT1;
1904              this.hasFocusText1 = true;
1905              this.updateDateEnableSate();
1906              this.controller1.caretPosition(this.getYear().length);
1907            })
1908          Text('/')
1909            .direction(this.counterDirection)
1910            .textAlign(TextAlign.Center)
1911            .fontSize(CounterResource.COUNTER_NUMBER_SIZE)
1912            .fontColor(CounterResource.COUNTER_TEXT_COLOR)
1913            .width('8vp')
1914          TextInput({
1915            text: this.hasInputText2 ? this.inputMoon.toString() : this.convertNumberToString(this.month),
1916            controller: this.controller2
1917          })
1918            .direction(this.counterDirection)
1919            .type(InputType.Number)
1920            .caretColor(Color.Transparent)
1921            .copyOption(CopyOptions.None)
1922            .fontSize(CounterResource.COUNTER_NUMBER_SIZE)
1923            .fontWeight(FontWeight.Medium)
1924            .fontColor(this.hasFocusText2 ? Color.White : CounterResource.COUNTER_TEXT_COLOR)
1925            .maxLength(3)
1926            .padding(0)
1927            .backgroundColor(this.hasFocusText2 ? CounterResource.BUTTON_BORDER_FOCUSED_COLOR : Color.Transparent)
1928            .width('19vp')
1929            .height('20vp')
1930            .borderRadius(0)
1931            .key('DateTextInput2' + this.timeStamp.toString())
1932            .onKeyEvent((event: KeyEvent) => {
1933              this.focusCurrentText(FocusText.TEXT2)
1934              if (event.keyCode === CounterConstant.KEYCODE_ESC) {
1935                this.resetFocusText();
1936                event.stopPropagation();
1937              }
1938              if (event.type === KeyType.Down &&
1939                event.keyCode === CounterConstant.KEYCODE_DPAD_DOWN) {
1940                this.subDate();
1941                this.updateDay();
1942                event.stopPropagation();
1943              }
1944              if (event.type === KeyType.Down &&
1945                event.keyCode === CounterConstant.KEYCODE_DPAD_UP) {
1946                this.addDate();
1947                this.updateDay();
1948                event.stopPropagation();
1949              }
1950              if (event.type === KeyType.Down &&
1951                event.keyCode === CounterConstant.KEYCODE_MOVE_HOME) {
1952                this.homeFocusText();
1953                event.stopPropagation();
1954              }
1955              if (event.type === KeyType.Down &&
1956                event.keyCode === CounterConstant.KEYCODE_MOVE_END) {
1957                this.endFocusText();
1958                event.stopPropagation();
1959              }
1960              if (event.type === KeyType.Down &&
1961                event.keyCode === CounterConstant.KEYCODE_DPAD_LEFT) {
1962                this.focusWithTarget('DateTextInput1' + this.timeStamp.toString());
1963              }
1964              if (event.type === KeyType.Down &&
1965                event.keyCode === CounterConstant.KEYCODE_DPAD_RIGHT) {
1966                this.focusWithTarget('DateTextInput3' + this.timeStamp.toString());
1967              }
1968
1969              if (event.type === KeyType.Down &&
1970                event.keyCode === CounterConstant.KEYCODE_TAB) {
1971                event.stopPropagation();
1972                this.focusWithTarget('DateTextInput1' + this.timeStamp.toString());
1973              }
1974            })
1975            .onChange((value: string) => {
1976              this.inputMoon = Number(value);
1977              if (value.length !== 2) {
1978                this.hasInputText2 = true;
1979              }
1980              if (value.length === 3) {
1981                this.inputMoon = this.inputMoon % 10;
1982              }
1983              if (this.timeoutID2 !== -1) {
1984                clearTimeout(this.timeoutID2);
1985                this.timeoutID2 = -1;
1986              }
1987
1988              this.timeoutID2 = setTimeout(() => {
1989                this.hasInputText2 = false;
1990                this.month -= 1;
1991                if (this.inputMoon >= 1 && this.inputMoon <= 12) {
1992                  this.month = this.inputMoon;
1993                } else {
1994                  this.month += 1;
1995                  this.inputMoon = this.month;
1996                }
1997                this.updateDay();
1998              }, 1000);
1999
2000              if (value.length === 2) {
2001                this.hasInputText2 = false;
2002                this.month -= 1;
2003                if (this.inputMoon >= 1 && this.inputMoon <= 12) {
2004                  this.month = this.inputMoon;
2005                  let date = new DateData(this.year, this.month, this.day);
2006                  this.onDateChange?.(date);
2007                } else {
2008                  this.month += 1;
2009                  this.inputMoon = this.month;
2010                }
2011                this.updateDay();
2012              }
2013            })
2014            .onSubmit((enterKey: EnterKeyType) => {
2015              if (this.timeoutID2 !== -1) {
2016                clearTimeout(this.timeoutID2);
2017                this.timeoutID2 = -1;
2018              }
2019              this.hasInputText2 = false;
2020              this.month -= 1;
2021              if (this.inputMoon >= 1 && this.inputMoon <= 12) {
2022                this.month = this.inputMoon;
2023                this.updateDay();
2024              } else {
2025                this.month += 1;
2026              }
2027            })
2028            .focusOnTouch(true)
2029            .tabIndex(-1)
2030            .focusable(true)
2031            .onFocus(() => {
2032              this.focusText = FocusText.TEXT2;
2033              this.hasFocusText2 = true;
2034              this.controller2.caretPosition(this.convertNumberToString(this.month).length);
2035            })
2036            .onBlur(() => {
2037              this.focusText = FocusText.NONE
2038              this.hasFocusText2 = false
2039            })
2040            .onClick((event: ClickEvent) => {
2041              this.focusText = FocusText.TEXT2;
2042              this.hasFocusText2 = true;
2043              this.controller2.caretPosition(this.convertNumberToString(this.month).length);
2044            })
2045          Text('/')
2046            .direction(this.counterDirection)
2047            .textAlign(TextAlign.Center)
2048            .fontSize(CounterResource.COUNTER_NUMBER_SIZE)
2049            .fontColor(CounterResource.COUNTER_TEXT_COLOR)
2050            .width('8vp')
2051          TextInput({
2052            text: this.hasInputText3 ? this.inputDay.toString() : this.convertNumberToString(this.day),
2053            controller: this.controller3
2054          })
2055            .direction(this.counterDirection)
2056            .type(InputType.Number)
2057            .caretColor(Color.Transparent)
2058            .copyOption(CopyOptions.None)
2059            .fontSize(CounterResource.COUNTER_NUMBER_SIZE)
2060            .fontWeight(FontWeight.Medium)
2061            .fontColor(this.hasFocusText3 ? Color.White : CounterResource.COUNTER_TEXT_COLOR)
2062            .maxLength(3)
2063            .padding(0)
2064            .backgroundColor(this.hasFocusText3 ? CounterResource.BUTTON_BORDER_FOCUSED_COLOR : Color.Transparent)
2065            .width('19vp')
2066            .height('20vp')
2067            .borderRadius(0)
2068            .key('DateTextInput3' + this.timeStamp.toString())
2069            .onKeyEvent((event: KeyEvent) => {
2070              this.focusCurrentText(FocusText.TEXT3)
2071              if (event.keyCode === CounterConstant.KEYCODE_ESC) {
2072                this.resetFocusText();
2073                event.stopPropagation();
2074              }
2075              if (event.type === KeyType.Down &&
2076                event.keyCode === CounterConstant.KEYCODE_DPAD_DOWN) {
2077                this.subDate();
2078                event.stopPropagation();
2079              }
2080              if (event.type === KeyType.Down &&
2081                event.keyCode === CounterConstant.KEYCODE_DPAD_UP) {
2082                this.addDate();
2083                event.stopPropagation();
2084              }
2085              if (event.type === KeyType.Down &&
2086                event.keyCode === CounterConstant.KEYCODE_MOVE_HOME) {
2087                this.homeFocusText();
2088                event.stopPropagation();
2089              }
2090              if (event.type === KeyType.Down &&
2091                event.keyCode === CounterConstant.KEYCODE_MOVE_END) {
2092                this.endFocusText();
2093                event.stopPropagation();
2094              }
2095              if (event.type === KeyType.Down &&
2096                event.keyCode === CounterConstant.KEYCODE_DPAD_LEFT) {
2097                this.focusWithTarget('DateTextInput2' + this.timeStamp.toString());
2098              }
2099
2100              if (event.type === KeyType.Down &&
2101                event.keyCode === CounterConstant.KEYCODE_DPAD_RIGHT) {
2102                this.focusWithTarget('DateTextInput3' + this.timeStamp.toString());
2103                event.stopPropagation();
2104              }
2105
2106              if (event.type === KeyType.Down &&
2107                event.keyCode === CounterConstant.KEYCODE_TAB) {
2108                event.stopPropagation();
2109                this.focusWithTarget('DateTextInput1' + this.timeStamp.toString());
2110              }
2111            })
2112            .onChange((value: string) => {
2113              this.inputDay = Number(value)
2114              if (value.length !== 2) {
2115                this.hasInputText3 = true;
2116              }
2117              if (value.length === 3) {
2118                this.inputDay = this.inputDay % 10;
2119              }
2120              if (this.timeoutID3 !== -1) {
2121                clearTimeout(this.timeoutID3);
2122                this.timeoutID3 = -1;
2123              }
2124
2125              this.timeoutID3 = setTimeout(() => {
2126                this.hasInputText3 = false;
2127                this.day -= 1;
2128                if (this.inputDay >= 1 && this.inputDay <= this.getDayNumber()) {
2129                  this.day = this.inputDay;
2130                } else {
2131                  this.day += 1;
2132                  this.inputDay = this.day;
2133                }
2134              }, 1000);
2135
2136              if (value.length === 2) {
2137                this.hasInputText3 = false;
2138                this.day -= 1;
2139                if (this.inputDay >= 1 && this.inputDay <= this.getDayNumber()) {
2140                  this.day = this.inputDay;
2141                  let date = new DateData(this.year, this.month, this.day);
2142                  this.onDateChange?.(date);
2143                } else {
2144                  this.day += 1;
2145                  this.inputDay = this.day;
2146                }
2147              }
2148            })
2149            .onSubmit((enterKey: EnterKeyType) => {
2150              if (this.timeoutID3 !== -1) {
2151                clearTimeout(this.timeoutID3);
2152                this.timeoutID3 = -1;
2153              }
2154              this.hasInputText3 = false;
2155              this.day -= 1;
2156              if (this.inputDay >= 1 && this.inputDay <= this.getDayNumber()) {
2157                this.day = this.inputDay;
2158              } else {
2159                this.day += 1;
2160              }
2161            })
2162            .tabIndex(-2)
2163            .focusOnTouch(true)
2164            .focusable(true)
2165            .onFocus(() => {
2166              this.focusText = FocusText.TEXT3;
2167              this.hasFocusText3 = true;
2168              this.controller3.caretPosition(this.convertNumberToString(this.day).length);
2169            })
2170            .onBlur(() => {
2171              this.focusText = FocusText.NONE;
2172              this.hasFocusText3 = false;
2173            })
2174            .onClick((event: ClickEvent) => {
2175              this.focusText = FocusText.TEXT3;
2176              this.hasFocusText3 = true;
2177              this.controller3.caretPosition(this.convertNumberToString(this.day).length);
2178            })
2179        }
2180        .direction(this.counterDirection)
2181        .width('92vp')
2182        .height(CounterResource.COUNTER_INLINE_CONTAINER_HEIGHT)
2183        .margin({
2184          start: LengthMetrics.vp(CounterResource.COUNTER_INLINE_DATE_TEXT_MARGIN),
2185          end: LengthMetrics.vp(CounterResource.COUNTER_INLINE_DATE_TEXT_MARGIN)
2186        })
2187
2188        Column() {
2189          Stack() {
2190            Rect()
2191              .direction(this.counterDirection)
2192              .width(CounterResource.COUNTER_INLINE_FOCUS_BORDER_WIDTH)
2193              .height(CounterResource.COUNTER_INLINE_FOCUS_BORDER_HEIGHT)
2194              .radius([
2195                ['0vp', '0vp'],
2196                [CounterResource.COUNTER_INLINE_RADIUS, CounterResource.COUNTER_INLINE_RADIUS],
2197                ['0vp', '0vp'],
2198                ['0vp', '0vp']])
2199              .strokeWidth(this.addBtnFocusWidh)
2200              .stroke(CounterResource.BUTTON_BORDER_FOCUSED_COLOR)
2201              .margin({ end: LengthMetrics.vp(1) })
2202              .fillOpacity(0)
2203            Image(CounterResource.BUTTON_ARROW_UP)
2204              .direction(this.counterDirection)
2205              .width(CounterResource.COUNTER_INLINE_BUTTON_ICON_WIDTH)
2206              .height(CounterResource.COUNTER_INLINE_BUTTON_ICON_HEIGHT)
2207              .fillColor(CounterResource.BUTTON_ICON_COLOR)
2208              .opacity(this.addOpacity)
2209            Button({ type: ButtonType.Normal, stateEffect: this.addBtnStateEffect })
2210              .direction(this.counterDirection)
2211              .width(CounterResource.COUNTER_INLINE_BUTTON_WIDTH)
2212              .height(CounterResource.COUNTER_INLINE_BUTTON_HEIGHT)
2213              .backgroundColor(Color.Transparent)
2214              .opacity(this.addOpacity)
2215              .enabled(this.addBtnEnabled)
2216              .onClick((event: ClickEvent) => {
2217                this.addDate();
2218                if (event.source === SourceType.Mouse ||
2219                  event.source === SourceType.TouchScreen) {
2220                  this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
2221                }
2222              })
2223              .gesture(
2224                LongPressGesture({ repeat: true })
2225                  .onAction((event: GestureEvent) => {
2226                    if (event.repeat) {
2227                      this.addDate();
2228                    }
2229                    this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
2230                  })
2231              )
2232              .hoverEffect(this.choverEffect)
2233              .onHover((isHover: boolean) => {
2234                this.onHoverIncrease && this.onHoverIncrease(isHover);
2235              })
2236              .focusable(false)
2237              .onFocus(() => {
2238                this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_FOCUSED_WIDTH;
2239                this.onFocusIncrease && this.onFocusIncrease();
2240              })
2241              .onBlur(() => {
2242                this.addBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
2243                this.onBlurIncrease && this.onBlurIncrease();
2244              })
2245          }
2246          .width(CounterResource.COUNTER_INLINE_BUTTON_WIDTH)
2247          .height(CounterResource.COUNTER_INLINE_BUTTON_HEIGHT)
2248          .padding({ top: '1vp' })
2249          .borderWidth({ bottom: '1vp' })
2250          .borderColor(CounterResource.COUNTER_BORDER_COLOR)
2251          .clip(true)
2252
2253          Stack() {
2254            Rect()
2255              .direction(this.counterDirection)
2256              .width(CounterResource.COUNTER_INLINE_FOCUS_BORDER_WIDTH)
2257              .height(CounterResource.COUNTER_INLINE_FOCUS_BORDER_HEIGHT)
2258              .radius([
2259                ['0vp', '0vp'],
2260                ['0vp', '0vp'],
2261                [CounterResource.COUNTER_INLINE_RADIUS, CounterResource.COUNTER_INLINE_RADIUS],
2262                ['0vp', '0vp']
2263              ])
2264              .strokeWidth(this.subBtnFocusWidh)
2265              .stroke(CounterResource.BUTTON_BORDER_FOCUSED_COLOR)
2266              .margin({ top: LengthMetrics.vp(1), end: LengthMetrics.vp(1), bottom: LengthMetrics.vp(2) })
2267              .fillOpacity(0)
2268            Image(CounterResource.BUTTON_ARROW_DOWN)
2269              .direction(this.counterDirection)
2270              .width(CounterResource.COUNTER_INLINE_BUTTON_ICON_WIDTH)
2271              .height(CounterResource.COUNTER_INLINE_BUTTON_ICON_HEIGHT)
2272              .fillColor(CounterResource.BUTTON_ICON_COLOR)
2273              .opacity(this.subOpacity)
2274            Button({ type: ButtonType.Normal, stateEffect: this.subBtnStateEffect })
2275              .direction(this.counterDirection)
2276              .width(CounterResource.COUNTER_INLINE_BUTTON_WIDTH)
2277              .height(CounterResource.COUNTER_INLINE_BUTTON_HEIGHT)
2278              .backgroundColor(Color.Transparent)
2279              .opacity(this.subOpacity)
2280              .enabled(this.subBtnEnabled)
2281              .onClick((event: ClickEvent) => {
2282                this.subDate();
2283                if (event.source === SourceType.Mouse ||
2284                  event.source === SourceType.TouchScreen) {
2285                  this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
2286                }
2287              })
2288              .gesture(
2289                LongPressGesture({ repeat: true })
2290                  .onAction((event: GestureEvent) => {
2291                    if (event.repeat) {
2292                      this.subDate();
2293                    }
2294                    this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
2295                  })
2296              )
2297              .hoverEffect(this.choverEffect)
2298              .onHover((isHover: boolean) => {
2299                this.onHoverDecrease && this.onHoverDecrease(isHover);
2300              })
2301              .focusable(false)
2302              .onFocus(() => {
2303                this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_FOCUSED_WIDTH;
2304                this.onFocusDecrease && this.onFocusDecrease();
2305              })
2306              .onBlur(() => {
2307                this.subBtnFocusWidh = CounterResource.BUTTON_BORDER_BLUR_WIDTH;
2308                this.onBlurDecrease && this.onBlurDecrease();
2309              })
2310          }.width(CounterResource.COUNTER_INLINE_BUTTON_WIDTH)
2311          .height(CounterResource.COUNTER_INLINE_BUTTON_HEIGHT)
2312          .clip(true)
2313        }
2314        .direction(this.counterDirection)
2315        .width(CounterResource.COUNTER_INLINE_BUTTON_WIDTH)
2316        .height(CounterResource.COUNTER_INLINE_CONTAINER_HEIGHT)
2317        .borderWidth({ start: LengthMetrics.vp(CounterResource.COUNTER_BORDER_WIDTH_NUMBER) })
2318        .borderColor(CounterResource.COUNTER_BORDER_COLOR)
2319      }
2320      .direction(this.counterDirection)
2321      .height(CounterResource.COUNTER_INLINE_CONTAINER_HEIGHT)
2322      .borderWidth(CounterResource.COUNTER_BORDER_WIDTH)
2323      .borderColor(CounterResource.COUNTER_BORDER_COLOR)
2324      .borderRadius(CounterResource.COUNTER_INLINE_RADIUS)
2325      .clip(true)
2326    } else {
2327
2328    }
2329  }
2330}
2331