diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsContext.md b/packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsContext.md index 2c0cfe4..293a1a0 100644 --- a/packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsContext.md +++ b/packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsContext.md @@ -18,6 +18,7 @@ import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table'; import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView'; import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable'; import { useDataViewEventsContext, DataViewEventsContext, DataViewEventsProvider, EventTypes } from '@patternfly/react-data-view/dist/dynamic/DataViewEventsContext'; +import { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks'; import { Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core'; The **data view events context** provides a way of listening to the data view events from the outside of the component. diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsExample.tsx b/packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsExample.tsx index 6ffdf43..762d202 100644 --- a/packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsExample.tsx @@ -3,6 +3,8 @@ import { Drawer, DrawerActions, DrawerCloseButton, DrawerContent, DrawerContentB import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView'; import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable'; import { DataViewEventsProvider, EventTypes, useDataViewEventsContext } from '@patternfly/react-data-view/dist/dynamic/DataViewEventsContext'; +import { useDataViewSelection } from '@patternfly/react-data-view/dist/dynamic/Hooks'; +import { ActionsColumn } from '@patternfly/react-table'; interface Repository { name: string; @@ -64,25 +66,45 @@ interface RepositoriesTableProps { selectedRepo?: Repository; } +const rowActions = [ + { + title: 'Some action', + onClick: () => console.log('clicked on Some action') // eslint-disable-line no-console + }, + { + title:
Another action
, + onClick: () => console.log('clicked on Another action') // eslint-disable-line no-console + }, + { + isSeparator: true + }, + { + title: 'Third action', + onClick: () => console.log('clicked on Third action') // eslint-disable-line no-console + } +]; + const RepositoriesTable: React.FunctionComponent = ({ selectedRepo = undefined }) => { + const selection = useDataViewSelection({ matchOption: (a, b) => a.row[0] === b.row[0] }); const { trigger } = useDataViewEventsContext(); const rows = useMemo(() => { - const handleRowClick = (repo: Repository | undefined) => { - trigger(EventTypes.rowClick, repo); + const handleRowClick = (event, repo: Repository | undefined) => { + // prevents drawer toggle on actions or checkbox click + (event.target.matches('td') || event.target.matches('tr')) && trigger(EventTypes.rowClick, repo); }; return repositories.map(repo => ({ - row: Object.values(repo), + row: [ ...Object.values(repo), { cell: , props: { isActionCell: true } } ], props: { isClickable: true, - onRowClick: () => handleRowClick(selectedRepo?.name === repo.name ? undefined : repo), + onRowClick: (event) => handleRowClick(event, selectedRepo?.name === repo.name ? undefined : repo), isRowSelected: selectedRepo?.name === repo.name } })); }, [ selectedRepo?.name, trigger ]); return ( - + ); diff --git a/packages/module/patternfly-docs/generated/index.js b/packages/module/patternfly-docs/generated/index.js index 851e24a..278a0b3 100644 --- a/packages/module/patternfly-docs/generated/index.js +++ b/packages/module/patternfly-docs/generated/index.js @@ -49,8 +49,8 @@ module.exports = { '/extensions/data-view/components/react': { id: "Components", title: "Components", - toc: [{"text":"Data view toolbar"},[{"text":"Basic toolbar example"}],{"text":"Data view table"},[{"text":"Rows and columns customization"},{"text":"Tree table example"},{"text":"Empty state example"}]], - examples: ["Basic toolbar example","Rows and columns customization","Tree table example","Empty state example"], + toc: [{"text":"Data view toolbar"},[{"text":"Basic toolbar example"},{"text":"Actions configuration"},{"text":"Actions example"}],{"text":"Data view table"},[{"text":"Rows and columns customization"},{"text":"Tree table example"},{"text":"Empty state example"},{"text":"Error state example"},{"text":"Loading state example"}]], + examples: ["Basic toolbar example","Actions example","Rows and columns customization","Tree table example","Empty state example","Error state example","Loading state example"], section: "extensions", subsection: "Data view", source: "react", diff --git a/packages/module/src/DataView/DataView.tsx b/packages/module/src/DataView/DataView.tsx index 094d594..201a586 100644 --- a/packages/module/src/DataView/DataView.tsx +++ b/packages/module/src/DataView/DataView.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Stack, StackItem } from '@patternfly/react-core'; +import { Stack, StackItem, StackProps } from '@patternfly/react-core'; import { DataViewSelection, InternalContextProvider } from '../InternalContext'; export const DataViewState = { @@ -10,7 +10,8 @@ export const DataViewState = { export type DataViewState = typeof DataViewState[keyof typeof DataViewState]; -export interface DataViewProps { +/** extends StackProps */ +export interface DataViewProps extends StackProps { /** Content rendered inside the data view */ children: React.ReactNode; /** Custom OUIA ID */