Skip to content

chore(card view demos): update to new selectable card variant #9322

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
merged 8 commits into from
Aug 16, 2023
Merged

chore(card view demos): update to new selectable card variant #9322

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
701ef9c
update to new selectable card variant
jenny-s51 Jun 29, 2023
9c4db52
add primary detail updates
jenny-s51 Jun 29, 2023
1f3a923
PR feedback from Eric
jenny-s51 Jul 5, 2023
67e79d2
update primary detail demo
jenny-s51 Jul 6, 2023
3315e16
fix a11y
jenny-s51 Jul 11, 2023
b8db267
PR feedback from Margot
jenny-s51 Jul 25, 2023
cb84cf0
update primary detail demo
jenny-s51 Jul 27, 2023
c0fd4b8
PR feedback from Eric
jenny-s51 Jul 28, 2023
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
119 changes: 41 additions & 78 deletions packages/react-core/src/demos/Card/Card.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ section: patterns

import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';

import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import pfIcon from './pf-logo-small.svg';
Expand Down Expand Up @@ -37,7 +36,6 @@ import {
CardHeader,
CardTitle,
CardBody,
Checkbox,
Divider,
Dropdown,
DropdownItem,
Expand All @@ -60,7 +58,6 @@ import {
Pagination,
TextContent,
Text,
Title,
Toolbar,
ToolbarItem,
ToolbarFilter,
Expand All @@ -71,8 +68,6 @@ import {
} from '@patternfly/react-core';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';

import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
import pfIcon from './pf-logo-small.svg';
Expand Down Expand Up @@ -137,19 +132,18 @@ class CardViewBasic extends React.Component {
};

this.onCardKebabDropdownToggle = (key, event) => {
event?.stopPropagation();
this.setState((prevState) => ({
[key]: !prevState[key]
}));
};

this.onCardKebabDropdownSelect = (key, event) => {
this.onCardKebabDropdownSelect = (key) => {
this.setState({
[key]: !this.state[key]
});
};

this.deleteItem = (item) => (event) => {
this.deleteItem = (item) => () => {
const filter = (getter) => (val) => getter(val) !== item.id;
this.setState({
cardData: this.state.cardData.filter(filter(({ id }) => id)),
Expand Down Expand Up @@ -185,7 +179,7 @@ class CardViewBasic extends React.Component {
this.onNameSelect = (event, selection) => {
const checked = event.target.checked;
this.setState((prevState) => {
const prevSelections = prevState.filters['products'];
const prevSelections = prevState.filters.products;
return {
filters: {
...prevState.filters,
Expand Down Expand Up @@ -214,38 +208,18 @@ class CardViewBasic extends React.Component {
}
};

this.onKeyDown = (event, productId) => {
if (event.target !== event.currentTarget) {
return;
}
if ([' ', 'Enter'].includes(event.key)) {
event.preventDefault();
this.setState((prevState) => {
return prevState.selectedItems.includes(productId * 1)
? {
selectedItems: [...prevState.selectedItems.filter((id) => productId * 1 != id)],
areAllSelected: this.checkAllSelected(prevState.selectedItems.length - 1, prevState.totalItemCount)
}
: {
selectedItems: [...prevState.selectedItems, productId * 1],
areAllSelected: this.checkAllSelected(prevState.selectedItems.length + 1, prevState.totalItemCount)
};
});
}
};

this.onClick = (productId) => {
this.setState((prevState) => {
return prevState.selectedItems.includes(productId * 1)
this.setState((prevState) =>
prevState.selectedItems.includes(productId * 1)
? {
selectedItems: [...prevState.selectedItems.filter((id) => productId * 1 != id)],
areAllSelected: this.checkAllSelected(prevState.selectedItems.length - 1, prevState.totalItemCount)
}
: {
selectedItems: [...prevState.selectedItems, productId * 1],
areAllSelected: this.checkAllSelected(prevState.selectedItems.length + 1, prevState.totalItemCount)
};
});
}
);
};
}

Expand All @@ -268,17 +242,19 @@ class CardViewBasic extends React.Component {

splitCheckboxSelectAll(e) {
const { checked } = e.target;
const { isChecked, cardData } = this.state;
const { isChecked } = this.state;
let collection = [];

if (checked) {
for (var i = 0; i <= 9; i++) collection = [...collection, i];
for (let i = 0; i <= 9; i++) {
collection = [...collection, i];
}
}

this.setState(
{
selectedItems: collection,
isChecked: isChecked,
isChecked,
areAllSelected: checked
},
this.updateSelected
Expand All @@ -287,7 +263,7 @@ class CardViewBasic extends React.Component {

selectPage(e) {
const { checked } = e.target;
const { isChecked, totalItemCount, perPage } = this.state;
const { totalItemCount, perPage } = this.state;
let collection = [];

collection = this.getAllItems();
Expand All @@ -302,12 +278,12 @@ class CardViewBasic extends React.Component {
);
}

selectAll(e) {
const { checked } = e.target;
const { isChecked } = this.state;
selectAll() {

let collection = [];
for (var i = 0; i <= 9; i++) collection = [...collection, i];
for (let i = 0; i <= 9; i++) {
collection = [...collection, i];
}

this.setState(
{
Expand All @@ -319,9 +295,7 @@ class CardViewBasic extends React.Component {
);
}

selectNone(e) {
const { checked } = e.target;
const { isChecked, selectedItems } = this.state;
selectNone() {
this.setState(
{
selectedItems: [],
Expand All @@ -344,7 +318,7 @@ class CardViewBasic extends React.Component {

updateSelected() {
const { cardData, selectedItems } = this.state;
let rows = cardData.map((post) => {
const rows = cardData.map((post) => {
post.selected = selectedItems.includes(post.id);
return post;
});
Expand All @@ -355,7 +329,7 @@ class CardViewBasic extends React.Component {
}

renderPagination() {
const { page, perPage, totalItemCount, cardData } = this.state;
const { page, perPage, totalItemCount } = this.state;

const defaultPerPageOptions = [
{
Expand Down Expand Up @@ -387,7 +361,7 @@ class CardViewBasic extends React.Component {
}

buildSelectDropdown() {
const { splitButtonDropdownIsOpen, selectedItems, areAllSelected, filters, cardData } = this.state;
const { splitButtonDropdownIsOpen, selectedItems, areAllSelected } = this.state;
const numSelected = selectedItems.length;
const allSelected = areAllSelected;
const anySelected = numSelected > 0;
Expand Down Expand Up @@ -524,19 +498,13 @@ class CardViewBasic extends React.Component {

render() {
const {
isUpperToolbarDropdownOpen,
isLowerToolbarDropdownOpen,
isUpperToolbarKebabDropdownOpen,
isLowerToolbarKebabDropdownOpen,
isCardKebabDropdownOpen,
splitButtonDropdownIsOpen,
activeItem,
filters,
cardData,
checked,
selectedItems,
areAllSelected,
isChecked,
totalItemCount,
onPerPageSelect,
onSetPage,
page,
perPage
} = this.state;
Expand Down Expand Up @@ -615,9 +583,7 @@ class CardViewBasic extends React.Component {

const filtered =
filters.products.length > 0
? data.filter((card) => {
return filters.products.length === 0 || filters.products.includes(card.name);
})
? data.filter((card) => filters.products.length === 0 || filters.products.includes(card.name))
: cardData.slice((page - 1) * perPage, perPage === 1 ? page * perPage : page * perPage - 1);

return (
Expand Down Expand Up @@ -652,17 +618,20 @@ class CardViewBasic extends React.Component {
</Card>
{filtered.map((product, key) => (
<Card
hasSelectableInput
isCompact
isSelectableRaised
isClickable
isSelectable
key={product.name}
id={product.name.replace(/ /g, '-')}
onKeyDown={(e) => this.onKeyDown(e, product.id)}
onClick={() => this.onClick(product.id)}
onSelectableInputChange={() => this.onClick(product.id)}
isSelected={selectedItems.includes(product.id)}
>
<CardHeader
selectableActions={{
isChecked: selectedItems.includes(product.id),
selectableActionId: `selectable-actions-item-${product.id}`,
selectableActionAriaLabelledby: product.name.replace(/ /g, '-'),
name: `check-${product.id}`,
onChange: () => this.onClick(product.id)
}}
actions={{
actions: (
<>
Expand All @@ -674,7 +643,9 @@ class CardViewBasic extends React.Component {
ref={toggleRef}
aria-label={`${product.name} actions`}
variant="plain"
onClick={(e) => this.onCardKebabDropdownToggle(key, e)}
onClick={(e) => {
this.onCardKebabDropdownToggle(key, e);
}}
isExpanded={this.state[key]}
>
<EllipsisVIcon />
Expand All @@ -689,13 +660,6 @@ class CardViewBasic extends React.Component {
</DropdownItem>
</DropdownList>
</Dropdown>
<Checkbox
checked={isChecked}
value={product.id}
isChecked={selectedItems.includes(product.id)}
aria-label="card checkbox example"
id={`check-${product.id}`}
/>
</>
)
}}
Expand All @@ -710,12 +674,11 @@ class CardViewBasic extends React.Component {
</PageSection>
<PageSection isFilled={false} sticky="bottom" padding={{ default: 'noPadding' }} variant="light">
<Pagination
itemCount={this.state.totalItemCount}
itemCount={totalItemCount}
page={page}
page={this.state.page}
perPage={this.state.perPage}
onPerPageSelect={this.onPerPageSelect}
onSetPage={this.onSetPage}
perPage={perPage}
onPerPageSelect={onPerPageSelect}
onSetPage={onSetPage}
variant="bottom"
/>
</PageSection>
Expand Down
Loading