Scala ModelProxy类代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› Scala›Scala教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了Scala中diode.react.ModelProxy类的典型用法代码示例。如果您正苦于以下问题：Scala ModelProxy类的具体用法？Scala ModelProxy怎么用？Scala ModelProxy使用的例子？那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。

在下文中一共展示了ModelProxy类的20个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的Scala代码示例。

示例1: MainMenu

//设置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))
}

开发者ID:tuxslayer，项目名称:exhibition-catalog，代码行数:62，代码来源:MainMenu.scala

示例2: MainMenu

//设置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))
}

开发者ID:simerplaha，项目名称:scalajs-spa-tutorial-spray，代码行数:62，代码来源:MainMenu.scala

示例3: Dashboard

//设置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
}

开发者ID:iriddhi，项目名称:mis，代码行数:30，代码来源:Dashboard.scala

示例4: ExpertConfigResetComponent

//设置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))

}

开发者ID:fhnw-saav，项目名称:saav，代码行数:34，代码来源:ExpertConfigResetComponent.scala

示例5: Tell

//设置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))
}

开发者ID:adrijardi，项目名称:playing-scalajs，代码行数:46，代码来源:Tell.scala

示例6: MainMenu

//设置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))
}

开发者ID:hajime-moto，项目名称:spa-tutorial-outofmemory，代码行数:62，代码来源:MainMenu.scala

示例7: LoadingIndicator

//设置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)
}

开发者ID:malaman，项目名称:scala-weather-app，代码行数:27，代码来源:LoadingIndicator.scala

示例8: Header

//设置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)
}

开发者ID:malaman，项目名称:scala-weather-app，代码行数:36，代码来源:Header.scala

示例9: MainMenu

//设置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))
}

开发者ID:Messi91，项目名称:scalajs-spa-custom，代码行数:62，代码来源:MainMenu.scala

示例10: Homepage

//设置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))
}

开发者ID:devkat，项目名称:pegasus，代码行数:24，代码来源:Homepage.scala

示例11: CharacterView

//设置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))

}

开发者ID:devkat，项目名称:pegasus，代码行数:25，代码来源:CharacterView.scala

示例12: SectionView

//设置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))
}

开发者ID:devkat，项目名称:pegasus，代码行数:30，代码来源:SectionView.scala

示例13: FlowView

//设置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))
}

开发者ID:devkat，项目名称:pegasus，代码行数:49，代码来源:FlowView.scala

示例14: FeedsPage

//设置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))
}

开发者ID:mmcoulombe，项目名称:poc-aad，代码行数:39，代码来源:FeedsPage.scala

示例15: MainMenu

//设置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))
}

开发者ID:aphexcx，项目名称:iconoclast-webapp，代码行数:62，代码来源:MainMenu.scala

示例16: PoiEditor

//设置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))

}

开发者ID:devkat，项目名称:kidstravel，代码行数:60，代码来源:PoiEditor.scala

示例17: MainMenu

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

import diode.react.ModelProxy
import japgolly.scalajs.react._
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.prefix_<^._
import kidstravel.client.components.Bootstrap.CommonStyle
import kidstravel.client.components.Icon._
import kidstravel.client.components.{GlobalStyles, Icon}
import kidstravel.client.KidsTravelMain.{DashboardLoc, Loc, PoiLoc}
import kidstravel.client.services.RefreshPois

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

  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(RefreshPois))

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

开发者ID:devkat，项目名称:kidstravel，代码行数:61，代码来源:MainMenu.scala

示例18: CityModule

//设置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))
}

开发者ID:devkat，项目名称:kidstravel，代码行数:49，代码来源:CityModule.scala

示例19: getAction

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

import diode.Action
import diode.data.Pot
import diode.react.ModelProxy
import diode.react.ReactPot._
import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.prefix_<^._

trait SearchBox {

  type T

  def getAction: String => Action
  def updateAction: Seq[T] => Action
  def asString: T => String

  case class Props(proxy: ModelProxy[Pot[Seq[T]]])

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

    private def updateCandidates(e: ReactEventI): Callback = {
      val fragment = e.target.value
      if (fragment.length >= 3)
        $.props >>= (_.proxy.dispatch(getAction(fragment)))
      else
        $.props >>= (_.proxy.dispatch(updateAction(Seq.empty)))
    }

    def render(props: Props) =
      <.div(
        <.input(
          ^.`type` := "text",
          ^.placeholder := "Enter at least 3 characters",
          ^.onKeyUp ==> updateCandidates
        ),
        props.proxy().renderFailed(ex => "Error loading"),
        props.proxy().renderPending(_ > 100, _ => <.p("Loading …")),
        props.proxy().render(ts => <.ol(ts.map(t => <.li(asString(t)))))
      )
  }

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

  def apply(proxy: ModelProxy[Pot[Seq[T]]]) = component(Props(proxy))

}

开发者ID:devkat，项目名称:kidstravel，代码行数:50，代码来源:SearchBox.scala

示例20: CityTile

//设置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))

}

开发者ID:devkat，项目名称:kidstravel，代码行数:54，代码来源:CityTile.scala

注：本文中的diode.react.ModelProxy类示例整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。