5aadbde4b9
Summary: This was an error appearing in the console that was bugging me. About how arrays of React nodes should have a key prop. Reviewed By: passy Differential Revision: D16646487 fbshipit-source-id: b61841c001eb4a93f0a071557b921ca7365e2ac3
86 lines
2.0 KiB
JavaScript
86 lines
2.0 KiB
JavaScript
/**
|
|
* Copyright 2018-present Facebook.
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
* @format
|
|
*/
|
|
|
|
import {Component, type Element, Fragment} from 'react';
|
|
import {Glyph, Tooltip} from 'flipper';
|
|
import {getInstance as getLogger} from '../fb-stubs/Logger';
|
|
import GK from '../fb-stubs/GK';
|
|
|
|
type Props = {
|
|
rating: ?number,
|
|
onRatingChanged: number => void,
|
|
};
|
|
|
|
type State = {
|
|
hoveredRating: ?number,
|
|
};
|
|
|
|
export default class RatingButton extends Component<Props, State> {
|
|
state = {
|
|
hoveredRating: null,
|
|
};
|
|
|
|
onRatingChanged(rating: number) {
|
|
const previousRating = this.props.rating;
|
|
if (rating === previousRating) {
|
|
return;
|
|
}
|
|
this.props.onRatingChanged(rating);
|
|
getLogger().track('usage', 'flipper-rating-changed', {
|
|
rating,
|
|
previousRating,
|
|
});
|
|
}
|
|
|
|
render() {
|
|
if (!GK.get('flipper_rating')) {
|
|
return null;
|
|
}
|
|
const rating = this.props.rating || 0;
|
|
if (rating < 0 || rating > 5) {
|
|
throw new Error(`Rating must be between 0 and 5. Value: ${rating}`);
|
|
}
|
|
const stars = Array(5)
|
|
.fill(true)
|
|
.map<Element<*>>((_, index) => (
|
|
<div
|
|
key={index}
|
|
role="button"
|
|
tabIndex={0}
|
|
onMouseEnter={() => {
|
|
this.setState({hoveredRating: index + 1});
|
|
}}
|
|
onMouseLeave={() => {
|
|
this.setState({hoveredRating: null});
|
|
}}
|
|
onClick={() => {
|
|
this.onRatingChanged(index + 1);
|
|
}}>
|
|
<Glyph
|
|
name="star"
|
|
color="grey"
|
|
variant={
|
|
(this.state.hoveredRating
|
|
? index < this.state.hoveredRating
|
|
: index < rating)
|
|
? 'filled'
|
|
: 'outline'
|
|
}
|
|
/>
|
|
</div>
|
|
));
|
|
const button = <Fragment>{stars}</Fragment>;
|
|
return (
|
|
<Tooltip
|
|
options={{position: 'toLeft'}}
|
|
title="How would you rate Flipper?"
|
|
children={button}
|
|
/>
|
|
);
|
|
}
|
|
}
|