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 */
15
16let __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
17    let c = arguments.length, r = c < 3 ? target : desc === null ?
18        desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
19    if (typeof Reflect === 'object' && typeof Reflect.decorate === 'function') {
20        r = Reflect.decorate(decorators, target, key, desc);
21    } else {
22        for (let i = decorators.length - 1; i >= 0; i--) {
23            if (d = decorators[i]) {
24               r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
25            }
26        }
27    }
28    return c > 3 && r && Object.defineProperty(target, key, r), r;
29};
30if (!('finalizeConstruction' in ViewPU.prototype)) {
31    Reflect.set(ViewPU.prototype, 'finalizeConstruction', () => {
32    });
33}
34if (PUV2ViewBase.contextStack === undefined) {
35    Reflect.set(PUV2ViewBase, 'contextStack', []);
36}
37const LengthMetrics = requireNapi('arkui.node').LengthMetrics;
38const curves = requireNativeModule('ohos.curves');
39const measure = requireNapi('measure');
40const hilog = requireNapi('ohos.hilog');
41const TEXT_HOT_AREA_WIDTH = 8;
42const LIST_ROW_HEIGHT = 40;
43const ARROW_IMG_SIZE = 24;
44const MULTI_LINE_PADDING = 24;
45const BAR_ANIMATION_DURATION = 150;
46const ARROW_ANIMATION_DURATION = 200;
47const ANIMATION_DURATION_250 = 250;
48const ANIMATION_DURATION_100 = 100;
49const FILTER_TOP_PADDING = 8;
50const FILTER_BAR_MARGIN = 8;
51const SEPARATOR_HEIGHT = 16;
52const SEPARATOR_WIDTH = 1;
53const FLOAT_OPACITY = 0.95;
54const FILTER_FONT_SIZE = 12;
55const FOCUS_BORDER_WIDTH = 2;
56const ARROW_SHOW_DELAY = 300;
57const PERCENT_100 = '100%';
58const SHARP_CUBIC_BEZIER = curves.cubicBezierCurve(0.33, 0, 0.67, 1);
59const INTER_POLATING_SPRING = curves.interpolatingSpring(0, 1, 328, 34);
60const FRICTION_CUBIC_BEZIER = curves.cubicBezierCurve(0.2, 0, 0.2, 1);
61const TRANS_COLOR = '#00FFFFFF';
62const GRADIENT_WIDTH = 16;
63const MAX_FONT_SCALE = 2;
64const ERROR_CODE = 0x3900;
65export let FilterType;
66(function (FilterType) {
67    FilterType[FilterType.MULTI_LINE_FILTER = 0] = 'MULTI_LINE_FILTER';
68    FilterType[FilterType.LIST_FILTER = 1] = 'LIST_FILTER';
69})(FilterType || (FilterType = {}));
70let FontWeightArray = class FontWeightArray extends Array {
71};
72FontWeightArray = __decorate([
73    Observed
74], FontWeightArray);
75let ResourceArray = class ResourceArray extends Array {
76};
77ResourceArray = __decorate([
78    Observed
79], ResourceArray);
80let BooleanArray = class BooleanArray extends Array {
81};
82BooleanArray = __decorate([
83    Observed
84], BooleanArray);
85let ObservedBoolean = class ObservedBoolean {
86    constructor(value) {
87        this.value = value;
88    }
89};
90ObservedBoolean = __decorate([
91    Observed
92], ObservedBoolean);
93export { ObservedBoolean };
94let ObservedNumber = class ObservedNumber {
95    constructor(value) {
96        this.value = value;
97    }
98};
99ObservedNumber = __decorate([
100    Observed
101], ObservedNumber);
102class GradientMask extends ViewPU {
103    constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) {
104        super(parent, __localStorage, elmtId, extraInfo);
105        if (typeof paramsLambda === 'function') {
106            this.paramsGenerator_ = paramsLambda;
107        }
108        this.x0 = 0;
109        this.y0 = 0;
110        this.x1 = 0;
111        this.y1 = 0;
112        this.settings = new RenderingContextSettings(true);
113        this.context2D = new CanvasRenderingContext2D(this.settings);
114        this.setInitiallyProvidedValue(params);
115        this.finalizeConstruction();
116    }
117
118    setInitiallyProvidedValue(params) {
119        if (params.x0 !== undefined) {
120          this.x0 = params.x0;
121        }
122        if (params.y0 !== undefined) {
123          this.y0 = params.y0;
124        }
125        if (params.x1 !== undefined) {
126          this.x1 = params.x1;
127        }
128        if (params.y1 !== undefined) {
129          this.y1 = params.y1;
130        }
131        if (params.settings !== undefined) {
132          this.settings = params.settings;
133        }
134        if (params.context2D !== undefined) {
135          this.context2D = params.context2D;
136        }
137    }
138
139    updateStateVars(params) {
140    }
141
142    purgeVariableDependenciesOnElmtId(rmElmtId) {
143    }
144
145    aboutToBeDeleted() {
146        SubscriberManager.Get().delete(this.id__());
147        this.aboutToBeDeletedInternal();
148    }
149
150    initialRender() {
151        PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this);
152        this.observeComponentCreation2((elmtId, isInitialRender) => {
153            Column.create();
154            Column.blendMode(BlendMode.DST_OUT);
155            Column.width(GRADIENT_WIDTH);
156            Column.height(LIST_ROW_HEIGHT);
157        }, Column);
158        this.observeComponentCreation2((elmtId, isInitialRender) => {
159            Canvas.create(this.context2D);
160            Canvas.width(GRADIENT_WIDTH);
161            Canvas.height(LIST_ROW_HEIGHT);
162            Canvas.onReady(() => {
163                let grad = this.context2D.createLinearGradient(this.x0, this.y0, this.x1, this.y1);
164                grad.addColorStop(0.0, '#ffffffff');
165                grad.addColorStop(1, '#00ffffff');
166                this.context2D.fillStyle = grad;
167                this.context2D.fillRect(0, 0, GRADIENT_WIDTH, LIST_ROW_HEIGHT);
168            });
169        }, Canvas);
170        Canvas.pop();
171        Column.pop();
172        PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop();
173    }
174
175    rerender() {
176        PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this);
177        this.updateDirtyElements();
178        PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop();
179    }
180}
181
182class ListFilterRow extends ViewPU {
183    constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) {
184        super(parent, __localStorage, elmtId, extraInfo);
185        if (typeof paramsLambda === 'function') {
186            this.paramsGenerator_ = paramsLambda;
187        }
188        this.__colorRow = new SynchedPropertyNesedObjectPU(params.colorRow, this, 'colorRow');
189        this.__fontWeightRow = new SynchedPropertyNesedObjectPU(params.fontWeightRow, this, 'fontWeightRow');
190        this.__backgroundColorRow =
191            new SynchedPropertyNesedObjectPU(params.backgroundColorRow, this, 'backgroundColorRow');
192        this.__isBackgroundHoverRow =
193            new SynchedPropertyNesedObjectPU(params.isBackgroundHoverRow, this, 'isBackgroundHoverRow');
194        this.filterRow = { name: '', options: [] };
195        this.onItemClick = () => {
196        };
197        this.rowIndex = 0;
198        this.maxAppFontScale = 1;
199        this.isFollowingSystemFontScale = false;
200        this.setInitiallyProvidedValue(params);
201        this.finalizeConstruction();
202    }
203
204    setInitiallyProvidedValue(params) {
205        this.__colorRow.set(params.colorRow);
206        this.__fontWeightRow.set(params.fontWeightRow);
207        this.__backgroundColorRow.set(params.backgroundColorRow);
208        this.__isBackgroundHoverRow.set(params.isBackgroundHoverRow);
209        if (params.filterRow !== undefined) {
210            this.filterRow = params.filterRow;
211        }
212        if (params.onItemClick !== undefined) {
213            this.onItemClick = params.onItemClick;
214        }
215        if (params.rowIndex !== undefined) {
216            this.rowIndex = params.rowIndex;
217        }
218        if (params.maxAppFontScale !== undefined) {
219            this.maxAppFontScale = params.maxAppFontScale;
220        }
221        if (params.isFollowingSystemFontScale !== undefined) {
222            this.isFollowingSystemFontScale = params.isFollowingSystemFontScale;
223        }
224    }
225
226    updateStateVars(params) {
227        this.__colorRow.set(params.colorRow);
228        this.__fontWeightRow.set(params.fontWeightRow);
229        this.__backgroundColorRow.set(params.backgroundColorRow);
230        this.__isBackgroundHoverRow.set(params.isBackgroundHoverRow);
231    }
232
233    purgeVariableDependenciesOnElmtId(rmElmtId) {
234        this.__colorRow.purgeDependencyOnElmtId(rmElmtId);
235        this.__fontWeightRow.purgeDependencyOnElmtId(rmElmtId);
236        this.__backgroundColorRow.purgeDependencyOnElmtId(rmElmtId);
237        this.__isBackgroundHoverRow.purgeDependencyOnElmtId(rmElmtId);
238    }
239
240    aboutToBeDeleted() {
241        this.__colorRow.aboutToBeDeleted();
242        this.__fontWeightRow.aboutToBeDeleted();
243        this.__backgroundColorRow.aboutToBeDeleted();
244        this.__isBackgroundHoverRow.aboutToBeDeleted();
245        SubscriberManager.Get().delete(this.id__());
246        this.aboutToBeDeletedInternal();
247    }
248
249    get colorRow() {
250        return this.__colorRow.get();
251    }
252
253    get fontWeightRow() {
254        return this.__fontWeightRow.get();
255    }
256
257    get backgroundColorRow() {
258        return this.__backgroundColorRow.get();
259    }
260
261    get isBackgroundHoverRow() {
262        return this.__isBackgroundHoverRow.get();
263    }
264
265    aboutToAppear() {
266        try {
267            let uiContent = this.getUIContext();
268            this.isFollowingSystemFontScale = uiContent.isFollowingSystemFontScale();
269            this.maxAppFontScale = uiContent.getMaxFontScale();
270        } catch (err) {
271            let code = err.code;
272            let message = err.message;
273            hilog.error(ERROR_CODE, 'Ace', `Failed to init fontsizescale info, cause,
274              code: ${code}, message: ${message}`);
275        }
276    }
277
278    updateFontScale() {
279        let uiContent = this.getUIContext();
280        let systemFontScale = uiContent.getHostContext()?.config?.fontSizeScale ?? 1;
281        if (!this.isFollowingSystemFontScale) {
282            return 1;
283        }
284        return Math.min(systemFontScale, this.maxAppFontScale);
285    }
286
287    initialRender() {
288        PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this);
289        this.observeComponentCreation2((elmtId, isInitialRender) => {
290            Stack.create({ alignContent: Alignment.End });
291            Stack.blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN);
292        }, Stack);
293        this.observeComponentCreation2((elmtId, isInitialRender) => {
294            Stack.create({ alignContent: Alignment.Start });
295        }, Stack);
296        this.observeComponentCreation2((elmtId, isInitialRender) => {
297            List.create();
298            List.listDirection(Axis.Horizontal);
299            List.scrollBar(BarState.Off);
300            List.width(PERCENT_100);
301            List.height(LIST_ROW_HEIGHT);
302            List.align(Alignment.Start);
303        }, List);
304        this.observeComponentCreation2((elmtId, isInitialRender) => {
305            ForEach.create();
306            const forEachItemGenFunction = (_item, colIndex) => {
307                const option = _item;
308                this.observeComponentCreation2((elmtId, isInitialRender) => {
309                    If.create();
310                    if (colIndex === 0) {
311                        this.ifElseBranchUpdateFunction(0, () => {
312                            {
313                                const itemCreation = (elmtId, isInitialRender) => {
314                                    ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
315                                    itemCreation2(elmtId, isInitialRender);
316                                    if (!isInitialRender) {
317                                        ListItem.pop();
318                                    }
319                                    ViewStackProcessor.StopGetAccessRecording();
320                                };
321                                const itemCreation2 = (elmtId, isInitialRender) => {
322                                    ListItem.create(deepRenderFunction, true);
323                                    ListItem.width({
324                                        'id': -1,
325                                        'type': 10002,
326                                        params: ['sys.float.ohos_id_max_padding_start'],
327                                        'bundleName': '__harDefaultBundleName__',
328                                        'moduleName': '__harDefaultModuleName__'
329                                    });
330                                    ListItem.height(LIST_ROW_HEIGHT);
331                                };
332                                const deepRenderFunction = (elmtId, isInitialRender) => {
333                                    itemCreation(elmtId, isInitialRender);
334                                    ListItem.pop();
335                                };
336                                this.observeComponentCreation2(itemCreation2, ListItem);
337                                ListItem.pop();
338                            }
339                        });
340                    } else {
341                        this.ifElseBranchUpdateFunction(1, () => {
342                      });
343                    }
344                }, If);
345                If.pop();
346                {
347                    const itemCreation = (elmtId, isInitialRender) => {
348                        ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
349                        itemCreation2(elmtId, isInitialRender);
350                        if (!isInitialRender) {
351                            ListItem.pop();
352                        }
353                        ViewStackProcessor.StopGetAccessRecording();
354                    };
355                    const itemCreation2 = (elmtId, isInitialRender) => {
356                        ListItem.create(deepRenderFunction, true);
357                        ListItem.height(PERCENT_100);
358                        ListItem.onClick(() => {
359                            this.onItemClick(colIndex);
360                        });
361                        ListItem.focusable(true);
362                        ViewStackProcessor.visualState('focused');
363                        ListItem.border({
364                            radius: {
365                                'id': -1,
366                                'type': 10002,
367                                params: ['sys.float.ohos_id_corner_radius_clicked'],
368                                'bundleName': '__harDefaultBundleName__',
369                                'moduleName': '__harDefaultModuleName__'
370                            },
371                            width: FOCUS_BORDER_WIDTH,
372                            color: {
373                                'id': -1,
374                                'type': 10001,
375                                params: ['sys.color.ohos_id_color_focused_outline'],
376                                'bundleName': '__harDefaultBundleName__',
377                                'moduleName': '__harDefaultModuleName__'
378                            },
379                            style: BorderStyle.Solid
380                        });
381                        ListItem.padding({
382                            start: LengthMetrics.vp(TEXT_HOT_AREA_WIDTH - FOCUS_BORDER_WIDTH),
383                            end: LengthMetrics.vp(TEXT_HOT_AREA_WIDTH - FOCUS_BORDER_WIDTH)
384                        });
385                        ViewStackProcessor.visualState('normal');
386                        ListItem.border({
387                            radius: {
388                              'id': -1,
389                              'type': 10002,
390                              params: ['sys.float.ohos_id_corner_radius_clicked'],
391                              'bundleName': '__harDefaultBundleName__',
392                              'moduleName': '__harDefaultModuleName__'
393                            },
394                            width: 0
395                        });
396                        ListItem.padding({
397                            start: LengthMetrics.vp(TEXT_HOT_AREA_WIDTH),
398                            end: LengthMetrics.vp(TEXT_HOT_AREA_WIDTH)
399                        });
400                        ViewStackProcessor.visualState();
401                        ListItem.backgroundColor(this.isBackgroundHoverRow[colIndex] ?
402                        this.backgroundColorRow[colIndex] : TRANS_COLOR);
403                        ListItem.onHover((isHover) => {
404                            Context.animateTo({
405                                curve: FRICTION_CUBIC_BEZIER,
406                                duration: ANIMATION_DURATION_250
407                            }, () => {
408                                if (isHover) {
409                                    this.backgroundColorRow[colIndex] = {
410                                        'id': -1,
411                                        'type': 10001,
412                                        params: ['sys.color.ohos_id_color_hover'],
413                                        'bundleName': '__harDefaultBundleName__',
414                                        'moduleName': '__harDefaultModuleName__'
415                                    };
416                                    this.isBackgroundHoverRow[colIndex] = true;
417                                } else {
418                                    this.isBackgroundHoverRow[colIndex] = false;
419                                }
420                            });
421                        });
422                        ListItem.onTouch((event) => {
423                            if (event.type === TouchType.Down) {
424                                Context.animateTo({
425                                    curve: SHARP_CUBIC_BEZIER,
426                                    duration: ANIMATION_DURATION_100
427                                }, () => {
428                                    this.backgroundColorRow[colIndex] = {
429                                        'id': -1,
430                                        'type': 10001,
431                                        params: ['sys.color.ohos_id_color_click_effect'],
432                                        'bundleName': '__harDefaultBundleName__',
433                                        'moduleName': '__harDefaultModuleName__'
434                                    };
435                                    this.isBackgroundHoverRow[colIndex] = true;
436                                });
437                            } else if (event.type === TouchType.Up) {
438                                Context.animateTo({
439                                    curve: SHARP_CUBIC_BEZIER,
440                                    duration: ANIMATION_DURATION_100
441                                }, () => {
442                                    this.isBackgroundHoverRow[colIndex] = false;
443                                });
444                            }
445                        });
446                        ListItem.margin({ start: LengthMetrics.vp(colIndex === 0 ? -TEXT_HOT_AREA_WIDTH : 0) });
447                        ListItem.tabIndex(colIndex === 0 ? this.rowIndex : -1);
448                    };
449                    const deepRenderFunction = (elmtId, isInitialRender) => {
450                        itemCreation(elmtId, isInitialRender);
451                        this.observeComponentCreation2((elmtId, isInitialRender) => {
452                            Text.create(option.toString());
453                            Text.fontSize({
454                                'id': -1,
455                                'type': 10002,
456                                params: ['sys.float.ohos_id_text_size_body3'],
457                                'bundleName': '__harDefaultBundleName__',
458                                'moduleName': '__harDefaultModuleName__'
459                            });
460                            Text.minFontScale(1);
461                            Text.maxFontScale(Math.min(this.updateFontScale(), MAX_FONT_SCALE));
462                            Text.fontColor(this.colorRow[colIndex]);
463                            Text.fontWeight(this.fontWeightRow[colIndex]);
464                            Text.focusable(true);
465                        }, Text);
466                        Text.pop();
467                        ListItem.pop();
468                    };
469                    this.observeComponentCreation2(itemCreation2, ListItem);
470                    ListItem.pop();
471                }
472            };
473            this.forEachUpdateFunction(elmtId, this.filterRow.options, forEachItemGenFunction, undefined, true, false);
474        }, ForEach);
475        ForEach.pop();
476        List.pop();
477        {
478            this.observeComponentCreation2((elmtId, isInitialRender) => {
479                if (isInitialRender) {
480                    let componentCall = new GradientMask(this, {
481                        x0: 0,
482                        y0: LIST_ROW_HEIGHT / 2,
483                        x1: GRADIENT_WIDTH,
484                        y1: LIST_ROW_HEIGHT / 2
485                    }, undefined, elmtId, () => {
486                    }, { page: 'library/src/main/ets/components/mainpage/filter.ets', line: 242, col: 9 });
487                    ViewPU.create(componentCall);
488                    let paramsLambda = () => {
489                        return {
490                            x0: 0,
491                            y0: LIST_ROW_HEIGHT / 2,
492                            x1: GRADIENT_WIDTH,
493                            y1: LIST_ROW_HEIGHT / 2
494                        };
495                    };
496                    componentCall.paramsGenerator_ = paramsLambda;
497                } else {
498                    this.updateStateVarsOfChildByElmtId(elmtId, {});
499                }
500            }, { name: 'GradientMask' });
501        }
502        Stack.pop();
503        {
504            this.observeComponentCreation2((elmtId, isInitialRender) => {
505                if (isInitialRender) {
506                    let componentCall = new GradientMask(this, {
507                        x0: GRADIENT_WIDTH,
508                        y0: LIST_ROW_HEIGHT / 2,
509                        x1: 0,
510                        y1: LIST_ROW_HEIGHT / 2
511                    }, undefined, elmtId, () => {
512                    }, { page: 'library/src/main/ets/components/mainpage/filter.ets', line: 249, col: 7 });
513                    ViewPU.create(componentCall);
514                    let paramsLambda = () => {
515                        return {
516                            x0: GRADIENT_WIDTH,
517                            y0: LIST_ROW_HEIGHT / 2,
518                            x1: 0,
519                            y1: LIST_ROW_HEIGHT / 2
520                        };
521                    };
522                    componentCall.paramsGenerator_ = paramsLambda;
523                } else {
524                    this.updateStateVarsOfChildByElmtId(elmtId, {});
525                }
526            }, { name: 'GradientMask' });
527        }
528        Stack.pop();
529        PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop();
530    }
531
532    rerender() {
533        PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this);
534        this.updateDirtyElements();
535        PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop();
536    }
537}
538
539class MultiFilterRow extends ViewPU {
540    constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) {
541        super(parent, __localStorage, elmtId, extraInfo);
542        if (typeof paramsLambda === 'function') {
543            this.paramsGenerator_ = paramsLambda;
544        }
545        this.__colorRow = new SynchedPropertyNesedObjectPU(params.colorRow, this, 'colorRow');
546        this.__fontWeightRow = new SynchedPropertyNesedObjectPU(params.fontWeightRow, this, 'fontWeightRow');
547        this.__backgroundColorRow =
548            new SynchedPropertyNesedObjectPU(params.backgroundColorRow, this, 'backgroundColorRow');
549        this.__isBackgroundHoverRow =
550            new SynchedPropertyNesedObjectPU(params.isBackgroundHoverRow, this, 'isBackgroundHoverRow');
551        this.__twoLineModeItemNumRow =
552            new SynchedPropertyNesedObjectPU(params.twoLineModeItemNumRow, this, 'twoLineModeItemNumRow');
553        this.__twoLineModeItemNumRecordRow =
554            new SynchedPropertyNesedObjectPU(params.twoLineModeItemNumRecordRow, this, 'twoLineModeItemNumRecordRow');
555        this.__arrowShowStateRow =
556            new SynchedPropertyNesedObjectPU(params.arrowShowStateRow, this, 'arrowShowStateRow');
557        this.__isArrowIconDown = new SynchedPropertyNesedObjectPU(params.isArrowIconDown, this, 'isArrowIconDown');
558        this.filterRow = null;
559        this.onItemClick = () => {
560        };
561        this.__arrowBgColorRow = new ObservedPropertyObjectPU({
562            'id': -1,
563            'type': 10001,
564            params: ['sys.color.ohos_id_color_hover'],
565            'bundleName': '__harDefaultBundleName__',
566            'moduleName': '__harDefaultModuleName__'
567        }, this, 'arrowBgColorRow');
568        this.__isArrowBgHoverRow = new ObservedPropertySimplePU(false, this, 'isArrowBgHoverRow');
569        this.filterColumnWidth = 0;
570        this.lastFilterColumnWidth = 0;
571        this.rowIndex = 0;
572        this.maxAppFontScale = 1;
573        this.isFollowingSystemFontScale = false;
574        this.setInitiallyProvidedValue(params);
575        this.finalizeConstruction();
576    }
577
578    setInitiallyProvidedValue(params) {
579        this.__colorRow.set(params.colorRow);
580        this.__fontWeightRow.set(params.fontWeightRow);
581        this.__backgroundColorRow.set(params.backgroundColorRow);
582        this.__isBackgroundHoverRow.set(params.isBackgroundHoverRow);
583        this.__twoLineModeItemNumRow.set(params.twoLineModeItemNumRow);
584        this.__twoLineModeItemNumRecordRow.set(params.twoLineModeItemNumRecordRow);
585        this.__arrowShowStateRow.set(params.arrowShowStateRow);
586        this.__isArrowIconDown.set(params.isArrowIconDown);
587        if (params.filterRow !== undefined) {
588            this.filterRow = params.filterRow;
589        }
590        if (params.onItemClick !== undefined) {
591            this.onItemClick = params.onItemClick;
592        }
593        if (params.arrowBgColorRow !== undefined) {
594            this.arrowBgColorRow = params.arrowBgColorRow;
595        }
596        if (params.isArrowBgHoverRow !== undefined) {
597            this.isArrowBgHoverRow = params.isArrowBgHoverRow;
598        }
599        if (params.filterColumnWidth !== undefined) {
600            this.filterColumnWidth = params.filterColumnWidth;
601        }
602        if (params.lastFilterColumnWidth !== undefined) {
603            this.lastFilterColumnWidth = params.lastFilterColumnWidth;
604        }
605        if (params.rowIndex !== undefined) {
606            this.rowIndex = params.rowIndex;
607        }
608        if (params.maxAppFontScale !== undefined) {
609            this.maxAppFontScale = params.maxAppFontScale;
610        }
611        if (params.isFollowingSystemFontScale !== undefined) {
612            this.isFollowingSystemFontScale = params.isFollowingSystemFontScale;
613        }
614    }
615
616    updateStateVars(params) {
617        this.__colorRow.set(params.colorRow);
618        this.__fontWeightRow.set(params.fontWeightRow);
619        this.__backgroundColorRow.set(params.backgroundColorRow);
620        this.__isBackgroundHoverRow.set(params.isBackgroundHoverRow);
621        this.__twoLineModeItemNumRow.set(params.twoLineModeItemNumRow);
622        this.__twoLineModeItemNumRecordRow.set(params.twoLineModeItemNumRecordRow);
623        this.__arrowShowStateRow.set(params.arrowShowStateRow);
624        this.__isArrowIconDown.set(params.isArrowIconDown);
625    }
626
627    purgeVariableDependenciesOnElmtId(rmElmtId) {
628        this.__colorRow.purgeDependencyOnElmtId(rmElmtId);
629        this.__fontWeightRow.purgeDependencyOnElmtId(rmElmtId);
630        this.__backgroundColorRow.purgeDependencyOnElmtId(rmElmtId);
631        this.__isBackgroundHoverRow.purgeDependencyOnElmtId(rmElmtId);
632        this.__twoLineModeItemNumRow.purgeDependencyOnElmtId(rmElmtId);
633        this.__twoLineModeItemNumRecordRow.purgeDependencyOnElmtId(rmElmtId);
634        this.__arrowShowStateRow.purgeDependencyOnElmtId(rmElmtId);
635        this.__isArrowIconDown.purgeDependencyOnElmtId(rmElmtId);
636        this.__arrowBgColorRow.purgeDependencyOnElmtId(rmElmtId);
637        this.__isArrowBgHoverRow.purgeDependencyOnElmtId(rmElmtId);
638    }
639
640    aboutToBeDeleted() {
641        this.__colorRow.aboutToBeDeleted();
642        this.__fontWeightRow.aboutToBeDeleted();
643        this.__backgroundColorRow.aboutToBeDeleted();
644        this.__isBackgroundHoverRow.aboutToBeDeleted();
645        this.__twoLineModeItemNumRow.aboutToBeDeleted();
646        this.__twoLineModeItemNumRecordRow.aboutToBeDeleted();
647        this.__arrowShowStateRow.aboutToBeDeleted();
648        this.__isArrowIconDown.aboutToBeDeleted();
649        this.__arrowBgColorRow.aboutToBeDeleted();
650        this.__isArrowBgHoverRow.aboutToBeDeleted();
651        SubscriberManager.Get().delete(this.id__());
652        this.aboutToBeDeletedInternal();
653    }
654
655    get colorRow() {
656        return this.__colorRow.get();
657    }
658
659    get fontWeightRow() {
660        return this.__fontWeightRow.get();
661    }
662
663    get backgroundColorRow() {
664        return this.__backgroundColorRow.get();
665    }
666
667    get isBackgroundHoverRow() {
668        return this.__isBackgroundHoverRow.get();
669    }
670
671    get twoLineModeItemNumRow() {
672        return this.__twoLineModeItemNumRow.get();
673    }
674
675    get twoLineModeItemNumRecordRow() {
676        return this.__twoLineModeItemNumRecordRow.get();
677    }
678
679    get arrowShowStateRow() {
680        return this.__arrowShowStateRow.get();
681    }
682
683    get isArrowIconDown() {
684        return this.__isArrowIconDown.get();
685    }
686
687    get arrowBgColorRow() {
688        return this.__arrowBgColorRow.get();
689    }
690
691    set arrowBgColorRow(newValue) {
692        this.__arrowBgColorRow.set(newValue);
693    }
694
695    get isArrowBgHoverRow() {
696        return this.__isArrowBgHoverRow.get();
697    }
698
699    set isArrowBgHoverRow(newValue) {
700        this.__isArrowBgHoverRow.set(newValue);
701    }
702
703    aboutToAppear() {
704        try {
705            let uiContent = this.getUIContext();
706            this.isFollowingSystemFontScale = uiContent.isFollowingSystemFontScale();
707            this.maxAppFontScale = uiContent.getMaxFontScale();
708        } catch (err) {
709            let code = err.code;
710            let message = err.message;
711            hilog.error(ERROR_CODE, 'Ace', `Failed to init fontsizescale info, cause,
712              code: ${code}, message: ${message}`);
713        }
714    }
715
716    updateFontScale() {
717        let uiContent = this.getUIContext();
718        let systemFontScale = uiContent.getHostContext()?.config?.fontSizeScale ?? 1;
719        if (!this.isFollowingSystemFontScale) {
720            return 1;
721        }
722        return Math.min(systemFontScale, this.maxAppFontScale);
723    }
724
725    calcMultiFilterRowItemNum() {
726        let curLineRetainWidth = this.filterColumnWidth;
727        let curLineSum = 0;
728        let curLine = 1;
729        if (this.filterRow) {
730            for (let i = 0; i < this.filterRow.options.length; i++) {
731                let option = this.filterRow.options[i];
732                let itemWidth = measure.measureText({
733                    textContent: option,
734                    fontSize: `${FILTER_FONT_SIZE * Math.min(this.updateFontScale(), MAX_FONT_SCALE)}vp`,
735                });
736                if (i === 0) {
737                    continue;
738                } else {
739                    itemWidth += vp2px(TEXT_HOT_AREA_WIDTH * 2);
740                }
741                if (curLineRetainWidth - itemWidth >= 0) {
742                    curLineRetainWidth -= itemWidth;
743                    curLineSum += 1;
744                } else {
745                    if (curLineSum === 0) {
746                        curLineSum++;
747                        curLineRetainWidth = 0;
748                    }
749                    if (curLine === 1) {
750                        curLine += 1;
751                        curLineRetainWidth = this.filterColumnWidth - vp2px(ARROW_IMG_SIZE);
752                        i--;
753                    } else {
754                        break;
755                    }
756                }
757            }
758        }
759        return curLineSum;
760    }
761
762    DownAndUpArrow(parent = null) {
763        this.observeComponentCreation2((elmtId, isInitialRender) => {
764            Row.create();
765            Row.border({
766                radius: {
767                    'id': -1,
768                    'type': 10002,
769                    params: ['sys.float.ohos_id_corner_radius_clicked'],
770                    'bundleName': '__harDefaultBundleName__',
771                    'moduleName': '__harDefaultModuleName__'
772                }
773            });
774            Row.height(LIST_ROW_HEIGHT);
775            Row.width(ARROW_IMG_SIZE);
776            Row.backgroundColor(this.isArrowBgHoverRow ? this.arrowBgColorRow : TRANS_COLOR);
777            Row.focusable(true);
778            Row.visibility(this.arrowShowStateRow.value ? Visibility.Visible : Visibility.Hidden);
779            Row.onHover((isHover) => {
780                Context.animateTo({
781                    curve: FRICTION_CUBIC_BEZIER,
782                    duration: ANIMATION_DURATION_250
783                }, () => {
784                    if (isHover) {
785                        this.arrowBgColorRow = {
786                            'id': -1,
787                            'type': 10001,
788                            params: ['sys.color.ohos_id_color_hover'],
789                            'bundleName': '__harDefaultBundleName__',
790                            'moduleName': '__harDefaultModuleName__'
791                        };
792                        this.isArrowBgHoverRow = true;
793                    } else {
794                        this.isArrowBgHoverRow = false;
795                    }
796                });
797            });
798            Row.onTouch((event) => {
799                if (event.type === TouchType.Down) {
800                    Context.animateTo({
801                        curve: SHARP_CUBIC_BEZIER,
802                        duration: ANIMATION_DURATION_100
803                    }, () => {
804                        this.arrowBgColorRow = {
805                            'id': -1,
806                            'type': 10001,
807                            params: ['sys.color.ohos_id_color_click_effect'],
808                            'bundleName': '__harDefaultBundleName__',
809                            'moduleName': '__harDefaultModuleName__'
810                        };
811                        this.isArrowBgHoverRow = true;
812                    });
813                } else if (event.type === TouchType.Up) {
814                    Context.animateTo({
815                        curve: SHARP_CUBIC_BEZIER,
816                        duration: ANIMATION_DURATION_100
817                    }, () => {
818                        this.isArrowBgHoverRow = false;
819                    });
820                }
821            });
822            Row.onClick(() => {
823                if (this.isArrowIconDown.value) {
824                    this.isArrowIconDown.value = false;
825                    this.arrowShowStateRow.value = false;
826                    Context.animateTo({
827                        curve: INTER_POLATING_SPRING,
828                    }, () => {
829                        this.twoLineModeItemNumRow.value = this.filterRow?.options.length;
830                    });
831                    Context.animateTo({
832                        delay: 300,
833                        duration: ARROW_ANIMATION_DURATION,
834                        curve: SHARP_CUBIC_BEZIER
835                    }, () => {
836                        this.arrowShowStateRow.value = true;
837                    });
838                } else {
839                    this.isArrowIconDown.value = true;
840                    this.arrowShowStateRow.value = false;
841                    Context.animateTo({
842                        curve: INTER_POLATING_SPRING,
843                    }, () => {
844                        this.twoLineModeItemNumRow.value = this.twoLineModeItemNumRecordRow.value;
845                    });
846                    Context.animateTo({
847                        delay: ARROW_SHOW_DELAY,
848                        duration: ARROW_ANIMATION_DURATION,
849                        curve: SHARP_CUBIC_BEZIER
850                    }, () => {
851                        this.arrowShowStateRow.value = true;
852                    });
853                }
854            });
855        }, Row);
856        this.observeComponentCreation2((elmtId, isInitialRender) => {
857            Image.create(this.isArrowIconDown.value ? {
858                'id': -1,
859                'type': 20000,
860                params: ['sys.media.ohos_ic_public_arrow_down'],
861                'bundleName': '__harDefaultBundleName__',
862                'moduleName': '__harDefaultModuleName__'
863            } : {
864                'id': -1,
865                'type': 20000,
866                params: ['sys.media.ohos_ic_public_arrow_up'],
867                'bundleName': '__harDefaultBundleName__',
868                'moduleName': '__harDefaultModuleName__'
869            });
870            Image.width(ARROW_IMG_SIZE);
871            Image.height(LIST_ROW_HEIGHT);
872            Image.fillColor({
873                'id': -1,
874                'type': 10001,
875                params: ['sys.color.ohos_id_color_tertiary'],
876                'bundleName': '__harDefaultBundleName__',
877                'moduleName': '__harDefaultModuleName__'
878            });
879            Image.focusable(true);
880            ViewStackProcessor.visualState('focused');
881            Image.border({
882                radius: {
883                    'id': -1,
884                    'type': 10002,
885                    params: ['sys.float.ohos_id_corner_radius_clicked'],
886                    'bundleName': '__harDefaultBundleName__',
887                    'moduleName': '__harDefaultModuleName__'
888                },
889                width: FOCUS_BORDER_WIDTH,
890                color: {
891                    'id': -1,
892                    'type': 10001,
893                    params: ['sys.color.ohos_id_color_focused_outline'],
894                    'bundleName': '__harDefaultBundleName__',
895                    'moduleName': '__harDefaultModuleName__'
896                },
897                style: BorderStyle.Solid
898            });
899            Image.width(ARROW_IMG_SIZE + FOCUS_BORDER_WIDTH * 2);
900            Image.offset({ x: -FOCUS_BORDER_WIDTH });
901            ViewStackProcessor.visualState('normal');
902            Image.border({
903                radius: {
904                    'id': -1,
905                    'type': 10002,
906                    params: ['sys.float.ohos_id_corner_radius_clicked'],
907                    'bundleName': '__harDefaultBundleName__',
908                    'moduleName': '__harDefaultModuleName__'
909                },
910                width: 0
911            });
912            Image.width(ARROW_IMG_SIZE);
913            Image.offset({ x: 0 });
914            ViewStackProcessor.visualState();
915            Image.tabIndex(-1);
916        }, Image);
917        Row.pop();
918    }
919
920    initialRender() {
921        PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this);
922        this.observeComponentCreation2((elmtId, isInitialRender) => {
923            Flex.create();
924            Flex.width(PERCENT_100);
925            Flex.padding({
926                start: LengthMetrics.resource({
927                    'id': -1,
928                    'type': 10002,
929                    params: ['sys.float.ohos_id_max_padding_start'],
930                    'bundleName': '__harDefaultBundleName__',
931                    'moduleName': '__harDefaultModuleName__'
932                }),
933                end: LengthMetrics.resource({
934                    'id': -1,
935                    'type': 10002,
936                    params: ['sys.float.ohos_id_max_padding_end'],
937                    'bundleName': '__harDefaultBundleName__',
938                    'moduleName': '__harDefaultModuleName__'
939                })
940            });
941        }, Flex);
942        this.observeComponentCreation2((elmtId, isInitialRender) => {
943            If.create();
944            if (this.filterRow?.options && this.filterRow?.options.length > 0) {
945                this.ifElseBranchUpdateFunction(0, () => {
946                    this.observeComponentCreation2((elmtId, isInitialRender) => {
947                        Text.create(this.filterRow?.options[0].toString());
948                        Text.height(LIST_ROW_HEIGHT);
949                        Text.margin({ start: LengthMetrics.vp(-TEXT_HOT_AREA_WIDTH) });
950                        Text.fontSize({
951                            'id': -1,
952                            'type': 10002,
953                            params: ['sys.float.ohos_id_text_size_body3'],
954                            'bundleName': '__harDefaultBundleName__',
955                            'moduleName': '__harDefaultModuleName__'
956                        });
957                        Text.minFontScale(1);
958                        Text.maxFontScale(Math.min(this.updateFontScale(), MAX_FONT_SCALE));
959                        Text.maxLines(1);
960                        Text.textOverflow({ overflow: TextOverflow.Ellipsis });
961                        Text.fontColor(this.colorRow[0]);
962                        Text.fontWeight(this.fontWeightRow[0]);
963                        Text.backgroundColor(this.isBackgroundHoverRow[0] ? this.backgroundColorRow[0] : TRANS_COLOR);
964                        Text.onClick(() => {
965                            this.onItemClick(0);
966                        });
967                        Text.focusable(true);
968                        Text.onHover((isHover) => {
969                            Context.animateTo({
970                                curve: FRICTION_CUBIC_BEZIER,
971                                duration: ANIMATION_DURATION_250
972                            }, () => {
973                                if (isHover) {
974                                    this.backgroundColorRow[0] = {
975                                      'id': -1,
976                                      'type': 10001,
977                                      params: ['sys.color.ohos_id_color_hover'],
978                                      'bundleName': '__harDefaultBundleName__',
979                                      'moduleName': '__harDefaultModuleName__'
980                                    };
981                                    this.isBackgroundHoverRow[0] = true;
982                                } else {
983                                    this.isBackgroundHoverRow[0] = false;
984                                }
985                            });
986                        });
987                        Text.onTouch((event) => {
988                            if (event.type === TouchType.Down) {
989                                Context.animateTo({
990                                    curve: SHARP_CUBIC_BEZIER,
991                                    duration: ANIMATION_DURATION_100
992                                }, () => {
993                                    this.backgroundColorRow[0] = {
994                                        'id': -1,
995                                        'type': 10001,
996                                        params: ['sys.color.ohos_id_color_click_effect'],
997                                        'bundleName': '__harDefaultBundleName__',
998                                        'moduleName': '__harDefaultModuleName__'
999                                    };
1000                                    this.isBackgroundHoverRow[0] = true;
1001                                });
1002                            } else if (event.type === TouchType.Up) {
1003                                Context.animateTo({
1004                                    curve: SHARP_CUBIC_BEZIER,
1005                                    duration: ANIMATION_DURATION_100
1006                                }, () => {
1007                                    this.isBackgroundHoverRow[0] = false;
1008                                });
1009                            }
1010                        });
1011                        ViewStackProcessor.visualState('focused');
1012                        Text.border({
1013                            radius: {
1014                                'id': -1,
1015                                'type': 10002,
1016                                params: ['sys.float.ohos_id_corner_radius_clicked'],
1017                                'bundleName': '__harDefaultBundleName__',
1018                                'moduleName': '__harDefaultModuleName__'
1019                            },
1020                            width: FOCUS_BORDER_WIDTH,
1021                            color: {
1022                                'id': -1,
1023                                'type': 10001,
1024                                params: ['sys.color.ohos_id_color_focused_outline'],
1025                                'bundleName': '__harDefaultBundleName__',
1026                                'moduleName': '__harDefaultModuleName__'
1027                            },
1028                            style: BorderStyle.Solid
1029                        });
1030                        Text.padding({
1031                            start: LengthMetrics.vp(TEXT_HOT_AREA_WIDTH - FOCUS_BORDER_WIDTH),
1032                            end: LengthMetrics.vp(TEXT_HOT_AREA_WIDTH - FOCUS_BORDER_WIDTH)
1033                        });
1034                        ViewStackProcessor.visualState('normal');
1035                        Text.border({
1036                            radius: {
1037                                'id': -1,
1038                                'type': 10002,
1039                                params: ['sys.float.ohos_id_corner_radius_clicked'],
1040                                'bundleName': '__harDefaultBundleName__',
1041                                'moduleName': '__harDefaultModuleName__'
1042                            },
1043                            width: 0
1044                        });
1045                        Text.padding({
1046                            start: LengthMetrics.vp(TEXT_HOT_AREA_WIDTH),
1047                            end: LengthMetrics.vp(TEXT_HOT_AREA_WIDTH)
1048                        });
1049                        ViewStackProcessor.visualState();
1050                        Text.constraintSize({ maxWidth: '50%' });
1051                        Text.flexShrink(0);
1052                        Text.tabIndex(this.rowIndex);
1053                    }, Text);
1054                    Text.pop();
1055                });
1056            } else {
1057                this.ifElseBranchUpdateFunction(1, () => {
1058                });
1059            }
1060        }, If);
1061        If.pop();
1062        this.observeComponentCreation2((elmtId, isInitialRender) => {
1063            Row.create();
1064            Row.width(PERCENT_100);
1065            Row.onAreaChange((_oldValue, newValue) => {
1066                this.filterColumnWidth = vp2px(parseInt(newValue.width.toString(), 0));
1067                if (this.twoLineModeItemNumRow.value === 0) {
1068                    let curLineSum = this.calcMultiFilterRowItemNum();
1069                    this.twoLineModeItemNumRow.value = curLineSum;
1070                    this.twoLineModeItemNumRecordRow.value = curLineSum;
1071                    if (this.filterRow && curLineSum < this.filterRow.options.length - 1) {
1072                        this.arrowShowStateRow.value = true;
1073                    } else {
1074                        this.arrowShowStateRow.value = false;
1075                    }
1076                } else if (this.filterColumnWidth !== this.lastFilterColumnWidth) {
1077                    let curLineSum = this.calcMultiFilterRowItemNum();
1078                    if (this.filterRow && curLineSum < this.filterRow.options.length - 1) {
1079                        if (!this.arrowShowStateRow.value || this.isArrowIconDown.value) {
1080                            this.arrowShowStateRow.value = true;
1081                            this.isArrowIconDown.value = true;
1082                            this.twoLineModeItemNumRow.value = curLineSum;
1083                        }
1084                    } else {
1085                        this.arrowShowStateRow.value = false;
1086                        this.isArrowIconDown.value = false;
1087                        this.twoLineModeItemNumRow.value = curLineSum;
1088                    }
1089                    this.twoLineModeItemNumRecordRow.value = curLineSum;
1090                }
1091                this.lastFilterColumnWidth = this.filterColumnWidth;
1092            });
1093        }, Row);
1094        this.observeComponentCreation2((elmtId, isInitialRender) => {
1095            Flex.create({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap });
1096        }, Flex);
1097        this.observeComponentCreation2((elmtId, isInitialRender) => {
1098            ForEach.create();
1099            const forEachItemGenFunction = (_item, colIndex) => {
1100                const option = _item;
1101                this.observeComponentCreation2((elmtId, isInitialRender) => {
1102                    If.create();
1103                    if (colIndex > 0) {
1104                        this.ifElseBranchUpdateFunction(0, () => {
1105                            this.observeComponentCreation2((elmtId, isInitialRender) => {
1106                                Text.create(option.toString());
1107                                Text.transition(TransitionEffect.OPACITY);
1108                                Text.fontSize({
1109                                    'id': -1,
1110                                    'type': 10002,
1111                                    params: ['sys.float.ohos_id_text_size_body3'],
1112                                    'bundleName': '__harDefaultBundleName__',
1113                                    'moduleName': '__harDefaultModuleName__'
1114                                });
1115                                Text.minFontScale(1);
1116                                Text.maxFontScale(Math.min(this.updateFontScale(), MAX_FONT_SCALE));
1117                                Text.maxLines(1);
1118                                Text.textOverflow({ overflow: TextOverflow.Ellipsis });
1119                                Text.height(LIST_ROW_HEIGHT);
1120                                Text.fontColor(this.colorRow[colIndex]);
1121                                Text.fontWeight(this.fontWeightRow[colIndex]);
1122                                Text.backgroundColor(this.isBackgroundHoverRow[colIndex] ?
1123                                this.backgroundColorRow[colIndex] : TRANS_COLOR);
1124                                Text.onClick(() => {
1125                                    this.onItemClick(colIndex);
1126                                });
1127                                Text.onHover((isHover) => {
1128                                    Context.animateTo({
1129                                        curve: FRICTION_CUBIC_BEZIER,
1130                                        duration: ANIMATION_DURATION_250
1131                                    }, () => {
1132                                        if (isHover) {
1133                                            this.backgroundColorRow[colIndex] = {
1134                                                'id': -1,
1135                                                'type': 10001,
1136                                                params: ['sys.color.ohos_id_color_hover'],
1137                                                'bundleName': '__harDefaultBundleName__',
1138                                                'moduleName': '__harDefaultModuleName__'
1139                                            };
1140                                            this.isBackgroundHoverRow[colIndex] = true;
1141                                        } else {
1142                                            this.isBackgroundHoverRow[colIndex] = false;
1143                                        }
1144                                    });
1145                                });
1146                                Text.onTouch((event) => {
1147                                    if (event.type === TouchType.Down) {
1148                                        Context.animateTo({
1149                                            curve: SHARP_CUBIC_BEZIER,
1150                                            duration: ANIMATION_DURATION_100
1151                                        }, () => {
1152                                            this.backgroundColorRow[colIndex] = {
1153                                                'id': -1,
1154                                                'type': 10001,
1155                                                params: ['sys.color.ohos_id_color_click_effect'],
1156                                                'bundleName': '__harDefaultBundleName__',
1157                                                'moduleName': '__harDefaultModuleName__'
1158                                            };
1159                                            this.isBackgroundHoverRow[colIndex] = true;
1160                                        });
1161                                    } else if (event.type === TouchType.Up) {
1162                                        Context.animateTo({
1163                                            curve: SHARP_CUBIC_BEZIER,
1164                                            duration: ANIMATION_DURATION_100
1165                                        }, () => {
1166                                            this.isBackgroundHoverRow[colIndex] = false;
1167                                        });
1168                                    }
1169                                });
1170                                Text.focusable(true);
1171                                ViewStackProcessor.visualState('focused');
1172                                Text.border({
1173                                    radius: {
1174                                        'id': -1,
1175                                        'type': 10002,
1176                                        params: ['sys.float.ohos_id_corner_radius_clicked'],
1177                                        'bundleName': '__harDefaultBundleName__',
1178                                        'moduleName': '__harDefaultModuleName__'
1179                                    },
1180                                    width: FOCUS_BORDER_WIDTH,
1181                                    color: {
1182                                        'id': -1,
1183                                        'type': 10001,
1184                                        params: ['sys.color.ohos_id_color_focused_outline'],
1185                                        'bundleName': '__harDefaultBundleName__',
1186                                        'moduleName': '__harDefaultModuleName__'
1187                                    },
1188                                    style: BorderStyle.Solid
1189                                });
1190                                Text.padding({
1191                                    start: LengthMetrics.vp(TEXT_HOT_AREA_WIDTH - FOCUS_BORDER_WIDTH),
1192                                    end: LengthMetrics.vp(TEXT_HOT_AREA_WIDTH - FOCUS_BORDER_WIDTH)
1193                                });
1194                                ViewStackProcessor.visualState('normal');
1195                                Text.border({
1196                                    radius: {
1197                                        'id': -1,
1198                                        'type': 10002,
1199                                        params: ['sys.float.ohos_id_corner_radius_clicked'],
1200                                        'bundleName': '__harDefaultBundleName__',
1201                                        'moduleName': '__harDefaultModuleName__'
1202                                    },
1203                                    width: 0
1204                                });
1205                                Text.padding({
1206                                    start: LengthMetrics.vp(TEXT_HOT_AREA_WIDTH),
1207                                    end: LengthMetrics.vp(TEXT_HOT_AREA_WIDTH)
1208                                });
1209                                ViewStackProcessor.visualState();
1210                                Text.tabIndex(-1);
1211                            }, Text);
1212                            Text.pop();
1213                        });
1214                    } else {
1215                        this.ifElseBranchUpdateFunction(1, () => {
1216                        });
1217                    }
1218                }, If);
1219                If.pop();
1220            };
1221            this.forEachUpdateFunction(elmtId, this.filterRow?.options.slice(0, this.twoLineModeItemNumRow.value + 1),
1222                forEachItemGenFunction, undefined, true, false);
1223        }, ForEach);
1224        ForEach.pop();
1225        this.observeComponentCreation2((elmtId, isInitialRender) => {
1226            If.create();
1227            if (this.arrowShowStateRow.value) {
1228                this.ifElseBranchUpdateFunction(0, () => {
1229                  this.DownAndUpArrow.bind(this)();
1230                });
1231            } else {
1232                this.ifElseBranchUpdateFunction(1, () => {
1233                });
1234            }
1235        }, If);
1236        If.pop();
1237        Flex.pop();
1238        Row.pop();
1239        Flex.pop();
1240        PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop();
1241    }
1242
1243    rerender() {
1244        PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this);
1245        this.updateDirtyElements();
1246        PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop();
1247    }
1248}
1249
1250export class Filter extends ViewPU {
1251    constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) {
1252        super(parent, __localStorage, elmtId, extraInfo);
1253        if (typeof paramsLambda === 'function') {
1254            this.paramsGenerator_ = paramsLambda;
1255        }
1256        this.container = undefined;
1257        this.__multiFilters = new SynchedPropertyObjectOneWayPU(params.multiFilters, this, 'multiFilters');
1258        this.__additionFilters = new SynchedPropertyObjectOneWayPU(params.additionFilters, this, 'additionFilters');
1259        this.onFilterChanged = null;
1260        this.__filterType = new SynchedPropertySimpleOneWayPU(params.filterType, this, 'filterType');
1261        this.selectedFilters = null;
1262        this.__colorArr = new ObservedPropertyObjectPU(null, this, 'colorArr');
1263        this.__fontWeightArr = new ObservedPropertyObjectPU(null, this, 'fontWeightArr');
1264        this.__backgroundColorArr = new ObservedPropertyObjectPU(null, this, 'backgroundColorArr');
1265        this.__isBackgroundHover = new ObservedPropertyObjectPU(null, this, 'isBackgroundHover');
1266        this.__floatArrowBgColor = new ObservedPropertyObjectPU(null, this, 'floatArrowBgColor');
1267        this.__isFloatArrowBgHover = new ObservedPropertySimplePU(false, this, 'isFloatArrowBgHover');
1268        this.__isArrowIconDownArr = new ObservedPropertyObjectPU(null, this, 'isArrowIconDownArr');
1269        this.__additionColorArr = new ObservedPropertyObjectPU(null, this, 'additionColorArr');
1270        this.__additionFontWeightArr = new ObservedPropertyObjectPU(null, this, 'additionFontWeightArr');
1271        this.__additionBackgroundColorArr = new ObservedPropertyObjectPU(null, this, 'additionBackgroundColorArr');
1272        this.__isAdditionBackgroundHover = new ObservedPropertyObjectPU(null, this, 'isAdditionBackgroundHover');
1273        this.__colorRefresh = new ObservedPropertySimplePU(false, this, 'colorRefresh');
1274        this.__isFloatBarShow = new ObservedPropertySimplePU(false, this, 'isFloatBarShow');
1275        this.isFloatBarShowWithoutAnimation = false;
1276        this.__isFloatShowAllFilter = new ObservedPropertySimplePU(false, this, 'isFloatShowAllFilter');
1277        this.isFloatShowAllFilterWithoutAnimation = false;
1278        this.__floatFilterPosition = new ObservedPropertySimplePU(0, this, 'floatFilterPosition');
1279        this.__floatFilterBarHeight = new ObservedPropertySimplePU(0, this, 'floatFilterBarHeight');
1280        this.__floatFilterBarPosition = new ObservedPropertySimplePU(0, this, 'floatFilterBarPosition');
1281        this.filterDynamicHeight = 0;
1282        this.__twoLineModeItemNum = new ObservedPropertyObjectPU(null, this, 'twoLineModeItemNum');
1283        this.__twoLineModeItemNumRecord = new ObservedPropertyObjectPU(null, this, 'twoLineModeItemNumRecord');
1284        this.__downArrowShowState = new ObservedPropertyObjectPU(null, this, 'downArrowShowState');
1285        this.__floatFilterBarText = new ObservedPropertySimplePU('', this, 'floatFilterBarText');
1286        this.maxAppFontScale = 1;
1287        this.isFollowingSystemFontScale = false;
1288        this.setInitiallyProvidedValue(params);
1289        this.finalizeConstruction();
1290    }
1291
1292    setInitiallyProvidedValue(params) {
1293        if (params.container !== undefined) {
1294            this.container = params.container;
1295        }
1296        if (params.multiFilters === undefined) {
1297            this.__multiFilters.set([]);
1298        }
1299        if (params.additionFilters === undefined) {
1300            this.__additionFilters.set(null);
1301        }
1302        if (params.onFilterChanged !== undefined) {
1303            this.onFilterChanged = params.onFilterChanged;
1304        }
1305        if (params.filterType === undefined) {
1306            this.__filterType.set(FilterType.LIST_FILTER);
1307        }
1308        if (params.selectedFilters !== undefined) {
1309            this.selectedFilters = params.selectedFilters;
1310        }
1311        if (params.colorArr !== undefined) {
1312            this.colorArr = params.colorArr;
1313        }
1314        if (params.fontWeightArr !== undefined) {
1315            this.fontWeightArr = params.fontWeightArr;
1316        }
1317        if (params.backgroundColorArr !== undefined) {
1318            this.backgroundColorArr = params.backgroundColorArr;
1319        }
1320        if (params.isBackgroundHover !== undefined) {
1321            this.isBackgroundHover = params.isBackgroundHover;
1322        }
1323        if (params.floatArrowBgColor !== undefined) {
1324            this.floatArrowBgColor = params.floatArrowBgColor;
1325        }
1326        if (params.isFloatArrowBgHover !== undefined) {
1327            this.isFloatArrowBgHover = params.isFloatArrowBgHover;
1328        }
1329        if (params.isArrowIconDownArr !== undefined) {
1330            this.isArrowIconDownArr = params.isArrowIconDownArr;
1331        }
1332        if (params.additionColorArr !== undefined) {
1333            this.additionColorArr = params.additionColorArr;
1334        }
1335        if (params.additionFontWeightArr !== undefined) {
1336            this.additionFontWeightArr = params.additionFontWeightArr;
1337        }
1338        if (params.additionBackgroundColorArr !== undefined) {
1339            this.additionBackgroundColorArr = params.additionBackgroundColorArr;
1340        }
1341        if (params.isAdditionBackgroundHover !== undefined) {
1342            this.isAdditionBackgroundHover = params.isAdditionBackgroundHover;
1343        }
1344        if (params.colorRefresh !== undefined) {
1345            this.colorRefresh = params.colorRefresh;
1346        }
1347        if (params.isFloatBarShow !== undefined) {
1348            this.isFloatBarShow = params.isFloatBarShow;
1349        }
1350        if (params.isFloatBarShowWithoutAnimation !== undefined) {
1351            this.isFloatBarShowWithoutAnimation = params.isFloatBarShowWithoutAnimation;
1352        }
1353        if (params.isFloatShowAllFilter !== undefined) {
1354            this.isFloatShowAllFilter = params.isFloatShowAllFilter;
1355        }
1356        if (params.isFloatShowAllFilterWithoutAnimation !== undefined) {
1357            this.isFloatShowAllFilterWithoutAnimation = params.isFloatShowAllFilterWithoutAnimation;
1358        }
1359        if (params.floatFilterPosition !== undefined) {
1360            this.floatFilterPosition = params.floatFilterPosition;
1361        }
1362        if (params.floatFilterBarHeight !== undefined) {
1363            this.floatFilterBarHeight = params.floatFilterBarHeight;
1364        }
1365        if (params.floatFilterBarPosition !== undefined) {
1366            this.floatFilterBarPosition = params.floatFilterBarPosition;
1367        }
1368        if (params.filterDynamicHeight !== undefined) {
1369            this.filterDynamicHeight = params.filterDynamicHeight;
1370        }
1371        if (params.twoLineModeItemNum !== undefined) {
1372            this.twoLineModeItemNum = params.twoLineModeItemNum;
1373        }
1374        if (params.twoLineModeItemNumRecord !== undefined) {
1375            this.twoLineModeItemNumRecord = params.twoLineModeItemNumRecord;
1376        }
1377        if (params.downArrowShowState !== undefined) {
1378            this.downArrowShowState = params.downArrowShowState;
1379        }
1380        if (params.floatFilterBarText !== undefined) {
1381            this.floatFilterBarText = params.floatFilterBarText;
1382        }
1383        if (params.maxAppFontScale !== undefined) {
1384            this.maxAppFontScale = params.maxAppFontScale;
1385        }
1386        if (params.isFollowingSystemFontScale !== undefined) {
1387            this.isFollowingSystemFontScale = params.isFollowingSystemFontScale;
1388        }
1389    }
1390
1391    updateStateVars(params) {
1392        this.__multiFilters.reset(params.multiFilters);
1393        this.__additionFilters.reset(params.additionFilters);
1394        this.__filterType.reset(params.filterType);
1395    }
1396
1397    purgeVariableDependenciesOnElmtId(rmElmtId) {
1398        this.__multiFilters.purgeDependencyOnElmtId(rmElmtId);
1399        this.__additionFilters.purgeDependencyOnElmtId(rmElmtId);
1400        this.__filterType.purgeDependencyOnElmtId(rmElmtId);
1401        this.__colorArr.purgeDependencyOnElmtId(rmElmtId);
1402        this.__fontWeightArr.purgeDependencyOnElmtId(rmElmtId);
1403        this.__backgroundColorArr.purgeDependencyOnElmtId(rmElmtId);
1404        this.__isBackgroundHover.purgeDependencyOnElmtId(rmElmtId);
1405        this.__floatArrowBgColor.purgeDependencyOnElmtId(rmElmtId);
1406        this.__isFloatArrowBgHover.purgeDependencyOnElmtId(rmElmtId);
1407        this.__isArrowIconDownArr.purgeDependencyOnElmtId(rmElmtId);
1408        this.__additionColorArr.purgeDependencyOnElmtId(rmElmtId);
1409        this.__additionFontWeightArr.purgeDependencyOnElmtId(rmElmtId);
1410        this.__additionBackgroundColorArr.purgeDependencyOnElmtId(rmElmtId);
1411        this.__isAdditionBackgroundHover.purgeDependencyOnElmtId(rmElmtId);
1412        this.__colorRefresh.purgeDependencyOnElmtId(rmElmtId);
1413        this.__isFloatBarShow.purgeDependencyOnElmtId(rmElmtId);
1414        this.__isFloatShowAllFilter.purgeDependencyOnElmtId(rmElmtId);
1415        this.__floatFilterPosition.purgeDependencyOnElmtId(rmElmtId);
1416        this.__floatFilterBarHeight.purgeDependencyOnElmtId(rmElmtId);
1417        this.__floatFilterBarPosition.purgeDependencyOnElmtId(rmElmtId);
1418        this.__twoLineModeItemNum.purgeDependencyOnElmtId(rmElmtId);
1419        this.__twoLineModeItemNumRecord.purgeDependencyOnElmtId(rmElmtId);
1420        this.__downArrowShowState.purgeDependencyOnElmtId(rmElmtId);
1421        this.__floatFilterBarText.purgeDependencyOnElmtId(rmElmtId);
1422    }
1423
1424    aboutToBeDeleted() {
1425        this.__multiFilters.aboutToBeDeleted();
1426        this.__additionFilters.aboutToBeDeleted();
1427        this.__filterType.aboutToBeDeleted();
1428        this.__colorArr.aboutToBeDeleted();
1429        this.__fontWeightArr.aboutToBeDeleted();
1430        this.__backgroundColorArr.aboutToBeDeleted();
1431        this.__isBackgroundHover.aboutToBeDeleted();
1432        this.__floatArrowBgColor.aboutToBeDeleted();
1433        this.__isFloatArrowBgHover.aboutToBeDeleted();
1434        this.__isArrowIconDownArr.aboutToBeDeleted();
1435        this.__additionColorArr.aboutToBeDeleted();
1436        this.__additionFontWeightArr.aboutToBeDeleted();
1437        this.__additionBackgroundColorArr.aboutToBeDeleted();
1438        this.__isAdditionBackgroundHover.aboutToBeDeleted();
1439        this.__colorRefresh.aboutToBeDeleted();
1440        this.__isFloatBarShow.aboutToBeDeleted();
1441        this.__isFloatShowAllFilter.aboutToBeDeleted();
1442        this.__floatFilterPosition.aboutToBeDeleted();
1443        this.__floatFilterBarHeight.aboutToBeDeleted();
1444        this.__floatFilterBarPosition.aboutToBeDeleted();
1445        this.__twoLineModeItemNum.aboutToBeDeleted();
1446        this.__twoLineModeItemNumRecord.aboutToBeDeleted();
1447        this.__downArrowShowState.aboutToBeDeleted();
1448        this.__floatFilterBarText.aboutToBeDeleted();
1449        SubscriberManager.Get().delete(this.id__());
1450        this.aboutToBeDeletedInternal();
1451    }
1452
1453    get multiFilters() {
1454        return this.__multiFilters.get();
1455    }
1456
1457    set multiFilters(newValue) {
1458        this.__multiFilters.set(newValue);
1459    }
1460
1461    get additionFilters() {
1462        return this.__additionFilters.get();
1463    }
1464
1465    set additionFilters(newValue) {
1466        this.__additionFilters.set(newValue);
1467    }
1468
1469    get filterType() {
1470        return this.__filterType.get();
1471    }
1472
1473    set filterType(newValue) {
1474        this.__filterType.set(newValue);
1475    }
1476
1477    get colorArr() {
1478        return this.__colorArr.get();
1479    }
1480
1481    set colorArr(newValue) {
1482        this.__colorArr.set(newValue);
1483    }
1484
1485    get fontWeightArr() {
1486        return this.__fontWeightArr.get();
1487    }
1488
1489    set fontWeightArr(newValue) {
1490        this.__fontWeightArr.set(newValue);
1491    }
1492
1493    get backgroundColorArr() {
1494        return this.__backgroundColorArr.get();
1495    }
1496
1497    set backgroundColorArr(newValue) {
1498        this.__backgroundColorArr.set(newValue);
1499    }
1500
1501    get isBackgroundHover() {
1502        return this.__isBackgroundHover.get();
1503    }
1504
1505    set isBackgroundHover(newValue) {
1506        this.__isBackgroundHover.set(newValue);
1507    }
1508
1509    get floatArrowBgColor() {
1510        return this.__floatArrowBgColor.get();
1511    }
1512
1513    set floatArrowBgColor(newValue) {
1514        this.__floatArrowBgColor.set(newValue);
1515    }
1516
1517    get isFloatArrowBgHover() {
1518        return this.__isFloatArrowBgHover.get();
1519    }
1520
1521    set isFloatArrowBgHover(newValue) {
1522        this.__isFloatArrowBgHover.set(newValue);
1523    }
1524
1525    get isArrowIconDownArr() {
1526        return this.__isArrowIconDownArr.get();
1527    }
1528
1529    set isArrowIconDownArr(newValue) {
1530        this.__isArrowIconDownArr.set(newValue);
1531    }
1532
1533    get additionColorArr() {
1534        return this.__additionColorArr.get();
1535    }
1536
1537    set additionColorArr(newValue) {
1538        this.__additionColorArr.set(newValue);
1539    }
1540
1541    get additionFontWeightArr() {
1542        return this.__additionFontWeightArr.get();
1543    }
1544
1545    set additionFontWeightArr(newValue) {
1546        this.__additionFontWeightArr.set(newValue);
1547    }
1548
1549    get additionBackgroundColorArr() {
1550        return this.__additionBackgroundColorArr.get();
1551    }
1552
1553    set additionBackgroundColorArr(newValue) {
1554        this.__additionBackgroundColorArr.set(newValue);
1555    }
1556
1557    get isAdditionBackgroundHover() {
1558        return this.__isAdditionBackgroundHover.get();
1559    }
1560
1561    set isAdditionBackgroundHover(newValue) {
1562        this.__isAdditionBackgroundHover.set(newValue);
1563    }
1564
1565    get colorRefresh() {
1566        return this.__colorRefresh.get();
1567    }
1568
1569    set colorRefresh(newValue) {
1570        this.__colorRefresh.set(newValue);
1571    }
1572
1573    get isFloatBarShow() {
1574        return this.__isFloatBarShow.get();
1575    }
1576
1577    set isFloatBarShow(newValue) {
1578        this.__isFloatBarShow.set(newValue);
1579    }
1580
1581    get isFloatShowAllFilter() {
1582        return this.__isFloatShowAllFilter.get();
1583    }
1584
1585    set isFloatShowAllFilter(newValue) {
1586        this.__isFloatShowAllFilter.set(newValue);
1587    }
1588
1589    get floatFilterPosition() {
1590        return this.__floatFilterPosition.get();
1591    }
1592
1593    set floatFilterPosition(newValue) {
1594        this.__floatFilterPosition.set(newValue);
1595    }
1596
1597    get floatFilterBarHeight() {
1598        return this.__floatFilterBarHeight.get();
1599    }
1600
1601    set floatFilterBarHeight(newValue) {
1602        this.__floatFilterBarHeight.set(newValue);
1603    }
1604
1605    get floatFilterBarPosition() {
1606        return this.__floatFilterBarPosition.get();
1607    }
1608
1609    set floatFilterBarPosition(newValue) {
1610        this.__floatFilterBarPosition.set(newValue);
1611    }
1612
1613    get twoLineModeItemNum() {
1614        return this.__twoLineModeItemNum.get();
1615    }
1616
1617    set twoLineModeItemNum(newValue) {
1618        this.__twoLineModeItemNum.set(newValue);
1619    }
1620
1621    get twoLineModeItemNumRecord() {
1622        return this.__twoLineModeItemNumRecord.get();
1623    }
1624
1625    set twoLineModeItemNumRecord(newValue) {
1626        this.__twoLineModeItemNumRecord.set(newValue);
1627    }
1628
1629    get downArrowShowState() {
1630        return this.__downArrowShowState.get();
1631    }
1632
1633    set downArrowShowState(newValue) {
1634        this.__downArrowShowState.set(newValue);
1635    }
1636
1637    get floatFilterBarText() {
1638        return this.__floatFilterBarText.get();
1639    }
1640
1641    set floatFilterBarText(newValue) {
1642        this.__floatFilterBarText.set(newValue);
1643    }
1644
1645    textColor(rowIndex, colIndex) {
1646        if (this.selectedFilters && this.selectedFilters.length > rowIndex &&
1647            this.selectedFilters[rowIndex].index === colIndex) {
1648            return {
1649                'id': -1,
1650                'type': 10001,
1651                params: ['sys.color.ohos_id_color_text_primary_activated'],
1652                'bundleName': '__harDefaultBundleName__',
1653                'moduleName': '__harDefaultModuleName__'
1654            };
1655        }
1656        return {
1657            'id': -1,
1658            'type': 10001,
1659            params: ['sys.color.ohos_id_color_text_primary'],
1660            'bundleName': '__harDefaultBundleName__',
1661            'moduleName': '__harDefaultModuleName__'
1662        };
1663    }
1664
1665    aboutToAppear() {
1666        this.initParams();
1667        try {
1668            let uiContent = this.getUIContext();
1669            this.isFollowingSystemFontScale = uiContent.isFollowingSystemFontScale();
1670            this.maxAppFontScale = uiContent.getMaxFontScale();
1671        } catch (err) {
1672            let code = err.code;
1673            let message = err.message;
1674            hilog.error(ERROR_CODE, 'Ace', `Failed to init fontsizescale info, cause,
1675              code: ${code}, message: ${message}`);
1676        }
1677    }
1678
1679    updateFontScale() {
1680        let uiContent = this.getUIContext();
1681        let systemFontScale = uiContent.getHostContext()?.config?.fontSizeScale ?? 1;
1682        if (!this.isFollowingSystemFontScale) {
1683            return 1;
1684        }
1685        return Math.min(systemFontScale, this.maxAppFontScale);
1686    }
1687
1688    filterItemClick(rowIndex, colIndex) {
1689        let selectedFilterValue = this.multiFilters[rowIndex].options[colIndex];
1690        if (this.selectedFilters && colIndex !== this.selectedFilters[rowIndex].index) {
1691            if (this.colorArr) {
1692                this.colorArr[rowIndex][colIndex] = {
1693                    'id': -1,
1694                    'type': 10001,
1695                    params: ['sys.color.ohos_id_color_text_primary_activated'],
1696                    'bundleName': '__harDefaultBundleName__',
1697                    'moduleName': '__harDefaultModuleName__'
1698                };
1699                this.colorArr[rowIndex][this.selectedFilters[rowIndex].index] = {
1700                    'id': -1,
1701                    'type': 10001,
1702                    params: ['sys.color.ohos_id_color_text_primary'],
1703                    'bundleName': '__harDefaultBundleName__',
1704                    'moduleName': '__harDefaultModuleName__'
1705                };
1706            }
1707            if (this.fontWeightArr) {
1708                this.fontWeightArr[rowIndex][colIndex] = FontWeight.Medium;
1709                this.fontWeightArr[rowIndex][this.selectedFilters[rowIndex].index] = FontWeight.Regular;
1710            }
1711            this.colorRefresh = !this.colorRefresh;
1712            this.selectedFilters[rowIndex].value = selectedFilterValue;
1713            this.selectedFilters[rowIndex].index = colIndex;
1714            let filterChanged = this.onFilterChanged;
1715            filterChanged && filterChanged(this.selectedFilters);
1716        }
1717        this.refreshFloatFilterBarText();
1718    }
1719
1720    refreshFloatFilterBarText() {
1721        this.floatFilterBarText = '';
1722        if (this.selectedFilters) {
1723            for (let i = 0; i < this.selectedFilters.length; i++) {
1724                if (this.selectedFilters[i].value !== null) {
1725                    if (i === 0) {
1726                        this.floatFilterBarText += this.selectedFilters[i].value;
1727                    } else {
1728                        this.floatFilterBarText += '/' + this.selectedFilters[i].value;
1729                    }
1730                }
1731            }
1732        }
1733    }
1734
1735    initParams() {
1736        if (!this.selectedFilters) {
1737            this.selectedFilters = [];
1738            for (let filter of this.multiFilters) {
1739                let result = { name: filter.name, index: -1, value: '' };
1740                if (filter.options.length > 0) {
1741                    result.index = 0;
1742                    result.value = filter.options[0];
1743                }
1744                this.selectedFilters.push(result);
1745            }
1746            if (this.additionFilters && this.additionFilters.name) {
1747                let result = { name: this.additionFilters.name, index: -1, value: '' };
1748                this.selectedFilters.push(result);
1749            }
1750            this.refreshFloatFilterBarText();
1751        }
1752        if (!this.colorArr) {
1753            this.colorArr = [];
1754            this.backgroundColorArr = [];
1755            this.isBackgroundHover = [];
1756            this.fontWeightArr = [];
1757            this.isArrowIconDownArr = [];
1758            this.floatArrowBgColor = {
1759                'id': -1,
1760                'type': 10001,
1761                params: ['sys.color.ohos_id_color_background'],
1762                'bundleName': '__harDefaultBundleName__',
1763                'moduleName': '__harDefaultModuleName__'
1764            };
1765            for (let filter of this.multiFilters) {
1766                let colorRow = new ResourceArray();
1767                let fontWeightRow = new FontWeightArray();
1768                let backgroundColorRow = new ResourceArray();
1769                let isBackgroundHoverRow = new BooleanArray();
1770                for (let index of filter.options.keys()) {
1771                    if (index === 0) {
1772                        colorRow.push({
1773                            'id': -1,
1774                            'type': 10001,
1775                            params: ['sys.color.ohos_id_color_text_primary_activated'],
1776                            'bundleName': '__harDefaultBundleName__',
1777                            'moduleName': '__harDefaultModuleName__'
1778                        });
1779                        fontWeightRow.push(FontWeight.Medium);
1780                    } else {
1781                        colorRow.push({
1782                            'id': -1,
1783                            'type': 10001,
1784                            params: ['sys.color.ohos_id_color_text_primary'],
1785                            'bundleName': '__harDefaultBundleName__',
1786                            'moduleName': '__harDefaultModuleName__'
1787                        });
1788                        fontWeightRow.push(FontWeight.Regular);
1789                    }
1790                    backgroundColorRow.push({
1791                        'id': -1,
1792                        'type': 10001,
1793                        params: ['sys.color.ohos_id_color_hover'],
1794                        'bundleName': '__harDefaultBundleName__',
1795                        'moduleName': '__harDefaultModuleName__'
1796                    });
1797                }
1798                this.colorArr.push(colorRow);
1799                this.fontWeightArr.push(fontWeightRow);
1800                this.backgroundColorArr.push(backgroundColorRow);
1801                this.isBackgroundHover.push(isBackgroundHoverRow);
1802                this.isArrowIconDownArr.push(new ObservedBoolean(true));
1803            }
1804        }
1805        if (this.additionFilters && this.additionFilters.options) {
1806            this.additionColorArr = [];
1807            this.additionFontWeightArr = [];
1808            this.additionBackgroundColorArr = [];
1809            this.isAdditionBackgroundHover = [];
1810            for (let i = 0; i < this.additionFilters.options.length; i++) {
1811                this.additionColorArr.push({
1812                    'id': -1,
1813                    'type': 10001,
1814                    params: ['sys.color.ohos_id_color_text_primary'],
1815                    'bundleName': '__harDefaultBundleName__',
1816                    'moduleName': '__harDefaultModuleName__'
1817                });
1818                this.additionFontWeightArr.push(FontWeight.Regular);
1819                this.additionBackgroundColorArr.push({
1820                    'id': -1,
1821                    'type': 10001,
1822                    params: ['sys.color.ohos_id_color_hover'],
1823                    'bundleName': '__harDefaultBundleName__',
1824                    'moduleName': '__harDefaultModuleName__'
1825                });
1826                this.isAdditionBackgroundHover.push(false);
1827            }
1828        }
1829        if (!this.twoLineModeItemNum) {
1830            this.twoLineModeItemNum = [];
1831            this.twoLineModeItemNumRecord = [];
1832            this.downArrowShowState = [];
1833            for (let i = 0; i < this.multiFilters.length; i++) {
1834                this.twoLineModeItemNum.push(new ObservedNumber(this.multiFilters[i].options.length));
1835                this.twoLineModeItemNumRecord.push(new ObservedNumber(this.multiFilters[i].options.length));
1836                this.downArrowShowState.push(new ObservedBoolean(false));
1837            }
1838        }
1839    }
1840
1841    ListFilter(parent = null) {
1842        this.observeComponentCreation2((elmtId, isInitialRender) => {
1843            Column.create();
1844            Column.width(PERCENT_100);
1845            Column.align(Alignment.Start);
1846            Column.onAreaChange((_oldValue, newValue) => {
1847                if (!this.isFloatShowAllFilterWithoutAnimation && !this.isFloatBarShowWithoutAnimation) {
1848                    if (this.additionFilters !== null) {
1849                        this.filterDynamicHeight =
1850                            parseInt(newValue.height.toString(), 0) + LIST_ROW_HEIGHT + FILTER_TOP_PADDING;
1851                    } else {
1852                        this.filterDynamicHeight = parseInt(newValue.height.toString(), 0) + FILTER_TOP_PADDING;
1853                    }
1854                    this.floatFilterPosition = -this.filterDynamicHeight;
1855                }
1856            });
1857        }, Column);
1858        this.observeComponentCreation2((elmtId, isInitialRender) => {
1859            ForEach.create();
1860            const forEachItemGenFunction = (_item, rowIndex) => {
1861                const filter = _item;
1862                {
1863                    this.observeComponentCreation2((elmtId, isInitialRender) => {
1864                        if (isInitialRender) {
1865                            let componentCall = new ListFilterRow(this, {
1866                                colorRow: this.colorArr ? this.colorArr[rowIndex] : [],
1867                                fontWeightRow: this.fontWeightArr ? this.fontWeightArr[rowIndex] : [],
1868                                backgroundColorRow: this.backgroundColorArr ? this.backgroundColorArr[rowIndex] : [],
1869                                isBackgroundHoverRow: this.isBackgroundHover ? this.isBackgroundHover[rowIndex] : [],
1870                                filterRow: filter,
1871                                onItemClick: (colIndex) => {
1872                                    this.filterItemClick(rowIndex, colIndex);
1873                                },
1874                                rowIndex: rowIndex,
1875                            }, undefined, elmtId, () => {
1876                            }, { page: 'library/src/main/ets/components/mainpage/filter.ets', line: 810, col: 9 });
1877                            ViewPU.create(componentCall);
1878                            let paramsLambda = () => {
1879                                return {
1880                                    colorRow: this.colorArr ? this.colorArr[rowIndex] : [],
1881                                    fontWeightRow: this.fontWeightArr ? this.fontWeightArr[rowIndex] : [],
1882                                    backgroundColorRow: this.backgroundColorArr ? this.backgroundColorArr[rowIndex] : [],
1883                                    isBackgroundHoverRow: this.isBackgroundHover ? this.isBackgroundHover[rowIndex] : [],
1884                                    filterRow: filter,
1885                                    onItemClick: (colIndex) => {
1886                                        this.filterItemClick(rowIndex, colIndex);
1887                                    },
1888                                    rowIndex: rowIndex
1889                                };
1890                            };
1891                            componentCall.paramsGenerator_ = paramsLambda;
1892                        } else {
1893                            this.updateStateVarsOfChildByElmtId(elmtId, {
1894                                colorRow: this.colorArr ? this.colorArr[rowIndex] : [],
1895                                fontWeightRow: this.fontWeightArr ? this.fontWeightArr[rowIndex] : [],
1896                                backgroundColorRow: this.backgroundColorArr ? this.backgroundColorArr[rowIndex] : [],
1897                                isBackgroundHoverRow: this.isBackgroundHover ? this.isBackgroundHover[rowIndex] : []
1898                            });
1899                        }
1900                    }, { name: 'ListFilterRow' });
1901                }
1902            };
1903            this.forEachUpdateFunction(elmtId, this.multiFilters, forEachItemGenFunction, undefined, true, false);
1904        }, ForEach);
1905        ForEach.pop();
1906        Column.pop();
1907    }
1908
1909    MultiLineFilter(parent = null) {
1910        this.observeComponentCreation2((elmtId, isInitialRender) => {
1911            Column.create();
1912            Column.width(PERCENT_100);
1913            Column.onAreaChange((_oldValue, newValue) => {
1914                if (this.additionFilters !== null) {
1915                    this.filterDynamicHeight =
1916                        parseInt(newValue.height.toString(), 0) + LIST_ROW_HEIGHT + FILTER_TOP_PADDING;
1917                } else {
1918                    this.filterDynamicHeight = parseInt(newValue.height.toString(), 0) + FILTER_TOP_PADDING;
1919                }
1920                if (!this.isFloatBarShowWithoutAnimation && !this.isFloatShowAllFilterWithoutAnimation) {
1921                    this.floatFilterPosition = -this.filterDynamicHeight;
1922                }
1923            });
1924        }, Column);
1925        this.observeComponentCreation2((elmtId, isInitialRender) => {
1926            ForEach.create();
1927            const forEachItemGenFunction = (_item, rowIndex) => {
1928                const filterItem = _item;
1929                {
1930                    this.observeComponentCreation2((elmtId, isInitialRender) => {
1931                        if (isInitialRender) {
1932                            let componentCall = new MultiFilterRow(this, {
1933                                colorRow: this.colorArr ? this.colorArr[rowIndex] : [],
1934                                fontWeightRow: this.fontWeightArr ? this.fontWeightArr[rowIndex] : [],
1935                                backgroundColorRow: this.backgroundColorArr ? this.backgroundColorArr[rowIndex] : [],
1936                                isBackgroundHoverRow: this.isBackgroundHover ? this.isBackgroundHover[rowIndex] : [],
1937                                arrowShowStateRow: this.downArrowShowState ?
1938                                this.downArrowShowState[rowIndex] : new ObservedBoolean(false),
1939                                twoLineModeItemNumRow: this.twoLineModeItemNum ?
1940                                this.twoLineModeItemNum[rowIndex] : new ObservedNumber(0),
1941                                twoLineModeItemNumRecordRow: this.twoLineModeItemNumRecord ?
1942                                this.twoLineModeItemNumRecord[rowIndex] : new ObservedNumber(0),
1943                                isArrowIconDown: this.isArrowIconDownArr ?
1944                                this.isArrowIconDownArr[rowIndex] : new ObservedBoolean(false),
1945                                filterRow: filterItem,
1946                                onItemClick: (colIndex) => {
1947                                  this.filterItemClick(rowIndex, colIndex);
1948                                },
1949                                rowIndex: rowIndex,
1950                            }, undefined, elmtId, () => {
1951                            }, { page: 'library/src/main/ets/components/mainpage/filter.ets', line: 839, col: 9 });
1952                            ViewPU.create(componentCall);
1953                            let paramsLambda = () => {
1954                                return {
1955                                    colorRow: this.colorArr ? this.colorArr[rowIndex] : [],
1956                                    fontWeightRow: this.fontWeightArr ? this.fontWeightArr[rowIndex] : [],
1957                                    backgroundColorRow: this.backgroundColorArr ? this.backgroundColorArr[rowIndex] : [],
1958                                    isBackgroundHoverRow: this.isBackgroundHover ? this.isBackgroundHover[rowIndex] : [],
1959                                    arrowShowStateRow: this.downArrowShowState ?
1960                                    this.downArrowShowState[rowIndex] : new ObservedBoolean(false),
1961                                    twoLineModeItemNumRow: this.twoLineModeItemNum ?
1962                                    this.twoLineModeItemNum[rowIndex] : new ObservedNumber(0),
1963                                    twoLineModeItemNumRecordRow: this.twoLineModeItemNumRecord ?
1964                                    this.twoLineModeItemNumRecord[rowIndex] : new ObservedNumber(0),
1965                                    isArrowIconDown: this.isArrowIconDownArr ?
1966                                    this.isArrowIconDownArr[rowIndex] : new ObservedBoolean(false),
1967                                    filterRow: filterItem,
1968                                    onItemClick: (colIndex) => {
1969                                      this.filterItemClick(rowIndex, colIndex);
1970                                    },
1971                                    rowIndex: rowIndex
1972                                };
1973                            };
1974                            componentCall.paramsGenerator_ = paramsLambda;
1975                        } else {
1976                            this.updateStateVarsOfChildByElmtId(elmtId, {
1977                                colorRow: this.colorArr ? this.colorArr[rowIndex] : [],
1978                                fontWeightRow: this.fontWeightArr ? this.fontWeightArr[rowIndex] : [],
1979                                backgroundColorRow: this.backgroundColorArr ? this.backgroundColorArr[rowIndex] : [],
1980                                isBackgroundHoverRow: this.isBackgroundHover ? this.isBackgroundHover[rowIndex] : [],
1981                                arrowShowStateRow: this.downArrowShowState ?
1982                                this.downArrowShowState[rowIndex] : new ObservedBoolean(false),
1983                                twoLineModeItemNumRow: this.twoLineModeItemNum ?
1984                                this.twoLineModeItemNum[rowIndex] : new ObservedNumber(0),
1985                                twoLineModeItemNumRecordRow: this.twoLineModeItemNumRecord ?
1986                                this.twoLineModeItemNumRecord[rowIndex] : new ObservedNumber(0),
1987                                isArrowIconDown: this.isArrowIconDownArr ?
1988                                this.isArrowIconDownArr[rowIndex] : new ObservedBoolean(false)
1989                            });
1990                        }
1991                    }, { name: 'MultiFilterRow' });
1992                }
1993            };
1994            this.forEachUpdateFunction(elmtId, this.multiFilters, forEachItemGenFunction, undefined, true, false);
1995        }, ForEach);
1996        ForEach.pop();
1997        Column.pop();
1998    }
1999
2000    additionItemClick(index) {
2001        let additionRowIndex = this.multiFilters.length;
2002        if (this.selectedFilters && this.selectedFilters[additionRowIndex].index !== index) {
2003            if (this.selectedFilters[additionRowIndex].index === -1) {
2004                this.additionColorArr && (this.additionColorArr[index] = {
2005                    'id': -1,
2006                    'type': 10001,
2007                    params: ['sys.color.ohos_id_color_text_primary_activated'],
2008                    'bundleName': '__harDefaultBundleName__',
2009                    'moduleName': '__harDefaultModuleName__'
2010                });
2011                this.additionFontWeightArr && (this.additionFontWeightArr[index] = FontWeight.Medium);
2012                this.selectedFilters[additionRowIndex].value =
2013                    this.additionFilters ? this.additionFilters.options[index] : '';
2014                this.selectedFilters[additionRowIndex].index = index;
2015            } else {
2016                let lastIndex = this.selectedFilters[additionRowIndex].index;
2017                this.additionColorArr && (this.additionColorArr[lastIndex] = {
2018                    'id': -1,
2019                    'type': 10001,
2020                    params: ['sys.color.ohos_id_color_text_primary'],
2021                    'bundleName': '__harDefaultBundleName__',
2022                    'moduleName': '__harDefaultModuleName__'
2023                });
2024                this.additionColorArr && (this.additionColorArr[index] = {
2025                    'id': -1,
2026                    'type': 10001,
2027                    params: ['sys.color.ohos_id_color_text_primary_activated'],
2028                    'bundleName': '__harDefaultBundleName__',
2029                    'moduleName': '__harDefaultModuleName__'
2030                });
2031                this.additionFontWeightArr && (this.additionFontWeightArr[lastIndex] = FontWeight.Regular);
2032                this.additionFontWeightArr && (this.additionFontWeightArr[index] = FontWeight.Medium);
2033                this.selectedFilters && (this.selectedFilters[additionRowIndex].value = this.additionFilters ?
2034                this.additionFilters.options[index] : '');
2035                this.selectedFilters && (this.selectedFilters[additionRowIndex].index = index);
2036            }
2037        } else {
2038            this.additionColorArr && (this.additionColorArr[index] = {
2039                'id': -1,
2040                'type': 10001,
2041                params: ['sys.color.ohos_id_color_text_primary'],
2042                'bundleName': '__harDefaultBundleName__',
2043                'moduleName': '__harDefaultModuleName__'
2044            });
2045            this.additionFontWeightArr && (this.additionFontWeightArr[index] = FontWeight.Regular);
2046            this.selectedFilters && (this.selectedFilters[additionRowIndex].value = '');
2047            this.selectedFilters && (this.selectedFilters[additionRowIndex].index = -1);
2048        }
2049        if (this.selectedFilters) {
2050            this.onFilterChanged && this.onFilterChanged(this.selectedFilters);
2051        }
2052        this.colorRefresh = !this.colorRefresh;
2053        this.refreshFloatFilterBarText();
2054    }
2055
2056    AdditionFilterList(parent = null) {
2057        this.observeComponentCreation2((elmtId, isInitialRender) => {
2058            If.create();
2059            if (this.additionFilters && this.additionFilters.name && this.additionFilters.options &&
2060                this.additionFilters.options.length !== 0) {
2061                this.ifElseBranchUpdateFunction(0, () => {
2062                    this.observeComponentCreation2((elmtId, isInitialRender) => {
2063                        Stack.create({ alignContent: Alignment.End });
2064                        Stack.blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN);
2065                    }, Stack);
2066                    this.observeComponentCreation2((elmtId, isInitialRender) => {
2067                        Stack.create({ alignContent: Alignment.Start });
2068                    }, Stack);
2069                    this.observeComponentCreation2((elmtId, isInitialRender) => {
2070                        List.create();
2071                        List.listDirection(Axis.Horizontal);
2072                        List.scrollBar(BarState.Off);
2073                        List.width(PERCENT_100);
2074                        List.height(LIST_ROW_HEIGHT);
2075                    }, List);
2076                    {
2077                        const itemCreation = (elmtId, isInitialRender) => {
2078                            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
2079                            itemCreation2(elmtId, isInitialRender);
2080                            if (!isInitialRender) {
2081                                ListItem.pop();
2082                            }
2083                            ViewStackProcessor.StopGetAccessRecording();
2084                        };
2085                        const itemCreation2 = (elmtId, isInitialRender) => {
2086                            ListItem.create(deepRenderFunction, true);
2087                            ListItem.height(PERCENT_100);
2088                            ListItem.margin({ start: LengthMetrics.vp(-TEXT_HOT_AREA_WIDTH) });
2089                        };
2090                        const deepRenderFunction = (elmtId, isInitialRender) => {
2091                            itemCreation(elmtId, isInitialRender);
2092                            this.observeComponentCreation2((elmtId, isInitialRender) => {
2093                                Row.create();
2094                            }, Row);
2095                            this.observeComponentCreation2((elmtId, isInitialRender) => {
2096                                Text.create(this.additionFilters.name.toString());
2097                                Text.fontSize({
2098                                    'id': -1,
2099                                    'type': 10002,
2100                                    params: ['sys.float.ohos_id_text_size_body3'],
2101                                    'bundleName': '__harDefaultBundleName__',
2102                                    'moduleName': '__harDefaultModuleName__'
2103                                });
2104                                Text.minFontScale(1);
2105                                Text.maxFontScale(Math.min(this.updateFontScale(), MAX_FONT_SCALE));
2106                                Text.fontColor({
2107                                    'id': -1,
2108                                    'type': 10001,
2109                                    params: ['sys.color.ohos_id_color_text_secondary'],
2110                                    'bundleName': '__harDefaultBundleName__',
2111                                    'moduleName': '__harDefaultModuleName__'
2112                                });
2113                                Text.margin({
2114                                    start: LengthMetrics.vp(TEXT_HOT_AREA_WIDTH),
2115                                    end: LengthMetrics.vp(TEXT_HOT_AREA_WIDTH)
2116                                });
2117                                Text.padding({
2118                                    start: LengthMetrics.resource({
2119                                        'id': -1,
2120                                        'type': 10002,
2121                                        params: ['sys.float.ohos_id_max_padding_start'],
2122                                        'bundleName': '__harDefaultBundleName__',
2123                                        'moduleName': '__harDefaultModuleName__'
2124                                    })
2125                                });
2126                            }, Text);
2127                            Text.pop();
2128                            this.observeComponentCreation2((elmtId, isInitialRender) => {
2129                                Row.create();
2130                                Row.width(SEPARATOR_WIDTH);
2131                                Row.height(SEPARATOR_HEIGHT);
2132                                Row.backgroundColor({
2133                                    'id': -1,
2134                                    'type': 10001,
2135                                    params: ['sys.color.ohos_id_color_list_separator'],
2136                                    'bundleName': '__harDefaultBundleName__',
2137                                    'moduleName': '__harDefaultModuleName__'
2138                                });
2139                            }, Row);
2140                            Row.pop();
2141                            Row.pop();
2142                            ListItem.pop();
2143                        };
2144                        this.observeComponentCreation2(itemCreation2, ListItem);
2145                        ListItem.pop();
2146                    }
2147                    this.observeComponentCreation2((elmtId, isInitialRender) => {
2148                        ForEach.create();
2149                        const forEachItemGenFunction = (_item, index) => {
2150                            const option = _item;
2151                            {
2152                                const itemCreation = (elmtId, isInitialRender) => {
2153                                    ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
2154                                    itemCreation2(elmtId, isInitialRender);
2155                                    if (!isInitialRender) {
2156                                        ListItem.pop();
2157                                    }
2158                                    ViewStackProcessor.StopGetAccessRecording();
2159                                };
2160                                const itemCreation2 = (elmtId, isInitialRender) => {
2161                                    ListItem.create(deepRenderFunction, true);
2162                                    ListItem.height(PERCENT_100);
2163                                    ListItem.backgroundColor(this.isAdditionBackgroundHover &&
2164                                    this.isAdditionBackgroundHover[index] ? this.additionBackgroundColorArr ?
2165                                    this.additionBackgroundColorArr[index] : '' : TRANS_COLOR);
2166                                    ListItem.onHover((isHover) => {
2167                                        Context.animateTo({
2168                                            curve: FRICTION_CUBIC_BEZIER,
2169                                            duration: ANIMATION_DURATION_250
2170                                        }, () => {
2171                                            if (isHover) {
2172                                                this.additionBackgroundColorArr &&
2173                                                    (this.additionBackgroundColorArr[index] = {
2174                                                      'id': -1,
2175                                                      'type': 10001,
2176                                                      params: ['sys.color.ohos_id_color_hover'],
2177                                                      'bundleName': '__harDefaultBundleName__',
2178                                                      'moduleName': '__harDefaultModuleName__'
2179                                                    });
2180                                                this.isAdditionBackgroundHover &&
2181                                                    (this.isAdditionBackgroundHover[index] = true);
2182                                            } else {
2183                                                this.isAdditionBackgroundHover &&
2184                                                    (this.isAdditionBackgroundHover[index] = false);
2185                                            }
2186                                        });
2187                                    });
2188                                    ListItem.onTouch((event) => {
2189                                        if (event.type === TouchType.Down) {
2190                                            Context.animateTo({
2191                                                curve: SHARP_CUBIC_BEZIER,
2192                                                duration: ANIMATION_DURATION_100
2193                                            }, () => {
2194                                                this.additionBackgroundColorArr &&
2195                                                    (this.additionBackgroundColorArr[index] = {
2196                                                        'id': -1,
2197                                                        'type': 10001,
2198                                                        params: ['sys.color.ohos_id_color_click_effect'],
2199                                                        'bundleName': '__harDefaultBundleName__',
2200                                                        'moduleName': '__harDefaultModuleName__'
2201                                                    });
2202                                                this.isAdditionBackgroundHover &&
2203                                                    (this.isAdditionBackgroundHover[index] = true);
2204                                            });
2205                                        } else if (event.type === TouchType.Up) {
2206                                            Context.animateTo({
2207                                                curve: SHARP_CUBIC_BEZIER,
2208                                                duration: ANIMATION_DURATION_100
2209                                            }, () => {
2210                                                this.isAdditionBackgroundHover &&
2211                                                    (this.isAdditionBackgroundHover[index] = false);
2212                                            });
2213                                        }
2214                                    });
2215                                    ListItem.focusable(true);
2216                                    ViewStackProcessor.visualState('focused');
2217                                    ListItem.border({
2218                                        radius: {
2219                                            'id': -1,
2220                                            'type': 10002,
2221                                            params: ['sys.float.ohos_id_corner_radius_clicked'],
2222                                            'bundleName': '__harDefaultBundleName__',
2223                                            'moduleName': '__harDefaultModuleName__'
2224                                        },
2225                                        width: FOCUS_BORDER_WIDTH,
2226                                        color: {
2227                                            'id': -1,
2228                                            'type': 10001,
2229                                            params: ['sys.color.ohos_id_color_focused_outline'],
2230                                            'bundleName': '__harDefaultBundleName__',
2231                                            'moduleName': '__harDefaultModuleName__'
2232                                        },
2233                                        style: BorderStyle.Solid
2234                                    });
2235                                    ListItem.padding({
2236                                        start: LengthMetrics.vp(TEXT_HOT_AREA_WIDTH - FOCUS_BORDER_WIDTH),
2237                                        end: LengthMetrics.vp(TEXT_HOT_AREA_WIDTH - FOCUS_BORDER_WIDTH)
2238                                    });
2239                                    ViewStackProcessor.visualState('normal');
2240                                    ListItem.border({
2241                                        radius: {
2242                                            'id': -1,
2243                                            'type': 10002,
2244                                            params: ['sys.float.ohos_id_corner_radius_clicked'],
2245                                            'bundleName': '__harDefaultBundleName__',
2246                                            'moduleName': '__harDefaultModuleName__'
2247                                        },
2248                                        width: 0
2249                                    });
2250                                    ListItem.padding({
2251                                        start: LengthMetrics.vp(TEXT_HOT_AREA_WIDTH),
2252                                        end: LengthMetrics.vp(TEXT_HOT_AREA_WIDTH)
2253                                    });
2254                                    ViewStackProcessor.visualState();
2255                                    ListItem.onClick(() => {
2256                                        this.additionItemClick(index);
2257                                    });
2258                                    ListItem.tabIndex(index === 0 ? this.multiFilters.length : -1);
2259                                };
2260                                const deepRenderFunction = (elmtId, isInitialRender) => {
2261                                    itemCreation(elmtId, isInitialRender);
2262                                    this.observeComponentCreation2((elmtId, isInitialRender) => {
2263                                        Text.create(option.toString());
2264                                        Text.fontSize({
2265                                            'id': -1,
2266                                            'type': 10002,
2267                                            params: ['sys.float.ohos_id_text_size_body3'],
2268                                            'bundleName': '__harDefaultBundleName__',
2269                                            'moduleName': '__harDefaultModuleName__'
2270                                        });
2271                                        Text.minFontScale(1);
2272                                        Text.maxFontScale(Math.min(this.updateFontScale(), MAX_FONT_SCALE));
2273                                        Text.fontColor(this.additionColorArr ? this.additionColorArr[index] : '');
2274                                        Text.fontWeight(this.additionFontWeightArr ?
2275                                        this.additionFontWeightArr[index] : '');
2276                                        Text.focusable(true);
2277                                    }, Text);
2278                                    Text.pop();
2279                                    ListItem.pop();
2280                                };
2281                                this.observeComponentCreation2(itemCreation2, ListItem);
2282                                ListItem.pop();
2283                            }
2284                        };
2285                        this.forEachUpdateFunction(elmtId, this.additionFilters.options, forEachItemGenFunction,
2286                          undefined, true, false);
2287                    }, ForEach);
2288                    ForEach.pop();
2289                    List.pop();
2290                    {
2291                        this.observeComponentCreation2((elmtId, isInitialRender) => {
2292                            if (isInitialRender) {
2293                                let componentCall = new GradientMask(this, {
2294                                    x0: 0,
2295                                    y0: LIST_ROW_HEIGHT / 2,
2296                                    x1: GRADIENT_WIDTH,
2297                                    y1: LIST_ROW_HEIGHT / 2
2298                                }, undefined, elmtId, () => {
2299                                }, { page: 'library/src/main/ets/components/mainpage/filter.ets', line: 999, col: 11 });
2300                                ViewPU.create(componentCall);
2301                                let paramsLambda = () => {
2302                                    return {
2303                                        x0: 0,
2304                                        y0: LIST_ROW_HEIGHT / 2,
2305                                        x1: GRADIENT_WIDTH,
2306                                        y1: LIST_ROW_HEIGHT / 2
2307                                    };
2308                                };
2309                                componentCall.paramsGenerator_ = paramsLambda;
2310                            } else {
2311                                this.updateStateVarsOfChildByElmtId(elmtId, {});
2312                            }
2313                        }, { name: 'GradientMask' });
2314                    }
2315                    Stack.pop();
2316                    {
2317                        this.observeComponentCreation2((elmtId, isInitialRender) => {
2318                            if (isInitialRender) {
2319                                let componentCall = new GradientMask(this, {
2320                                    x0: GRADIENT_WIDTH,
2321                                    y0: LIST_ROW_HEIGHT / 2,
2322                                    x1: 0,
2323                                    y1: LIST_ROW_HEIGHT / 2
2324                                }, undefined, elmtId, () => {
2325                                }, { page: 'library/src/main/ets/components/mainpage/filter.ets', line: 1008, col: 9 });
2326                                ViewPU.create(componentCall);
2327                                let paramsLambda = () => {
2328                                    return {
2329                                        x0: GRADIENT_WIDTH,
2330                                        y0: LIST_ROW_HEIGHT / 2,
2331                                        x1: 0,
2332                                        y1: LIST_ROW_HEIGHT / 2
2333                                    };
2334                                };
2335                                componentCall.paramsGenerator_ = paramsLambda;
2336                            } else {
2337                                this.updateStateVarsOfChildByElmtId(elmtId, {});
2338                            }
2339                        }, { name: 'GradientMask' });
2340                    }
2341                    Stack.pop();
2342                });
2343            } else {
2344                this.ifElseBranchUpdateFunction(1, () => {
2345                });
2346            }
2347        }, If);
2348        If.pop();
2349    }
2350
2351    FilterHeader(parent = null) {
2352        this.observeComponentCreation2((elmtId, isInitialRender) => {
2353            Column.create();
2354            Column.padding({ top: FILTER_TOP_PADDING });
2355            Column.onVisibleAreaChange([0.0, 1.0], (_isVisible, currentRatio) => {
2356                if (currentRatio > 0) {
2357                    this.isFloatShowAllFilter = false;
2358                    this.isFloatShowAllFilterWithoutAnimation = false;
2359                    this.isFloatBarShowWithoutAnimation = false;
2360                    Context.animateTo({
2361                        curve: INTER_POLATING_SPRING,
2362                        onFinish: () => {
2363                            if (!this.isFloatBarShowWithoutAnimation) {
2364                                this.isFloatBarShow = false;
2365                            }
2366                        }
2367                    }, () => {
2368                        this.floatFilterBarHeight = 0;
2369                    });
2370                } else {
2371                    this.isFloatBarShow = true;
2372                    this.isFloatBarShowWithoutAnimation = true;
2373                    Context.animateTo({
2374                        curve: INTER_POLATING_SPRING
2375                    }, () => {
2376                        this.floatFilterBarPosition = 0;
2377                        this.floatFilterBarHeight = LIST_ROW_HEIGHT + FILTER_TOP_PADDING;
2378                    });
2379                }
2380            });
2381        }, Column);
2382        this.observeComponentCreation2((elmtId, isInitialRender) => {
2383            If.create();
2384            if (this.filterType === FilterType.LIST_FILTER) {
2385                this.ifElseBranchUpdateFunction(0, () => {
2386                    this.ListFilter.bind(this)();
2387                });
2388            } else {
2389                this.ifElseBranchUpdateFunction(1, () => {
2390                    this.MultiLineFilter.bind(this)();
2391                });
2392            }
2393        }, If);
2394        If.pop();
2395        this.AdditionFilterList.bind(this)();
2396        Column.pop();
2397    }
2398
2399    FloatFilterHeader(parent = null) {
2400        this.observeComponentCreation2((elmtId, isInitialRender) => {
2401            Column.create();
2402            Column.padding({ top: FILTER_TOP_PADDING });
2403            Column.width(PERCENT_100);
2404            Column.constraintSize({ maxHeight: '80%' });
2405            Column.clip(true);
2406            Column.backgroundColor({
2407                'id': -1,
2408                'type': 10001,
2409                params: ['sys.color.ohos_id_color_background'],
2410                'bundleName': '__harDefaultBundleName__',
2411                'moduleName': '__harDefaultModuleName__'
2412            });
2413            Column.opacity(FLOAT_OPACITY);
2414            Column.backgroundBlurStyle(BlurStyle.Thin);
2415            Column.visibility(this.isFloatShowAllFilter ? Visibility.Visible : Visibility.Hidden);
2416            Column.position({ x: 0, y: this.floatFilterPosition });
2417            Column.zIndex(2);
2418        }, Column);
2419        this.observeComponentCreation2((elmtId, isInitialRender) => {
2420            Scroll.create();
2421        }, Scroll);
2422        this.observeComponentCreation2((elmtId, isInitialRender) => {
2423            Column.create();
2424        }, Column);
2425        this.observeComponentCreation2((elmtId, isInitialRender) => {
2426            If.create();
2427            if (this.filterType === FilterType.LIST_FILTER) {
2428                this.ifElseBranchUpdateFunction(0, () => {
2429                    this.ListFilter.bind(this)();
2430                });
2431            } else {
2432                this.ifElseBranchUpdateFunction(1, () => {
2433                    this.MultiLineFilter.bind(this)();
2434                });
2435            }
2436        }, If);
2437        If.pop();
2438        this.AdditionFilterList.bind(this)();
2439        Column.pop();
2440        Scroll.pop();
2441        Column.pop();
2442    }
2443
2444    FloatFilterBar(parent = null) {
2445        this.observeComponentCreation2((elmtId, isInitialRender) => {
2446            Row.create();
2447            Row.width(PERCENT_100);
2448            Row.height(this.floatFilterBarHeight);
2449            Row.padding({ start: LengthMetrics.vp(FOCUS_BORDER_WIDTH), end: LengthMetrics.vp(FOCUS_BORDER_WIDTH) });
2450            Row.backgroundColor({
2451                'id': -1,
2452                'type': 10001,
2453                params: ['sys.color.ohos_id_color_background'],
2454                'bundleName': '__harDefaultBundleName__',
2455                'moduleName': '__harDefaultModuleName__'
2456            });
2457            Row.opacity(FLOAT_OPACITY);
2458            Row.clip(true);
2459            Row.backgroundBlurStyle(BlurStyle.Thin);
2460            Row.visibility(this.isFloatBarShow ? Visibility.Visible : Visibility.Hidden);
2461            Row.alignItems(VerticalAlign.Bottom);
2462            Row.position({ x: 0, y: this.floatFilterBarPosition });
2463            Row.zIndex(1);
2464        }, Row);
2465        this.observeComponentCreation2((elmtId, isInitialRender) => {
2466            Column.create();
2467            Column.backgroundColor(this.isFloatArrowBgHover ? this.floatArrowBgColor : TRANS_COLOR);
2468            ViewStackProcessor.visualState('focused');
2469            Column.border({
2470                radius: {
2471                    'id': -1,
2472                    'type': 10002,
2473                    params: ['sys.float.ohos_id_corner_radius_clicked'],
2474                    'bundleName': '__harDefaultBundleName__',
2475                    'moduleName': '__harDefaultModuleName__'
2476                },
2477                width: FOCUS_BORDER_WIDTH,
2478                color: {
2479                    'id': -1,
2480                    'type': 10001,
2481                    params: ['sys.color.ohos_id_color_focused_outline'],
2482                    'bundleName': '__harDefaultBundleName__',
2483                    'moduleName': '__harDefaultModuleName__'
2484                },
2485                style: BorderStyle.Solid
2486            });
2487            Column.width(ARROW_IMG_SIZE + FOCUS_BORDER_WIDTH * 2);
2488            ViewStackProcessor.visualState('normal');
2489            Column.border({
2490                radius: {
2491                    'id': -1,
2492                    'type': 10002,
2493                    params: ['sys.float.ohos_id_corner_radius_clicked'],
2494                    'bundleName': '__harDefaultBundleName__',
2495                    'moduleName': '__harDefaultModuleName__'
2496                },
2497                width: 0
2498            });
2499            Column.width(ARROW_IMG_SIZE);
2500            ViewStackProcessor.visualState();
2501            Column.alignItems(HorizontalAlign.Center);
2502            Column.width(PERCENT_100);
2503            Column.height(LIST_ROW_HEIGHT);
2504            Column.onTouch((event) => {
2505                if (event.type === TouchType.Down) {
2506                    Context.animateTo({
2507                        curve: SHARP_CUBIC_BEZIER,
2508                        duration: ANIMATION_DURATION_100
2509                    }, () => {
2510                        this.floatArrowBgColor = {
2511                            'id': -1,
2512                            'type': 10001,
2513                            params: ['sys.color.ohos_id_color_click_effect'],
2514                            'bundleName': '__harDefaultBundleName__',
2515                            'moduleName': '__harDefaultModuleName__'
2516                        };
2517                        this.isFloatArrowBgHover = true;
2518                    });
2519                } else if (event.type === TouchType.Up) {
2520                    Context.animateTo({
2521                        curve: SHARP_CUBIC_BEZIER,
2522                        duration: ANIMATION_DURATION_100
2523                    }, () => {
2524                        this.isFloatArrowBgHover = false;
2525                    });
2526                }
2527            });
2528            Column.onClick(() => {
2529                Context.animateTo({
2530                    duration: BAR_ANIMATION_DURATION,
2531                    curve: SHARP_CUBIC_BEZIER
2532                }, () => {
2533                    this.isFloatBarShow = false;
2534                    this.isFloatBarShowWithoutAnimation = false;
2535                });
2536                this.isFloatShowAllFilter = true;
2537                this.isFloatShowAllFilterWithoutAnimation = true;
2538                Context.animateTo({
2539                    curve: INTER_POLATING_SPRING,
2540                    onFinish: () => {
2541                        this.floatFilterBarPosition = 0;
2542                    }
2543                }, () => {
2544                    this.floatFilterPosition = 0;
2545                    this.floatFilterBarPosition = this.filterDynamicHeight;
2546                });
2547            });
2548            Column.onHover((isHover) => {
2549                if (isHover) {
2550                    Context.animateTo({
2551                        curve: FRICTION_CUBIC_BEZIER,
2552                        duration: ANIMATION_DURATION_250
2553                    }, () => {
2554                        this.floatArrowBgColor = {
2555                            'id': -1,
2556                            'type': 10001,
2557                            params: ['sys.color.ohos_id_color_hover'],
2558                            'bundleName': '__harDefaultBundleName__',
2559                            'moduleName': '__harDefaultModuleName__'
2560                        };
2561                        this.isFloatArrowBgHover = true;
2562                    });
2563                } else {
2564                    Context.animateTo({
2565                        curve: FRICTION_CUBIC_BEZIER,
2566                        duration: ANIMATION_DURATION_250
2567                    }, () => {
2568                        this.isFloatArrowBgHover = false;
2569                    });
2570                }
2571            });
2572        }, Column);
2573        this.observeComponentCreation2((elmtId, isInitialRender) => {
2574            Row.create();
2575            Row.height(PERCENT_100);
2576            Row.alignItems(VerticalAlign.Center);
2577        }, Row);
2578        this.observeComponentCreation2((elmtId, isInitialRender) => {
2579            Row.create();
2580            Row.height(LIST_ROW_HEIGHT);
2581            Row.margin({ start: LengthMetrics.vp(FILTER_BAR_MARGIN) });
2582            Row.focusable(true);
2583        }, Row);
2584        this.observeComponentCreation2((elmtId, isInitialRender) => {
2585            Text.create(this.floatFilterBarText);
2586            Text.textOverflow({ overflow: TextOverflow.Ellipsis });
2587            Text.fontColor({
2588                'id': -1,
2589                'type': 10001,
2590                params: ['sys.color.ohos_id_color_text_primary_activated'],
2591                'bundleName': '__harDefaultBundleName__',
2592                'moduleName': '__harDefaultModuleName__'
2593            });
2594            Text.fontSize({
2595                'id': -1,
2596                'type': 10002,
2597                params: ['sys.float.ohos_id_text_size_body3'],
2598                'bundleName': '__harDefaultBundleName__',
2599                'moduleName': '__harDefaultModuleName__'
2600            });
2601            Text.minFontScale(1);
2602            Text.maxFontScale(Math.min(this.updateFontScale(), MAX_FONT_SCALE));
2603            Text.constraintSize({ maxWidth: '85%' });
2604            Text.maxLines(1);
2605        }, Text);
2606        Text.pop();
2607        this.observeComponentCreation2((elmtId, isInitialRender) => {
2608            Image.create({
2609                'id': -1,
2610                'type': 20000,
2611                params: ['sys.media.ohos_ic_public_arrow_down'],
2612                'bundleName': '__harDefaultBundleName__',
2613                'moduleName': '__harDefaultModuleName__'
2614            });
2615            Image.width(ARROW_IMG_SIZE);
2616            Image.height(ARROW_IMG_SIZE);
2617            Image.fillColor({
2618                'id': -1,
2619                'type': 10001,
2620                params: ['sys.color.ohos_id_color_text_primary_activated'],
2621                'bundleName': '__harDefaultBundleName__',
2622                'moduleName': '__harDefaultModuleName__'
2623            });
2624            Image.focusable(true);
2625        }, Image);
2626        Row.pop();
2627        Row.pop();
2628        Column.pop();
2629        Row.pop();
2630    }
2631
2632    initialRender() {
2633        PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this);
2634        this.observeComponentCreation2((elmtId, isInitialRender) => {
2635            Stack.create({ alignContent: Alignment.Top });
2636            Stack.clip(true);
2637        }, Stack);
2638        this.FloatFilterBar.bind(this)();
2639        this.FloatFilterHeader.bind(this)();
2640        this.observeComponentCreation2((elmtId, isInitialRender) => {
2641            Column.create();
2642            Column.zIndex(0);
2643        }, Column);
2644        this.observeComponentCreation2((elmtId, isInitialRender) => {
2645            List.create({ initialIndex: 0 });
2646            List.listDirection(Axis.Vertical);
2647            List.width(PERCENT_100);
2648            List.height(PERCENT_100);
2649            List.edgeEffect(EdgeEffect.Spring);
2650            List.onScroll((_scrollOffset, scrollState) => {
2651                if (this.isFloatShowAllFilterWithoutAnimation && scrollState === ScrollState.Scroll) {
2652                    this.isFloatBarShowWithoutAnimation = true;
2653                    this.isFloatShowAllFilterWithoutAnimation = false;
2654                    Context.animateTo({
2655                        duration: BAR_ANIMATION_DURATION,
2656                        curve: SHARP_CUBIC_BEZIER
2657                    }, () => {
2658                        this.isFloatBarShow = true;
2659                    });
2660                    Context.animateTo({
2661                        curve: INTER_POLATING_SPRING,
2662                        onFinish: () => {
2663                            if (!this.isFloatShowAllFilterWithoutAnimation) {
2664                                this.isFloatShowAllFilter = false;
2665                            }
2666                        }
2667                    }, () => {
2668                        this.floatFilterPosition = -this.filterDynamicHeight;
2669                        this.floatFilterBarPosition = 0;
2670                    });
2671                }
2672            });
2673        }, List);
2674        {
2675            const itemCreation = (elmtId, isInitialRender) => {
2676                ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
2677                itemCreation2(elmtId, isInitialRender);
2678                if (!isInitialRender) {
2679                    ListItem.pop();
2680                }
2681                ViewStackProcessor.StopGetAccessRecording();
2682            };
2683            const itemCreation2 = (elmtId, isInitialRender) => {
2684                ListItem.create(deepRenderFunction, true);
2685                ListItem.focusable(true);
2686            };
2687            const deepRenderFunction = (elmtId, isInitialRender) => {
2688                itemCreation(elmtId, isInitialRender);
2689                this.FilterHeader.bind(this)();
2690                ListItem.pop();
2691            };
2692            this.observeComponentCreation2(itemCreation2, ListItem);
2693            ListItem.pop();
2694        }
2695        {
2696            const itemCreation = (elmtId, isInitialRender) => {
2697                ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
2698                itemCreation2(elmtId, isInitialRender);
2699                if (!isInitialRender) {
2700                    ListItem.pop();
2701                }
2702                ViewStackProcessor.StopGetAccessRecording();
2703            };
2704            const itemCreation2 = (elmtId, isInitialRender) => {
2705                ListItem.create(deepRenderFunction, true);
2706                ListItem.focusable(true);
2707            };
2708            const deepRenderFunction = (elmtId, isInitialRender) => {
2709                itemCreation(elmtId, isInitialRender);
2710                this.container.bind(this)();
2711                ListItem.pop();
2712            };
2713            this.observeComponentCreation2(itemCreation2, ListItem);
2714            ListItem.pop();
2715        }
2716        List.pop();
2717        Column.pop();
2718        Stack.pop();
2719        PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop();
2720    }
2721
2722    rerender() {
2723        PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this);
2724        this.updateDirtyElements();
2725        PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop();
2726    }
2727}
2728
2729export default {
2730    Filter, FilterType
2731};