Skip to content

Commit c80ff5a

Browse files
authored
реможе: deprecated modules for ратинг samples (#841)
1 parent be9e9e0 commit c80ff5a

5 files changed

Lines changed: 50 additions & 65 deletions

File tree

samples/inputs/rating/basic/src/index.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
4-
import { IgrRating, IgrRatingModule,} from 'igniteui-react';
4+
import { IgrRating } from 'igniteui-react';
55
import 'igniteui-webcomponents/themes/light/bootstrap.css';
66

7-
IgrRatingModule.register();
8-
97
export default class RatingOverview extends React.Component<any, any> {
108

119
constructor(props: any) {

samples/inputs/rating/custom/src/index.tsx

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
4-
import { IgrRating, IgrRatingModule, IgrRatingSymbol, IgrRatingSymbolModule, IgrIcon, IgrIconModule, registerIconFromText } from 'igniteui-react';
4+
import { IgrRating, IgrRatingSymbol, IgrIcon, registerIconFromText } from 'igniteui-react';
55
import 'igniteui-webcomponents/themes/light/bootstrap.css';
66

7-
IgrRatingModule.register();
8-
IgrRatingSymbolModule.register();
9-
IgrIconModule.register();
10-
117
const emptyHeart = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 241.597 220.057' version='1.0'><path style='opacity:.98000004;fill:none;stroke:#000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0' d='M243.452 1708.979c-26.934.23-51.58 21.476-55.081 48.293-3.114 23.844 7.33 47.4 23.968 64.215 27.515 27.805 61.227 49.794 83.447 82.547 4.39-4.689 9.278-12.066 14.227-17.529 25.23-27.85 58.166-48.013 80.865-78.155 17.175-22.806 19.103-58.113-.538-80.405-18.25-20.712-51.76-25.17-74.37-9.254-8.226 5.791-15.274 13.37-19.932 22.312-10.053-19.32-30.534-32.214-52.586-32.024z' transform='translate(-175.323 -1696.476)'/></svg>";
128
const heartIcon = '<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" id="svg1" viewBox="0 0 475.82 442.01" version="1.0"> <g id="layer1" transform="translate(-134.07 -225.8)"> <path id="path7" d="m263.42 235.15c-66.24 0-120 53.76-120 120 0 134.75 135.93 170.08 228.56 303.3 87.57-132.4 228.56-172.85 228.56-303.3 0-66.24-53.76-120-120-120-48.05 0-89.4 28.37-108.56 69.18-19.16-40.81-60.52-69.18-108.56-69.18z" stroke="#000" stroke-width="18.7" fill="#e60000"/> </g> </svg>';
139

@@ -23,25 +19,25 @@ export default class RatingCustomSymbols extends React.Component<any, any> {
2319
return (
2420
<div className="container sample">
2521
<IgrRating className="size-large" label="Rate Experience" step={.5} value={3} hoverPreview={true}>
26-
<IgrRatingSymbol key="0">
27-
<div key="div0"><IgrIcon name='heart' collection="material" key="default0"></IgrIcon></div>
28-
<div key="empty-div0" slot='empty'><IgrIcon name='emptyHeart' collection="material" key="empty0"></IgrIcon></div>
22+
<IgrRatingSymbol>
23+
<div><IgrIcon name='heart' collection="material"></IgrIcon></div>
24+
<div slot='empty'><IgrIcon name='emptyHeart' collection="material"></IgrIcon></div>
2925
</IgrRatingSymbol>
30-
<IgrRatingSymbol key="1">
31-
<div key="div1"><IgrIcon name='heart' collection="material" key="default1"></IgrIcon></div>
32-
<div key="empty-div1" slot='empty'><IgrIcon name='emptyHeart' collection="material" key="empty1"></IgrIcon></div>
26+
<IgrRatingSymbol>
27+
<div><IgrIcon name='heart' collection="material"></IgrIcon></div>
28+
<div slot='empty'><IgrIcon name='emptyHeart' collection="material"></IgrIcon></div>
3329
</IgrRatingSymbol>
34-
<IgrRatingSymbol key="2">
35-
<div key="div2"><IgrIcon name='heart' collection="material" key="default2"></IgrIcon></div>
36-
<div key="empty-div2" slot='empty'><IgrIcon name='emptyHeart' collection="material" key="empty2"></IgrIcon></div>
30+
<IgrRatingSymbol>
31+
<div><IgrIcon name='heart' collection="material"></IgrIcon></div>
32+
<div slot='empty'><IgrIcon name='emptyHeart' collection="material"></IgrIcon></div>
3733
</IgrRatingSymbol>
38-
<IgrRatingSymbol key="3">
39-
<div key="div3"><IgrIcon name='heart' collection="material" key="default3"></IgrIcon></div>
40-
<div key="empty-div3" slot='empty'><IgrIcon name='emptyHeart' collection="material" key="empty3"></IgrIcon></div>
34+
<IgrRatingSymbol>
35+
<div><IgrIcon name='heart' collection="material"></IgrIcon></div>
36+
<div slot='empty'><IgrIcon name='emptyHeart' collection="material"></IgrIcon></div>
4137
</IgrRatingSymbol>
42-
<IgrRatingSymbol key="4">
43-
<div key="div4"><IgrIcon name='heart' collection="material" key="default4"></IgrIcon></div>
44-
<div key="empty-div4" slot='empty'><IgrIcon name='emptyHeart' collection="material" key="empty4"></IgrIcon></div>
38+
<IgrRatingSymbol>
39+
<div><IgrIcon name='heart' collection="material"></IgrIcon></div>
40+
<div slot='empty'><IgrIcon name='emptyHeart' collection="material"></IgrIcon></div>
4541
</IgrRatingSymbol>
4642
</IgrRating>
4743
</div>

samples/inputs/rating/empty/src/index.tsx

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
4-
import { IgrRating, IgrRatingModule, IgrRatingSymbol, IgrRatingSymbolModule, IgrIcon, IgrIconModule, registerIconFromText } from 'igniteui-react';
4+
import { IgrRating, IgrRatingSymbol, IgrIcon, registerIconFromText } from 'igniteui-react';
55
import 'igniteui-webcomponents/themes/light/bootstrap.css';
66

7-
IgrRatingModule.register();
8-
IgrRatingSymbolModule.register();
9-
IgrIconModule.register();
10-
117
const bandageIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="bdbandage-desc bdbandage-title" fit="" preserveAspectRatio="xMidYMid meet"><title id="bdbandage-title">Bandage Icon</title><desc id="bdbandage-desc">A picture depicting a bandage.</desc><path d="M3.212 10.03a3 3 0 010-4.242l2.576-2.576a3 3 0 014.242 0l.556.556-6.818 6.818zm17.5.334L10.364 20.707a4 4 0 01-5.657 0l-1.414-1.414a4 4 0 010-5.657L13.636 3.293a4 4 0 015.657 0l1.414 1.414a4 4 0 010 5.657zM14 5a1 1 0 101-1 1 1 0 00-1 1zm-2.5 2.5a1 1 0 101-1 1 1 0 00-1 1zM9 10a1 1 0 101-1 1 1 0 00-1 1zm-4 6a1 1 0 10-1-1 1 1 0 001 1zm1.75 2.25a1 1 0 10-1 1 1 1 0 001-1zm.75-4.75a1 1 0 10-1-1 1 1 0 001 1zm.75 3.25a1 1 0 10-1-1 1 1 0 001 1zM10 19a1 1 0 10-1 1 1 1 0 001-1zm.75-4.75a1 1 0 10-1-1 1 1 0 001 1zm1.75 2.25a1 1 0 10-1 1 1 1 0 001-1zm.75-4.75a1 1 0 10-1-1 1 1 0 001 1zM15 14a1 1 0 10-1 1 1 1 0 001-1zm.75-4.75a1 1 0 10-1-1 1 1 0 001 1zm1.75 2.25a1 1 0 10-1 1 1 1 0 001-1zm.75-4.75a1 1 0 10-1-1 1 1 0 001 1zM20 9a1 1 0 10-1 1 1 1 0 001-1zm.232 4.414l-6.818 6.818.556.556a3 3 0 004.242 0l2.576-2.576a3 3 0 000-4.242z"></path></svg>';
128
const bacteriaIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="bcbacteria-desc bcbacteria-title" fit="" preserveAspectRatio="xMidYMid meet"><title id="bcbacteria-title">Bacteria Icon</title><desc id="bcbacteria-desc">A picture depicting a bacteria.</desc><path d="M20.867 7.664h-1.3a4.439 4.439 0 00-.467-1.157l.914-.915a1.132 1.132 0 00-1.6-1.6l-.915.914a4.477 4.477 0 00-1.157-.478V3.133a1.133 1.133 0 10-2.265 0v1.294a4.491 4.491 0 00-1.157.478L12 3.991a1.132 1.132 0 00-1.6 1.6l.8.8L9.6 8l-.8-.8a1.133 1.133 0 10-1.6 1.6l.8.8-1.6 1.6-.8-.8A1.132 1.132 0 004 12l.914.914a4.453 4.453 0 00-.477 1.157H3.133a1.133 1.133 0 100 2.265h1.3a4.439 4.439 0 00.477 1.157l-.914.915a1.132 1.132 0 001.6 1.6l.915-.914a4.439 4.439 0 001.157.477v1.3a1.133 1.133 0 102.265 0v-1.3a4.453 4.453 0 001.157-.477l.914.914a1.132 1.132 0 001.6-1.6l-.8-.8 1.6-1.6.8.8a1.133 1.133 0 101.6-1.6l-.8-.8 1.6-1.6.8.8a1.132 1.132 0 101.6-1.6l-.914-.914a4.453 4.453 0 00.477-1.157h1.3a1.133 1.133 0 100-2.265zM15 11a2 2 0 112-2 2 2 0 01-2 2zm-5.5 5a1.5 1.5 0 111.5-1.5A1.5 1.5 0 019.5 16z"></path></svg>';
139

@@ -23,25 +19,25 @@ export default class RatingEmptyAndSelected extends React.Component<any, any> {
2319
return (
2420
<div className="container sample">
2521
<IgrRating>
26-
<IgrRatingSymbol key="0">
27-
<div key="div0"><IgrIcon name='bandage' collection="material" key="default0"></IgrIcon></div>
28-
<div key="empty-div0" slot='empty'><IgrIcon name='bacteria' collection="material" key="empty0"></IgrIcon></div>
22+
<IgrRatingSymbol>
23+
<div><IgrIcon name='bandage' collection="material"></IgrIcon></div>
24+
<div slot='empty'><IgrIcon name='bacteria' collection="material"></IgrIcon></div>
2925
</IgrRatingSymbol>
30-
<IgrRatingSymbol key="1">
31-
<div key="div1"><IgrIcon name='bandage' collection="material" key="default1"></IgrIcon></div>
32-
<div key="empty-div1" slot='empty'><IgrIcon name='bacteria' collection="material" key="empty1"></IgrIcon></div>
26+
<IgrRatingSymbol>
27+
<div><IgrIcon name='bandage' collection="material"></IgrIcon></div>
28+
<div slot='empty'><IgrIcon name='bacteria' collection="material"></IgrIcon></div>
3329
</IgrRatingSymbol>
34-
<IgrRatingSymbol key="2">
35-
<div key="div2"><IgrIcon name='bandage' collection="material" key="default2"></IgrIcon></div>
36-
<div key="empty-div2" slot='empty'><IgrIcon name='bacteria' collection="material" key="empty2"></IgrIcon></div>
30+
<IgrRatingSymbol>
31+
<div><IgrIcon name='bandage' collection="material"></IgrIcon></div>
32+
<div slot='empty'><IgrIcon name='bacteria' collection="material"></IgrIcon></div>
3733
</IgrRatingSymbol>
38-
<IgrRatingSymbol key="3">
39-
<div key="div3"><IgrIcon name='bandage' collection="material" key="default3"></IgrIcon></div>
40-
<div key="empty-div3" slot='empty'><IgrIcon name='bacteria' collection="material" key="empty3"></IgrIcon></div>
34+
<IgrRatingSymbol>
35+
<div><IgrIcon name='bandage' collection="material"></IgrIcon></div>
36+
<div slot='empty'><IgrIcon name='bacteria' collection="material"></IgrIcon></div>
4137
</IgrRatingSymbol>
42-
<IgrRatingSymbol key="4">
43-
<div key="div4"><IgrIcon name='bandage' collection="material" key="default4"></IgrIcon></div>
44-
<div key="empty-div4" slot='empty'><IgrIcon name='bacteria' collection="material" key="empty4"></IgrIcon></div>
38+
<IgrRatingSymbol>
39+
<div><IgrIcon name='bandage' collection="material"></IgrIcon></div>
40+
<div slot='empty'><IgrIcon name='bacteria' collection="material"></IgrIcon></div>
4541
</IgrRatingSymbol>
4642
</IgrRating>
4743
</div>

samples/inputs/rating/single-selection/src/index.tsx

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
4-
import { IgrRating, IgrRatingModule, IgrRatingSymbol, IgrRatingSymbolModule, IgrIconModule } from 'igniteui-react';
4+
import { IgrRating, IgrRatingSymbol } from 'igniteui-react';
55
import 'igniteui-webcomponents/themes/light/bootstrap.css';
66

7-
IgrRatingModule.register();
8-
IgrRatingSymbolModule.register();
9-
IgrIconModule.register();
107
export default class RatingSingleSelection extends React.Component<any, any> {
118

129
constructor(props: any) {
@@ -17,25 +14,25 @@ export default class RatingSingleSelection extends React.Component<any, any> {
1714
return (
1815
<div className="container sample">
1916
<IgrRating label="Rate Experience" single={true}>
20-
<IgrRatingSymbol key="0">
21-
<div key="div0">😣</div>
22-
<div key="empty-div0" slot="empty">😣</div>
17+
<IgrRatingSymbol>
18+
<div>😣</div>
19+
<div slot="empty">😣</div>
2320
</IgrRatingSymbol>
24-
<IgrRatingSymbol key="1">
25-
<div key="div1">😔</div>
26-
<div key="empty-div1" slot="empty">😔</div>
21+
<IgrRatingSymbol>
22+
<div>😔</div>
23+
<div slot="empty">😔</div>
2724
</IgrRatingSymbol>
28-
<IgrRatingSymbol key="2">
29-
<div key="div2">😐</div>
30-
<div key="empty-div2" slot="empty">😐</div>
25+
<IgrRatingSymbol>
26+
<div>😐</div>
27+
<div slot="empty">😐</div>
3128
</IgrRatingSymbol>
32-
<IgrRatingSymbol key="3">
33-
<div key="div3">🙂</div>
34-
<div key="empty-div3" slot="empty">🙂</div>
29+
<IgrRatingSymbol>
30+
<div>🙂</div>
31+
<div slot="empty">🙂</div>
3532
</IgrRatingSymbol>
36-
<IgrRatingSymbol key="4">
37-
<div key="div4">😆</div>
38-
<div key="empty-div4" slot="empty">😆</div>
33+
<IgrRatingSymbol>
34+
<div>😆</div>
35+
<div slot="empty">😆</div>
3936
</IgrRatingSymbol>
4037
</IgrRating>
4138
</div>

samples/inputs/rating/styling/src/index.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
4-
import { IgrRating, IgrRatingModule,} from 'igniteui-react';
4+
import { IgrRating } from 'igniteui-react';
55
import 'igniteui-webcomponents/themes/light/bootstrap.css';
66

7-
IgrRatingModule.register();
8-
97
export default class RatingStyling extends React.Component<any, any> {
108

119
constructor(props: any) {

0 commit comments

Comments
 (0)