Skip to content

Commit 26b18e1

Browse files
janwright73Jan Wright
janwright73
and
Jan Wright
authored
chore(SimpleList):convert to typescript (#8176)
* chore(SimpleList):convert to typescript * updated types to match onSelect handler * updated types to match onSelect handler and various name changes Co-authored-by: Jan Wright <[email protected]>
1 parent d68f302 commit 26b18e1

File tree

4 files changed

+86
-108
lines changed

4 files changed

+86
-108
lines changed

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

Lines changed: 4 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -9,120 +9,16 @@ propComponents: ['SimpleList', 'SimpleListGroup', 'SimpleListItem']
99

1010
### Simple list
1111

12-
```js
13-
import React from 'react';
14-
import { SimpleList, SimpleListItem } from '@patternfly/react-core';
15-
16-
class SimpleListDemo extends React.Component {
17-
onSelect(selectedItem, selectedItemProps) {
18-
console.log('new selection SimpleListDemo', selectedItem, selectedItemProps);
19-
}
20-
21-
render() {
22-
const items = [
23-
<SimpleListItem key="item1" isActive>
24-
List item 1
25-
</SimpleListItem>,
26-
<SimpleListItem key="item2" component="a" href="#">
27-
List item 2
28-
</SimpleListItem>,
29-
<SimpleListItem key="item3">List item 3</SimpleListItem>
30-
];
31-
32-
return (
33-
<SimpleList onSelect={this.onSelect} aria-label="Simple List Example">
34-
{items}
35-
</SimpleList>
36-
);
37-
}
38-
}
12+
```ts file="SimpleListBasic.tsx"
3913
```
4014

4115
### Grouped list
4216

43-
```js
44-
import React from 'react';
45-
import { SimpleList, SimpleListItem, SimpleListGroup } from '@patternfly/react-core';
46-
47-
class SimpleListGroupDemo extends React.Component {
48-
onSelect(selectedItem, selectedItemProps) {
49-
console.log('new selection SimpleListGroupDemo', selectedItem, selectedItemProps);
50-
}
51-
52-
render() {
53-
const group1Items = [
54-
<SimpleListItem key="item1" isActive>
55-
List item 1
56-
</SimpleListItem>,
57-
<SimpleListItem key="item2" id="test 2">
58-
List item 2
59-
</SimpleListItem>,
60-
<SimpleListItem key="item3">List item 3</SimpleListItem>,
61-
<SimpleListItem key="item4">List item 4</SimpleListItem>
62-
];
63-
64-
const group2Items = [
65-
<SimpleListItem key="item5">List item 1</SimpleListItem>,
66-
<SimpleListItem key="item6" component="a" href="#">
67-
List item 2
68-
</SimpleListItem>,
69-
<SimpleListItem key="item7" component="a" href="#">
70-
List item 3
71-
</SimpleListItem>,
72-
<SimpleListItem key="item8">List item 4</SimpleListItem>
73-
];
74-
75-
return (
76-
<SimpleList onSelect={this.onSelect} aria-label="Grouped List Example">
77-
<SimpleListGroup title="Group 1" id="group-1">
78-
{group1Items}
79-
</SimpleListGroup>
80-
<SimpleListGroup title="Group 2" id="group-2">
81-
{group2Items}
82-
</SimpleListGroup>
83-
</SimpleList>
84-
);
85-
}
86-
}
17+
```ts file="SimpleListGrouped.tsx"
8718
```
8819

8920
### Uncontrolled simple list
9021

91-
```js
92-
import React from 'react';
93-
import { SimpleList, SimpleListItem } from '@patternfly/react-core';
94-
95-
class SimpleListUncontrolledDemo extends React.Component {
96-
constructor(props) {
97-
super(props);
98-
this.state = {
99-
activeItem: 0
100-
};
101-
this.onSelect = (selectedItem, selectedItemProps) => {
102-
console.log('new selection SimpleListUncontrolledDemo', selectedItem, selectedItemProps);
103-
this.setState({ activeItem: selectedItemProps.itemId });
104-
};
105-
}
106-
107-
render() {
108-
const { activeItem } = this.state;
109-
const items = [
110-
<SimpleListItem key="item1" itemId={0} isActive={activeItem === 0}>
111-
List item 1
112-
</SimpleListItem>,
113-
<SimpleListItem key="item2" itemId={1} isActive={activeItem === 1}>
114-
List item 2
115-
</SimpleListItem>,
116-
<SimpleListItem key="item3" itemId={2} isActive={activeItem === 2}>
117-
List item 3
118-
</SimpleListItem>
119-
];
120-
121-
return (
122-
<SimpleList onSelect={this.onSelect} isControlled={false} aria-label="Uncontrolled Simple List Example">
123-
{items}
124-
</SimpleList>
125-
);
126-
}
127-
}
22+
```ts file="SimpleListUncontrolled.tsx"
12823
```
24+

‎packages/react-core/src/components/SimpleList/examples/SimpleListBasic.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import { SimpleList, SimpleListItem } from '@patternfly/react-core';
3+
4+
export const SimpleListBasic: React.FunctionComponent = () => {
5+
const items = [
6+
<SimpleListItem key="item1" isActive>
7+
List item 1
8+
</SimpleListItem>,
9+
<SimpleListItem key="item2" component="a" href="#">
10+
List item 2
11+
</SimpleListItem>,
12+
<SimpleListItem key="item3">List item 3</SimpleListItem>
13+
];
14+
15+
return <SimpleList aria-label="Simple List Example">{items}</SimpleList>;
16+
};

‎packages/react-core/src/components/SimpleList/examples/SimpleListGrouped.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react';
2+
import { SimpleList, SimpleListItem, SimpleListGroup } from '@patternfly/react-core';
3+
4+
export const SimpleListGrouped: React.FunctionComponent = () => {
5+
const group1Items = [
6+
<SimpleListItem key="item1" isActive>
7+
List item 1
8+
</SimpleListItem>,
9+
<SimpleListItem key="item2">List item 2</SimpleListItem>,
10+
<SimpleListItem key="item3">List item 3</SimpleListItem>,
11+
<SimpleListItem key="item4">List item 4</SimpleListItem>
12+
];
13+
14+
const group2Items = [
15+
<SimpleListItem key="item5">List item 1</SimpleListItem>,
16+
<SimpleListItem key="item6" component="a" href="#">
17+
List item 2
18+
</SimpleListItem>,
19+
<SimpleListItem key="item7" component="a" href="#">
20+
List item 3
21+
</SimpleListItem>,
22+
<SimpleListItem key="item8">List item 4</SimpleListItem>
23+
];
24+
25+
return (
26+
<SimpleList aria-label="Grouped simple list example">
27+
<SimpleListGroup title="Group 1" id="group-1">
28+
{group1Items}
29+
</SimpleListGroup>
30+
<SimpleListGroup title="Group 2" id="group-2">
31+
{group2Items}
32+
</SimpleListGroup>
33+
</SimpleList>
34+
);
35+
};

‎packages/react-core/src/components/SimpleList/examples/SimpleListUncontrolled.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
import { SimpleList, SimpleListItem, SimpleListItemProps } from '@patternfly/react-core';
3+
4+
export const SimpleListUncontrolled: React.FunctionComponent = () => {
5+
const [activeItem, setActiveItem] = React.useState(0);
6+
7+
const onSelect = (
8+
selectedItem: React.RefObject<HTMLButtonElement> | React.RefObject<HTMLAnchorElement>,
9+
selectedItemProps: SimpleListItemProps
10+
) => {
11+
setActiveItem(selectedItemProps.itemId as number);
12+
};
13+
14+
const items = [
15+
<SimpleListItem key="item1" itemId={0} isActive={activeItem === 0}>
16+
List item 1
17+
</SimpleListItem>,
18+
<SimpleListItem key="item2" itemId={1} isActive={activeItem === 1}>
19+
List item 2
20+
</SimpleListItem>,
21+
<SimpleListItem key="item3" itemId={2} isActive={activeItem === 2}>
22+
List item 3
23+
</SimpleListItem>
24+
];
25+
26+
return (
27+
<SimpleList onSelect={onSelect} isControlled={false} aria-label="Uncontrolled Simple List Example">
28+
{items}
29+
</SimpleList>
30+
);
31+
};

0 commit comments

Comments
 (0)