Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

rating

v1.10.0arrow_drop_down
v1.10.0
v1.9.0
v1.7.0
v1.6.1
v1.4.0
STATUS
Passing
DOWNLOADS
115
VISIBILITY
Public
PUBLISHED
A year ago
SIZE
21 KB
Rating page object class.
1 contributor
Install rating as a package?
Copied
npm i @bit/nexxtway.react-rainbow.rating
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Files
components/Rating/index.js
81 Lines(67 sloc)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import RatingItems from './ratingItems';
import { uniqueId } from '../../libs/utils';
import RenderIf from '../RenderIf';
import StyledContainer from './styled/container';
import StyledLabel from './styled/label';

/** @category Form */
export default class Rating extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: props.value,
        };
        this.starGroupNameId = uniqueId('starGroup');
        this.handleOnHover = this.handleOnHover.bind(this);
        this.handleOnLeave = this.handleOnLeave.bind(this);
    }

    getName() {
        const { name } = this.props;
        if (name) {
            return name;
        }
        return this.starGroupNameId;
    }

    handleOnHover(event) {
        if (event.target.value) {
            return this.setState({ value: event.target.value });
        }
        return null;
    }

    handleOnLeave() {
        return this.setState({ value: this.props.value });
    }

    render() {
        const { style, className, onChange, label } = this.props;
        const { value } = this.state;
        return (
            <StyledContainer
                onMouseOver={this.handleOnHover}
                onMouseLeave={this.handleOnLeave}
                className={className}
                style={style}
            >
                <RenderIf isTrue={!!label}>
                    <StyledLabel>{label}</StyledLabel>
                </RenderIf>
                <RatingItems onChange={onChange} value={value} name={this.getName()} />
            </StyledContainer>
        );
    }
}

Rating.propTypes = {
    /** The value of the rating stars. This value defaults to 0. */
    value: PropTypes.string,
    /** The action triggered when a value attribute changes. */
    onChange: PropTypes.func,
    /** An identifier for the group of radio items. */
    name: PropTypes.string,
    /** The rating label */
    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    /** A CSS class for the outer element, in addition to the component's base classes. */
    className: PropTypes.string,
    /** An object with custom style applied for the outer element. */
    style: PropTypes.object,
};

Rating.defaultProps = {
    value: undefined,
    onChange: () => {},
    name: undefined,
    label: null,
    className: undefined,
    style: undefined,
};