Skip to content

Commit fdb117b

Browse files
dkamburovdkamburov
authored
Merge pull request #821 from IgniteUI/mtihova/text-area-samples-update
refactor: TextArea samples update react19
2 parents fe993d7 + fb02081 commit fdb117b

5 files changed

Lines changed: 106 additions & 132 deletions

File tree

‎samples/inputs/textarea/form-integration/src/index.tsx‎

Lines changed: 50 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,56 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom/client';
3-
import './index.css';
4-
import { IgrTextarea, IgrTextareaModule, IgrButton, IgrButtonModule, IgrToast, IgrToastModule } from 'igniteui-react';
5-
import 'igniteui-webcomponents/themes/light/bootstrap.css';
6-
7-
IgrTextareaModule.register();
8-
IgrButtonModule.register();
9-
IgrToastModule.register();
10-
11-
export default class TextAreaFormIntegration extends React.Component<any, any> {
12-
13-
public toastRef: IgrToast;
14-
15-
constructor(props: any) {
16-
super(props);
17-
this.onSubmitButtonClicked = this.onSubmitButtonClicked.bind(this);
18-
this.onToastRef = this.onToastRef.bind(this);
19-
}
20-
21-
public render(): JSX.Element {
22-
return (
23-
<div className="sample">
24-
<form id="form" onSubmit={this.onSubmitButtonClicked}>
25-
<IgrTextarea rows={3} name="user_feedback" label="Your review" required>
26-
</IgrTextarea>
27-
<div className="controls">
28-
<IgrButton type="submit"><span>Submit review</span></IgrButton>
29-
<IgrButton type="reset" variant="outlined"><span>Reset</span></IgrButton>
30-
</div>
31-
<IgrToast id="submitted" position="top" display-time="1e3" ref={this.onToastRef}><span>Your review was submitted</span></IgrToast>
32-
</form>
33-
</div>
34-
);
35-
}
36-
37-
public onToastRef(toast: IgrToast){
38-
if (!toast) { return; }
39-
this.toastRef = toast;
1+
import React from "react";
2+
import ReactDOM from "react-dom/client";
3+
import "./index.css";
4+
import { IgrTextarea, IgrButton, IgrToast } from "igniteui-react";
5+
import "igniteui-webcomponents/themes/light/bootstrap.css";
6+
7+
export default function TextAreaFormIntegration() {
8+
let toastRef: IgrToast;
9+
10+
const onToastRef = (toast: IgrToast) => {
11+
if (!toast) {
12+
return;
4013
}
14+
toastRef = toast;
15+
};
4116

42-
public onSubmitButtonClicked(e:React.FormEvent<HTMLFormElement>) {
43-
if(this.toastRef){
44-
e.preventDefault();
45-
this.toastRef.show();
46-
}
17+
const onSubmitButtonClicked = (e: React.FormEvent<HTMLFormElement>) => {
18+
if (toastRef) {
19+
e.preventDefault();
20+
toastRef.show();
4721
}
22+
};
23+
24+
return (
25+
<div className="sample">
26+
<form id="form" onSubmit={onSubmitButtonClicked}>
27+
<IgrTextarea
28+
rows={3}
29+
name="user_feedback"
30+
label="Your review"
31+
required
32+
></IgrTextarea>
33+
<div className="controls">
34+
<IgrButton type="submit">
35+
<span>Submit review</span>
36+
</IgrButton>
37+
<IgrButton type="reset" variant="outlined">
38+
<span>Reset</span>
39+
</IgrButton>
40+
</div>
41+
<IgrToast
42+
id="submitted"
43+
position="top"
44+
displayTime={1000}
45+
ref={onToastRef}
46+
>
47+
<span>Your review was submitted</span>
48+
</IgrToast>
49+
</form>
50+
</div>
51+
);
4852
}
4953

5054
// rendering above class to the React DOM
51-
const root = ReactDOM.createRoot(document.getElementById('root'));
52-
root.render(<TextAreaFormIntegration/>);
55+
const root = ReactDOM.createRoot(document.getElementById("root"));
56+
root.render(<TextAreaFormIntegration />);

‎samples/inputs/textarea/overview/src/index.tsx‎

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,18 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
4-
import { IgrTextarea, IgrTextareaModule } from 'igniteui-react';
4+
import { IgrTextarea } from 'igniteui-react';
55
import 'igniteui-webcomponents/themes/light/bootstrap.css';
66

7-
IgrTextareaModule.register();
7+
export default function TextAreaOverview() {
88

9-
export default class TextAreaOverview extends React.Component<any, any> {
10-
11-
constructor(props: any) {
12-
super(props);
13-
}
14-
15-
public render(): JSX.Element {
16-
return (
17-
<div className="sample">
18-
<IgrTextarea rows={3} label="Tell us your story:"><span>It was a dark and stormy night...</span></IgrTextarea>
19-
</div>
20-
);
21-
}
9+
return (
10+
<div className="sample">
11+
<IgrTextarea rows={3} label="Tell us your story:"><span>It was a dark and stormy night...</span></IgrTextarea>
12+
</div>
13+
);
2214
}
2315

24-
// rendering above class to the React DOM
16+
// rendering above component to the React DOM
2517
const root = ReactDOM.createRoot(document.getElementById('root'));
2618
root.render(<TextAreaOverview/>);

‎samples/inputs/textarea/resize/src/index.tsx‎

Lines changed: 16 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,26 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
4-
import { IgrTextarea, IgrTextareaModule } from 'igniteui-react';
4+
import { IgrTextarea } from 'igniteui-react';
55
import 'igniteui-webcomponents/themes/light/bootstrap.css';
66

7-
IgrTextareaModule.register();
7+
export default function TextAreaResize() {
88

9-
export default class TextAreaResize extends React.Component<any, any> {
10-
11-
constructor(props: any) {
12-
super(props);
13-
}
14-
15-
public render(): JSX.Element {
16-
return (
17-
<div className="sample">
18-
<IgrTextarea label="Resize: none" resize="none">
19-
<p slot="helper-text">This textarea does not resize and uses a scroll bar to show overflow text.</p>
20-
</IgrTextarea>
21-
<IgrTextarea label="Resize: vertical (default)">
22-
<p slot="helper-text">This textarea lets the user resize vertically.</p>
23-
</IgrTextarea>
24-
<IgrTextarea label="Resize: auto" resize="auto">
25-
<p slot="helper-text">This textarea shows all the user input at once. Overflow text wraps onto a new line and expands the text area.</p>
26-
</IgrTextarea>
27-
</div>
28-
);
29-
}
9+
return (
10+
<div className="sample">
11+
<IgrTextarea label="Resize: none" resize="none">
12+
<p slot="helper-text">This textarea does not resize and uses a scroll bar to show overflow text.</p>
13+
</IgrTextarea>
14+
<IgrTextarea label="Resize: vertical (default)">
15+
<p slot="helper-text">This textarea lets the user resize vertically.</p>
16+
</IgrTextarea>
17+
<IgrTextarea label="Resize: auto" resize="auto">
18+
<p slot="helper-text">This textarea shows all the user input at once. Overflow text wraps onto a new line and expands the text area.</p>
19+
</IgrTextarea>
20+
</div>
21+
);
3022
}
3123

32-
// rendering above class to the React DOM
24+
// rendering above component to the React DOM
3325
const root = ReactDOM.createRoot(document.getElementById('root'));
3426
root.render(<TextAreaResize/>);

‎samples/inputs/textarea/slots/src/index.tsx‎

Lines changed: 16 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,30 @@
1-
import React from 'react';
1+
import React, { useEffect } from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
4-
import { IgrTextarea, IgrTextareaModule, IgrIcon, IgrIconModule, registerIconFromText } from 'igniteui-react';
4+
import { IgrTextarea, IgrIcon, registerIconFromText } from 'igniteui-react';
55
import 'igniteui-webcomponents/themes/light/bootstrap.css';
66

7-
IgrTextareaModule.register();
8-
IgrIconModule.register();
7+
export default function TextAreaSlots() {
98

10-
export default class TextAreaSlots extends React.Component<any, any> {
11-
12-
constructor(props: any) {
13-
super(props);
9+
useEffect(() => {
1410
registerIconFromText( "feedback",
1511
`<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-360q17 0 28.5-11.5T520-400q0-17-11.5-28.5T480-440q-17 0-28.5 11.5T440-400q0 17 11.5 28.5T480-360Zm-40-160h80v-240h-80v240ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Zm126-240h594v-480H160v525l46-45Zm-46 0v-480 480Z"/></svg>`,
1612
"material");
17-
}
13+
}, []);
1814

19-
public render(): JSX.Element {
20-
return (
21-
<div className="sample">
22-
<IgrTextarea label="Your feedback">
23-
<span slot="prefix">
24-
<IgrIcon name='feedback' collection="material"></IgrIcon>
25-
</span>
26-
<p slot="helper-text">Give us a short description of what you liked/disliked</p>
27-
</IgrTextarea>
28-
</div>
29-
);
30-
31-
}
15+
return (
16+
<div className="sample">
17+
<IgrTextarea label="Your feedback">
18+
<span slot="prefix">
19+
<IgrIcon name='feedback' collection="material"></IgrIcon>
20+
</span>
21+
<p slot="helper-text">Give us a short description of what you liked/disliked</p>
22+
</IgrTextarea>
23+
</div>
24+
);
3225
}
3326

3427

35-
// rendering above class to the React DOM
28+
// rendering above component to the React DOM
3629
const root = ReactDOM.createRoot(document.getElementById('root'));
3730
root.render(<TextAreaSlots/>);

‎samples/inputs/textarea/styling/src/index.tsx‎

Lines changed: 16 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,27 @@
1-
import React from 'react';
1+
import React, { useEffect } from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
4-
import { IgrTextarea, IgrTextareaModule, IgrIcon, IgrIconModule, registerIconFromText } from 'igniteui-react';
4+
import { IgrTextarea, IgrIcon, registerIconFromText } from 'igniteui-react';
55
import 'igniteui-webcomponents/themes/light/bootstrap.css';
66

7-
IgrTextareaModule.register();
8-
IgrIconModule.register();
7+
export default function TextAreaStyling() {
98

10-
export default class TextAreaStyling extends React.Component<any, any> {
11-
12-
constructor(props: any) {
13-
super(props);
9+
useEffect(() => {
1410
registerIconFromText( "feedback",
1511
`<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-360q17 0 28.5-11.5T520-400q0-17-11.5-28.5T480-440q-17 0-28.5 11.5T440-400q0 17 11.5 28.5T480-360Zm-40-160h80v-240h-80v240ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Zm126-240h594v-480H160v525l46-45Zm-46 0v-480 480Z"/></svg>`,
1612
"material");
17-
}
18-
19-
public render(): JSX.Element {
20-
return (
21-
<div className="sample">
22-
<IgrTextarea label="Steps to reproduce">
23-
<span slot="prefix">
24-
<IgrIcon name='feedback' collection="material"></IgrIcon>
25-
</span>
26-
<p slot="helper-text">Provide a detailed description of the steps that led to the issue you experienced</p>
27-
</IgrTextarea>
28-
</div>
29-
);
30-
31-
}
13+
}, []);
14+
15+
return (
16+
<div className="sample">
17+
<IgrTextarea label="Steps to reproduce">
18+
<span slot="prefix">
19+
<IgrIcon name='feedback' collection="material"></IgrIcon>
20+
</span>
21+
<p slot="helper-text">Provide a detailed description of the steps that led to the issue you experienced</p>
22+
</IgrTextarea>
23+
</div>
24+
);
3225
}
3326

3427

0 commit comments

Comments
 (0)