big-radio-group.ts
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

big-radio-group.ts
View Options

	import { Context } from "koa";
	import { FlatTemplatable, tempstream } from "tempstream";
	import { FormField } from "../fields/field";
	import { FormDataValue } from "../form";
	import { FormFieldControl } from "./form-field-control";

	export class BigRadioGroup extends FormFieldControl {
	constructor(
	public field: FormField,
	public options: Record<
	string,
	{
	description:
	\| FlatTemplatable
	\| ((
	ctx: Context,
	data: Record<string, FormDataValue>,
	messages: [],
	feld_name_prefix: string,
	form_id: string,
	show_field_errors: boolean
	) => FlatTemplatable);
	}
	>
	) {
	super([field]);
	}

	async render(
	ctx: Context,
	data: Record<string, FormDataValue>,
	messages: [],
	field_name_prefix: string,
	form_id: string,
	show_field_errors: boolean
	): Promise<FlatTemplatable> {
	const { raw: current_value } = await this.field.getValue(ctx, 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"
	${this.field.required ? "required" : ""}
	${key == current_value ? "checked" : ""}
	/>
	<div class="bigradio">
	${typeof description == "function"
	? description(
	ctx,
	data,
	messages,
	field_name_prefix,
	form_id,
	show_field_errors
	)
	: description}
	<label class="bigradio__cta" for="${id}">Wybierz</label>
	</div>`;
	})}
	</div>`;
	}
	}