import Rating from '..';
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <div>
    <p> Enabled </p>
    <Rating
      onChange={val => console.log('change:', val)}
      onHoverChange={val => console.log('hover:', val)}
    />
    <br />
    <br />
    <p> Selected </p>
    <Rating
      defaultValue={3.5}
      onChange={val => console.log('change:', val)}
      onHoverChange={val => console.log('hover:', val)}
    />
    <br />
    <br />
    <p> Half Selected </p>
    <Rating
      defaultValue={3.5}
      allowHalf
      onChange={val => console.log('change:', val)}
      onHoverChange={val => console.log('hover:', val)}
    />
    <br />
    <br />
    <p> Disabled </p>
    <Rating
      defaultValue={2.5}
      disabled
      onChange={val => console.log('change:', val)}
      onHoverChange={val => console.log('hover:', val)}
    />
    <br />
    <br />

    <p> 其他样式 </p>
    <Rating
      defaultValue={3.5}
      shape="favorite"
      allowHalf
      onChange={val => console.log('change:', val)}
      onHoverChange={val => console.log('hover:', val)}
    />
    <br />
    <br />
    <Rating
      defaultValue={3}
      shape="number"
      size="medium"
      allowHalf
      onChange={val => console.log('change:', val)}
      onHoverChange={val => console.log('hover:', val)}
    />

  </div>,
  document.getElementById('rating-demo-1'),
);