├── .babelrc
├── .eslintrc
├── .gitignore
├── LICENSE.md
├── README.md
├── RELEASE.md
├── assets
└── images
│ ├── star-empty.png
│ ├── star-full.png
│ ├── star-grey.png
│ ├── star-red.png
│ └── star-yellow.png
├── index.d.ts
├── index.html
├── lib
├── react-rating.cjs.js
├── react-rating.esm.js
├── react-rating.umd.js
├── react-rating.umd.js.map
├── react-rating.umd.min.js
└── react-rating.umd.min.js.map
├── package-lock.json
├── package.json
├── rollup.config.js
├── scripts
└── gh-pages.sh
├── src
├── Rating.js
├── RatingAPILayer.js
├── RatingSymbol.js
├── react-rating.js
├── utils.js
└── utils
│ ├── noop.js
│ └── style.js
├── test
├── Rating-test.js
├── RatingContainer-test.js
└── RatingSymbol-test.js
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "@babel/preset-env",
4 | "@babel/preset-react"
5 | ],
6 | "plugins": [
7 | ["transform-react-remove-prop-types", {
8 | "mode": "remove",
9 | "removeImport": true
10 | }]
11 | ]
12 | }
13 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint",
3 | "extends": "eslint:recommended",
4 | "parserOptions": {
5 | "sourceType": "module",
6 | "ecmaVersion": 6,
7 | "ecmaFeatures": {
8 | "jsx": true
9 | }
10 | },
11 | "env": {
12 | "es6": true,
13 | "browser": true,
14 | "node": true
15 | },
16 | "plugins": [
17 | "react"
18 | ],
19 | "globals": {
20 | "__DEV__": true
21 | },
22 | "rules": {
23 | "indent": ["error", 2],
24 | "func-names": ["error", "never"],
25 | "comma-dangle": ["error", "never"],
26 | "linebreak-style": "off",
27 | "no-unused-vars": ["warn", {
28 | "ignoreRestSiblings": true,
29 | "args": "none"
30 | }],
31 | "no-trailing-spaces": "error",
32 | "no-throw-literal": "off",
33 | "no-restricted-syntax": "off",
34 | "no-prototype-builtins": "off",
35 | "no-underscore-dangle": "off",
36 | "no-confusing-arrow": ["error", {"allowParens": true}],
37 | "no-param-reassign": ["error", { "props": false }],
38 | "camelcase": ["error", {properties: "never"}],
39 | "react/forbid-prop-types": "off",
40 | "react/jsx-uses-vars": "error"
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # =========================
2 | # Operating System Files
3 | # =========================
4 |
5 | # OSX
6 | # =========================
7 |
8 | .DS_Store
9 | .AppleDouble
10 | .LSOverride
11 |
12 | # Thumbnails
13 | ._*
14 |
15 | # Files that might appear in the root of a volume
16 | .DocumentRevisions-V100
17 | .fseventsd
18 | .Spotlight-V100
19 | .TemporaryItems
20 | .Trashes
21 | .VolumeIcon.icns
22 |
23 | # Directories potentially created on remote AFP share
24 | .AppleDB
25 | .AppleDesktop
26 | Network Trash Folder
27 | Temporary Items
28 | .apdisk
29 |
30 | # =========================
31 | # Custom rules
32 | # =========================
33 |
34 | # Ignore npm modules
35 | node_modules
36 |
37 | # Ignore vim temporary files
38 | *.swp
39 |
40 | # Ignore dist folder
41 |
42 |
43 | # Ignore IDE files
44 | .project
45 | .vscode
46 | .settings
47 | .cache
48 |
49 | # Logs
50 | logs
51 | *.log
52 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 dreyescat (http://github.com/dreyescat)
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://badge.fury.io/js/react-rating)
2 |
3 | # React Rating
4 |
5 | React Rating is a [react](https://github.com/facebook/react) rating component which supports custom symbols both with [inline styles](https://facebook.github.io/react/tips/inline-styles.html) and glyphicons found in popular CSS Toolkits like [Fontawesome](http://fortawesome.github.io/Font-Awesome/icons/) or [Bootstrap](http://getbootstrap.com/components/).
6 |
7 | This React component was inspired by the jQuery plugin [bootstrap-rating](https://github.com/dreyescat/bootstrap-rating).
8 |
9 | ## Demo
10 |
11 | See [react-rating](http://dreyescat.github.io/react-rating/) in action.
12 |
13 | ## Installation
14 |
15 | You can install `react-rating` component using the *npm* package manager:
16 |
17 | ```bash
18 | npm install --save react-rating
19 | ```
20 |
21 | ### Dependencies
22 |
23 | The `react-rating` component [peer depends](https://docs.npmjs.com/files/package.json#peerdependencies) on the [React](http://facebook.github.io/react/) library.
24 |
25 | You can install React using *npm* too:
26 |
27 | ```bash
28 | npm install --save react
29 | ```
30 |
31 | ## Upgrade Warning
32 |
33 | If you are using a version of React Rating < v1.0 be aware that **there are API changes between anything < v1.0 and v1.0 .** See the **Properties** and **Deprecated Properties and Callbacks** sections below for a documentation of the current API and how it compares to the old.
34 |
35 | ## Usage
36 |
37 | 1. Require the Rating Component
38 |
39 | ```javascript
40 | var Rating = require('react-rating');
41 | ```
42 |
43 | 2. Start using it
44 |
45 | With raw javascript:
46 |
47 | ```javascript
48 | React.createElement(Rating)
49 | ```
50 |
51 | Or with JSX:
52 |
53 | ```jsx
54 |
4 | // Konrad Szwarc {}
10 | declare namespace Rating {
11 |
12 | }
13 |
14 | export interface RatingComponentProps {
15 | /**
16 | * Range starting value (exclusive).
17 | *
18 | * Default value: 0
19 | */
20 | start?: number;
21 |
22 | /**
23 | * Range stop value (inclusive).
24 | *
25 | * Default value: 5
26 | */
27 | stop?: number;
28 |
29 | /**
30 | * Describes how many values each Symbol represents. For example,
31 | * for a start value of 0, a stop value of 10 and a step of 2,
32 | * we will end up with 5 Symbols, with each Symbol representing
33 | * value increments of 2.
34 | *
35 | * Default value: 1
36 | */
37 | step?: number;
38 |
39 | /**
40 | * Number of equal subdivisions that can be selected as a rating
41 | * in each Symbol. For example, for a fractions value of 2, you
42 | * will be able to select a rating with a precision of down to
43 | * half a Symbol. Must be >= 1
44 | *
45 | * Default value: 1
46 | */
47 | fractions?: number;
48 |
49 | /**
50 | * Range starting value (exclusive).
51 | *
52 | * Default value: 0
53 | */
54 | initialRating?: number;
55 |
56 | /**
57 | * The value that will be used as an initial rating. This is the
58 | * old initialRate.
59 | *
60 | * Default value: 0
61 | */
62 | className?: string;
63 |
64 | /**
65 | * If you do not define an initialRating value, you can use a
66 | * placeholder rating. Visually, this will have the same result
67 | * as if you had defined an initialRating value. If initialRating
68 | * is set placeholderRating is not taken into account. This is
69 | * the old placeholderRate
70 | *
71 | * Default value: 0
72 | */
73 | placeholderRating?: number;
74 |
75 | /**
76 | * Whether the rating can be modified or not.
77 | *
78 | * Default value: false
79 | */
80 | readonly?: boolean;
81 |
82 | /**
83 | * Whether to animate rate hovering or not.
84 | *
85 | * Default value: false
86 | */
87 | quiet?: boolean;
88 |
89 | /**
90 | * The direction of the rating element contents
91 | *
92 | * Default value: "ltr"
93 | */
94 | direction?: "rtl" | "ltr";
95 |
96 | /**
97 | * React element, inline style object, or classes applied to
98 | * the rating symbols when empty. Can also be an array of such
99 | * symbols that will be applied in a circular manner (round-robin).
100 | * This is the old empty.
101 | *
102 | * Default value: Style.empty
103 | */
104 | emptySymbol?: string | string[] | JSX.Element[] | JSX.Element;
105 |
106 | /**
107 | * React element, inline style object, or classes applied to the rating
108 | * symbols when full. Can also be an array of such symbols that will be
109 | * applied in a circular manner (round-robin). This is the old full.
110 | *
111 | * Default value: Style.full
112 | */
113 | fullSymbol?: string | string[] | JSX.Element[] | JSX.Element;
114 |
115 | /**
116 | * React element, inline style object, or classes applied to the
117 | * placeholder rating symbols. Can also be an array of such symbols
118 | * that will be applied in a circular manner (round-robin). This
119 | * is the old placeholder.
120 | *
121 | * Default value: Style.placeholder
122 | */
123 | placeholderSymbol?: string | string[] | JSX.Element[] | JSX.Element;
124 |
125 | /**
126 | * Gets called with the value when a different value than the currently
127 | * set is selected.
128 | */
129 | onChange?: (value: number) => void;
130 |
131 | /**
132 | * Gets called with the value when you hover over a symbol. The value
133 | * is equal to the value that corresponds to that part of the symbol.
134 | * Gets called in quiet mode too. When hover ends, gets called with
135 | * no value (i.e. undefined as the value).
136 | */
137 | onHover?: (value: number) => void;
138 |
139 | /**
140 | * Gets called with the value when a symbol is clicked. The value
141 | * is equal to the value that corresponds to that part of the symbol.
142 | */
143 | onClick?: (value: number) => void;
144 | }
145 |
146 | export default Rating;
147 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | React Rating
7 |
8 |
25 |
26 |
27 | star-empty
28 |
30 |
31 | star-full
32 |
34 |
35 |
36 |
57 |
58 |
59 | Default rating
60 |
61 | Reset rating
62 |
63 | Readonly rating
64 |
65 | Readonly fractional rating
66 |
67 | React svg element rating
68 |
69 | React span element rating
70 |
71 | React img element rating
72 |
73 | Fontawesome Five Star rating
74 |
75 | Fontawesome Thumbs Up/Down rating (showcases background icon hiding)
76 |
77 | Bootstrap Five Heart rating
78 |
79 | Fractional rating
80 |
81 | Alert when rate changes
82 |
83 | Update a label when rate moves
84 | Update a label when rate moves "quietly"
87 | Colored rating
90 | Mixed symbols
92 |
93 | Custom each symbol
94 |
95 | 1 to 10 rating
96 |
97 | 5 to 10 rating
98 |
99 | 1 to 10 with step 2 (odd numbers)
100 |
101 | 10 to 1 with step -2 (odd numbers between [1..10] inverted order)
102 |
103 | Rating with placeholder
104 |
105 |
106 |
442 |
443 |
444 |
--------------------------------------------------------------------------------
/lib/react-rating.cjs.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
4 |
5 | var React = _interopDefault(require('react'));
6 |
7 | function _typeof(obj) {
8 | if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
9 | _typeof = function (obj) {
10 | return typeof obj;
11 | };
12 | } else {
13 | _typeof = function (obj) {
14 | return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
15 | };
16 | }
17 |
18 | return _typeof(obj);
19 | }
20 |
21 | function _classCallCheck(instance, Constructor) {
22 | if (!(instance instanceof Constructor)) {
23 | throw new TypeError("Cannot call a class as a function");
24 | }
25 | }
26 |
27 | function _defineProperties(target, props) {
28 | for (var i = 0; i < props.length; i++) {
29 | var descriptor = props[i];
30 | descriptor.enumerable = descriptor.enumerable || false;
31 | descriptor.configurable = true;
32 | if ("value" in descriptor) descriptor.writable = true;
33 | Object.defineProperty(target, descriptor.key, descriptor);
34 | }
35 | }
36 |
37 | function _createClass(Constructor, protoProps, staticProps) {
38 | if (protoProps) _defineProperties(Constructor.prototype, protoProps);
39 | if (staticProps) _defineProperties(Constructor, staticProps);
40 | return Constructor;
41 | }
42 |
43 | function _defineProperty(obj, key, value) {
44 | if (key in obj) {
45 | Object.defineProperty(obj, key, {
46 | value: value,
47 | enumerable: true,
48 | configurable: true,
49 | writable: true
50 | });
51 | } else {
52 | obj[key] = value;
53 | }
54 |
55 | return obj;
56 | }
57 |
58 | function _extends() {
59 | _extends = Object.assign || function (target) {
60 | for (var i = 1; i < arguments.length; i++) {
61 | var source = arguments[i];
62 |
63 | for (var key in source) {
64 | if (Object.prototype.hasOwnProperty.call(source, key)) {
65 | target[key] = source[key];
66 | }
67 | }
68 | }
69 |
70 | return target;
71 | };
72 |
73 | return _extends.apply(this, arguments);
74 | }
75 |
76 | function _objectSpread(target) {
77 | for (var i = 1; i < arguments.length; i++) {
78 | var source = arguments[i] != null ? arguments[i] : {};
79 | var ownKeys = Object.keys(source);
80 |
81 | if (typeof Object.getOwnPropertySymbols === 'function') {
82 | ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
83 | return Object.getOwnPropertyDescriptor(source, sym).enumerable;
84 | }));
85 | }
86 |
87 | ownKeys.forEach(function (key) {
88 | _defineProperty(target, key, source[key]);
89 | });
90 | }
91 |
92 | return target;
93 | }
94 |
95 | function _inherits(subClass, superClass) {
96 | if (typeof superClass !== "function" && superClass !== null) {
97 | throw new TypeError("Super expression must either be null or a function");
98 | }
99 |
100 | subClass.prototype = Object.create(superClass && superClass.prototype, {
101 | constructor: {
102 | value: subClass,
103 | writable: true,
104 | configurable: true
105 | }
106 | });
107 | if (superClass) _setPrototypeOf(subClass, superClass);
108 | }
109 |
110 | function _getPrototypeOf(o) {
111 | _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
112 | return o.__proto__ || Object.getPrototypeOf(o);
113 | };
114 | return _getPrototypeOf(o);
115 | }
116 |
117 | function _setPrototypeOf(o, p) {
118 | _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
119 | o.__proto__ = p;
120 | return o;
121 | };
122 |
123 | return _setPrototypeOf(o, p);
124 | }
125 |
126 | function _assertThisInitialized(self) {
127 | if (self === void 0) {
128 | throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
129 | }
130 |
131 | return self;
132 | }
133 |
134 | function _possibleConstructorReturn(self, call) {
135 | if (call && (typeof call === "object" || typeof call === "function")) {
136 | return call;
137 | }
138 |
139 | return _assertThisInitialized(self);
140 | }
141 |
142 | var style = {
143 | display: 'inline-block',
144 | borderRadius: '50%',
145 | border: '5px double white',
146 | width: 30,
147 | height: 30
148 | };
149 | var Style = {
150 | empty: _objectSpread({}, style, {
151 | backgroundColor: '#ccc'
152 | }),
153 | full: _objectSpread({}, style, {
154 | backgroundColor: 'black'
155 | }),
156 | placeholder: _objectSpread({}, style, {
157 | backgroundColor: 'red'
158 | })
159 | };
160 |
161 | // Return the corresponding React node for an icon.
162 | var _iconNode = function _iconNode(icon) {
163 | // If it is already a React Element just return it.
164 | if (React.isValidElement(icon)) {
165 | return icon;
166 | } // If it is an object, try to use it as a CSS style object.
167 |
168 |
169 | if (_typeof(icon) === 'object' && icon !== null) {
170 | return React.createElement("span", {
171 | style: icon
172 | });
173 | } // If it is a string, use it as class names.
174 |
175 |
176 | if (Object.prototype.toString.call(icon) === '[object String]') {
177 | return React.createElement("span", {
178 | className: icon
179 | });
180 | }
181 | };
182 |
183 | var RatingSymbol =
184 | /*#__PURE__*/
185 | function (_React$PureComponent) {
186 | _inherits(RatingSymbol, _React$PureComponent);
187 |
188 | function RatingSymbol() {
189 | _classCallCheck(this, RatingSymbol);
190 |
191 | return _possibleConstructorReturn(this, _getPrototypeOf(RatingSymbol).apply(this, arguments));
192 | }
193 |
194 | _createClass(RatingSymbol, [{
195 | key: "render",
196 | value: function render() {
197 | var _iconContainerStyle;
198 |
199 | var _this$props = this.props,
200 | index = _this$props.index,
201 | inactiveIcon = _this$props.inactiveIcon,
202 | activeIcon = _this$props.activeIcon,
203 | percent = _this$props.percent,
204 | direction = _this$props.direction,
205 | readonly = _this$props.readonly,
206 | onClick = _this$props.onClick,
207 | onMouseMove = _this$props.onMouseMove,
208 | onTouchEnd = _this$props.onTouchEnd;
209 |
210 | var backgroundNode = _iconNode(inactiveIcon);
211 |
212 | var showbgIcon = percent < 100;
213 | var bgIconContainerStyle = showbgIcon ? {} : {
214 | visibility: 'hidden'
215 | };
216 |
217 | var iconNode = _iconNode(activeIcon);
218 |
219 | var iconContainerStyle = (_iconContainerStyle = {
220 | display: 'inline-block',
221 | position: 'absolute',
222 | overflow: 'hidden',
223 | top: 0
224 | }, _defineProperty(_iconContainerStyle, direction === 'rtl' ? 'right' : 'left', 0), _defineProperty(_iconContainerStyle, "width", "".concat(percent, "%")), _iconContainerStyle);
225 | var style = {
226 | cursor: !readonly ? 'pointer' : 'inherit',
227 | display: 'inline-block',
228 | position: 'relative'
229 | };
230 |
231 | function handleMouseMove(e) {
232 | if (onMouseMove) {
233 | onMouseMove(index, e);
234 | }
235 | }
236 |
237 | function handleMouseClick(e) {
238 | if (onClick) {
239 | // [Supporting both TouchEvent and MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent)
240 | // We must prevent firing click event twice on touch devices.
241 | e.preventDefault();
242 | onClick(index, e);
243 | }
244 | }
245 |
246 | function handleTouchEnd(e) {
247 | if (onTouchEnd) {
248 | onTouchEnd(index, e);
249 | }
250 | }
251 |
252 | return React.createElement("span", {
253 | style: style,
254 | onClick: handleMouseClick,
255 | onMouseMove: handleMouseMove,
256 | onTouchMove: handleMouseMove,
257 | onTouchEnd: handleTouchEnd
258 | }, React.createElement("span", {
259 | style: bgIconContainerStyle
260 | }, backgroundNode), React.createElement("span", {
261 | style: iconContainerStyle
262 | }, iconNode));
263 | }
264 | }]);
265 |
266 | return RatingSymbol;
267 | }(React.PureComponent); // Define propTypes only in development. They will be void in production.
268 |
269 | var Rating =
270 | /*#__PURE__*/
271 | function (_React$PureComponent) {
272 | _inherits(Rating, _React$PureComponent);
273 |
274 | function Rating(props) {
275 | var _this;
276 |
277 | _classCallCheck(this, Rating);
278 |
279 | _this = _possibleConstructorReturn(this, _getPrototypeOf(Rating).call(this, props));
280 | _this.state = {
281 | // Indicates the value that is displayed to the user in the form of symbols.
282 | // It can be either 0 (for no displayed symbols) or (0, end]
283 | displayValue: _this.props.value,
284 | // Indicates if the user is currently hovering over the rating element
285 | interacting: false
286 | };
287 | _this.onMouseLeave = _this.onMouseLeave.bind(_assertThisInitialized(_assertThisInitialized(_this)));
288 | _this.symbolMouseMove = _this.symbolMouseMove.bind(_assertThisInitialized(_assertThisInitialized(_this)));
289 | _this.symbolClick = _this.symbolClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
290 | _this.symbolEnd = _this.symbolEnd.bind(_assertThisInitialized(_assertThisInitialized(_this)));
291 | return _this;
292 | }
293 |
294 | _createClass(Rating, [{
295 | key: "UNSAFE_componentWillReceiveProps",
296 | value: function UNSAFE_componentWillReceiveProps(nextProps) {
297 | var valueChanged = this.props.value !== nextProps.value;
298 | this.setState(function (prevState) {
299 | return {
300 | displayValue: valueChanged ? nextProps.value : prevState.displayValue
301 | };
302 | });
303 | } // NOTE: This callback is a little bit fragile. Needs some "care" because
304 | // it relies on brittle state kept with different props and state
305 | // combinations to try to figure out from where we are coming, I mean, what
306 | // caused this update.
307 |
308 | }, {
309 | key: "componentDidUpdate",
310 | value: function componentDidUpdate(prevProps, prevState) {
311 | // When hover ends, call this.props.onHover with no value.
312 | if (prevState.interacting && !this.state.interacting) {
313 | return this.props.onHover();
314 | } // When hover over.
315 | // Hover in should only be emitted while we are hovering (interacting),
316 | // unless we changed the value, usually originated by an onClick event.
317 | // We do not want to emit a hover in event again on the clicked
318 | // symbol.
319 |
320 |
321 | if (this.state.interacting && prevProps.value == this.props.value) {
322 | this.props.onHover(this.state.displayValue);
323 | }
324 | }
325 | }, {
326 | key: "symbolEnd",
327 | value: function symbolEnd(symbolIndex, event) {
328 | // Do not raise the click event on quiet mode when a touch end is received.
329 | // On quiet mode the touch end event only notifies that we have left the
330 | // symbol. We wait for the actual click event to call the symbolClick.
331 | // On not quiet mode we simulate the click event on touch end and we just
332 | // prevent the real on click event to be raised.
333 | // NOTE: I know how we manage click events on touch devices is a little bit
334 | // weird because we do not notify the starting value that was clicked but
335 | // the last (touched) value.
336 | if (!this.props.quiet) {
337 | this.symbolClick(symbolIndex, event);
338 | event.preventDefault();
339 | } // On touch end we are "leaving" the symbol.
340 |
341 |
342 | this.onMouseLeave();
343 | }
344 | }, {
345 | key: "symbolClick",
346 | value: function symbolClick(symbolIndex, event) {
347 | var value = this.calculateDisplayValue(symbolIndex, event);
348 | this.props.onClick(value, event);
349 | }
350 | }, {
351 | key: "symbolMouseMove",
352 | value: function symbolMouseMove(symbolIndex, event) {
353 | var value = this.calculateDisplayValue(symbolIndex, event); // This call should cause an update only if the state changes.
354 | // Mainly the first time the mouse enters and whenever the value changes.
355 | // So DidComponentUpdate is NOT called for every mouse movement.
356 |
357 | this.setState({
358 | interacting: !this.props.readonly,
359 | displayValue: value
360 | });
361 | }
362 | }, {
363 | key: "onMouseLeave",
364 | value: function onMouseLeave() {
365 | this.setState({
366 | displayValue: this.props.value,
367 | interacting: false
368 | });
369 | }
370 | }, {
371 | key: "calculateDisplayValue",
372 | value: function calculateDisplayValue(symbolIndex, event) {
373 | var percentage = this.calculateHoverPercentage(event); // Get the closest top fraction.
374 |
375 | var fraction = Math.ceil(percentage % 1 * this.props.fractions) / this.props.fractions; // Truncate decimal trying to avoid float precission issues.
376 |
377 | var precision = Math.pow(10, 3);
378 | var displayValue = symbolIndex + (Math.floor(percentage) + Math.floor(fraction * precision) / precision); // ensure the returned value is greater than 0 and lower than totalSymbols
379 |
380 | return displayValue > 0 ? displayValue > this.props.totalSymbols ? this.props.totalSymbols : displayValue : 1 / this.props.fractions;
381 | }
382 | }, {
383 | key: "calculateHoverPercentage",
384 | value: function calculateHoverPercentage(event) {
385 | var clientX = event.nativeEvent.type.indexOf("touch") > -1 ? event.nativeEvent.type.indexOf("touchend") > -1 ? event.changedTouches[0].clientX : event.touches[0].clientX : event.clientX;
386 | var targetRect = event.target.getBoundingClientRect();
387 | var delta = this.props.direction === 'rtl' ? targetRect.right - clientX : clientX - targetRect.left; // Returning 0 if the delta is negative solves the flickering issue
388 |
389 | return delta < 0 ? 0 : delta / targetRect.width;
390 | }
391 | }, {
392 | key: "render",
393 | value: function render() {
394 | var _this$props = this.props,
395 | readonly = _this$props.readonly,
396 | quiet = _this$props.quiet,
397 | totalSymbols = _this$props.totalSymbols,
398 | value = _this$props.value,
399 | placeholderValue = _this$props.placeholderValue,
400 | direction = _this$props.direction,
401 | emptySymbol = _this$props.emptySymbol,
402 | fullSymbol = _this$props.fullSymbol,
403 | placeholderSymbol = _this$props.placeholderSymbol,
404 | className = _this$props.className,
405 | id = _this$props.id,
406 | style = _this$props.style,
407 | tabIndex = _this$props.tabIndex;
408 | var _this$state = this.state,
409 | displayValue = _this$state.displayValue,
410 | interacting = _this$state.interacting;
411 | var symbolNodes = [];
412 | var empty = [].concat(emptySymbol);
413 | var full = [].concat(fullSymbol);
414 | var placeholder = [].concat(placeholderSymbol);
415 | var shouldDisplayPlaceholder = placeholderValue !== 0 && value === 0 && !interacting; // The value that will be used as base for calculating how to render the symbols
416 |
417 | var renderedValue;
418 |
419 | if (shouldDisplayPlaceholder) {
420 | renderedValue = placeholderValue;
421 | } else {
422 | renderedValue = quiet ? value : displayValue;
423 | } // The amount of full symbols
424 |
425 |
426 | var fullSymbols = Math.floor(renderedValue);
427 |
428 | for (var i = 0; i < totalSymbols; i++) {
429 | var percent = void 0; // Calculate each symbol's fullness percentage
430 |
431 | if (i - fullSymbols < 0) {
432 | percent = 100;
433 | } else if (i - fullSymbols === 0) {
434 | percent = (renderedValue - i) * 100;
435 | } else {
436 | percent = 0;
437 | }
438 |
439 | symbolNodes.push(React.createElement(RatingSymbol, _extends({
440 | key: i,
441 | index: i,
442 | readonly: readonly,
443 | inactiveIcon: empty[i % empty.length],
444 | activeIcon: shouldDisplayPlaceholder ? placeholder[i % full.length] : full[i % full.length],
445 | percent: percent,
446 | direction: direction
447 | }, !readonly && {
448 | onClick: this.symbolClick,
449 | onMouseMove: this.symbolMouseMove,
450 | onTouchMove: this.symbolMouseMove,
451 | onTouchEnd: this.symbolEnd
452 | })));
453 | }
454 |
455 | return React.createElement("span", _extends({
456 | id: id,
457 | style: _objectSpread({}, style, {
458 | display: 'inline-block',
459 | direction: direction
460 | }),
461 | className: className,
462 | tabIndex: tabIndex,
463 | "aria-label": this.props['aria-label']
464 | }, !readonly && {
465 | onMouseLeave: this.onMouseLeave
466 | }), symbolNodes);
467 | }
468 | }]);
469 |
470 | return Rating;
471 | }(React.PureComponent); // Define propTypes only in development.
472 |
473 | function noop() {}
474 |
475 | noop._name = 'react_rating_noop';
476 |
477 | var RatingAPILayer =
478 | /*#__PURE__*/
479 | function (_React$PureComponent) {
480 | _inherits(RatingAPILayer, _React$PureComponent);
481 |
482 | function RatingAPILayer(props) {
483 | var _this;
484 |
485 | _classCallCheck(this, RatingAPILayer);
486 |
487 | _this = _possibleConstructorReturn(this, _getPrototypeOf(RatingAPILayer).call(this, props));
488 | _this.state = {
489 | value: props.initialRating
490 | };
491 | _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
492 | _this.handleHover = _this.handleHover.bind(_assertThisInitialized(_assertThisInitialized(_this)));
493 | return _this;
494 | }
495 |
496 | _createClass(RatingAPILayer, [{
497 | key: "UNSAFE_componentWillReceiveProps",
498 | value: function UNSAFE_componentWillReceiveProps(nextProps) {
499 | this.setState({
500 | value: nextProps.initialRating
501 | });
502 | }
503 | }, {
504 | key: "handleClick",
505 | value: function handleClick(value, e) {
506 | var _this2 = this;
507 |
508 | var newValue = this.translateDisplayValueToValue(value);
509 | this.props.onClick(newValue); // Avoid calling setState if not necessary. Micro optimisation.
510 |
511 | if (this.state.value !== newValue) {
512 | // If we have a new value trigger onChange callback.
513 | this.setState({
514 | value: newValue
515 | }, function () {
516 | return _this2.props.onChange(_this2.state.value);
517 | });
518 | }
519 | }
520 | }, {
521 | key: "handleHover",
522 | value: function handleHover(displayValue) {
523 | var value = displayValue === undefined ? displayValue : this.translateDisplayValueToValue(displayValue);
524 | this.props.onHover(value);
525 | }
526 | }, {
527 | key: "translateDisplayValueToValue",
528 | value: function translateDisplayValueToValue(displayValue) {
529 | var translatedValue = displayValue * this.props.step + this.props.start; // minimum value cannot be equal to start, since it's exclusive
530 |
531 | return translatedValue === this.props.start ? translatedValue + 1 / this.props.fractions : translatedValue;
532 | }
533 | }, {
534 | key: "tranlateValueToDisplayValue",
535 | value: function tranlateValueToDisplayValue(value) {
536 | if (value === undefined) {
537 | return 0;
538 | }
539 |
540 | return (value - this.props.start) / this.props.step;
541 | }
542 | }, {
543 | key: "render",
544 | value: function render() {
545 | var _this$props = this.props,
546 | step = _this$props.step,
547 | emptySymbol = _this$props.emptySymbol,
548 | fullSymbol = _this$props.fullSymbol,
549 | placeholderSymbol = _this$props.placeholderSymbol,
550 | readonly = _this$props.readonly,
551 | quiet = _this$props.quiet,
552 | fractions = _this$props.fractions,
553 | direction = _this$props.direction,
554 | start = _this$props.start,
555 | stop = _this$props.stop,
556 | id = _this$props.id,
557 | className = _this$props.className,
558 | style = _this$props.style,
559 | tabIndex = _this$props.tabIndex;
560 |
561 | function calculateTotalSymbols(start, stop, step) {
562 | return Math.floor((stop - start) / step);
563 | }
564 |
565 | return React.createElement(Rating, {
566 | id: id,
567 | style: style,
568 | className: className,
569 | tabIndex: tabIndex,
570 | "aria-label": this.props['aria-label'],
571 | totalSymbols: calculateTotalSymbols(start, stop, step),
572 | value: this.tranlateValueToDisplayValue(this.state.value),
573 | placeholderValue: this.tranlateValueToDisplayValue(this.props.placeholderRating),
574 | readonly: readonly,
575 | quiet: quiet,
576 | fractions: fractions,
577 | direction: direction,
578 | emptySymbol: emptySymbol,
579 | fullSymbol: fullSymbol,
580 | placeholderSymbol: placeholderSymbol,
581 | onClick: this.handleClick,
582 | onHover: this.handleHover
583 | });
584 | }
585 | }]);
586 |
587 | return RatingAPILayer;
588 | }(React.PureComponent);
589 |
590 | RatingAPILayer.defaultProps = {
591 | start: 0,
592 | stop: 5,
593 | step: 1,
594 | readonly: false,
595 | quiet: false,
596 | fractions: 1,
597 | direction: 'ltr',
598 | onHover: noop,
599 | onClick: noop,
600 | onChange: noop,
601 | emptySymbol: Style.empty,
602 | fullSymbol: Style.full,
603 | placeholderSymbol: Style.placeholder
604 | }; // Define propTypes only in development.
605 |
606 | module.exports = RatingAPILayer;
607 |
--------------------------------------------------------------------------------
/lib/react-rating.esm.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function _typeof(obj) {
4 | if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
5 | _typeof = function (obj) {
6 | return typeof obj;
7 | };
8 | } else {
9 | _typeof = function (obj) {
10 | return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
11 | };
12 | }
13 |
14 | return _typeof(obj);
15 | }
16 |
17 | function _classCallCheck(instance, Constructor) {
18 | if (!(instance instanceof Constructor)) {
19 | throw new TypeError("Cannot call a class as a function");
20 | }
21 | }
22 |
23 | function _defineProperties(target, props) {
24 | for (var i = 0; i < props.length; i++) {
25 | var descriptor = props[i];
26 | descriptor.enumerable = descriptor.enumerable || false;
27 | descriptor.configurable = true;
28 | if ("value" in descriptor) descriptor.writable = true;
29 | Object.defineProperty(target, descriptor.key, descriptor);
30 | }
31 | }
32 |
33 | function _createClass(Constructor, protoProps, staticProps) {
34 | if (protoProps) _defineProperties(Constructor.prototype, protoProps);
35 | if (staticProps) _defineProperties(Constructor, staticProps);
36 | return Constructor;
37 | }
38 |
39 | function _defineProperty(obj, key, value) {
40 | if (key in obj) {
41 | Object.defineProperty(obj, key, {
42 | value: value,
43 | enumerable: true,
44 | configurable: true,
45 | writable: true
46 | });
47 | } else {
48 | obj[key] = value;
49 | }
50 |
51 | return obj;
52 | }
53 |
54 | function _extends() {
55 | _extends = Object.assign || function (target) {
56 | for (var i = 1; i < arguments.length; i++) {
57 | var source = arguments[i];
58 |
59 | for (var key in source) {
60 | if (Object.prototype.hasOwnProperty.call(source, key)) {
61 | target[key] = source[key];
62 | }
63 | }
64 | }
65 |
66 | return target;
67 | };
68 |
69 | return _extends.apply(this, arguments);
70 | }
71 |
72 | function _objectSpread(target) {
73 | for (var i = 1; i < arguments.length; i++) {
74 | var source = arguments[i] != null ? arguments[i] : {};
75 | var ownKeys = Object.keys(source);
76 |
77 | if (typeof Object.getOwnPropertySymbols === 'function') {
78 | ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
79 | return Object.getOwnPropertyDescriptor(source, sym).enumerable;
80 | }));
81 | }
82 |
83 | ownKeys.forEach(function (key) {
84 | _defineProperty(target, key, source[key]);
85 | });
86 | }
87 |
88 | return target;
89 | }
90 |
91 | function _inherits(subClass, superClass) {
92 | if (typeof superClass !== "function" && superClass !== null) {
93 | throw new TypeError("Super expression must either be null or a function");
94 | }
95 |
96 | subClass.prototype = Object.create(superClass && superClass.prototype, {
97 | constructor: {
98 | value: subClass,
99 | writable: true,
100 | configurable: true
101 | }
102 | });
103 | if (superClass) _setPrototypeOf(subClass, superClass);
104 | }
105 |
106 | function _getPrototypeOf(o) {
107 | _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
108 | return o.__proto__ || Object.getPrototypeOf(o);
109 | };
110 | return _getPrototypeOf(o);
111 | }
112 |
113 | function _setPrototypeOf(o, p) {
114 | _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
115 | o.__proto__ = p;
116 | return o;
117 | };
118 |
119 | return _setPrototypeOf(o, p);
120 | }
121 |
122 | function _assertThisInitialized(self) {
123 | if (self === void 0) {
124 | throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
125 | }
126 |
127 | return self;
128 | }
129 |
130 | function _possibleConstructorReturn(self, call) {
131 | if (call && (typeof call === "object" || typeof call === "function")) {
132 | return call;
133 | }
134 |
135 | return _assertThisInitialized(self);
136 | }
137 |
138 | var style = {
139 | display: 'inline-block',
140 | borderRadius: '50%',
141 | border: '5px double white',
142 | width: 30,
143 | height: 30
144 | };
145 | var Style = {
146 | empty: _objectSpread({}, style, {
147 | backgroundColor: '#ccc'
148 | }),
149 | full: _objectSpread({}, style, {
150 | backgroundColor: 'black'
151 | }),
152 | placeholder: _objectSpread({}, style, {
153 | backgroundColor: 'red'
154 | })
155 | };
156 |
157 | // Return the corresponding React node for an icon.
158 | var _iconNode = function _iconNode(icon) {
159 | // If it is already a React Element just return it.
160 | if (React.isValidElement(icon)) {
161 | return icon;
162 | } // If it is an object, try to use it as a CSS style object.
163 |
164 |
165 | if (_typeof(icon) === 'object' && icon !== null) {
166 | return React.createElement("span", {
167 | style: icon
168 | });
169 | } // If it is a string, use it as class names.
170 |
171 |
172 | if (Object.prototype.toString.call(icon) === '[object String]') {
173 | return React.createElement("span", {
174 | className: icon
175 | });
176 | }
177 | };
178 |
179 | var RatingSymbol =
180 | /*#__PURE__*/
181 | function (_React$PureComponent) {
182 | _inherits(RatingSymbol, _React$PureComponent);
183 |
184 | function RatingSymbol() {
185 | _classCallCheck(this, RatingSymbol);
186 |
187 | return _possibleConstructorReturn(this, _getPrototypeOf(RatingSymbol).apply(this, arguments));
188 | }
189 |
190 | _createClass(RatingSymbol, [{
191 | key: "render",
192 | value: function render() {
193 | var _iconContainerStyle;
194 |
195 | var _this$props = this.props,
196 | index = _this$props.index,
197 | inactiveIcon = _this$props.inactiveIcon,
198 | activeIcon = _this$props.activeIcon,
199 | percent = _this$props.percent,
200 | direction = _this$props.direction,
201 | readonly = _this$props.readonly,
202 | onClick = _this$props.onClick,
203 | onMouseMove = _this$props.onMouseMove,
204 | onTouchEnd = _this$props.onTouchEnd;
205 |
206 | var backgroundNode = _iconNode(inactiveIcon);
207 |
208 | var showbgIcon = percent < 100;
209 | var bgIconContainerStyle = showbgIcon ? {} : {
210 | visibility: 'hidden'
211 | };
212 |
213 | var iconNode = _iconNode(activeIcon);
214 |
215 | var iconContainerStyle = (_iconContainerStyle = {
216 | display: 'inline-block',
217 | position: 'absolute',
218 | overflow: 'hidden',
219 | top: 0
220 | }, _defineProperty(_iconContainerStyle, direction === 'rtl' ? 'right' : 'left', 0), _defineProperty(_iconContainerStyle, "width", "".concat(percent, "%")), _iconContainerStyle);
221 | var style = {
222 | cursor: !readonly ? 'pointer' : 'inherit',
223 | display: 'inline-block',
224 | position: 'relative'
225 | };
226 |
227 | function handleMouseMove(e) {
228 | if (onMouseMove) {
229 | onMouseMove(index, e);
230 | }
231 | }
232 |
233 | function handleMouseClick(e) {
234 | if (onClick) {
235 | // [Supporting both TouchEvent and MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent)
236 | // We must prevent firing click event twice on touch devices.
237 | e.preventDefault();
238 | onClick(index, e);
239 | }
240 | }
241 |
242 | function handleTouchEnd(e) {
243 | if (onTouchEnd) {
244 | onTouchEnd(index, e);
245 | }
246 | }
247 |
248 | return React.createElement("span", {
249 | style: style,
250 | onClick: handleMouseClick,
251 | onMouseMove: handleMouseMove,
252 | onTouchMove: handleMouseMove,
253 | onTouchEnd: handleTouchEnd
254 | }, React.createElement("span", {
255 | style: bgIconContainerStyle
256 | }, backgroundNode), React.createElement("span", {
257 | style: iconContainerStyle
258 | }, iconNode));
259 | }
260 | }]);
261 |
262 | return RatingSymbol;
263 | }(React.PureComponent); // Define propTypes only in development. They will be void in production.
264 |
265 | var Rating =
266 | /*#__PURE__*/
267 | function (_React$PureComponent) {
268 | _inherits(Rating, _React$PureComponent);
269 |
270 | function Rating(props) {
271 | var _this;
272 |
273 | _classCallCheck(this, Rating);
274 |
275 | _this = _possibleConstructorReturn(this, _getPrototypeOf(Rating).call(this, props));
276 | _this.state = {
277 | // Indicates the value that is displayed to the user in the form of symbols.
278 | // It can be either 0 (for no displayed symbols) or (0, end]
279 | displayValue: _this.props.value,
280 | // Indicates if the user is currently hovering over the rating element
281 | interacting: false
282 | };
283 | _this.onMouseLeave = _this.onMouseLeave.bind(_assertThisInitialized(_assertThisInitialized(_this)));
284 | _this.symbolMouseMove = _this.symbolMouseMove.bind(_assertThisInitialized(_assertThisInitialized(_this)));
285 | _this.symbolClick = _this.symbolClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
286 | _this.symbolEnd = _this.symbolEnd.bind(_assertThisInitialized(_assertThisInitialized(_this)));
287 | return _this;
288 | }
289 |
290 | _createClass(Rating, [{
291 | key: "UNSAFE_componentWillReceiveProps",
292 | value: function UNSAFE_componentWillReceiveProps(nextProps) {
293 | var valueChanged = this.props.value !== nextProps.value;
294 | this.setState(function (prevState) {
295 | return {
296 | displayValue: valueChanged ? nextProps.value : prevState.displayValue
297 | };
298 | });
299 | } // NOTE: This callback is a little bit fragile. Needs some "care" because
300 | // it relies on brittle state kept with different props and state
301 | // combinations to try to figure out from where we are coming, I mean, what
302 | // caused this update.
303 |
304 | }, {
305 | key: "componentDidUpdate",
306 | value: function componentDidUpdate(prevProps, prevState) {
307 | // When hover ends, call this.props.onHover with no value.
308 | if (prevState.interacting && !this.state.interacting) {
309 | return this.props.onHover();
310 | } // When hover over.
311 | // Hover in should only be emitted while we are hovering (interacting),
312 | // unless we changed the value, usually originated by an onClick event.
313 | // We do not want to emit a hover in event again on the clicked
314 | // symbol.
315 |
316 |
317 | if (this.state.interacting && prevProps.value == this.props.value) {
318 | this.props.onHover(this.state.displayValue);
319 | }
320 | }
321 | }, {
322 | key: "symbolEnd",
323 | value: function symbolEnd(symbolIndex, event) {
324 | // Do not raise the click event on quiet mode when a touch end is received.
325 | // On quiet mode the touch end event only notifies that we have left the
326 | // symbol. We wait for the actual click event to call the symbolClick.
327 | // On not quiet mode we simulate the click event on touch end and we just
328 | // prevent the real on click event to be raised.
329 | // NOTE: I know how we manage click events on touch devices is a little bit
330 | // weird because we do not notify the starting value that was clicked but
331 | // the last (touched) value.
332 | if (!this.props.quiet) {
333 | this.symbolClick(symbolIndex, event);
334 | event.preventDefault();
335 | } // On touch end we are "leaving" the symbol.
336 |
337 |
338 | this.onMouseLeave();
339 | }
340 | }, {
341 | key: "symbolClick",
342 | value: function symbolClick(symbolIndex, event) {
343 | var value = this.calculateDisplayValue(symbolIndex, event);
344 | this.props.onClick(value, event);
345 | }
346 | }, {
347 | key: "symbolMouseMove",
348 | value: function symbolMouseMove(symbolIndex, event) {
349 | var value = this.calculateDisplayValue(symbolIndex, event); // This call should cause an update only if the state changes.
350 | // Mainly the first time the mouse enters and whenever the value changes.
351 | // So DidComponentUpdate is NOT called for every mouse movement.
352 |
353 | this.setState({
354 | interacting: !this.props.readonly,
355 | displayValue: value
356 | });
357 | }
358 | }, {
359 | key: "onMouseLeave",
360 | value: function onMouseLeave() {
361 | this.setState({
362 | displayValue: this.props.value,
363 | interacting: false
364 | });
365 | }
366 | }, {
367 | key: "calculateDisplayValue",
368 | value: function calculateDisplayValue(symbolIndex, event) {
369 | var percentage = this.calculateHoverPercentage(event); // Get the closest top fraction.
370 |
371 | var fraction = Math.ceil(percentage % 1 * this.props.fractions) / this.props.fractions; // Truncate decimal trying to avoid float precission issues.
372 |
373 | var precision = Math.pow(10, 3);
374 | var displayValue = symbolIndex + (Math.floor(percentage) + Math.floor(fraction * precision) / precision); // ensure the returned value is greater than 0 and lower than totalSymbols
375 |
376 | return displayValue > 0 ? displayValue > this.props.totalSymbols ? this.props.totalSymbols : displayValue : 1 / this.props.fractions;
377 | }
378 | }, {
379 | key: "calculateHoverPercentage",
380 | value: function calculateHoverPercentage(event) {
381 | var clientX = event.nativeEvent.type.indexOf("touch") > -1 ? event.nativeEvent.type.indexOf("touchend") > -1 ? event.changedTouches[0].clientX : event.touches[0].clientX : event.clientX;
382 | var targetRect = event.target.getBoundingClientRect();
383 | var delta = this.props.direction === 'rtl' ? targetRect.right - clientX : clientX - targetRect.left; // Returning 0 if the delta is negative solves the flickering issue
384 |
385 | return delta < 0 ? 0 : delta / targetRect.width;
386 | }
387 | }, {
388 | key: "render",
389 | value: function render() {
390 | var _this$props = this.props,
391 | readonly = _this$props.readonly,
392 | quiet = _this$props.quiet,
393 | totalSymbols = _this$props.totalSymbols,
394 | value = _this$props.value,
395 | placeholderValue = _this$props.placeholderValue,
396 | direction = _this$props.direction,
397 | emptySymbol = _this$props.emptySymbol,
398 | fullSymbol = _this$props.fullSymbol,
399 | placeholderSymbol = _this$props.placeholderSymbol,
400 | className = _this$props.className,
401 | id = _this$props.id,
402 | style = _this$props.style,
403 | tabIndex = _this$props.tabIndex;
404 | var _this$state = this.state,
405 | displayValue = _this$state.displayValue,
406 | interacting = _this$state.interacting;
407 | var symbolNodes = [];
408 | var empty = [].concat(emptySymbol);
409 | var full = [].concat(fullSymbol);
410 | var placeholder = [].concat(placeholderSymbol);
411 | var shouldDisplayPlaceholder = placeholderValue !== 0 && value === 0 && !interacting; // The value that will be used as base for calculating how to render the symbols
412 |
413 | var renderedValue;
414 |
415 | if (shouldDisplayPlaceholder) {
416 | renderedValue = placeholderValue;
417 | } else {
418 | renderedValue = quiet ? value : displayValue;
419 | } // The amount of full symbols
420 |
421 |
422 | var fullSymbols = Math.floor(renderedValue);
423 |
424 | for (var i = 0; i < totalSymbols; i++) {
425 | var percent = void 0; // Calculate each symbol's fullness percentage
426 |
427 | if (i - fullSymbols < 0) {
428 | percent = 100;
429 | } else if (i - fullSymbols === 0) {
430 | percent = (renderedValue - i) * 100;
431 | } else {
432 | percent = 0;
433 | }
434 |
435 | symbolNodes.push(React.createElement(RatingSymbol, _extends({
436 | key: i,
437 | index: i,
438 | readonly: readonly,
439 | inactiveIcon: empty[i % empty.length],
440 | activeIcon: shouldDisplayPlaceholder ? placeholder[i % full.length] : full[i % full.length],
441 | percent: percent,
442 | direction: direction
443 | }, !readonly && {
444 | onClick: this.symbolClick,
445 | onMouseMove: this.symbolMouseMove,
446 | onTouchMove: this.symbolMouseMove,
447 | onTouchEnd: this.symbolEnd
448 | })));
449 | }
450 |
451 | return React.createElement("span", _extends({
452 | id: id,
453 | style: _objectSpread({}, style, {
454 | display: 'inline-block',
455 | direction: direction
456 | }),
457 | className: className,
458 | tabIndex: tabIndex,
459 | "aria-label": this.props['aria-label']
460 | }, !readonly && {
461 | onMouseLeave: this.onMouseLeave
462 | }), symbolNodes);
463 | }
464 | }]);
465 |
466 | return Rating;
467 | }(React.PureComponent); // Define propTypes only in development.
468 |
469 | function noop() {}
470 |
471 | noop._name = 'react_rating_noop';
472 |
473 | var RatingAPILayer =
474 | /*#__PURE__*/
475 | function (_React$PureComponent) {
476 | _inherits(RatingAPILayer, _React$PureComponent);
477 |
478 | function RatingAPILayer(props) {
479 | var _this;
480 |
481 | _classCallCheck(this, RatingAPILayer);
482 |
483 | _this = _possibleConstructorReturn(this, _getPrototypeOf(RatingAPILayer).call(this, props));
484 | _this.state = {
485 | value: props.initialRating
486 | };
487 | _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
488 | _this.handleHover = _this.handleHover.bind(_assertThisInitialized(_assertThisInitialized(_this)));
489 | return _this;
490 | }
491 |
492 | _createClass(RatingAPILayer, [{
493 | key: "UNSAFE_componentWillReceiveProps",
494 | value: function UNSAFE_componentWillReceiveProps(nextProps) {
495 | this.setState({
496 | value: nextProps.initialRating
497 | });
498 | }
499 | }, {
500 | key: "handleClick",
501 | value: function handleClick(value, e) {
502 | var _this2 = this;
503 |
504 | var newValue = this.translateDisplayValueToValue(value);
505 | this.props.onClick(newValue); // Avoid calling setState if not necessary. Micro optimisation.
506 |
507 | if (this.state.value !== newValue) {
508 | // If we have a new value trigger onChange callback.
509 | this.setState({
510 | value: newValue
511 | }, function () {
512 | return _this2.props.onChange(_this2.state.value);
513 | });
514 | }
515 | }
516 | }, {
517 | key: "handleHover",
518 | value: function handleHover(displayValue) {
519 | var value = displayValue === undefined ? displayValue : this.translateDisplayValueToValue(displayValue);
520 | this.props.onHover(value);
521 | }
522 | }, {
523 | key: "translateDisplayValueToValue",
524 | value: function translateDisplayValueToValue(displayValue) {
525 | var translatedValue = displayValue * this.props.step + this.props.start; // minimum value cannot be equal to start, since it's exclusive
526 |
527 | return translatedValue === this.props.start ? translatedValue + 1 / this.props.fractions : translatedValue;
528 | }
529 | }, {
530 | key: "tranlateValueToDisplayValue",
531 | value: function tranlateValueToDisplayValue(value) {
532 | if (value === undefined) {
533 | return 0;
534 | }
535 |
536 | return (value - this.props.start) / this.props.step;
537 | }
538 | }, {
539 | key: "render",
540 | value: function render() {
541 | var _this$props = this.props,
542 | step = _this$props.step,
543 | emptySymbol = _this$props.emptySymbol,
544 | fullSymbol = _this$props.fullSymbol,
545 | placeholderSymbol = _this$props.placeholderSymbol,
546 | readonly = _this$props.readonly,
547 | quiet = _this$props.quiet,
548 | fractions = _this$props.fractions,
549 | direction = _this$props.direction,
550 | start = _this$props.start,
551 | stop = _this$props.stop,
552 | id = _this$props.id,
553 | className = _this$props.className,
554 | style = _this$props.style,
555 | tabIndex = _this$props.tabIndex;
556 |
557 | function calculateTotalSymbols(start, stop, step) {
558 | return Math.floor((stop - start) / step);
559 | }
560 |
561 | return React.createElement(Rating, {
562 | id: id,
563 | style: style,
564 | className: className,
565 | tabIndex: tabIndex,
566 | "aria-label": this.props['aria-label'],
567 | totalSymbols: calculateTotalSymbols(start, stop, step),
568 | value: this.tranlateValueToDisplayValue(this.state.value),
569 | placeholderValue: this.tranlateValueToDisplayValue(this.props.placeholderRating),
570 | readonly: readonly,
571 | quiet: quiet,
572 | fractions: fractions,
573 | direction: direction,
574 | emptySymbol: emptySymbol,
575 | fullSymbol: fullSymbol,
576 | placeholderSymbol: placeholderSymbol,
577 | onClick: this.handleClick,
578 | onHover: this.handleHover
579 | });
580 | }
581 | }]);
582 |
583 | return RatingAPILayer;
584 | }(React.PureComponent);
585 |
586 | RatingAPILayer.defaultProps = {
587 | start: 0,
588 | stop: 5,
589 | step: 1,
590 | readonly: false,
591 | quiet: false,
592 | fractions: 1,
593 | direction: 'ltr',
594 | onHover: noop,
595 | onClick: noop,
596 | onChange: noop,
597 | emptySymbol: Style.empty,
598 | fullSymbol: Style.full,
599 | placeholderSymbol: Style.placeholder
600 | }; // Define propTypes only in development.
601 |
602 | export default RatingAPILayer;
603 |
--------------------------------------------------------------------------------
/lib/react-rating.umd.js:
--------------------------------------------------------------------------------
1 | (function (global, factory) {
2 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
3 | typeof define === 'function' && define.amd ? define(['react'], factory) :
4 | (global = global || self, global.ReactRating = factory(global.React));
5 | }(this, function (React) { 'use strict';
6 |
7 | React = React && React.hasOwnProperty('default') ? React['default'] : React;
8 |
9 | function _typeof(obj) {
10 | if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
11 | _typeof = function (obj) {
12 | return typeof obj;
13 | };
14 | } else {
15 | _typeof = function (obj) {
16 | return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
17 | };
18 | }
19 |
20 | return _typeof(obj);
21 | }
22 |
23 | function _classCallCheck(instance, Constructor) {
24 | if (!(instance instanceof Constructor)) {
25 | throw new TypeError("Cannot call a class as a function");
26 | }
27 | }
28 |
29 | function _defineProperties(target, props) {
30 | for (var i = 0; i < props.length; i++) {
31 | var descriptor = props[i];
32 | descriptor.enumerable = descriptor.enumerable || false;
33 | descriptor.configurable = true;
34 | if ("value" in descriptor) descriptor.writable = true;
35 | Object.defineProperty(target, descriptor.key, descriptor);
36 | }
37 | }
38 |
39 | function _createClass(Constructor, protoProps, staticProps) {
40 | if (protoProps) _defineProperties(Constructor.prototype, protoProps);
41 | if (staticProps) _defineProperties(Constructor, staticProps);
42 | return Constructor;
43 | }
44 |
45 | function _defineProperty(obj, key, value) {
46 | if (key in obj) {
47 | Object.defineProperty(obj, key, {
48 | value: value,
49 | enumerable: true,
50 | configurable: true,
51 | writable: true
52 | });
53 | } else {
54 | obj[key] = value;
55 | }
56 |
57 | return obj;
58 | }
59 |
60 | function _extends() {
61 | _extends = Object.assign || function (target) {
62 | for (var i = 1; i < arguments.length; i++) {
63 | var source = arguments[i];
64 |
65 | for (var key in source) {
66 | if (Object.prototype.hasOwnProperty.call(source, key)) {
67 | target[key] = source[key];
68 | }
69 | }
70 | }
71 |
72 | return target;
73 | };
74 |
75 | return _extends.apply(this, arguments);
76 | }
77 |
78 | function _objectSpread(target) {
79 | for (var i = 1; i < arguments.length; i++) {
80 | var source = arguments[i] != null ? arguments[i] : {};
81 | var ownKeys = Object.keys(source);
82 |
83 | if (typeof Object.getOwnPropertySymbols === 'function') {
84 | ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
85 | return Object.getOwnPropertyDescriptor(source, sym).enumerable;
86 | }));
87 | }
88 |
89 | ownKeys.forEach(function (key) {
90 | _defineProperty(target, key, source[key]);
91 | });
92 | }
93 |
94 | return target;
95 | }
96 |
97 | function _inherits(subClass, superClass) {
98 | if (typeof superClass !== "function" && superClass !== null) {
99 | throw new TypeError("Super expression must either be null or a function");
100 | }
101 |
102 | subClass.prototype = Object.create(superClass && superClass.prototype, {
103 | constructor: {
104 | value: subClass,
105 | writable: true,
106 | configurable: true
107 | }
108 | });
109 | if (superClass) _setPrototypeOf(subClass, superClass);
110 | }
111 |
112 | function _getPrototypeOf(o) {
113 | _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
114 | return o.__proto__ || Object.getPrototypeOf(o);
115 | };
116 | return _getPrototypeOf(o);
117 | }
118 |
119 | function _setPrototypeOf(o, p) {
120 | _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
121 | o.__proto__ = p;
122 | return o;
123 | };
124 |
125 | return _setPrototypeOf(o, p);
126 | }
127 |
128 | function _assertThisInitialized(self) {
129 | if (self === void 0) {
130 | throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
131 | }
132 |
133 | return self;
134 | }
135 |
136 | function _possibleConstructorReturn(self, call) {
137 | if (call && (typeof call === "object" || typeof call === "function")) {
138 | return call;
139 | }
140 |
141 | return _assertThisInitialized(self);
142 | }
143 |
144 | var style = {
145 | display: 'inline-block',
146 | borderRadius: '50%',
147 | border: '5px double white',
148 | width: 30,
149 | height: 30
150 | };
151 | var Style = {
152 | empty: _objectSpread({}, style, {
153 | backgroundColor: '#ccc'
154 | }),
155 | full: _objectSpread({}, style, {
156 | backgroundColor: 'black'
157 | }),
158 | placeholder: _objectSpread({}, style, {
159 | backgroundColor: 'red'
160 | })
161 | };
162 |
163 | // Return the corresponding React node for an icon.
164 | var _iconNode = function _iconNode(icon) {
165 | // If it is already a React Element just return it.
166 | if (React.isValidElement(icon)) {
167 | return icon;
168 | } // If it is an object, try to use it as a CSS style object.
169 |
170 |
171 | if (_typeof(icon) === 'object' && icon !== null) {
172 | return React.createElement("span", {
173 | style: icon
174 | });
175 | } // If it is a string, use it as class names.
176 |
177 |
178 | if (Object.prototype.toString.call(icon) === '[object String]') {
179 | return React.createElement("span", {
180 | className: icon
181 | });
182 | }
183 | };
184 |
185 | var RatingSymbol =
186 | /*#__PURE__*/
187 | function (_React$PureComponent) {
188 | _inherits(RatingSymbol, _React$PureComponent);
189 |
190 | function RatingSymbol() {
191 | _classCallCheck(this, RatingSymbol);
192 |
193 | return _possibleConstructorReturn(this, _getPrototypeOf(RatingSymbol).apply(this, arguments));
194 | }
195 |
196 | _createClass(RatingSymbol, [{
197 | key: "render",
198 | value: function render() {
199 | var _iconContainerStyle;
200 |
201 | var _this$props = this.props,
202 | index = _this$props.index,
203 | inactiveIcon = _this$props.inactiveIcon,
204 | activeIcon = _this$props.activeIcon,
205 | percent = _this$props.percent,
206 | direction = _this$props.direction,
207 | readonly = _this$props.readonly,
208 | onClick = _this$props.onClick,
209 | onMouseMove = _this$props.onMouseMove,
210 | onTouchEnd = _this$props.onTouchEnd;
211 |
212 | var backgroundNode = _iconNode(inactiveIcon);
213 |
214 | var showbgIcon = percent < 100;
215 | var bgIconContainerStyle = showbgIcon ? {} : {
216 | visibility: 'hidden'
217 | };
218 |
219 | var iconNode = _iconNode(activeIcon);
220 |
221 | var iconContainerStyle = (_iconContainerStyle = {
222 | display: 'inline-block',
223 | position: 'absolute',
224 | overflow: 'hidden',
225 | top: 0
226 | }, _defineProperty(_iconContainerStyle, direction === 'rtl' ? 'right' : 'left', 0), _defineProperty(_iconContainerStyle, "width", "".concat(percent, "%")), _iconContainerStyle);
227 | var style = {
228 | cursor: !readonly ? 'pointer' : 'inherit',
229 | display: 'inline-block',
230 | position: 'relative'
231 | };
232 |
233 | function handleMouseMove(e) {
234 | if (onMouseMove) {
235 | onMouseMove(index, e);
236 | }
237 | }
238 |
239 | function handleMouseClick(e) {
240 | if (onClick) {
241 | // [Supporting both TouchEvent and MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent)
242 | // We must prevent firing click event twice on touch devices.
243 | e.preventDefault();
244 | onClick(index, e);
245 | }
246 | }
247 |
248 | function handleTouchEnd(e) {
249 | if (onTouchEnd) {
250 | onTouchEnd(index, e);
251 | }
252 | }
253 |
254 | return React.createElement("span", {
255 | style: style,
256 | onClick: handleMouseClick,
257 | onMouseMove: handleMouseMove,
258 | onTouchMove: handleMouseMove,
259 | onTouchEnd: handleTouchEnd
260 | }, React.createElement("span", {
261 | style: bgIconContainerStyle
262 | }, backgroundNode), React.createElement("span", {
263 | style: iconContainerStyle
264 | }, iconNode));
265 | }
266 | }]);
267 |
268 | return RatingSymbol;
269 | }(React.PureComponent); // Define propTypes only in development. They will be void in production.
270 |
271 | var Rating =
272 | /*#__PURE__*/
273 | function (_React$PureComponent) {
274 | _inherits(Rating, _React$PureComponent);
275 |
276 | function Rating(props) {
277 | var _this;
278 |
279 | _classCallCheck(this, Rating);
280 |
281 | _this = _possibleConstructorReturn(this, _getPrototypeOf(Rating).call(this, props));
282 | _this.state = {
283 | // Indicates the value that is displayed to the user in the form of symbols.
284 | // It can be either 0 (for no displayed symbols) or (0, end]
285 | displayValue: _this.props.value,
286 | // Indicates if the user is currently hovering over the rating element
287 | interacting: false
288 | };
289 | _this.onMouseLeave = _this.onMouseLeave.bind(_assertThisInitialized(_assertThisInitialized(_this)));
290 | _this.symbolMouseMove = _this.symbolMouseMove.bind(_assertThisInitialized(_assertThisInitialized(_this)));
291 | _this.symbolClick = _this.symbolClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
292 | _this.symbolEnd = _this.symbolEnd.bind(_assertThisInitialized(_assertThisInitialized(_this)));
293 | return _this;
294 | }
295 |
296 | _createClass(Rating, [{
297 | key: "UNSAFE_componentWillReceiveProps",
298 | value: function UNSAFE_componentWillReceiveProps(nextProps) {
299 | var valueChanged = this.props.value !== nextProps.value;
300 | this.setState(function (prevState) {
301 | return {
302 | displayValue: valueChanged ? nextProps.value : prevState.displayValue
303 | };
304 | });
305 | } // NOTE: This callback is a little bit fragile. Needs some "care" because
306 | // it relies on brittle state kept with different props and state
307 | // combinations to try to figure out from where we are coming, I mean, what
308 | // caused this update.
309 |
310 | }, {
311 | key: "componentDidUpdate",
312 | value: function componentDidUpdate(prevProps, prevState) {
313 | // When hover ends, call this.props.onHover with no value.
314 | if (prevState.interacting && !this.state.interacting) {
315 | return this.props.onHover();
316 | } // When hover over.
317 | // Hover in should only be emitted while we are hovering (interacting),
318 | // unless we changed the value, usually originated by an onClick event.
319 | // We do not want to emit a hover in event again on the clicked
320 | // symbol.
321 |
322 |
323 | if (this.state.interacting && prevProps.value == this.props.value) {
324 | this.props.onHover(this.state.displayValue);
325 | }
326 | }
327 | }, {
328 | key: "symbolEnd",
329 | value: function symbolEnd(symbolIndex, event) {
330 | // Do not raise the click event on quiet mode when a touch end is received.
331 | // On quiet mode the touch end event only notifies that we have left the
332 | // symbol. We wait for the actual click event to call the symbolClick.
333 | // On not quiet mode we simulate the click event on touch end and we just
334 | // prevent the real on click event to be raised.
335 | // NOTE: I know how we manage click events on touch devices is a little bit
336 | // weird because we do not notify the starting value that was clicked but
337 | // the last (touched) value.
338 | if (!this.props.quiet) {
339 | this.symbolClick(symbolIndex, event);
340 | event.preventDefault();
341 | } // On touch end we are "leaving" the symbol.
342 |
343 |
344 | this.onMouseLeave();
345 | }
346 | }, {
347 | key: "symbolClick",
348 | value: function symbolClick(symbolIndex, event) {
349 | var value = this.calculateDisplayValue(symbolIndex, event);
350 | this.props.onClick(value, event);
351 | }
352 | }, {
353 | key: "symbolMouseMove",
354 | value: function symbolMouseMove(symbolIndex, event) {
355 | var value = this.calculateDisplayValue(symbolIndex, event); // This call should cause an update only if the state changes.
356 | // Mainly the first time the mouse enters and whenever the value changes.
357 | // So DidComponentUpdate is NOT called for every mouse movement.
358 |
359 | this.setState({
360 | interacting: !this.props.readonly,
361 | displayValue: value
362 | });
363 | }
364 | }, {
365 | key: "onMouseLeave",
366 | value: function onMouseLeave() {
367 | this.setState({
368 | displayValue: this.props.value,
369 | interacting: false
370 | });
371 | }
372 | }, {
373 | key: "calculateDisplayValue",
374 | value: function calculateDisplayValue(symbolIndex, event) {
375 | var percentage = this.calculateHoverPercentage(event); // Get the closest top fraction.
376 |
377 | var fraction = Math.ceil(percentage % 1 * this.props.fractions) / this.props.fractions; // Truncate decimal trying to avoid float precission issues.
378 |
379 | var precision = Math.pow(10, 3);
380 | var displayValue = symbolIndex + (Math.floor(percentage) + Math.floor(fraction * precision) / precision); // ensure the returned value is greater than 0 and lower than totalSymbols
381 |
382 | return displayValue > 0 ? displayValue > this.props.totalSymbols ? this.props.totalSymbols : displayValue : 1 / this.props.fractions;
383 | }
384 | }, {
385 | key: "calculateHoverPercentage",
386 | value: function calculateHoverPercentage(event) {
387 | var clientX = event.nativeEvent.type.indexOf("touch") > -1 ? event.nativeEvent.type.indexOf("touchend") > -1 ? event.changedTouches[0].clientX : event.touches[0].clientX : event.clientX;
388 | var targetRect = event.target.getBoundingClientRect();
389 | var delta = this.props.direction === 'rtl' ? targetRect.right - clientX : clientX - targetRect.left; // Returning 0 if the delta is negative solves the flickering issue
390 |
391 | return delta < 0 ? 0 : delta / targetRect.width;
392 | }
393 | }, {
394 | key: "render",
395 | value: function render() {
396 | var _this$props = this.props,
397 | readonly = _this$props.readonly,
398 | quiet = _this$props.quiet,
399 | totalSymbols = _this$props.totalSymbols,
400 | value = _this$props.value,
401 | placeholderValue = _this$props.placeholderValue,
402 | direction = _this$props.direction,
403 | emptySymbol = _this$props.emptySymbol,
404 | fullSymbol = _this$props.fullSymbol,
405 | placeholderSymbol = _this$props.placeholderSymbol,
406 | className = _this$props.className,
407 | id = _this$props.id,
408 | style = _this$props.style,
409 | tabIndex = _this$props.tabIndex;
410 | var _this$state = this.state,
411 | displayValue = _this$state.displayValue,
412 | interacting = _this$state.interacting;
413 | var symbolNodes = [];
414 | var empty = [].concat(emptySymbol);
415 | var full = [].concat(fullSymbol);
416 | var placeholder = [].concat(placeholderSymbol);
417 | var shouldDisplayPlaceholder = placeholderValue !== 0 && value === 0 && !interacting; // The value that will be used as base for calculating how to render the symbols
418 |
419 | var renderedValue;
420 |
421 | if (shouldDisplayPlaceholder) {
422 | renderedValue = placeholderValue;
423 | } else {
424 | renderedValue = quiet ? value : displayValue;
425 | } // The amount of full symbols
426 |
427 |
428 | var fullSymbols = Math.floor(renderedValue);
429 |
430 | for (var i = 0; i < totalSymbols; i++) {
431 | var percent = void 0; // Calculate each symbol's fullness percentage
432 |
433 | if (i - fullSymbols < 0) {
434 | percent = 100;
435 | } else if (i - fullSymbols === 0) {
436 | percent = (renderedValue - i) * 100;
437 | } else {
438 | percent = 0;
439 | }
440 |
441 | symbolNodes.push(React.createElement(RatingSymbol, _extends({
442 | key: i,
443 | index: i,
444 | readonly: readonly,
445 | inactiveIcon: empty[i % empty.length],
446 | activeIcon: shouldDisplayPlaceholder ? placeholder[i % full.length] : full[i % full.length],
447 | percent: percent,
448 | direction: direction
449 | }, !readonly && {
450 | onClick: this.symbolClick,
451 | onMouseMove: this.symbolMouseMove,
452 | onTouchMove: this.symbolMouseMove,
453 | onTouchEnd: this.symbolEnd
454 | })));
455 | }
456 |
457 | return React.createElement("span", _extends({
458 | id: id,
459 | style: _objectSpread({}, style, {
460 | display: 'inline-block',
461 | direction: direction
462 | }),
463 | className: className,
464 | tabIndex: tabIndex,
465 | "aria-label": this.props['aria-label']
466 | }, !readonly && {
467 | onMouseLeave: this.onMouseLeave
468 | }), symbolNodes);
469 | }
470 | }]);
471 |
472 | return Rating;
473 | }(React.PureComponent); // Define propTypes only in development.
474 |
475 | function noop() {}
476 |
477 | noop._name = 'react_rating_noop';
478 |
479 | var RatingAPILayer =
480 | /*#__PURE__*/
481 | function (_React$PureComponent) {
482 | _inherits(RatingAPILayer, _React$PureComponent);
483 |
484 | function RatingAPILayer(props) {
485 | var _this;
486 |
487 | _classCallCheck(this, RatingAPILayer);
488 |
489 | _this = _possibleConstructorReturn(this, _getPrototypeOf(RatingAPILayer).call(this, props));
490 | _this.state = {
491 | value: props.initialRating
492 | };
493 | _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
494 | _this.handleHover = _this.handleHover.bind(_assertThisInitialized(_assertThisInitialized(_this)));
495 | return _this;
496 | }
497 |
498 | _createClass(RatingAPILayer, [{
499 | key: "UNSAFE_componentWillReceiveProps",
500 | value: function UNSAFE_componentWillReceiveProps(nextProps) {
501 | this.setState({
502 | value: nextProps.initialRating
503 | });
504 | }
505 | }, {
506 | key: "handleClick",
507 | value: function handleClick(value, e) {
508 | var _this2 = this;
509 |
510 | var newValue = this.translateDisplayValueToValue(value);
511 | this.props.onClick(newValue); // Avoid calling setState if not necessary. Micro optimisation.
512 |
513 | if (this.state.value !== newValue) {
514 | // If we have a new value trigger onChange callback.
515 | this.setState({
516 | value: newValue
517 | }, function () {
518 | return _this2.props.onChange(_this2.state.value);
519 | });
520 | }
521 | }
522 | }, {
523 | key: "handleHover",
524 | value: function handleHover(displayValue) {
525 | var value = displayValue === undefined ? displayValue : this.translateDisplayValueToValue(displayValue);
526 | this.props.onHover(value);
527 | }
528 | }, {
529 | key: "translateDisplayValueToValue",
530 | value: function translateDisplayValueToValue(displayValue) {
531 | var translatedValue = displayValue * this.props.step + this.props.start; // minimum value cannot be equal to start, since it's exclusive
532 |
533 | return translatedValue === this.props.start ? translatedValue + 1 / this.props.fractions : translatedValue;
534 | }
535 | }, {
536 | key: "tranlateValueToDisplayValue",
537 | value: function tranlateValueToDisplayValue(value) {
538 | if (value === undefined) {
539 | return 0;
540 | }
541 |
542 | return (value - this.props.start) / this.props.step;
543 | }
544 | }, {
545 | key: "render",
546 | value: function render() {
547 | var _this$props = this.props,
548 | step = _this$props.step,
549 | emptySymbol = _this$props.emptySymbol,
550 | fullSymbol = _this$props.fullSymbol,
551 | placeholderSymbol = _this$props.placeholderSymbol,
552 | readonly = _this$props.readonly,
553 | quiet = _this$props.quiet,
554 | fractions = _this$props.fractions,
555 | direction = _this$props.direction,
556 | start = _this$props.start,
557 | stop = _this$props.stop,
558 | id = _this$props.id,
559 | className = _this$props.className,
560 | style = _this$props.style,
561 | tabIndex = _this$props.tabIndex;
562 |
563 | function calculateTotalSymbols(start, stop, step) {
564 | return Math.floor((stop - start) / step);
565 | }
566 |
567 | return React.createElement(Rating, {
568 | id: id,
569 | style: style,
570 | className: className,
571 | tabIndex: tabIndex,
572 | "aria-label": this.props['aria-label'],
573 | totalSymbols: calculateTotalSymbols(start, stop, step),
574 | value: this.tranlateValueToDisplayValue(this.state.value),
575 | placeholderValue: this.tranlateValueToDisplayValue(this.props.placeholderRating),
576 | readonly: readonly,
577 | quiet: quiet,
578 | fractions: fractions,
579 | direction: direction,
580 | emptySymbol: emptySymbol,
581 | fullSymbol: fullSymbol,
582 | placeholderSymbol: placeholderSymbol,
583 | onClick: this.handleClick,
584 | onHover: this.handleHover
585 | });
586 | }
587 | }]);
588 |
589 | return RatingAPILayer;
590 | }(React.PureComponent);
591 |
592 | RatingAPILayer.defaultProps = {
593 | start: 0,
594 | stop: 5,
595 | step: 1,
596 | readonly: false,
597 | quiet: false,
598 | fractions: 1,
599 | direction: 'ltr',
600 | onHover: noop,
601 | onClick: noop,
602 | onChange: noop,
603 | emptySymbol: Style.empty,
604 | fullSymbol: Style.full,
605 | placeholderSymbol: Style.placeholder
606 | }; // Define propTypes only in development.
607 |
608 | return RatingAPILayer;
609 |
610 | }));
611 | //# sourceMappingURL=react-rating.umd.js.map
612 |
--------------------------------------------------------------------------------
/lib/react-rating.umd.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"react-rating.umd.js","sources":["../src/utils/style.js","../src/RatingSymbol.js","../src/Rating.js","../src/utils/noop.js","../src/RatingAPILayer.js"],"sourcesContent":["var style = {\n display: 'inline-block',\n borderRadius: '50%',\n border: '5px double white',\n width: 30,\n height: 30\n};\n\nexport default {\n empty: {\n ...style,\n backgroundColor: '#ccc'\n },\n full: {\n ...style,\n backgroundColor: 'black'\n },\n placeholder: {\n ...style,\n backgroundColor: 'red'\n }\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\n// Return the corresponding React node for an icon.\nconst _iconNode = (icon) => {\n // If it is already a React Element just return it.\n if (React.isValidElement(icon)) {\n return icon;\n }\n // If it is an object, try to use it as a CSS style object.\n if (typeof icon === 'object' && icon !== null) {\n return \n \n {backgroundNode}\n \n \n {iconNode}\n \n \n );\n }\n}\n\n// Define propTypes only in development. They will be void in production.\nRatingSymbol.propTypes = typeof __DEV__ !== 'undefined' && __DEV__ && {\n index: PropTypes.number.isRequired,\n readonly: PropTypes.bool.isRequired,\n inactiveIcon: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.object,\n PropTypes.element\n ]).isRequired,\n activeIcon: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.object,\n PropTypes.element\n ]).isRequired,\n percent: PropTypes.number.isRequired,\n direction: PropTypes.string.isRequired,\n onClick: PropTypes.func,\n onMouseMove: PropTypes.func,\n onTouchMove: PropTypes.func,\n onTouchEnd: PropTypes.func\n};\n\nexport default RatingSymbol;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Symbol from './RatingSymbol';\n\nclass Rating extends React.PureComponent {\n constructor(props) {\n super(props);\n this.state = {\n // Indicates the value that is displayed to the user in the form of symbols.\n // It can be either 0 (for no displayed symbols) or (0, end]\n displayValue: this.props.value,\n // Indicates if the user is currently hovering over the rating element\n interacting: false\n };\n this.onMouseLeave = this.onMouseLeave.bind(this);\n this.symbolMouseMove = this.symbolMouseMove.bind(this);\n this.symbolClick = this.symbolClick.bind(this);\n this.symbolEnd = this.symbolEnd.bind(this);\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n const valueChanged = this.props.value !== nextProps.value;\n this.setState((prevState) => ({\n displayValue: valueChanged ? nextProps.value : prevState.displayValue\n }));\n }\n\n // NOTE: This callback is a little bit fragile. Needs some \"care\" because\n // it relies on brittle state kept with different props and state\n // combinations to try to figure out from where we are coming, I mean, what\n // caused this update.\n componentDidUpdate(prevProps, prevState) {\n // When hover ends, call this.props.onHover with no value.\n if (prevState.interacting && !this.state.interacting) {\n return this.props.onHover();\n }\n\n // When hover over.\n // Hover in should only be emitted while we are hovering (interacting),\n // unless we changed the value, usually originated by an onClick event.\n // We do not want to emit a hover in event again on the clicked\n // symbol.\n if (this.state.interacting && prevProps.value == this.props.value) {\n this.props.onHover(this.state.displayValue);\n }\n }\n\n symbolEnd(symbolIndex, event) {\n // Do not raise the click event on quiet mode when a touch end is received.\n // On quiet mode the touch end event only notifies that we have left the\n // symbol. We wait for the actual click event to call the symbolClick.\n // On not quiet mode we simulate the click event on touch end and we just\n // prevent the real on click event to be raised.\n // NOTE: I know how we manage click events on touch devices is a little bit\n // weird because we do not notify the starting value that was clicked but\n // the last (touched) value.\n if (!this.props.quiet) {\n this.symbolClick(symbolIndex, event);\n event.preventDefault();\n }\n // On touch end we are \"leaving\" the symbol.\n this.onMouseLeave();\n }\n\n symbolClick(symbolIndex, event) {\n const value = this.calculateDisplayValue(symbolIndex, event);\n this.props.onClick(value, event);\n }\n\n symbolMouseMove(symbolIndex, event) {\n const value = this.calculateDisplayValue(symbolIndex, event);\n // This call should cause an update only if the state changes.\n // Mainly the first time the mouse enters and whenever the value changes.\n // So DidComponentUpdate is NOT called for every mouse movement.\n this.setState({\n interacting: !this.props.readonly,\n displayValue: value\n });\n }\n\n onMouseLeave() {\n this.setState({\n displayValue: this.props.value,\n interacting: false\n });\n }\n\n calculateDisplayValue(symbolIndex, event) {\n const percentage = this.calculateHoverPercentage(event);\n // Get the closest top fraction.\n const fraction = Math.ceil(percentage % 1 * this.props.fractions) / this.props.fractions;\n // Truncate decimal trying to avoid float precission issues.\n const precision = 10 ** 3;\n const displayValue =\n symbolIndex + (Math.floor(percentage) + Math.floor(fraction * precision) / precision);\n // ensure the returned value is greater than 0 and lower than totalSymbols\n return displayValue > 0 ? displayValue > this.props.totalSymbols ? this.props.totalSymbols : displayValue : 1 / this.props.fractions;\n }\n\n calculateHoverPercentage(event) {\n const clientX = event.nativeEvent.type.indexOf(\"touch\") > -1\n ? event.nativeEvent.type.indexOf(\"touchend\") > -1\n ? event.changedTouches[0].clientX\n : event.touches[0].clientX\n : event.clientX;\n\n const targetRect = event.target.getBoundingClientRect();\n const delta = this.props.direction === 'rtl'\n ? targetRect.right - clientX\n : clientX - targetRect.left;\n\n // Returning 0 if the delta is negative solves the flickering issue\n return delta < 0 ? 0 : delta / targetRect.width;\n }\n\n render() {\n const {\n readonly,\n quiet,\n totalSymbols,\n value,\n placeholderValue,\n direction,\n emptySymbol,\n fullSymbol,\n placeholderSymbol,\n className,\n id,\n style,\n tabIndex\n } = this.props;\n const { displayValue, interacting } = this.state;\n const symbolNodes = [];\n const empty = [].concat(emptySymbol);\n const full = [].concat(fullSymbol);\n const placeholder = [].concat(placeholderSymbol);\n const shouldDisplayPlaceholder =\n placeholderValue !== 0 &&\n value === 0 &&\n !interacting;\n\n // The value that will be used as base for calculating how to render the symbols\n let renderedValue;\n if (shouldDisplayPlaceholder) {\n renderedValue = placeholderValue;\n } else {\n renderedValue = quiet ? value : displayValue;\n }\n\n // The amount of full symbols\n const fullSymbols = Math.floor(renderedValue);\n\n for (let i = 0; i < totalSymbols; i++) {\n let percent;\n // Calculate each symbol's fullness percentage\n if (i - fullSymbols < 0) {\n percent = 100;\n } else if (i - fullSymbols === 0) {\n percent = (renderedValue - i) * 100;\n } else {\n percent = 0;\n }\n\n symbolNodes.push(\n \n {symbolNodes}\n \n );\n }\n}\n\n// Define propTypes only in development.\nRating.propTypes = typeof __DEV__ !== 'undefined' && __DEV__ && {\n totalSymbols: PropTypes.number.isRequired,\n value: PropTypes.number.isRequired, // Always >= 0\n placeholderValue: PropTypes.number.isRequired,\n readonly: PropTypes.bool.isRequired,\n quiet: PropTypes.bool.isRequired,\n fractions: PropTypes.number.isRequired,\n direction: PropTypes.string.isRequired,\n emptySymbol: PropTypes.oneOfType([\n // Array of class names and/or style objects.\n PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element])),\n // Class names.\n PropTypes.string,\n // Style objects.\n PropTypes.object,\n // React element\n PropTypes.element\n ]).isRequired,\n fullSymbol: PropTypes.oneOfType([\n // Array of class names and/or style objects.\n PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element])),\n // Class names.\n PropTypes.string,\n // Style objects.\n PropTypes.object,\n // React element\n PropTypes.element\n ]).isRequired,\n placeholderSymbol: PropTypes.oneOfType([\n // Array of class names and/or style objects.\n PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element])),\n // Class names.\n PropTypes.string,\n // Style objects.\n PropTypes.object,\n // React element\n PropTypes.element\n ]),\n onClick: PropTypes.func.isRequired,\n onHover: PropTypes.func.isRequired\n};\n\nexport default Rating;\n","function noop() {}\nnoop._name = 'react_rating_noop';\n\nexport default noop;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Style from './utils/style';\nimport Rating from './Rating';\nimport noop from './utils/noop';\n\nclass RatingAPILayer extends React.PureComponent {\n constructor(props) {\n super(props);\n this.state = {\n value: props.initialRating\n };\n this.handleClick = this.handleClick.bind(this);\n this.handleHover = this.handleHover.bind(this);\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n this.setState({\n value: nextProps.initialRating\n });\n }\n\n handleClick(value, e) {\n const newValue = this.translateDisplayValueToValue(value);\n this.props.onClick(newValue);\n // Avoid calling setState if not necessary. Micro optimisation.\n if (this.state.value !== newValue) {\n // If we have a new value trigger onChange callback.\n this.setState({\n value: newValue\n }, () => this.props.onChange(this.state.value));\n }\n }\n\n handleHover(displayValue) {\n const value = displayValue === undefined\n ? displayValue\n : this.translateDisplayValueToValue(displayValue);\n this.props.onHover(value);\n }\n\n translateDisplayValueToValue(displayValue) {\n const translatedValue = displayValue * this.props.step + this.props.start;\n // minimum value cannot be equal to start, since it's exclusive\n return translatedValue === this.props.start\n ? translatedValue + 1 / this.props.fractions\n : translatedValue;\n }\n\n tranlateValueToDisplayValue(value) {\n if (value === undefined) {\n return 0;\n }\n return (value - this.props.start) / this.props.step;\n }\n\n render() {\n const {\n step,\n emptySymbol,\n fullSymbol,\n placeholderSymbol,\n readonly,\n quiet,\n fractions,\n direction,\n start,\n stop,\n id,\n className,\n style,\n tabIndex\n } = this.props;\n\n function calculateTotalSymbols(start, stop, step) {\n return Math.floor((stop - start) / step);\n }\n\n return (\n 0?r>this.props.totalSymbols?this.props.totalSymbols:r:1/this.props.fractions}},{key:"calculateHoverPercentage",value:function(e){var t=e.nativeEvent.type.indexOf("touch")>-1?e.nativeEvent.type.indexOf("touchend")>-1?e.changedTouches[0].clientX:e.touches[0].clientX:e.clientX,n=e.target.getBoundingClientRect(),o="rtl"===this.props.direction?n.right-t:t-n.left;return o<0?0:o/n.width}},{key:"render",value:function(){var t,n=this.props,o=n.readonly,i=n.quiet,r=n.totalSymbols,s=n.value,u=n.placeholderValue,c=n.direction,p=n.emptySymbol,y=n.fullSymbol,h=n.placeholderSymbol,f=n.className,d=n.id,b=n.style,m=n.tabIndex,g=this.state,k=g.displayValue,S=g.interacting,M=[],C=[].concat(p),O=[].concat(y),V=[].concat(h),E=0!==u&&0===s&&!S;t=E?u:i?s:k;for(var w=Math.floor(t),P=0;P {\n // If it is already a React Element just return it.\n if (React.isValidElement(icon)) {\n return icon;\n }\n // If it is an object, try to use it as a CSS style object.\n if (typeof icon === 'object' && icon !== null) {\n return \n \n {backgroundNode}\n \n \n {iconNode}\n \n \n );\n }\n}\n\n// Define propTypes only in development. They will be void in production.\nRatingSymbol.propTypes = typeof __DEV__ !== 'undefined' && __DEV__ && {\n index: PropTypes.number.isRequired,\n readonly: PropTypes.bool.isRequired,\n inactiveIcon: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.object,\n PropTypes.element\n ]).isRequired,\n activeIcon: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.object,\n PropTypes.element\n ]).isRequired,\n percent: PropTypes.number.isRequired,\n direction: PropTypes.string.isRequired,\n onClick: PropTypes.func,\n onMouseMove: PropTypes.func,\n onTouchMove: PropTypes.func,\n onTouchEnd: PropTypes.func\n};\n\nexport default RatingSymbol;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Symbol from './RatingSymbol';\n\nclass Rating extends React.PureComponent {\n constructor(props) {\n super(props);\n this.state = {\n // Indicates the value that is displayed to the user in the form of symbols.\n // It can be either 0 (for no displayed symbols) or (0, end]\n displayValue: this.props.value,\n // Indicates if the user is currently hovering over the rating element\n interacting: false\n };\n this.onMouseLeave = this.onMouseLeave.bind(this);\n this.symbolMouseMove = this.symbolMouseMove.bind(this);\n this.symbolClick = this.symbolClick.bind(this);\n this.symbolEnd = this.symbolEnd.bind(this);\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n const valueChanged = this.props.value !== nextProps.value;\n this.setState((prevState) => ({\n displayValue: valueChanged ? nextProps.value : prevState.displayValue\n }));\n }\n\n // NOTE: This callback is a little bit fragile. Needs some \"care\" because\n // it relies on brittle state kept with different props and state\n // combinations to try to figure out from where we are coming, I mean, what\n // caused this update.\n componentDidUpdate(prevProps, prevState) {\n // When hover ends, call this.props.onHover with no value.\n if (prevState.interacting && !this.state.interacting) {\n return this.props.onHover();\n }\n\n // When hover over.\n // Hover in should only be emitted while we are hovering (interacting),\n // unless we changed the value, usually originated by an onClick event.\n // We do not want to emit a hover in event again on the clicked\n // symbol.\n if (this.state.interacting && prevProps.value == this.props.value) {\n this.props.onHover(this.state.displayValue);\n }\n }\n\n symbolEnd(symbolIndex, event) {\n // Do not raise the click event on quiet mode when a touch end is received.\n // On quiet mode the touch end event only notifies that we have left the\n // symbol. We wait for the actual click event to call the symbolClick.\n // On not quiet mode we simulate the click event on touch end and we just\n // prevent the real on click event to be raised.\n // NOTE: I know how we manage click events on touch devices is a little bit\n // weird because we do not notify the starting value that was clicked but\n // the last (touched) value.\n if (!this.props.quiet) {\n this.symbolClick(symbolIndex, event);\n event.preventDefault();\n }\n // On touch end we are \"leaving\" the symbol.\n this.onMouseLeave();\n }\n\n symbolClick(symbolIndex, event) {\n const value = this.calculateDisplayValue(symbolIndex, event);\n this.props.onClick(value, event);\n }\n\n symbolMouseMove(symbolIndex, event) {\n const value = this.calculateDisplayValue(symbolIndex, event);\n // This call should cause an update only if the state changes.\n // Mainly the first time the mouse enters and whenever the value changes.\n // So DidComponentUpdate is NOT called for every mouse movement.\n this.setState({\n interacting: !this.props.readonly,\n displayValue: value\n });\n }\n\n onMouseLeave() {\n this.setState({\n displayValue: this.props.value,\n interacting: false\n });\n }\n\n calculateDisplayValue(symbolIndex, event) {\n const percentage = this.calculateHoverPercentage(event);\n // Get the closest top fraction.\n const fraction = Math.ceil(percentage % 1 * this.props.fractions) / this.props.fractions;\n // Truncate decimal trying to avoid float precission issues.\n const precision = 10 ** 3;\n const displayValue =\n symbolIndex + (Math.floor(percentage) + Math.floor(fraction * precision) / precision);\n // ensure the returned value is greater than 0 and lower than totalSymbols\n return displayValue > 0 ? displayValue > this.props.totalSymbols ? this.props.totalSymbols : displayValue : 1 / this.props.fractions;\n }\n\n calculateHoverPercentage(event) {\n const clientX = event.nativeEvent.type.indexOf(\"touch\") > -1\n ? event.nativeEvent.type.indexOf(\"touchend\") > -1\n ? event.changedTouches[0].clientX\n : event.touches[0].clientX\n : event.clientX;\n\n const targetRect = event.target.getBoundingClientRect();\n const delta = this.props.direction === 'rtl'\n ? targetRect.right - clientX\n : clientX - targetRect.left;\n\n // Returning 0 if the delta is negative solves the flickering issue\n return delta < 0 ? 0 : delta / targetRect.width;\n }\n\n render() {\n const {\n readonly,\n quiet,\n totalSymbols,\n value,\n placeholderValue,\n direction,\n emptySymbol,\n fullSymbol,\n placeholderSymbol,\n className,\n id,\n style,\n tabIndex\n } = this.props;\n const { displayValue, interacting } = this.state;\n const symbolNodes = [];\n const empty = [].concat(emptySymbol);\n const full = [].concat(fullSymbol);\n const placeholder = [].concat(placeholderSymbol);\n const shouldDisplayPlaceholder =\n placeholderValue !== 0 &&\n value === 0 &&\n !interacting;\n\n // The value that will be used as base for calculating how to render the symbols\n let renderedValue;\n if (shouldDisplayPlaceholder) {\n renderedValue = placeholderValue;\n } else {\n renderedValue = quiet ? value : displayValue;\n }\n\n // The amount of full symbols\n const fullSymbols = Math.floor(renderedValue);\n\n for (let i = 0; i < totalSymbols; i++) {\n let percent;\n // Calculate each symbol's fullness percentage\n if (i - fullSymbols < 0) {\n percent = 100;\n } else if (i - fullSymbols === 0) {\n percent = (renderedValue - i) * 100;\n } else {\n percent = 0;\n }\n\n symbolNodes.push(\n \n {symbolNodes}\n \n );\n }\n}\n\n// Define propTypes only in development.\nRating.propTypes = typeof __DEV__ !== 'undefined' && __DEV__ && {\n totalSymbols: PropTypes.number.isRequired,\n value: PropTypes.number.isRequired, // Always >= 0\n placeholderValue: PropTypes.number.isRequired,\n readonly: PropTypes.bool.isRequired,\n quiet: PropTypes.bool.isRequired,\n fractions: PropTypes.number.isRequired,\n direction: PropTypes.string.isRequired,\n emptySymbol: PropTypes.oneOfType([\n // Array of class names and/or style objects.\n PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element])),\n // Class names.\n PropTypes.string,\n // Style objects.\n PropTypes.object,\n // React element\n PropTypes.element\n ]).isRequired,\n fullSymbol: PropTypes.oneOfType([\n // Array of class names and/or style objects.\n PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element])),\n // Class names.\n PropTypes.string,\n // Style objects.\n PropTypes.object,\n // React element\n PropTypes.element\n ]).isRequired,\n placeholderSymbol: PropTypes.oneOfType([\n // Array of class names and/or style objects.\n PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element])),\n // Class names.\n PropTypes.string,\n // Style objects.\n PropTypes.object,\n // React element\n PropTypes.element\n ]),\n onClick: PropTypes.func.isRequired,\n onHover: PropTypes.func.isRequired\n};\n\nexport default Rating;\n","function noop() {}\nnoop._name = 'react_rating_noop';\n\nexport default noop;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Style from './utils/style';\nimport Rating from './Rating';\nimport noop from './utils/noop';\n\nclass RatingAPILayer extends React.PureComponent {\n constructor(props) {\n super(props);\n this.state = {\n value: props.initialRating\n };\n this.handleClick = this.handleClick.bind(this);\n this.handleHover = this.handleHover.bind(this);\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n this.setState({\n value: nextProps.initialRating\n });\n }\n\n handleClick(value, e) {\n const newValue = this.translateDisplayValueToValue(value);\n this.props.onClick(newValue);\n // Avoid calling setState if not necessary. Micro optimisation.\n if (this.state.value !== newValue) {\n // If we have a new value trigger onChange callback.\n this.setState({\n value: newValue\n }, () => this.props.onChange(this.state.value));\n }\n }\n\n handleHover(displayValue) {\n const value = displayValue === undefined\n ? displayValue\n : this.translateDisplayValueToValue(displayValue);\n this.props.onHover(value);\n }\n\n translateDisplayValueToValue(displayValue) {\n const translatedValue = displayValue * this.props.step + this.props.start;\n // minimum value cannot be equal to start, since it's exclusive\n return translatedValue === this.props.start\n ? translatedValue + 1 / this.props.fractions\n : translatedValue;\n }\n\n tranlateValueToDisplayValue(value) {\n if (value === undefined) {\n return 0;\n }\n return (value - this.props.start) / this.props.step;\n }\n\n render() {\n const {\n step,\n emptySymbol,\n fullSymbol,\n placeholderSymbol,\n readonly,\n quiet,\n fractions,\n direction,\n start,\n stop,\n id,\n className,\n style,\n tabIndex\n } = this.props;\n\n function calculateTotalSymbols(start, stop, step) {\n return Math.floor((stop - start) / step);\n }\n\n return (\n
196 | {symbolNodes}
197 |
198 | );
199 | }
200 | }
201 |
202 | // Define propTypes only in development.
203 | Rating.propTypes = typeof __DEV__ !== 'undefined' && __DEV__ && {
204 | totalSymbols: PropTypes.number.isRequired,
205 | value: PropTypes.number.isRequired, // Always >= 0
206 | placeholderValue: PropTypes.number.isRequired,
207 | readonly: PropTypes.bool.isRequired,
208 | quiet: PropTypes.bool.isRequired,
209 | fractions: PropTypes.number.isRequired,
210 | direction: PropTypes.string.isRequired,
211 | emptySymbol: PropTypes.oneOfType([
212 | // Array of class names and/or style objects.
213 | PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element])),
214 | // Class names.
215 | PropTypes.string,
216 | // Style objects.
217 | PropTypes.object,
218 | // React element
219 | PropTypes.element
220 | ]).isRequired,
221 | fullSymbol: PropTypes.oneOfType([
222 | // Array of class names and/or style objects.
223 | PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element])),
224 | // Class names.
225 | PropTypes.string,
226 | // Style objects.
227 | PropTypes.object,
228 | // React element
229 | PropTypes.element
230 | ]).isRequired,
231 | placeholderSymbol: PropTypes.oneOfType([
232 | // Array of class names and/or style objects.
233 | PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element])),
234 | // Class names.
235 | PropTypes.string,
236 | // Style objects.
237 | PropTypes.object,
238 | // React element
239 | PropTypes.element
240 | ]),
241 | onClick: PropTypes.func.isRequired,
242 | onHover: PropTypes.func.isRequired
243 | };
244 |
245 | export default Rating;
246 |
--------------------------------------------------------------------------------
/src/RatingAPILayer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import Style from './utils/style';
4 | import Rating from './Rating';
5 | import noop from './utils/noop';
6 |
7 | class RatingAPILayer extends React.PureComponent {
8 | constructor(props) {
9 | super(props);
10 | this.state = {
11 | value: props.initialRating
12 | };
13 | this.handleClick = this.handleClick.bind(this);
14 | this.handleHover = this.handleHover.bind(this);
15 | }
16 |
17 | UNSAFE_componentWillReceiveProps(nextProps) {
18 | this.setState({
19 | value: nextProps.initialRating
20 | });
21 | }
22 |
23 | handleClick(value, e) {
24 | const newValue = this.translateDisplayValueToValue(value);
25 | this.props.onClick(newValue);
26 | // Avoid calling setState if not necessary. Micro optimisation.
27 | if (this.state.value !== newValue) {
28 | // If we have a new value trigger onChange callback.
29 | this.setState({
30 | value: newValue
31 | }, () => this.props.onChange(this.state.value));
32 | }
33 | }
34 |
35 | handleHover(displayValue) {
36 | const value = displayValue === undefined
37 | ? displayValue
38 | : this.translateDisplayValueToValue(displayValue);
39 | this.props.onHover(value);
40 | }
41 |
42 | translateDisplayValueToValue(displayValue) {
43 | const translatedValue = displayValue * this.props.step + this.props.start;
44 | // minimum value cannot be equal to start, since it's exclusive
45 | return translatedValue === this.props.start
46 | ? translatedValue + 1 / this.props.fractions
47 | : translatedValue;
48 | }
49 |
50 | tranlateValueToDisplayValue(value) {
51 | if (value === undefined) {
52 | return 0;
53 | }
54 | return (value - this.props.start) / this.props.step;
55 | }
56 |
57 | render() {
58 | const {
59 | step,
60 | emptySymbol,
61 | fullSymbol,
62 | placeholderSymbol,
63 | readonly,
64 | quiet,
65 | fractions,
66 | direction,
67 | start,
68 | stop,
69 | id,
70 | className,
71 | style,
72 | tabIndex
73 | } = this.props;
74 |
75 | function calculateTotalSymbols(start, stop, step) {
76 | return Math.floor((stop - start) / step);
77 | }
78 |
79 | return (
80 |
84 |
85 | {backgroundNode}
86 |
87 |
88 | {iconNode}
89 |
90 |
91 | );
92 | }
93 | }
94 |
95 | // Define propTypes only in development. They will be void in production.
96 | RatingSymbol.propTypes = typeof __DEV__ !== 'undefined' && __DEV__ && {
97 | index: PropTypes.number.isRequired,
98 | readonly: PropTypes.bool.isRequired,
99 | inactiveIcon: PropTypes.oneOfType([
100 | PropTypes.string,
101 | PropTypes.object,
102 | PropTypes.element
103 | ]).isRequired,
104 | activeIcon: PropTypes.oneOfType([
105 | PropTypes.string,
106 | PropTypes.object,
107 | PropTypes.element
108 | ]).isRequired,
109 | percent: PropTypes.number.isRequired,
110 | direction: PropTypes.string.isRequired,
111 | onClick: PropTypes.func,
112 | onMouseMove: PropTypes.func,
113 | onTouchMove: PropTypes.func,
114 | onTouchEnd: PropTypes.func
115 | };
116 |
117 | export default RatingSymbol;
118 |
--------------------------------------------------------------------------------
/src/react-rating.js:
--------------------------------------------------------------------------------
1 | import RatingAPILayer from './RatingAPILayer';
2 | export default RatingAPILayer;
3 |
--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreyescat/react-rating/bd070757452e1aa75907f2a156fda2119fb7121a/src/utils.js
--------------------------------------------------------------------------------
/src/utils/noop.js:
--------------------------------------------------------------------------------
1 | function noop() {}
2 | noop._name = 'react_rating_noop';
3 |
4 | export default noop;
5 |
--------------------------------------------------------------------------------
/src/utils/style.js:
--------------------------------------------------------------------------------
1 | var style = {
2 | display: 'inline-block',
3 | borderRadius: '50%',
4 | border: '5px double white',
5 | width: 30,
6 | height: 30
7 | };
8 |
9 | export default {
10 | empty: {
11 | ...style,
12 | backgroundColor: '#ccc'
13 | },
14 | full: {
15 | ...style,
16 | backgroundColor: 'black'
17 | },
18 | placeholder: {
19 | ...style,
20 | backgroundColor: 'red'
21 | }
22 | };
23 |
--------------------------------------------------------------------------------
/test/Rating-test.js:
--------------------------------------------------------------------------------
1 | // Use expect BDD assertion style.
2 | var expect = require('chai').expect;
3 | var React = require('react');
4 | var TestUtils = require('react-dom/test-utils');
5 | var createRenderer = require('react-test-renderer/shallow').createRenderer;
6 | import Rating from '../src/Rating';
7 | var Style = require('../src/utils/style.js');
8 |
9 | var render = function (component) {
10 | var renderer = createRenderer();
11 | renderer.render(component);
12 | return renderer.getRenderOutput()
13 | };
14 |
15 | describe('Rating', function () {
16 | describe('with total symbols of 5', function () {
17 | var rating;
18 |
19 | beforeEach(function () {
20 | rating = render(
21 | +} background={- } />);
67 | });
68 |
69 | it('should have a React element background', function () {
70 | var backgroundNode = symbol.props.children[0];
71 | expect(TestUtils.isElement(backgroundNode));
72 | });
73 |
74 | it('should have a React element foreground', function () {
75 | var foregroundNode = symbol.props.children[0];
76 | expect(TestUtils.isElement(foregroundNode));
77 | });
78 | });
79 |
80 | describe('with 25 percent icon', function () {
81 | var symbol,
82 | Style = require('../src/utils/style.js'),
83 | icon = Style.full,
84 | background= Style.empty;
85 |
86 | beforeEach(function () {
87 | symbol = render(