Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Roberto Leibman
    @rleibman
    Number 2: Try the 1.1.0 branch.
    Hamza Rhaiem
    @hamzarhaiem

    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
    Did you see my comment above?
    Hamza Rhaiem
    @hamzarhaiem
    Just did now, you mean i am using the wrong version?
    Roberto Leibman
    @rleibman
    Not wrong, just very old.
    Hamza Rhaiem
    @hamzarhaiem
    Thanks for your response but there's no Stepper demo anywhere :(
    Roberto Leibman
    @rleibman
    Yeah, I've been focusing on SemanticUI, whereas @oyvindberg has worked on MaterialUI... the demos quickly get out of date.
    Hamza Rhaiem
    @hamzarhaiem
    I see, any help with the stepper please? I am trying to follow the React exemple!
    Roberto Leibman
    @rleibman
    Have you had any success with a very simple page? let's say, just a button?
    Hamza Rhaiem
    @hamzarhaiem
    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
    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
    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
    You're saying you don't see anything... any errors on the error console?
    Øyvind Raddum Berg
    @oyvindberg
    I haven't used the steppers at all @hamzarhaiem so I cannot help directly either. What i normally do is to inspect the component with react dev tools (in your browser) to see that the data it gets looks reasonable, and try to compare against javascript demos like @rleibman suggested
    Hamza Rhaiem
    @hamzarhaiem

    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?? :(

    Bijan Chokoufe Nejad
    @bijancn
    sorry, really no idea @hamzarhaiem. Maybe you can open a PR/issue with a minimal test case and we can try to fix it?
    Hamza Rhaiem
    @hamzarhaiem
    @bijancn I am able to find Intl.scala but i can't pass Intl.DateTimeFormat like the JS exemple!
    Øyvind Raddum Berg
    @oyvindberg
    @hamzarhaiem val frDt = "global.Intl.DateTimeFormat".asInstanceOf[js.Function] is wrong, youre passing a string there while it expects a function. Use js.Dynamic.global.Intl.DateTimeFormat.asInstanceOf[js.Function] perhaps
    or rather, if it is already typed up and DateTimeFormat is a class (i havent used this) you could try js.constructorOf[Intl.DateTimeFormat] and cast that
    trepidacious
    @trepidacious
    I was just wondering how the code generation for material-ui facade works? Would be great to be up to date with mui 1.5.0, I was looking at their API docs, and I think they generate them with https://github.com/reactjs/react-docgen
    Which made me think that might be a good place to start for code generation, I tried it out and react-docgen will indeed generate a giant json file with contents very like the API docs, slightly annoyingly it just says "object" in a lot of places, but I was thinking it would be a start
    I guess it is doing a similar thing but with its own parsing, wow that's impressive :)
    Øyvind Raddum Berg
    @oyvindberg
    Yeah, that's how it's currently done. That generator code is now integrated into the main repo
    trepidacious
    @trepidacious
    Ah cool - I was wondering why the facade is behind the current material-ui version, does the generator code work with say 1.5.0?
    Øyvind Raddum Berg
    @oyvindberg
    Nobody has put in the work
    It might be easy to do, depending on how much has changed
    trepidacious
    @trepidacious
    Ah that's cool, I just wanted to check there wasn't some basic incompatibility with the approach
    I'll see if there's anything I can do, would be nice to have the most recent version, it does seem like they've made some improvements
    Did anyone ever look at using the docgen approach, or is the direct JS parsing just better?
    Øyvind Raddum Berg
    @oyvindberg
    Notice that the direct js parsing is really just there to extract the propTypes, then we rewrite those (with some manual typing) to scala.js definitions
    so propTypes and documentation, none of those approaches are optimal
    trepidacious
    @trepidacious
    @oyvindberg Yup it seems like a tricky task... I put up some very basic code based on react-docgen json output here: https://github.com/trepidacious/scalajs-react-material-ui
    It seems to kind of work, no icons or support for sum (oneof) props yet
    One nice thing is it puts the API docs in as scaladocs for the prop parameters
    It processes everything (unless I've missed something) from 1.5.0, I've tried a couple of components and they seem to kind of work ;)
    Øyvind Raddum Berg
    @oyvindberg
    awesome work @trepidacious - react-docgen seems to do all the work of extracting the propTypes, which we parse javascript to do
    trepidacious
    @trepidacious
    @oyvindberg Thanks, I was hoping it would be helpful, I kind of stumbled across it because I was wondering where the material-ui docs came from :)
    Adianto Wibisono
    @wongiseng_twitter
    Question, ReactTable, is there a way to hide pagination total and page size selector?
    I want to keep the search but not the Total and Page Size selector https://imgur.com/a/7u3woln
    Adianto Wibisono
    @wongiseng_twitter
    Or maybe configure the setting bar to be underneath ReactTable?
    Denis Borisenko
    @dborisenko
    Hey guys, just wanted to share my repo https://github.com/dborisenko/scalajs-react-components . I migrated Semantic UI React to the latest version of React (16.7) and scalajs-react (1.3.1, because the upstream repo was quite outdated). And I ported some more components to scalajs-react, which might be useful: React Sortable (HOC), react-trello, STORM React Diagrams, react-markdown, React Syntax Highlighter. My aim was not migrate to the latest version of scalajs-react everything, but migrate only that component which I needed (in particular , only Semantic UI). That is why I dropped a lot of components from my repo and I cannot make PR to the upstream repo. So, if you think, it could be useful, feel free to use.
    Roberto Leibman
    @rleibman
    @dborisenko @here.... I've been really bad. A while ago, we forked the project to create a community project at https://github.com/scalajs-react-components/scalajs-react-components. I have not been able to work on it, though I have made a few changes to some of the semantic-ui things. Anyway, I am about to get back into it. And here are my plans:
    • Full Tech refresh, latest react, latest scala, latest scala.js, latest scalajs-react.
    • Split the project into a number of projects
      • Core and macro
      • Semantic UI
      • Elemental UI
      • Material UI
      • Other wrapper projects
      • Other custom components written in scala (besides the ones already in the repo, I'll add a few of my own)
        I'm going to start with what I have and then try to merge Denis' changes.
        Once it's all done, I'll try to deploy this to the mvn repo, that's already been set up a while ago.
    Roberto Leibman
    @rleibman
    ok, my first step is done, things are compiling under branch 1.1.0, now I continue with the tech refresh.
    Hey... @dborisenko I'd love to work with you to try to figure out what it is you did... I see that you moved things around a lot, but you also removed huge sections of code, including all of MaterialUI and ElementalUI... what time/timezone works for you to talk about it?
    Denis Borisenko
    @dborisenko
    Hi @rleibman, well, yes, I moved around a lot of code. The main reason was to split one monolith project with all possible components to multiple smaller ones. It helps to keep track on dependencies and update only what’s needed. I also changed package names - the original thought was to be able to use monolith scalajs-react-components together with my refactored libraries, but I ended up completely moving away a lot of stuff and refactoring. I also added unit tests to simplify upgrade process. And I dropped some libraries. First of all, I needed only semantic-ui. In second, there are some libraries without any support. I think, elemental-ui doesn’t have react 16 support and I found somewhere that support of that library is discontinued. So, this was, in short, my motivation.
    But we can have a chat. My time zone is CEST (GMT+1)
    Roberto Leibman
    @rleibman
    @dborisenko @trepidacious ... I think I like the idea of multiple sbt projects for different parts, I'm not sure if mono-repo or multi-repo. Either way.... yes, I understand the need to remove those things that cannot work with the latest react. But I know a few people are using material-ui, so I think I'd keep at least that. I myself only use semantic-ui out of this repo, and have a few other components for which I've built manual wrappers. I desperately need a couple of features out of the newer semantic-ui.
    I'm looking to see if there are other options besides this project (ahem... ) and some of 'em look promising and easier to manage and maintain, so I'm holding off from touching all this stuff for a bit.