Component - Radio

문제

laminar 와 fomantic-UI 의 Radio 를 이용해, 재활용 가능한 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 Radio(name: String, items: Seq[String]) {
    val selectedVar: Var[String]            = Var("")
    val elem: ReactiveHtmlElement[html.Div] = div(
      cls := "ui form",
      div(
        cls := "inline fields",
        label(name),
        items.map(item =>
          div(
            cls := "field",
            div(
              cls := "ui radio checkbox",
              input(
                typ := "radio",
                checked <-- selectedVar.signal.map(_ == item),
                onChange.mapTo(item) --> selectedVar
              ),
              label(item)
            )
          )
        )
      )
    )
  }

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

    val content = div(
      radio.elem,
      div(
        label("selected: "),
        child.text <-- radio.selectedVar.signal,
        Signal.fromValue("google") --> radio.selectedVar // 초기값 설정
      )
    )

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

결과