From 584f8c0a2748f150f67cd1d22e82fa1c00a122b6 Mon Sep 17 00:00:00 2001
From: Maks <Sam1812@yandex.ru>
Date: Tue, 1 Nov 2016 09:11:28 +0300
Subject: [PATCH 1/2] Rating

---
 src/Rating/Rating.jsx | 117 ++++++++++++++++++++++++++++++++++++++++++
 src/Rating/Rating.md  |  10 ++++
 src/Rating/index.js   |   1 +
 src/Rating/story.jsx  |   8 +++
 4 files changed, 136 insertions(+)
 create mode 100644 src/Rating/Rating.jsx
 create mode 100644 src/Rating/Rating.md
 create mode 100644 src/Rating/index.js
 create mode 100644 src/Rating/story.jsx

diff --git a/src/Rating/Rating.jsx b/src/Rating/Rating.jsx
new file mode 100644
index 0000000..3c84f0e
--- /dev/null
+++ b/src/Rating/Rating.jsx
@@ -0,0 +1,117 @@
+'use strict';
+
+import React, {PropTypes} from 'react';
+
+import Icon from '../FontIcon';
+
+import { StyleSheet, css } from '../helpers/styles';
+
+class Rating extends React.Component {
+    static propTypes = {
+        /**
+         * Current Rate
+         */
+        currentRate: PropTypes.oneOf([0, 1, 2, 3, 4, 5]),
+        /**
+         * Rating stars size
+         */
+        size: PropTypes.oneOf([
+            's',
+            'l'
+        ]),
+        /**
+         * On change event handler
+         */
+        onChange: PropTypes.func,
+        /**
+         * is rating choice active
+         */
+        active: PropTypes.bool
+    };
+
+    static defaultProps = {
+        rate: 0,
+        size: 's',
+        active: true
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            hoveredRate: null
+        };
+    };
+
+    onStarMouseEnter(rate) {
+        this.props.active && this.setState({ hoveredRate: rate });
+    };
+
+    onStarMouseLeave() {
+        this.props.active && this.setState({ hoveredRate: null });
+    };
+
+    onStarClick(rate) {
+        this.props.active &&  rate !== this.props.currentRate && this.props.onChange && this.props.onChange(rate);
+    };
+
+    renderStars() {
+
+        return [1, 2, 3, 4, 5].map((rate, idx) => {
+            const shownRate = this.state.hoveredRate ? this.state.hoveredRate : this.props.currentRate;
+            return (
+                <Icon
+                    key={idx}
+                    name={rate < shownRate + 1 ? 'star' : 'star-o'}
+                    className={css(
+                        STYLE.iconBase,
+                        this.props.active && STYLE.iconActive,
+                        (rate < shownRate + 1) && STYLE.iconChecked
+                    )}
+                    onMouseEnter={this.onStarMouseEnter.bind(this, rate)}
+                    onMouseLeave={this.onStarMouseLeave.bind(this)}
+                    onClick={this.onStarClick.bind(this, rate)}
+                    />
+            );
+        });
+    };
+
+    render() {
+        return (
+            <div className={css(
+                STYLE.base,
+                STYLE.getPreset('size', this.props.size),
+                STYLE.iconNotChecked
+            )}
+            >{this.renderStars()}</div>
+        );
+    }
+}
+
+const STYLE = StyleSheet.create({
+    base: {
+        display: 'inline-block'
+    },
+    sizeS: {
+        fontSize: '.55rem',
+        lineHeight: '.6rem'
+    },
+    sizeL: {
+        fontSize: '1.1rem',
+        lineHeight: '1rem'
+    },
+    iconBase: {
+        verticalAlign: 'middle',
+        paddingRight: '2px'
+    },
+    iconNotChecked: {
+        color: '#8f989c'
+    },
+    iconChecked: {
+        color: '#8cc451'
+    },
+    iconActive: {
+        cursor: 'pointer'
+    }
+});
+
+export default Rating;
diff --git a/src/Rating/Rating.md b/src/Rating/Rating.md
new file mode 100644
index 0000000..893e9c2
--- /dev/null
+++ b/src/Rating/Rating.md
@@ -0,0 +1,10 @@
+### Usage
+
+```js
+import Rating from '@roistat/ui/lib/Rating';
+```
+
+Rating
+
+    <Rating size='l' currentRate={2} />
+
diff --git a/src/Rating/index.js b/src/Rating/index.js
new file mode 100644
index 0000000..ca28cbe
--- /dev/null
+++ b/src/Rating/index.js
@@ -0,0 +1 @@
+export { default } from './Rating';
\ No newline at end of file
diff --git a/src/Rating/story.jsx b/src/Rating/story.jsx
new file mode 100644
index 0000000..1eb109f
--- /dev/null
+++ b/src/Rating/story.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import Rating from './Rating';
+
+storiesOf('Rating', module)
+    .addWithInfo('Rating', 'Rating', () => (
+        <Rating size='l' currentRate={2} />
+    ));

From f0b4153d3f9f35a9b5014586ab96c029f00de932 Mon Sep 17 00:00:00 2001
From: Maks <Sam1812@yandex.ru>
Date: Tue, 1 Nov 2016 09:12:59 +0300
Subject: [PATCH 2/2] Rating

---
 src/Rating/Rating.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Rating/Rating.jsx b/src/Rating/Rating.jsx
index 3c84f0e..3a68930 100644
--- a/src/Rating/Rating.jsx
+++ b/src/Rating/Rating.jsx
@@ -70,7 +70,7 @@ class Rating extends React.Component {
                     onMouseEnter={this.onStarMouseEnter.bind(this, rate)}
                     onMouseLeave={this.onStarMouseLeave.bind(this)}
                     onClick={this.onStarClick.bind(this, rate)}
-                    />
+                />
             );
         });
     };