Skip to content

Commit

Permalink
Fixed #36
Browse files Browse the repository at this point in the history
  • Loading branch information
@mertsincan
mertsincan committed Jun 25, 2017
1 parent 7c8dc01 commit f60e1ce
Show file tree
Hide file tree
Showing 4 changed files with 362 additions and 0 deletions.
1 change: 1 addition & 0 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,7 @@ class AppMenu extends Component {
<Link to="/inputmask">&#9679; InputMask</Link>
<Link to="/calendar">&#9679; Calendar</Link>
<Link to="/colorpicker">&#9679; ColorPicker</Link>
<Link to="/rating">&#9679; Rating</Link>
</div>

<a href="#" onClick={(event) => this.openMenu(event, 1)} className={classNames({ 'active-menuitem': this.state.activeMenu === 1 })}>
Expand Down
92 changes: 92 additions & 0 deletions src/components/rating/Rating.js
View file
Original file line number Diff line number Diff line change
@@ -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 && <a href="#" onClick={this.clear.bind(this)}>
<span className="fa fa-ban"></span>
</a>),
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 (
<a href="#" onClick={(e) => this.rate(e, index)} key={'star_' + index}>
<span className={iconClass}></span>
</a>
);
});

return (<div className={ratingClass}>
{cancel}
{stars}
</div>);
}
}
2 changes: 2 additions & 0 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -101,6 +102,7 @@ ReactDOM.render(
<Route path="/treetable" component={TreeTableDemo} />
<Route path="/captcha" component={CaptchaDemo} />
<Route path="/colorpicker" component={ColorPickerDemo} />
<Route path="/rating" component={RatingDemo} />
<Route path="/setup" component={SetupPage} />
</Route>
</Router>,
Expand Down
267 changes: 267 additions & 0 deletions src/showcase/rating/RatingDemo.js
View file
Original file line number Diff line number Diff line change
@@ -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 (
<div>
<div className="content-section">
<div className="feature-intro">
<h1>Rating</h1>
<p>Rating components is a star based selection input.</p>
</div>
</div>

<div className="content-section implementation">
<h3>Basic {this.state.val1}</h3>
<Rating value={this.state.val1} onChange={this.onBasicChange.bind(this)}/>
<br />

<h3>Message {this.state.val2}</h3>
<Rating value={this.state.val2} onChange={this.onMessageChange.bind(this)} /> {this.state.val2 !== undefined && <span style={{'marginLeft': '10px'}}>{this.state.val2===null?"Rating Cancelled":"You have rated " + this.state.val2}</span>}
<br />

<h3>No Cancel {this.state.val3}</h3>
<Rating value={this.state.val3} cancel={false} onChange={this.onNoCancelChange.bind(this)} />
<br />

<h3>ReadOnly</h3>
<Rating value={5} readonly={true} stars={10} cancel={false} />
<br />

<h3>Disabled</h3>
<Rating value={this.state.val4} disabled={true} stars={10} />
<br />
</div>

<RatingDoc />
</div>
)
}
}

class RatingDoc extends Component {

render() {
return (
<div className="content-section source">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<CodeHighlight className="language-javascript">
{`
import {Rating} from 'primereact/components/rating/Rating';
`}
</CodeHighlight>

<h3>Getting Started</h3>
<p>Rating requires onChange method.</p>
<CodeHighlight className="language-markup">
{`
<Rating value={this.state.val1} onChange={this.onBasicChange.bind(this)}/>
`}
</CodeHighlight>

<CodeHighlight className="language-javascript">
{`
constructor() {
super();
this.state = { val1: null };
}
onBasicChange(event) {
this.setState({val1: event.value});
}
render() {
return (
<Rating value={this.state.val1} onChange={this.onBasicChange.bind(this)}/>
);
}
`}
</CodeHighlight>
<h3>Attributes</h3>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>stars</td>
<td>number</td>
<td>5</td>
<td>Number of stars.</td>
</tr>
<tr>
<td>cancel</td>
<td>boolean</td>
<td>true</td>
<td>When specified a cancel icon is displayed to allow removing the value.</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the element should be disabled.</td>
</tr>
<tr>
<td>readonly</td>
<td>boolean</td>
<td>false</td>
<td>When present, changing the value is not possible.</td>
</tr>
</tbody>
</table>
</div>

<h3>Events</h3>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>onChange</td>
<td>event.originalEvent: browser event <br />
event.value: selected value
</td>
<td>Callback to invoke on rate change.</td>
</tr>
</tbody>
</table>
</div>

<h3>Styling</h3>
<p>Following is the list of structural style classes</p>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>ui-rating</td>
<td>Container element</td>
</tr>
<tr>
<td>ui-rating-star</td>
<td>Star element</td>
</tr>
<tr>
<td>ui-rating-star-on</td>
<td>Selected star element.</td>
</tr>
<tr>
<td>ui-rating-cancel</td>
<td>Cancel icon.</td>
</tr>
</tbody>
</table>
</div>

<h3>Dependencies</h3>
<p>None.</p>
</TabPanel>

<TabPanel header="Source">
<CodeHighlight className="language-javascript">
{`
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 (
<div>
<div className="content-section">
<div className="feature-intro">
<h1>Rating</h1>
<p>Rating components is a star based selection input.</p>
</div>
</div>
<div className="content-section implementation">
<h3>Basic {this.state.val1}</h3>
<Rating value={this.state.val1} onChange={this.onBasicChange.bind(this)}/>
<br />
<h3>Message {this.state.val2}</h3>
<Rating value={this.state.val2} onChange={this.onMessageChange.bind(this)} /> {this.state.val2 !== undefined && <span style={{'marginLeft': '10px'}}>{this.state.val2===null?"Rating Cancelled":"You have rated " + this.state.val2}</span>}
<br />
<h3>No Cancel {this.state.val3}</h3>
<Rating value={this.state.val3} cancel={false} onChange={this.onNoCancelChange.bind(this)} />
<br />
<h3>ReadOnly</h3>
<Rating value={5} readonly={true} stars={10} cancel={false} />
<br />
<h3>Disabled</h3>
<Rating value={this.state.val4} disabled={true} stars={10} />
<br />
</div>
</div>
)
}
}
`}
</CodeHighlight>
</TabPanel>
</TabView >
</div>
)
}
}

0 comments on commit f60e1ce

Please sign in to comment.