Please provide more detailed documentation

[pentool]

trafficstars

I find the current documentation very difficult to decipher. On the demo page you supply various icons using SVG, span element, image, color ratings, fontawesome icons, etc, but you don't provide any sample of how to set these up and how to use them.

Under "properties" there's one called "placeholder" and another called "full". Both has the default value "Style.full" listed. What does that mean? I have to create a style called ".full"? I don't know what they refer to.

I understand that the documentation makes perfect sense to you, but it can be very confusing due to lack of details and samples.

[bytor99999]

I am on the same thing. Have no clue how to change the default icons that are showing. Trying to figure out just how to get the stars like in the demo. I should check to see if the star symbols are in the node_modules directory of this component. It works great, if I could only find out how to change the image it uses.

[bytor99999]

For those that might have the same reaction and come to this issue. This is what I did to get the icons to finally fill in.

We do have a component that we call Icon.jsx which allows us to use Material Icons, so I set a couple vars

let empty = <Icon icon="star_border" style={ styles.icon }/>;
let full = <Icon icon="star" style={ styles.icon }/>

And then assign them to the Rating component

<Rating initialRate={rating}
        onChange={this.updateRating.bind(this)}
        empty={empty}
        full={full}/>

What I saw is happening underneath the code was that what you pass to empty or full is actually looped through N number of times. So the default of 5 rating, by passing this Icon component to empty, it looped 5 times and created the icon 5 times next to each other.

So to also help, here is our Icon component (written with React 0.13)

import Radium from 'radium';
import mergeStyles from 'utils/mergeStyles';

// https://www.google.com/design/icons/ → Icon Font → Copy hex code
const MATERIAL_ICONS = {
  // menu: '\uE5D2',
  // clear: '\uE14C',
  // keyboard_arrow_down: '\uE313',
  // arrow_drop_up: '\uE5C7',
  // arrow_back: '\uE5C4',
  // star: '\uE838',
  // history: '\uE889',
  // search: '\uE8B6'
  // more_vert: '\uE5D4'
  menu: 'menu',
  clear: 'clear',
  keyboard_arrow_down: 'keyboard_arrow_down',
  keyboard_arrow_up: 'keyboard_arrow_up',
  arrow_drop_down: 'arrow_drop_down',
  arrow_drop_up: 'arrow_drop_up',
  arrow_back: 'arrow_back',
  star: 'star',
  history: 'history',
  search: 'search',
  more_vert: 'more_vert',
  apps: 'apps',
  view_module: 'view_module',
  list: 'list',
  add: 'add',
  print: 'print',
  'delete': 'delete',
  cached: 'cached',
  link: 'link',
  content_copy: 'content_copy',
  attachment: 'attachment',
  attach: 'attach_file',
  check: 'check',
  file_upload: 'file_upload',
  import_export: 'import_export',
  gavel: 'gavel',
  receipt: 'receipt',
  work: 'work',
  business_center: 'business center',
  drafts: 'drafts',
  play_arrow: 'play_arrow',
  star_border: 'star_border',
  star: 'star'
};

const SVG_ICONS = {
  'courthouse-grey': 'courthouse-grey'
};

@Radium
export default class Icon extends React.Component {

  render() {
    const { icon, style, ...props } = this.props;
    let payload = null;
    const styles = {
      display: 'inline-block',
      verticalAlign: 'middle'
    };
    if (MATERIAL_ICONS[icon]) {
      payload = (
        <i className="material-icons" {...props} style={ mergeStyles(style, styles) }>
          { this.props.children || MATERIAL_ICONS[icon] }
        </i>
      );
    } else if (SVG_ICONS[icon]) {
      const src = `/img/icons/${SVG_ICONS[icon]}.svg`;
      payload = <img {...props} src={ src } style={ mergeStyles(style, styles) } />;
    }

    if (payload){
      return payload;
    }
  }
}```

[dreyescat]

I migrated the demo page to es6 syntax and added the code used along with the rating element. This is the first step on improving the documentation.