Scala ReactComponentB类代码示例

//设置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 codes.mark.geilematte
package editor

import codes.mark.geilematte.Category
import codes.mark.geilematte.remote.GMClient
import japgolly.scalajs.react.vdom.prefix_<^._
import japgolly.scalajs.react.{Callback, CallbackTo, ReactComponentB, ReactElement, ReactEventI, ReactNode}
import org.scalajs.dom.ext.{Ajax, AjaxException}
import org.scalajs.dom.raw.XMLHttpRequest
import scodec.codecs.implicits._

import scala.concurrent.ExecutionContext.Implicits.global
import scala.util.Success

final case class CategoryCreatorState(inputText:String, result:Option[Int])
object CategoryCreator {
  def component =
    ReactComponentB[Unit]("Category Maker Component")
      .initialState(CategoryCreatorState("", None))
      .renderS( (scope, ccs) => {

        def clicked(e: ReactEventI): Callback = {
          e.preventDefaultCB >>
          scope.modState(_.copy(result = None)) >>
          GMClient.post[Category, Int](Category(ccs.inputText)) logErrors
            ((id:Int) => scope.modState(_.copy(result = Option(id))))
        }

        def changed(e: ReactEventI): Callback = {
          val newInput = e.target.value
          scope.modState(_.copy(inputText = newInput))
        }

        <.span(
          <.span("Enter a new category name"),
          <.input(^.`type` := "text", ^.value := ccs.inputText, ^.onChange ==> changed),
          <.button(^.onClick ==> clicked)("Create"),
          ccs.result.fold(<.div())(res => <.div(res))
        )
      })
      .build
} 

//设置package包名称以及导入依赖的类
package codes.mark.geilematte.editor

import japgolly.scalajs.react.vdom.prefix_<^._
import japgolly.scalajs.react.{Callback, CallbackTo, ReactComponentB, ReactElement, ReactNode}


final case class MakerProps()
object QuestionMaker {
    def component =
      ReactComponentB[MakerProps]("Question Maker Component").render_P {
        case MakerProps() =>
          <.span("category", <.select(
            <.option(^.value := "Sets")
          ))
    }
} 

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

import codes.mark.geilematte.LatexText
import codes.mark.geilematte.facades.SafeKaTex
import japgolly.scalajs.react.vdom.prefix_<^._
import japgolly.scalajs.react.{Callback, ReactComponentB, ReactNode, TopNode}

import scalaz.\/

object Matte {
  def setShit(el:TopNode, ls:LatexText) = {
    Callback {
      SafeKaTex.render(ls.raw, el).fold(
        ())(e => el.innerHTML = e)
    }
  }

  def component =
    ReactComponentB[LatexText]("Math component")
      .initialState(Option.empty[String])
      .render($ => $.state.fold(
        <.span("Replace me, baby")
      )(errStr => <.span(errStr))
      )
      .componentDidMount(cdm => {
        val el = cdm.getDOMNode
        val math = cdm.props
        setShit(el, math)
      })
      .componentDidUpdate(cdu => {
        val el = cdu.$.getDOMNode
        val math = cdu.currentProps
        setShit(el, math)
      })
      .build
} 

//设置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 org.rebeam.tree.view.pages

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

object PagesView {

  case class State(direction: PagesTransition)

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

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

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

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

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

import japgolly.scalajs.react.vdom.prefix_<^._
import japgolly.scalajs.react.{Callback, ReactComponentB, ReactElement}

object SortableListItem {

  case class Props(leftIcon: ReactElement, content: ReactElement, onClick: Callback, onClickContents: Callback)

  val component = ReactComponentB[Props]("SortableListItem")
    .render_P(p => {

      <.div(
        ^.onClick --> p.onClick,
        ^.cursor := "pointer",
        ^.className := "react-sortable-item",
        ^.display := "flex",
        <.div(
          ^.flex := "0 0 56px",
          p.leftIcon
        ),
        <.div(
          ^.onClick --> p.onClickContents,
          ^.flex := "1 1 auto",
          p.content
        ),
        <.div(
          ^.flex := "0 0 56px",
          SortableView.handle
        )
      )

    })
    .build

  def apply(leftIcon: ReactElement, content: ReactElement, onClick: Callback = Callback.empty, onClickContents: Callback = Callback.empty) =
    component(Props(leftIcon, content, onClick, onClickContents))

  def twoLines(line1: String, line2: String) =
    <.div(
      <.span(line1),
      <.br,
      <.span(
        ^.color := "rgba(0, 0, 0, 0.541176)",
        line2
      )
    )
} 

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

import chandu0101.scalajs.react.components.materialui.{Mui, MuiIconButton}
import japgolly.scalajs.react.vdom.prefix_<^._
import japgolly.scalajs.react.{Callback, ReactComponentB, ReactElement}
import org.rebeam.tree.view.{RCP, View}

import scala.scalajs.js

object ListItemIconButton {

  case class Props(icon: ReactElement, onClick: Callback)

  private val component = ReactComponentB[Props]("ListItemIconButton")
    .render_P(p =>
      <.div(
        ^.margin := "4px 4px",
        MuiIconButton(
          onTouchTap = View.touch(p.onClick),
          touchRippleColor = Mui.Styles.colors.white,
          touchRippleOpacity = 0.5,
          iconStyle = js.Dynamic.literal("color" -> "#FFF")
        )(p.icon)
      )
    ).build

  def apply(icon: ReactElement, onClick: Callback): RCP[Props] = component(Props(icon, onClick))
} 

//设置package包名称以及导入依赖的类
package jp.ne.opt.client

import jp.ne.opt.domain.TodoStore

import scala.scalajs.js.JSApp
import scala.scalajs.js.annotation.JSExport
import japgolly.scalajs.react.{ReactComponentB, ReactDOM}
import japgolly.scalajs.react.vdom.prefix_<^._
import org.scalajs.dom.document

object TutorialApp extends JSApp {
  def main(): Unit = {
    println("helloWorld")
  }

  @JSExport
  def count():Unit = {
    countNumber +=1
    println(countNumber)
  }
  var countNumber: Int = 1

  val Hello =
    ReactComponentB[String]("Hello")
      .render_P(name => <.div(^.id:="hoge","Hello there ", name))
      .build

  ReactDOM.render(Hello("hohohohoho"), document.getElementById("content"))
} 

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

import japgolly.scalajs.react.{ReactComponentB, BackendScope}
import postgresweb.css.CommonStyles
import japgolly.scalajs.react.vdom.prefix_<^._

import scalacss.Defaults._
import scalacss.ScalaCssReact._



    def render(s:State) = {
      <.div(CommonStyles.fullWidth,
        <.div(Styles.textfield,
          <.input(Styles.input),
          <.label(Styles.label, "Title")
        ),
        <.div(Styles.textfield,
          <.input(Styles.input, ^.`type`:= "number"),
          <.label(Styles.label, "Columns")
        ),
        <.div(Styles.textfield,
          <.input(Styles.input, ^.`type`:= "number"),
          <.label(Styles.label, "Rows")
        )
      )
    }
  }

  val component = ReactComponentB[Unit]("FormBuilderComponent")
    .initialState(State(1,1))
    .renderBackend[Backend]
    .buildU


  def apply() = component()


} 

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

import java.time.LocalDate

import scala.scalajs.js.annotation.JSExport
import org.scalajs.dom
import css.StyleStore.MyStyles
import japgolly.scalajs.react.ReactDOM

import scala.scalajs.js.JSApp
import japgolly.scalajs.react.ReactComponentB
import autowire._

import scala.scalajs.concurrent.JSExecutionContext.Implicits.queue
import scalacss.Defaults._
import scalacss.ScalaCssReact._
import scalacss.internal.mutable.GlobalRegistry


@JSExport
object App extends JSApp {

  private val component = ReactComponentB[Unit]("App")
    .render(_ => AppRouter.component())
    .build

  @JSExport
  def main(): Unit = {
    println("-----> in App ClientUser -------")
    MyStyles.addToDocument()
    GlobalRegistry.addToDocumentOnRegistration()
    ReactDOM.render(component(), dom.document.getElementById("mainRootBody"))
  }

} 

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

import scala.scalajs.js.annotation.JSExport
import org.scalajs.dom
import japgolly.scalajs.react.ReactDOM
import scala.scalajs.js.JSApp
import japgolly.scalajs.react.ReactComponentB
import css.StyleStore.MyStyles
import scalacss.Defaults._
import scalacss.ScalaCssReact._
import scalacss.internal.mutable.GlobalRegistry


@JSExport
object App extends JSApp {

  private val component = ReactComponentB[Unit]("App")
    .render(_ => AppRouter.component())
    .build

  @JSExport
  def main(): Unit = {
    println("-----> in App AdminUser -------")
    MyStyles.addToDocument()
    GlobalRegistry.addToDocumentOnRegistration()
    ReactDOM.render(component(), dom.document.getElementById("mainRootBody"))
  }

} 

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

import java.time.LocalDate
import scala.scalajs.js.annotation.JSExport
import org.scalajs.dom
import services.AjaxClient
import shared.services.UserApi
import japgolly.scalajs.react.ReactDOM
import scala.scalajs.js.JSApp
import japgolly.scalajs.react.ReactComponentB
import autowire._
import scala.scalajs.concurrent.JSExecutionContext.Implicits.queue
import scalacss.Defaults._
import scalacss.ScalaCssReact._
import scalacss.internal.mutable.GlobalRegistry


@JSExport
object App extends JSApp {

  private val component = ReactComponentB[Unit]("App")
    .render(_ => AppRouter.component())
    .build

  @JSExport
  def main(): Unit = {
    println("-----> in App BusinessUser -------")
    GlobalRegistry.addToDocumentOnRegistration()
    ReactDOM.render(component(), dom.document.getElementById("mainRootBody"))
  }

} 

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

import japgolly.scalajs.react.vdom.prefix_<^.<
import japgolly.scalajs.react.{BackendScope, Callback, JsComponentM, JsComponentType, JsComponentU, ReactComponentB, ReactComponentU_, ReactNode}
import org.scalajs.dom.raw.HTMLElement

import scala.scalajs.js
import scala.scalajs.js._
import scala.scalajs.js.annotation.JSName

@js.native
trait SampleReactComponentProps extends js.Object {
  def propOne: String = js.native
  def propRwo: String = js.native
}

@js.native
@JSName("SampleReactComponent")
class SampleReactComponent(props: SampleReactComponentProps) extends JsComponentU[SampleReactComponentProps, js.Object, HTMLElement]

object SampleReactComponentProps {
  def apply(propOne: String,
            propTwo: String): SampleReactComponentProps = {
    js.Dynamic.literal(
      propOne = propOne,
      propYwo = propTwo
    ).asInstanceOf[SampleReactComponentProps]
  }
}

object SampleReactComponent {

  //  ,^.style("width: 500; height: 500")
  val component = ReactComponentB[SampleReactComponentProps]("SampleReactComponent")
    .render_P(p => new SampleReactComponent(p))
    .build

  //  val component = ReactComponentB[AceProps]("AceEditor")
  //    //.render(p => new AceEditor(p))
  //    .render_P(p => new AceEditor(p))
  //    .build

  def apply(props: SampleReactComponentProps, children: ReactNode*) = component(props, children: _*)

  def apply() = component

}