textarea.ts
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

textarea.ts
View Options

	import { Context } from "koa";
	import { FormField } from "../fields/field.js";
	import { FormDataValue } from "../form-types.js";
	import { FormControlContext } from "./form-control.js";
	import { SimpleInput, SimpleInputOptions } from "./simple-input.js";

	export class Textarea extends SimpleInput<string \| null> {
	constructor(
	public field: FormField<boolean, string \| null>,
	public options: SimpleInputOptions & {
	label?: string;
	rows?: number;
	cols?: number;
	description?: string;
	autogrow?: boolean;
	} = {}
	) {
	super(field, options);
	}

	renderDescription() {
	return this.options.description
	? /* HTML */ `<div class="form-input__description">
	${this.options.description}
	</div>`
	: "";
	}

	async getInputAttributes(
	fctx: FormControlContext
	): Promise<Record<string, string \| boolean>> {
	const original = await super.getInputAttributes(fctx);
	let onkeydown = original.onkeydown \|\| "";
	if (this.options.autogrow) {
	onkeydown += `;this.style.height = '5px';this.style.height = Math.max((this.scrollHeight)+32, ${
	((this.options.rows \|\| 2) + 1) * 16
	} )+'px';`;
	}
	return {
	...original,
	rows: this.options.rows ? this.options.rows.toString() : false,
	cols: this.options.cols ? this.options.cols.toString() : false,
	onkeydown,
	};
	}

	async renderInput(
	ctx: Context,
	attributes: string,
	data: Record<string, FormDataValue>
	) {
	const { parsed: value } = await this.field.getValue(ctx, data);
	return /* HTML */ `<textarea ${attributes}>${value \|\| ""}</textarea>`;
	}
	}