component-input-image.tsx
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

component-input-image.tsx
View Options

	import type { BaseContext } from "koa";
	import { TempstreamJSX } from "tempstream";
	import type { FilePointer } from "@sealcode/file-manager";
	import type { Image } from "@sealcode/jdd";
	import type { StatefulPage } from "@sealcode/sealgen";
	import type { ComponentPreviewActions } from "./component-preview-actions.js";
	import type { JDDPageState } from "./jdd-page.js";
	import { makeJDDContext } from "../../jdd-context.js";
	import { printArgPath } from "./print-arg-path.js";
	import { htmlEscape } from "escape-goat";

	export function ComponentInputImage<State extends JDDPageState>({
	arg_path,
	arg,
	value,
	ctx,
	}: {
	state: State;
	arg_path: string[];
	arg: Image;
	value: FilePointer \| null;
	page: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;
	ctx: BaseContext;
	}): JSX.Element {
	const jdd_context = makeJDDContext(ctx);
	return (
	<div style="margin-bottom: 10px">
	<label
	style="display: flex; align-items: center; column-gap: 10px;"
	data-controller="input-image-preview"
	>
	{arg_path.at(-1) \|\| ""}
	{value &&
	jdd_context.render_image(value, {
	container: { width: 40, height: 40, objectFit: "cover" },
	crop: { width: 40, height: 40 },
	style: "height: 40px; width: 40px;",
	})}
	<input
	type="file"
	name={`$${printArgPath(arg_path)}.new`}
	value=""
	autocomplete="off"
	data-action="change->input-image-preview#handleChange"
	multiple={arg.hasParent("list")}
	/>
	</label>
	<div>
	<input
	type="hidden"
	name={`$${printArgPath(arg_path)}.old`}
	value={htmlEscape(value?.token \|\| "")}
	autocomplete="off"
	/>
	</div>
	</div>
	);
	}