Component - TextInput

문제

laminar 와 fomantic-UI 의 Input 을 이용해, 재활용 가능한 component 를 만들어 보자

코드

import com.raquo.laminar.api.L._
import com.raquo.laminar.nodes.ReactiveHtmlElement
import org.scalajs.dom
import org.scalajs.dom.html

object Main {
  class TextInput(name: String, description: String) {
    val textVar: Var[String]                = Var("")
    val elem: ReactiveHtmlElement[html.Div] = div(
      label(name),
      cls := "ui input",
      input(
        typ := "text",
        onMountFocus,
        value <-- textVar,
        onInput.mapToValue --> textVar,
        placeholder := description
      )
    )
  }

  def main(args: Array[String]): Unit = {
    val textInput = new TextInput("Search Engine: ", "Enter search engine name")

    val content = div(
      textInput.elem,
      div(
        label("input: "),
        child.text <-- textInput.textVar.signal
      )
    )

    val containerNode = dom.document.getElementById("main_content")
    render(containerNode, content)
  }
}

결과