Scala ModelProxy类代码示例

//设置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 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.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 ch.fhnw.ima.saav
package view

import ch.fhnw.ima.saav.circuit.UpdateWeightsAction
import ch.fhnw.ima.saav.model.app.ExpertConfig
import ch.fhnw.ima.saav.model.weight.Weights
import diode.Action
import diode.react.ModelProxy
import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.prefix_<^._
import scalacss.ScalaCssReact._

object ExpertConfigResetComponent {

  case class Props(isExpertConfigModified: Boolean, defaultWeights: Weights, dispatchCB: Action => Callback)

  private val component = ReactComponentB[Props](ExpertConfigResetComponent.getClass.getSimpleName)
    .render_P { p =>
      def reset = p.dispatchCB(UpdateWeightsAction(p.defaultWeights))
      if (p.isExpertConfigModified)
        <.div(css.expertConfigReset, "Configuration Modified (", <.a(^.cursor.pointer, ^.onClick --> reset, "Reset to Defaults"), ")")
      else
        <.div()
    }
    .build

  def apply(modelProxy: ModelProxy[ExpertConfig]): ReactComponentU[Props, Unit, Unit, TopNode] =
    component(Props(modelProxy.value.isModified, modelProxy.value.defaultWeights, modelProxy.dispatchCB[Action]))

  def apply(isExpertConfigModified: Boolean, defaultWeights: Weights, dispatch: Action => Callback): ReactComponentU[Props, Unit, Unit, TopNode] =
    component(Props(isExpertConfigModified, defaultWeights, dispatch))

} 

//设置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 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 weatherApp.components

import diode.react.ModelProxy
import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.html_<^._
import weatherApp.diode.AppState

object LoadingIndicator {
  case class Props(proxy: ModelProxy[AppState])

  val Component = ScalaFnComponent[Props](props => {
    val proxy = props.proxy()
    if (proxy.isLoading) {
      <.div(
        ^.position := "absolute",
        ^.top := 100.px,
        ^.left := "50%",
        <.div(^.cls :="loading-indicator")
      )
    } else {
      <.div()
    }
  })

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

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

import diode.react.ModelProxy
import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.html_<^._
import weatherApp.config.Config
import weatherApp.diode.AppState

object Header {
  case class Props(proxy: ModelProxy[AppState])

  val Component = ScalaFnComponent[Props](props => {
    val proxy = props.proxy()
    if (proxy.user.isDefined) {
      <.div(
        ^.display := "flex",
        ^.justifyContent := "flex-end",
        HeaderUserLink(
          HeaderUserLink.Props(proxy.user.get)
        ),
        HeaderBtn(
          HeaderBtn.Props(text = "Logout", url = s"${Config.AppConfig.apiHost}/logout")
        )
      )
    } else if (!proxy.isLoading) {
      HeaderBtn(
        HeaderBtn.Props(text = "Login with Github", url = s"${Config.AppConfig.apiHost}/authenticate", isLogin = true)
      )
    } else {
      <.div()
    }
  })

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

//设置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("Todos "),
      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.dispatchCB(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 net.devkat.pegasus.view

import diode.react.ModelProxy
import japgolly.scalajs.react.ReactComponentB
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.prefix_<^._
import net.devkat.pegasus.model.{Flow, RootModel}
import net.devkat.pegasus.pages.Page

object Homepage {

  case class Props(router: RouterCtl[Page], proxy: ModelProxy[RootModel])

  // create the React component for Dashboard
  private val component = ReactComponentB[Props]("Homepage")
    .renderPS { (_, props, state) =>
      FlowView(props.proxy.zoom(_.flow), props.proxy.zoom(_.selection))
    }.
    build

  def apply(router: RouterCtl[Page], proxy: ModelProxy[RootModel]) =
    component(Props(router, proxy))
} 

//设置package包名称以及导入依赖的类
package net.devkat.pegasus.view

import diode.react.ModelProxy
import japgolly.scalajs.react.ReactComponentB
import japgolly.scalajs.react.vdom.prefix_<^._
import net.devkat.pegasus.model.{Character, Selection}

object CharacterView extends ElementView[Character] {

  private val component = ReactComponentB[ElementProps[Character]]("CharacterView")
    .renderP { (_, props) =>
      val character = props.elementProxy()
      <.span(
        s"${character.ch}",
        selectionAttr(props),
        ^.onClick ==> onClick(props)
      )
    }.
    build

  def apply(sectionIndex: Int, paragraphIndex: Int, elementIndex: Int, characterProxy: ModelProxy[Character], selectionProxy: ModelProxy[Option[Selection]]) =
    component(ElementProps(sectionIndex, paragraphIndex, elementIndex, characterProxy, selectionProxy))

} 

//设置package包名称以及导入依赖的类
package net.devkat.pegasus.view

import diode.react.ModelProxy
import japgolly.scalajs.react.ReactComponentB
import japgolly.scalajs.react.vdom.prefix_<^._
import net.devkat.pegasus.model.{Flow, Section, Selection}

object SectionView {

  case class Props(sectionIndex: Int, sectionProxy: ModelProxy[Section], selectionProxy: ModelProxy[Option[Selection]])

  private val component = ReactComponentB[Props]("SectionView")
    .renderP { (_, props) =>
      val section = props.sectionProxy()
      <.div(
        section.children.zipWithIndex map { case (paragraph, index) =>
          ParagraphView(
            props.sectionIndex,
            index,
            props.sectionProxy.zoom(_.children(index)),
            props.selectionProxy)
        }
      )
    }.
    build

  def apply(sectionIndex: Int, sectionProxy: ModelProxy[Section], selectionProxy: ModelProxy[Option[Selection]]) =
    component(Props(sectionIndex, sectionProxy, selectionProxy))
} 

//设置package包名称以及导入依赖的类
package net.devkat.pegasus.view

import diode.react.ModelProxy
import japgolly.scalajs.react.vdom.prefix_<^._
import japgolly.scalajs.react.{Callback, _}
import net.devkat.pegasus.actions.{ClearSelection, InsertCharacter}
import net.devkat.pegasus.model.{Flow, Selection}

object FlowView {

  case class Props(flowProxy: ModelProxy[Flow], selectionProxy: ModelProxy[Option[Selection]])

  private val component = ReactComponentB[Props]("FlowView")
    .renderP { (_, props) =>
      val flowProxy = props.flowProxy
      val flow = flowProxy()
      val selectionOption = props.selectionProxy()

      def onKeyPress(e: ReactKeyboardEvent) = {
        e.preventDefault()
        selectionOption.map(sel =>
          flowProxy.dispatch(InsertCharacter(sel, e.charCode.toChar))
        ).getOrElse(Callback.empty)
      }

      def onClick(e: ReactMouseEvent) =
        flowProxy.dispatch(ClearSelection)

      <.div(
        ^.`class` := "pegasus",
        ^.tabIndex := 0,
        ^.onKeyPress ==> onKeyPress,
        //^.onKeyDown ==> { (e: ReactKeyboardEvent) => Callback(e.preventDefault()) },
        ^.onKeyUp ==> { (e: ReactKeyboardEvent) => Callback(e.preventDefault()) },
        ^.onClick ==> onClick,
        flow.children.zipWithIndex map { case (section, index) =>
          SectionView(
            index,
            props.flowProxy.zoom(_.children(index)),
            props.selectionProxy)
        }
      )
    }.
    build

  def apply(flowProxy: ModelProxy[Flow], selectionProxy: ModelProxy[Option[Selection]]) =
    component(Props(flowProxy, selectionProxy))
} 

//设置package包名称以及导入依赖的类
package me.mmcoulombe.aad.pages

import diode.data.Pot
import diode.react.ModelProxy
import diode.react.ReactPot._
import japgolly.scalajs.react.{Callback, ScalaComponent}
import japgolly.scalajs.react.component.Scala.{BackendScope, Unmounted}
import japgolly.scalajs.react.vdom.html_<^._
import me.mmcoulombe.aad.FetchFeeds
import me.mmcoulombe.aad.components.FeedsView
import me.mmcoulombe.add.models.RSSFeed


object FeedsPage {
  case class Props(proxy: ModelProxy[Pot[Map[Long, RSSFeed]]])
  class Backend($: BackendScope[Props, Unit]) {
    def mounted(props: Props): Callback = {
      props.proxy.dispatchCB(FetchFeeds())
    }

    def render(props: Props): VdomElement = {
      <.div(
        props.proxy().renderReady(feeds =>
          FeedsView(feeds.values)
        )
      )
    }
  }

  private val component = ScalaComponent.builder[Props]("FeedsPage")
    .stateless
    .renderBackend[Backend]
    .componentDidMount($ => $.backend.mounted($.props))
    .build

  def apply(proxy: ModelProxy[Pot[Map[Long, RSSFeed]]]): Unmounted[Props, Unit, Backend] =
    component(Props(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("Underage Images "),
      todoCount > 0 ?= <.span(bss.labelOpt(CommonStyle.danger), bss.labelAsBadge, todoCount)
    )
  }

  private val menuItems = Seq(
    MenuItem(1, _ => "Dashboard", Icon.dashboard, DashboardLoc),
    MenuItem(2, buildTodoMenu, Icon.photo, 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(RefreshImages))

    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))
}