Scala RouterCtl类代码示例

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

import diode.react.ModelProxy
import japgolly.scalajs.react._
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.prefix_<^._
import spatutorial.client.SPAMain.{DashboardLoc, Loc, TodoLoc}
import spatutorial.client.components.Bootstrap.CommonStyle
import spatutorial.client.components.Icon._
import spatutorial.client.components._
import spatutorial.client.services._

import scalacss.ScalaCssReact._

object MainMenu {
  // shorthand for styles
  @inline private def bss = GlobalStyles.bootstrapStyles

  case class Props(router: RouterCtl[Loc], currentLoc: Loc, proxy: ModelProxy[Option[Int]])

  private case class MenuItem(idx: Int, label: (Props) => ReactNode, icon: Icon, location: Loc)

  // build the Todo menu item, showing the number of open todos
  private def buildTodoMenu(props: Props): ReactElement = {
    val todoCount = props.proxy().getOrElse(0)
    <.span(
      <.span("Todo "),
      todoCount > 0 ?= <.span(bss.labelOpt(CommonStyle.danger), bss.labelAsBadge, todoCount)
    )
  }

  private val menuItems = Seq(
    MenuItem(1, _ => "Dashboard", Icon.dashboard, DashboardLoc),
    MenuItem(2, buildTodoMenu, Icon.check, TodoLoc)
  )

  private class Backend($: BackendScope[Props, Unit]) {
    def mounted(props: Props) =
      // dispatch a message to refresh the todos
      Callback.ifTrue(props.proxy.value.isEmpty, props.proxy.dispatch(RefreshTodos))

    def render(props: Props) = {
      <.ul(bss.navbar)(
        // build a list of menu items
        for (item <- menuItems) yield {
          <.li(^.key := item.idx, (props.currentLoc == item.location) ?= (^.className := "active"),
            props.router.link(item.location)(item.icon, " ", item.label(props))
          )
        }
      )
    }
  }

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

  def apply(ctl: RouterCtl[Loc], currentLoc: Loc, proxy: ModelProxy[Option[Int]]): ReactElement =
    component(Props(ctl, currentLoc, proxy))
} 

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

import app.AppRouter.Page
import japgolly.scalajs.react._
import japgolly.scalajs.react.extra.router.{ Resolution, RouterCtl }
import chandu0101.scalajs.react.components.materialui.{ MuiAppBar, MuiFlatButton, MuiMuiThemeProvider }
import japgolly.scalajs.react.ReactComponentB
import utils.ReactTags
import chandu0101.scalajs.react.components.Implicits._
import react.DropMenu
import scala.language.existentials
import scala.language.postfixOps


object LayoutComponent extends ReactTags {

  case class Props(c: RouterCtl[Page], r: Resolution[Page])

  def theTopBar(props: Props) = MuiMuiThemeProvider()(
    MuiAppBar(
      title = "???????",
      //  onLeftIconButtonTouchTap = CallbackDebug.f1("onLeftIconButtonTouchTap"),
      //  onRightIconButtonTouchTap = CallbackDebug.f1("onRightIconButtonTouchTap"),
      //  onTitleTouchTap = CallbackDebug.f1("onTitleTouchTap"),
      showMenuIconButton = true,
      iconElementLeft = DropMenu(props.c, props.r.page),
      iconElementRight = MuiFlatButton(href = "/logout", key = "logoutbut", label = "?????", primary = true)()
    )()
  )

  case class Backend($: BackendScope[Props, Unit]) {
    def mounted() = Callback.empty

    def render(props: Props) = {
      <.div(
        theTopBar(props),
        <.div(
          props.r.render()
        )
      )
    }
  }

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

  def apply(c: RouterCtl[Page], r: Resolution[Page]) = component(Props(c, r))

} 

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

import diode.react._
import diode.data.Pot
import japgolly.scalajs.react.ReactComponentB
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.prefix_<^._
import spatutorial.client.SPAMain.{Loc, TodoLoc}
import spatutorial.client.components._
import spatutorial.client.services.RootModel

object Dashboard {

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

  // create dummy data for the chart
  val cp = Chart.ChartProps("Test chart", Chart.BarChart, ChartData(Seq("A", "B", "C"), Seq(ChartDataset(Seq(1, 2, 3), "Data1"))))

  // create the React component for Dashboard
  private val component = ReactComponentB[Props]("Dashboard")
    .render_P { case Props(router, proxy) =>
      <.div(
        // header, MessageOfTheDay and chart components
        <.h2("Dashboard"),
        // use connect from ModelProxy to give Motd only partial view to the model
        proxy.connect(m => m)(Motd(_)),
        Chart(cp),
        // create a link to the To Do view
        <.div(router.link(TodoLoc)("Check your todos!"))
      )
    }.build

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

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

import japgolly.scalajs.react.extra.router.RouterCtl


object Nav {
  val title = new {
    val home = "Home"
    val tech = "Tech"
    val search = "Search"
    val notice = "Notice"
    val soj = "SOJ"
  }

  def apply(ctl: RouterCtl[Page], navActive: String) = {
    def item(title: String, target: Page) =
      <.li(^.classSet1("nav-item", "active" ? (navActive == title)),
        <.a(^.cls := "nav-link", ctl setOnClick target, ^.href := "#",
          title + " ",
          <.span(^.cls := "sr-only", "(current)")))
    <.nav(^.cls := "navbar navbar-fixed-top navbar-dark bg-inverse",
      <.a(^.cls := "navbar-brand", ctl setOnClick Page.Home, "Zhranklin's Blog", ^.href := "#"),
      <.ul(^.cls := "nav navbar-nav",
        item(title.home, Page.Home),
        item(title.search, Page.Search),
        item(title.notice, Page.Notice),
        item(title.soj, Page.ACM.List)
      ))
  }

} 

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

import japgolly.scalajs.react._
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.prefix_<^._
import postgresweb.components.{LeftNav, TopNav}
import postgresweb.css.CommonStyles

import scala.scalajs.js
import scalacss.Defaults._
import scalacss.ScalaCssReact._

object WindowComponent {

  object Style extends StyleSheet.Inline {
    import dsl._
    val content = style(addClassNames("mdl-layout__content"))
    val pageContent = style(addClassNames("page-content"))
  }

  val component = ReactComponentB[Props]("ItemsPage")
    .render_P { P =>
      <.div(CommonStyles.layout,
        TopNav(TopNav.Props(P.menu,P.selectedFormContainer,P.ctrl)),
        LeftNav(LeftNav.Props("Tables",P.ctrl)),
        <.main(Style.content,
          <.div(Style.pageContent,
            <.div(CommonStyles.row,
              <.div(CommonStyles.fullWidth,
                P.selectedFormContainer.render()
              )
            )
          )
        )
      )
    }
    .build

  case class Props(menu:Vector[() => FormContainer], selectedFormContainer: FormContainer, ctrl : RouterCtl[FormContainer])

  def apply(props : Props,ref: js.UndefOr[String] = "", key: js.Any = {}) = component.set(key, ref)(props)

} 

//设置package包名称以及导入依赖的类
package react

import app.AppRouter.Page
import chandu0101.scalajs.react.components.Implicits._
import chandu0101.scalajs.react.components.materialui._
import japgolly.scalajs.react._
import japgolly.scalajs.react.extra.router.RouterCtl


object DropDownMenu {

  case class Props(ctl: RouterCtl[Page], currentPage: Page, menuItems: Seq[MenuItem])

  case class MenuItem(idx: String, label: String, page: Page)

  case class Backend(scope: BackendScope[Props, MenuItem]) {

    def onChange(props: Props): (ReactEventI, Int, MenuItem) => Callback =
      (e, idx, item) => {
        if (item.page != props.currentPage) props.ctl.set(item.page).runNow()
        Callback.empty
      }

    // render the items
    def render(props: Props, chosen: MenuItem) = MuiMuiThemeProvider()(
      MuiDropDownMenu(onChange = onChange(props), value = chosen)(
        props.menuItems map {
          case item => MuiMenuItem(key = item.idx, value = item, primaryText = item.label)()
        }: _*
      )
    )

  }

  val component = ReactComponentB[Props]("DropDownMenu")
    .initialState_P(_.menuItems.head)
    .renderBackend[Backend]
    .build

  def apply(ctl: RouterCtl[Page], currentPage: Page, menuItems: Seq[MenuItem]): ReactElement =
    component(Props(ctl, currentPage, menuItems))

} 

//设置package包名称以及导入依赖的类
package react

import app.AppRouter.{ AccountPage, HomePage, Page }
import chandu0101.scalajs.react.components.Implicits._
import chandu0101.scalajs.react.components.materialui._
import japgolly.scalajs.react._
import japgolly.scalajs.react.extra.router.RouterCtl


object DropMenu {

  case class Props(ctl: RouterCtl[Page], currentPage: Page)

  case class MenuItem(idx: String, label: String, page: Page)

  val menuItems = Seq(
    MenuItem("1", "?????????", HomePage),
    MenuItem("2", "???????", AccountPage)
  )

  case class Backend(scope: BackendScope[Props, MenuItem]) {

    def onChange(props: Props): (ReactEventI, Int, MenuItem) => Callback =
      (e, idx, item) => {
        if (item.page != props.currentPage) props.ctl.set(item.page).runNow()
        Callback.empty
      }

    // render the items
    def render(props: Props, chosen: MenuItem) = MuiMuiThemeProvider()(
      MuiDropDownMenu(onChange = onChange(props), value = chosen)(
        menuItems map {
          case item => MuiMenuItem(key = item.idx, value = item, primaryText = item.label)()
        }: _*
      )
    )

  }

  val component = ReactComponentB[Props]("DropMenu")
    .initialState(menuItems.head)
    .renderBackend[Backend]
    .build

  def apply(ctl: RouterCtl[Page], currentPage: Page): ReactElement = component(Props(ctl, currentPage))

} 

//设置package包名称以及导入依赖的类
package screens

import app.AppRouter._
import japgolly.scalajs.react.extra.router.RouterCtl
import chandu0101.scalajs.react.components.materialui.{ MuiMuiThemeProvider, MuiRaisedButton, MuiToolbar, MuiToolbarGroup, MuiToolbarSeparator, MuiToolbarTitle }
import japgolly.scalajs.react.ReactComponentB
import japgolly.scalajs.react._

import scala.language.existentials
import scala.language.postfixOps


object HomeScreen {

  case class Props(page: RouterCtl[Page])

  case class State(selectedDays: List[String])

  case class Backend(scope: BackendScope[Props, State]) {

    def changeTo(page: Page, props: Props)(e: ReactEventH) = {
      props.page.set(page)
    }

    def render(props: Props, state: State) = MuiMuiThemeProvider()(
      MuiToolbar()(
        MuiToolbarGroup()(
          MuiRaisedButton(onClick = changeTo(NewJobPage, props) _, label = "??? ???", primary = true)(),
          MuiRaisedButton(onClick = changeTo(DeleteJobPage, props) _, label = "?? ??", primary = true)(),
          MuiRaisedButton(onClick = changeTo(UpdateJobPage, props) _, label = "?? ??", primary = true)()
        )
      )
    )

  }

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

  def apply(c: RouterCtl[Page]) = component(Props(c))
} 

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

import diode.data.Pot
import diode.react._
import japgolly.scalajs.react._
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.prefix_<^._
import spatutorial.client.SPAMain.{Loc, TodoLoc}
import spatutorial.client.components._

import scala.util.Random
import scala.language.existentials

object Dashboard {

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

  case class State(motdWrapper: ReactConnectProxy[Pot[String]])

  // create dummy data for the chart
  val cp = Chart.ChartProps(
    "Test chart",
    Chart.BarChart,
    ChartData(
      Random.alphanumeric.map(_.toUpper.toString).distinct.take(10),
      Seq(ChartDataset(Iterator.continually(Random.nextDouble() * 10).take(10).toSeq, "Data1"))
    )
  )

  // create the React component for Dashboard
  private val component = ReactComponentB[Props]("Dashboard")
    // create and store the connect proxy in state for later use
    .initialState_P(props => State(props.proxy.connect(m => m)))
    .renderPS { (_, props, state) =>
      <.div(
        // header, MessageOfTheDay and chart components
        <.h2("Dashboard"),
        state.motdWrapper(Motd(_)),
        Chart(cp),
        // create a link to the To Do view
        <.div(props.router.link(TodoLoc)("Check your todos!"))
      )
    }
    .build

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

//设置package包名称以及导入依赖的类
package net.scalytica.blaargh.pages

import japgolly.scalajs.react._
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.prefix_<^._
import net.scalytica.blaargh.components.ArticleCard
import net.scalytica.blaargh.models.Article
import net.scalytica.blaargh.pages.Views.{FilterCriteria, View}
import net.scalytica.blaargh.styles.BlaarghBootstrapCSS

import scala.scalajs.concurrent.JSExecutionContext.Implicits.queue
import scalacss.ScalaCssReact._

object SearchResultsPage {

  case class Props(fc: FilterCriteria, ctl: RouterCtl[View])

  case class State(allArticles: Seq[Article] = Seq.empty)

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

    def init: Callback =
      $.props.map[Unit](p =>
        Article.Articles.map { a =>
          // Set the state once and for all
          $.setState(State(a)).runNow()
        }
      )

    def render(props: Props, state: State) =
      <.div(BlaarghBootstrapCSS.containerFluid,
        <.p(
          <.b(^.marginRight := "1.1rem", "Showing results for:"),
          <.span(BlaarghBootstrapCSS.labelDefault, props.fc.value)
        ),
        <.div(BlaarghBootstrapCSS.cardCols,
          props.fc.field match {
            case "author" =>
              state.allArticles.filter(_.author == props.fc.value).map(a => ArticleCard(a, props.ctl))
            case "label" =>
              state.allArticles.filter(_.labels.contains(props.fc.value)).map(a => ArticleCard(a, props.ctl))
            case _ =>
              EmptyTag
          }
        )
      )
  }

  val component = ReactComponentB[Props]("SearchResultsPage")
    .initialState_P(p => State())
    .renderBackend[Backend]
    .componentDidMount(_.backend.init)
    .build

  def apply(fc: FilterCriteria, ctl: RouterCtl[View]) =
    component(Props(fc, ctl))
} 

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

import japgolly.scalajs.react._
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.prefix_<^._
import net.scalytica.blaargh.models.Article
import net.scalytica.blaargh.pages.Views.View
import net.scalytica.blaargh.styles.BlaarghBootstrapCSS
import scalacss.ScalaCssReact._

import scala.scalajs.concurrent.JSExecutionContext.Implicits.queue

object ArticleCardList {

  case class Props(ctl: RouterCtl[View])

  case class State(articles: Seq[Article], ctl: RouterCtl[View])

  class Backend($: BackendScope[Props, State]) {
    def init: Callback =
      $.props.map(p =>
        Callback.future[Unit] {
          Article.Articles.map(a => $.modState(_.copy(articles = a)))
        }.runNow()
      )

    def render(props: Props, state: State) =
      <.div(BlaarghBootstrapCSS.cardCols,
        state.articles.map(a => ArticleCard(a, props.ctl))
      )
  }

  val component = ReactComponentB[Props]("ArticleCardList")
    .initialState_P(p => State(Seq.empty, p.ctl))
    .renderBackend[Backend]
    .componentWillMount($ => $.backend.init)
    .build

  def apply(ctl: RouterCtl[View]) = component(Props(ctl))
} 

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

import japgolly.scalajs.react._
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.prefix_<^._
import net.scalytica.blaargh.pages.Views.{Filter, FilterCriteria, View}
import net.scalytica.blaargh.styles.BlaarghBootstrapCSS

import scalacss.ScalaCssReact._

object Label {

  case class Props(lbl: String, ctl: RouterCtl[View])

  val component = ReactComponentB[Props]("Label")
    .initialState_P(p => p)
    .render { $ =>
      <.span(
        BlaarghBootstrapCSS.labelDefault,
        ^.cursor.pointer,
        ^.onClick --> $.state.ctl.byPath.set(Filter(FilterCriteria("label", $.props.lbl)).asPath),
        $.props.lbl
      )
    }
    .build

  def apply(label: String, ctl: RouterCtl[View]) = component(Props(label, ctl))
} 

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

import diode.react._
import diode.data.Pot
import japgolly.scalajs.react.ReactComponentB
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.prefix_<^._
import spatutorial.client.SPAMain.{Loc, TodoLoc}
import spatutorial.client.components._

object Dashboard {

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

  // create dummy data for the chart
  val cp = Chart.ChartProps("Test chart", Chart.BarChart, ChartData(Seq("A", "B", "C"), Seq(ChartDataset(Seq(1, 2, 3), "Data1"))))

  // create the React component for Dashboard
  private val component = ReactComponentB[Props]("Dashboard")
    .render_P { case Props(router, proxy) =>

      val motdConnect = proxy.connect(m => m)
      <.div(
        // header, MessageOfTheDay and chart components
        <.h2("Dashboard"),
        // use connect from ModelProxy to give Motd only partial view to the model
        motdConnect(Motd(_)),
        Chart(cp),
        // create a link to the To Do view
        <.div(router.link(TodoLoc)("Check your todos!"))
      )
    }.build

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

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

import diode.react.ModelProxy
import japgolly.scalajs.react._
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.prefix_<^._
import spatutorial.client.SPAMain.{DashboardLoc, Loc, TodoLoc}
import spatutorial.client.components.Bootstrap.CommonStyle
import spatutorial.client.components.Icon._
import spatutorial.client.components._
import spatutorial.client.services._

import scalacss.ScalaCssReact._

object MainMenu {
  // shorthand for styles
  @inline private def bss = GlobalStyles.bootstrapStyles

  case class Props(router: RouterCtl[Loc], currentLoc: Loc, proxy: ModelProxy[Option[Int]])

  private case class MenuItem(idx: Int, label: (Props) => ReactNode, icon: Icon, location: Loc)

  // build the Todo menu item, showing the number of open todos
  private def buildTodoMenu(props: Props): ReactElement = {
    val todoCount = props.proxy().getOrElse(0)
    <.span(
      <.span("Todo "),
      todoCount > 0 ?= <.span(bss.labelOpt(CommonStyle.danger), bss.labelAsBadge, todoCount)
    )
  }

  private val menuItems = Seq(
    MenuItem(1, _ => "Dashboard", Icon.dashboard, DashboardLoc),
    MenuItem(2, buildTodoMenu, Icon.check, TodoLoc)
  )

  private class Backend($: BackendScope[Props, Unit]) {
    def mounted(props: Props) =
    // dispatch a message to refresh the todos
      Callback.when(props.proxy.value.isEmpty)(props.proxy.dispatch(RefreshTodos))

    def render(props: Props) = {
      <.ul(bss.navbar)(
        // build a list of menu items
        for (item <- menuItems) yield {
          <.li(^.key := item.idx, (props.currentLoc == item.location) ?= (^.className := "active"),
            props.router.link(item.location)(item.icon, " ", item.label(props))
          )
        }
      )
    }
  }

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

  def apply(ctl: RouterCtl[Loc], currentLoc: Loc, proxy: ModelProxy[Option[Int]]): ReactElement =
    component(Props(ctl, currentLoc, proxy))
} 

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

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

// scalastyle:off
object MainLayout {

  def layout(c: RouterCtl[Loc], r: Resolution[Loc]): VdomElement = {
    <.div(
      Header.header(c, r),
      // the vertically center area
      r.render(),
      Footer.footer()
    )
  }

}