Scala BackendScope类代码示例

//设置package包名称以及导入依赖的类
package org.rebeam.tree.view.pages

import japgolly.scalajs.react.Addons.ReactCssTransitionGroup
import japgolly.scalajs.react.{BackendScope, ReactComponentB, ReactElement}
import japgolly.scalajs.react.extra.Reusability
import japgolly.scalajs.react.vdom.prefix_<^._
import org.rebeam.tree.view.Cursor

object PagesView {

  case class State(direction: PagesTransition)

  val stateReuse: Reusability[State] = Reusability.byRefOr_==

  class Backend[M, P](scope: BackendScope[Cursor[M, Pages[P, P]], State])(renderToList: Cursor[M, Pages[P, P]] => List[ReactElement])(transitions: PagesToTransition[P]) {

    def render(cp: Cursor[M, Pages[P, P]], state: State): ReactElement = {
      val panes = renderToList(cp)
      // We get an unavoidable extra div from the ReactCssTransitionGroup,
      // so we set a class to allow us to style it with flex etc. using CSS
      <.div(^.className := "tree-pages-view__outer-div")(
        ReactCssTransitionGroup(
          "tree-pages-view__page--transition-" + state.direction.className,
          appearTimeout = 550,
          leaveTimeout = 550,
          enterTimeout = 550,
          component = "div")(
          <.div(
            ^.top :="0px",
            ^.left := "0px",
            ^.width := "100%",
            ^.height := "100%",
            ^.position := "absolute",
            ^.key := panes.last.key,
            panes.last
          )
        )
      )
    }
  }

  def apply[M, P](name: String)(renderToList: Cursor[M, Pages[P, P]] => List[ReactElement])(implicit transitions: PagesToTransition[P]) = ReactComponentB[Cursor[M, Pages[P, P]]](name)
    .getInitialState[State](_=> State(PagesTransition.Left))
    .backend(new Backend[M, P](_)(renderToList)(transitions))
    .render(s => s.backend.render(s.props, s.state))
    .componentWillReceiveProps(
      scope => scope.$.setState(State(transitions(scope.currentProps.location.current, scope.nextProps.location.current)))
    )
    .configure(Reusability.shouldComponentUpdate(Cursor.cursorReusability, stateReuse))
    .build
} 

//设置package包名称以及导入依赖的类
package com.omis.client.views

import com.omis.client.router.ApplicationRouter.Loc
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.{BackendScope, ScalaComponent}
import japgolly.scalajs.react.vdom.VdomElement
import japgolly.scalajs.react.vdom.html_<^._

object Home {

  case class State(placeholder: Long)
  case class Props(routerCtl: RouterCtl[Loc])
  class Backend($: BackendScope[Props, State]) {
    def render(s: State, p: Props): VdomElement =
      <.div(
        ^.className := "home-page",
        <.header(
          <.div(^.className := "container", ^.id := "maincontent",
            <.div(
              ^.className := "row",
              <.div(
                ^.className := "col-lg-12",
                <.img(^.className := "img-responsive", ^.src := "/assets/images/profile.png", ^.alt := ""),
                <.div(
                  ^.className := "intro-text",
                  <.h1(^.className := "name", "OMIS"),
                  <.hr(^.className := "star-light"),
                  <.span(^.className := "skills", "An open source employees and students management system")
                )
              )
            ))
        )
      )
  }

  val component = ScalaComponent.builder[Props]("Home")
    .initialState(State(0))
    .renderBackend[Backend]
    .build
} 

//设置package包名称以及导入依赖的类
package com.omis.client.views

import com.omis.client.RootModels.UserRootModel
import com.omis.client.router.ApplicationRouter.Loc
import diode.react.ModelProxy
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.VdomElement
import japgolly.scalajs.react.vdom.html_<^._
import japgolly.scalajs.react.{BackendScope, ScalaComponent}

object Dashboard {

  case class State()
  case class Props(routerCtl: RouterCtl[Loc], proxy: ModelProxy[UserRootModel])
  class Backend($: BackendScope[Props, State]) {
    def render(s: State, p: Props): VdomElement =
      p.proxy.value.user.role match {
        case "student" => StudentDashboard.component(StudentDashboard.Props(p.routerCtl))
        case "teacher" => TeacherDashboard.component(TeacherDashboard.Props(p.routerCtl))
        case "admin" => AdminDashboard.component(AdminDashboard.Props(p.routerCtl))
        case _ => <.div()
      }
  }

  val component = ScalaComponent.builder[Props]("Home")
    .initialState(State())
    .renderBackend[Backend]
    .build
} 

//设置package包名称以及导入依赖的类
package spatutorial.client.modules

import diode.data.Pot
import diode.react.ModelProxy
import japgolly.scalajs.react.{BackendScope, Callback, ReactComponentB}
import spatutorial.client.components.Bootstrap.Panel
import spatutorial.shared.TellItem
import japgolly.scalajs.react.vdom.prefix_<^._
import spatutorial.client.components.GlobalStyles

import scalacss.ScalaCssReact._


object Tell {

  @inline private def bss = GlobalStyles.bootstrapStyles

  case class Props(proxy: ModelProxy[Pot[TellItem]])

  case class State(selectedItem: Option[TellItem] = None)

  class Backend(t: BackendScope[Props, State]) {
    def sayIt(): Callback = {
      println("it")
      t.modState(s => s.copy(selectedItem = Some(TellItem("It!!"))))
      t.
    }

    def render(p: Props, s: State) =
      Panel(Panel.Props("What do you want to say?"),
        <.div(bss.formGroup,
          <.label(^.`for` := "tellText", "I want to tell you:"),
          <.input(^.id := "tellText", ^.name := "tellText"),
          <.button(^.onClick --> sayIt, "Say it!")
        )
      )
  }

  val component = ReactComponentB[Props]("Tell")
    .initialState(State())
    .renderBackend[Backend]
    .build

  def apply(proxy: ModelProxy[Pot[TellItem]]) = component(Props(proxy))
} 

//设置package包名称以及导入依赖的类
package console.components

import japgolly.scalajs.react.extra.OnUnmount
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.all.{className, li, ul}
import japgolly.scalajs.react.{BackendScope, ReactComponentB, ReactNode}
import console.JsApplication.{ClusterMapRoute, DashboardRoute, Route}
import console.style.{GlobalStyles, Icon}
import console.style.Icon.Icon
import japgolly.scalajs.react.vdom.all._
import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.prefix_<^.<

import scalacss.ScalaCssReact._

object MainMenu {

  @inline private def style = GlobalStyles.bootstrapStyles

  case class Props(ctl: RouterCtl[Route], currentRoute: Route)

  case class MenuItem(label: (Props) => ReactNode, icon: Icon, location: Route)

  class MainMenuBackend(t: BackendScope[Props, Unit]) extends OnUnmount {
    val menuItems = Seq(
      MenuItem(_ => "Metrics", Icon.dashboard, DashboardRoute),
      MenuItem(_ => "Clusters", Icon.circle, ClusterMapRoute))

    def render(props: Props) = {
      <.ul(style.navbar)(
        for (item <- menuItems) yield {
          <.li(
            (props.currentRoute == item.location) ?= (className := "active"),
            props.ctl.link(item.location)(item.icon, " ", item.label(props))
          )
        }
      )
    }
  }

  private val MainMenu = ReactComponentB[Props]("MainMenu")
    .renderBackend[MainMenuBackend]
    .build

  def apply(props: Props) = MainMenu(props)
} 

//设置package包名称以及导入依赖的类
package kidstravel.client.modules

import diode.data._
import diode.react.ModelProxy
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.prefix_<^._
import japgolly.scalajs.react.{BackendScope, ReactComponentB}
import kidstravel.client.KidsTravelMain.Loc
import kidstravel.shared.poi.Poi

object PoiEditor {

  case class Props(poiId: Option[Long], router: RouterCtl[Loc], proxy: ModelProxy[PotMap[Long, Poi]])

  class Backend($: BackendScope[Props, Unit]) {

    def renderPoi(poi: Poi) =
      <.form(
        <.div(
          ^.`class` := "form-group",
          <.label("Name"),
          <.input(
            ^.`class` := "form-control",
            ^.`type` := "text",
            ^.value := poi.name
          ),
          <.button(
            ^.`type` := "submit",
            ^.`class` := "btn btn-default"
          )
        )
      )

    def render(props: Props) = {
      props.poiId match {
        case Some(id) =>
          val pois = props.proxy()
          pois(id) match {
            case Empty | Pending(_) => <.p("Loading …")
            case Failed(_) => <.p("Could not load point of interest.")
            case Unavailable => <.p("Point of interest not available.")
            case Ready(poi) => renderPoi(poi)
            case _ => <.p()
          }
        case None =>
          val newPoi = Poi(-1, "")
          renderPoi(newPoi)
      }
    }
  }

  val component = ReactComponentB[Props]("PoiEditor")
    .renderBackend[Backend]
    .build

  def apply(poiId: Option[Long], router: RouterCtl[Loc], proxy: ModelProxy[PotMap[Long, Poi]]) =
    component(Props(poiId, router, proxy))

} 

//设置package包名称以及导入依赖的类
package kidstravel.client.modules

import diode.data.Pot
import diode.react.ModelProxy
import diode.react.ReactPot._
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.prefix_<^._
import japgolly.scalajs.react.{BackendScope, Callback, ReactComponentB}
import kidstravel.client.KidsTravelMain.{Loc, NewPoiLoc}
import kidstravel.client.components.Bootstrap.Button
import kidstravel.client.services.GetCity
import kidstravel.shared.geo.City

object CityModule {

  case class Props(cityId: Long, router: RouterCtl[Loc], proxy: ModelProxy[Pot[City]])

  class Backend($: BackendScope[Props, Unit]) {
    def mounted(props: Props) =
      Callback.when(props.proxy().isEmpty)(props.proxy.dispatch(GetCity(props.cityId)))

    def render(props: Props) = {
      val pot = props.proxy()
      <.div(
        pot.renderPending(_ > 10, _ => <.p("Loading …")),
        pot.renderFailed(_ => <.p("Could not load city.")),
        pot.renderReady(city =>
          <.div(
            <.h1(city.name),
            <.div(
              props.router.link(NewPoiLoc)("New point of interest")(
                ^.`class` := "btn"
              )
            )
          )
        )
      )
    }
  }

  val component = ReactComponentB[Props]("City")
    .renderBackend[Backend]
    .componentDidMount(scope => scope.backend.mounted(scope.props))
    .build

  def apply(cityId: Long, router: RouterCtl[Loc], proxy: ModelProxy[Pot[City]]) =
    component(Props(cityId, router, proxy))
} 

//设置package包名称以及导入依赖的类
package kidstravel.client.components

import diode.data.Pot
import diode.react.ModelProxy
import diode.react.ReactPot._
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.prefix_<^._
import japgolly.scalajs.react.{BackendScope, ReactComponentB}
import kidstravel.client.KidsTravelMain.{CityLoc, Loc}
import kidstravel.client.services.FlickrImage
import kidstravel.shared.geo.City

object CityTile {

  case class Props(router: RouterCtl[Loc], proxy: ModelProxy[(City, Pot[FlickrImage])])

  class Backend($: BackendScope[Props, Unit]) {

    def render(props: Props) = {
      val city = props.proxy()._1
      val imgPot = props.proxy()._2
      println(s"Rendering ${city.name} ($imgPot)")
      <.div(
        ^.`class` := "col-lg-3",
        imgPot.renderEmpty(<.p("Loading …")),
        imgPot.renderPending(_ > 10, _ => <.p("Loading …")),
        imgPot.renderReady(img =>
          <.div(
            ^.backgroundImage := s"url(${img.url})",
            ^.backgroundSize := "cover",
            ^.height := 200.px,
            ^.marginBottom := 15.px,
            <.h3(
              ^.padding := 5.px + " " + 10.px,
              ^.margin := 0.px,
              ^.color := "white",
              ^.backgroundColor := "rgba(0, 0, 0, 0.5)",
              props.router.link(CityLoc(city.id))(city.name)(^.color := "white")
            )
          )
        )
      )
    }
  }

  private def component = ReactComponentB[Props]("CityTile").
    renderBackend[Backend].
    build

  def apply(router: RouterCtl[Loc], proxy: ModelProxy[(City, Pot[FlickrImage])]) =
    component(Props(router, proxy))

} 

//设置package包名称以及导入依赖的类
package kidstravel.client.components

import diode.Action
import diode.data.{Empty, Pot}
import diode.react.ModelProxy
import diode.react.ReactPot._
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.{BackendScope, ReactComponentB, _}
import japgolly.scalajs.react.vdom.prefix_<^._
import kidstravel.client.logger._
import kidstravel.client.KidsTravelMain.Loc
import kidstravel.client.services.KidsTravelCircuit
import scala.scalajs.js

trait Tiles {

  type T <: AnyRef

  def getAction: Action

  def tileComponent(router: RouterCtl[Loc], proxy: ModelProxy[T]): ReactElement

  case class Props(router: RouterCtl[Loc], proxy: ModelProxy[Pot[Seq[T]]])

  class Backend($: BackendScope[Props, Unit]) {

    def load = $.props >>= (p => p.proxy.value match {
      case Empty => p.proxy.dispatch(getAction)
      case _ => Callback.empty
    })

    def render(props: Props) = {
      println("Rendering tiles")
      val proxy = props.proxy
      <.div(
        ^.`class` := "row",
        proxy().renderFailed(ex => "Error loading"),
        proxy().renderPending(_ > 100, _ => <.p("Loading …")),
        proxy().render(items =>
          items.zipWithIndex.map { case (_, i) =>
            proxy.connector.connect(proxy.modelReader.zoom(_.get(i)), s"tile_$i": js.Any).apply(tileComponent(props.router, _))
            //proxy.connector.connect(proxy.modelReader.zoom(_.get(i))).apply(tileComponent(props.router, _))
            //proxy.wrap(_.get(i))(tileComponent(_))
            //tileComponent(proxy.zoom(_.get(i)))
          }
        )
      )
    }
  }

  private val component = ReactComponentB[Props]("Tiles").
    renderBackend[Backend].
    componentDidMount(_.backend.load).
    build

  def apply(router: RouterCtl[Loc], proxy: ModelProxy[Pot[Seq[T]]]) = component(Props(router, proxy))

}