1/* 2 * Copyright (c) 2025 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 16if (!("finalizeConstruction" in ViewPU.prototype)) { 17 Reflect.set(ViewPU.prototype, "finalizeConstruction", () => { }); 18} 19 20let image = requireNapi('multimedia.image'); 21let i = requireNapi('i18n'); 22 23export var FormType; 24(function (FormType) { 25 FormType[FormType["TYPE_BIG"] = 0] = "TYPE_BIG"; 26 FormType[FormType["TYPE_MID"] = 1] = "TYPE_MID"; 27 FormType[FormType["TYPE_SMALL"] = 2] = "TYPE_SMALL"; 28})(FormType || (FormType = {})); 29var TextType; 30(function (TextType) { 31 TextType[TextType["TITLE"] = 0] = "TITLE"; 32 TextType[TextType["DESCRIPTION"] = 1] = "DESCRIPTION"; 33 TextType[TextType["APP_NAME"] = 2] = "APP_NAME"; 34})(TextType || (TextType = {})); 35const j = 'udmf.ContentFormCard'; 36const m = 37 '82,73,70,70,60,3,0,0,87,69,66,80,86,80,56,32,48,3,0,0,144,67,0,157,1,42,36,2,76,1,62,145,72,161,76,37,164,163,34,3' + 38 '4,151,40,24,176,18,9,105,110,225,117,81,27,243,141,167,87,231,251,1,151,228,76,129,74,56,124,143,240,134,221,17,24' + 39 '5,145,49,195,251,155,103,15,145,254,16,219,162,62,178,38,56,127,115,108,225,242,63,194,27,116,71,214,68,199,15,238' + 40 ',109,156,62,71,248,67,110,136,250,200,152,225,253,205,179,135,200,255,8,109,209,31,89,19,28,63,185,182,112,249,31,' + 41 '225,13,186,35,235,34,99,135,247,54,206,31,35,252,33,183,68,125,100,76,112,254,230,217,195,228,75,0,41,63,219,242,2' + 42 '38,77,44,240,251,18,157,13,186,35,235,34,99,135,247,54,206,31,35,249,8,172,169,162,121,152,235,226,174,0,65,245,14' + 43 '5,49,195,251,155,103,15,145,254,16,219,50,4,52,148,102,170,225,73,64,87,161,183,68,125,100,76,112,254,230,217,195,' + 44 '228,71,209,214,155,210,69,175,155,95,117,236,130,111,176,161,115,26,13,253,205,179,135,200,255,8,109,209,31,89,19,' + 45 '28,63,185,182,112,248,134,3,147,196,80,183,60,143,240,134,221,17,245,145,49,195,251,155,103,9,153,121,194,183,243,' + 46 '118,43,147,107,248,164,83,185,180,54,232,143,172,137,142,31,220,219,56,124,136,157,203,110,159,181,177,87,164,132,' + 47 '51,246,217,120,189,13,186,35,235,34,99,134,241,245,180,72,132,116,112,254,7,167,195,150,227,244,98,234,67,237,155,' + 48 '35,135,102,236,204,223,23,161,183,68,125,100,75,176,70,248,207,116,46,59,232,218,137,15,41,225,38,20,162,105,88,3,' + 49 '59,221,52,249,17,46,76,68,130,195,148,187,103,15,145,253,241,76,10,132,82,146,126,208,179,241,65,64,84,151,15,193,' + 50 '27,58,174,246,254,217,195,225,201,8,103,237,178,241,122,27,116,71,210,161,106,19,234,133,230,77,60,101,201,227,55,' + 51 '59,2,148,71,237,122,200,152,222,202,193,86,94,164,111,28,63,185,180,88,205,133,69,41,39,237,156,62,237,252,33,183,' + 52 '68,126,68,34,111,88,1,159,60,108,76,112,252,104,245,218,227,1,255,172,137,142,31,220,219,56,124,143,239,99,182,153' + 53 ',157,89,206,237,156,41,135,174,215,24,15,76,90,90,193,245,145,49,195,251,155,103,15,145,18,140,226,36,22,28,165,21' + 54 '8,7,174,215,23,217,167,25,36,48,125,100,76,112,254,230,217,195,196,106,61,255,30,253,149,0,0,254,254,226,128,0,0,0' + 55 ',0,0,8,43,156,5,139,91,64,214,164,5,157,168,214,71,99,143,63,110,129,210,71,53,1,30,120,20,41,161,99,5,167,202,76,' + 56 '251,103,189,240,128,146,208,198,255,248,206,215,46,193,53,91,227,66,219,241,255,4,235,164,113,76,186,21,195,174,10' + 57 ',72,252,102,101,0,19,200,26,224,13,190,145,249,137,208,169,128,196,203,52,114,184,23,26,103,126,29,119,157,143,214' + 58 ',115,91,208,138,148,47,18,132,3,189,65,160,138,162,129,225,223,121,199,68,111,66,131,240,170,9,87,178,109,244,143,' + 59 '204,78,245,205,43,87,181,148,112,162,163,53,27,128,197,247,165,165,55,37,6,212,240,48,76,139,191,173,182,51,61,7,1' + 60 '38,70,81,93,158,178,96,58,63,135,99,61,33,123,114,106,17,205,205,245,73,209,248,208,230,67,84,83,67,62,174,199,125' + 61 ',7,42,68,205,119,254,54,95,35,146,246,87,229,105,194,49,134,23,113,205,13,105,146,10,231,32,0,26,210,69,47,127,104' + 62 ',73,141,205,245,214,23,231,110,132,188,27,13,88,8,43,145,225,60,68,0,42,15,95,85,238,25,204,75,166,163,127,0,0'; 63const o = 1.2; 64const t = 0.8; 65const u = 0.4; 66const a1 = 200; 67const b1 = 200; 68const c1 = 100; 69const d1 = 137; 70const e1 = 83; 71const f1 = 70; 72const g1 = 40; 73const h1 = 50; 74const i1 = 30; 75const j1 = 2; 76const l1 = '100%'; 77const m1 = '#E6FFFFFF'; 78const n1 = '#00000000'; 79const o1 = '#99182431'; 80const q1 = '#CCCCCC'; 81const s1 = '#55CCCCCC'; 82const t1 = '#ff182431'; 83const u1 = '#99182431'; 84const v1 = 72; 85const w1 = 59; 86const z1 = 3.25; 87const a2 = { 88 d2: 200, 89 e2: 120, 90 f2: 14, 91 g2: 16, 92 h2: 10, 93 i2: 14, 94 j2: 16, 95 l2: 4, 96 m2: 5, 97 n2: 10, 98 o2: 14, 99 q2: 12, 100 s2: 16, 101 t2: 6.5, 102 u2: 12, 103 v2: 10, 104 w2: 5 105}; 106const b2 = { 107 d2: 36, 108 e2: 48, 109 z2: 14, 110 i2: 10, 111 j2: 12, 112 a3: 14, 113 b3: 16, 114 l2: 10, 115 f2: 14, 116 g2: 16, 117 h2: 14, 118 m2: 5, 119 n2: 10, 120 o2: 14, 121 q2: 12, 122 s2: 16, 123 t2: 6.5, 124 u2: 12, 125 v2: 10, 126 w2: 5 127}; 128const c2 = { 129 d2: 24, 130 e2: 24, 131 z2: 8, 132 f2: 12, 133 g2: 14, 134 h2: 9, 135 i2: 10, 136 j2: 12, 137 a3: 12, 138 b3: 14, 139 l2: 4, 140 m2: 5, 141 n2: 10, 142 q2: 12, 143 s2: 12, 144 t2: 4, 145 o2: 12, 146 u2: 8, 147 v2: 8, 148 w2: 4 149}; 150 151export class ContentFormCard extends ViewPU { 152 constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { 153 super(parent, __localStorage, elmtId, extraInfo); 154 if (typeof paramsLambda === "function") { 155 this.paramsGenerator_ = paramsLambda; 156 } 157 this.__formType = new SynchedPropertySimpleOneWayPU(params.formType, this, "formType"); 158 this.contentFormData = undefined; 159 this.formStyle = b2; 160 this.controller = new TextController(); 161 this.__cardScale = new ObservedPropertySimplePU(1, this, "cardScale"); 162 this.__formWidth = new SynchedPropertySimpleOneWayPU(params.formWidth, this, "formWidth"); 163 this.__formHeight = new SynchedPropertySimpleOneWayPU(params.formHeight, this, "formHeight"); 164 this.__cardWidth = new ObservedPropertySimplePU(0, this, "cardWidth"); 165 this.__cardHeight = new ObservedPropertySimplePU(0, this, "cardHeight"); 166 this.__defaultThumbImage = new ObservedPropertyObjectPU(undefined, this, "defaultThumbImage"); 167 this.__thumbImage = new ObservedPropertyObjectPU(undefined, this, "thumbImage"); 168 this.__appImage = new ObservedPropertyObjectPU(undefined, this, "appImage"); 169 this.__lineCount = new ObservedPropertySimplePU(1, this, "lineCount"); 170 this.__isMirrorLanguageType = new ObservedPropertySimplePU(false, this, "isMirrorLanguageType"); 171 this.handleOnClick = () => { 172 }; 173 this.setInitiallyProvidedValue(params); 174 this.declareWatch("formType", this.formTypeChange); 175 this.declareWatch("formWidth", this.formSizeChange); 176 this.declareWatch("formHeight", this.formSizeChange); 177 this.finalizeConstruction(); 178 } 179 180 setInitiallyProvidedValue(params) { 181 if (params.formType === undefined) { 182 this.__formType.set(FormType.TYPE_MID); 183 } 184 if (params.contentFormData !== undefined) { 185 this.contentFormData = params.contentFormData; 186 } 187 if (params.formStyle !== undefined) { 188 this.formStyle = params.formStyle; 189 } 190 if (params.controller !== undefined) { 191 this.controller = params.controller; 192 } 193 if (params.cardScale !== undefined) { 194 this.cardScale = params.cardScale; 195 } 196 if (params.formWidth === undefined) { 197 this.__formWidth.set(0); 198 } 199 if (params.formHeight === undefined) { 200 this.__formHeight.set(0); 201 } 202 if (params.cardWidth !== undefined) { 203 this.cardWidth = params.cardWidth; 204 } 205 if (params.cardHeight !== undefined) { 206 this.cardHeight = params.cardHeight; 207 } 208 if (params.defaultThumbImage !== undefined) { 209 this.defaultThumbImage = params.defaultThumbImage; 210 } 211 if (params.thumbImage !== undefined) { 212 this.thumbImage = params.thumbImage; 213 } 214 if (params.appImage !== undefined) { 215 this.appImage = params.appImage; 216 } 217 if (params.lineCount !== undefined) { 218 this.lineCount = params.lineCount; 219 } 220 if (params.isMirrorLanguageType !== undefined) { 221 this.isMirrorLanguageType = params.isMirrorLanguageType; 222 } 223 if (params.handleOnClick !== undefined) { 224 this.handleOnClick = params.handleOnClick; 225 } 226 } 227 228 updateStateVars(params) { 229 this.__formType.reset(params.formType); 230 this.__formWidth.reset(params.formWidth); 231 this.__formHeight.reset(params.formHeight); 232 } 233 234 purgeVariableDependenciesOnElmtId(rmElmtId) { 235 this.__formType.purgeDependencyOnElmtId(rmElmtId); 236 this.__cardScale.purgeDependencyOnElmtId(rmElmtId); 237 this.__formWidth.purgeDependencyOnElmtId(rmElmtId); 238 this.__formHeight.purgeDependencyOnElmtId(rmElmtId); 239 this.__cardWidth.purgeDependencyOnElmtId(rmElmtId); 240 this.__cardHeight.purgeDependencyOnElmtId(rmElmtId); 241 this.__defaultThumbImage.purgeDependencyOnElmtId(rmElmtId); 242 this.__thumbImage.purgeDependencyOnElmtId(rmElmtId); 243 this.__appImage.purgeDependencyOnElmtId(rmElmtId); 244 this.__lineCount.purgeDependencyOnElmtId(rmElmtId); 245 this.__isMirrorLanguageType.purgeDependencyOnElmtId(rmElmtId); 246 } 247 248 aboutToBeDeleted() { 249 this.__formType.aboutToBeDeleted(); 250 this.__cardScale.aboutToBeDeleted(); 251 this.__formWidth.aboutToBeDeleted(); 252 this.__formHeight.aboutToBeDeleted(); 253 this.__cardWidth.aboutToBeDeleted(); 254 this.__cardHeight.aboutToBeDeleted(); 255 this.__defaultThumbImage.aboutToBeDeleted(); 256 this.__thumbImage.aboutToBeDeleted(); 257 this.__appImage.aboutToBeDeleted(); 258 this.__lineCount.aboutToBeDeleted(); 259 this.__isMirrorLanguageType.aboutToBeDeleted(); 260 SubscriberManager.Get().delete(this.id__()); 261 this.aboutToBeDeletedInternal(); 262 } 263 264 get formType() { 265 return this.__formType.get(); 266 } 267 268 set formType(newValue) { 269 this.__formType.set(newValue); 270 } 271 272 get cardScale() { 273 return this.__cardScale.get(); 274 } 275 276 set cardScale(newValue) { 277 this.__cardScale.set(newValue); 278 } 279 280 get formWidth() { 281 return this.__formWidth.get(); 282 } 283 284 set formWidth(newValue) { 285 this.__formWidth.set(newValue); 286 } 287 288 get formHeight() { 289 return this.__formHeight.get(); 290 } 291 292 set formHeight(newValue) { 293 this.__formHeight.set(newValue); 294 } 295 296 get cardWidth() { 297 return this.__cardWidth.get(); 298 } 299 300 set cardWidth(newValue) { 301 this.__cardWidth.set(newValue); 302 } 303 304 get cardHeight() { 305 return this.__cardHeight.get(); 306 } 307 308 set cardHeight(newValue) { 309 this.__cardHeight.set(newValue); 310 } 311 312 get defaultThumbImage() { 313 return this.__defaultThumbImage.get(); 314 } 315 316 set defaultThumbImage(newValue) { 317 this.__defaultThumbImage.set(newValue); 318 } 319 320 get thumbImage() { 321 return this.__thumbImage.get(); 322 } 323 324 set thumbImage(newValue) { 325 this.__thumbImage.set(newValue); 326 } 327 328 get appImage() { 329 return this.__appImage.get(); 330 } 331 332 set appImage(newValue) { 333 this.__appImage.set(newValue); 334 } 335 336 get lineCount() { 337 return this.__lineCount.get(); 338 } 339 340 set lineCount(newValue) { 341 this.__lineCount.set(newValue); 342 } 343 344 get isMirrorLanguageType() { 345 return this.__isMirrorLanguageType.get(); 346 } 347 348 set isMirrorLanguageType(newValue) { 349 this.__isMirrorLanguageType.set(newValue); 350 } 351 352 aboutToAppear() { 353 this.initSystemLanguage(); 354 this.initCardStyle(); 355 this.createPixelMap(); 356 } 357 358 aboutToDisappear() { 359 this.contentFormData = undefined; 360 this.thumbImage = undefined; 361 this.appImage = undefined; 362 } 363 364 formTypeChange() { 365 switch (this.formType) { 366 case FormType.TYPE_BIG: 367 this.formWidth = a1; 368 break; 369 case FormType.TYPE_MID: 370 this.formWidth = b1; 371 break; 372 default: 373 this.formWidth = d1; 374 break; 375 } 376 this.initCardStyle(); 377 } 378 379 formSizeChange() { 380 this.initCardStyle(); 381 } 382 383 initCardScale(o2, q2, r2) { 384 let s2 = this.formType === FormType.TYPE_SMALL ? u : t; 385 if (o2 > o) { 386 this.cardScale = o; 387 } else if (o2 < s2) { 388 this.cardScale = s2; 389 } else { 390 this.cardScale = o2; 391 } 392 this.cardWidth = q2 * this.cardScale; 393 this.cardHeight = 394 (this.contentFormData?.title === '' && this.formHeight > 0) ? this.formHeight : r2 * this.cardScale; 395 console.info(`${j}, widthScale:${this.cardScale}, cardScale: ${this.cardScale}, ` + 396 `cardWidth: ${this.cardWidth}, cardHeight: ${this.cardHeight}`); 397 } 398 399 initCardStyle() { 400 let n2 = 1; 401 this.lineCount = 2; 402 switch (this.formType) { 403 case FormType.TYPE_BIG: 404 this.formStyle = a2; 405 n2 = this.formWidth ? this.formWidth / a1 : 1; 406 this.initCardScale(n2, a1, a1); 407 break; 408 case FormType.TYPE_MID: 409 this.formStyle = b2; 410 n2 = this.formWidth ? this.formWidth / b1 : 1; 411 this.initCardScale(n2, b1, c1); 412 break; 413 default: 414 this.formStyle = c2; 415 n2 = this.formWidth ? this.formWidth / d1 : 1; 416 this.initCardScale(n2, d1, e1); 417 break; 418 } 419 } 420 421 ThumbImage(parent = null) { 422 this.observeComponentCreation2((elmtId, isInitialRender) => { 423 Column.create(); 424 Column.size({ width: '100%' }); 425 Column.layoutWeight(this.formHeight > 0 ? 1 : 0); 426 Column.backgroundColor(this.thumbImage ? m1 : q1); 427 }, Column); 428 this.observeComponentCreation2((elmtId, isInitialRender) => { 429 If.create(); 430 if (this.formHeight > 0) { 431 this.ifElseBranchUpdateFunction(0, () => { 432 if (!If.canRetake('cardThumbImage')) { 433 this.observeComponentCreation2((elmtId, isInitialRender) => { 434 Image.create(this.thumbImage ? this.thumbImage : this.defaultThumbImage); 435 Image.objectFit(ImageFit.Contain); 436 Image.width('100%'); 437 Image.layoutWeight(1); 438 Image.draggable(false); 439 Image.id('cardThumbImage'); 440 }, Image); 441 } 442 }); 443 } else { 444 this.ifElseBranchUpdateFunction(1, () => { 445 if (!If.canRetake('cardThumbImage')) { 446 this.observeComponentCreation2((elmtId, isInitialRender) => { 447 Image.create(this.thumbImage ? this.thumbImage : this.defaultThumbImage); 448 Image.objectFit(ImageFit.Contain); 449 Image.width('100%'); 450 Image.aspectRatio(this.getAspectRatio()); 451 Image.draggable(false); 452 Image.id('cardThumbImage'); 453 }, Image); 454 } 455 }); 456 } 457 }, If); 458 If.pop(); 459 Column.pop(); 460 } 461 462 CardDivider(parent = null) { 463 this.observeComponentCreation2((elmtId, isInitialRender) => { 464 Divider.create(); 465 Divider.height(1); 466 Divider.opacity(0.5); 467 Divider.padding({ 468 left: this.formStyle.u2 * this.cardScale, 469 right: this.formStyle.u2 * this.cardScale 470 }); 471 }, Divider); 472 } 473 474 AppView(parent = null) { 475 this.observeComponentCreation2((elmtId, isInitialRender) => { 476 Row.create({ space: this.formStyle.t2 * this.cardScale }); 477 Row.padding({ 478 left: this.formStyle.u2 * this.cardScale, 479 right: this.formStyle.u2 * this.cardScale, 480 top: this.formStyle.w2 * this.cardScale, 481 bottom: this.formStyle.v2 * this.cardScale, 482 }); 483 }, Row); 484 this.observeComponentCreation2((elmtId, isInitialRender) => { 485 Image.create(this.appImage); 486 Image.width(this.formStyle.q2 * this.cardScale); 487 Image.height(this.formStyle.q2 * this.cardScale); 488 Image.objectFit(ImageFit.Fill); 489 Image.alt({ 490 "id": -1, 491 "type": 20000, 492 params: ['sys.media.ohos_app_icon'], 493 "bundleName": "__harDefaultBundleName__", 494 "moduleName": "__harDefaultModuleName__" 495 }); 496 Image.borderRadius({ 497 "id": -1, 498 "type": 10002, 499 params: ['sys.float.corner_radius_level1'], 500 "bundleName": "__harDefaultBundleName__", 501 "moduleName": "__harDefaultModuleName__" 502 }); 503 Image.draggable(false); 504 Image.id('cardAppIcon'); 505 }, Image); 506 this.observeComponentCreation2((elmtId, isInitialRender) => { 507 Text.create(this.contentFormData?.appName ? this.contentFormData?.appName : ' '); 508 Text.fontSize(this.formStyle.n2 * this.cardScale); 509 Text.fontColor(o1); 510 Text.maxLines(1); 511 Text.lineHeight(this.formStyle.o2 * this.cardScale); 512 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 513 Text.constraintSize({ minWidth: this.getTextSize(TextType.APP_NAME, this.contentFormData?.appName) }); 514 Text.backgroundColor(this.getTextBackground(this.contentFormData?.appName)); 515 Text.fontWeight(FontWeight.Regular); 516 Text.borderRadius(this.contentFormData?.title === '' ? 0 : j1); 517 Text.direction(this.isMirrorLanguageType ? Direction.Rtl : Direction.Ltr); 518 Text.maxFontScale(1); 519 Text.layoutWeight(1); 520 Text.id('cardAppName'); 521 }, Text); 522 Text.pop(); 523 Row.pop(); 524 } 525 526 TitleText(parent = null) { 527 this.observeComponentCreation2((elmtId, isInitialRender) => { 528 Text.create(this.contentFormData?.title); 529 Text.fontSize(this.formStyle.f2 * this.cardScale); 530 Text.fontColor(t1); 531 Text.fontWeight(FontWeight.Bold); 532 Text.maxLines(1); 533 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 534 Text.height(this.formStyle.g2 * this.cardScale); 535 Text.margin({ top: this.formStyle.h2 * this.cardScale }); 536 Text.constraintSize({ minWidth: this.getTextSize(TextType.TITLE, this.contentFormData?.title) }); 537 Text.backgroundColor(this.getTextBackground(this.contentFormData?.title)); 538 Text.borderRadius(this.contentFormData?.title === '' ? 0 : j1); 539 Text.direction(this.isMirrorLanguageType ? Direction.Rtl : Direction.Ltr); 540 Text.maxFontScale(1); 541 Text.id('cardTitleText'); 542 }, Text); 543 Text.pop(); 544 } 545 546 Card4x4(parent = null) { 547 this.observeComponentCreation2((elmtId, isInitialRender) => { 548 Column.create(); 549 Column.size({ width: '100%', height: this.cardHeight }); 550 }, Column); 551 this.observeComponentCreation2((elmtId, isInitialRender) => { 552 Image.create(this.thumbImage ? this.thumbImage : this.defaultThumbImage); 553 Image.objectFit(ImageFit.Cover); 554 Image.width('100%'); 555 Image.height(this.formStyle.e2 * this.cardScale); 556 Image.backgroundColor(this.thumbImage ? m1 : q1); 557 Image.draggable(false); 558 Image.id('cardThumbImage'); 559 }, Image); 560 this.observeComponentCreation2((elmtId, isInitialRender) => { 561 Column.create(); 562 Column.alignItems(HorizontalAlign.Start); 563 Column.width('100%'); 564 Column.padding({ 565 left: this.formStyle.u2 * this.cardScale, 566 right: this.formStyle.u2 * this.cardScale 567 }); 568 Column.margin({ bottom: this.formStyle.m2 * this.cardScale }); 569 Column.justifyContent(FlexAlign.Center); 570 }, Column); 571 this.TitleText.bind(this)(); 572 this.observeComponentCreation2((elmtId, isInitialRender) => { 573 Text.create(this.contentFormData?.description); 574 Text.fontSize(this.formStyle.i2 * this.cardScale); 575 Text.fontColor(u1); 576 Text.fontWeight(FontWeight.Regular); 577 Text.maxLines(1); 578 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 579 Text.constraintSize({ 580 minWidth: this.getTextSize(TextType.DESCRIPTION, this.contentFormData?.description) 581 }); 582 Text.height(this.formStyle.j2 * this.cardScale); 583 Text.margin({ top: this.formStyle.l2 * this.cardScale }); 584 Text.backgroundColor(this.getTextBackground(this.contentFormData?.description)); 585 Text.fontWeight(FontWeight.Regular); 586 Text.borderRadius(this.contentFormData?.description ? 0 : j1); 587 Text.direction(this.isMirrorLanguageType ? Direction.Rtl : Direction.Ltr); 588 Text.maxFontScale(1); 589 Text.id('cardDescription'); 590 }, Text); 591 Text.pop(); 592 Column.pop(); 593 this.CardDivider.bind(this)(); 594 this.AppView.bind(this)(); 595 Column.pop(); 596 } 597 598 DescriptionView(parent = null) { 599 this.observeComponentCreation2((elmtId, isInitialRender) => { 600 Text.create(this.contentFormData?.description ? this.contentFormData?.description : ' ', 601 { controller: this.controller }); 602 Text.fontColor(u1); 603 Text.fontWeight(FontWeight.Regular); 604 Text.maxLines(2); 605 Text.fontWeight(FontWeight.Regular); 606 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 607 Text.lineHeight((this.lineCount === 1 ? 608 (this.formStyle.b3 ? this.formStyle.b3 : 609 this.formStyle.j2) : this.formStyle.j2) * this.cardScale); 610 Text.fontSize(this.getDescriptionFontSize() * this.cardScale); 611 Text.constraintSize({ 612 minWidth: this.getTextSize(TextType.DESCRIPTION, this.contentFormData?.description) 613 }); 614 Text.backgroundColor(this.getTextBackground(this.contentFormData?.description)); 615 Text.borderRadius(this.contentFormData?.description ? 0 : j1); 616 Text.onAreaChange(() => { 617 let m2 = this.controller.getLayoutManager(); 618 if (m2.getLineCount() === 2) { 619 this.lineCount = 2; 620 } 621 }); 622 Text.direction(this.isMirrorLanguageType ? Direction.Rtl : Direction.Ltr); 623 Text.maxFontScale(1); 624 Text.id('cardDescription'); 625 }, Text); 626 Text.pop(); 627 } 628 629 Card4x2(parent = null) { 630 this.observeComponentCreation2((elmtId, isInitialRender) => { 631 Column.create(); 632 Column.size({ width: '100%' }); 633 Column.constraintSize(this.getThumbViewConstraintSize()); 634 }, Column); 635 this.observeComponentCreation2((elmtId, isInitialRender) => { 636 If.create(); 637 if (this.contentFormData?.title === '') { 638 this.ifElseBranchUpdateFunction(0, () => { 639 this.ThumbImage.bind(this)(); 640 }); 641 } else { 642 this.ifElseBranchUpdateFunction(1, () => { 643 this.observeComponentCreation2((elmtId, isInitialRender) => { 644 Row.create(); 645 Row.width('100%'); 646 Row.padding({ 647 left: this.formStyle.u2 * this.cardScale, 648 right: this.formStyle.u2 * this.cardScale 649 }); 650 Row.layoutWeight(1); 651 Row.margin({ bottom: this.formStyle.m2 * this.cardScale }); 652 Row.alignItems(VerticalAlign.Top); 653 }, Row); 654 this.observeComponentCreation2((elmtId, isInitialRender) => { 655 Column.create({ space: this.formStyle.l2 * this.cardScale }); 656 Column.layoutWeight(1); 657 Column.alignItems(HorizontalAlign.Start); 658 }, Column); 659 this.TitleText.bind(this)(); 660 this.DescriptionView.bind(this)(); 661 Column.pop(); 662 this.observeComponentCreation2((elmtId, isInitialRender) => { 663 If.create(); 664 if (this.thumbImage) { 665 this.ifElseBranchUpdateFunction(0, () => { 666 if (!If.canRetake('cardThumbImage')) { 667 this.observeComponentCreation2((elmtId, isInitialRender) => { 668 Image.create(this.thumbImage); 669 Image.width(this.formStyle.d2 * this.cardScale); 670 Image.height(this.formStyle.e2 * this.cardScale); 671 Image.objectFit(this.thumbImage ? ImageFit.Cover : ImageFit.Contain); 672 Image.borderRadius(4); 673 Image.draggable(false); 674 Image.margin({ 675 right: this.isMirrorLanguageType ? (this.formStyle.z2 * this.cardScale) : 0, 676 left: this.isMirrorLanguageType ? 0 : (this.formStyle.z2 * this.cardScale), 677 top: this.formStyle.h2 * this.cardScale 678 }); 679 Image.id('cardThumbImage'); 680 }, Image); 681 } 682 }); 683 } else { 684 this.ifElseBranchUpdateFunction(1, () => { 685 }); 686 } 687 }, If); 688 If.pop(); 689 Row.pop(); 690 }); 691 } 692 }, If); 693 If.pop(); 694 this.CardDivider.bind(this)(); 695 this.AppView.bind(this)(); 696 Column.pop(); 697 } 698 699 Card2x1(parent = null) { 700 this.observeComponentCreation2((elmtId, isInitialRender) => { 701 Column.create(); 702 Column.size({ width: '100%' }); 703 Column.constraintSize(this.getThumbViewConstraintSize()); 704 }, Column); 705 this.observeComponentCreation2((elmtId, isInitialRender) => { 706 If.create(); 707 if (this.contentFormData?.title === '') { 708 this.ifElseBranchUpdateFunction(0, () => { 709 this.ThumbImage.bind(this)(); 710 }); 711 } else { 712 this.ifElseBranchUpdateFunction(1, () => { 713 this.observeComponentCreation2((elmtId, isInitialRender) => { 714 Column.create(); 715 Column.width('100%'); 716 Column.padding({ 717 left: this.formStyle.u2 * this.cardScale, 718 right: this.formStyle.u2 * this.cardScale 719 }); 720 Column.layoutWeight(1); 721 Column.alignItems(HorizontalAlign.Start); 722 Column.margin({ bottom: this.formStyle.m2 * this.cardScale }); 723 }, Column); 724 this.TitleText.bind(this)(); 725 this.observeComponentCreation2((elmtId, isInitialRender) => { 726 Row.create(); 727 Row.margin({ top: this.formStyle.l2 * this.cardScale }); 728 Row.layoutWeight(1); 729 }, Row); 730 this.observeComponentCreation2((elmtId, isInitialRender) => { 731 Column.create(); 732 Column.layoutWeight(1); 733 Column.alignItems(HorizontalAlign.Start); 734 }, Column); 735 this.DescriptionView.bind(this)(); 736 Column.pop(); 737 this.observeComponentCreation2((elmtId, isInitialRender) => { 738 If.create(); 739 if (this.thumbImage) { 740 this.ifElseBranchUpdateFunction(0, () => { 741 if (!If.canRetake('cardThumbImage')) { 742 this.observeComponentCreation2((elmtId, isInitialRender) => { 743 Image.create(this.thumbImage); 744 Image.objectFit(ImageFit.Cover); 745 Image.borderRadius({ 746 "id": -1, 747 "type": 10002, 748 params: ['sys.float.corner_radius_level2'], 749 "bundleName": "__harDefaultBundleName__", 750 "moduleName": "__harDefaultModuleName__" 751 }); 752 Image.width(this.formStyle.d2 * this.cardScale); 753 Image.height(this.formStyle.e2 * this.cardScale); 754 Image.draggable(false); 755 Image.margin({ 756 left: this.isMirrorLanguageType ? 0 : (this.formStyle.z2 * this.cardScale), 757 right: this.isMirrorLanguageType ? (this.formStyle.z2 * this.cardScale) : 0 758 }); 759 Image.id('cardThumbImage'); 760 }, Image); 761 } 762 }); 763 } else { 764 this.ifElseBranchUpdateFunction(1, () => { 765 }); 766 } 767 }, If); 768 If.pop(); 769 Row.pop(); 770 Column.pop(); 771 }); 772 } 773 }, If); 774 If.pop(); 775 this.CardDivider.bind(this)(); 776 this.AppView.bind(this)(); 777 Column.pop(); 778 } 779 780 initialRender() { 781 this.observeComponentCreation2((elmtId, isInitialRender) => { 782 Column.create(); 783 Column.borderRadius(this.formStyle.s2 * this.cardScale); 784 Column.clip(true); 785 Column.backgroundColor(m1); 786 Column.backgroundBlurStyle(BlurStyle.COMPONENT_ULTRA_THICK, 787 { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 }); 788 Column.shadow(ShadowStyle.OUTER_DEFAULT_SM); 789 Column.width(this.cardWidth); 790 Column.onClick(() => { 791 this.handleOnClick(); 792 if (!this.contentFormData?.linkUri) { 793 console.warn(`${j}, linkUri is null`); 794 return; 795 } 796 try { 797 let context = getContext(this); 798 context.openLink(this.contentFormData?.linkUri, { appLinkingOnly: false, parameters: {} }); 799 } catch (err) { 800 let error = err; 801 console.error(`${j}, Failed to openLink, code is ${error.code}, message is ${error.message}`); 802 } 803 }); 804 }, Column); 805 this.observeComponentCreation2((elmtId, isInitialRender) => { 806 If.create(); 807 if (this.initSystemLanguage() && this.formType === FormType.TYPE_BIG) { 808 this.ifElseBranchUpdateFunction(0, () => { 809 this.Card4x4.bind(this)(); 810 }); 811 } else if (this.formType === FormType.TYPE_MID) { 812 this.ifElseBranchUpdateFunction(1, () => { 813 this.Card4x2.bind(this)(); 814 }); 815 } else { 816 this.ifElseBranchUpdateFunction(2, () => { 817 this.Card2x1.bind(this)(); 818 }); 819 } 820 }, If); 821 If.pop(); 822 Column.pop(); 823 } 824 825 initSystemLanguage() { 826 try { 827 this.isMirrorLanguageType = i.isRTL(i.System.getSystemLanguage()); 828 } catch (err) { 829 let error = err; 830 console.error(`${j}, Failed to init system language, code is ${error.code}, message is ${error.message}`); 831 } 832 return true; 833 } 834 835 async getPixelMap(j2, callback) { 836 let k2 = undefined; 837 try { 838 k2 = image.createImageSource(j2.buffer); 839 let l2 = await k2?.createPixelMap(); 840 callback(l2); 841 k2.release(); 842 } catch (err) { 843 let error = err; 844 console.error(`${j}, Failed to create pixelMap, code is ${error.code}, message is ${error.message}`); 845 } 846 } 847 848 transStringToUint8Array(h2) { 849 const arr = h2.split(','); 850 const i2 = new Uint8Array(arr.length); 851 arr.forEach((value, index) => { 852 i2[index] = parseInt(value); 853 }); 854 return i2; 855 } 856 857 createPixelMap() { 858 let g2 = this.transStringToUint8Array(m); 859 this.getPixelMap(g2, (pixelMap) => { 860 this.defaultThumbImage = pixelMap; 861 }); 862 if (this.contentFormData && this.contentFormData?.thumbData) { 863 if (!(this.contentFormData?.thumbData instanceof Uint8Array)) { 864 console.error(`${j}, thumbData is not Uint8Array`); 865 return; 866 } 867 this.getPixelMap(this.contentFormData?.thumbData, (pixelMap) => { 868 this.thumbImage = pixelMap; 869 }); 870 } 871 if (this.contentFormData && this.contentFormData?.appIcon) { 872 if (!(this.contentFormData?.appIcon instanceof Uint8Array)) { 873 console.error(`${j}, appIcon is not Uint8Array`); 874 return; 875 } 876 this.getPixelMap(this.contentFormData?.appIcon, (pixelMap) => { 877 this.appImage = pixelMap; 878 }); 879 } 880 } 881 882 getAspectRatio() { 883 let d2 = this.thumbImage?.getImageInfoSync().size; 884 let e2 = this.formType === FormType.TYPE_MID ? b1 : d1; 885 let f2 = this.formType === FormType.TYPE_MID ? v1 : w1; 886 if (d2 && this.thumbImage) { 887 if ((d2.width / d2.height) > (e2 / (f2 * t))) { 888 return e2 / (f2 * t); 889 } 890 if ((d2.width / d2.height) < (e2 / (f2 * o))) { 891 return e2 / (f2 * o); 892 } 893 return d2.width / d2.height; 894 } 895 return e2 / f2; 896 } 897 898 getTextBackground(text) { 899 if (text && text.length > 0) { 900 return n1; 901 } 902 return s1; 903 } 904 905 getTextSize(textType, text) { 906 if (textType === TextType.TITLE) { 907 if (text === '' || text === undefined || text === null) { 908 if (this.formType === FormType.TYPE_SMALL) { 909 return h1; 910 } 911 return f1; 912 } 913 return l1; 914 } 915 if (textType === TextType.APP_NAME) { 916 if (text === '' || text === undefined || text === null) { 917 if (this.formType === FormType.TYPE_SMALL) { 918 return i1; 919 } 920 return g1; 921 } 922 return l1; 923 } 924 return '100%'; 925 } 926 927 getThumbViewConstraintSize() { 928 if (this.contentFormData?.title !== '') { 929 return { maxHeight: this.cardHeight, minHeight: this.cardHeight }; 930 } else { 931 if (this.formHeight > 0) { 932 return { 933 maxHeight: this.formHeight, 934 minHeight: this.formHeight 935 }; 936 } 937 return { 938 maxHeight: this.cardHeight * o, 939 minHeight: this.cardHeight * t 940 }; 941 } 942 } 943 944 getDescriptionFontSize() { 945 return this.lineCount === 1 ? (this.formStyle.a3 ? this.formStyle.a3 : 946 this.formStyle.i2) : this.formStyle.i2; 947 } 948 949 rerender() { 950 this.updateDirtyElements(); 951 } 952} 953 954export default { ContentFormCard, FormType };