Skip to content

feat(tables): update tables, context selector #3474

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
evwilkin merged 2 commits into from
Apr 11, 2023
Merged

feat(tables): update tables, context selector #3474

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
14a04bb
feat(tables): update tables, context selector
nicolethoen Apr 7, 2023
4348c8b
update after rebase and addressing PR comments
nicolethoen Apr 10, 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
7 changes: 3 additions & 4 deletions packages/documentation-framework/components/cssVariables/cssSearch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from "react";
import { TextInput } from "@patternfly/react-core";
import { SearchInput } from "@patternfly/react-core";
Comment thread
thatblindgeye marked this conversation as resolved.

export class CSSSearch extends React.Component {
constructor(props) {
Expand All @@ -9,7 +9,7 @@ export class CSSSearch extends React.Component {
};
}

onFilterChange = (_change, event) => {
onFilterChange = (event) => {
this.setState(
{
filterValue: event.target.value
Expand All @@ -20,8 +20,7 @@ export class CSSSearch extends React.Component {

render() {
return (
<TextInput
type="text"
<SearchInput
aria-label="Filter CSS Variables"
placeholder="Filter CSS Variables"
value={this.state.filterValue}
Expand Down
142 changes: 72 additions & 70 deletions packages/documentation-framework/components/cssVariables/cssVariables.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import React from "react";
import { debounce } from "@patternfly/react-core";
import {
// Table,
// TableHeader,
// TableBody,
sortable,
SortByDirection,
expandable
Table,
Thead,
Th,
Tr,
Tbody,
Td
} from "@patternfly/react-table";
import * as tokensModule from "@patternfly/react-tokens/dist/esm/componentIndex";
import global_spacer_md from "@patternfly/react-tokens/dist/esm/global_spacer_md";
Expand Down Expand Up @@ -77,23 +77,10 @@ export class CSSVariables extends React.Component {

this.flatList = flattenList(applicableFiles);

this.columns = [
...props.hideSelectorColumn ? [] : [{
title: "Selector",
transforms: [sortable],
cellFormatters: [expandable]
}],
{ title: "Variable", transforms: [sortable] },
{ title: "Value", transforms: [sortable] }
]

this.state = {
searchRE: '',
rows: this.getFilteredRows(),
sortBy: {
index: 0,
direction: "asc" // a-z
}
allRowsExpanded: true
};
}

Expand Down Expand Up @@ -140,20 +127,16 @@ export class CSSVariables extends React.Component {
];
filteredRows.push({
isOpen: values ? false : undefined,
cells
cells,
details: values ? {
parent: rowNumber,
fullWidth: true,
data: mappingAsList(property, values)
} : undefined
});
rowNumber += 1;
if (values) {
filteredRows.push({
parent: rowNumber,
fullWidth: true,
cells: [
{
title: mappingAsList(property, values)
}
]
});
rowNumber += 1;
rowNumber += 1
}
}
});
Expand All @@ -170,9 +153,10 @@ export class CSSVariables extends React.Component {
} else {
newRows[rowKey] = { ...newRows[rowKey], isOpen };
}
this.setState({
this.setState(prevState => ({
rows: newRows,
});
...(collapseAll && {allRowsExpanded: !prevState.allRowsExpanded})
}));
};

getDebouncedFilteredRows = debounce(value => {
Expand All @@ -183,50 +167,68 @@ export class CSSVariables extends React.Component {
});
}, 500);

onSort = (_event, index, direction) => {
this.flatList = this.flatList.sort((a, b) => {
const indexToColMap = {
'1': 'selector',
'2': 'property',
'3': 'value'
};
const column = indexToColMap[index];
if (direction === SortByDirection.asc) {
return a[column] < b[column] ? -1 : a[column] > b[column] ? 1 : 0;
} else {
return a[column] > b[column] ? -1 : a[column] < b[column] ? 1 : 0;
}
});
this.setState({
sortBy: {
index,
direction
},
rows: this.getFilteredRows(this.state.searchRE)
});
};

render() {
return (
<React.Fragment>
<CSSSearch getDebouncedFilteredRows={this.getDebouncedFilteredRows} />
{/* <Table
<Table
variant="compact"
aria-label={`CSS Variables for prefixes ${this.prefix.join(" ")}`}
sortBy={this.state.sortBy}
onSort={this.onSort}
cells={this.columns}
rows={this.state.rows}
onCollapse={this.onCollapse}
canCollapseAll={true}
collapseAllAriaLabel="expand all css variables"
gridBreakPoint="grid-lg"
contentId="css-variables-content"
expandId="css-variables-toggle"
>
<TableHeader />
<TableBody />
</Table>*/}
<Thead>
<Tr>
{!this.props.hideSelectorColumn && (
<React.Fragment>
<Th expand={{
areAllExpanded: this.state.allRowsExpanded,
collapseAllAriaLabel: "Expand or collapse all CSS variables",
onToggle: this.onCollapse
}}/>
<Th>Selector</Th>
</React.Fragment>
)}
<Th>Variable</Th>
<Th>Value</Th>
</Tr>
</Thead>
{!this.props.hideSelectorColumn ? (
this.state.rows.map((row, rowIndex) => (
<Tbody key={rowIndex} isExpanded={row.isOpen}>
<Tr>
<Td
expand={
row.details
? {
rowIndex,
isExpanded: row.isOpen,
onToggle: this.onCollapse,
expandId: 'composable-expandable-example'
}
: undefined
}
/>
<Td dataLabel="Selector">{row.cells[0]}</Td>
<Td dataLabel="Variable">{row.cells[1]}</Td>
<Td dataLabel="Value">{row.cells[2]}</Td>
</Tr>
{row.details ? (
<Tr isExpanded={row.isOpen}>
{!row.details.fullWidth ? <Td /> : null}
<Td dataLabel="Selector" colSpan={5}>{row.details.data}</Td>
</Tr>
) : null}
</Tbody>
))) : (
<Tbody>
{this.state.rows.map((row, rowIndex) => (
<Tr key={rowIndex}>
<Td dataLabel="Variable">{row.cells[0]}</Td>
<Td dataLabel="Value">{row.cells[1]}</Td>
</Tr>
))}
</Tbody>
)}
</Table>
</React.Fragment>
);
}
Expand Down
174 changes: 90 additions & 84 deletions packages/documentation-framework/components/propsTable/propsTable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,91 +1,97 @@
import React from "react";
//import { Badge } from "@patternfly/react-core";
import { Badge } from "@patternfly/react-core";
import {
// Table,
// TableHeader,
// TableBody,
cellWidth,
Table,
Caption,
Thead,
Th,
Tr,
Tbody,
Td,
TableText
} from "@patternfly/react-table";
import { AutoLinkHeader } from "../autoLinkHeader/autoLinkHeader";
//import { PropTypeWithLinks } from "./propTypeWithLinks";
//import { css } from "@patternfly/react-styles";
//import accessibleStyles from "@patternfly/react-styles/css/utilities/Accessibility/accessibility";
import { PropTypeWithLinks } from "./propTypeWithLinks";
import { css } from "@patternfly/react-styles";
import accessibleStyles from "@patternfly/react-styles/css/utilities/Accessibility/accessibility";

export const PropsTable = ({ title, description, rows, allPropComponents }) => {
const columns = [
{ title: "Name", transforms: [cellWidth(20)] },
{ title: "Type", transforms: [cellWidth(20)] },
{ title: "Default", transforms: [] },
{ title: "Description", transforms: [] },
];

return (
<React.Fragment>
<AutoLinkHeader size="h3">{title}</AutoLinkHeader>
{/*<Table
className="pf-u-mt-md pf-u-mb-lg"
variant="compact"
aria-label={title}
caption={
<div>
{description && <div className="pf-u-mb-md">{description}</div>}
<div>
<span className="ws-prop-required">*</span>required
</div>
</div>
}
cells={columns}
gridBreakPoint="grid-lg"
rows={rows
// Sort required rows first
export const PropsTable = ({ title, description, rows, allPropComponents }) => (
<React.Fragment>
<AutoLinkHeader size="h3">{title}</AutoLinkHeader>
<Table className="pf-u-mt-md pf-u-mb-lg" variant="compact" aria-label={title} gridBreakPoint="grid-lg">
<Caption>
{description && <div className="pf-u-mb-md">{description}</div>}
<div>
<span className="ws-prop-required">*</span>required
</div>
</Caption>
<Thead>
<Tr>
<Th width={20}>Name</Th>
<Th width={20}>Type</Th>
<Th>Default</Th>
<Th>Description</Th>
</Tr>
</Thead>
<Tbody>
{rows
.sort((a, b) => (a.required === b.required ? 0 : a.required ? -1 : 1))
.map((row, idx) => ({
cells: [
<div className="pf-m-break-word">
{row.deprecated && "Deprecated: "}
{row.name}
{row.required ? (
<React.Fragment key={`${row.name}-required-prop`}>
<span
aria-hidden="true"
key={`${row.name}-asterisk`}
className="ws-prop-required"
>
*
</span>
<span
key={`${row.name}-required`}
className={css(accessibleStyles.screenReader)}
>
required
</span>
</React.Fragment>
) : (
""
)}
{row.beta && (
<Badge
key={`${row.name}-${idx}`}
className="ws-beta-badge pf-u-ml-sm"
.map((row, idx) => (
<Tr key={idx}>
<Td>
<TableText wrapModifier="breakWord">
{row.deprecated && "Deprecated: "}
{row.name}
{row.required ? (
<React.Fragment key={`${row.name}-required-prop`}>
<span
aria-hidden="true"
key={`${row.name}-asterisk`}
className="ws-prop-required"
>
Beta
</Badge>
)}
</div>,
<div className="pf-m-break-word">
<PropTypeWithLinks
type={row.type}
allPropComponents={allPropComponents}
/>
</div>,
<div className="pf-m-break-word">{row.defaultValue}</div>,
<div className="pf-m-break-word">{row.description}</div>,
],
}))}
>
<TableHeader />
<TableBody />
</Table>*/}
</React.Fragment>
);
};
*
</span>
<span
key={`${row.name}-required`}
className={css(accessibleStyles.screenReader)}
>
required
</span>
</React.Fragment>
) : (
""
)}
{row.beta && (
<Badge
key={`${row.name}-${idx}`}
className="ws-beta-badge pf-u-ml-sm"
>
Beta
</Badge>
)}
</TableText>
</Td>
<Td>
<TableText wrapModifier="breakWord">
<PropTypeWithLinks
type={row.type}
allPropComponents={allPropComponents}
/>
</TableText>
</Td>
<Td>
<TableText wrapModifier="breakWord">
{row.defaultValue}
</TableText>
</Td>
<Td>
<TableText wrapModifier="breakWord">
{row.description}
</TableText>
</Td>
</Tr>
))}
</Tbody>
</Table>
</React.Fragment>
);
Loading