1/* 2 * Copyright (c) 2023-2023 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 16export class SplitLayout extends ViewPU { 17 constructor(e, t, o, r = -1) { 18 super(e, o, r); 19 this.container = void 0; 20 this.__sizeValue = new ObservedPropertySimplePU("", this, "sizeValue"); 21 this.__areaWidth = new ObservedPropertySimplePU(0, this, "areaWidth"); 22 this.__imageBackgroundColor = new ObservedPropertySimplePU("#19000000", this, "imageBackgroundColor"); 23 this.__mainImage = new SynchedPropertyObjectOneWayPU(t.mainImage, this, "mainImage"); 24 this.__primaryText = new SynchedPropertySimpleOneWayPU(t.primaryText, this, "primaryText"); 25 this.secondaryText = ""; 26 this.tertiaryText = ""; 27 this.setInitiallyProvidedValue(t) 28 } 29 30 setInitiallyProvidedValue(e) { 31 void 0 !== e.container && (this.container = e.container); 32 void 0 !== e.sizeValue && (this.sizeValue = e.sizeValue); 33 void 0 !== e.areaWidth && (this.areaWidth = e.areaWidth); 34 void 0 !== e.imageBackgroundColor && (this.imageBackgroundColor = e.imageBackgroundColor); 35 void 0 === e.primaryText && this.__primaryText.set(""); 36 void 0 !== e.secondaryText && (this.secondaryText = e.secondaryText); 37 void 0 !== e.tertiaryText && (this.tertiaryText = e.tertiaryText) 38 } 39 40 updateStateVars(e) { 41 this.__mainImage.reset(e.mainImage); 42 this.__primaryText.reset(e.primaryText) 43 } 44 45 purgeVariableDependenciesOnElmtId(e) { 46 this.__sizeValue.purgeDependencyOnElmtId(e); 47 this.__areaWidth.purgeDependencyOnElmtId(e); 48 this.__imageBackgroundColor.purgeDependencyOnElmtId(e); 49 this.__mainImage.purgeDependencyOnElmtId(e); 50 this.__primaryText.purgeDependencyOnElmtId(e) 51 } 52 53 aboutToBeDeleted() { 54 this.__sizeValue.aboutToBeDeleted(); 55 this.__areaWidth.aboutToBeDeleted(); 56 this.__imageBackgroundColor.aboutToBeDeleted(); 57 this.__mainImage.aboutToBeDeleted(); 58 this.__primaryText.aboutToBeDeleted(); 59 SubscriberManager.Get().delete(this.id__()); 60 this.aboutToBeDeletedInternal() 61 } 62 63 get sizeValue() { 64 return this.__sizeValue.get() 65 } 66 67 set sizeValue(e) { 68 this.__sizeValue.set(e) 69 } 70 71 get areaWidth() { 72 return this.__areaWidth.get() 73 } 74 75 set areaWidth(e) { 76 this.__areaWidth.set(e) 77 } 78 79 get imageBackgroundColor() { 80 return this.__imageBackgroundColor.get() 81 } 82 83 set imageBackgroundColor(e) { 84 this.__imageBackgroundColor.set(e) 85 } 86 87 get mainImage() { 88 return this.__mainImage.get() 89 } 90 91 set mainImage(e) { 92 this.__mainImage.set(e) 93 } 94 95 get primaryText() { 96 return this.__primaryText.get() 97 } 98 99 set primaryText(e) { 100 this.__primaryText.set(e) 101 } 102 103 initialRender() { 104 this.observeComponentCreation(((e, t) => { 105 ViewStackProcessor.StartGetAccessRecordingFor(e); 106 Column.create(); 107 Column.onAreaChange(((e, t) => { 108 console.info(`Ace: on area change, oldValue is ${JSON.stringify(e)} value is ${JSON.stringify(t)}`); 109 this.sizeValue = JSON.stringify(t); 110 this.areaWidth = parseInt(t.width.toString(), 0); 111 console.info("pingAce: on area change, oldValue is" + this.areaWidth); 112 console.info("pingAce: on area change, oldValue is" + parseInt(t.height.toString(), 0)) 113 })); 114 t || Column.pop(); 115 ViewStackProcessor.StopGetAccessRecording() 116 })); 117 this.observeComponentCreation(((e, t) => { 118 ViewStackProcessor.StartGetAccessRecordingFor(e); 119 If.create(); 120 this.areaWidth < 600 ? this.ifElseBranchUpdateFunction(0, (() => { 121 this.observeComponentCreation(((e, t) => { 122 ViewStackProcessor.StartGetAccessRecordingFor(e); 123 GridRow.create({ 124 columns: 4, 125 breakpoints: { reference: BreakpointsReference.WindowSize }, 126 direction: GridRowDirection.Row 127 }); 128 t || GridRow.pop(); 129 ViewStackProcessor.StopGetAccessRecording() 130 })); 131 this.observeComponentCreation(((e, t) => { 132 ViewStackProcessor.StartGetAccessRecordingFor(e); 133 GridCol.create({ span: { xs: 4, sm: 4, md: 4, lg: 4 } }); 134 t || GridCol.pop(); 135 ViewStackProcessor.StopGetAccessRecording() 136 })); 137 this.observeComponentCreation(((e, t) => { 138 ViewStackProcessor.StartGetAccessRecordingFor(e); 139 Column.create(); 140 t || Column.pop(); 141 ViewStackProcessor.StopGetAccessRecording() 142 })); 143 this.observeComponentCreation(((e, t) => { 144 ViewStackProcessor.StartGetAccessRecordingFor(e); 145 Stack.create({ alignContent: Alignment.Bottom }); 146 t || Stack.pop(); 147 ViewStackProcessor.StopGetAccessRecording() 148 })); 149 this.observeComponentCreation(((e, t) => { 150 ViewStackProcessor.StartGetAccessRecordingFor(e); 151 Image.create(this.mainImage); 152 Image.height("34%"); 153 Image.width("100%"); 154 t || Image.pop(); 155 ViewStackProcessor.StopGetAccessRecording() 156 })); 157 this.observeComponentCreation(((e, t) => { 158 ViewStackProcessor.StartGetAccessRecordingFor(e); 159 Column.create(); 160 Column.alignItems(HorizontalAlign.Center); 161 Column.margin({ 162 left: { 163 id: -1, 164 type: 10002, 165 params: ["sys.float.ohos_id_max_padding_start"], 166 bundleName: "", 167 moduleName: "" 168 }, 169 right: { 170 id: -1, 171 type: 10002, 172 params: ["sys.float.ohos_id_max_padding_end"], 173 bundleName: "", 174 moduleName: "" 175 } 176 }); 177 t || Column.pop(); 178 ViewStackProcessor.StopGetAccessRecording() 179 })); 180 this.observeComponentCreation(((e, t) => { 181 ViewStackProcessor.StartGetAccessRecordingFor(e); 182 Text.create(this.primaryText); 183 Text.fontWeight(FontWeight.Medium); 184 Text.textAlign(TextAlign.Center); 185 Text.fontSize({ 186 id: -1, 187 type: 10002, 188 params: ["sys.float.ohos_id_text_size_headline7"], 189 bundleName: "", 190 moduleName: "" 191 }); 192 Text.fontColor({ 193 id: -1, 194 type: 10001, 195 params: ["sys.color.ohos_id_color_text_primary"], 196 bundleName: "", 197 moduleName: "" 198 }); 199 t || Text.pop(); 200 ViewStackProcessor.StopGetAccessRecording() 201 })); 202 Text.pop(); 203 this.observeComponentCreation(((e, t) => { 204 ViewStackProcessor.StartGetAccessRecordingFor(e); 205 Text.create(this.secondaryText); 206 Text.textAlign(TextAlign.Center); 207 Text.fontSize({ 208 id: -1, 209 type: 10002, 210 params: ["sys.float.ohos_id_text_size_body2"], 211 bundleName: "", 212 moduleName: "" 213 }); 214 Text.fontColor({ 215 id: -1, 216 type: 10001, 217 params: ["sys.color.ohos_id_color_text_primary"], 218 bundleName: "", 219 moduleName: "" 220 }); 221 Text.margin({ top: 4, bottom: 8 }); 222 t || Text.pop(); 223 ViewStackProcessor.StopGetAccessRecording() 224 })); 225 Text.pop(); 226 this.observeComponentCreation(((e, t) => { 227 ViewStackProcessor.StartGetAccessRecordingFor(e); 228 Text.create(this.tertiaryText); 229 Text.textAlign(TextAlign.Center); 230 Text.fontSize({ 231 id: -1, 232 type: 10002, 233 params: ["sys.float.ohos_id_text_size_caption"], 234 bundleName: "", 235 moduleName: "" 236 }); 237 Text.fontColor({ 238 id: -1, 239 type: 10001, 240 params: ["sys.color.ohos_id_color_text_secondary"], 241 bundleName: "", 242 moduleName: "" 243 }); 244 Text.margin({ bottom: 24 }); 245 t || Text.pop(); 246 ViewStackProcessor.StopGetAccessRecording() 247 })); 248 Text.pop(); 249 Column.pop(); 250 Stack.pop(); 251 this.observeComponentCreation(((e, t) => { 252 ViewStackProcessor.StartGetAccessRecordingFor(e); 253 Column.create(); 254 Column.height("66%"); 255 Column.width("100%"); 256 t || Column.pop(); 257 ViewStackProcessor.StopGetAccessRecording() 258 })); 259 this.container.bind(this)(); 260 Column.pop(); 261 Column.pop(); 262 GridCol.pop(); 263 GridRow.pop() 264 })) : 600 < this.areaWidth && this.areaWidth < 840 ? this.ifElseBranchUpdateFunction(1, (() => { 265 this.observeComponentCreation(((e, t) => { 266 ViewStackProcessor.StartGetAccessRecordingFor(e); 267 GridRow.create({ 268 columns: 8, 269 breakpoints: { reference: BreakpointsReference.WindowSize }, 270 direction: GridRowDirection.Row 271 }); 272 t || GridRow.pop(); 273 ViewStackProcessor.StopGetAccessRecording() 274 })); 275 this.observeComponentCreation(((e, t) => { 276 ViewStackProcessor.StartGetAccessRecordingFor(e); 277 GridCol.create({ span: { xs: 8, sm: 8, md: 8, lg: 8 } }); 278 t || GridCol.pop(); 279 ViewStackProcessor.StopGetAccessRecording() 280 })); 281 this.observeComponentCreation(((e, t) => { 282 ViewStackProcessor.StartGetAccessRecordingFor(e); 283 Column.create(); 284 t || Column.pop(); 285 ViewStackProcessor.StopGetAccessRecording() 286 })); 287 this.observeComponentCreation(((e, t) => { 288 ViewStackProcessor.StartGetAccessRecordingFor(e); 289 Row.create(); 290 Row.backgroundColor(this.imageBackgroundColor); 291 Row.height("34%"); 292 Row.width("100%"); 293 t || Row.pop(); 294 ViewStackProcessor.StopGetAccessRecording() 295 })); 296 this.observeComponentCreation(((e, t) => { 297 ViewStackProcessor.StartGetAccessRecordingFor(e); 298 Image.create(this.mainImage); 299 Image.margin({ left: 96, right: 36 }); 300 Image.height("60%"); 301 Image.width("20%"); 302 t || Image.pop(); 303 ViewStackProcessor.StopGetAccessRecording() 304 })); 305 this.observeComponentCreation(((e, t) => { 306 ViewStackProcessor.StartGetAccessRecordingFor(e); 307 Column.create(); 308 Column.width("42%"); 309 Column.alignItems(HorizontalAlign.Start); 310 Column.margin({ right: 96 }); 311 t || Column.pop(); 312 ViewStackProcessor.StopGetAccessRecording() 313 })); 314 this.observeComponentCreation(((e, t) => { 315 ViewStackProcessor.StartGetAccessRecordingFor(e); 316 Text.create(this.primaryText); 317 Text.fontWeight(FontWeight.Medium); 318 Text.fontSize({ 319 id: -1, 320 type: 10002, 321 params: ["sys.float.ohos_id_text_size_headline7"], 322 bundleName: "", 323 moduleName: "" 324 }); 325 Text.fontColor({ 326 id: -1, 327 type: 10001, 328 params: ["sys.color.ohos_id_color_text_primary"], 329 bundleName: "", 330 moduleName: "" 331 }); 332 t || Text.pop(); 333 ViewStackProcessor.StopGetAccessRecording() 334 })); 335 Text.pop(); 336 this.observeComponentCreation(((e, t) => { 337 ViewStackProcessor.StartGetAccessRecordingFor(e); 338 Text.create(this.secondaryText); 339 Text.fontSize({ 340 id: -1, 341 type: 10002, 342 params: ["sys.float.ohos_id_text_size_body2"], 343 bundleName: "", 344 moduleName: "" 345 }); 346 Text.fontColor({ 347 id: -1, 348 type: 10001, 349 params: ["sys.color.ohos_id_color_text_primary"], 350 bundleName: "", 351 moduleName: "" 352 }); 353 Text.margin({ top: 4, bottom: 8 }); 354 t || Text.pop(); 355 ViewStackProcessor.StopGetAccessRecording() 356 })); 357 Text.pop(); 358 this.observeComponentCreation(((e, t) => { 359 ViewStackProcessor.StartGetAccessRecordingFor(e); 360 Text.create(this.tertiaryText); 361 Text.fontSize({ 362 id: -1, 363 type: 10002, 364 params: ["sys.float.ohos_id_text_size_caption"], 365 bundleName: "", 366 moduleName: "" 367 }); 368 Text.fontColor({ 369 id: -1, 370 type: 10001, 371 params: ["sys.color.ohos_id_color_text_secondary"], 372 bundleName: "", 373 moduleName: "" 374 }); 375 t || Text.pop(); 376 ViewStackProcessor.StopGetAccessRecording() 377 })); 378 Text.pop(); 379 Column.pop(); 380 Row.pop(); 381 this.observeComponentCreation(((e, t) => { 382 ViewStackProcessor.StartGetAccessRecordingFor(e); 383 Column.create(); 384 Column.width("100%"); 385 Column.height("66%"); 386 t || Column.pop(); 387 ViewStackProcessor.StopGetAccessRecording() 388 })); 389 this.container.bind(this)(); 390 Column.pop(); 391 Column.pop(); 392 GridCol.pop(); 393 GridRow.pop() 394 })) : this.areaWidth > 840 && this.ifElseBranchUpdateFunction(2, (() => { 395 this.observeComponentCreation(((e, t) => { 396 ViewStackProcessor.StartGetAccessRecordingFor(e); 397 GridRow.create({ 398 columns: 12, 399 breakpoints: { reference: BreakpointsReference.WindowSize }, 400 direction: GridRowDirection.Row 401 }); 402 GridRow.width("100%"); 403 t || GridRow.pop(); 404 ViewStackProcessor.StopGetAccessRecording() 405 })); 406 this.observeComponentCreation(((e, t) => { 407 ViewStackProcessor.StartGetAccessRecordingFor(e); 408 GridCol.create({ span: { xs: 4, sm: 4, md: 4, lg: 4 } }); 409 GridCol.height("100%"); 410 t || GridCol.pop(); 411 ViewStackProcessor.StopGetAccessRecording() 412 })); 413 this.observeComponentCreation(((e, t) => { 414 ViewStackProcessor.StartGetAccessRecordingFor(e); 415 Column.create(); 416 Column.width("100%"); 417 Column.height("100%"); 418 Column.backgroundColor(this.imageBackgroundColor); 419 Column.justifyContent(FlexAlign.Center); 420 Column.alignItems(HorizontalAlign.Center); 421 t || Column.pop(); 422 ViewStackProcessor.StopGetAccessRecording() 423 })); 424 this.observeComponentCreation(((e, t) => { 425 ViewStackProcessor.StartGetAccessRecordingFor(e); 426 Image.create(this.mainImage); 427 Image.height("17%"); 428 Image.width("34%"); 429 Image.margin({ bottom: 36 }); 430 t || Image.pop(); 431 ViewStackProcessor.StopGetAccessRecording() 432 })); 433 this.observeComponentCreation(((e, t) => { 434 ViewStackProcessor.StartGetAccessRecordingFor(e); 435 Text.create(this.primaryText); 436 Text.textAlign(TextAlign.Center); 437 Text.fontWeight(FontWeight.Medium); 438 Text.fontSize({ 439 id: -1, 440 type: 10002, 441 params: ["sys.float.ohos_id_text_size_headline7"], 442 bundleName: "", 443 moduleName: "" 444 }); 445 Text.fontColor({ 446 id: -1, 447 type: 10001, 448 params: ["sys.color.ohos_id_color_text_primary"], 449 bundleName: "", 450 moduleName: "" 451 }); 452 Text.margin({ left: 48, right: 48 }); 453 t || Text.pop(); 454 ViewStackProcessor.StopGetAccessRecording() 455 })); 456 Text.pop(); 457 this.observeComponentCreation(((e, t) => { 458 ViewStackProcessor.StartGetAccessRecordingFor(e); 459 Text.create(this.secondaryText); 460 Text.textAlign(TextAlign.Center); 461 Text.fontSize({ 462 id: -1, 463 type: 10002, 464 params: ["sys.float.ohos_id_text_size_body2"], 465 bundleName: "", 466 moduleName: "" 467 }); 468 Text.fontColor({ 469 id: -1, 470 type: 10001, 471 params: ["sys.color.ohos_id_color_text_primary"], 472 bundleName: "", 473 moduleName: "" 474 }); 475 Text.margin({ top: 4, bottom: 8, left: 48, right: 48 }); 476 t || Text.pop(); 477 ViewStackProcessor.StopGetAccessRecording() 478 })); 479 Text.pop(); 480 this.observeComponentCreation(((e, t) => { 481 ViewStackProcessor.StartGetAccessRecordingFor(e); 482 Text.create(this.tertiaryText); 483 Text.textAlign(TextAlign.Center); 484 Text.fontSize({ 485 id: -1, 486 type: 10002, 487 params: ["sys.float.ohos_id_text_size_caption"], 488 bundleName: "", 489 moduleName: "" 490 }); 491 Text.fontColor({ 492 id: -1, 493 type: 10001, 494 params: ["sys.color.ohos_id_color_text_secondary"], 495 bundleName: "", 496 moduleName: "" 497 }); 498 Text.margin({ left: 48, right: 48 }); 499 t || Text.pop(); 500 ViewStackProcessor.StopGetAccessRecording() 501 })); 502 Text.pop(); 503 Column.pop(); 504 GridCol.pop(); 505 this.observeComponentCreation(((e, t) => { 506 ViewStackProcessor.StartGetAccessRecordingFor(e); 507 GridCol.create({ span: { xs: 8, sm: 8, md: 8, lg: 8 } }); 508 t || GridCol.pop(); 509 ViewStackProcessor.StopGetAccessRecording() 510 })); 511 this.container.bind(this)(); 512 GridCol.pop(); 513 GridRow.pop() 514 })); 515 t || If.pop(); 516 ViewStackProcessor.StopGetAccessRecording() 517 })); 518 If.pop(); 519 Column.pop() 520 } 521 522 rerender() { 523 this.updateDirtyElements() 524 } 525} 526export default { SplitLayout };