Skip to content

chore(DataList): convert examples to TypeScript #7154

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 7 commits into from
Apr 12, 2022
Merged

chore(DataList): convert examples to TypeScript #7154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f463ee4
data list ts conversion
jenny-s51 Mar 30, 2022
9fba7d8
package and package-lock revert
jenny-s51 Mar 30, 2022
d4883ec
yarn.lock
jenny-s51 Mar 30, 2022
c3bee65
fix build error
jenny-s51 Mar 30, 2022
58e4f4e
rename function components to match file names
jenny-s51 Apr 4, 2022
282cb79
PR feedback from Eric
jenny-s51 Apr 4, 2022
e916589
add sm grid breakpoint example
jenny-s51 Apr 11, 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
1,203 changes: 10 additions & 1,193 deletions packages/react-core/src/components/DataList/examples/DataList.md
View file
Open in desktop

Large diffs are not rendered by default.

100 changes: 100 additions & 0 deletions packages/react-core/src/components/DataList/examples/DataListActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import React from 'react';
import {
Button,
Dropdown,
DropdownItem,
DropdownPosition,
KebabToggle,
DataList,
DataListItem,
DataListCell,
DataListItemRow,
DataListItemCells,
DataListAction
} from '@patternfly/react-core';

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

const onToggle = isOpen => {
setIsOpen(isOpen);
};

const onSelect = () => {
setIsOpen(!isOpen);
};

return (
<React.Fragment>
<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">
<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
isPlain
position={DropdownPosition.right}
isOpen={isOpen}
onSelect={onSelect}
toggle={<KebabToggle onToggle={onToggle} />}
dropdownItems={[
<DropdownItem key="link">Link</DropdownItem>,
<DropdownItem key="action" component="button">
Action
</DropdownItem>,
<DropdownItem key="disabled link" isDisabled>
Disabled Link
</DropdownItem>
]}
/>
</DataListAction>
</DataListItemRow>
</DataListItem>
</DataList>
</React.Fragment>
);
};
33 changes: 33 additions & 0 deletions packages/react-core/src/components/DataList/examples/DataListBasic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from 'react';
import { DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell } from '@patternfly/react-core';

export const DataListBasic: React.FunctionComponent = () => (
<DataList aria-label="Simple data list example">
<DataListItem aria-labelledby="simple-item1">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="primary content">
<span id="simple-item1">Primary content</span>
</DataListCell>,
<DataListCell key="secondary content">Secondary content</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
<DataListItem aria-labelledby="simple-item2">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell isFilled={false} key="secondary content fill">
<span id="simple-item2">Secondary content (pf-m-no-fill)</span>
</DataListCell>,
<DataListCell isFilled={false} alignRight key="secondary content align">
Secondary content (pf-m-align-right pf-m-no-fill)
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
</DataList>
);
200 changes: 200 additions & 0 deletions packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,200 @@
import React from 'react';
import {
Button,
DataList,
DataListItem,
DataListItemCells,
DataListItemRow,
DataListCell,
DataListCheck,
DataListAction,
Dropdown,
DropdownItem,
DropdownPosition,
KebabToggle
} from '@patternfly/react-core';

export const DataListCheckboxes: React.FunctionComponent = () => {
const [isOpen1, setIsOpen1] = React.useState(false);
const [isOpen2, setIsOpen2] = React.useState(false);
const [isOpen3, setIsOpen3] = React.useState(false);

const onToggle1 = isOpen1 => {
setIsOpen1(isOpen1);
};

const onSelect1 = () => {
setIsOpen1(!isOpen1);
};

const onToggle2 = isOpen2 => {
setIsOpen2(isOpen2);
};

const onSelect2 = () => {
setIsOpen2(!isOpen2);
};
const onToggle3 = isOpen3 => {
setIsOpen3(isOpen3);
};

const onSelect3 = () => {
setIsOpen3(!isOpen3);
};
return (
<DataList aria-label="Checkbox and action data list example">
<DataListItem aria-labelledby="check-action-item1">
<DataListItemRow>
<DataListCheck aria-labelledby="check-action-item1" name="check-action-check1" />
<DataListItemCells
dataListCells={[
<DataListCell key="primary content">
<span id="check-action-item1">Primary content</span> Dolor sit amet, consectetur adipisicing elit, sed
do eiusmod.
</DataListCell>,
<DataListCell key="secondary content 1">
Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
</DataListCell>,
<DataListCell key="secondary content 2">
<span>Tertiary content</span> Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
</DataListCell>,
<DataListCell key="more content 1">
<span>More content</span> Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
</DataListCell>,
<DataListCell key="more content 2">
<span>More content</span> Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
</DataListCell>
]}
/>
<DataListAction
aria-labelledby="check-action-item1 check-action-action1"
id="check-action-action1"
aria-label="Actions"
isPlainButtonAction
>
<Dropdown
isPlain
position={DropdownPosition.right}
isOpen={isOpen1}
onSelect={onSelect1}
toggle={<KebabToggle onToggle={onToggle1} />}
dropdownItems={[
<DropdownItem key="link">Link</DropdownItem>,
<DropdownItem key="action" component="button">
Action
</DropdownItem>,
<DropdownItem key="disabled link" isDisabled>
Disabled Link
</DropdownItem>
]}
/>
</DataListAction>
</DataListItemRow>
</DataListItem>
<DataListItem aria-labelledby="check-action-item2">
<DataListItemRow>
<DataListCheck aria-labelledby="check-action-item2" name="check-action-check2" />
<DataListItemCells
dataListCells={[
<DataListCell key="primary content">
<span id="check-action-item2">Primary content - Lorem ipsum</span> dolor sit amet, consectetur
adipisicing elit, sed do eiusmod.
</DataListCell>,
<DataListCell key="secondary content">
Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
</DataListCell>
]}
/>
<DataListAction
visibility={{ lg: 'hidden' }}
aria-labelledby="check-action-item2 check-action-action2"
id="check-action-action2"
aria-label="Actions"
isPlainButtonAction
>
<Dropdown
isPlain
position={DropdownPosition.right}
isOpen={isOpen2}
onSelect={onSelect2}
toggle={<KebabToggle onToggle={onToggle2} />}
dropdownItems={[
<DropdownItem key="pri-action2" component="button">
Primary
</DropdownItem>,
<DropdownItem key="sec-action2" component="button">
Secondary
</DropdownItem>
]}
/>
</DataListAction>
<DataListAction
visibility={{ default: 'hidden', lg: 'visible' }}
aria-labelledby="check-action-item2 check-action-action2"
id="check-action-action2"
aria-label="Actions"
>
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
</DataListAction>
</DataListItemRow>
</DataListItem>
<DataListItem aria-labelledby="check-action-item3">
<DataListItemRow>
<DataListCheck aria-labelledby="check-action-item3" name="check-action-check3" />
<DataListItemCells
dataListCells={[
<DataListCell key="primary content">
<span id="check-action-item3">Primary content - Lorem ipsum</span> dolor sit amet, consectetur
adipisicing elit, sed do eiusmod.
</DataListCell>,
<DataListCell key="secondary content">
Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
</DataListCell>
]}
/>
<DataListAction
visibility={{ xl: 'hidden' }}
aria-labelledby="check-action-item3 check-action-action3"
id="check-actiokn-action3"
aria-label="Actions"
isPlainButtonAction
>
<Dropdown
isPlain
position={DropdownPosition.right}
isOpen={isOpen3}
onSelect={onSelect3}
toggle={<KebabToggle onToggle={onToggle3} />}
dropdownItems={[
<DropdownItem key="pri-action3" component="button">
Primary
</DropdownItem>,
<DropdownItem key="sec1-action3" component="button">
Secondary
</DropdownItem>,
<DropdownItem key="sec2-action3" component="button">
Secondary
</DropdownItem>,
<DropdownItem key="sec3-action3" component="button">
Secondary
</DropdownItem>
]}
/>
</DataListAction>
<DataListAction
visibility={{ default: 'hidden', xl: 'visible' }}
aria-labelledby="check-action-item3 check-action-action3"
id="check-action-action3"
aria-label="Actions"
>
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="secondary">Secondary</Button>
</DataListAction>
</DataListItemRow>
</DataListItem>
</DataList>
);
};
33 changes: 33 additions & 0 deletions packages/react-core/src/components/DataList/examples/DataListCompact.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from 'react';
import { DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell } from '@patternfly/react-core';

export const DataListCompact: React.FunctionComponent = () => (
<DataList aria-label="Compact data list example" isCompact>
<DataListItem aria-labelledby="simple-item1">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="primary content">
<span id="simple-item1">Primary content</span>
</DataListCell>,
<DataListCell key="secondary content">Secondary content</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
<DataListItem aria-labelledby="simple-item2">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell isFilled={false} key="secondary content fill">
<span id="simple-item2">Secondary content (pf-m-no-fill)</span>
</DataListCell>,
<DataListCell isFilled={false} alignRight key="secondary content align">
Secondary content (pf-m-align-right pf-m-no-fill)
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
</DataList>
);
29 changes: 29 additions & 0 deletions packages/react-core/src/components/DataList/examples/DataListControllingText.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React from 'react';
import {
DataList,
DataListItem,
DataListItemRow,
DataListItemCells,
DataListCell,
DataListWrapModifier
} from '@patternfly/react-core';

export const DataListControllingText: React.FunctionComponent = () => (
<DataList aria-label="Simple data list example">
<DataListItem aria-labelledby="simple-item1">
<DataListItemRow>
<DataListItemCells
dataListCells={[
<DataListCell key="primary content" wrapModifier={DataListWrapModifier.breakWord}>
<span id="simple-item1">Primary content</span>
</DataListCell>,
<DataListCell key="secondary content" wrapModifier={DataListWrapModifier.truncate}>
Really really really really really really really really really really really really really really long
description that should be truncated before it ends
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
</DataList>
);
Loading