Lexical: Created core modal functionality

[bookstack] / resources / js / wysiwyg / ui / framework / forms.ts

diff --git a/resources/js/wysiwyg/ui/framework/forms.ts b/resources/js/wysiwyg/ui/framework/forms.ts
index 0fce73c125a4a4878a645a0f2ee9c53d37e7aca5..c6338f7984925e33c55112aa9d62daebd3ae85c2 100644 (file)
--- a/resources/js/wysiwyg/ui/framework/forms.ts
+++ b/resources/js/wysiwyg/ui/framework/forms.ts
@@ -15,9 +15,7 @@ export interface EditorSelectFormFieldDefinition extends EditorFormFieldDefiniti
 
 export interface EditorFormDefinition {
     submitText: string;
-    cancelText: string;
     action: (formData: FormData, context: EditorUiContext) => boolean;
-    cancel: () => void;
     fields: EditorFormFieldDefinition[];
 }
 
@@ -29,6 +27,15 @@ export class EditorFormField extends EditorUiElement {
         this.definition = definition;
     }
 
+    setValue(value: string) {
+        const input = this.getDOMElement().querySelector('input,select') as HTMLInputElement;
+        input.value = value;
+    }
+
+    getName(): string {
+        return this.definition.name;
+    }
+
     protected buildDOM(): HTMLElement {
         const id = `editor-form-field-${this.definition.name}-${Date.now()}`;
         let input: HTMLElement;
@@ -51,14 +58,38 @@ export class EditorFormField extends EditorUiElement {
 
 export class EditorForm extends EditorContainerUiElement {
     protected definition: EditorFormDefinition;
+    protected onCancel: null|(() => void) = null;
 
     constructor(definition: EditorFormDefinition) {
         super(definition.fields.map(fieldDefinition => new EditorFormField(fieldDefinition)));
         this.definition = definition;
     }
 
+    setValues(values: Record<string, string>) {
+        for (const name of Object.keys(values)) {
+            const field = this.getFieldByName(name);
+            if (field) {
+                field.setValue(values[name]);
+            }
+        }
+    }
+
+    setOnCancel(callback: () => void) {
+        this.onCancel = callback;
+    }
+
+    protected getFieldByName(name: string): EditorFormField|null {
+        for (const child of this.children as EditorFormField[]) {
+            if (child.getName() === name) {
+                return child;
+            }
+        }
+
+        return null;
+    }
+
     protected buildDOM(): HTMLElement {
-        const cancelButton = el('button', {type: 'button', class: 'editor-form-action-secondary'}, [this.trans(this.definition.cancelText)]);
+        const cancelButton = el('button', {type: 'button', class: 'editor-form-action-secondary'}, [this.trans('Cancel')]);
         const form = el('form', {}, [
             ...this.children.map(child => child.getDOMElement()),
             el('div', {class: 'editor-form-actions'}, [
@@ -74,7 +105,9 @@ export class EditorForm extends EditorContainerUiElement {
         });
 
         cancelButton.addEventListener('click', (event) => {
-            this.definition.cancel();
+            if (this.onCancel) {
+                this.onCancel();
+            }
         });
 
         return form;