dropdown.ts
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

dropdown.ts
View Options

	import { Context } from "koa";
	import { attribute } from "../../sanitize";
	import { getRequiredClass, inputWrapper } from "../../utils/input-wrapper";
	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 name = this.field.name;
	return inputWrapper(
	[name, getRequiredClass(this.field.required)],
	/* HTML */ `<label for="${name}">${this.options.label}</label
	><select
	name="${this.field.name}"
	id="${name}"
	${this.options.autosubmit
	? `onchange='this.form.submit()'`
	: ""}
	${!this.options.autocomplete ? `autocomplete="off"` : ""}
	>
	${
	// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
	Promise.resolve(this.field.generateOptions(ctx)).then(
	(options) =>
	Object.entries(options).map(
	([value, text]) =>
	`<option value="${attribute(value)}" ${
	(value \|\| "") == picked_value
	? "selected"
	: ""
	}>${text}</option>`
	)
	)
	}
	</select>`
	);
	}
	}