Fixed #180: onChange passes value to msg function

PurpleKingdomGames · Mar 21, 2023 · 515feef · 515feef
1 parent 1f32776
commit 515feef
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git a/project/AttributeGen.scala b/project/AttributeGen.scala
@@ -209,7 +209,7 @@ object AttributeGen {
       EventEmitting("onBlur"),
       EventEmitting("onCanPlay"),
       EventEmitting("onCanPlayThrough"),
-      EventEmitting("onChange", "change"),
+      // EventEmitting("onChange", "change"), // Provided manually as it doesn't fit the pattern
       EventEmitting("onClick", "click"),
       EventEmitting("onContextMenu"),
       EventEmitting("onCopy"),

diff --git a/sandbox/src/main/scala/example/Sandbox.scala b/sandbox/src/main/scala/example/Sandbox.scala
@@ -45,6 +45,9 @@ object Sandbox extends TyrianApp[Msg, Model]:
     (Model.init, cmds)
 
   def update(model: Model): Msg => (Model, Cmd[IO, Msg]) =
+    case Msg.NewFlavour(f) =>
+      (model.copy(flavour = Option(f)), Cmd.None)
+
     case Msg.MouseMove(to) =>
       (model.copy(mousePosition = to), Cmd.None)
 
@@ -236,6 +239,16 @@ object Sandbox extends TyrianApp[Msg, Model]:
         case Page.Page1 =>
           div(onMouseMove(evt => Msg.MouseMove((evt.screenX.toInt, evt.screenY.toInt))))(
             div(id := "mousepos")().innerHtml(s"<p><i>Mouse Coords ${model.mousePosition}</i></p>"),
+            label(
+              p("Choose an ice cream flavour:"),
+              select(cls := "ice-cream", name := "ice-cream", onChange(Msg.NewFlavour(_)))(
+                option(value := "")("Select One ..."),
+                option(value := "chocolate")("Chocolate"),
+                option(value := "sardine")("Sardine"),
+                option(value := "vanilla")("Vanilla")
+              )
+            ),
+            p(model.flavour.map(f => s"You like $f").getOrElse("Pick a flavour...")),
             input(
               placeholder := "What should we save?",
               value       := model.tmpSaveData,
@@ -436,6 +449,7 @@ enum Msg:
   case UpdateHttpDetails(newUrl: String)
   case FrameTick(runningTime: Double)
   case MouseMove(to: (Int, Int))
+  case NewFlavour(name: String)
 
 enum Status:
   case Connecting
@@ -480,7 +494,8 @@ final case class Model(
     currentTime: js.Date,
     http: HttpDetails,
     time: Time,
-    mousePosition: (Int, Int)
+    mousePosition: (Int, Int),
+    flavour: Option[String]
 )
 
 final case class Time(running: Double, delta: Double):
@@ -541,7 +556,8 @@ object Model:
       new js.Date(),
       HttpDetails.initial,
       Time(0.0d, 0.0d),
-      (0, 0)
+      (0, 0),
+      None
     )
 
   // We're only saving/loading the input field contents as an example

diff --git a/tyrian/shared/src/main/scala/tyrian/Html.scala b/tyrian/shared/src/main/scala/tyrian/Html.scala
@@ -60,6 +60,9 @@ object Html extends HtmlTags with HtmlAttributes:
   def onInput[M](msg: String => M): Attr[M] =
     onEvent("input", (e: Tyrian.Event) => msg(e.target.asInstanceOf[Tyrian.HTMLInputElement].value))
 
+  def onChange[M](msg: String => M): Attr[M] =
+    onEvent("change", (e: Tyrian.Event) => msg(e.target.asInstanceOf[Tyrian.HTMLInputElement].value))
+
   def style(name: String, value: String): Attr[Nothing] = Attribute("style", Style(name, value).toString)
   @targetName("style_Style")
   def style(style: Style): Attr[Nothing]    = Attribute("style", style.toString)