inviton-powerduck 0.0.221 → 0.0.223

package/components/input/checkbox.tsx

@@ -10,6 +10,7 @@ import './css/checkbox.css';
 interface CheckBoxArgs extends FormItemWrapperArgs {
 	value: boolean;
 	checkboxLabelHtml?: string;
+	customRenderOption?: (h, state: CheckBoxDisplayArgs) => any;
 	skin?: CheckBoxSkin;
 	size?: CheckBoxSize;
 	disabled?: boolean;
@@ -27,6 +28,11 @@ export enum CheckBoxSize {
 	Medium = 'md',
 }
 
+interface CheckBoxDisplayArgs {
+	checked: boolean;
+	disabled: boolean;
+}
+
 @Component
 class CheckBoxComponent extends TsxComponent<CheckBoxArgs> implements CheckBoxArgs {
 	@Prop() label!: string;
@@ -34,6 +40,7 @@ class CheckBoxComponent extends TsxComponent<CheckBoxArgs> implements CheckBoxAr
 	@Prop() cssClass!: string;
 	@Prop() subtitle!: string;
 	@Prop() checkboxLabelHtml!: string;
+	@Prop() customRenderOption?: (h, state: CheckBoxDisplayArgs) => any;
 	@Prop() value!: boolean;
 	@Prop() mandatory!: boolean;
 	@Prop() wrap!: boolean;
@@ -50,6 +57,19 @@ class CheckBoxComponent extends TsxComponent<CheckBoxArgs> implements CheckBoxAr
 	@Prop() changed: (newValue: boolean) => void;
 	uuid: string = null;
 
+	getCustomRenderedLabel(h) {
+		if (this.customRenderOption != null) {
+			const displayArgs: CheckBoxDisplayArgs = {
+				checked: this.value,
+				disabled: this.disabled ?? false,
+			};
+
+			return this.customRenderOption(h, displayArgs);
+		}
+
+		return null;
+	}
+
 	raiseChangeEvent(e) {
 		this.populateValidationDeclaration();
 		const val = e.target.checked;
@@ -102,7 +122,7 @@ class CheckBoxComponent extends TsxComponent<CheckBoxArgs> implements CheckBoxAr
 				<label class="form-check-label">
 					<input class="form-check-input" type="checkbox" checked={this.value} disabled={this.disabled || undefined} onChange={e => this.raiseChangeEvent(e)} />
 					<span class="form-check-sign"></span>
-					{this.checkboxLabelHtml}
+					{this.getCustomRenderedLabel != null ? this.getCustomRenderedLabel(h) : this.checkboxLabelHtml}
 				</label>
 			</div>
 		);
@@ -120,7 +140,7 @@ class CheckBoxComponent extends TsxComponent<CheckBoxArgs> implements CheckBoxAr
 				<div class="inv-cbrb-inner">
 					<input class="inv-chckb-clickable" type="checkbox" id={`iei-input-${this.uuid}`} checked={this.value} disabled={this.disabled || undefined} onChange={e => this.raiseChangeEvent(e)} />
 					<label class="inv-chckb-clickable form-check-label " for={`iei-input-${this.uuid}`}>
-						<HtmlLiteral innerHTML={this.checkboxLabelHtml} />
+						{this.getCustomRenderedLabel != null ? this.getCustomRenderedLabel(h) : <HtmlLiteral innerHTML={this.checkboxLabelHtml} />}
 					</label>
 				</div>
 			</div>
@@ -140,7 +160,7 @@ class CheckBoxComponent extends TsxComponent<CheckBoxArgs> implements CheckBoxAr
 				<div class="inv-cbrb-inner">
 					<input class="inv-chckb-clickable" type="checkbox" id={`iei-input-${this.uuid}`} checked={this.value} disabled={this.disabled || undefined} onChange={e => this.raiseChangeEvent(e)} />
 					<label class="inv-chckb-clickable form-check-label " for={`iei-input-${this.uuid}`}>
-						<HtmlLiteral innerHTML={this.checkboxLabelHtml} />
+						{this.getCustomRenderedLabel != null ? this.getCustomRenderedLabel(h) : <HtmlLiteral innerHTML={this.checkboxLabelHtml} />}
 					</label>
 				</div>
 			</div>

package/components/input/radio-button-group.tsx

@@ -131,7 +131,7 @@ class RadioButtonGroupComponent extends TsxComponent<RadioButtonGroupArgs> imple
 				opts.forEach((item) => {
 					retVal.push({
 						id: this.getReflectedRowValue(item, true),
-						text: this.customRenderOption != null ? this.handleCustomRenderResult(h, this.customRenderOption(h, item)) : this.getReflectedRowValue(item, false),
+						text: this.getReflectedRowValue(item, false),
 						dataRow: item,
 					});
 				});
@@ -141,7 +141,7 @@ class RadioButtonGroupComponent extends TsxComponent<RadioButtonGroupArgs> imple
 		return retVal;
 	}
 
-	private handleCustomRenderResult(h: any, renderResult: any): string {
+	private handleCustomRenderResult(renderResult: any): string {
 		if (renderResult == null) {
 			return '';
 		}
@@ -226,6 +226,7 @@ class RadioButtonGroupComponent extends TsxComponent<RadioButtonGroupArgs> imple
 		const nameId = `iei-group-${PortalUtils.randomString(6)}`;
 		const selectedItem = this.getSelectedItem(h);
 		const isSmall = this.radioButtonSize === RadioButtonSize.Small;
+		const hasCustomRender = this.customRenderOption != null;
 
 		return (
 			<div class="radio-group-wrap">
@@ -257,7 +258,9 @@ class RadioButtonGroupComponent extends TsxComponent<RadioButtonGroupArgs> imple
 									onChange={() => this.handleRadioValueChanged(h)}
 								/>
 								<label class="form-check-label" for={uuid}>
-									<HtmlLiteral innerHTML={optionItem.text} />
+									{hasCustomRender
+										? this.customRenderOption(h, optionItem.dataRow)
+										: <HtmlLiteral innerHTML={this.handleCustomRenderResult(optionItem.text)} />}
 								</label>
 							</div>
 						</div>

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "inviton-powerduck",
 	"type": "module",
-	"version": "0.0.221",
+	"version": "0.0.223",
 	"files": [
 		"app/",
 		"common/",