BookStack Code Mirror - bookstack/blob - resources/js/editor/menu/DialogInput.js

   1 // ::- Represents a submenu wrapping a group of elements that start
   2 // hidden and expand to the right when hovered over or tapped.
   3 import {prefix, randHtmlId} from "./menu-utils";
   4 import crel from "crelt";
   5
   6 class DialogInput {
   7     // :: (?Object)
   8     // The following options are recognized:
   9     //
  10     // **`label`**`: string`
  11     //   : The label to show for the input.
  12     // **`id`**`: string`
  13     //   : The id to use for this input
  14     // **`attrs`**`: Object`
  15     //   : The attributes to add to the input element.
  16     // **`value`**`: function(state) -> string`
  17     //   : The getter for the input value.
  18     constructor(options) {
  19         this.options = options || {};
  20     }
  21
  22     // :: (EditorView) → {dom: dom.Node, update: (EditorState) → bool}
  23     // Renders the submenu.
  24     render(view) {
  25         const id = randHtmlId();
  26         const inputAttrs = Object.assign({type: "text", name: this.options.id, id: this.options.id}, this.options.attrs || {})
  27         const input = crel("input", inputAttrs);
  28         const label = crel("label", {for: id}, this.options.label);
  29
  30         const rowRap = crel("div", {class: prefix + '-dialog-form-row'}, label, input);
  31
  32         const update = (state) => {
  33             input.value = this.options.value(state);
  34             return true;
  35         }
  36
  37         return {dom: rowRap, update}
  38     }
  39
  40 }
  41
  42 export default DialogInput;