55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
import { Image } from "@sealcode/jdd";
|
|
import { StatefulPage } from "@sealcode/sealgen";
|
|
import { TempstreamJSX } from "tempstream";
|
|
import { ComponentPreviewState } from "../components.sreact.js";
|
|
import { jdd_context } from "../jdd-context.js";
|
|
import { ComponentPreviewActions } from "./component-preview-actions.js";
|
|
import { printArgPath } from "./print-arg-path.js";
|
|
|
|
export function ComponentInputImage<State extends ComponentPreviewState>({
|
|
arg_path,
|
|
arg,
|
|
value,
|
|
}: {
|
|
state: State;
|
|
arg_path: string[];
|
|
arg: Image;
|
|
value: string;
|
|
page: StatefulPage<ComponentPreviewState, typeof ComponentPreviewActions>;
|
|
}) {
|
|
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={`$.component_args${printArgPath(arg_path)}.new`}
|
|
value=""
|
|
autocomplete="off"
|
|
data-action="change->input-image-preview#handleChange"
|
|
multiple={arg.hasParent("list")}
|
|
/>
|
|
</label>
|
|
<div>
|
|
<input
|
|
type="hidden"
|
|
name={`$.component_args${printArgPath(arg_path)}.old`}
|
|
value={(value || "")
|
|
.replaceAll('"', """)
|
|
.replaceAll("\n", "\\n")}
|
|
autocomplete="off"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|