Page MenuHomeSealhub
Files F969354

jdd-creator.tsx
No OneTemporary
Actions

jdd-creator.tsx
View Options

import type { BaseContext } from "koa";
import { TempstreamJSX } from "tempstream";
import { ComponentPreviewActions } from "./component-preview-actions.js";
import type { JDDPageState } from "./jdd-page.js";
import JDDPage from "./jdd-page.js";
import move_row_down_icon from "./table-move-row-down.svg";
import move_row_up_icon from "./table-move-row-up.svg";
export default abstract class JDDCreator extends JDDPage {
actions = ComponentPreviewActions;
/**
* This method returns list of components allowed in JDD Editor instance.
* If list is empty it will allow all of the components in registry,
* if you overide this function you can decide on what components should
* available.
*/
getAllowedComponents(): string[] {
return [];
}
getRegistryCompoments() {
const all_components = super.getRegistryCompoments();
const allowed_components = this.getAllowedComponents();
if (allowed_components.length > 0) {
return Object.fromEntries(
Object.entries(all_components).filter(([name]) =>
allowed_components.includes(name)
)
);
}
return all_components;
}
renderParameterButtons(state: JDDPageState) {
{
/*The below button has to be here in order for it to be the default behavior */
}
return (
<div>
<input type="submit" value="Preview" />
<select name="component">
{Object.keys(this.getRegistryCompoments()).map((cmp) => (
<option value={cmp}>{cmp}</option>
))}
</select>
{this.makeActionButton(state, {
action: "add_component",
label: "Add component",
})}
</div>
);
}
renderComponentBlock(
ctx: BaseContext,
state: JDDPageState,
component: {
component_name: string;
args: Record<string, unknown>;
},
component_index: number
) {
return (
<fieldset>
<legend>Component - {component.component_name}</legend>
{this.makeActionButton(
state,
{ action: "remove_component", label: "❌" },
component_index
)}
{this.makeActionButton(
state,
{
action: "move_component_up",
label: "Move this row up",
content: /* HTML */ `<img
width="20"
height="20"
src="${move_row_up_icon.url}"
/>`,
},
component_index
)}
{this.makeActionButton(
state,
{
action: "move_component_down",
label: "Move this row down",
content: /* HTML */ `<img
width="20"
height="20"
src="${move_row_down_icon.url}"
/>`,
},
component_index
)}
{super.renderComponentBlock(ctx, state, component, component_index)}
</fieldset>
);
}
}

File Metadata

Mime Type
text/x-java
Expires
Fri, Nov 22, 20:14 (19 h, 41 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
547732
Default Alt Text
jdd-creator.tsx (2 KB)

Event Timeline