Skip to content

Commit 2a8a838

Browse files
kev-kimkev-kim
authored
chore(TextInput): converted examples to typescript (#8137)
* chore(TextInput): converted examples to typescript * fix(TextInput): removed problematic file * fix(TextInput): added file back with correct name * fix(TextInput): fixed requested changes
1 parent d4f4e0a commit 2a8a838

9 files changed

Lines changed: 197 additions & 231 deletions

File tree

‎packages/react-core/src/components/TextInput/examples/TextInput.md‎

Lines changed: 8 additions & 231 deletions
Original file line numberDiff line numberDiff line change
@@ -9,265 +9,42 @@ propComponents: ['TextInput']
99

1010
### Basic
1111

12-
```js
13-
import React from 'react';
14-
import { TextInput } from '@patternfly/react-core';
15-
16-
class SimpleTextInput extends React.Component {
17-
constructor(props) {
18-
super(props);
19-
this.state = {
20-
value: ''
21-
};
22-
this.handleTextInputChange = value => {
23-
this.setState({ value });
24-
};
25-
}
26-
27-
render() {
28-
const { value } = this.state;
29-
30-
return (
31-
<TextInput value={value} type="text" onChange={this.handleTextInputChange} aria-label="text input example" />
32-
);
33-
}
34-
}
12+
```ts file="./TextInputBasic.tsx"
3513
```
3614

3715
### Disabled
3816

39-
```js
40-
import React from 'react';
41-
import { TextInput } from '@patternfly/react-core';
42-
43-
<TextInput
44-
value="disabled text input example"
45-
type="text"
46-
onChange={this.handleTextInputChange}
47-
aria-label="disabled text input example"
48-
isDisabled
49-
/>;
17+
```ts file="./TextInputDisabled.tsx"
5018
```
5119

5220
### Truncated on Left
5321

54-
```js
55-
import React from 'react';
56-
import { TextInput } from '@patternfly/react-core';
57-
58-
class LeftTruncatedTextInput extends React.Component {
59-
60-
constructor(props) {
61-
super(props);
62-
this.state = {
63-
value: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
64-
};
65-
this.handleTextInputChange = value => {
66-
this.setState({ value });
67-
};
68-
}
69-
70-
render() {
71-
const { value } = this.state;
72-
return (
73-
<TextInput isLeftTruncated value={value} type="text" onChange={this.handleTextInputChange} aria-label="left-truncated text input example" />
74-
);
75-
}
76-
}
22+
```ts file="./TextInputLeftTruncated.tsx"
7723
```
7824

7925
### Read only
8026

81-
```js
82-
import React from 'react';
83-
import { Checkbox, TextInput } from '@patternfly/react-core';
84-
85-
const ReadOnlyTextArea = () => {
86-
const [isPlainChecked, setIsPlainChecked] = React.useState(false);
87-
88-
return (
89-
<React.Fragment>
90-
<div style={{ marginBottom: '12px' }}>
91-
<Checkbox
92-
id="isPlain"
93-
key="isPlain"
94-
label="Plain read only variant"
95-
isChecked={isPlainChecked}
96-
onChange={checked => setIsPlainChecked(checked)}
97-
/>
98-
</div>
99-
<TextInput
100-
aria-label="read only text input example"
101-
value="read only text input example"
102-
readOnlyVariant={isPlainChecked ? 'plain' : 'default'}
103-
/>
104-
</React.Fragment>
105-
);
106-
};
27+
```ts file="./TextInputReadOnly.tsx"
10728
```
10829

10930
### Invalid
11031

111-
```js
112-
import React from 'react';
113-
import { TextInput, ValidatedOptions } from '@patternfly/react-core';
114-
115-
class InvalidTextInput extends React.Component {
116-
constructor(props) {
117-
super(props);
118-
this.state = {
119-
value: ''
120-
};
121-
this.handleInvalidTextInputChange = value => {
122-
this.setState({ value });
123-
};
124-
}
125-
126-
render() {
127-
const { value } = this.state;
128-
129-
return (
130-
<TextInput
131-
value={value}
132-
onChange={this.handleInvalidTextInputChange}
133-
isRequired
134-
validated={ValidatedOptions.error}
135-
type="text"
136-
aria-label="invalid text input example"
137-
/>
138-
);
139-
}
140-
}
32+
```ts file="./TextInputInvalid.tsx"
14133
```
14234

14335
### Select text using ref
14436

145-
```js
146-
import React from 'react';
147-
import { TextInput } from '@patternfly/react-core';
148-
149-
TextInputSelectAll = () => {
150-
const [value, setValue] = React.useState('select all on click');
151-
const ref = React.useRef(null);
152-
return (
153-
<TextInput
154-
ref={ref}
155-
value={value}
156-
onFocus={() => ref && ref.current && ref.current.select()}
157-
onChange={value => setValue(value)}
158-
aria-label="select-all"
159-
/>
160-
);
161-
};
37+
```ts file="./TextInputSelectUsingRef.tsx"
16238
```
16339

16440
### Icon variants
16541

166-
```js
167-
import React from 'react';
168-
import { TextInput } from '@patternfly/react-core';
169-
170-
SimpleTextInput = () => {
171-
const [calendar, setCalendar] = React.useState('');
172-
const [clock, setClock] = React.useState('');
173-
const [custom, setCustom] = React.useState('');
174-
175-
return (
176-
<>
177-
<TextInput
178-
value={calendar}
179-
type="text"
180-
iconVariant="calendar"
181-
onChange={value => setCalendar(value)}
182-
aria-label="text input example"
183-
/>
184-
<br />
185-
<br />
186-
<TextInput
187-
value={clock}
188-
type="text"
189-
iconVariant="clock"
190-
onChange={value => setClock(value)}
191-
aria-label="text input example"
192-
/>
193-
<br />
194-
<br />
195-
<TextInput
196-
value={custom}
197-
type="text"
198-
customIconDimensions="24px 24px"
199-
customIconUrl='data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%23a18fff" d="M158.87.15c-16.16-1.52-31.2 8.42-35.33 24.12l-14.81 56.27c187.62 5.49 314.54 130.61 322.48 317l56.94-15.78c15.72-4.36 25.49-19.68 23.62-35.9C490.89 165.08 340.78 17.32 158.87.15zm-58.47 112L.55 491.64a16.21 16.21 0 0 0 20 19.75l379-105.1c-4.27-174.89-123.08-292.14-299.15-294.1zM128 416a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm48-152a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm104 104a32 32 0 1 1 32-32 32 32 0 0 1-32 32z"/%3E%3C/svg%3E'
200-
onChange={value => setCustom(value)}
201-
aria-label="text input example"
202-
/>
203-
</>
204-
);
205-
};
42+
```ts file="./TextInputIcon.tsx"
20643
```
20744

20845
### Icon sprite variants
20946

21047
**Note:** The icons for the success, invalid, calendar, etc. variations in form control elements are applied as background images to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `isIconSprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
21148

212-
```js isBeta
213-
import React from 'react';
214-
import { TextInput } from '@patternfly/react-core';
215-
216-
IconSpriteTextInputs = () => {
217-
const [success, setSuccess] = React.useState('');
218-
const [warning, setWarning] = React.useState('');
219-
const [error, setError] = React.useState('');
220-
const [calendar, setCalendar] = React.useState('');
221-
const [clock, setClock] = React.useState('');
222-
223-
return (
224-
<>
225-
<TextInput
226-
validated={ValidatedOptions.success}
227-
isIconSprite
228-
type="text"
229-
onChange={value => setSuccess(value)}
230-
aria-label="success icon sprite text input example"
231-
/>
232-
<br />
233-
<br />
234-
<TextInput
235-
validated={ValidatedOptions.warning}
236-
isIconSprite
237-
type="text"
238-
onChange={value => setWarning(value)}
239-
aria-label="warning icon sprite text input example"
240-
/>
241-
<br />
242-
<br />
243-
<TextInput
244-
validated={ValidatedOptions.error}
245-
isIconSprite
246-
type="text"
247-
onChange={value => setError(value)}
248-
aria-label="error icon sprite text input example"
249-
/>
250-
<br />
251-
<br />
252-
<TextInput
253-
value={calendar}
254-
isIconSprite
255-
type="text"
256-
iconVariant="calendar"
257-
onChange={value => setCalendar(value)}
258-
aria-label="calendar icon sprite text input example"
259-
/>
260-
<br />
261-
<br />
262-
<TextInput
263-
value={clock}
264-
isIconSprite
265-
type="text"
266-
iconVariant="clock"
267-
onChange={value => setClock(value)}
268-
aria-label="clock icon sprite text input example"
269-
/>
270-
</>
271-
);
272-
};
49+
```ts isBeta file="./TextInputIconSprite.tsx"
27350
```

‎packages/react-core/src/components/TextInput/examples/TextInputBasic.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
import { TextInput } from '@patternfly/react-core';
3+
4+
export const TextInputBasic: React.FunctionComponent = () => {
5+
const [value, setValue] = React.useState('');
6+
return <TextInput value={value} type="text" onChange={value => setValue(value)} aria-label="text input example" />;
7+
};

‎packages/react-core/src/components/TextInput/examples/TextInputDisabled.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import React from 'react';
2+
import { TextInput } from '@patternfly/react-core';
3+
4+
export const TextInputBasic: React.FunctionComponent = () => (
5+
<TextInput value="disabled text input example" type="text" aria-label="disabled text input example" isDisabled />
6+
);

‎packages/react-core/src/components/TextInput/examples/TextInputIcon.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react';
2+
import { TextInput } from '@patternfly/react-core';
3+
4+
export const TextInputIcon: React.FunctionComponent = () => {
5+
const [calendar, setCalendar] = React.useState('');
6+
const [clock, setClock] = React.useState('');
7+
const [custom, setCustom] = React.useState('');
8+
9+
return (
10+
<>
11+
<TextInput
12+
value={calendar}
13+
type="text"
14+
iconVariant="calendar"
15+
onChange={value => setCalendar(value)}
16+
aria-label="text input example"
17+
/>
18+
<br />
19+
<br />
20+
<TextInput
21+
value={clock}
22+
type="text"
23+
iconVariant="clock"
24+
onChange={value => setClock(value)}
25+
aria-label="text input example"
26+
/>
27+
<br />
28+
<br />
29+
<TextInput
30+
value={custom}
31+
type="text"
32+
customIconDimensions="24px 24px"
33+
customIconUrl='data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%23a18fff" d="M158.87.15c-16.16-1.52-31.2 8.42-35.33 24.12l-14.81 56.27c187.62 5.49 314.54 130.61 322.48 317l56.94-15.78c15.72-4.36 25.49-19.68 23.62-35.9C490.89 165.08 340.78 17.32 158.87.15zm-58.47 112L.55 491.64a16.21 16.21 0 0 0 20 19.75l379-105.1c-4.27-174.89-123.08-292.14-299.15-294.1zM128 416a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm48-152a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm104 104a32 32 0 1 1 32-32 32 32 0 0 1-32 32z"/%3E%3C/svg%3E'
34+
onChange={value => setCustom(value)}
35+
aria-label="text input example"
36+
/>
37+
</>
38+
);
39+
};

‎packages/react-core/src/components/TextInput/examples/TextInputIconSprite.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React from 'react';
2+
import { TextInput } from '@patternfly/react-core';
3+
4+
export const TextInputIconSprite: React.FunctionComponent = () => {
5+
const [calendar, setCalendar] = React.useState('');
6+
const [clock, setClock] = React.useState('');
7+
const [success, setSuccess] = React.useState('');
8+
const [warning, setWarning] = React.useState('');
9+
const [error, setError] = React.useState('');
10+
11+
return (
12+
<>
13+
<TextInput
14+
value={success}
15+
validated={'success'}
16+
isIconSprite
17+
type="text"
18+
onChange={value => setSuccess(value)}
19+
aria-label="success icon sprite text input example"
20+
/>
21+
<br />
22+
<br />
23+
<TextInput
24+
value={warning}
25+
validated={'warning'}
26+
isIconSprite
27+
type="text"
28+
onChange={value => setWarning(value)}
29+
aria-label="warning icon sprite text input example"
30+
/>
31+
<br />
32+
<br />
33+
<TextInput
34+
value={error}
35+
validated={'error'}
36+
isIconSprite
37+
type="text"
38+
onChange={value => setError(value)}
39+
aria-label="error icon sprite text input example"
40+
/>
41+
<br />
42+
<br />
43+
<TextInput
44+
value={calendar}
45+
isIconSprite
46+
type="text"
47+
iconVariant="calendar"
48+
onChange={value => setCalendar(value)}
49+
aria-label="calendar icon sprite text input example"
50+
/>
51+
<br />
52+
<br />
53+
<TextInput
54+
value={clock}
55+
isIconSprite
56+
type="text"
57+
iconVariant="clock"
58+
onChange={value => setClock(value)}
59+
aria-label="clock icon sprite text input example"
60+
/>
61+
</>
62+
);
63+
};

0 commit comments

Comments
 (0)