You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
1.8 KiB
58 lines
1.8 KiB
package com.example.playscalajsreact.component
|
|
|
|
import com.example.playscalajsreact.model.MyGlobalState
|
|
import japgolly.scalajs.react.vdom.VdomElement
|
|
import japgolly.scalajs.react.Callback
|
|
import japgolly.scalajs.react._
|
|
import japgolly.scalajs.react.vdom.html_<^._
|
|
import com.example.playscalajsreact.route.AppRouter
|
|
import org.scalajs.dom
|
|
import scala.scalajs.js
|
|
import com.example.playscalajsreact.model.User
|
|
import japgolly.scalajs.react.extra.StateSnapshot
|
|
import com.softwaremill.quicklens._
|
|
import monocle.macros.Lenses
|
|
import com.example.playscalajsreact.model._
|
|
import japgolly.scalajs.react.MonocleReact._
|
|
|
|
object Middle {
|
|
|
|
final case class Props(name: String, ss: StateSnapshot[Data]) {
|
|
@inline def render: VdomElement = Comp(this)
|
|
}
|
|
|
|
implicit def reusability: Reusability[Props] =
|
|
Reusability.derive
|
|
|
|
final class Backend($ : BackendScope[Props, Unit]) {
|
|
|
|
// Method 2: StateSnapshot.withReuse.zoomL.prepareViaProps
|
|
// Notice that we're using a normal lens here instead of a Reusable[lens]
|
|
private val ssStrFn =
|
|
StateSnapshot.withReuse.zoomL(Data.str).prepareViaProps($)(_.ss)
|
|
|
|
def render(p: Props): VdomElement = {
|
|
|
|
// Method 1: ss.withReuse.zoomStateL
|
|
val ssI: StateSnapshot[Int] = p.ss.zoomStateL(Data.reusableLens.int)
|
|
|
|
// Method 2: StateSnapshot.withReuse.zoomL.prepareViaProps
|
|
val ssS: StateSnapshot[String] =
|
|
ssStrFn(p.ss.value)
|
|
|
|
<.div(
|
|
<.h3(p.name, "hello"),
|
|
<.div("IntEditor: ", IntEditor(ssI))
|
|
// <.div("TextEditor: ", TextEditor(ssS), ^.marginTop := "0.6em"))
|
|
)
|
|
}
|
|
}
|
|
|
|
val Comp = ScalaComponent
|
|
.builder[Props]
|
|
.renderBackend[Backend]
|
|
.configure(Reusability.shouldComponentUpdate)
|
|
.build
|
|
|
|
def apply(_props: Props): VdomElement = { Comp(_props) }
|
|
}
|