Modals

Since 4.5.2, Modal has become the one of the core feature of BJDA.
You can create a modal or Submit Event Listener with BJDA easily

Modal Utilities

Create a Modal Creator, you can invoke the builder with a modal ID to build it to Modal instance.

val AddTodoModal = modal(
    title = "Create Todo"
) {
    + Row(
        input(id = "todo", label = "Todo")
    )
}

val modal = AddTodoMdoal("id-of-modal") //Modal

You can control the lifecycle of listeners yourself.

Form API

Form is used to attach to a Component. You should use it as a Hook.

Example

component {
    val AddTodoForm by form {
        title = "Add Todo"
        
        render = {
            + Row(
                input(id = "todo", label = "Todo")
            )
        }
    }
}

You can also create a Class Modal

class Modal : FormFactory() {
    override val title = "Create Todo"

    override fun render(): LambdaList<Row> {
        return {
            + Row(
                Button.primary(id = "create-todo", label = "Create Todo")
            )
        }
    }

    override fun onSubmit(event: ModalInteractionEvent) {
        event.reply("Hello World").queue()
    }
}

The listener will be destroyed when the component is unmounted.
If you don't use it as a hook or attach it to anything, it might cause a memory leak.

ModalPool

ModalPool is a pool that manage one or multi Modal Listeners.

There are three types of ModalPool:

• Single Modal Pool

  It is the default Modal Pool, it allows you to create a listener with specified ID.

  Its listeners will be destroyed when submitted, each ID cannot be duplicated.
  
  Example

  val TodoModalPool = ModalPool.single(
      modal("Create Todo") {
          + Row(
              input(id = "create-todo", label = "Todo")
          )
      }
  )
  
  val CreateTodoModal = TodoModalPool.next { event ->
      event.reply("Hello World").queue()
  }

• Multi Modal Pool

  It is an improved version of Single Modal Pool

  It supports duplicated IDs. When all modals with the same id are submitted, its listener will be destroyed.
  
  Example

  val Modal = ModalPool.multi(
      modal("Create Todo") {
          + Row(
              input(id = "create-todo", label = "Todo")
          )
      }
  )
  
  //Create Listener, this listener can be reused
  val onSubmit = Modal.listen("modal-id") { event ->
      event.reply("Hello World").queue()
  }
  
  //Build Modal
  val CreateTodoModal = Modal.next(onSubmit)

• Fixed Modal Pool (Deprecated)

  Modal Pool that only accepts one Submit Listener, its ID is fixed.

  The Listener will be unmounted temporarily when not used
  
  It is Deprecated, we recommend to use this instead:

   val Modal = modal("Create Todo") {
      + Row(
          input(id = "create-todo", label = "Todo")
      )
  }
  
  val onSubmit = onSubmitStatic { event ->
      event.reply("Hello World").queue()
  }
  
  //Build Modal
  Modal.create(onSubmit)