Call stack exceeded. Better way to import the star SVGs

[Todd Medema]

@lawrentiy thanks so much for making this module! Came across a nasty bug when building this with Cordova for iOS that took a long time to hunt down and solve, thought I'd share the findings

The error was that the the maximum call stack size is exceeded, but only on iOS 10 devices.

Turns out, it was import {ToggleStarBorder, ToggleStar} from 'material-ui/svg-icons';

I switched to a different way of importing, and it works again:

import Star from 'material-ui/svg-icons/toggle/star'
import StarBorder from 'material-ui/svg-icons/toggle/star-border'

Full code (modified + streamlined):

import * as React from 'react'
import FlatButton from 'material-ui/FlatButton'
import {colors} from 'material-ui/styles'
import Star from 'material-ui/svg-icons/toggle/star'
import StarBorder from 'material-ui/svg-icons/toggle/star-border'

export interface StarRatingProps {
  hintText?: boolean;
  onChange: (rating: number) => any;
  readOnly?: boolean;
  style?: any;
  value?: number;
}

export default class StarRating extends React.Component<StarRatingProps, {}> {
  render() {
    const ratings = [null, 'Hated it', 'Disliked it', 'It\'s OK', 'Liked it', 'Loved it'];
    const stars = [1,2,3,4,5].map((i: number): JSX.Element => {
      const onClick = this.props.readOnly ? undefined : this.props.onChange.bind(this, i);
      const checked = (i <= this.props.value);
      let classes = 'star';
      if (!this.props.readOnly) classes += ' editable';
      if (checked) { classes += ' filled'; }
      else { classes += ' outline'; }

      return <div className={classes}>
        <FlatButton key={i} onTouchTap={() => { this.props.onChange(i) }}>
          {checked && <Star  color={colors.grey900} />}
          {!checked && <StarBorder color={colors.grey600} />}
        </FlatButton>
      </div>;
    });
    return (<div className="starContainer" style={this.props.style}>
      {stars}
      {this.props.hintText && <div className="hint">{ratings[this.props.value]}</div>}
    </div>);
  }
}

[Pavel]

Ops, I miss that comment. My excuse for that.