Skip to content

Commit 71ac889

Browse files
fhlavacfhlavac
committed
fix(context): Add context docs
1 parent 20ee2e3 commit 71ac889

File tree

2 files changed

+163
-0
lines changed

2 files changed

+163
-0
lines changed

‎packages/module/patternfly-docs/content/extensions/data-view/examples/Context/Context.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
# Sidenav top-level section
3+
# should be the same for all markdown files
4+
section: extensions
5+
subsection: Data view
6+
# Sidenav secondary level section
7+
# should be the same for all markdown files
8+
id: Context
9+
# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
10+
source: react
11+
# If you use typescript, the name of the interface to display props for
12+
# These are found through the sourceProps function provided in patternfly-docs.source.js
13+
sortValue: 3
14+
sourceLink: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Events/Events.md
15+
---
16+
import { useState, useEffect, useContext, useRef } from 'react';
17+
import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table';
18+
import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
19+
import DataViewContext, { DataViewProvider, EventTypes } from '@patternfly/react-data-view/dist/dynamic/DataViewContext';
20+
import { Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core';
21+
22+
The **data view** context provides a way to share data across the entire data view tree without having to pass props manually at every level. It also provides a way of listening to the data view events from the outside of the component.
23+
24+
25+
### Events sharing example
26+
The following example demonstrates how to use the `DataViewContext` to manage shared state and handle events. The `DataViewProvider` is used to wrap components that need access to the shared context. This example illustrates how to set up a layout that listens for data view row click events and displays detailed information about the selected row in a [drawer component](/components/drawer).
27+
28+
29+
```js file="./EventsExample.tsx"
30+
31+
```
32+

‎packages/module/patternfly-docs/content/extensions/data-view/examples/Context/EventsExample.tsx

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import React, { useContext, useEffect, useState, useRef } from 'react';
2+
import { Drawer, DrawerActions, DrawerCloseButton, DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, Title, Text } from '@patternfly/react-core';
3+
import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table';
4+
import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
5+
import DataViewContext, { DataViewProvider, EventTypes } from '@patternfly/react-data-view/dist/dynamic/DataViewContext';
6+
7+
interface Repository {
8+
name: string;
9+
branches: string | null;
10+
prs: string | null;
11+
workspaces: string;
12+
lastCommit: string;
13+
}
14+
15+
const repositories: Repository[] = [
16+
{ name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
17+
{ name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
18+
{ name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
19+
{ name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
20+
{ name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
21+
{ name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
22+
];
23+
24+
const cols: Record<keyof Repository, string> = {
25+
name: 'Repositories',
26+
branches: 'Branches',
27+
prs: 'Pull requests',
28+
workspaces: 'Workspaces',
29+
lastCommit: 'Last commit'
30+
};
31+
32+
const ouiaId = 'ContextExample';
33+
34+
interface RepositoryDetailProps {
35+
selectedRepo?: Repository;
36+
setSelectedRepo: React.Dispatch<React.SetStateAction<Repository | undefined>>;
37+
}
38+
39+
const RepositoryDetail: React.FunctionComponent<RepositoryDetailProps> = ({ selectedRepo, setSelectedRepo }) => {
40+
const context = useContext(DataViewContext);
41+
42+
useEffect(() => {
43+
const unsubscribe = context.subscribe(EventTypes.rowClick, (repo: Repository) => {
44+
setSelectedRepo(repo);
45+
});
46+
47+
return () => unsubscribe();
48+
// eslint-disable-next-line react-hooks/exhaustive-deps
49+
}, []);
50+
51+
return (
52+
<DrawerPanelContent>
53+
<DrawerHead>
54+
<Title className="pf-v5-u-mb-md" headingLevel="h2">
55+
Detail of repository {selectedRepo?.name}
56+
</Title>
57+
<Text>Branches: {selectedRepo?.branches}</Text>
58+
<Text>Pull requests: {selectedRepo?.prs}</Text>
59+
<Text>Workspaces: {selectedRepo?.workspaces}</Text>
60+
<Text>Last commit: {selectedRepo?.lastCommit}</Text>
61+
<DrawerActions>
62+
<DrawerCloseButton onClick={() => setSelectedRepo(undefined)} />
63+
</DrawerActions>
64+
</DrawerHead>
65+
</DrawerPanelContent>
66+
);
67+
};
68+
69+
interface RepositoriesTableProps {
70+
selectedRepo?: Repository;
71+
}
72+
73+
const RepositoriesTable: React.FunctionComponent<RepositoriesTableProps> = ({ selectedRepo = undefined }) => {
74+
const { trigger } = useContext(DataViewContext);
75+
76+
const handleRowClick = (repo: Repository | undefined) => {
77+
trigger(EventTypes.rowClick, repo);
78+
};
79+
80+
return (
81+
<DataView>
82+
<Table aria-label="Repositories table" ouiaId={ouiaId}>
83+
<Thead data-ouia-component-id={`${ouiaId}-thead`}>
84+
<Tr ouiaId={`${ouiaId}-tr-head`}>
85+
{Object.values(cols).map((column, index) => (
86+
<Th key={index} data-ouia-component-id={`${ouiaId}-th-${index}`}>
87+
{column}
88+
</Th>
89+
))}
90+
</Tr>
91+
</Thead>
92+
<Tbody>
93+
{repositories.map((repo, rowIndex) => (
94+
<Tr
95+
isClickable
96+
key={repo.name}
97+
ouiaId={`${ouiaId}-tr-${rowIndex}`}
98+
onRowClick={() => handleRowClick(selectedRepo?.name === repo.name ? undefined : repo)}
99+
isRowSelected={selectedRepo?.name === repo.name}
100+
>
101+
{Object.keys(cols).map((column, colIndex) => (
102+
<Td key={colIndex} data-ouia-component-id={`${ouiaId}-td-${rowIndex}-${colIndex}`}>
103+
{repo[column as keyof Repository]}
104+
</Td>
105+
))}
106+
</Tr>
107+
))}
108+
</Tbody>
109+
</Table>
110+
</DataView>
111+
);
112+
};
113+
114+
export const BasicExample: React.FunctionComponent = () => {
115+
const [ selectedRepo, setSelectedRepo ] = useState<Repository>();
116+
const drawerRef = useRef<HTMLDivElement>(null);
117+
118+
return (
119+
<DataViewProvider>
120+
<Drawer isExpanded={Boolean(selectedRepo)} onExpand={() => drawerRef.current?.focus()}>
121+
<DrawerContent
122+
panelContent={<RepositoryDetail selectedRepo={selectedRepo} setSelectedRepo={setSelectedRepo} />}
123+
>
124+
<DrawerContentBody>
125+
<RepositoriesTable selectedRepo={selectedRepo} />
126+
</DrawerContentBody>
127+
</DrawerContent>
128+
</Drawer>
129+
</DataViewProvider>
130+
);
131+
};

0 commit comments

Comments
 (0)