[add] add component rating

README.md

@@ -15,6 +15,7 @@ A series of commonly used react-native components.
 |[icon](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Icon)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/icon.svg)](https://www.npmjs.com/package/@rn-components-kit/icon)|
 |[progress](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Progress)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/progress.svg)](https://www.npmjs.com/package/@rn-components-kit/progress)|
 |[radio](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Radio)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/radio.svg)](https://www.npmjs.com/package/@rn-components-kit/radio)|
+|[rating](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Rating)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/rating.svg)](https://www.npmjs.com/package/@rn-components-kit/rating)|
 |[scroll-picker](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/ScrollPicker)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/scroll-picker.svg)](https://www.npmjs.com/package/@rn-components-kit/scroll-picker)|
 |[skeleton](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Skeleton)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/skeleton.svg)](https://www.npmjs.com/package/@rn-components-kit/skeleton)|
 |[slider](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Slider)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/slider.svg)](https://www.npmjs.com/package/@rn-components-kit/slider)|

README.zh-CN.md

@@ -15,6 +15,7 @@
 |[icon](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Icon/README.zh-CN.md)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/icon.svg)](https://www.npmjs.com/package/@rn-components-kit/icon)|
 |[progress](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Progress/README.zh-CN.md)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/progress.svg)](https://www.npmjs.com/package/@rn-components-kit/progress)|
 |[radio](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Radio/README.zh-CN.md)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/radio.svg)](https://www.npmjs.com/package/@rn-components-kit/radio)|
+|[rating](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Rating/README.zh-CN.md)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/rating.svg)](https://www.npmjs.com/package/@rn-components-kit/rating)|
 |[scroll-picker](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/ScrollPicker/README.zh-CN.md)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/scroll-picker.svg)](https://www.npmjs.com/package/@rn-components-kit/scroll-picker)|
 |[skeleton](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Skeleton/README.zh-CN.md)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/skeleton.svg)](https://www.npmjs.com/package/@rn-components-kit/skeleton)|
 |[slider](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Slider/README.zh-CN.md)|[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/slider.svg)](https://www.npmjs.com/package/@rn-components-kit/slider)|

example/App.js

@@ -16,6 +16,7 @@ import * as IconDemos from '../packages/Icon/demos/index';
 import * as SpinDemos from '../packages/Spin/demos/index';
 import * as BadgeDemos from '../packages/Badge/demos/index';
 import * as RadioDemos from '../packages/Radio/demos/index';
+import * as RatingDemos from '../packages/Rating/demos/index';
 import * as SliderDemos from '../packages/Slider/demos/index';
 import * as SwitchDemos from '../packages/Switch/demos/index';
 import * as DividerDemos from '../packages/Divider/demos/index';
@@ -95,6 +96,14 @@ const APP_DATA = [
       {title: 'Three Animation Types', component: RadioDemos.Demo4},
     ]
   },
+  {
+    title: 'Rating',
+    demos: [
+      {title: 'Basic Usage', component: RatingDemos.Demo1},
+      {title: 'Customize Icon (type, color, size)', component: RatingDemos.Demo2},
+      {title: 'Different Step', component: RatingDemos.Demo3},
+    ]
+  },
   {
     title: 'ScrollPicker',
     demos: [

packages/Rating/.npmignore

@@ -0,0 +1,3 @@
+demos/
+preview/
+node_modules/

packages/Rating/README.md

@@ -0,0 +1,142 @@
+# Rating
+
+[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/rating.svg)](https://www.npmjs.com/package/@rn-components-kit/rating)
+
+English | [中文](./README.zh-CN.md)
+
+Ratings are used to collect measurable feedback from users. It supports the following features:
+
+- `touch` and `move` operation
+- customized active/inactive icon (`type`, `color`, `size`)
+- different step values (e.g. 0.1/0.2/0.5/1)
+
+## How to use
+
+```bash
+npm install @rn-components-kit/rating --save
+```
+
+|Preview|Code|
+|------------|:---------:|
+|<img width="375" src="./preview/basic-usage.gif"/>|[Demo1 Code](./demos/Demo1.js)|
+|<img width="375" src="./preview/customized-icon.gif"/>|[Demo2 Code](./demos/Demo2.js)|
+|<img width="375" src="./preview/different-step.gif"/>|[Demo3 Code](./demos/Demo3.js)|
+
+## Props
+
+- [`style`](#style)
+- [`step`](#step)
+- [`total`](#total)
+- [`value`](#value)
+- [`iconGap`](#iconGap)
+- [`iconSize`](#iconSize)
+- [`disabled`](#disabled)
+- [`activeIconType`](#activeIconType)
+- [`activeIconColor`](#activeIconColor)
+- [`inActiveIconType`](#inActiveIconType)
+- [`inActiveIconColor`](#inActiveIconColor)
+- [`onValueChange`](#onValueChange)
+
+## Reference
+
+### Props
+
+#### `style`
+
+Allows you to customize style
+
+|Type|Required|Default|
+|----|--------|-------|
+|object|no|-|
+
+#### `step`
+
+The granularity that Rating can step through values
+
+|Type|Required|Default|
+|----|--------|-------|
+|enum(`0.1`, `0.2`, `0.5`, `1`)|no|1|
+
+#### `total`
+
+Count of star
+
+|Type|Required|Default|
+|----|--------|-------|
+|number|no|5|
+
+#### `value`
+
+Current count of active star
+
+|Type|Required|Default|
+|----|--------|-------|
+|number|no|0|
+
+#### `iconGap`
+
+Space between stars
+
+|Type|Required|Default|
+|----|--------|-------|
+|number|no|4|
+
+#### `iconSize`
+
+Size of star icon
+
+|Type|Required|Default|
+|----|--------|-------|
+|number|no|20|
+
+#### `disabled`
+
+Determines whether value can be changed
+
+|Type|Required|Default|
+|----|--------|-------|
+|boolean|no|false|
+
+#### `activeIconType`
+
+Icon type when it is active
+
+|Type|Required|Default|
+|----|--------|-------|
+|[enum value](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Icon)|no|'star-fill'|
+
+#### `activeIconColor`
+
+Icon color when it is active
+
+|Type|Required|Default|
+|----|--------|-------|
+|string|no|'#FADB14'|
+
+#### `inActiveIconType`
+
+Icon type when it is inactive
+
+|Type|Required|Default|
+|----|--------|-------|
+|[enum value](https://github.com/SmallStoneSK/rn-components-kit/tree/master/packages/Icon)|no|'star-fill'|
+
+#### `inActiveIconColor`
+
+Icon color when it is inactive
+
+|Type|Required|Default|
+|----|--------|-------|
+|string|no|'#E8E8E8'|
+
+#### `onValueChange`
+
+```js
+(value: number) => void
+```
+
+A callback will be triggered when Rating's value changes
+
+|Type|Required|Default|
+|----|--------|-------|
+|function|no|() => {}|

packages/Rating/README.zh-CN.md

@@ -0,0 +1,142 @@
+# Rating
+
+[![NPM version](https://img.shields.io/npm/v/@rn-components-kit/rating.svg)](https://www.npmjs.com/package/@rn-components-kit/rating)
+
+[English](./README.md) | 中文
+
+评分组件，支持以下特性：
+
+- 支持`点选`和`滑动`操作进行评分
+- 自定义图标样式（包括`类型`，`颜色`，`大小`）
+- 支持不同的滑动步长（例如：0.1/0.2/0.5/1）
+
+## 使用
+
+```bash
+npm install @rn-components-kit/rating --save
+```
+
+|预览|代码|
+|------------|:---------:|
+|<img width="375" src="./preview/basic-usage.gif"/>|[Demo1 Code](./demos/Demo1.js)|
+|<img width="375" src="./preview/customized-icon.gif"/>|[Demo2 Code](./demos/Demo2.js)|
+|<img width="375" src="./preview/different-step.gif"/>|[Demo3 Code](./demos/Demo3.js)|
+
+## Props
+
+- [`style`](#style)
+- [`step`](#step)
+- [`total`](#total)
+- [`value`](#value)
+- [`iconGap`](#iconGap)
+- [`iconSize`](#iconSize)
+- [`disabled`](#disabled)
+- [`activeIconType`](#activeIconType)
+- [`activeIconColor`](#activeIconColor)
+- [`inActiveIconType`](#inActiveIconType)
+- [`inActiveIconColor`](#inActiveIconColor)
+- [`onValueChange`](#onValueChange)
+
+## 文档
+
+### Props
+
+#### `style`
+
+自定义样式
+
+|类型|必填|默认值|
+|----|--------|-------|
+|object|否|-|
+
+#### `step`
+
+评分组件每滑动一格增长的分数
+
+|类型|必填|默认值|
+|----|--------|-------|
+|枚举值(`0.1`, `0.2`, `0.5`, `1`)|否|1|
+
+#### `total`
+
+星星总数
+
+|类型|必填|默认值|
+|----|--------|-------|
+|number|否|5|
+
+#### `value`
+
+当前值（与高亮的星星数量相对应）
+
+|类型|必填|默认值|
+|----|--------|-------|
+|number|否|0|
+
+#### `iconGap`
+
+星星之间的间隙距离
+
+|类型|必填|默认值|
+|----|--------|-------|
+|number|否|4|
+
+#### `iconSize`
+
+星星的大小
+
+|类型|必填|默认值|
+|----|--------|-------|
+|number|否|20|
+
+#### `disabled`
+
+`点选`和`滑动`评分操作是否禁用
+
+|类型|必填|默认值|
+|----|--------|-------|
+|boolean|否|false|
+
+#### `activeIconType`
+
+高亮星星图标类型
+
+|类型|必填|默认值|
+|----|--------|-------|
+|[枚举值](https://github.com/SmallStoneSK/rn-components-kit/blob/master/packages/Icon/README.zh-CN.md)|否|'star-fill'|
+
+#### `activeIconColor`
+
+高亮星星图标颜色
+
+|类型|必填|默认值|
+|----|--------|-------|
+|string|否|'#FADB14'|
+
+#### `inActiveIconType`
+
+未高亮星星图标类型
+
+|类型|必填|默认值|
+|----|--------|-------|
+|[枚举值](https://github.com/SmallStoneSK/rn-components-kit/blob/master/packages/Icon/README.zh-CN.md)|否|'star-fill'|
+
+#### `inActiveIconColor`
+
+未高亮星星图标颜色
+
+|类型|必填|默认值|
+|----|--------|-------|
+|string|否|'#E8E8E8'|
+
+#### `onValueChange`
+
+```js
+(value: number) => void
+```
+
+当评分值发生变化时，会触发该回调函数
+
+|类型|必填|默认值|
+|----|--------|-------|
+|function|否|() => {}|

packages/Rating/demos/Demo1.js

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import {
+  View,
+  Text,
+  StyleSheet
+} from 'react-native';
+
+import {Rating} from '../index';
+
+export class Demo1 extends React.PureComponent {
+
+  state = {score: 2};
+
+  onValueChange = newValue => this.setState({score: newValue})
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.titleText}>Score: {this.state.score}</Text>
+        <Rating value={2} onValueChange={this.onValueChange}/>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 15
+  },
+  titleText: {
+    marginBottom: 15,
+    fontSize: 18,
+    color: '#333',
+    textAlign: 'center'
+  }
+});