Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

adds the ability to disable hover on touch screens e.g. when ('ontouchstart' in window) #8

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

adds the ability to disable hover on touch screens e.g. when ('ontouchstart' in window) #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
364655e
adds a prop that disables hover
May 21, 2019
bc61264
run build script
May 22, 2019
4309feb
modified package.json / sets react version to 15.6.1
May 22, 2019
0d7a132
isHovered/isCurrentHoveredWidget now using disableHover
May 22, 2019
0f9f99e
updated README.md with documentation for disableHover
May 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ class Bar extends Component {
| typeOfWidget | string | 'Star' | The type of widget used as a rating meter | `Point` |
| changeRating | function | ()=>{} | Callback that will be passed the new rating a user selects | `const setNewRating = (rating) => this.props.dispatch( fooActions.setRating(rating) )` |
| gradientPathName | string | '' | gradientPathname needed if app's path is not at the root | `/app/` |
| ignoreInlineStyles | boolean | false | ignore all the inline styles and write your own css using the provided classes | `true` |
| ignoreInlineStyles | boolean | false | ignore all the inline styles and write your own css using the provided classes | `true` |
| svgIconPaths | string | 'm25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z' | Set a path that describes the svg shape for all the children | 'm25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z' |
| svgIconViewBoxes | string | '0 0 51 48' | Set the view box for a custom svg path you might have for all the children | '0 0 51 48' |
| svgs | node | none | Use a custom svg or react element for all the children | `<svg><circle /></svg>` |
Expand All @@ -89,6 +89,7 @@ class Bar extends Component {
| widgetHoverColors | string | 'rgb(230, 67, 47)' | Color of widget when hovering over it in selection mode, applied to all the children | `yellow` |
| widgetDimensions | string | '50px' | The width and height of the star, applied to all the children | `15px` |
| widgetSpacings | string | '7px' | The spacing between the widgets, applied to all the children | `0` |
| disableHover | boolean | false | Disables hover mode on widgets. Set to true when ('ontouchstart' in window) for the component to work on touch screens. |

### Widget

Expand Down
13 changes: 8 additions & 5 deletions build/ratings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,7 @@ var Ratings = function (_Component) {
changeRating = _props3.changeRating,
selectedRating = _props3.rating,
children = _props3.children,
disableHover = _props3.disableHover,
ignoreInlineStyles = _props3.ignoreInlineStyles,
gradientPathName = _props3.gradientPathName,
widgetEmptyColors = _props3.widgetEmptyColors,
Expand Down Expand Up @@ -196,9 +197,9 @@ var Ratings = function (_Component) {
var isSelected = widgetRating <= selectedRating;

// hovered only matters when changeRating is true
var hoverMode = highestWidgetHovered > 0;
var isHovered = widgetRating <= highestWidgetHovered;
var isCurrentHoveredWidget = widgetRating === highestWidgetHovered;
var hoverMode = !disableHover && highestWidgetHovered > 0;
var isHovered = !disableHover && widgetRating <= highestWidgetHovered;
var isCurrentHoveredWidget = !disableHover && widgetRating === highestWidgetHovered;

// only matters when changeRating is false
// given widget 5 and rating 4.2: 5 > 4.2 && 4 < 4.2;
Expand All @@ -214,8 +215,8 @@ var Ratings = function (_Component) {
changeRating: changeRating ? function () {
return changeRating(widgetRating);
} : null,
hoverOverWidget: changeRating ? _this2.hoverOverWidget(widgetRating) : null,
unHoverOverWidget: changeRating ? _this2.unHoverOverWidget : null,
hoverOverWidget: !disableHover && changeRating ? _this2.hoverOverWidget(widgetRating) : null,
unHoverOverWidget: !disableHover && changeRating ? _this2.unHoverOverWidget : null,
inheritFillId: _this2.fillId,
isSelected: isSelected,
isHovered: isHovered,
Expand Down Expand Up @@ -248,6 +249,7 @@ Ratings.propTypes = {
rating: _propTypes2.default.number.isRequired,
typeOfWidget: _propTypes2.default.string.isRequired,
changeRating: _propTypes2.default.func,
disableHover: _propTypes2.default.bool.isRequired,
gradientPathName: _propTypes2.default.string.isRequired,
ignoreInlineStyles: _propTypes2.default.bool.isRequired,
svgIconPaths: _propTypes2.default.string.isRequired,
Expand All @@ -264,6 +266,7 @@ Ratings.defaultProps = {
rating: 0,
typeOfWidget: 'Star',
changeRating: null,
disableHover: false,
ignoreInlineStyles: false,
gradientPathName: '',
svgIconPaths: 'm25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z',
Expand Down
Loading