The react-material-ui-rating from lawrentiy

react-material-ui-rating's People

Contributors

Stargazers

Watchers

react-material-ui-rating's Issues

Call stack exceeded. Better way to import the star SVGs

@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>);
  }
}