135 lines
3.5 KiB
TypeScript
135 lines
3.5 KiB
TypeScript
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 [];
|
|
}
|
|
|
|
getRegistryComponents() {
|
|
const all_components = super.getRegistryComponents();
|
|
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.getRegistryComponents()).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
|
|
) {
|
|
const checkbox_id = `component_${component_index}_open`;
|
|
return (
|
|
<div
|
|
class={[
|
|
"jdd-editor__component-block",
|
|
"jdd-editor__component-block--number-" + component_index,
|
|
]}
|
|
data-component-debugger-target="componentBlock"
|
|
data-component-index={component_index.toString()}
|
|
>
|
|
<summary class="jdd-editor__component-block__top_bar">
|
|
{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
|
|
)}
|
|
<span>{component.component_name}</span>
|
|
<label
|
|
class="component-block__handle"
|
|
for={checkbox_id}
|
|
style="flex-grow: 1"
|
|
data-action="click->component-debugger#labelClicked"
|
|
>
|
|
<span class="jdd-editor__component-block__chevron"> > </span>
|
|
</label>
|
|
</summary>
|
|
<input
|
|
type="checkbox"
|
|
class="component-collapse-toggle"
|
|
name={`$[components][${component_index}][open]`}
|
|
data-turbo-permanent
|
|
id={checkbox_id}
|
|
style="display:none"
|
|
data-component-debugger-target="checkbox"
|
|
/>
|
|
<div class="jdd-editor__component-block__inner">
|
|
{super.renderComponentBlock(ctx, state, component, component_index)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|