Page MenuHomeSealhub
Files F7862250

component-input-list.ts
No OneTemporary
Actions

component-input-list.ts
View Options

/* eslint-disable @typescript-eslint/no-non-null-assertion */
import type { Context } from "koa";
import type { ComponentArgument, JDDContext, List } from "@sealcode/jdd";
import type { JDDPageState } from "../jdd-page.js";
import type { StatefulPage } from "@sealcode/sealgen";
import { ComponentInput } from "./component-input.js";
import type { ComponentPreviewActions } from "../component-preview-actions.js";
import { tempstream } from "tempstream";
export async function ComponentInputList<
State extends JDDPageState,
T extends ComponentArgument<unknown>
>({
state,
ctx,
arg_path,
arg,
value,
page,
makeJDDContext,
...rest
}: {
state: State;
ctx: Context;
arg_path: string[];
// eslint-disable-next-line @typescript-eslint/no-explicit-any
arg: List<T, any>;
value: T[];
page: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;
makeJDDContext: (ctx: Context) => JDDContext;
makeAssetURL: (asset: string) => string;
}): Promise<string> {
if (!value) {
value = [];
}
return tempstream/* HTML */ `<fieldset
id="${`component-input-list-${arg_path.join("-")}`}"
>
<legend>${arg_path.at(-1)!}</legend>
${value.map(
(value, i, all_values) =>
tempstream`<div style="display: flex">
${ComponentInput({
...rest,
ctx,
state,
arg_path: [...arg_path, i.toString()],
arg: arg.item_type,
value,
page,
makeJDDContext,
})}
${page.makeActionButton(
state,
{
action: "move_array_item_down",
label: "↓",
disabled: i == all_values.length - 1,
},
arg_path,
i
)}
${page.makeActionButton(
state,
{
action: "move_array_item_up",
label: "↑",
disabled: i == 0,
},
arg_path,
i
)}
${page.makeActionButton(
state,
{ action: "remove_array_item", label: "❌" },
arg_path,
i
)}
</div>`
)}
${page.makeActionButton(
state,
{
action: "add_array_item",
label: "➕",
},
arg_path
)}
</fieldset>`;
}

File Metadata

Mime Type
text/x-java
Expires
Wed, Aug 13, 20:21 (1 d, 6 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
876982
Default Alt Text
component-input-list.ts (2 KB)

Event Timeline