Skip to content

Commit

Permalink
implement review comments
Browse files Browse the repository at this point in the history
  • Loading branch information
@ajaypratap003
ajaypratap003 committed Apr 24, 2024
1 parent fa70ba4 commit b1b296f
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 86 deletions.
164 changes: 79 additions & 85 deletions packages/react-core/src/demos/DataList/examples/DataListActions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
} from '@patternfly/react-core';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
import { Title } from '../../../../dist/js/components';

export const DataListActions: React.FunctionComponent = () => {
const [isOpen, setIsOpen] = React.useState(false);
Expand All @@ -33,104 +34,97 @@ export const DataListActions: React.FunctionComponent = () => {
};

return (
<React.Fragment>
<DashboardWrapper mainContainerId="main-content-datalist-view-actions" breadcrumb={null}>
<PageSection variant={PageSectionVariants.light}>
<TextContent>
<Text component="h1">Projects</Text>
<Text component="p">This is a demo that showcases PatternFly Data List</Text>
</TextContent>
</PageSection>
<DataList aria-label="single action data list example ">
{!isDeleted && (
<DataListItem aria-labelledby="single-action-item1">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="primary content">
<span id="single-action-item1">Single actionable Primary content</span>
</DataListCell>,
<DataListCell key="secondary content">Single actionable Secondary content</DataListCell>
]}
/>
<DataListAction
aria-labelledby="single-action-item1 single-action-action1"
id="single-action-action1"
aria-label="Actions"
>
<Button
onClick={() => {
if (confirm('Are you sure?')) {
setIsDeleted(true);
}
}}
variant="primary"
key="delete-action"
>
Delete
</Button>
</DataListAction>
</DataListItemRow>
</DataListItem>
)}
<DataListItem aria-labelledby="multi-actions-item1">
<DashboardWrapper mainContainerId="main-content-datalist-view-actions" breadcrumb={null}>
<PageSection variant={PageSectionVariants.light}>
<TextContent>
<Title headingLevel="h1">Projects</Title>
<Text component="p">This is a demo that showcases PatternFly Data List</Text>
</TextContent>
</PageSection>
<DataList aria-label="single action data list example ">
{!isDeleted && (
<DataListItem aria-labelledby="single-action-item1">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="primary content">
<span id="multi-actions-item1">Multi actions Primary content</span>
<span id="single-action-item1">Single actionable Primary content</span>
</DataListCell>,
<DataListCell key="secondary content">Multi actions Secondary content</DataListCell>
<DataListCell key="secondary content">Single actionable Secondary content</DataListCell>
]}
/>
<DataListAction
aria-labelledby="multi-actions-item1 multi-actions-action1"
id="multi-actions-action1"
aria-labelledby="single-action-item1 single-action-action1"
id="single-action-action1"
aria-label="Actions"
isPlainButtonAction
>
<Dropdown
popperProps={{ position: 'right' }}
onSelect={onSelect}
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
ref={toggleRef}
isExpanded={isOpen}
onClick={onToggle}
variant="plain"
aria-label="Data list with actions example kebab toggle"
>
<EllipsisVIcon aria-hidden="true" />
</MenuToggle>
)}
isOpen={isOpen}
onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
<Button
onClick={() => {
if (confirm('Are you sure?')) {
setIsDeleted(true);
}
}}
variant="primary"
key="delete-action"
>
<DropdownList>
<DropdownItem key="action">Action</DropdownItem>
{/* Prevent default onClick functionality for example
purposes */}
<DropdownItem key="link" to="#" onClick={(event: any) => event.preventDefault()}>
Link
</DropdownItem>
<DropdownItem key="disabled action" isDisabled>
Disabled Action
</DropdownItem>
<DropdownItem
key="disabled link"
isDisabled
to="#"
onClick={(event: any) => event.preventDefault()}
>
Disabled Link
</DropdownItem>
</DropdownList>
</Dropdown>
Delete
</Button>
</DataListAction>
</DataListItemRow>
</DataListItem>
</DataList>
</DashboardWrapper>
</React.Fragment>
)}
<DataListItem aria-labelledby="multi-actions-item1">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="primary content">
<span id="multi-actions-item1">Multi actions Primary content</span>
</DataListCell>,
<DataListCell key="secondary content">Multi actions Secondary content</DataListCell>
]}
/>
<DataListAction
aria-labelledby="multi-actions-item1 multi-actions-action1"
id="multi-actions-action1"
aria-label="Actions"
isPlainButtonAction
>
<Dropdown
popperProps={{ position: 'right' }}
onSelect={onSelect}
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
ref={toggleRef}
isExpanded={isOpen}
onClick={onToggle}
variant="plain"
aria-label="Data list with actions example kebab toggle"
>
<EllipsisVIcon aria-hidden="true" />
</MenuToggle>
)}
isOpen={isOpen}
onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
>
<DropdownList>
<DropdownItem key="action">Action</DropdownItem>
{/* Prevent default onClick functionality for example
purposes */}
<DropdownItem key="link" to="#" onClick={(event: any) => event.preventDefault()}>
Link
</DropdownItem>
<DropdownItem key="disabled action" isDisabled>
Disabled Action
</DropdownItem>
<DropdownItem key="disabled link" isDisabled to="#" onClick={(event: any) => event.preventDefault()}>
Disabled Link
</DropdownItem>
</DropdownList>
</Dropdown>
</DataListAction>
</DataListItemRow>
</DataListItem>
</DataList>
</DashboardWrapper>
);
};
2 changes: 1 addition & 1 deletion packages/react-core/src/demos/DataListDemo.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
```js file="./DataList/examples/DataListExpandableControlInToolbar.tsx" isFullscreen
```

### Actions: single and multiple
### Actionable

```js file="./DataList/examples/DataListActions.tsx" isFullscreen
```

0 comments on commit b1b296f

Please sign in to comment.