Skip to content

Commit

Permalink
Fixed #3219 - Rating Component with custom icons. (#3248)
Browse files Browse the repository at this point in the history 
* feat: add new attributes to rating component.(onIcon, offIcon, onIconProps, offIconProps, cancelIcon, cancelIconProps).
fix: wrong value on the rating docs.
fix: typo on the rating demo page.

* build: add missing attributes on the api generator/rating.

* fix: typo on Rating Demo page.

Co-authored-by: Ulaş Turan <[email protected]>
  • Loading branch information
@ulasturann
ulasturann and Ulaş Turan authored Sep 7, 2022
1 parent 8588f67 commit cc28c50
Show file tree
Hide file tree
Showing 9 changed files with 233 additions and 69 deletions.
36 changes: 36 additions & 0 deletions api-generator/components/rating.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,18 @@ const RatingProps = [
default: 'true',
description: 'When specified a cancel icon is displayed to allow removing the value.'
},
{
name: 'cancelIcon',
type: 'string',
default: 'pi pi-ban',
description: 'ClassName of the cancel icon component.'
},
{
name: 'cancelIconProps',
type: 'object',
default: 'null',
description: 'Properties of the cancel icon.'
},
{
name: 'style',
type: 'object',
Expand All @@ -47,6 +59,30 @@ const RatingProps = [
default: 'null',
description: 'ClassName of the component.'
},
{
name: 'onIcon',
type: 'string',
default: 'pi pi-star-fill',
description: 'ClassName of the icon on component.'
},
{
name: 'offIcon',
type: 'string',
default: 'pi pi-star',
description: 'ClassName of the icon off component.'
},
{
name: 'onIconProps',
type: 'object',
default: 'null',
description: 'Properties of the on icon.'
},
{
name: 'offIconProps',
type: 'object',
default: 'null',
description: 'Properties of the off icon.'
},
{
name: 'tooltip',
type: 'any',
Expand Down
201 changes: 146 additions & 55 deletions components/doc/rating/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ const RatingDoc = memo(() => {
content: `
import React, { Component } from 'react';
import { Rating } from 'primereact/rating';
import * as CustomImage from './custom-icon.png';
import * as CustomImageActive from './custom-icon-active.png';
import * as CustomCancelImage from './cancel.png';
import Image from 'next/image';
export class RatingDemo extends Component {
Expand All @@ -20,26 +24,32 @@ export class RatingDemo extends Component {
this.state = {
val1: null,
val2: null
val2: null,
val3: null
};
}
render() {
return (
<div>
<div className="card">
<h5>Basic {this.state.val1}</h5>
<Rating value={this.state.val1} onChange={(e) => this.setState({val1: e.value})} />
<h5>Without Cancel</h5>
<Rating value={this.state.val2} cancel={false} onChange={(e) => this.setState({val2: e.value})} />
<h5>ReadOnly</h5>
<Rating value={5} readOnly stars={10} cancel={false} />
<h5>Disabled</h5>
<Rating value={8} disabled stars={10} />
</div>
<div className="card">
<h5>Basic {this.state.val1}</h5>
<Rating value={this.state.val1} onChange={(e) => this.setState({val1: e.value})} />
<h5>Without Cancel</h5>
<Rating value={this.state.val2} cancel={false} onChange={(e) => this.setState({val2: e.value})} />
<h5>ReadOnly</h5>
<Rating value={5} readOnly stars={10} cancel={false} />
<h5>Disabled</h5>
<Rating value={8} disabled stars={10} />
<h5>Customization</h5>
<Rating
value={this.state.val3}
onIcon={<Image src={CustomImageActive} alt="custom-image-active" width="30px" height="30px" />}
offIcon={<Image src={CustomImage} alt="custom-image" width="30px" height="30px" />}
onChange={(e) => this.setState({val3: e.value})}
cancelIcon={<Image src={CustomCancelImage} alt="custom-cancel-image" width="30px" height="30px" />}
/>
</div>
</div>
)
}
Expand All @@ -51,26 +61,36 @@ export class RatingDemo extends Component {
content: `
import React, { useState } from 'react';
import { Rating } from 'primereact/rating';
import * as CustomImage from './custom-icon.png';
import * as CustomImageActive from './custom-icon-active.png';
import * as CustomCancelImage from './cancel.png';
import Image from 'next/image';
const RatingDemo = () => {
const [val1, setVal1] = useState(null);
const [val2, setVal2] = useState(null);
const [val3, setVal3] = useState(null);
return (
<div>
<div className="card">
<h5>Basic {val1}</h5>
<Rating value={val1} onChange={(e) => setVal1(e.value)} />
<h5>Without Cancel</h5>
<Rating value={val2} cancel={false} onChange={(e) => setVal2(e.value)} />
<h5>ReadOnly</h5>
<Rating value={5} readOnly stars={10} cancel={false} />
<h5>Disabled</h5>
<Rating value={8} disabled stars={10} />
</div>
<div className="card">
<h5>Basic {val1}</h5>
<Rating value={val1} onChange={(e) => setVal1(e.value)} />
<h5>Without Cancel</h5>
<Rating value={val2} cancel={false} onChange={(e) => setVal2(e.value)} />
<h5>ReadOnly</h5>
<Rating value={5} readOnly stars={10} cancel={false} />
<h5>Disabled</h5>
<Rating value={8} disabled stars={10} />
<h5>Customization</h5>
<Rating
value={val3}
onIcon={<Image src={CustomImageActive} alt="custom-image-active" width="30px" height="30px" />}
offIcon={<Image src={CustomImage} alt="custom-image" width="30px" height="30px" />}
onChange={(e) => setVal3(e.value)}
cancelIcon={<Image src={CustomCancelImage} alt="custom-cancel-image" width="30px" height="30px" />}
/>
</div>
</div>
)
}
Expand All @@ -81,26 +101,35 @@ const RatingDemo = () => {
content: `
import React, { useState } from 'react';
import { Rating } from 'primereact/rating';
import * as CustomImage from './custom-icon.png';
import * as CustomImageActive from './custom-icon-active.png';
import * as CustomCancelImage from './cancel.png';
import Image from 'next/image';
const RatingDemo = () => {
const [val1, setVal1] = useState(null);
const [val2, setVal2] = useState(null);
const [val3, setVal3] = useState(null);
return (
<div>
<div className="card">
<h5>Basic {val1}</h5>
<Rating value={val1} onChange={(e) => setVal1(e.value)} />
<h5>Without Cancel</h5>
<Rating value={val2} cancel={false} onChange={(e) => setVal2(e.value)} />
<h5>ReadOnly</h5>
<Rating value={5} readOnly stars={10} cancel={false} />
<h5>Disabled</h5>
<Rating value={8} disabled stars={10} />
</div>
<h5>Basic {val1}</h5>
<Rating value={val1} onChange={(e) => setVal1(e.value)} />
<h5>Without Cancel</h5>
<Rating value={val2} cancel={false} onChange={(e) => setVal2(e.value)} />
<h5>ReadOnly</h5>
<Rating value={5} readOnly stars={10} cancel={false} />
<h5>Disabled</h5>
<Rating value={8} disabled stars={10} />
<h5>Customization</h5>
<Rating
value={val3}
onIcon={<Image src={CustomImageActive} alt="custom-image-active" width="30px" height="30px" />}
offIcon={<Image src={CustomImage} alt="custom-image" width="30px" height="30px" />}
onChange={(e) => setVal3(e.value)}
cancelIcon={<Image src={CustomCancelImage} alt="custom-cancel-image" width="30px" height="30px" />}
/>
</div>
</div>
)
}
Expand All @@ -114,26 +143,35 @@ const RatingDemo = () => {
content: `
const { useState } = React;
const { Rating } = primereact.rating;
import * as CustomImage from './custom-icon.png';
import * as CustomImageActive from './custom-icon-active.png';
import * as CustomCancelImage from './cancel.png';
import Image from 'next/image';
const RatingDemo = () => {
const [val1, setVal1] = useState(null);
const [val2, setVal2] = useState(null);
const [val3, setVal3] = useState(null);
return (
<div>
<div className="card">
<h5>Basic {val1}</h5>
<Rating value={val1} onChange={(e) => setVal1(e.value)} />
<h5>Without Cancel</h5>
<Rating value={val2} cancel={false} onChange={(e) => setVal2(e.value)} />
<h5>ReadOnly</h5>
<Rating value={5} readOnly stars={10} cancel={false} />
<h5>Disabled</h5>
<Rating value={8} disabled stars={10} />
</div>
<h5>Basic {val1}</h5>
<Rating value={val1} onChange={(e) => setVal1(e.value)} />
<h5>Without Cancel</h5>
<Rating value={val2} cancel={false} onChange={(e) => setVal2(e.value)} />
<h5>ReadOnly</h5>
<Rating value={5} readOnly stars={10} cancel={false} />
<h5>Disabled</h5>
<Rating value={8} disabled stars={10} />
<h5>Customization</h5>
<Rating
value={val3}
onIcon={<Image src={CustomImageActive} alt="custom-image-active" width="30px" height="30px" />}
offIcon={<Image src={CustomImage} alt="custom-image" width="30px" height="30px" />}
onChange={(e) => setVal3(e.value)}
cancelIcon={<Image src={CustomCancelImage} alt="custom-cancel-image" width="30px" height="30px" />}
/>
</div>
</div>
)
}
Expand Down Expand Up @@ -184,12 +222,29 @@ import { Rating } from 'primereact/rating';

<h5>Cancel</h5>
<p>
A cancel icon is displayed to reset the value by default, set <i>cancel</i> as false to remove this option.
A cancel icon is displayed to reset the value by default, set <i>cancel</i> as false to remove this option, default is <span style={{ color: '#CC7E09' }}>'pi pi-ban'</span>.{' '}
</p>

<CodeHighlight>
{`
<Rating value={value} onChange={(e) => setValue(e.value)} cancel={5} />
<Rating value={value} onChange={(e) => setValue(e.value)} cancel={false} />
`}
</CodeHighlight>

<h5>Custom Icons</h5>
<p>
Custom icons are used to override the default icons with these properties;
<i>onIcon</i>
<i>offIcon</i>
<i>onIconClass</i>
<i>offIconClass</i>
<i>cancelIcon</i>
<i>cancelIconProps</i>, default is <span style={{ color: '#CC7E09' }}>'pi pi-star'</span>.
</p>

<CodeHighlight>
{`
<Rating value={value} onIcon={<Image src={CustomImageActive} />} offIcon={<Image src={CustomImage} />} cancelIcon={<Image src={CustomCancelImage} />} onChange={(e) => setValue(e.value)} />
`}
</CodeHighlight>

Expand Down Expand Up @@ -242,6 +297,18 @@ import { Rating } from 'primereact/rating';
<td>true</td>
<td>When specified a cancel icon is displayed to allow removing the value.</td>
</tr>
<tr>
<td>cancelIcon</td>
<td>string</td>
<td>pi pi-ban</td>
<td>ClassName of the cancel icon component.</td>
</tr>
<tr>
<td>cancelIconProps</td>
<td>object</td>
<td>null</td>
<td>Properties of the cancel icon.</td>
</tr>
<tr>
<td>style</td>
<td>object</td>
Expand All @@ -254,6 +321,30 @@ import { Rating } from 'primereact/rating';
<td>null</td>
<td>ClassName of the component.</td>
</tr>
<tr>
<td>onIcon</td>
<td>string</td>
<td>pi pi-star-fill</td>
<td>ClassName of the on icon component.</td>
</tr>
<tr>
<td>offIcon</td>
<td>string</td>
<td>pi pi-star</td>
<td>ClassName of the off icon component.</td>
</tr>
<tr>
<td>onIconProps</td>
<td>object</td>
<td>null</td>
<td>Properties of the on icon.</td>
</tr>
<tr>
<td>offIconProps</td>
<td>object</td>
<td>null</td>
<td>Properties of the off icon.</td>
</tr>
<tr>
<td>tooltip</td>
<td>any</td>
Expand Down
5 changes: 5 additions & 0 deletions components/lib/rating/Rating.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
.p-rating {
display: flex;
align-items: center;
}

.p-rating-icon {
cursor: pointer;
}
Expand Down
Loading

0 comments on commit cc28c50

Please sign in to comment.