Skip to content

Commit 0ff143f

Browse files
author
Mariela Tihova
authored
Update card samples for React19 (#844)
1 parent 1132779 commit 0ff143f

4 files changed

Lines changed: 212 additions & 220 deletions

File tree

‎samples/layouts/card/horizontal/src/index.tsx‎

Lines changed: 28 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -2,48 +2,40 @@ import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
44
import './CardHorizontal.css';
5-
import { IgrCard, IgrCardHeader, IgrCardContent, IgrCardActions, IgrCardModule } from 'igniteui-react';
5+
import { IgrCard, IgrCardHeader, IgrCardContent, IgrCardActions } from 'igniteui-react';
66
import 'igniteui-webcomponents/themes/light/bootstrap.css';
77

8-
IgrCardModule.register();
8+
export default function CardHorizontal() {
99

10-
export default class CardHorizontal extends React.Component<any, any> {
11-
12-
constructor(props: any) {
13-
super(props);
14-
}
15-
16-
public render(): JSX.Element {
17-
return (
18-
<div className="container sample">
19-
<div className="card-wrapper">
20-
<IgrCard>
21-
<div key="cardContainer" className="card-horizontal">
22-
<div key="cardHeaderContainer">
23-
<IgrCardHeader key="cardHeader">
24-
<img key="headerImg" src="https://static.infragistics.com/xplatform/images/music/rozes.jpg" slot="thumbnail"></img>
25-
<h5 key="headerTitle" slot="title">Rozes</h5>
26-
<h5 key="headerSubtitle" slot="subtitle">Under the Grave (2016)</h5>
27-
</IgrCardHeader>
28-
<IgrCardContent key="cardContent">
29-
<p key="content">As I have always said: I write what’s real and what’s true,
30-
even if it means throwing myself under the bus.</p>
31-
</IgrCardContent>
32-
</div>
33-
<div key="divider" className="divider"></div>
34-
<IgrCardActions key="cardActions">
35-
<span key="actionsPrevious" className="material-icons">skip_previous</span>
36-
<span key="actionsPlay" className="material-icons">play_arrow</span>
37-
<span key="actionsNext" className="material-icons">skip_next</span>
38-
</IgrCardActions>
10+
return (
11+
<div className="container sample">
12+
<div className="card-wrapper">
13+
<IgrCard>
14+
<div className="card-horizontal">
15+
<div>
16+
<IgrCardHeader>
17+
<img src="https://static.infragistics.com/xplatform/images/music/rozes.jpg" slot="thumbnail"></img>
18+
<h5 slot="title">Rozes</h5>
19+
<h5 slot="subtitle">Under the Grave (2016)</h5>
20+
</IgrCardHeader>
21+
<IgrCardContent>
22+
<p>As I have always said: I write what’s real and what’s true,
23+
even if it means throwing myself under the bus.</p>
24+
</IgrCardContent>
3925
</div>
40-
</IgrCard>
41-
</div>
26+
<div className="divider"></div>
27+
<IgrCardActions>
28+
<span className="material-icons">skip_previous</span>
29+
<span className="material-icons">play_arrow</span>
30+
<span className="material-icons">skip_next</span>
31+
</IgrCardActions>
32+
</div>
33+
</IgrCard>
4234
</div>
43-
);
44-
}
35+
</div>
36+
);
4537
}
4638

47-
// rendering above class to the React DOM
39+
// rendering above component to the React DOM
4840
const root = ReactDOM.createRoot(document.getElementById('root'));
4941
root.render(<CardHorizontal/>);

‎samples/layouts/card/overview/src/index.tsx‎

Lines changed: 67 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,74 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom/client';
3-
import './index.css';
4-
import './CardOverview.css';
1+
import React, { useEffect } from "react";
2+
import ReactDOM from "react-dom/client";
3+
import "./index.css";
4+
import "./CardOverview.css";
55
import {
6-
IgrCard, IgrCardMedia, IgrCardHeader,
7-
IgrCardContent, IgrCardActions, IgrCardModule,
8-
IgrIconButton, IgrIconButtonModule, IgrButton,
9-
IgrButtonModule, IgrRipple, IgrRippleModule,
10-
registerIconFromText,
11-
} from 'igniteui-react';
12-
import 'igniteui-webcomponents/themes/light/bootstrap.css';
6+
IgrCard,
7+
IgrCardMedia,
8+
IgrCardHeader,
9+
IgrCardContent,
10+
IgrCardActions,
11+
IgrIconButton,
12+
IgrButton,
13+
IgrRipple,
14+
registerIconFromText,
15+
} from "igniteui-react";
16+
import "igniteui-webcomponents/themes/light/bootstrap.css";
1317

14-
IgrCardModule.register();
15-
IgrButtonModule.register();
16-
IgrIconButtonModule.register();
17-
IgrRippleModule.register();
18+
const twitterIcon =
19+
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm-1.13 6v.39a8.61 8.61 0 01-13.25 7.25 5.69 5.69 0 00.72 0 6 6 0 003.76-1.3 3 3 0 01-2.83-2.1 2.75 2.75 0 00.57.05 3 3 0 00.8-.1 3 3 0 01-2.43-3 3.13 3.13 0 001.37.38 3 3 0 01-.93-4 8.57 8.57 0 006.24 3.17 3.1 3.1 0 01-.08-.74 3 3 0 015.24-2A6.38 6.38 0 0019 6.22a3.07 3.07 0 01-1.36 1.68 6.22 6.22 0 001.74-.48A6.09 6.09 0 0117.87 9z"></path></svg>';
20+
const facebookIcon =
21+
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 22zm0-20a10 10 0 00-1.727 19.841v-7.6h-2.61v-3.018h2.61V8.995A3.641 3.641 0 0114.16 5a21.367 21.367 0 012.332.119v2.7h-1.6c-1.255 0-1.5.6-1.5 1.471v1.929h2.993L16 14.245h-2.6v7.647A9.994 9.994 0 0012 2z"></path></svg>';
1822

19-
const twitterIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm-1.13 6v.39a8.61 8.61 0 01-13.25 7.25 5.69 5.69 0 00.72 0 6 6 0 003.76-1.3 3 3 0 01-2.83-2.1 2.75 2.75 0 00.57.05 3 3 0 00.8-.1 3 3 0 01-2.43-3 3.13 3.13 0 001.37.38 3 3 0 01-.93-4 8.57 8.57 0 006.24 3.17 3.1 3.1 0 01-.08-.74 3 3 0 015.24-2A6.38 6.38 0 0019 6.22a3.07 3.07 0 01-1.36 1.68 6.22 6.22 0 001.74-.48A6.09 6.09 0 0117.87 9z"></path></svg>';
20-
const facebookIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 22zm0-20a10 10 0 00-1.727 19.841v-7.6h-2.61v-3.018h2.61V8.995A3.641 3.641 0 0114.16 5a21.367 21.367 0 012.332.119v2.7h-1.6c-1.255 0-1.5.6-1.5 1.471v1.929h2.993L16 14.245h-2.6v7.647A9.994 9.994 0 0012 2z"></path></svg>';
23+
export default function CardOverview() {
24+
useEffect(() => {
25+
registerIconFromText("twitter", twitterIcon, "material");
26+
registerIconFromText("facebook", facebookIcon, "material");
27+
}, []);
2128

22-
export default class CardOverview extends React.Component<any, any> {
23-
24-
constructor(props: any) {
25-
super(props);
26-
registerIconFromText("twitter", twitterIcon, "material");
27-
registerIconFromText("facebook", facebookIcon, "material");
28-
}
29-
30-
public render(): JSX.Element {
31-
return (
32-
<div className="container sample center">
33-
<div className="card-wrapper">
34-
<IgrCard>
35-
<IgrCardMedia key="media">
36-
<img key="mediaImg" src="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=50"></img>
37-
</IgrCardMedia>
38-
39-
<IgrCardHeader key="header">
40-
<h3 key="headerTitle" slot="title">New York City</h3>
41-
<h5 key="headerSubtitle" slot="subtitle">City in New York</h5>
42-
</IgrCardHeader>
43-
44-
<IgrCardContent key="content">
45-
<p key="contentParagraph">New York City comprises 5 boroughs sitting where the
46-
Hudson River meets the Atlantic Ocean. At its core is Manhattan,
47-
a densely populated borough that’s among the world’s major commercial,
48-
financial and cultural centers.</p>
49-
</IgrCardContent>
50-
51-
<IgrCardActions key="actions">
52-
<IgrButton key="actionsBtn">
53-
<span key="btnSpan">Read more</span>
54-
<IgrRipple key="btnRipple" />
55-
</IgrButton>
56-
<div slot="end" key="endSlot">
57-
<IgrIconButton key="twitterIcon" style={{marginRight: "10px"}} name="twitter" collection="material">
58-
<IgrRipple key="twitterRipple"/>
59-
</IgrIconButton>
60-
<IgrIconButton key="fbIcon" name="facebook" collection="material">
61-
<IgrRipple key="fbRipple"/>
62-
</IgrIconButton>
63-
</div>
64-
</IgrCardActions>
65-
</IgrCard>
66-
</div>
29+
return (
30+
<div className="container sample center">
31+
<div className="card-wrapper">
32+
<IgrCard>
33+
<IgrCardMedia>
34+
<img src="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=50"></img>
35+
</IgrCardMedia>
36+
<IgrCardHeader>
37+
<h3 slot="title">New York City</h3>
38+
<h5 slot="subtitle">City in New York</h5>
39+
</IgrCardHeader>
40+
<IgrCardContent>
41+
<p>
42+
New York City comprises 5 boroughs sitting where the Hudson River
43+
meets the Atlantic Ocean. At its core is Manhattan, a densely
44+
populated borough that’s among the world’s major commercial,
45+
financial and cultural centers.
46+
</p>
47+
</IgrCardContent>
48+
<IgrCardActions>
49+
<IgrButton>
50+
<span>Read more</span>
51+
<IgrRipple />
52+
</IgrButton>
53+
<div slot="end">
54+
<IgrIconButton
55+
style={{ marginRight: "10px" }}
56+
name="twitter"
57+
collection="material"
58+
>
59+
<IgrRipple />
60+
</IgrIconButton>
61+
<IgrIconButton name="facebook" collection="material">
62+
<IgrRipple />
63+
</IgrIconButton>
6764
</div>
68-
);
69-
}
65+
</IgrCardActions>
66+
</IgrCard>
67+
</div>
68+
</div>
69+
);
7070
}
7171

72-
// rendering above class to the React DOM
73-
const root = ReactDOM.createRoot(document.getElementById('root'));
74-
root.render(<CardOverview/>);
72+
// rendering above component to the React DOM
73+
const root = ReactDOM.createRoot(document.getElementById("root"));
74+
root.render(<CardOverview />);

‎samples/layouts/card/semi-horizontal/src/index.tsx‎

Lines changed: 52 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,58 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom/client';
3-
import './index.css';
4-
import './CardSemiHorizontal.css';
5-
import { IgrCard, IgrCardHeader, IgrCardContent, IgrCardActions, IgrCardMedia, IgrAvatar, IgrButton, IgrAvatarModule, IgrButtonModule, IgrCardModule } from 'igniteui-react';
6-
import 'igniteui-webcomponents/themes/light/bootstrap.css';
1+
import React from "react";
2+
import ReactDOM from "react-dom/client";
3+
import "./index.css";
4+
import "./CardSemiHorizontal.css";
5+
import {
6+
IgrCard,
7+
IgrCardHeader,
8+
IgrCardContent,
9+
IgrCardActions,
10+
IgrCardMedia,
11+
IgrAvatar,
12+
IgrButton,
13+
} from "igniteui-react";
14+
import "igniteui-webcomponents/themes/light/bootstrap.css";
715

8-
IgrCardModule.register();
9-
IgrAvatarModule.register();
10-
IgrButtonModule.register();
16+
export default function CardSemiHorizontal() {
17+
return (
18+
<div className="container sample center">
19+
<div className="card-wrapper">
20+
<IgrCard>
21+
<div className="semi-horizontal">
22+
<div>
23+
<IgrCardHeader>
24+
<IgrAvatar
25+
src="https://static.infragistics.com/xplatform/images/music/singer_with_mic.jpg"
26+
slot="thumbnail"
27+
/>
28+
<h5 slot="title">HERE</h5>
29+
<h5 slot="subtitle">by Mellow D</h5>
30+
</IgrCardHeader>
1131

12-
export default class CardSemiHorizontal extends React.Component<any, any> {
32+
<IgrCardContent>
33+
<p>
34+
Far far away, behind the word mountains, far from the
35+
countries Vokalia and Consonantia, there live the blind texts.
36+
</p>
37+
</IgrCardContent>
1338

14-
constructor(props: any) {
15-
super(props);
16-
}
17-
18-
public render(): JSX.Element {
19-
return (
20-
<div className="container sample center">
21-
<div className="card-wrapper">
22-
<IgrCard>
23-
<div key="cardContainer" className="semi-horizontal">
24-
<div key="cardHeaderContainer" >
25-
<IgrCardHeader key="header">
26-
<IgrAvatar key="headerAvatar" src="https://static.infragistics.com/xplatform/images/music/singer_with_mic.jpg" slot="thumbnail" />
27-
<h5 key="headerTitle" slot="title">HERE</h5>
28-
<h5 key="headerSubtitle" slot="subtitle">by Mellow D</h5>
29-
</IgrCardHeader>
30-
31-
<IgrCardContent key="content">
32-
<p key="contentParagraph">Far far away, behind the word mountains,
33-
far from the countries Vokalia and Consonantia,
34-
there live the blind texts.</p>
35-
</IgrCardContent>
36-
37-
<IgrCardActions key="actions">
38-
<IgrButton key="actionsBtn">
39-
<span key="btnCaption">Play Album</span>
40-
</IgrButton>
41-
</IgrCardActions>
42-
</div>
43-
44-
<IgrCardMedia key="media" className='card-media'>
45-
<img key="mediaImg" src="https://static.infragistics.com/xplatform/images/music/singer_female.jpg"></img>
46-
</IgrCardMedia>
47-
</div>
48-
</IgrCard>
49-
</div>
39+
<IgrCardActions>
40+
<IgrButton>
41+
<span>Play Album</span>
42+
</IgrButton>
43+
</IgrCardActions>
5044
</div>
51-
);
52-
}
45+
46+
<IgrCardMedia className="card-media">
47+
<img src="https://static.infragistics.com/xplatform/images/music/singer_female.jpg"></img>
48+
</IgrCardMedia>
49+
</div>
50+
</IgrCard>
51+
</div>
52+
</div>
53+
);
5354
}
5455

55-
// rendering above class to the React DOM
56-
const root = ReactDOM.createRoot(document.getElementById('root'));
57-
root.render(<CardSemiHorizontal/>);
56+
// rendering above component to the React DOM
57+
const root = ReactDOM.createRoot(document.getElementById("root"));
58+
root.render(<CardSemiHorizontal />);

0 commit comments

Comments
 (0)