Skip to content

chore(ActionList): convert examples to typescript/functional components #6718

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nicolethoen merged 2 commits into from
Jan 10, 2022
Merged

chore(ActionList): convert examples to typescript/functional components #6718

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
90aae13
chore(ActionList): convert examples to typescript/functional components
wise-king-sullyman Dec 22, 2021
cd3966f
explicitly types function component return values
wise-king-sullyman Jan 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
205 changes: 4 additions & 201 deletions packages/react-core/src/components/ActionList/examples/ActionList.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,217 +12,20 @@ import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';

### Action list single group

```js
import React from 'react';
import {
ActionList,
ActionListItem,
Button,
Dropdown,
DropdownItem,
DropdownSeparator,
KebabToggle
} from '@patternfly/react-core';

class BasicActionList extends React.Component {
constructor(props) {
super(props);
this.state = {
isOpen: false
};
this.onToggle = (isOpen, event) => {
event.stopPropagation();
this.setState({
isOpen
});
};
this.onSelect = event => {
event.stopPropagation();
this.setState({
isOpen: !this.state.isOpen
});
};
}

render() {
const dropdownItems = [
<DropdownItem key="link">Link</DropdownItem>,
<DropdownItem key="action" component="button">
Action
</DropdownItem>,
<DropdownItem key="disabled link" isDisabled>
Disabled Link
</DropdownItem>,
<DropdownItem key="disabled action" isDisabled component="button">
Disabled Action
</DropdownItem>,
<DropdownSeparator key="separator" />,
<DropdownItem key="separated link">Separated Link</DropdownItem>,
<DropdownItem key="separated action" component="button">
Separated Action
</DropdownItem>
];

return (
<React.Fragment>
<ActionList>
<ActionListItem>
<Button variant="primary" id="next-button">
Next
</Button>
</ActionListItem>
<ActionListItem>
<Button variant="secondary" id="back-button">
Back
</Button>
</ActionListItem>
</ActionList>
<br />
With kebab
<ActionList>
<ActionListItem>
<Button variant="primary" id="next-button2">
Next
</Button>
</ActionListItem>
<ActionListItem>
<Button variant="secondary" id="back-button2">
Back
</Button>
</ActionListItem>
<ActionListItem>
<Dropdown
onSelect={this.onSelect}
toggle={<KebabToggle onToggle={this.onToggle} />}
isOpen={this.state.isOpen}
isPlain
dropdownItems={dropdownItems}
position="right"
/>
</ActionListItem>
</ActionList>
</React.Fragment>
);
}
}
```ts file="ActionListSingleGroup.tsx"
```

### Action list with icons

```js
import React from 'react';
import { ActionList, ActionListItem, Button } from '@patternfly/react-core';
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';

class IconsActionList extends React.Component {
render() {
return (
<ActionList isIconList>
<ActionListItem>
<Button variant="plain" id="times-button" aria-label="times icon button">
<TimesIcon />
</Button>
</ActionListItem>
<ActionListItem>
<Button variant="plain" id="check-button" aria-label="check icon button">
<CheckIcon />
</Button>
</ActionListItem>
</ActionList>
);
}
}
```ts file="./ActionListWithIcons.tsx"
```

### Action list multiple groups

```js
import React from 'react';
import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';

class GroupsActionList extends React.Component {
render() {
return (
<ActionList>
<ActionListGroup>
<ActionListItem>
<Button variant="primary" id="next-button">
Next
</Button>
</ActionListItem>
<ActionListItem>
<Button variant="secondary" id="back-button">
Back
</Button>
</ActionListItem>
</ActionListGroup>
<ActionListGroup>
<ActionListItem>
<Button variant="primary" id="submit-button">
Submit
</Button>
</ActionListItem>
<ActionListItem>
<Button variant="link" id="cancel-button">
Cancel
</Button>
</ActionListItem>
</ActionListGroup>
</ActionList>
);
}
}
```ts file="./ActionListMultipleGroups.tsx"
```

### Action list with cancel button

```js
import React from 'react';
import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';

class CancelActionList extends React.Component {
render() {
return (
<React.Fragment>
In modals, forms, data lists
<ActionList>
<ActionListItem>
<Button variant="primary" id="save-button">
Save
</Button>
</ActionListItem>
<ActionListItem>
<Button variant="link" id="cancel-button">
Cancel
</Button>
</ActionListItem>
</ActionList>
<br />
In wizards
<ActionList>
<ActionListGroup>
<ActionListItem>
<Button variant="primary" id="next-button">
Next
</Button>
</ActionListItem>
<ActionListItem>
<Button variant="secondary" id="back-button">
Back
</Button>
</ActionListItem>
</ActionListGroup>
<ActionListGroup>
<ActionListItem>
<Button variant="link" id="cancel-button2">
Cancel
</Button>
</ActionListItem>
</ActionListGroup>
</ActionList>
</React.Fragment>
);
}
}
```ts file="./ActionListWithCancelButton.tsx"
```
31 changes: 31 additions & 0 deletions packages/react-core/src/components/ActionList/examples/ActionListMultipleGroups.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React from 'react';
import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';

export const ActionListMultipleGroups: React.FunctionComponent = () => (
<ActionList>
<ActionListGroup>
<ActionListItem>
<Button variant="primary" id="next-button">
Next
</Button>
</ActionListItem>
<ActionListItem>
<Button variant="secondary" id="back-button">
Back
</Button>
</ActionListItem>
</ActionListGroup>
<ActionListGroup>
<ActionListItem>
<Button variant="primary" id="submit-button">
Submit
</Button>
</ActionListItem>
<ActionListItem>
<Button variant="link" id="cancel-button">
Cancel
</Button>
</ActionListItem>
</ActionListGroup>
</ActionList>
);
86 changes: 86 additions & 0 deletions packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import React from 'react';
import {
ActionList,
ActionListItem,
Button,
Dropdown,
DropdownItem,
DropdownSeparator,
KebabToggle
} from '@patternfly/react-core';

export const ActionListSingleGroup: React.FunctionComponent = () => {
const [isOpen, setIsOpen] = React.useState(false);

const onToggle = (
isOpen: boolean,
event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>
) => {
event.stopPropagation();
setIsOpen(isOpen);
};

const onSelect = (event: React.SyntheticEvent<HTMLDivElement, Event>) => {
event.stopPropagation();
setIsOpen(!isOpen);
};

const dropdownItems = [
<DropdownItem key="link">Link</DropdownItem>,
<DropdownItem key="action" component="button">
Action
</DropdownItem>,
<DropdownItem key="disabled link" isDisabled>
Disabled Link
</DropdownItem>,
<DropdownItem key="disabled action" isDisabled component="button">
Disabled Action
</DropdownItem>,
<DropdownSeparator key="separator" />,
<DropdownItem key="separated link">Separated Link</DropdownItem>,
<DropdownItem key="separated action" component="button">
Separated Action
</DropdownItem>
];

return (
<React.Fragment>
<ActionList>
<ActionListItem>
<Button variant="primary" id="next-button">
Next
</Button>
</ActionListItem>
<ActionListItem>
<Button variant="secondary" id="back-button">
Back
</Button>
</ActionListItem>
</ActionList>
<br />
With kebab
<ActionList>
<ActionListItem>
<Button variant="primary" id="next-button2">
Next
</Button>
</ActionListItem>
<ActionListItem>
<Button variant="secondary" id="back-button2">
Back
</Button>
</ActionListItem>
<ActionListItem>
<Dropdown
onSelect={onSelect}
toggle={<KebabToggle onToggle={onToggle} />}
isOpen={isOpen}
isPlain
dropdownItems={dropdownItems}
position="right"
/>
</ActionListItem>
</ActionList>
</React.Fragment>
);
};
43 changes: 43 additions & 0 deletions packages/react-core/src/components/ActionList/examples/ActionListWithCancelButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React from 'react';
import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';

export const ActionListWithCancelButton: React.FunctionComponent = () => (
<React.Fragment>
In modals, forms, data lists
<ActionList>
<ActionListItem>
<Button variant="primary" id="save-button">
Save
</Button>
</ActionListItem>
<ActionListItem>
<Button variant="link" id="cancel-button">
Cancel
</Button>
</ActionListItem>
</ActionList>
<br />
In wizards
<ActionList>
<ActionListGroup>
<ActionListItem>
<Button variant="primary" id="next-button">
Next
</Button>
</ActionListItem>
<ActionListItem>
<Button variant="secondary" id="back-button">
Back
</Button>
</ActionListItem>
</ActionListGroup>
<ActionListGroup>
<ActionListItem>
<Button variant="link" id="cancel-button2">
Cancel
</Button>
</ActionListItem>
</ActionListGroup>
</ActionList>
</React.Fragment>
);
Loading