I am trying to get the MuiStepper work
val materialui = "0.16.7" // "0.15.1"
val scala = "2.11.11"
val scalajsReactComponents = "0.8.0"
The code below is inspired from this exemple https://codesandbox.io/s/r6401x80o
I am new to React, State, Props, etc
Nothing happend when i call my component :( :(
object ScalaMuiStepper {
def getSteps(): Array[String] = {
Array("Select campaign settings", "Create an ad group", "Create an ad")
}
def getStepContent(step: Int): String = {
step match {
case 0 => "For each ad campaign that you create, you can control how much you're willing to spend on clicks and conversions, which networks and geographical locations you want your ads to show on, and more."
case 1 => "An ad group contains one or more ads which target a shared set of keywords."
case 2 => "Try out different ad text to see what brings in the most customers, and learn how to enhance your ads using features like ad extensions.If you run into any problems with your ads, find out how to tell if they're running and how to resolve approval issues."
case whoa => "Unknown step"
}
}
case class ScalaMuiStepperState(activeStep: Double)
case class ScalaMuiStepperProps()
class Backend(t: BackendScope[ScalaMuiStepperProps, ScalaMuiStepperState]) {
def handleNext: ReactEvent => Callback = e => t.modState(s => s.copy(activeStep = s.activeStep + 1))
def handleBack: ReactEvent => Callback = e => t.modState(s => s.copy(activeStep = s.activeStep - 1))
//to be called later if needed
def handleReset: ReactEvent => Callback = e => t.modState(s => s.copy(activeStep = 0))
def render(state: ScalaMuiStepperState) = {
val steps = getSteps()
<.div(^.id := "ScalaMuiStepper")(
MuiMuiThemeProvider()(
MuiStepper(activeStep = state.activeStep)(
steps.zipWithIndex.map {
case (step, index) =>
MuiStep(key = step, active = index == state.activeStep)(
MuiStepLabel(active = index == state.activeStep, icon = index + 1)(step + index.toString),
MuiStepContent(active = index == state.activeStep)(
getStepContent(index),
<.div()(
MuiRaisedButton(disabled = state.activeStep == 0, onClick = handleBack)("Back"),
MuiRaisedButton(primary = true, onClick = handleNext)("Next")
)
)
)
}
)
)
)
}
}
private val component = ScalaComponent.builder[ScalaMuiStepperProps]("ScalaMuiStepper")
.renderBackend[Backend]
.build
def apply() = {
component(ScalaMuiStepperProps())
}
}
I am trying to localised rhe MuiDatePicker (fr) like this exemple https://v0.material-ui.com/#/components/date-picker
val frDt = "global.Intl.DateTimeFormat".asInstanceOf[js.Function]
MuiDatePicker(
DateTimeFormat = frDt,
locale = "fr",
mode = PortraitLandscape.landscape
)()
And i am having this error..
material_ui-bundle.js:4 Uncaught TypeError: e is not a constructor
at h (material_ui-bundle.js:4)
at material_ui-bundle.js:18
at Array.map (<anonymous>)
at t.value (material_ui-bundle.js:18)
at index-bundle.js:30
at s (index-bundle.js:29)
at g._renderValidatedComponentWithoutOwnerOrContext (index-bundle.js:30)
at g._renderValidatedComponent (index-bundle.js:30)
at g.performInitialMount (index-bundle.js:30)
at g.mountComponent (index-bundle.js:29)
Any help please?? :(
DateTimeFormat
is a class (i havent used this) you could try js.constructorOf[Intl.DateTimeFormat]
and cast that
as='random'
stuff might be hard though