airframe-rx: Support generic event handlers (#893)

* airframe-rx-widget: Support registring onClick/onEvent handlers

* Support generic event handlers

Author: xerial

airframe-rx-widget/src/main/scala/wvlet/airframe/rx/widget/RxDOM.scala

@@ -59,6 +59,9 @@ private[widget] object RxDOM extends LogSupport {
           htmlNode.setAttribute(attrName, value.mkString(" "))
       }
     }
+    for ((eventType, handler) <- config.onEventHandler) {
+      htmlNode.setEventListener(eventType, handler.asInstanceOf[dom.Event => Unit])
+    }
     htmlNode
   }
 

airframe-rx-widget/src/main/scala/wvlet/airframe/rx/widget/RxWidget.scala

@@ -43,6 +43,9 @@ trait RxWidget {
     * Add an extra CSS style
     */
   def addStyle(styleValue: String): this.type = updateConfig(config.addStyle(styleValue))
+
+  def onClick[U](handler: dom.MouseEvent => U): this.type = updateConfig(config.onClick(handler))
+
 }
 
 /**
@@ -119,7 +122,9 @@ trait RxElement extends RxWidget {
 }
 
 object RxElement {
-  def apply(node: xml.Node): RxElement = new RxElement { override def render: Node = node }
+  def apply(node: xml.Node): RxElement  = new RxElement { override def render: Node = node               }
+  def apply(elem: RxElement): RxElement = new RxElement { override def render: Node = new xml.Atom(elem) }
+  def apply[A](rx: Rx[A]): RxElement    = new RxElement { override def render: Node = new xml.Atom(rx)   }
 }
 
 /**
@@ -128,13 +133,13 @@ object RxElement {
 case class RxWidgetConfig(
     id: Option[String] = None,
     attributes: Map[String, Seq[String]] = Map.empty,
-    onClickHandler: Option[dom.MouseEvent => Unit] = None,
-    onEventHandler: Option[dom.Event => Unit] = None
+    onEventHandler: Map[String, Function1[_, _]] = Map.empty
 ) {
 
   // TODO: Add all event types https://www.w3schools.com/jsref/dom_obj_event.asp
-  def onClick(handler: dom.MouseEvent => Unit) = this.copy(onClickHandler = Some(handler))
-  def onEvent(handler: dom.Event => Unit)      = this.copy(onEventHandler = Some(handler))
+  def onClick[U](handler: dom.MouseEvent => U): RxWidgetConfig = onEvent("onClick", handler)
+  def onEvent[E <: dom.Event, U](eventType: String, handler: E => U): RxWidgetConfig =
+    this.copy(onEventHandler = onEventHandler + (eventType -> handler))
 
   def withId(id: String): RxWidgetConfig = this.copy(id = Some(id))
 

airframe-rx-widget/src/main/scala/wvlet/airframe/rx/widget/ui/bootstrap/Button.scala

@@ -13,7 +13,6 @@
  */
 package wvlet.airframe.rx.widget.ui.bootstrap
 
-import org.scalajs.dom
 import wvlet.airframe.rx.widget.RxElement
 import wvlet.log.LogSupport
 
@@ -41,19 +40,11 @@ case class Button(
 
   def render: xml.Node = {
     if (isActive) {
-      <button type="button" class="btn" onclick={
-        config.onClickHandler.getOrElse { x: dom.MouseEvent =>
-        }
-      }>{name}</button>
+      <button type="button" class="btn">{name}</button>
     } else {
       <button type="button" class="btn" disabled="true">{name}</button>
     }
   }
-
-  def onClick(handler: dom.MouseEvent => Unit): Button = {
-    updateConfig(config.onClick(handler))
-  }
-
 }
 
 object Button extends LogSupport {