1/* 2 * Copyright (c) 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 16/// <reference path='./import.ts' /> 17class ArkCheckboxComponent extends ArkComponent implements CheckboxAttribute { 18 builder: WrappedBuilder<Object[]> | null = null; 19 checkboxNode: BuilderNode<[CheckBoxConfiguration]> | null = null; 20 modifier: ContentModifier<CheckBoxConfiguration>; 21 needRebuild: boolean = false; 22 constructor(nativePtr: KNode, classType?: ModifierType) { 23 super(nativePtr, classType); 24 } 25 allowChildCount(): number { 26 return 0; 27 } 28 initialize(value: Object[]): this { 29 if (!value.length) { 30 return this; 31 } 32 if (!isUndefined(value[0]) && !isNull(value[0]) && isObject(value[0])) { 33 modifierWithKey(this._modifiersWithKeys, CheckboxOptionsModifier.identity, CheckboxOptionsModifier, value[0]); 34 } else { 35 modifierWithKey(this._modifiersWithKeys, CheckboxOptionsModifier.identity, CheckboxOptionsModifier, undefined); 36 } 37 return this; 38 } 39 shape(value: CheckBoxShape): this { 40 modifierWithKey(this._modifiersWithKeys, CheckBoxShapeModifier.identity, CheckBoxShapeModifier, value); 41 return this; 42 } 43 width(value: Length): this { 44 modifierWithKey( 45 this._modifiersWithKeys, CheckboxWidthModifier.identity, CheckboxWidthModifier, value); 46 return this; 47 } 48 height(value: Length): this { 49 modifierWithKey( 50 this._modifiersWithKeys, CheckboxHeightModifier.identity, CheckboxHeightModifier, value); 51 return this; 52 } 53 select(value: boolean): this { 54 modifierWithKey( 55 this._modifiersWithKeys, CheckboxSelectModifier.identity, CheckboxSelectModifier, value); 56 return this; 57 } 58 selectedColor(value: ResourceColor): this { 59 modifierWithKey( 60 this._modifiersWithKeys, CheckboxSelectedColorModifier.identity, CheckboxSelectedColorModifier, value); 61 62 return this; 63 } 64 unselectedColor(value: ResourceColor): this { 65 modifierWithKey( 66 this._modifiersWithKeys, CheckboxUnselectedColorModifier.identity, CheckboxUnselectedColorModifier, value); 67 return this; 68 } 69 mark(value: MarkStyle): this { 70 modifierWithKey( 71 this._modifiersWithKeys, CheckboxMarkModifier.identity, CheckboxMarkModifier, value); 72 return this; 73 } 74 padding(value: Padding | Length): this { 75 let arkValue = new ArkPadding(); 76 if (value !== null && value !== undefined) { 77 if (isLengthType(value) || isResource(value)) { 78 arkValue.top = <Length>value; 79 arkValue.right = <Length>value; 80 arkValue.bottom = <Length>value; 81 arkValue.left = <Length>value; 82 } else { 83 arkValue.top = (<Padding>value).top; 84 arkValue.right = (<Padding>value).right; 85 arkValue.bottom = (<Padding>value).bottom; 86 arkValue.left = (<Padding>value).left; 87 } 88 modifierWithKey(this._modifiersWithKeys, CheckBoxPaddingModifier.identity, CheckBoxPaddingModifier, arkValue); 89 } else { 90 modifierWithKey(this._modifiersWithKeys, CheckBoxPaddingModifier.identity, CheckBoxPaddingModifier, undefined); 91 } 92 return this; 93 } 94 size(value: SizeOptions): this { 95 modifierWithKey(this._modifiersWithKeys, CheckBoxSizeModifier.identity, CheckBoxSizeModifier, value); 96 return this; 97 } 98 responseRegion(value: Array<Rectangle> | Rectangle): this { 99 modifierWithKey( 100 this._modifiersWithKeys, CheckBoxResponseRegionModifier.identity, CheckBoxResponseRegionModifier, value); 101 return this; 102 } 103 contentModifier(value: ContentModifier<CheckBoxConfiguration>): this { 104 modifierWithKey(this._modifiersWithKeys, CheckBoxContentModifier.identity, CheckBoxContentModifier, value); 105 return this; 106 } 107 setContentModifier(modifier: ContentModifier<CheckBoxConfiguration>): this { 108 if (modifier === undefined || modifier === null) { 109 getUINativeModule().checkbox.setContentModifierBuilder(this.nativePtr, false); 110 return; 111 } 112 this.needRebuild = false; 113 if (this.builder !== modifier.applyContent()) { 114 this.needRebuild = true; 115 } 116 this.builder = modifier.applyContent(); 117 this.modifier = modifier; 118 getUINativeModule().checkbox.setContentModifierBuilder(this.nativePtr, this); 119 } 120 makeContentModifierNode(context: UIContext, checkBoxConfiguration: CheckBoxConfiguration): FrameNode | null { 121 checkBoxConfiguration.contentModifier = this.modifier; 122 if (isUndefined(this.checkboxNode) || this.needRebuild) { 123 const xNode = globalThis.requireNapi('arkui.node'); 124 this.checkboxNode = new xNode.BuilderNode(context); 125 this.checkboxNode.build(this.builder, checkBoxConfiguration); 126 this.needRebuild = false; 127 } else { 128 this.checkboxNode.update(checkBoxConfiguration); 129 } 130 return this.checkboxNode.getFrameNode(); 131 } 132 onChange(callback:OnCheckboxChangeCallback):this{ 133 modifierWithKey(this._modifiersWithKeys, CheckBoxOnChangeModifier.identity,CheckBoxOnChangeModifier, callback); 134 return this; 135 } 136} 137 138class CheckboxOptionsModifier extends ModifierWithKey<CheckboxOptions> { 139 constructor(value: CheckboxOptions) { 140 super(value); 141 } 142 static identity: Symbol = Symbol('checkBoxOptions'); 143 applyPeer(node: KNode, reset: boolean): void { 144 if (reset) { 145 getUINativeModule().checkbox.setCheckboxOptions(node, undefined, undefined); 146 } else { 147 getUINativeModule().checkbox.setCheckboxOptions(node, this.value.name, this.value.group); 148 } 149 } 150 151 checkObjectDiff(): boolean { 152 return !isBaseOrResourceEqual(this.stageValue.name, this.value.name) || 153 !isBaseOrResourceEqual(this.stageValue.group, this.value.group); 154 } 155} 156 157class CheckBoxResponseRegionModifier extends ModifierWithKey<Array<Rectangle> | Rectangle> { 158 constructor(value: Array<Rectangle> | Rectangle) { 159 super(value); 160 } 161 static identity = Symbol('responseRegion'); 162 applyPeer(node: KNode, reset: boolean): void { 163 if (reset) { 164 getUINativeModule().checkbox.resetCheckboxResponseRegion(node); 165 } else { 166 let responseRegion: (number | string | Resource)[] = []; 167 if (Array.isArray(this.value)) { 168 for (let i = 0; i < this.value.length; i++) { 169 responseRegion.push(this.value[i].x ?? 'PLACEHOLDER'); 170 responseRegion.push(this.value[i].y ?? 'PLACEHOLDER'); 171 responseRegion.push(this.value[i].width ?? 'PLACEHOLDER'); 172 responseRegion.push(this.value[i].height ?? 'PLACEHOLDER'); 173 } 174 } else { 175 responseRegion.push(this.value.x ?? 'PLACEHOLDER'); 176 responseRegion.push(this.value.y ?? 'PLACEHOLDER'); 177 responseRegion.push(this.value.width ?? 'PLACEHOLDER'); 178 responseRegion.push(this.value.height ?? 'PLACEHOLDER'); 179 } 180 getUINativeModule().checkbox.setCheckboxResponseRegion(node, responseRegion, responseRegion.length); 181 } 182 } 183 184 checkObjectDiff(): boolean { 185 if (Array.isArray(this.value) && Array.isArray(this.stageValue)) { 186 if (this.value.length !== this.stageValue.length) { 187 return true; 188 } else { 189 for (let i = 0; i < this.value.length; i++) { 190 if (!(isBaseOrResourceEqual(this.stageValue[i].x, this.value[i].x) && 191 isBaseOrResourceEqual(this.stageValue[i].y, this.value[i].y) && 192 isBaseOrResourceEqual(this.stageValue[i].width, this.value[i].width) && 193 isBaseOrResourceEqual(this.stageValue[i].height, this.value[i].height) 194 )) { 195 return true; 196 } 197 } 198 return false; 199 } 200 } else if (!Array.isArray(this.value) && !Array.isArray(this.stageValue)) { 201 return (!(isBaseOrResourceEqual(this.stageValue.x, this.value.x) && 202 isBaseOrResourceEqual(this.stageValue.y, this.value.y) && 203 isBaseOrResourceEqual(this.stageValue.width, this.value.width) && 204 isBaseOrResourceEqual(this.stageValue.height, this.value.height) 205 )); 206 } else { 207 return true; 208 } 209 } 210} 211 212class CheckBoxContentModifier extends ModifierWithKey<ContentModifier<CheckBoxConfiguration>> { 213 constructor(value: ContentModifier<CheckBoxConfiguration>) { 214 super(value); 215 } 216 static identity: Symbol = Symbol('checkBoxContentModifier'); 217 applyPeer(node: KNode, reset: boolean, component: ArkComponent): void { 218 let checkboxComponent = component as ArkCheckboxComponent; 219 checkboxComponent.setContentModifier(this.value); 220 } 221} 222 223class CheckBoxShapeModifier extends ModifierWithKey<CheckBoxShape> { 224 constructor(value: CheckBoxShape) { 225 super(value); 226 } 227 static identity: Symbol = Symbol('checkboxShape'); 228 applyPeer(node: KNode, reset: boolean): void { 229 if (reset) { 230 getUINativeModule().checkbox.resetCheckboxShape(node); 231 } else { 232 getUINativeModule().checkbox.setCheckboxShape(node, this.value); 233 } 234 } 235 236 checkObjectDiff(): boolean { 237 return !isBaseOrResourceEqual(this.stageValue, this.value); 238 } 239} 240 241class CheckBoxSizeModifier extends ModifierWithKey<SizeOptions> { 242 constructor(value: SizeOptions) { 243 super(value); 244 } 245 static identity: Symbol = Symbol('size'); 246 applyPeer(node: KNode, reset: boolean): void { 247 if (reset) { 248 getUINativeModule().checkbox.resetCheckboxSize(node); 249 } else { 250 getUINativeModule().checkbox.setCheckboxSize(node, this.value.width, this.value.height); 251 } 252 } 253 254 checkObjectDiff(): boolean { 255 return !isBaseOrResourceEqual(this.stageValue.width, this.value.width) || 256 !isBaseOrResourceEqual(this.stageValue.height, this.value.height); 257 } 258} 259 260class CheckBoxPaddingModifier extends ModifierWithKey<ArkPadding> { 261 constructor(value: ArkPadding) { 262 super(value); 263 } 264 static identity: Symbol = Symbol('padding'); 265 applyPeer(node: KNode, reset: boolean): void { 266 if (reset) { 267 getUINativeModule().checkbox.resetCheckboxPadding(node); 268 } else { 269 getUINativeModule().checkbox.setCheckboxPadding(node, this.value.top, 270 this.value.right, this.value.bottom, this.value.left); 271 } 272 } 273 274 checkObjectDiff(): boolean { 275 return !isBaseOrResourceEqual(this.stageValue.top, this.value.top) || 276 !isBaseOrResourceEqual(this.stageValue.right, this.value.right) || 277 !isBaseOrResourceEqual(this.stageValue.bottom, this.value.bottom) || 278 !isBaseOrResourceEqual(this.stageValue.left, this.value.left); 279 } 280} 281 282class CheckboxMarkModifier extends ModifierWithKey<MarkStyle> { 283 constructor(value: MarkStyle) { 284 super(value); 285 } 286 static identity: Symbol = Symbol('checkboxMark'); 287 applyPeer(node: KNode, reset: boolean): void { 288 if (reset) { 289 getUINativeModule().checkbox.resetMark(node); 290 } else { 291 getUINativeModule().checkbox.setMark(node, this.value?.strokeColor, this.value?.size, this.value?.strokeWidth); 292 } 293 } 294 295 checkObjectDiff(): boolean { 296 let colorEQ = isBaseOrResourceEqual(this.stageValue.strokeColor, this.value.strokeColor); 297 let sizeEQ = isBaseOrResourceEqual(this.stageValue.size, this.value.size); 298 let widthEQ = isBaseOrResourceEqual(this.stageValue.strokeWidth, this.value.strokeWidth); 299 return !colorEQ || !sizeEQ || !widthEQ; 300 } 301} 302 303class CheckboxSelectModifier extends ModifierWithKey<boolean> { 304 constructor(value: boolean) { 305 super(value); 306 } 307 static identity: Symbol = Symbol('checkboxSelect'); 308 applyPeer(node: KNode, reset: boolean): void { 309 if (reset) { 310 getUINativeModule().checkbox.resetSelect(node); 311 } else { 312 getUINativeModule().checkbox.setSelect(node, this.value); 313 } 314 } 315 316 checkObjectDiff(): boolean { 317 return this.stageValue !== this.value; 318 } 319} 320 321class CheckboxHeightModifier extends ModifierWithKey<ResourceColor> { 322 constructor(value: ResourceColor) { 323 super(value); 324 } 325 static identity: Symbol = Symbol('checkboxHeight'); 326 applyPeer(node: KNode, reset: boolean): void { 327 if (reset) { 328 getUINativeModule().checkbox.resetHeight(node); 329 } else { 330 getUINativeModule().checkbox.setHeight(node, this.value); 331 } 332 } 333 334 checkObjectDiff(): boolean { 335 return !isBaseOrResourceEqual(this.stageValue, this.value); 336 } 337} 338 339class CheckboxWidthModifier extends ModifierWithKey<Length> { 340 constructor(value: Length) { 341 super(value); 342 } 343 static identity: Symbol = Symbol('checkboxWidth'); 344 applyPeer(node: KNode, reset: boolean): void { 345 if (reset) { 346 getUINativeModule().checkbox.resetWidth(node); 347 } else { 348 getUINativeModule().checkbox.setWidth(node, this.value); 349 } 350 } 351 352 checkObjectDiff(): boolean { 353 return !isBaseOrResourceEqual(this.stageValue, this.value); 354 } 355} 356 357class CheckboxSelectedColorModifier extends ModifierWithKey<ResourceColor> { 358 constructor(value: ResourceColor) { 359 super(value); 360 } 361 static identity: Symbol = Symbol('checkboxSelectedColor'); 362 applyPeer(node: KNode, reset: boolean): void { 363 if (reset) { 364 getUINativeModule().checkbox.resetSelectedColor(node); 365 } else { 366 getUINativeModule().checkbox.setSelectedColor(node, this.value); 367 } 368 } 369 370 checkObjectDiff(): boolean { 371 return !isBaseOrResourceEqual(this.stageValue, this.value); 372 } 373} 374 375class CheckboxUnselectedColorModifier extends ModifierWithKey<ResourceColor> { 376 constructor(value: ResourceColor) { 377 super(value); 378 } 379 static identity: Symbol = Symbol('checkboxUnselectedColor'); 380 applyPeer(node: KNode, reset: boolean): void { 381 if (reset) { 382 getUINativeModule().checkbox.resetUnSelectedColor(node); 383 } else { 384 getUINativeModule().checkbox.setUnSelectedColor(node, this.value); 385 } 386 } 387 388 checkObjectDiff(): boolean { 389 return !isBaseOrResourceEqual(this.stageValue, this.value); 390 } 391} 392class CheckBoxOnChangeModifier extends ModifierWithKey<OnCheckboxChangeCallback>{ 393 constructor(value: OnCheckboxChangeCallback){ 394 super(value); 395 } 396 static identity: Symbol = Symbol('CheckboxOnchange'); 397 applyPeer(node: KNode, reset: boolean): void { 398 if (reset) { 399 getUINativeModule().checkbox.resetOnChange(node); 400 } else { 401 getUINativeModule().checkbox.setOnChange(node, this.value); 402 } 403 } 404} 405 406// @ts-ignore 407globalThis.Checkbox.attributeModifier = function (modifier: ArkComponent): void { 408 attributeModifierFunc.call(this, modifier, (nativePtr: KNode) => { 409 return new ArkCheckboxComponent(nativePtr); 410 }, (nativePtr: KNode, classType: ModifierType, modifierJS: ModifierJS) => { 411 return new modifierJS.CheckboxModifier(nativePtr, classType); 412 }); 413}; 414 415// @ts-ignore 416globalThis.Checkbox.contentModifier = function (modifier: ContentModifier<CheckBoxConfiguration>): void { 417 const elmtId = ViewStackProcessor.GetElmtIdToAccountFor(); 418 let nativeNode = getUINativeModule().getFrameNodeById(elmtId); 419 let component = this.createOrGetNode(elmtId, () => { 420 return new ArkCheckboxComponent(nativeNode); 421 }); 422 component.setContentModifier(modifier); 423}; 424