Scala Pot类代码示例

//设置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 spatutorial.client.modules

import diode.react.ReactPot._
import diode.react._
import diode.data.Pot
import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.prefix_<^._
import spatutorial.client.components.Bootstrap._
import spatutorial.client.components._
import spatutorial.client.logger._
import spatutorial.client.services._
import spatutorial.shared._

import scalacss.ScalaCssReact._

object Search {
  case class Props(searchModel: ModelProxy[SearchModel])
  case class State(searchTerm: String)

  class Backend($: BackendScope[Props, State]) {
    @inline private def bss = GlobalStyles.bootstrapStyles

    def render(p: Props, s: State) = {
      Panel(Panel.Props("Search"),
        <.div(bss.formGroup)(
          <.div(bss.row)(
            <.div(bss.col(6))(
              SearchInput(SearchInput.Props(s => println(s)))
            ),
            <.div(bss.col(6))(
              "world"
            )
          )
        )
      )
    }
  }

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

  def apply(searchModel: ModelProxy[SearchModel]) = component(Props(searchModel))
} 

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

import diode.react.ReactPot._
import diode.react._
import diode.data.Pot
import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.prefix_<^._
import spatutorial.client.components.Bootstrap._
import spatutorial.client.services.UpdateMotd


object Motd {

  // create the React component for holding the Message of the Day
  val Motd = ReactComponentB[ModelProxy[Pot[String]]]("Motd")
    .render_P { proxy =>
      Panel(Panel.Props("Message of the day"),
        // render messages depending on the state of the Pot
        proxy().renderPending(_ > 500, _ => <.p("Loading...")),
        proxy().renderFailed(ex => <.p("Failed to load")),
        proxy().render(m => <.p(m)),
        Button(Button.Props(proxy.dispatch(UpdateMotd()), CommonStyle.danger), Icon.refresh, " Update")
      )
    }
    .componentDidMount(scope =>
      // update only if Motd is empty
      Callback.ifTrue(scope.props.value.isEmpty, scope.props.dispatch(UpdateMotd()))
    )
    .build

  def apply(proxy: ModelProxy[Pot[String]]) = Motd(proxy)
} 

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

import diode.react.ReactPot._
import diode.react._
import diode.data.Pot
import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.prefix_<^._
import spatutorial.client.components.Bootstrap._
import spatutorial.client.services.UpdateMotd


object Motd {

  // create the React component for holding the Message of the Day
  val Motd = ReactComponentB[ModelProxy[Pot[String]]]("Motd")
    .render_P { proxy =>
      Panel(Panel.Props("Message of the day"),
        // render messages depending on the state of the Pot
        proxy().renderPending(_ > 500, _ => <.p("Loading...")),
        proxy().renderFailed(ex => <.p("Failed to load")),
        proxy().render(m => <.p(m)),
        Button(Button.Props(proxy.dispatchCB(UpdateMotd()), CommonStyle.danger), Icon.refresh, " Update")
      )
    }
    .componentDidMount(scope =>
      // update only if Motd is empty
      Callback.when(scope.props.value.isEmpty)(scope.props.dispatchCB(UpdateMotd()))
    )
    .build

  def apply(proxy: ModelProxy[Pot[String]]) = Motd(proxy)
} 

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

import diode.react.ReactPot._
import diode.react._
import diode.data.Pot
import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.prefix_<^._
import spatutorial.client.components.Bootstrap._
import spatutorial.client.services.UpdateMotd


object Motd {

  // create the React component for holding the Message of the Day
  val Motd = ReactComponentB[ModelProxy[Pot[String]]]("Motd")
    .render_P { proxy =>
      Panel(Panel.Props("Message of the day"),
        // render messages depending on the state of the Pot
        proxy().renderPending(_ > 500, _ => <.p("Loading...")),
        proxy().renderFailed(ex => <.p("Failed to load")),
        proxy().render(m => <.p(m)),
        Button(Button.Props(proxy.dispatch(UpdateMotd()), CommonStyle.danger), Icon.refresh, " Update")
      )
    }
    .componentDidMount(scope =>
      // update only if Motd is empty
      Callback.when(scope.props.value.isEmpty)(scope.props.dispatch(UpdateMotd()))
    )
    .build

  def apply(proxy: ModelProxy[Pot[String]]) = Motd(proxy)
} 

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

import com.omis.User
import com.omis.client.RootModels.{EmployeeRootModel, EmployeesRootModel, UserRootModel}
import com.omis.client.handlers.{EmployeeHandler, EmployeesHandler, UserHandler}
import diode.Circuit
import diode.data.{Empty, Pot}
import diode.react.ReactConnector

case class RootModel(user: UserRootModel, emps: Pot[EmployeesRootModel], emp: Pot[EmployeeRootModel])

object OmisCircuit extends Circuit[RootModel] with ReactConnector[RootModel] {
  // initial application model
  override protected def initialModel = RootModel(
    UserRootModel(User(java.util.UUID.randomUUID(), "", "")), Pot.empty, Pot.empty
  )

  // combine all handlers into one
  override protected val actionHandler = composeHandlers(
    new UserHandler(zoomRW(_.user)((m, v) => m.copy(user = v))),
    new EmployeesHandler(zoomRW(_.emps)((m, v) => m.copy(emps = v))),
    new EmployeeHandler(zoomRW(_.emp)((m, v) => m.copy(emp = v)))
  )
} 

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

import diode.data.Pot
import diode.react._
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 scala.util.Random

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(
      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")
    .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 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 drt.client.components

import diode.data.Pot
import diode.react.ReactConnectProxy
import japgolly.scalajs.react.vdom.html_<^._
import japgolly.scalajs.react._
import drt.client.modules.{FlightsView, PopoverWrapper}
import drt.shared.AirportInfo
import drt.shared.FlightsApi.{Flights, FlightsWithSplits}
import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.html_<^._
import japgolly.scalajs.react.vdom.TagOf

import scala.collection.immutable.Map
import scala.scalajs.js

object FlightsPopover {

  case class FlightsPopoverState(hovered: Boolean = false)

  def apply(trigger: String,
            matchingFlights: Pot[FlightsWithSplits],
            airportInfos: ReactConnectProxy[Map[String, Pot[AirportInfo]]]) = ScalaComponent.builder[Unit]("HoverPopover")
    .initialStateFromProps((p) =>
      FlightsPopoverState()
    ).renderS((scope, state) => {
    val popover = <.div(
      ^.onMouseEnter ==> ((e: ReactEvent) => scope.modState(s => s.copy(hovered = true))),
      ^.onMouseLeave ==> ((e: ReactEvent) => scope.modState(_.copy(hovered = false))),
      showIfHovered(trigger, matchingFlights, airportInfos, state))
    popover
  }).build

  private def showIfHovered(trigger: String, matchingFlights: Pot[FlightsWithSplits],
                            airportInfos: ReactConnectProxy[Map[String, Pot[AirportInfo]]],
                            state: FlightsPopoverState) = {

    val popoverWrapper = airportInfos(airportInfo =>
      if (state.hovered) {
        val flightsTable = FlightsTable(FlightsView.Props(matchingFlights, airportInfo.value))
        <.span(PopoverWrapper.component(PopoverWrapper.props(trigger))(flightsTable))
      } else {
        <.span(trigger)
      }
    )
    <.div(popoverWrapper)
    //    trigger
  }
} 

//设置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.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.language.existentials
import scala.util.Random

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(
    "Estimated Age Distribution",
    Chart.BarChart,
    ChartData(
      (7 to 30) map (_.toString),
      Seq(ChartDataset(Iterator.continually(Random.nextDouble() * 80).take(24).toSeq, "Images / Age Distribution"))
    )
  )

  // 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)("Review analyzed images >>"))
      )
    }
    .build

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

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


import java.text.SimpleDateFormat
import java.util.Date

import diode.react.ReactPot._
import diode.react._
import diode.data.Pot
import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.prefix_<^._
import spatutorial.client.components.Bootstrap._
import spatutorial.client.services.UpdateMotd


object Motd {
//  val date = new SimpleDateFormat("hh:mm:ss //// EEE MMM dd yyyy").format(new Date).replace("////", "on")

  // create the React component for holding the Message of the Day
  val Motd = ReactComponentB[ModelProxy[Pot[String]]]("Motd")
    .render_P { proxy =>

      Panel(Panel.Props(s"Current Stats"),//(updated $date))"),
        // render messages depending on the state of the Pot
        proxy().renderPending(_ > 500, _ => <.p("Loading...")),
        proxy().renderFailed(ex => <.p("Failed to load")),
        proxy().render(m => <.p(m)),
        Button(Button.Props(proxy.dispatch(UpdateMotd()), CommonStyle.warning), Icon.refresh, " Update")
      )
    }
    .componentDidMount(scope =>
      // update only if Motd is empty
      Callback.when(scope.props.value.isEmpty)(scope.props.dispatch(UpdateMotd()))
    )
    .build

  def apply(proxy: ModelProxy[Pot[String]]) = Motd(proxy)
} 

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

import diode.react.ReactPot._
import diode.react._
import diode.data.Pot
import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.prefix_<^._
import example.services.UpdateMessage


object Message {

  // create the React component to hold a message
  val Message = ReactComponentB[ModelProxy[Pot[String]]]("Message")
    .render_P { proxy =>
      Panel(Panel.Props("Greeting message from server:"),
        // render messages depending on the state of the Pot
        proxy().renderPending(_ > 500, _ => <.p("Loading...")),
        proxy().renderFailed(ex => <.p("Failed to load")),
        proxy().render(m => <.p(m)),
        Button(Button.Props(proxy.dispatchCB(UpdateMessage())), " Update")
      )
    }
    .componentDidMount(scope =>
      // update only if Message is empty
      Callback.when(scope.props.value.isEmpty)(scope.props.dispatchCB(UpdateMessage()))
    )
    .build

  def apply(proxy: ModelProxy[Pot[String]]) = Message(proxy)
}