big-radio-group.ts
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

big-radio-group.ts
View Options

	import { FlatTemplatable, tempstream } from "tempstream";
	import { FormField } from "../fields/field.js";
	import { FormControlContext } from "./form-control.js";
	import { FormFieldControl } from "./form-field-control.js";

	export class BigRadioGroup extends FormFieldControl {
	constructor(
	public field: FormField,
	public options: Record<
	string,
	{
	description:
	\| FlatTemplatable
	\| ((fctx: FormControlContext) => FlatTemplatable);
	}
	>
	) {
	super([field]);
	}

	async render(fctx: FormControlContext): Promise<FlatTemplatable> {
	const { raw: current_value } = await this.field.getValue(
	fctx.ctx,
	fctx.data
	);
	return tempstream/* HTML */ `<div class="bigradios">
	${Object.entries(this.options).map(([key, { description }]) => {
	const id = `${this.field.name}-radio-${key}`;
	return tempstream/* HTML */ `<input
	type="radio"
	name="${this.field.name}"
	value="${key}"
	id="${id}"
	style="display: none"
	${fctx.form_id ? `form=${fctx.form_id}` : ""}
	${this.field.required ? "required" : ""}
	${key == current_value ? "checked" : ""}
	/>
	<div class="bigradio">
	${typeof description == "function"
	? description(fctx)
	: description}
	<label class="bigradio__cta" for="${id}">Wybierz</label>
	</div>`;
	})}
	</div>`;
	}
	}