react-native-stars-rating
Version:
react-native stars rating component
190 lines (130 loc) • 7.69 kB
JavaScript
Object.defineProperty(exports,"__esModule",{value:true});var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();
var _react=require('react');var _react2=_interopRequireDefault(_react);
var _reactNative=require('react-native');
var _classAutobind=require('class-autobind');var _classAutobind2=_interopRequireDefault(_classAutobind);
var _MaterialIcons=require('react-native-vector-icons/MaterialIcons');var _MaterialIcons2=_interopRequireDefault(_MaterialIcons);
var _StarsStyle=require('./Stars-style');var _StarsStyle2=_interopRequireDefault(_StarsStyle);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}var
Stars=function(_Component){_inherits(Stars,_Component);
function Stars(){_classCallCheck(this,Stars);var _this=_possibleConstructorReturn(this,(Stars.__proto__||Object.getPrototypeOf(Stars)).apply(this,
arguments));
(0,_classAutobind2.default)(_this);var
rounding=_this.props.rounding;
_this.state={
activeIndex:_this.props.rate===0?
1:
rounding==='up'?
Math.round(_this.props.rate*2)/2:
Math.floor(_this.props.rate*2)/2};return _this;
}_createClass(Stars,[{key:'_changeActiveIndex',value:function _changeActiveIndex(
i){var _props=
this.props,onStarPress=_props.onStarPress,isHalfStarEnabled=_props.isHalfStarEnabled;
onStarPress?onStarPress(isHalfStarEnabled?i/2:i):null;
this.setState({
activeIndex:isHalfStarEnabled?i/2:i});
}},{key:'render',value:function render()
{var _this2=this;var _props2=
this.props,size=_props2.size,color=_props2.color,rateMax=_props2.rateMax,isActive=_props2.isActive,isHalfStarEnabled=_props2.isHalfStarEnabled;
var customSize=null;
var starCustomStyle=null;
var stars=[];
var starShape='';
if(isHalfStarEnabled){
if(size!=null){
customSize={
width:size/2,
height:size};
starCustomStyle={
fontSize:size,
color:color?color:'#EEB211'};
}else{
starCustomStyle={
color:color?color:'#EEB211'};
}
var rateCount=this.state.activeIndex*2;
var currIndex=0;
var extraStyle={
left:size?size*-1:-20};var _loop=function _loop(
i){
if(i%2===0){
currIndex=i;
starShape='star';
stars.push(
_react2.default.createElement(_reactNative.View,{key:i,style:[_StarsStyle2.default.starsWrapper,size?{width:size,height:size}:{}]},
_react2.default.createElement(_MaterialIcons2.default,{
name:starShape,
style:[_StarsStyle2.default.starIcon,starCustomStyle]}),
_react2.default.createElement(_reactNative.TouchableWithoutFeedback,{
onPress:function onPress(){return isActive?_this2._changeActiveIndex(i-1):{};}},
_react2.default.createElement(_reactNative.View,{style:[_StarsStyle2.default.starLogicalPixel,customSize,extraStyle]})),
_react2.default.createElement(_reactNative.TouchableWithoutFeedback,{
onPress:function onPress(){return isActive?_this2._changeActiveIndex(i):{};}},
_react2.default.createElement(_reactNative.View,{style:[_StarsStyle2.default.starLogicalPixel,customSize,extraStyle]}))));
}else if(i===rateCount){
currIndex=i+1;
starShape='star-half';
stars.push(
_react2.default.createElement(_reactNative.View,{key:i,style:[_StarsStyle2.default.starsWrapper,size?{width:size,height:size}:{}]},
_react2.default.createElement(_MaterialIcons2.default,{
name:starShape,
style:[_StarsStyle2.default.starIcon,starCustomStyle]}),
_react2.default.createElement(_reactNative.TouchableWithoutFeedback,{
onPress:function onPress(){return isActive?_this2._changeActiveIndex(i):{};}},
_react2.default.createElement(_reactNative.View,{style:[_StarsStyle2.default.starLogicalPixel,customSize,extraStyle]})),
_react2.default.createElement(_reactNative.TouchableWithoutFeedback,{
onPress:function onPress(){return isActive?_this2._changeActiveIndex(i+1):{};}},
_react2.default.createElement(_reactNative.View,{style:[_StarsStyle2.default.starLogicalPixel,customSize,extraStyle]}))));
}};for(var i=1;i<=rateCount;i++){_loop(i);
}
var maxRateCount=rateMax*2;var _loop2=function _loop2(
i){
if(i%2===0){
stars.push(
_react2.default.createElement(_reactNative.View,{key:i,style:[_StarsStyle2.default.starsWrapper,size?{width:size,height:size}:{}]},
_react2.default.createElement(_MaterialIcons2.default,{
name:'star-border',
style:[_StarsStyle2.default.starIcon,starCustomStyle]}),
_react2.default.createElement(_reactNative.TouchableWithoutFeedback,{
onPress:function onPress(){return isActive?_this2._changeActiveIndex(i-1):{};}},
_react2.default.createElement(_reactNative.View,{style:[_StarsStyle2.default.starLogicalPixel,customSize,extraStyle]})),
_react2.default.createElement(_reactNative.TouchableWithoutFeedback,{
onPress:function onPress(){return isActive?_this2._changeActiveIndex(i):{};}},
_react2.default.createElement(_reactNative.View,{style:[_StarsStyle2.default.starLogicalPixel,customSize,extraStyle]}))));
}};for(var i=currIndex+1;i<=maxRateCount;i++){_loop2(i);
}
}else{
if(size!=null){
customSize={
width:size,
height:size};
starCustomStyle={
fontSize:size,
color:color?color:'#EEB211'};
}
var _extraStyle={
left:size?size*-1:-20};
var _currIndex=this.state.activeIndex;var _loop3=function _loop3(
i){
starShape='star';
stars.push(
_react2.default.createElement(_reactNative.View,{key:i,style:[_StarsStyle2.default.starsWrapper,customSize]},
_react2.default.createElement(_MaterialIcons2.default,{
name:starShape,
style:[_StarsStyle2.default.starIcon,starCustomStyle]}),
_react2.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:function onPress(){return isActive?_this2._changeActiveIndex(i):null;}},
_react2.default.createElement(_reactNative.View,{style:[_StarsStyle2.default.starFullLogicalPixel,customSize,_extraStyle]}))));};for(var i=1;i<=_currIndex;i++){_loop3(i);
}var _loop4=function _loop4(
i){
starShape='star-border';
stars.push(
_react2.default.createElement(_reactNative.View,{key:i,style:[_StarsStyle2.default.starsWrapper,customSize]},
_react2.default.createElement(_MaterialIcons2.default,{
name:starShape,
style:[_StarsStyle2.default.starIcon,starCustomStyle]}),
_react2.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:function onPress(){return isActive?_this2._changeActiveIndex(i):null;}},
_react2.default.createElement(_reactNative.View,{style:[_StarsStyle2.default.starFullLogicalPixel,customSize,_extraStyle]}))));};for(var i=_currIndex+1;i<=rateMax;i++){_loop4(i);
}
}
return(
_react2.default.createElement(_reactNative.View,{style:{flexDirection:'row'}},
stars));
}}]);return Stars;}(_react.Component);exports.default=Stars;