From f60e1ce80d3cb21090fa1d359db68364855ea5b2 Mon Sep 17 00:00:00 2001 From: mertsincan Date: Sun, 25 Jun 2017 13:08:53 +0300 Subject: [PATCH] Fixed #36 --- src/App.js | 1 + src/components/rating/Rating.js | 92 ++++++++++ src/index.js | 2 + src/showcase/rating/RatingDemo.js | 267 ++++++++++++++++++++++++++++++ 4 files changed, 362 insertions(+) create mode 100644 src/components/rating/Rating.js create mode 100644 src/showcase/rating/RatingDemo.js diff --git a/src/App.js b/src/App.js index 7dfd1fc033..8d7279c8bf 100644 --- a/src/App.js +++ b/src/App.js @@ -159,6 +159,7 @@ class AppMenu extends Component { ● InputMask ● Calendar ● ColorPicker + ● Rating this.openMenu(event, 1)} className={classNames({ 'active-menuitem': this.state.activeMenu === 1 })}> diff --git a/src/components/rating/Rating.js b/src/components/rating/Rating.js new file mode 100644 index 0000000000..d9fe868aeb --- /dev/null +++ b/src/components/rating/Rating.js @@ -0,0 +1,92 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +export class Rating extends Component { + + static defaultProps = { + value: null, + disabled: false, + readonly: false, + stars: 5, + cancel: true + } + + static propsTypes = { + value: PropTypes.string, + disabled: PropTypes.bool, + readonly: PropTypes.bool, + stars: PropTypes.number, + cancel: PropTypes.bool + } + + constructor(props) { + super(props); + this.state = {value: this.props.value}; + } + + rate(event, i){ + if(!this.props.readonly&&!this.props.disabled) { + var _value = (i + 1); + this.props.onChange({ + originalEvent: event, + value: _value + }); + this.setState({value: _value}); + } + event.preventDefault(); + } + + clear(event){ + if(!this.props.readonly&&!this.props.disabled) { + var _value = null; + this.props.onChange({ + originalEvent: event, + value: _value + }); + this.setState({value: _value}); + } + event.preventDefault(); + } + + componentWillMount() { + this.starsArray = []; + for(var i = 0; i < this.props.stars; i++) { + this.starsArray[i] = i; + } + } + + componentWillReceiveProps(nextProps) { + var newValue = nextProps.value; + if (newValue !== this.state.value) { + this.setState({value: newValue}); + } + } + + render() { + var ratingClass = classNames('ui-rating', { + 'ui-state-disabled': this.props.disabled + }); + + var cancel = (this.props.cancel && + + ), + stars = this.starsArray && this.starsArray.map((star, index) => { + var iconClass = classNames('fa', { + 'fa-star-o': (!this.state.value || index >= this.state.value), + 'fa-star': (index < this.state.value) + }); + + return ( + this.rate(e, index)} key={'star_' + index}> + + + ); + }); + + return (
+ {cancel} + {stars} +
); + } +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 18d82d5e31..ee6d93eb0b 100644 --- a/src/index.js +++ b/src/index.js @@ -49,6 +49,7 @@ import {TreeTableDemo} from './showcase/treetable/TreeTableDemo'; import {CaptchaDemo} from './showcase/captcha/CaptchaDemo'; import {ColorPickerDemo} from './showcase/colorpicker/ColorPickerDemo'; import {SetupPage} from './showcase/setup/SetupPage'; +import {RatingDemo} from './showcase/rating/RatingDemo'; import {Router,Route,hashHistory} from 'react-router'; ReactDOM.render( @@ -101,6 +102,7 @@ ReactDOM.render( + , diff --git a/src/showcase/rating/RatingDemo.js b/src/showcase/rating/RatingDemo.js new file mode 100644 index 0000000000..b0d3d910c5 --- /dev/null +++ b/src/showcase/rating/RatingDemo.js @@ -0,0 +1,267 @@ +import React, { Component } from 'react'; +import { Rating } from '../../components/rating/Rating' +import { TabView, TabPanel } from '../../components/tabview/TabView'; +import { CodeHighlight } from '../../components/codehighlight/CodeHighlight'; + +export class RatingDemo extends Component { + + constructor() { + super(); + this.state = { val1: null, val2: undefined, val3: null, val4: 8 }; + } + + onBasicChange(event) { + this.setState({val1: event.value}); + } + + onMessageChange(event) { + this.setState({val2: event.value}); + } + + onNoCancelChange(event) { + this.setState({val3: event.value}); + } + + render() { + return ( +
+
+
+

Rating

+

Rating components is a star based selection input.

+
+
+ +
+

Basic {this.state.val1}

+ +
+ +

Message {this.state.val2}

+ {this.state.val2 !== undefined && {this.state.val2===null?"Rating Cancelled":"You have rated " + this.state.val2}} +
+ +

No Cancel {this.state.val3}

+ +
+ +

ReadOnly

+ +
+ +

Disabled

+ +
+
+ + +
+ ) + } +} + +class RatingDoc extends Component { + + render() { + return ( +
+ + +

Import

+ + {` +import {Rating} from 'primereact/components/rating/Rating'; + +`} + + +

Getting Started

+

Rating requires onChange method.

+ + {` + + +`} + + + + {` +constructor() { + super(); + this.state = { val1: null }; +} + +onBasicChange(event) { + this.setState({val1: event.value}); +} + +render() { + return ( + + ); +} + +`} + +

Attributes

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
starsnumber5Number of stars.
cancelbooleantrueWhen specified a cancel icon is displayed to allow removing the value.
disabledbooleanfalseWhen present, it specifies that the element should be disabled.
readonlybooleanfalseWhen present, changing the value is not possible.
+
+ +

Events

+
+ + + + + + + + + + + + + + + +
NameParametersDescription
onChangeevent.originalEvent: browser event
+ event.value: selected value + 		Callback to invoke on rate change.
+
+ +

Styling

+

Following is the list of structural style classes

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
NameElement
ui-ratingContainer element
ui-rating-starStar element
ui-rating-star-onSelected star element.
ui-rating-cancelCancel icon.
+
+ +

Dependencies

+

None.

+ + + + + {` +export class RatingDemo extends Component { + + constructor() { + super(); + this.state = { val1: null, val2: undefined, val3: null, val4: 8 }; + } + + onBasicChange(event) { + this.setState({val1: event.value}); + } + + onMessageChange(event) { + this.setState({val2: event.value}); + } + + onNoCancelChange(event) { + this.setState({val3: event.value}); + } + + render() { + return ( +
+
+
+

Rating

+

Rating components is a star based selection input.

+
+
+ +
+

Basic {this.state.val1}

+ +
+ +

Message {this.state.val2}

+ {this.state.val2 !== undefined && {this.state.val2===null?"Rating Cancelled":"You have rated " + this.state.val2}} +
+ +

No Cancel {this.state.val3}

+ +
+ +

ReadOnly

+ +
+ +

Disabled

+ +
+
+
+ ) + } +} +`} + + + +
+ ) + } +} \ No newline at end of file