[AppBar] Remove style-propable mixin

[newoga]

Signed-off-by: Neil Gabbadon [email protected]

[alitaheri]

@newoga I have a proposal for these things:

What if we do this like:

// imports ...

const styles = {
  mainElement: { // this will always be the same instance forever!
    boxFlex: 1,
    flex: '1',
  },
  root: (someProp, otherProp) => ({ // this can be memoized later on with ease
    // calculate according to only two props, only recalculate if any of the props change
  }),
  title: (theme) => ({ // this can be initiated once per theme.
    // calculate according to theme, only recalculate if theme changes.
  }),
  // ...
};

// the component

This is only for discussion. if you guys think this is worth a discussion I'll open an issue for it.

@newoga @oliviertassinari @mbrookes

[oliviertassinari]

What about flattening style and iconStyle?

[newoga]

Yeah I would prefer that too 👍 I'll give it a go, thanks!

[newoga]

This is only for discussion. if you guys think this is worth a discussion I'll open an issue for it.

Sure, open an issue up 😁! I also was wondering if an approach like that was possible but I hadn't fully conceptualized and tried anything yet. 👍

[newoga]

Done, flattened iconButton.style and iconButton.iconStyle to root level, and switch setState to nextContext.muiTheme || this.state.muiTheme.

[oliviertassinari]

That looks good. @alitaheri Feel free to merge 👍

[alitaheri]

Thanks a lot, this is looking good 👍 😍

[alitaheri]

Sure, open an issue up 😁! I also was wondering if an approach like that was possible but I hadn't fully conceptualized and tried anything yet. 👍

@newoga Actually I rather investigate further. it's not so straight forward. Since we should also support SSR, we'll have some issues we have to handle properly. so I might even build my own package for this. It's gonna need a bit work and thought. I'll get back to you guys when I think of something 😄

[oliviertassinari]

@alitaheri That's an interesting proposal and doesn't seem to be linked to the style approach we follow. For instance I think that it would work with css classname. Well, in this case it would be overkill 😁.

[alitaheri]

@oliviertassinari No i won't go for what I purposed up there. I'm thinking more of a HOC that passes down styles if they change. this means the calculated styles will only be passed down if they change and if they don't change the render will stop. if they change only the changed styles will be new instances not every one of them. I still haven't figured out how to achieve this. But i think this is necessary. I'll probably create a repository for it with lots of tests for it before getting back to you.

[oliviertassinari]

@alitaheri I love this idea. That would make our component unstyled by default 😍.

[alitaheri]

Thanks ^_^ I'm gonna think of something soon, stay tuned 😆 😆

[newoga]

@alitaheri Good luck with that! I had a very similar idea when I thought of moving the getStyles() function out. I look forward to see what you come up with 😁 By the way, maybe you could use https://github.com/rackt/reselect as an inspiration. My recent work with that lib made me wonder if we should move toward this approach 😁

[alitaheri]

@newoga I actually use reselect in my application. That's where I understood what memoization what 😁 So I'll use that as a reference for sure 👍