field-group.ts
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

field-group.ts
View Options

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

	export class FieldGroup extends FormFieldControl {
	constructor(
	public controls: FormControl[],
	public options: {
	label?: string;
	classes?: string[];
	containerID?: string;
	} = {}
	) {
	super([]);
	}

	preLabel(): FlatTemplatable {
	return "";
	}

	preLabelContainer(): FlatTemplatable {
	return "";
	}

	postLabel(): FlatTemplatable {
	return "";
	}

	preFields(): FlatTemplatable {
	return "";
	}

	postFields(): FlatTemplatable {
	return "";
	}

	getGroupLabelProps(): FlatTemplatable {
	return `class="field-group__label"`;
	}

	async render(
	ctx: Context,
	data: Record<string, FormDataValue>,
	messages: FormMessage[],
	field_prefix: string,
	form_id: string,
	show_field_errors: boolean
	): Promise<FlatTemplatable> {
	const { label, classes } = this.options;

	return tempstream/* HTML */ `
	<div
	class="field-group ${(classes \|\| []).join(" ")}"
	${this.options.containerID
	? `id="${this.options.containerID}"`
	: ""}
	>
	${this.preLabelContainer()}
	<div class="field-group__label-container">
	${this.preLabel()}
	${label
	? `<label ${this.getGroupLabelProps()}>${label}</label>`
	: ""}
	${this.postLabel()}
	</div>
	${this.preFields()}
	<div class="field-group__fields">
	${this.controls.map((control) =>
	control.render(
	ctx,
	data,
	messages,
	field_prefix,
	form_id,
	show_field_errors
	)
	)}
	</div>
	${this.postFields()}
	</div>
	`;
	}
	}