dropdown.ts
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

dropdown.ts
View Options

	import { Context } from "koa";
	import { tempstream } from "tempstream";
	import { FormField, PickFromListField } from "../fields/field";
	import { FormDataValue } from "../form";
	import { FormFieldControl } from "./controls";

	export class Dropdown extends FormFieldControl {
	constructor(
	public field: PickFromListField,
	public options: {
	label: string;
	autosubmit?: boolean;
	autocomplete?: boolean;
	} = {
	label: field.name,
	autosubmit: false,
	autocomplete: true,
	}
	) {
	super([field]);
	}

	async render<Fields extends Record<string, FormField>>(
	ctx: Context,
	data: Record<string, FormDataValue>
	) {
	const { parsed: picked_value } = await this.field.getValue(ctx, data);
	const id = this.field.name;
	return tempstream/* HTML */ `<label for="${id}"
	>${this.options.label}</label
	><select
	name="${this.field.name}"
	id="${id}"
	${this.options.autosubmit
	? `onchange='this.form.submit()'`
	: ""}
	${!this.options.autocomplete ? `autocomplete="off"` : ""}
	>
	${Promise.resolve(this.field.generateOptions(ctx)).then(
	(options) =>
	Object.entries(options).map(
	([value, text]) =>
	`<option value="${value}" ${
	(value \|\| "") == picked_value
	? "selected"
	: ""
	}>${text}</option>`
	)
	)}
	</select>`;
	}
	}