Component - Dropdown

문제

laminar 와 fomantic-UI 의 Dropdown 을 이용해, 재활용 가능한 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 Dropdown(name: String, items: Seq[String]) {
    val selectedVar: Var[String]               = Var("")
    val elem: ReactiveHtmlElement[html.Select] = select(
      cls := "ui selection dropdown",
      value <-- selectedVar.signal,
      onChange.mapToValue --> selectedVar,
      option(name, value := ""),
      items.map { item =>
        option(item, value := item)
      }
    )
  }

  def main(args: Array[String]): Unit = {
    val dropdown = new Dropdown("Search Engine", List("naver", "google", "yahoo"))

    val content = div(
      dropdown.elem,
      div(
        label("selected: "),
        child.text <-- dropdown.selectedVar.signal
      )
    )

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

결과