Skip to content

React Stars cleanup #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kayluhb wants to merge 8 commits into
base: master
Choose a base branch
from
Open

React Stars cleanup #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b51f76b
Update the library.
kayluhb Aug 3, 2017
7900158
Update the library.
kayluhb Aug 3, 2017
aa253f8
Remove semicolons
kayluhb Aug 4, 2017
664879d
Updated to be more consistent with forked package settings
kayluhb Aug 4, 2017
83d6b84
remove two hanging commas
kayluhb Aug 4, 2017
c94d574
Removed too many semi-colons ;)
kayluhb Aug 4, 2017
b6053be
Update the dist
kayluhb Aug 4, 2017
894047c
Fix click event issue
kayluhb Aug 7, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
250 changes: 120 additions & 130 deletions dist/react-stars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

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"); } }
Expand All @@ -28,13 +32,24 @@ var parentStyles = {
var defaultStyles = {
position: 'relative',
overflow: 'hidden',
cursor: 'pointer',
display: 'block',
float: 'left'
};

var getHalfStarStyles = function getHalfStarStyles(color, uniqueness) {
return '\n .react-stars-' + uniqueness + ':before {\n position: absolute;\n overflow: hidden;\n display: block;\n z-index: 1;\n top: 0; left: 0;\n width: 50%;\n content: attr(data-forhalf);\n color: ' + color + ';\n }';
return '\n .react-stars-' + uniqueness + ':before {\n position: absolute;\n overflow: hidden;\n display: block;\n z-index: 1;\n top: 0;\n left: 0;\n width: 50%;\n content: attr(data-forhalf);\n color: ' + color + ';\n }';
};

var isDecimal = function isDecimal(value) {
return value % 1 !== 0;
};

var moreThanHalf = function moreThanHalf(event, size) {
var target = event.target;

var mouseAt = event.clientX - target.getBoundingClientRect().left;
mouseAt = Math.round(Math.abs(mouseAt));
return mouseAt > size / 2;
};

var ReactStars = function (_Component) {
Expand All @@ -43,92 +58,59 @@ var ReactStars = function (_Component) {
function ReactStars(props) {
_classCallCheck(this, ReactStars);

// set defaults

var _this = _possibleConstructorReturn(this, (ReactStars.__proto__ || Object.getPrototypeOf(ReactStars)).call(this, props));

props = _extends({}, props);
var _this$props = _this.props,
value = _this$props.value,
half = _this$props.half;

if (typeof props.edit === 'undefined') {
props.edit = true;
} else {
props.edit = false;
}

if (typeof props.half === 'undefined') {
props.half = true;
} else {
props.half = false;
}
_this.mouseLeave = _this.mouseLeave.bind(_this);
_this.mouseOver = _this.mouseOver.bind(_this);
_this.clicked = _this.clicked.bind(_this);
_this.renderStars = _this.renderStars.bind(_this);

_this.state = {
uniqueness: (Math.random() + '').replace('.', ''),
value: props.value || 0,
stars: [],
uniqueness: ('' + Math.random()).replace('.', ''),
value: value,
stars: _this.getStars(value),
halfStar: {
at: Math.floor(props.value),
hidden: props.half && props.value % 1 < 0.5
at: Math.floor(value),
hidden: half && value % 1 < 0.5
}
};

_this.state.config = {
count: props.count || 5,
size: props.size || 15,
char: props.char || '★',
// default color of inactive star
color1: props.color1 || 'gray',
// color of an active star
color2: props.color2 || '#ffd700',
half: props.half,
edit: props.edit
};

return _this;
}

_createClass(ReactStars, [{
key: 'componentDidMount',
value: function componentDidMount() {
this.setState({
stars: this.getStars(this.state.value)
});
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(props) {
value: function componentWillReceiveProps(nextProps) {
var half = this.props.half;

this.setState({
stars: this.getStars(props.value),
value: props.value,
stars: this.getStars(nextProps.value),
value: nextProps.value,
halfStar: {
at: Math.floor(props.value),
hidden: this.state.config.half && props.value % 1 < 0.5
at: Math.floor(nextProps.value),
hidden: half && nextProps.value % 1 < 0.5
}
});
}
}, {
key: 'isDecimal',
value: function isDecimal(value) {
return value % 1 !== 0;
}
}, {
key: 'getRate',
value: function getRate() {
var stars = void 0;
if (this.state.config.half) {
stars = Math.floor(this.state.value);
} else {
stars = Math.round(this.state.value);
}
return stars;
var value = this.state.value;

return this.props.half ? Math.floor(value) : Math.round(value);
}
}, {
key: 'getStars',
value: function getStars(activeCount) {
if (typeof activeCount === 'undefined') {
activeCount = this.getRate();
}
value: function getStars(newCount) {
var count = this.props.count;

var activeCount = typeof newCount === 'undefined' ? this.getRate() : newCount;
var stars = [];
for (var i = 0; i < this.state.config.count; i++) {
for (var i = 0; i < count; i += 1) {
stars.push({
active: i <= activeCount - 1
});
Expand All @@ -138,44 +120,34 @@ var ReactStars = function (_Component) {
}, {
key: 'mouseOver',
value: function mouseOver(event) {
var _state = this.state,
config = _state.config,
halfStar = _state.halfStar;
var halfStar = this.state.halfStar;
var _props = this.props,
half = _props.half,
size = _props.size;

if (!config.edit) return;
var index = Number(event.target.getAttribute('data-index'));
if (config.half) {
var isAtHalf = this.moreThanHalf(event, config.size);
if (half) {
var isAtHalf = moreThanHalf(event, size);
halfStar.hidden = isAtHalf;
if (isAtHalf) index = index + 1;
if (isAtHalf) index += 1;
halfStar.at = index;
} else {
index = index + 1;
index += 1;
}
this.setState({
stars: this.getStars(index)
});
}
}, {
key: 'moreThanHalf',
value: function moreThanHalf(event, size) {
var target = event.target;

var mouseAt = event.clientX - target.getBoundingClientRect().left;
mouseAt = Math.round(Math.abs(mouseAt));
return mouseAt > size / 2;
}
}, {
key: 'mouseLeave',
value: function mouseLeave() {
var _state2 = this.state,
value = _state2.value,
halfStar = _state2.halfStar,
config = _state2.config;
var _state = this.state,
value = _state.value,
halfStar = _state.halfStar;
var half = this.props.half;

if (!config.edit) return;
if (config.half) {
halfStar.hidden = !this.isDecimal(value);
if (half) {
halfStar.hidden = !isDecimal(value);
halfStar.at = Math.floor(this.state.value);
}
this.setState({
Expand All @@ -185,21 +157,22 @@ var ReactStars = function (_Component) {
}, {
key: 'clicked',
value: function clicked(event) {
var _state3 = this.state,
config = _state3.config,
halfStar = _state3.halfStar;
var halfStar = this.state.halfStar;
var _props2 = this.props,
half = _props2.half,
size = _props2.size;

if (!config.edit) return;
var index = Number(event.target.getAttribute('data-index'));
var value = void 0;
if (config.half) {
var isAtHalf = this.moreThanHalf(event, config.size);
if (half) {
var isAtHalf = moreThanHalf(event, size);
halfStar.hidden = isAtHalf;
if (isAtHalf) index = index + 1;
value = isAtHalf ? index : index + .5;
if (isAtHalf) index += 1;
value = isAtHalf ? index : index + 0.5;
halfStar.at = index;
} else {
value = index = index + 1;
index += 1;
value = index;
}
this.setState({
value: value,
Expand All @@ -210,30 +183,29 @@ var ReactStars = function (_Component) {
}, {
key: 'renderHalfStarStyleElement',
value: function renderHalfStarStyleElement() {
var _state4 = this.state,
config = _state4.config,
uniqueness = _state4.uniqueness;
var uniqueness = this.state.uniqueness;
var color2 = this.props.color2;

return _react2.default.createElement('style', { dangerouslySetInnerHTML: {
__html: getHalfStarStyles(config.color2, uniqueness)
} });
return _react2.default.createElement('style', { dangerouslySetInnerHTML: { __html: getHalfStarStyles(color2, uniqueness) } });
}
}, {
key: 'renderStars',
value: function renderStars() {
var _this2 = this;

var _state5 = this.state,
halfStar = _state5.halfStar,
stars = _state5.stars,
uniqueness = _state5.uniqueness,
config = _state5.config;
var color1 = config.color1,
color2 = config.color2,
size = config.size,
char = config.char,
half = config.half,
edit = config.edit;
var _state2 = this.state,
halfStar = _state2.halfStar,
stars = _state2.stars,
uniqueness = _state2.uniqueness;
var _props3 = this.props,
color1 = _props3.color1,
color2 = _props3.color2,
edit = _props3.edit,
size = _props3.size,
char = _props3.char,
half = _props3.half;

var onClick = edit ? this.clicked : function () {};
var onMouseOver = edit ? this.mouseOver : function () {};
var onMouseLeave = edit ? this.mouseLeave : function () {};

return stars.map(function (star, i) {
var starClass = '';
Expand All @@ -245,32 +217,36 @@ var ReactStars = function (_Component) {
cursor: edit ? 'pointer' : 'default',
fontSize: size + 'px'
});

return _react2.default.createElement(
'span',
{
className: starClass,
style: style,
key: i,
key: 'star-' + i,
'data-index': i,
'data-forhalf': char,
onMouseOver: _this2.mouseOver.bind(_this2),
onMouseMove: _this2.mouseOver.bind(_this2),
onMouseLeave: _this2.mouseLeave.bind(_this2),
onClick: _this2.clicked.bind(_this2) },
onMouseOver: onMouseOver,
onMouseMove: onMouseOver,
onMouseLeave: onMouseLeave,
onClick: onClick
},
char
);
});
}
}, {
key: 'render',
value: function render() {
var className = this.props.className;
var _props4 = this.props,
className = _props4.className,
half = _props4.half;


return _react2.default.createElement(
'div',
{ className: className, style: parentStyles },
this.state.config.half ? this.renderHalfStarStyleElement() : '',
half && this.renderHalfStarStyleElement(),
this.renderStars()
);
}
Expand All @@ -279,16 +255,30 @@ var ReactStars = function (_Component) {
return ReactStars;
}(_react.Component);

ReactStars.displayName = 'ReactStars';
ReactStars.defaultProps = {
char: '★',
className: '',
color1: 'gray',
color2: '#ffd700',
count: 5,
edit: true,
half: true,
size: 15,
value: 0,
onChange: function onChange() {}
};
ReactStars.propTypes = {
className: _react.PropTypes.string,
edit: _react.PropTypes.bool,
half: _react.PropTypes.bool,
value: _react.PropTypes.number,
count: _react.PropTypes.number,
char: _react.PropTypes.string,
size: _react.PropTypes.number,
color1: _react.PropTypes.string,
color2: _react.PropTypes.string
char: _propTypes2.default.string,
className: _propTypes2.default.string,
color1: _propTypes2.default.string,
color2: _propTypes2.default.string,
count: _propTypes2.default.number,
edit: _propTypes2.default.bool,
half: _propTypes2.default.bool,
onChange: _propTypes2.default.func,
size: _propTypes2.default.number,
value: _propTypes2.default.number
};

exports.default = ReactStars;
Loading