1/* 2 * Copyright (c) 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 16const KeyCode = requireNapi("multimodalInput.keyCode").KeyCode; 17const measure = requireNapi('measure'); 18const mediaquery = requireNapi('mediaquery'); 19const resourceManager = requireNapi('resourceManager'); 20 21export var ChipSize; 22!function(e){ 23 e.NORMAL = "NORMAL"; 24 e.SMALL = "SMALL" 25}(ChipSize || (ChipSize = {})); 26var BreakPointsType; 27!function(e){ 28 e.SM = "SM"; 29 e.MD = "MD"; 30 e.LG = "LG" 31}(BreakPointsType || (BreakPointsType = {})); 32 33export const defaultTheme = { 34 prefixIcon: { 35 size: { width: 16, height: 16 }, 36 fillColor: { 37 id: -1, 38 type: 10001, 39 params: ["sys.color.ohos_id_color_secondary"], 40 bundleName: "", 41 moduleName: "" 42 } 43 }, 44 label: { 45 normalFontSize: { 46 id: -1, 47 type: 10002, 48 params: ["sys.float.ohos_id_text_size_button2"], 49 bundleName: "", 50 moduleName: "" 51 }, 52 smallFontSize: { 53 id: -1, 54 type: 10002, 55 params: ["sys.float.ohos_id_text_size_button3"], 56 bundleName: "", 57 moduleName: "" 58 }, 59 fontColor: { 60 id: -1, 61 type: 10001, 62 params: ["sys.color.ohos_id_color_text_primary"], 63 bundleName: "", 64 moduleName: "" 65 }, 66 fontFamily: "HarmonyOS Sans", 67 normalMargin: { left: 6, right: 6, top: 0, bottom: 0 }, 68 smallMargin: { left: 4, right: 4, top: 0, bottom: 0 } 69 }, 70 suffixIcon: { 71 size: { width: 16, height: 16 }, 72 fillColor: { 73 id: -1, 74 type: 10001, 75 params: ["sys.color.ohos_id_color_primary"], 76 bundleName: "", 77 moduleName: "" 78 }, 79 defaultDeleteIcon: { 80 id: -1, 81 type: 2e4, 82 params: ["sys.media.ohos_ic_public_cancel", 16, 16], 83 bundleName: "", 84 moduleName: "" 85 }, 86 focusable: !1 87 }, 88 chipNode: { 89 minLabelWidth: 12, 90 normalHeight: 36, 91 smallHeight: 28, 92 enabled: !0, 93 backgroundColor: { 94 id: -1, 95 type: 10001, 96 params: ["sys.color.ohos_id_color_button_normal"], 97 bundleName: "", 98 moduleName: "" 99 }, 100 focusOutlineColor: { 101 id: -1, 102 type: 10001, 103 params: ["sys.color.ohos_id_color_focused_outline"], 104 bundleName: "", 105 moduleName: "" 106 }, 107 normalBorderRadius: { 108 id: -1, 109 type: 10002, 110 params: ["sys.float.ohos_id_corner_radius_tips_instant_tip"], 111 bundleName: "", 112 moduleName: "" 113 }, 114 smallBorderRadius: { 115 id: -1, 116 type: 10002, 117 params: ["sys.float.ohos_id_corner_radius_piece"], 118 bundleName: "", 119 moduleName: "" 120 }, 121 borderWidth: 2, 122 normalPadding: { left: 16, right: 16, top: 0, bottom: 0 }, 123 smallPadding: { left: 12, right: 12, top: 0, bottom: 0 }, 124 hoverBlendColor: { 125 id: -1, 126 type: 10001, 127 params: ["sys.color.ohos_id_color_hover"], 128 bundleName: "", 129 moduleName: "" 130 }, 131 pressedBlendColor: { 132 id: -1, 133 type: 10001, 134 params: ["sys.color.ohos_id_color_click_effect"], 135 bundleName: "", 136 moduleName: "" 137 }, 138 opacity: { normal: 1, hover: .95, pressed: .9, disabled: .4 }, 139 breakPointConstraintWidth: { 140 breakPointMinWidth: 128, 141 breakPointSmMaxWidth: 156, 142 breakPointMdMaxWidth: 280, 143 breakPointLgMaxWidth: 400 144 } 145 } 146}; 147const noop = () => { 148}; 149 150export function Chip(e, i = null) { 151 (i || this).observeComponentCreation2(((t, o) => { 152 if (o) { 153 let o = () => ({ 154 chipSize: e.size, 155 prefixIcon: e.prefixIcon, 156 label: e.label, 157 suffixIcon: e.suffixIcon, 158 allowClose: e.allowClose, 159 chipEnabled: e.enabled, 160 chipNodeBackgroundColor: e.backgroundColor, 161 chipNodeRadius: e.borderRadius, 162 onClose: e.onClose 163 }); 164 ViewPU.create(new ChipComponent(i || this, { 165 chipSize: e.size, 166 prefixIcon: e.prefixIcon, 167 label: e.label, 168 suffixIcon: e.suffixIcon, 169 allowClose: e.allowClose, 170 chipEnabled: e.enabled, 171 chipNodeBackgroundColor: e.backgroundColor, 172 chipNodeRadius: e.borderRadius, 173 onClose: e.onClose 174 }, void 0, t, o)) 175 } else (i || this).updateStateVarsOfChildByElmtId(t, { 176 chipSize: e.size, 177 prefixIcon: e.prefixIcon, 178 label: e.label, 179 suffixIcon: e.suffixIcon, 180 allowClose: e.allowClose, 181 chipEnabled: e.enabled, 182 chipNodeBackgroundColor: e.backgroundColor, 183 chipNodeRadius: e.borderRadius 184 }) 185 }), null) 186} 187 188export class ChipComponent extends ViewPU { 189 constructor(e, i, t, o = -1, h = void 0) { 190 super(e, t, o); 191 "function" == typeof h && (this.paramsGenerator_ = h); 192 this.theme = defaultTheme; 193 this.__chipSize = new SynchedPropertyObjectOneWayPU(i.chipSize, this, "chipSize"); 194 this.__allowClose = new SynchedPropertySimpleOneWayPU(i.allowClose, this, "allowClose"); 195 this.__prefixIcon = new SynchedPropertyObjectOneWayPU(i.prefixIcon, this, "prefixIcon"); 196 this.__label = new SynchedPropertyObjectOneWayPU(i.label, this, "label"); 197 this.__suffixIcon = new SynchedPropertyObjectOneWayPU(i.suffixIcon, this, "suffixIcon"); 198 this.__chipNodeBackgroundColor = new SynchedPropertyObjectOneWayPU(i.chipNodeBackgroundColor, this, "chipNodeBackgroundColor"); 199 this.__chipNodeRadius = new SynchedPropertyObjectOneWayPU(i.chipNodeRadius, this, "chipNodeRadius"); 200 this.__chipEnabled = new SynchedPropertySimpleOneWayPU(i.chipEnabled, this, "chipEnabled"); 201 this.__isHover = new ObservedPropertySimplePU(!1, this, "isHover"); 202 this.__chipScale = new ObservedPropertyObjectPU({ x: 1, y: 1 }, this, "chipScale"); 203 this.__chipOpacity = new ObservedPropertySimplePU(1, this, "chipOpacity"); 204 this.__chipBlendColor = new ObservedPropertyObjectPU(Color.Transparent, this, "chipBlendColor"); 205 this.__deleteChip = new ObservedPropertySimplePU(!1, this, "deleteChip"); 206 this.__chipNodeOnFocus = new ObservedPropertySimplePU(!1, this, "chipNodeOnFocus"); 207 this.__useDefaultSuffixIcon = new ObservedPropertySimplePU(!1, this, "useDefaultSuffixIcon"); 208 this.chipNodeSize = {}; 209 this.onClose = noop; 210 this.__suffixIconOnFocus = new ObservedPropertySimplePU(!1, this, "suffixIconOnFocus"); 211 this.__chipBreakPoints = new ObservedPropertySimplePU(BreakPointsType.SM, this, "chipBreakPoints"); 212 this.smListener = mediaquery.matchMediaSync("0vp<width<600vp"); 213 this.mdListener = mediaquery.matchMediaSync("600vp<=width<840vp"); 214 this.lgListener = mediaquery.matchMediaSync("840vp<=width"); 215 this.setInitiallyProvidedValue(i) 216 } 217 218 setInitiallyProvidedValue(e) { 219 void 0 !== e.theme && (this.theme = e.theme); 220 void 0 === e.chipSize && this.__chipSize.set(ChipSize.NORMAL); 221 void 0 === e.allowClose && this.__allowClose.set(!0); 222 void 0 === e.prefixIcon && this.__prefixIcon.set({ src: "" }); 223 void 0 === e.label && this.__label.set({ text: "" }); 224 void 0 === e.suffixIcon && this.__suffixIcon.set({ src: "" }); 225 void 0 === e.chipNodeBackgroundColor && this.__chipNodeBackgroundColor.set(this.theme.chipNode.backgroundColor); 226 void 0 === e.chipNodeRadius && this.__chipNodeRadius.set(void 0); 227 void 0 === e.chipEnabled && this.__chipEnabled.set(!0); 228 void 0 !== e.isHover && (this.isHover = e.isHover); 229 void 0 !== e.chipScale && (this.chipScale = e.chipScale); 230 void 0 !== e.chipOpacity && (this.chipOpacity = e.chipOpacity); 231 void 0 !== e.chipBlendColor && (this.chipBlendColor = e.chipBlendColor); 232 void 0 !== e.deleteChip && (this.deleteChip = e.deleteChip); 233 void 0 !== e.chipNodeOnFocus && (this.chipNodeOnFocus = e.chipNodeOnFocus); 234 void 0 !== e.useDefaultSuffixIcon && (this.useDefaultSuffixIcon = e.useDefaultSuffixIcon); 235 void 0 !== e.chipNodeSize && (this.chipNodeSize = e.chipNodeSize); 236 void 0 !== e.onClose && (this.onClose = e.onClose); 237 void 0 !== e.suffixIconOnFocus && (this.suffixIconOnFocus = e.suffixIconOnFocus); 238 void 0 !== e.chipBreakPoints && (this.chipBreakPoints = e.chipBreakPoints); 239 void 0 !== e.smListener && (this.smListener = e.smListener); 240 void 0 !== e.mdListener && (this.mdListener = e.mdListener); 241 void 0 !== e.lgListener && (this.lgListener = e.lgListener) 242 } 243 244 updateStateVars(e) { 245 this.__chipSize.reset(e.chipSize); 246 this.__allowClose.reset(e.allowClose); 247 this.__prefixIcon.reset(e.prefixIcon); 248 this.__label.reset(e.label); 249 this.__suffixIcon.reset(e.suffixIcon); 250 this.__chipNodeBackgroundColor.reset(e.chipNodeBackgroundColor); 251 this.__chipNodeRadius.reset(e.chipNodeRadius); 252 this.__chipEnabled.reset(e.chipEnabled) 253 } 254 255 purgeVariableDependenciesOnElmtId(e) { 256 this.__chipSize.purgeDependencyOnElmtId(e); 257 this.__allowClose.purgeDependencyOnElmtId(e); 258 this.__prefixIcon.purgeDependencyOnElmtId(e); 259 this.__label.purgeDependencyOnElmtId(e); 260 this.__suffixIcon.purgeDependencyOnElmtId(e); 261 this.__chipNodeBackgroundColor.purgeDependencyOnElmtId(e); 262 this.__chipNodeRadius.purgeDependencyOnElmtId(e); 263 this.__chipEnabled.purgeDependencyOnElmtId(e); 264 this.__isHover.purgeDependencyOnElmtId(e); 265 this.__chipScale.purgeDependencyOnElmtId(e); 266 this.__chipOpacity.purgeDependencyOnElmtId(e); 267 this.__chipBlendColor.purgeDependencyOnElmtId(e); 268 this.__deleteChip.purgeDependencyOnElmtId(e); 269 this.__chipNodeOnFocus.purgeDependencyOnElmtId(e); 270 this.__useDefaultSuffixIcon.purgeDependencyOnElmtId(e); 271 this.__suffixIconOnFocus.purgeDependencyOnElmtId(e); 272 this.__chipBreakPoints.purgeDependencyOnElmtId(e) 273 } 274 275 aboutToBeDeleted() { 276 this.__chipSize.aboutToBeDeleted(); 277 this.__allowClose.aboutToBeDeleted(); 278 this.__prefixIcon.aboutToBeDeleted(); 279 this.__label.aboutToBeDeleted(); 280 this.__suffixIcon.aboutToBeDeleted(); 281 this.__chipNodeBackgroundColor.aboutToBeDeleted(); 282 this.__chipNodeRadius.aboutToBeDeleted(); 283 this.__chipEnabled.aboutToBeDeleted(); 284 this.__isHover.aboutToBeDeleted(); 285 this.__chipScale.aboutToBeDeleted(); 286 this.__chipOpacity.aboutToBeDeleted(); 287 this.__chipBlendColor.aboutToBeDeleted(); 288 this.__deleteChip.aboutToBeDeleted(); 289 this.__chipNodeOnFocus.aboutToBeDeleted(); 290 this.__useDefaultSuffixIcon.aboutToBeDeleted(); 291 this.__suffixIconOnFocus.aboutToBeDeleted(); 292 this.__chipBreakPoints.aboutToBeDeleted(); 293 SubscriberManager.Get().delete(this.id__()); 294 this.aboutToBeDeletedInternal() 295 } 296 297 get chipSize() { 298 return this.__chipSize.get() 299 } 300 301 set chipSize(e) { 302 this.__chipSize.set(e) 303 } 304 305 get allowClose() { 306 return this.__allowClose.get() 307 } 308 309 set allowClose(e) { 310 this.__allowClose.set(e) 311 } 312 313 get prefixIcon() { 314 return this.__prefixIcon.get() 315 } 316 317 set prefixIcon(e) { 318 this.__prefixIcon.set(e) 319 } 320 321 get label() { 322 return this.__label.get() 323 } 324 325 set label(e) { 326 this.__label.set(e) 327 } 328 329 get suffixIcon() { 330 return this.__suffixIcon.get() 331 } 332 333 set suffixIcon(e) { 334 this.__suffixIcon.set(e) 335 } 336 337 get chipNodeBackgroundColor() { 338 return this.__chipNodeBackgroundColor.get() 339 } 340 341 set chipNodeBackgroundColor(e) { 342 this.__chipNodeBackgroundColor.set(e) 343 } 344 345 get chipNodeRadius() { 346 return this.__chipNodeRadius.get() 347 } 348 349 set chipNodeRadius(e) { 350 this.__chipNodeRadius.set(e) 351 } 352 353 get chipEnabled() { 354 return this.__chipEnabled.get() 355 } 356 357 set chipEnabled(e) { 358 this.__chipEnabled.set(e) 359 } 360 361 get isHover() { 362 return this.__isHover.get() 363 } 364 365 set isHover(e) { 366 this.__isHover.set(e) 367 } 368 369 get chipScale() { 370 return this.__chipScale.get() 371 } 372 373 set chipScale(e) { 374 this.__chipScale.set(e) 375 } 376 377 get chipOpacity() { 378 return this.__chipOpacity.get() 379 } 380 381 set chipOpacity(e) { 382 this.__chipOpacity.set(e) 383 } 384 385 get chipBlendColor() { 386 return this.__chipBlendColor.get() 387 } 388 389 set chipBlendColor(e) { 390 this.__chipBlendColor.set(e) 391 } 392 393 get deleteChip() { 394 return this.__deleteChip.get() 395 } 396 397 set deleteChip(e) { 398 this.__deleteChip.set(e) 399 } 400 401 get chipNodeOnFocus() { 402 return this.__chipNodeOnFocus.get() 403 } 404 405 set chipNodeOnFocus(e) { 406 this.__chipNodeOnFocus.set(e) 407 } 408 409 get useDefaultSuffixIcon() { 410 return this.__useDefaultSuffixIcon.get() 411 } 412 413 set useDefaultSuffixIcon(e) { 414 this.__useDefaultSuffixIcon.set(e) 415 } 416 417 get suffixIconOnFocus() { 418 return this.__suffixIconOnFocus.get() 419 } 420 421 set suffixIconOnFocus(e) { 422 this.__suffixIconOnFocus.set(e) 423 } 424 425 get chipBreakPoints() { 426 return this.__chipBreakPoints.get() 427 } 428 429 set chipBreakPoints(e) { 430 this.__chipBreakPoints.set(e) 431 } 432 433 isChipSizeEnum() { 434 return "string" == typeof this.chipSize 435 } 436 437 getLabelFontSize() { 438 var e; 439 try { 440 return void 0 !== (null === (e = this.label) || void 0 === e ? void 0 : e.fontSize) && this.toVp(this.label.fontSize) >= 0 ? this.label.fontSize : this.isChipSizeEnum() && this.chipSize === ChipSize.SMALL ? resourceManager.getSystemResourceManager().getNumberByName(this.theme.label.smallFontSize.params[0].split(".")[2]) : resourceManager.getSystemResourceManager().getNumberByName(this.theme.label.normalFontSize.params[0].split(".")[2]) 441 } catch (e) { 442 return 0 443 } 444 } 445 446 getLabelFontColor() { 447 var e, i; 448 return null !== (i = null === (e = this.label) || void 0 === e ? void 0 : e.fontColor) && void 0 !== i ? i : this.theme.label.fontColor 449 } 450 451 getLabelFontFamily() { 452 var e, i; 453 return null !== (i = null === (e = this.label) || void 0 === e ? void 0 : e.fontFamily) && void 0 !== i ? i : this.theme.label.fontFamily 454 } 455 456 toVp(e) { 457 var i, t; 458 if (void 0 === e) return Number.NEGATIVE_INFINITY; 459 switch (typeof e) { 460 case "number": 461 return e; 462 case "object": 463 try { 464 return -1 !== e.id ? px2vp(getContext(this).resourceManager.getNumber(e.id)) : px2vp(getContext(this).resourceManager.getNumberByName(e.params[0].split(".")[2])) 465 } catch (e) { 466 return Number.NEGATIVE_INFINITY 467 } 468 case "string": 469 let o = new RegExp("(-?\\d+(?:\\.\\d+)?)_?(fp|vp|px|lpx|%)?$", "i"); 470 let h = e.match(o); 471 if (!h) return Number.NEGATIVE_INFINITY; 472 let s = Number(null !== (i = null == h ? void 0 : h[1]) && void 0 !== i ? i : 0); 473 switch ((null !== (t = null == h ? void 0 : h[2]) && void 0 !== t ? t : "vp").toLowerCase()) { 474 case "px": 475 s = px2vp(s); 476 break; 477 case "fp": 478 s = px2vp(fp2px(s)); 479 break; 480 case "lpx": 481 s = px2vp(lpx2px(s)); 482 break; 483 case "%": 484 s = Number.NEGATIVE_INFINITY 485 } 486 return s; 487 default: 488 return Number.NEGATIVE_INFINITY 489 } 490 } 491 492 getLabelMargin() { 493 var e, i, t, o, h, s, n, l, r, a; 494 let d = { left: 0, right: 0 }; 495 void 0 !== (null === (i = null === (e = this.label) || void 0 === e ? void 0 : e.labelMargin) || void 0 === i ? void 0 : i.left) && this.toVp(this.label.labelMargin.left) >= 0 ? d.left = null === (o = null === (t = this.label) || void 0 === t ? void 0 : t.labelMargin) || void 0 === o ? void 0 : o.left : (null === (h = this.prefixIcon) || void 0 === h ? void 0 : h.src) && (this.isChipSizeEnum() && this.chipSize == ChipSize.SMALL ? d.left = this.theme.label.smallMargin.left : d.left = this.theme.label.normalMargin.left); 496 void 0 !== (null === (n = null === (s = this.label) || void 0 === s ? void 0 : s.labelMargin) || void 0 === n ? void 0 : n.right) && this.toVp(this.label.labelMargin.right) >= 0 ? d.right = null === (r = null === (l = this.label) || void 0 === l ? void 0 : l.labelMargin) || void 0 === r ? void 0 : r.right : ((null === (a = this.suffixIcon) || void 0 === a ? void 0 : a.src) || this.useDefaultSuffixIcon) && (this.isChipSizeEnum() && this.chipSize == ChipSize.SMALL ? d.right = this.theme.label.smallMargin.right : d.right = this.theme.label.normalMargin.right); 497 return d 498 } 499 500 getSuffixIconSize() { 501 var e, i, t, o, h, s, n, l, r, a, d, c; 502 let p = { width: 0, height: 0 }; 503 void 0 !== (null === (i = null === (e = this.suffixIcon) || void 0 === e ? void 0 : e.size) || void 0 === i ? void 0 : i.width) && this.toVp(null === (o = null === (t = this.suffixIcon) || void 0 === t ? void 0 : t.size) || void 0 === o ? void 0 : o.width) >= 0 ? p.width = null === (s = null === (h = this.suffixIcon) || void 0 === h ? void 0 : h.size) || void 0 === s ? void 0 : s.width : this.getSuffixIconSrc() ? p.width = this.theme.suffixIcon.size.width : p.width = 0; 504 void 0 !== (null === (l = null === (n = this.suffixIcon) || void 0 === n ? void 0 : n.size) || void 0 === l ? void 0 : l.height) && this.toVp(null === (a = null === (r = this.suffixIcon) || void 0 === r ? void 0 : r.size) || void 0 === a ? void 0 : a.height) >= 0 ? p.height = null === (c = null === (d = this.suffixIcon) || void 0 === d ? void 0 : d.size) || void 0 === c ? void 0 : c.height : this.getSuffixIconSrc() ? p.height = this.theme.suffixIcon.size.height : p.height = 0; 505 return p 506 } 507 508 getPrefixIconSize() { 509 var e, i, t, o, h, s, n, l, r, a, d, c, p, u; 510 let f = { width: 0, height: 0 }; 511 void 0 !== (null === (i = null === (e = this.prefixIcon) || void 0 === e ? void 0 : e.size) || void 0 === i ? void 0 : i.width) && this.toVp(null === (o = null === (t = this.prefixIcon) || void 0 === t ? void 0 : t.size) || void 0 === o ? void 0 : o.width) >= 0 ? f.width = null === (s = null === (h = this.prefixIcon) || void 0 === h ? void 0 : h.size) || void 0 === s ? void 0 : s.width : (null === (n = this.prefixIcon) || void 0 === n ? void 0 : n.src) ? f.width = this.theme.prefixIcon.size.width : f.width = 0; 512 void 0 !== (null === (r = null === (l = this.prefixIcon) || void 0 === l ? void 0 : l.size) || void 0 === r ? void 0 : r.height) && this.toVp(null === (d = null === (a = this.prefixIcon) || void 0 === a ? void 0 : a.size) || void 0 === d ? void 0 : d.height) >= 0 ? f.height = null === (p = null === (c = this.prefixIcon) || void 0 === c ? void 0 : c.size) || void 0 === p ? void 0 : p.height : (null === (u = this.prefixIcon) || void 0 === u ? void 0 : u.src) ? f.height = this.theme.prefixIcon.size.height : f.height = 0; 513 return f 514 } 515 516 getPrefixIconFilledColor() { 517 var e, i; 518 return null !== (i = null === (e = this.prefixIcon) || void 0 === e ? void 0 : e.fillColor) && void 0 !== i ? i : this.theme.prefixIcon.fillColor 519 } 520 521 getSuffixIconFilledColor() { 522 var e, i; 523 return null !== (i = null === (e = this.suffixIcon) || void 0 === e ? void 0 : e.fillColor) && void 0 !== i ? i : this.theme.suffixIcon.fillColor 524 } 525 526 getSuffixIconFocusable() { 527 var e; 528 return this.useDefaultSuffixIcon && this.allowClose || void 0 !== (null === (e = this.suffixIcon) || void 0 === e ? void 0 : e.action) 529 } 530 531 getChipNodePadding() { 532 return this.isChipSizeEnum() && this.chipSize === ChipSize.SMALL ? this.theme.chipNode.smallPadding : this.theme.chipNode.normalPadding 533 } 534 535 getChipNodeRadius() { 536 return void 0 !== this.chipNodeRadius && this.toVp(this.chipNodeRadius) >= 0 ? this.chipNodeRadius : this.isChipSizeEnum() && this.chipSize === ChipSize.SMALL ? this.theme.chipNode.smallBorderRadius : this.theme.chipNode.normalBorderRadius 537 } 538 539 getChipNodeBackGroundColor() { 540 var e; 541 return null !== (e = this.chipNodeBackgroundColor) && void 0 !== e ? e : this.theme.chipNode.backgroundColor 542 } 543 544 getChipNodeHeight() { 545 var e, i, t; 546 if (this.isChipSizeEnum()) return this.chipSize === ChipSize.SMALL ? this.theme.chipNode.smallHeight : this.theme.chipNode.normalHeight; 547 this.chipNodeSize = this.chipSize; 548 return void 0 !== (null === (e = this.chipNodeSize) || void 0 === e ? void 0 : e.height) && this.toVp(null === (i = this.chipNodeSize) || void 0 === i ? void 0 : i.height) >= 0 ? this.toVp(null === (t = this.chipNodeSize) || void 0 === t ? void 0 : t.height) : this.theme.chipNode.normalHeight 549 } 550 551 getLabelWidth() { 552 var e, i, t, o; 553 return px2vp(measure.measureText({ 554 textContent: null !== (i = null === (e = this.label) || void 0 === e ? void 0 : e.text) && void 0 !== i ? i : "", 555 fontSize: this.getLabelFontSize(), 556 fontFamily: null !== (o = null === (t = this.label) || void 0 === t ? void 0 : t.fontFamily) && void 0 !== o ? o : this.theme.label.fontFamily, 557 maxLines: 1, 558 overflow: TextOverflow.Ellipsis, 559 textAlign: TextAlign.Center 560 })) 561 } 562 563 getCalculateChipNodeWidth() { 564 let e = 0; 565 e += this.getChipNodePadding().left; 566 e += this.toVp(this.getPrefixIconSize().width); 567 e += this.toVp(this.getLabelMargin().left); 568 e += this.getLabelWidth(); 569 e += this.toVp(this.getLabelMargin().right); 570 e += this.toVp(this.getSuffixIconSize().width); 571 e += this.getChipNodePadding().right; 572 return e 573 } 574 575 getReserveChipNodeWidth() { 576 return this.getCalculateChipNodeWidth() - this.getLabelWidth() + this.theme.chipNode.minLabelWidth 577 } 578 579 getChipEnable() { 580 return this.chipEnabled || void 0 === this.chipEnabled 581 } 582 583 getChipNodeOpacity() { 584 return this.getChipEnable() ? this.chipOpacity : this.theme.chipNode.opacity.disabled 585 } 586 587 handleTouch(e) { 588 this.getChipEnable() && (this.isHover ? e.type === TouchType.Down ? Context.animateTo({ 589 curve: Curve.Sharp, 590 duration: 100 591 }, (() => { 592 this.chipBlendColor = this.theme.chipNode.pressedBlendColor; 593 this.chipOpacity = this.theme.chipNode.opacity.pressed 594 })) : e.type === TouchType.Up && Context.animateTo({ curve: Curve.Sharp, duration: 100 }, (() => { 595 this.chipBlendColor = this.theme.chipNode.hoverBlendColor; 596 this.chipOpacity = this.theme.chipNode.opacity.hover 597 })) : e.type === TouchType.Down ? Context.animateTo({ curve: Curve.Friction, duration: 350 }, (() => { 598 this.chipBlendColor = this.theme.chipNode.pressedBlendColor; 599 this.chipOpacity = this.theme.chipNode.opacity.pressed 600 })) : e.type === TouchType.Up && Context.animateTo({ curve: Curve.Friction, duration: 350 }, (() => { 601 this.chipBlendColor = Color.Transparent; 602 this.chipOpacity = this.theme.chipNode.opacity.normal 603 }))) 604 } 605 606 hoverAnimate(e) { 607 if (this.getChipEnable()) { 608 this.isHover = e; 609 Context.animateTo({ curve: Curve.Friction, duration: 250 }, (() => { 610 if (e) { 611 this.chipBlendColor = this.theme.chipNode.hoverBlendColor; 612 this.chipOpacity = this.theme.chipNode.opacity.hover 613 } else { 614 this.chipBlendColor = Color.Transparent; 615 this.chipOpacity = this.theme.chipNode.opacity.normal 616 } 617 })) 618 } 619 } 620 621 deleteChipNodeAnimate() { 622 Context.animateTo({ duration: 150, curve: Curve.Sharp }, (() => { 623 this.chipOpacity = 0; 624 this.chipBlendColor = Color.Transparent 625 })); 626 Context.animateTo({ duration: 150, curve: Curve.FastOutLinearIn, onFinish: () => { 627 this.deleteChip = !0 628 } }, (() => { 629 this.chipScale = { x: .85, y: .85 } 630 })) 631 } 632 633 getSuffixIconSrc() { 634 var e, i, t; 635 this.useDefaultSuffixIcon = !(null === (e = this.suffixIcon) || void 0 === e ? void 0 : e.src) && this.allowClose; 636 return this.useDefaultSuffixIcon ? this.theme.suffixIcon.defaultDeleteIcon : null !== (t = null === (i = this.suffixIcon) || void 0 === i ? void 0 : i.src) && void 0 !== t ? t : void 0 637 } 638 639 getChipNodeWidth() { 640 var e; 641 if (!this.isChipSizeEnum()) { 642 this.chipNodeSize = this.chipSize; 643 if (void 0 !== (null === (e = this.chipNodeSize) || void 0 === e ? void 0 : e.width) && this.toVp(this.chipNodeSize.width) >= 0) return this.toVp(this.chipNodeSize.width) 644 } 645 let i = this.getChipConstraintWidth(); 646 return Math.min(Math.max(this.getCalculateChipNodeWidth(), i.minWidth), i.maxWidth) 647 } 648 649 getFocusOverlaySize() { 650 return { 651 width: Math.max(this.getChipNodeWidth(), this.getChipConstraintWidth().minWidth) + 8, 652 height: this.getChipNodeHeight() + 8 653 } 654 } 655 656 getChipConstraintWidth() { 657 var e, i; 658 let t = this.getReserveChipNodeWidth(); 659 if (!this.isChipSizeEnum()) { 660 this.chipNodeSize = this.chipSize; 661 if (void 0 !== (null === (e = this.chipNodeSize) || void 0 === e ? void 0 : e.width) && this.toVp(null === (i = this.chipNodeSize) || void 0 === i ? void 0 : i.width) >= 0) return { 662 minWidth: t, 663 maxWidth: this.chipNodeSize.width 664 } 665 } 666 let o = this.getCalculateChipNodeWidth(); 667 switch (this.chipBreakPoints) { 668 case BreakPointsType.SM: 669 return { 670 minWidth: t, 671 maxWidth: Math.min(o, this.theme.chipNode.breakPointConstraintWidth.breakPointSmMaxWidth) 672 }; 673 case BreakPointsType.MD: 674 return { 675 minWidth: Math.max(o, this.theme.chipNode.breakPointConstraintWidth.breakPointMinWidth), 676 maxWidth: Math.min(o, this.theme.chipNode.breakPointConstraintWidth.breakPointMdMaxWidth) 677 }; 678 case BreakPointsType.LG: 679 return { 680 minWidth: Math.max(o, this.theme.chipNode.breakPointConstraintWidth.breakPointMinWidth), 681 maxWidth: Math.min(o, this.theme.chipNode.breakPointConstraintWidth.breakPointLgMaxWidth) 682 }; 683 default: 684 return { minWidth: t, maxWidth: o } 685 } 686 } 687 688 focusOverlay(e = null) { 689 this.observeComponentCreation2(((e, i) => { 690 Stack.create(); 691 Stack.size({ width: 1, height: 1 }); 692 Stack.align(Alignment.Center) 693 }), Stack); 694 this.observeComponentCreation2(((e, i) => { 695 If.create(); 696 this.chipNodeOnFocus && !this.suffixIconOnFocus ? this.ifElseBranchUpdateFunction(0, (() => { 697 this.observeComponentCreation2(((e, i) => { 698 Stack.create(); 699 Stack.borderRadius(this.toVp(this.getChipNodeRadius()) + 4); 700 Stack.size(this.getFocusOverlaySize()); 701 Stack.borderColor(this.theme.chipNode.focusOutlineColor); 702 Stack.borderWidth(this.theme.chipNode.borderWidth) 703 }), Stack); 704 Stack.pop() 705 })) : this.ifElseBranchUpdateFunction(1, (() => { 706 })) 707 }), If); 708 If.pop(); 709 Stack.pop() 710 } 711 712 aboutToAppear() { 713 this.smListener.on("change", (e => { 714 e.matches && (this.chipBreakPoints = BreakPointsType.SM) 715 })); 716 this.mdListener.on("change", (e => { 717 e.matches && (this.chipBreakPoints = BreakPointsType.MD) 718 })); 719 this.lgListener.on("change", (e => { 720 e.matches && (this.chipBreakPoints = BreakPointsType.LG) 721 })) 722 } 723 724 getVisibility() { 725 return this.toVp(this.getChipNodeHeight()) > 0 ? Visibility.Visible : Visibility.None 726 } 727 728 aboutToDisappear() { 729 this.smListener.off("change"); 730 this.mdListener.off("change"); 731 this.lgListener.off("change") 732 } 733 734 chipBuilder(e = null) { 735 this.observeComponentCreation2(((e, i) => { 736 Row.create(); 737 Row.alignItems(VerticalAlign.Center); 738 Row.justifyContent(FlexAlign.Center); 739 Row.clip(!1); 740 Row.padding(this.getChipNodePadding()); 741 Row.height(this.getChipNodeHeight()); 742 Row.width(this.getChipNodeWidth()); 743 Row.constraintSize(this.getChipConstraintWidth()); 744 Row.backgroundColor(this.getChipNodeBackGroundColor()); 745 Row.borderRadius(this.getChipNodeRadius()); 746 Row.enabled(this.getChipEnable()); 747 Row.scale(ObservedObject.GetRawObject(this.chipScale)); 748 Row.focusable(!0); 749 Row.colorBlend(ObservedObject.GetRawObject(this.chipBlendColor)); 750 Row.opacity(this.getChipNodeOpacity()); 751 Row.overlay({ builder: this.focusOverlay.bind(this) }, { align: Alignment.Center }); 752 Row.onFocus((() => { 753 this.chipNodeOnFocus = !0 754 })); 755 Row.onBlur((() => { 756 this.chipNodeOnFocus = !1 757 })); 758 Row.onTouch((e => { 759 this.handleTouch(e) 760 })); 761 Row.onHover((e => { 762 this.hoverAnimate(e) 763 })); 764 Row.onKeyEvent((e => { 765 e.type !== KeyType.Down || e.keyCode !== KeyCode.KEYCODE_FORWARD_DEL || this.suffixIconOnFocus || this.deleteChipNodeAnimate() 766 })) 767 }), Row); 768 this.observeComponentCreation2(((e, i) => { 769 var t; 770 If.create(); 771 "" !== (null === (t = this.prefixIcon) || void 0 === t ? void 0 : t.src) ? this.ifElseBranchUpdateFunction(0, (() => { 772 this.observeComponentCreation2(((e, i) => { 773 var t; 774 Image.create(null === (t = this.prefixIcon) || void 0 === t ? void 0 : t.src); 775 Image.opacity(this.getChipNodeOpacity()); 776 Image.size(this.getPrefixIconSize()); 777 Image.fillColor(this.getPrefixIconFilledColor()); 778 Image.enabled(this.getChipEnable()); 779 Image.objectFit(ImageFit.Cover); 780 Image.focusable(!1); 781 Image.flexShrink(0); 782 Image.visibility(this.getVisibility()); 783 Image.draggable(!1) 784 }), Image) 785 })) : this.ifElseBranchUpdateFunction(1, (() => { 786 })) 787 }), If); 788 If.pop(); 789 this.observeComponentCreation2(((e, i) => { 790 var t, o; 791 Text.create(null !== (o = null === (t = this.label) || void 0 === t ? void 0 : t.text) && void 0 !== o ? o : ""); 792 Text.opacity(this.getChipNodeOpacity()); 793 Text.fontSize(this.getLabelFontSize()); 794 Text.fontColor(this.getLabelFontColor()); 795 Text.fontFamily(this.getLabelFontFamily()); 796 Text.margin(this.getLabelMargin()); 797 Text.enabled(this.getChipEnable()); 798 Text.maxLines(1); 799 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 800 Text.flexShrink(1); 801 Text.focusable(!0); 802 Text.textAlign(TextAlign.Center); 803 Text.visibility(this.getVisibility()); 804 Text.draggable(!1); 805 ViewStackProcessor.visualState("focused"); 806 ViewStackProcessor.visualState() 807 }), Text); 808 Text.pop(); 809 this.observeComponentCreation2(((e, i) => { 810 Image.create(this.getSuffixIconSrc()); 811 Image.opacity(this.getChipNodeOpacity()); 812 Image.size(this.getSuffixIconSize()); 813 Image.fillColor(this.getSuffixIconFilledColor()); 814 Image.enabled(this.getChipEnable()); 815 Image.focusable(this.getSuffixIconFocusable()); 816 Image.objectFit(ImageFit.Cover); 817 Image.flexShrink(0); 818 Image.visibility(this.getVisibility()); 819 Image.draggable(!1); 820 Image.onFocus((() => { 821 this.suffixIconOnFocus = !0 822 })); 823 Image.onBlur((() => { 824 this.suffixIconOnFocus = !1 825 })); 826 Image.onClick((() => { 827 var e; 828 if (this.getChipEnable()) if (null === (e = this.suffixIcon) || void 0 === e ? void 0 : e.action) this.suffixIcon.action(); else if (this.allowClose && this.useDefaultSuffixIcon) { 829 this.onClose(); 830 this.deleteChipNodeAnimate() 831 } else ; 832 })) 833 }), Image); 834 Row.pop() 835 } 836 837 initialRender() { 838 this.observeComponentCreation2(((e, i) => { 839 If.create(); 840 this.deleteChip ? this.ifElseBranchUpdateFunction(1, (() => { 841 })) : this.ifElseBranchUpdateFunction(0, (() => { 842 this.chipBuilder.bind(this)() 843 })) 844 }), If); 845 If.pop() 846 } 847 848 rerender() { 849 this.updateDirtyElements() 850 } 851} 852export default { 853 Chip, ChipSize 854} 855