These are chat archives for chandu0101/scalajs-react-components

14th
Jun 2018
Roberto Leibman
@rleibman
Jun 14 2018 15:42
I'm sorry, I have not had the time or the patience to release the latest and greatest version of the library... so:
Number 2: Try the 1.1.0 branch.
Hamza Rhaiem
@hamzarhaiem
Jun 14 2018 15:49

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())
  }
}
Roberto Leibman
@rleibman
Jun 14 2018 15:50
Did you see my comment above?
Hamza Rhaiem
@hamzarhaiem
Jun 14 2018 16:04
Just did now, you mean i am using the wrong version?
Roberto Leibman
@rleibman
Jun 14 2018 16:04
Not wrong, just very old.
Hamza Rhaiem
@hamzarhaiem
Jun 14 2018 16:05
Thanks for your response but there's no Stepper demo anywhere :(
Roberto Leibman
@rleibman
Jun 14 2018 16:06
Yeah, I've been focusing on SemanticUI, whereas @oyvindberg has worked on MaterialUI... the demos quickly get out of date.
Hamza Rhaiem
@hamzarhaiem
Jun 14 2018 16:07
I see, any help with the stepper please? I am trying to follow the React exemple!
Roberto Leibman
@rleibman
Jun 14 2018 16:08
Have you had any success with a very simple page? let's say, just a button?
Hamza Rhaiem
@hamzarhaiem
Jun 14 2018 16:34
Yes i successfully integrated mui with scalajs, it's just the stepper that i can't find any exemple on the internet! :(
Roberto Leibman
@rleibman
Jun 14 2018 16:39
Did you look through the plain js demos? e.g. https://material-ui.com/demos/steppers/ I've found that it's not that hard to convert from that to scala js.
Hamza Rhaiem
@hamzarhaiem
Jun 14 2018 16:43
That's what i am already doing with this https://codesandbox.io/s/r6401x80o but i am facing difficltues with it as you can see!
Roberto Leibman
@rleibman
Jun 14 2018 16:59
You're saying you don't see anything... any errors on the error console?