/* * Copyright (c) 2024 Huawei Device Co., Ltd. * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ const Chip = requireNapi('arkui.advanced.Chip').Chip; const ChipSize = requireNapi('arkui.advanced.Chip').ChipSize; const SymbolGlyphModifier = requireNapi('arkui.modifier').SymbolGlyphModifier; if (!("finalizeConstruction" in ViewPU.prototype)) { Reflect.set(ViewPU.prototype, "finalizeConstruction", () => { }); } if (PUV2ViewBase.contextStack === undefined) { Reflect.set(PUV2ViewBase, "contextStack", []); } const noop = (selectedIndexes) => { }; const colorStops = [['rgba(0, 0, 0, 1)', 0], ['rgba(0, 0, 0, 0)', 1]]; const defaultTheme = { itemStyle: { size: ChipSize.NORMAL, backgroundColor: { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_button_normal'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }, fontColor: { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_text_primary'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }, selectedFontColor: { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_text_primary_contrary'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }, selectedBackgroundColor: { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_emphasize'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }, fillColor: { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_secondary'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }, selectedFillColor: { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_text_primary_contrary'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }, }, chipGroupSpace: { itemSpace: 8, startSpace: 16, endSpace: 16 }, chipGroupPadding: { top: 14, bottom: 14 } }; const iconGroupSuffixTheme = { backgroundColor: { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_button_normal'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }, borderRadius: { "id": -1, "type": 10002, params: ['sys.float.ohos_id_corner_radius_tips_instant_tip'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }, smallIconSize: 16, normalIconSize: 24, smallBackgroundSize: 28, normalBackgroundSize: 36, marginLeft: 8, marginRight: 16, fillColor: { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_primary'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }, defaultEffect: -1 }; var ChipGroupHeight; (function (ChipGroupHeight) { ChipGroupHeight[ChipGroupHeight["NORMAL"] = 36] = "NORMAL"; ChipGroupHeight[ChipGroupHeight["SMALL"] = 28] = "SMALL"; })(ChipGroupHeight || (ChipGroupHeight = {})); function parseDimension(uiContext, value, isValid, defaultValue) { if (value === void (0) || value === null) { return defaultValue; } const resourceManager = uiContext.getHostContext()?.resourceManager; if (typeof value === "object") { let temp = value; if (temp.type === 10002 || temp.type === 10007) { if (resourceManager.getNumber(temp.id) >= 0) { return value; } } else if (temp.type === 10003) { if (isValidDimensionString(resourceManager.getStringSync(temp.id))) { return value; } } } else if (typeof value === "number") { if (value >= 0) { return value; } } else if (typeof value === "string") { if (isValid(value)) { return value; } } return defaultValue; } function isValidString(dimension, regex) { const matches = dimension.match(regex); if (!matches || matches.length < 3) { return false; } const value = Number.parseFloat(matches[1]); return value >= 0; } function isValidDimensionString(dimension) { return isValidString(dimension, new RegExp("(-?\\d+(?:\\.\\d+)?)_?(fp|vp|px|lpx|%)?$", "i")); } function isValidDimensionNoPercentageString(dimension) { return isValidString(dimension, new RegExp("(-?\\d+(?:\\.\\d+)?)_?(fp|vp|px|lpx)?$", "i")); } export class IconGroupSuffix extends ViewPU { constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { super(parent, __localStorage, elmtId, extraInfo); if (typeof paramsLambda === "function") { this.paramsGenerator_ = paramsLambda; } this.__chipSize = this.initializeConsume("chipSize", "chipSize"); this.__items = new SynchedPropertyObjectOneWayPU(params.items, this, "items"); this.symbolEffect = new SymbolEffect(); this.setInitiallyProvidedValue(params); this.finalizeConstruction(); } setInitiallyProvidedValue(params) { if (params.items === undefined) { this.__items.set([]); } if (params.symbolEffect !== undefined) { this.symbolEffect = params.symbolEffect; } } updateStateVars(params) { this.__items.reset(params.items); } purgeVariableDependenciesOnElmtId(rmElmtId) { this.__chipSize.purgeDependencyOnElmtId(rmElmtId); this.__items.purgeDependencyOnElmtId(rmElmtId); } aboutToBeDeleted() { this.__chipSize.aboutToBeDeleted(); this.__items.aboutToBeDeleted(); SubscriberManager.Get().delete(this.id__()); this.aboutToBeDeletedInternal(); } get chipSize() { return this.__chipSize.get(); } set chipSize(newValue) { this.__chipSize.set(newValue); } get items() { return this.__items.get(); } set items(newValue) { this.__items.set(newValue); } getBackgroundSize() { if (this.chipSize === ChipSize.SMALL) { return iconGroupSuffixTheme.smallBackgroundSize; } else { return iconGroupSuffixTheme.normalBackgroundSize; } } getIconSize(val) { if (val === undefined) { return this.chipSize === ChipSize.SMALL ? iconGroupSuffixTheme.smallIconSize : iconGroupSuffixTheme.normalIconSize; } let value; if (this.chipSize === ChipSize.SMALL) { value = parseDimension(this.getUIContext(), val, isValidDimensionString, iconGroupSuffixTheme.smallIconSize); } else { value = parseDimension(this.getUIContext(), val, isValidDimensionString, iconGroupSuffixTheme.normalIconSize); } return value; } initialRender() { PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this); this.observeComponentCreation2((elmtId, isInitialRender) => { Row.create(); }, Row); this.observeComponentCreation2((elmtId, isInitialRender) => { ForEach.create(); const forEachItemGenFunction = _item => { const suffixItem = _item; this.observeComponentCreation2((elmtId, isInitialRender) => { Button.createWithChild(); Button.size({ width: this.getBackgroundSize(), height: this.getBackgroundSize() }); Button.backgroundColor(iconGroupSuffixTheme.backgroundColor); Button.borderRadius(iconGroupSuffixTheme.borderRadius); Button.onClick(() => { if (!(suffixItem instanceof SymbolGlyphModifier)) { suffixItem.action(); } }); Button.borderRadius(iconGroupSuffixTheme.borderRadius); }, Button); this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); if (suffixItem instanceof SymbolGlyphModifier) { this.ifElseBranchUpdateFunction(0, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { SymbolGlyph.create(); SymbolGlyph.fontColor([iconGroupSuffixTheme.fillColor]); SymbolGlyph.fontSize(this.getIconSize()); SymbolGlyph.attributeModifier.bind(this)(suffixItem); SymbolGlyph.focusable(true); SymbolGlyph.effectStrategy(SymbolEffectStrategy.NONE); SymbolGlyph.symbolEffect(this.symbolEffect, false); SymbolGlyph.symbolEffect(this.symbolEffect, iconGroupSuffixTheme.defaultEffect); }, SymbolGlyph); }); } else { this.ifElseBranchUpdateFunction(1, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Image.create(suffixItem.icon.src); Image.fillColor(iconGroupSuffixTheme.fillColor); Image.size({ width: this.getIconSize(suffixItem.icon?.size?.width), height: this.getIconSize(suffixItem.icon?.size?.height) }); Image.focusable(true); }, Image); }); } }, If); If.pop(); Button.pop(); }; this.forEachUpdateFunction(elmtId, this.items || [], forEachItemGenFunction); }, ForEach); ForEach.pop(); Row.pop(); PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop(); } rerender() { PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this); this.updateDirtyElements(); PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop(); } } export class ChipGroup extends ViewPU { constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { super(parent, __localStorage, elmtId, extraInfo); if (typeof paramsLambda === "function") { this.paramsGenerator_ = paramsLambda; } this.__items = new SynchedPropertyObjectOneWayPU(params.items, this, "items"); this.__itemStyle = new SynchedPropertyObjectOneWayPU(params.itemStyle, this, "itemStyle"); this.__chipSize = new ObservedPropertyObjectPU(defaultTheme.itemStyle.size, this, "chipSize"); this.addProvidedVar("chipSize", this.__chipSize, false); this.__selectedIndexes = new SynchedPropertyObjectOneWayPU(params.selectedIndexes, this, "selectedIndexes"); this.__multiple = new SynchedPropertySimpleOneWayPU(params.multiple, this, "multiple"); this.__chipGroupSpace = new SynchedPropertyObjectOneWayPU(params.chipGroupSpace, this, "chipGroupSpace"); this.suffix = undefined; this.onChange = noop; this.scroller = new Scroller(); this.__isReachEnd = new ObservedPropertySimplePU(this.scroller.isAtEnd(), this, "isReachEnd"); this.__chipGroupPadding = new SynchedPropertyObjectOneWayPU(params.chipGroupPadding, this, "chipGroupPadding"); this.__isRefresh = new ObservedPropertySimplePU(true, this, "isRefresh"); this.setInitiallyProvidedValue(params); this.declareWatch("items", this.onItemsChange); this.declareWatch("itemStyle", this.itemStyleOnChange); this.declareWatch("multiple", this.onMultipleChange); this.finalizeConstruction(); } setInitiallyProvidedValue(params) { if (params.items === undefined) { this.__items.set([]); } if (params.itemStyle === undefined) { this.__itemStyle.set(defaultTheme.itemStyle); } if (params.chipSize !== undefined) { this.chipSize = params.chipSize; } if (params.selectedIndexes === undefined) { this.__selectedIndexes.set([0]); } if (params.multiple === undefined) { this.__multiple.set(false); } if (params.chipGroupSpace === undefined) { this.__chipGroupSpace.set(defaultTheme.chipGroupSpace); } if (params.suffix !== undefined) { this.suffix = params.suffix; } if (params.onChange !== undefined) { this.onChange = params.onChange; } if (params.scroller !== undefined) { this.scroller = params.scroller; } if (params.isReachEnd !== undefined) { this.isReachEnd = params.isReachEnd; } if (params.chipGroupPadding === undefined) { this.__chipGroupPadding.set(defaultTheme.chipGroupPadding); } if (params.isRefresh !== undefined) { this.isRefresh = params.isRefresh; } } updateStateVars(params) { this.__items.reset(params.items); this.__itemStyle.reset(params.itemStyle); this.__selectedIndexes.reset(params.selectedIndexes); this.__multiple.reset(params.multiple); this.__chipGroupSpace.reset(params.chipGroupSpace); this.__chipGroupPadding.reset(params.chipGroupPadding); } purgeVariableDependenciesOnElmtId(rmElmtId) { this.__items.purgeDependencyOnElmtId(rmElmtId); this.__itemStyle.purgeDependencyOnElmtId(rmElmtId); this.__chipSize.purgeDependencyOnElmtId(rmElmtId); this.__selectedIndexes.purgeDependencyOnElmtId(rmElmtId); this.__multiple.purgeDependencyOnElmtId(rmElmtId); this.__chipGroupSpace.purgeDependencyOnElmtId(rmElmtId); this.__isReachEnd.purgeDependencyOnElmtId(rmElmtId); this.__chipGroupPadding.purgeDependencyOnElmtId(rmElmtId); this.__isRefresh.purgeDependencyOnElmtId(rmElmtId); } aboutToBeDeleted() { this.__items.aboutToBeDeleted(); this.__itemStyle.aboutToBeDeleted(); this.__chipSize.aboutToBeDeleted(); this.__selectedIndexes.aboutToBeDeleted(); this.__multiple.aboutToBeDeleted(); this.__chipGroupSpace.aboutToBeDeleted(); this.__isReachEnd.aboutToBeDeleted(); this.__chipGroupPadding.aboutToBeDeleted(); this.__isRefresh.aboutToBeDeleted(); SubscriberManager.Get().delete(this.id__()); this.aboutToBeDeletedInternal(); } get items() { return this.__items.get(); } set items(newValue) { this.__items.set(newValue); } get itemStyle() { return this.__itemStyle.get(); } set itemStyle(newValue) { this.__itemStyle.set(newValue); } get chipSize() { return this.__chipSize.get(); } set chipSize(newValue) { this.__chipSize.set(newValue); } get selectedIndexes() { return this.__selectedIndexes.get(); } set selectedIndexes(newValue) { this.__selectedIndexes.set(newValue); } get multiple() { return this.__multiple.get(); } set multiple(newValue) { this.__multiple.set(newValue); } get chipGroupSpace() { return this.__chipGroupSpace.get(); } set chipGroupSpace(newValue) { this.__chipGroupSpace.set(newValue); } get isReachEnd() { return this.__isReachEnd.get(); } set isReachEnd(newValue) { this.__isReachEnd.set(newValue); } get chipGroupPadding() { return this.__chipGroupPadding.get(); } set chipGroupPadding(newValue) { this.__chipGroupPadding.set(newValue); } get isRefresh() { return this.__isRefresh.get(); } set isRefresh(newValue) { this.__isRefresh.set(newValue); } onItemsChange() { this.isRefresh = !this.isRefresh; } onMultipleChange() { this.selectedIndexes = this.getSelectedIndexes(); } itemStyleOnChange() { this.chipSize = this.getChipSize(); } aboutToAppear() { this.itemStyleOnChange(); } getChipSize() { if (this.itemStyle && this.itemStyle.size) { if (typeof this.itemStyle.size === 'object') { if (!this.itemStyle.size.width || !this.itemStyle.size.height || !this.itemStyle.size) { return defaultTheme.itemStyle.size; } } return this.itemStyle.size; } return defaultTheme.itemStyle.size; } getFontColor() { if (this.itemStyle && this.itemStyle.fontColor) { if (typeof this.itemStyle.fontColor === 'object') { let temp = this.itemStyle.fontColor; if (temp == undefined || temp == null) { return defaultTheme.itemStyle.fontColor; } if (temp.type === 10001) { return this.itemStyle.fontColor; } return defaultTheme.itemStyle.fontColor; } return this.itemStyle.fontColor; } return defaultTheme.itemStyle.fontColor; } getSelectedFontColor() { if (this.itemStyle && this.itemStyle.selectedFontColor) { if (typeof this.itemStyle.selectedFontColor === 'object') { let temp = this.itemStyle.selectedFontColor; if (temp == undefined || temp == null) { return defaultTheme.itemStyle.selectedFontColor; } if (temp.type === 10001) { return this.itemStyle.selectedFontColor; } return defaultTheme.itemStyle.selectedFontColor; } return this.itemStyle.selectedFontColor; } return defaultTheme.itemStyle.selectedFontColor; } getFillColor() { if (this.itemStyle && this.itemStyle.fontColor) { return this.itemStyle.fontColor; } return defaultTheme.itemStyle.fillColor; } getSelectedFillColor() { if (this.itemStyle && this.itemStyle.selectedFontColor) { return this.itemStyle.selectedFontColor; } return defaultTheme.itemStyle.selectedFillColor; } getBackgroundColor() { if (this.itemStyle && this.itemStyle.backgroundColor) { if (typeof this.itemStyle.backgroundColor === 'object') { let temp = this.itemStyle.backgroundColor; if (temp == undefined || temp == null) { return defaultTheme.itemStyle.backgroundColor; } if (temp.type === 10001) { return this.itemStyle.backgroundColor; } return defaultTheme.itemStyle.backgroundColor; } return this.itemStyle.backgroundColor; } return defaultTheme.itemStyle.backgroundColor; } getSelectedBackgroundColor() { if (this.itemStyle && this.itemStyle.selectedBackgroundColor) { if (typeof this.itemStyle.selectedBackgroundColor === 'object') { let temp = this.itemStyle.selectedBackgroundColor; if (temp == undefined || temp == null) { return defaultTheme.itemStyle.selectedBackgroundColor; } if (temp.type === 10001) { return this.itemStyle.selectedBackgroundColor; } return defaultTheme.itemStyle.selectedBackgroundColor; } return this.itemStyle.selectedBackgroundColor; } return defaultTheme.itemStyle.selectedBackgroundColor; } getSelectedIndexes() { let temp = []; temp = (this.selectedIndexes ?? [0]).filter((element, index, array) => { return (element >= 0 && element % 1 == 0 && element != null && element != undefined && array.indexOf(element) === index && element < (this.items || []).length); }); if (temp.length == 0) { temp = [0]; } return temp; } isMultiple() { return this.multiple ?? false; } getChipGroupItemSpace() { if (this.chipGroupSpace == undefined) { return defaultTheme.chipGroupSpace.itemSpace; } return parseDimension(this.getUIContext(), this.chipGroupSpace.itemSpace, isValidDimensionNoPercentageString, defaultTheme.chipGroupSpace.itemSpace); } getChipGroupStartSpace() { if (this.chipGroupSpace == undefined) { return defaultTheme.chipGroupSpace.startSpace; } return parseDimension(this.getUIContext(), this.chipGroupSpace.startSpace, isValidDimensionNoPercentageString, defaultTheme.chipGroupSpace.startSpace); } getChipGroupEndSpace() { if (this.chipGroupSpace == undefined) { return defaultTheme.chipGroupSpace.endSpace; } return parseDimension(this.getUIContext(), this.chipGroupSpace.endSpace, isValidDimensionNoPercentageString, defaultTheme.chipGroupSpace.endSpace); } getOnChange() { return this.onChange ?? noop; } isSelected(itemIndex) { if (!this.isMultiple()) { return itemIndex == this.getSelectedIndexes()[0]; } else { return this.getSelectedIndexes().some((element, index, array) => { return (element == itemIndex); }); } } getChipGroupHeight() { if (typeof this.chipSize === 'string') { if (this.chipSize === ChipSize.NORMAL) { return ChipGroupHeight.NORMAL; } else { return ChipGroupHeight.SMALL; } } else if (typeof this.chipSize === 'object') { return this.chipSize.height; } else { return ChipGroupHeight.NORMAL; } } getPaddingTop() { if (!this.chipGroupPadding || !this.chipGroupPadding.top) { return defaultTheme.chipGroupPadding.top; } return parseDimension(this.getUIContext(), this.chipGroupPadding.top, isValidDimensionNoPercentageString, defaultTheme.chipGroupPadding.top); } getPaddingBottom() { if (!this.chipGroupPadding || !this.chipGroupPadding.bottom) { return defaultTheme.chipGroupPadding.bottom; } return parseDimension(this.getUIContext(), this.chipGroupPadding.bottom, isValidDimensionNoPercentageString, defaultTheme.chipGroupPadding.bottom); } initialRender() { PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this); this.observeComponentCreation2((elmtId, isInitialRender) => { Row.create(); Row.align(Alignment.End); Row.width("100%"); Row.height(this.getChipGroupHeight() + this.getPaddingTop() + this.getPaddingBottom()); Row.padding({ top: this.getPaddingTop(), bottom: this.getPaddingBottom() }); }, Row); this.observeComponentCreation2((elmtId, isInitialRender) => { Stack.create(); Stack.height(this.getChipGroupHeight() + this.getPaddingTop() + this.getPaddingBottom()); Stack.layoutWeight(1); Stack.blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN); Stack.alignContent(Alignment.End); }, Stack); this.observeComponentCreation2((elmtId, isInitialRender) => { Scroll.create(this.scroller); Scroll.scrollable(ScrollDirection.Horizontal); Scroll.scrollBar(BarState.Off); Scroll.align(Alignment.Start); Scroll.width('100%'); Scroll.clip(false); Scroll.onScroll(() => { this.isReachEnd = this.scroller.isAtEnd(); }); }, Scroll); this.observeComponentCreation2((elmtId, isInitialRender) => { Row.create({ space: this.getChipGroupItemSpace() }); Row.padding({ left: this.getChipGroupStartSpace(), right: this.getChipGroupEndSpace() }); Row.constraintSize({ minWidth: '100%' }); }, Row); this.observeComponentCreation2((elmtId, isInitialRender) => { ForEach.create(); const forEachItemGenFunction = (_item, index) => { const chipItem = _item; this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); if (chipItem) { this.ifElseBranchUpdateFunction(0, () => { Chip.bind(this)(makeBuilderParameterProxy("Chip", { prefixIcon: () => ({ src: chipItem.prefixIcon?.src ?? "", size: chipItem.prefixIcon?.size ?? undefined, fillColor: this.getFillColor(), activatedFillColor: this.getSelectedFillColor() }), prefixSymbol: () => chipItem?.prefixSymbol, label: () => ({ text: chipItem?.label?.text ?? " ", fontColor: this.getFontColor(), activatedFontColor: this.getSelectedFontColor(), }), suffixIcon: () => ({ src: chipItem.suffixIcon?.src ?? "", size: chipItem.suffixIcon?.size ?? undefined, fillColor: this.getFillColor(), activatedFillColor: this.getSelectedFillColor() }), suffixSymbol: () => chipItem?.suffixSymbol, allowClose: () => chipItem.allowClose ?? false, enabled: () => true, activated: () => this.isSelected(index), backgroundColor: () => this.getBackgroundColor(), size: () => this.getChipSize(), activatedBackgroundColor: () => this.getSelectedBackgroundColor(), onClicked: () => () => { if (this.isSelected(index)) { if (!(!this.isMultiple())) { if (this.getSelectedIndexes().length > 1) { this.selectedIndexes.splice(this.selectedIndexes.indexOf(index), 1); } } } else { if (!this.selectedIndexes || this.selectedIndexes.length === 0) { this.selectedIndexes = this.getSelectedIndexes(); } if (!this.isMultiple()) { this.selectedIndexes = []; } this.selectedIndexes.push(index); } this.getOnChange()(this.getSelectedIndexes()); } })); }); } else { this.ifElseBranchUpdateFunction(1, () => { }); } }, If); If.pop(); }; this.forEachUpdateFunction(elmtId, this.items || [], forEachItemGenFunction, () => { return JSON.stringify(this.isRefresh); }, true, false); }, ForEach); ForEach.pop(); Row.pop(); Scroll.pop(); this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); if (this.suffix && !this.isReachEnd) { this.ifElseBranchUpdateFunction(0, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Stack.create(); Stack.width(iconGroupSuffixTheme.normalBackgroundSize); Stack.height(this.getChipGroupHeight()); Stack.linearGradient({ angle: 90, colors: colorStops }); Stack.blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN); Stack.hitTestBehavior(HitTestMode.None); }, Stack); Stack.pop(); }); } else { this.ifElseBranchUpdateFunction(1, () => { }); } }, If); If.pop(); Stack.pop(); this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); if (this.suffix) { this.ifElseBranchUpdateFunction(0, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Row.create(); Row.padding({ left: iconGroupSuffixTheme.marginLeft, right: iconGroupSuffixTheme.marginRight }); }, Row); this.suffix.bind(this)(); Row.pop(); }); } else { this.ifElseBranchUpdateFunction(1, () => { }); } }, If); If.pop(); Row.pop(); PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop(); } rerender() { PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.push(this); this.updateDirtyElements(); PUV2ViewBase.contextStack && PUV2ViewBase.contextStack.pop(); } } export default { ChipGroup, IconGroupSuffix }