1/* 2 * Copyright (c) 2021 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 16exports.source = ` 17class PurchaseItem { 18 static NextId : number = 0; 19 20 public id: number; 21 public price: number; 22 23 constructor(price : number) { 24 this.id = PurchaseItem.NextId++; 25 this.price = price; 26 } 27} 28 29@Component 30struct BasketViewer { 31 @Link @Watch("onBasketUpdated") shopBasket : PurchaseItem[]; 32 @State @Watch('updateTotal') totalPurchase : number = this.updateTotal(); 33 updateTotal() : number { 34 let sum = 0; 35 this.shopBasket.forEach((i) => { sum += i.price; }); 36 this.totalPurchase = (sum < 100) ? sum : 0.9 * sum; 37 return this.totalPurchase; 38 } 39 // @Watch cb 40 onBasketUpdated(propName: string) : void { 41 this.updateTotal(); 42 } 43 build() { 44 Column() { 45 ForEach(this.shopBasket, 46 (item) => { 47 Text(item.price) 48 }, 49 item => item.id.toString() 50 ) 51 Text('this.totalPurchase') 52 } 53 } 54} 55 56@Entry 57@Component 58struct BasketModifier { 59 @State shopBasket : PurchaseItem[] = [ ]; 60 build() { 61 Column() { 62 Button("add to basket") 63 .onClick(() => { this.shopBasket.push(new PurchaseItem(Math.round(100 * Math.random()))) }) 64 BasketViewer({shopBasket: this.$shopBasket}) 65 } 66 } 67}` 68 69exports.expectResult = 70`"use strict"; 71class PurchaseItem { 72 constructor(price) { 73 this.id = PurchaseItem.NextId++; 74 this.price = price; 75 } 76} 77PurchaseItem.NextId = 0; 78class BasketViewer extends View { 79 constructor(compilerAssignedUniqueChildId, parent, params) { 80 super(compilerAssignedUniqueChildId, parent); 81 this.__shopBasket = new SynchedPropertyObjectTwoWay(params.shopBasket, this, "shopBasket"); 82 this.__totalPurchase = new ObservedPropertySimple(this.updateTotal(), this, "totalPurchase"); 83 this.updateWithValueParams(params); 84 this.declareWatch("shopBasket", this.onBasketUpdated); 85 this.declareWatch("totalPurchase", this.updateTotal); 86 } 87 updateWithValueParams(params) { 88 if (params.totalPurchase !== undefined) { 89 this.totalPurchase = params.totalPurchase; 90 } 91 } 92 aboutToBeDeleted() { 93 this.__shopBasket.aboutToBeDeleted(); 94 this.__totalPurchase.aboutToBeDeleted(); 95 SubscriberManager.Get().delete(this.id()); 96 } 97 get shopBasket() { 98 return this.__shopBasket.get(); 99 } 100 set shopBasket(newValue) { 101 this.__shopBasket.set(newValue); 102 } 103 get totalPurchase() { 104 return this.__totalPurchase.get(); 105 } 106 set totalPurchase(newValue) { 107 this.__totalPurchase.set(newValue); 108 } 109 updateTotal() { 110 let sum = 0; 111 this.shopBasket.forEach((i) => { sum += i.price; }); 112 this.totalPurchase = (sum < 100) ? sum : 0.9 * sum; 113 return this.totalPurchase; 114 } 115 // @Watch cb 116 onBasketUpdated(propName) { 117 this.updateTotal(); 118 } 119 render() { 120 Column.create(); 121 ForEach.create("2", this, ObservedObject.GetRawObject(this.shopBasket), (item) => { 122 Text.create(item.price); 123 Text.pop(); 124 }, item => item.id.toString()); 125 ForEach.pop(); 126 Text.create('this.totalPurchase'); 127 Text.pop(); 128 Column.pop(); 129 } 130} 131class BasketModifier extends View { 132 constructor(compilerAssignedUniqueChildId, parent, params) { 133 super(compilerAssignedUniqueChildId, parent); 134 this.__shopBasket = new ObservedPropertyObject([], this, "shopBasket"); 135 this.updateWithValueParams(params); 136 } 137 updateWithValueParams(params) { 138 if (params.shopBasket !== undefined) { 139 this.shopBasket = params.shopBasket; 140 } 141 } 142 aboutToBeDeleted() { 143 this.__shopBasket.aboutToBeDeleted(); 144 SubscriberManager.Get().delete(this.id()); 145 } 146 get shopBasket() { 147 return this.__shopBasket.get(); 148 } 149 set shopBasket(newValue) { 150 this.__shopBasket.set(newValue); 151 } 152 render() { 153 Column.create(); 154 Button.createWithLabel("add to basket"); 155 Button.onClick(() => { this.shopBasket.push(new PurchaseItem(Math.round(100 * Math.random()))); }); 156 Button.pop(); 157 let earlierCreatedChild_3 = this.findChildById("3"); 158 if (earlierCreatedChild_3 == undefined) { 159 View.create(new BasketViewer("3", this, { shopBasket: this.__shopBasket })); 160 } 161 else { 162 earlierCreatedChild_3.updateWithValueParams({}); 163 View.create(earlierCreatedChild_3); 164 } 165 Column.pop(); 166 } 167} 168loadDocument(new BasketModifier("1", undefined, {})); 169`