fix resolving ReactComponentElement children

[azazdeaz]

Currently Radium resolves all the childrens of the enhanced element which can lead to some unexpected behavior and affect the performance badly.
ex:

<MyRadiumComponent>
  <ThirdPartyComponent/>
  <div/>
</MyRadiumComponent>

The ThirdPartyComponent and it's children will be resolved, not just the div

<MyRadiumComponent>
  <MyRadiumComponent>
    <MyRadiumComponent/>
  </MyRadiumComponent>
</MyRadiumComponent>

The inner MyRadiumComponent-s will be added to the resolveStyles() multiple times.

I added a failing test for this and a possible fix which is only resolve ReactDOMElement-s when it recurse over the children in the resolveStyles() and skips the `ReactComponentElement``-s.

[ianobermiller]

Instead of the extra closure, which I find a bit hard to follow, let's just invert this check and return early from resolveStyles directly after the children resolution:

if (!React.isValidElement(renderedElement) || typeof renderedElement.type !== 'string') {
  return renderedElement;
}

The check must come after child resolution because you could pass dom elements as children of custom components, and you'd want them to get resolved correctly. Please add a test like the following:

var renderedElement = (
  <div>
    <CustomComponent style={style}>
      <div style={style} />
    </CustomComponent>
  </div>
);

Also, once you add the check, you can remove it from inside the callback in React.Children.map.

[azazdeaz]

@ianobermiller You're right! I added the changes, what do you think?

[ianobermiller]

if it doesn't fit on one line in 80 chars or so, drop each param to its own line

[ianobermiller]

We can clean that up another time, I'll probably make a refactoring pass at resolveStyles in the future.