From 76e9e1ab33fc77cea027b5a2380544140327b6a3 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Mon, 20 Feb 2023 16:04:57 -0500 Subject: [PATCH 1/3] feat(DataList): added event param to callback --- .../react-core/src/components/DataList/DataList.tsx | 12 ++++++------ .../src/components/DataList/DataListItem.tsx | 6 +++--- .../DataList/examples/DataListSelectableRows.tsx | 4 ++-- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/react-core/src/components/DataList/DataList.tsx b/packages/react-core/src/components/DataList/DataList.tsx index 0205da4e6ca..d42c9b6bb54 100644 --- a/packages/react-core/src/components/DataList/DataList.tsx +++ b/packages/react-core/src/components/DataList/DataList.tsx @@ -22,7 +22,7 @@ export enum DataListWrapModifier { export interface SelectableRowObject { /** Callback that executes when the screen reader accessible element receives a change event */ - onChange: (id: string, event: React.FormEvent) => void; + onChange: (event: React.FormEvent, id: string) => void; } export interface DataListProps extends Omit, 'ref'> { @@ -33,7 +33,7 @@ export interface DataListProps extends Omit, ' /** Adds accessible text to the DataList list */ 'aria-label': string; /** Optional callback to make DataList selectable, fired when DataListItem selected */ - onSelectDataListItem?: (id: string) => void; + onSelectDataListItem?: (event: React.MouseEvent | React.KeyboardEvent, id: string) => void; /** Id of DataList item currently selected */ selectedDataListItemId?: string; /** Flag indicating if DataList should have compact styling */ @@ -49,7 +49,7 @@ export interface DataListProps extends Omit, ' interface DataListContextProps { isSelectable: boolean; selectedDataListItemId: string; - updateSelectedDataListItem: (id: string) => void; + updateSelectedDataListItem: (event: React.MouseEvent | React.KeyboardEvent, id: string) => void; selectableRow?: SelectableRowObject; } @@ -73,7 +73,7 @@ export class DataList extends React.Component { super(props); } - getIndex = (id: string) => Array.from(this.ref.current.children).findIndex(item => item.id === id); + getIndex = (id: string) => Array.from(this.ref.current.children).findIndex((item) => item.id === id); render() { const { @@ -89,8 +89,8 @@ export class DataList extends React.Component { } = this.props; const isSelectable = onSelectDataListItem !== undefined; - const updateSelectedDataListItem = (id: string) => { - onSelectDataListItem(id); + const updateSelectedDataListItem = (event: React.MouseEvent | React.KeyboardEvent, id: string) => { + onSelectDataListItem(event, id); }; return ( diff --git a/packages/react-core/src/components/DataList/DataListItem.tsx b/packages/react-core/src/components/DataList/DataListItem.tsx index a6683b69f5b..7d64e827936 100644 --- a/packages/react-core/src/components/DataList/DataListItem.tsx +++ b/packages/react-core/src/components/DataList/DataListItem.tsx @@ -60,13 +60,13 @@ export class DataListItem extends React.Component { target = target.parentNode; } } - updateSelectedDataListItem(id); + updateSelectedDataListItem(event, id); }; const onKeyDown = (event: React.KeyboardEvent) => { if ([KeyTypes.Enter, KeyTypes.Space].includes(event.key)) { event.preventDefault(); - updateSelectedDataListItem(id); + updateSelectedDataListItem(event, id); } }; @@ -96,7 +96,7 @@ export class DataListItem extends React.Component { className="pf-screen-reader" type="radio" checked={isSelected} - onChange={(event) => selectableRow.onChange(id, event)} + onChange={(event) => selectableRow.onChange(event, id)} tabIndex={-1} {...selectableInputAriaProps} /> diff --git a/packages/react-core/src/components/DataList/examples/DataListSelectableRows.tsx b/packages/react-core/src/components/DataList/examples/DataListSelectableRows.tsx index 39bdf3d4f38..c4c6f6c2517 100644 --- a/packages/react-core/src/components/DataList/examples/DataListSelectableRows.tsx +++ b/packages/react-core/src/components/DataList/examples/DataListSelectableRows.tsx @@ -33,11 +33,11 @@ export const DataListSelectableRows: React.FunctionComponent = () => { setIsOpen2(!isOpen2); }; - const onSelectDataListItem = id => { + const onSelectDataListItem = (_event: React.MouseEvent | React.KeyboardEvent, id: string) => { setSelectedDataListItemId(id); }; - const handleInputChange = (id: string, _event: React.FormEvent) => { + const handleInputChange = (_event: React.FormEvent, id: string) => { setSelectedDataListItemId(id); }; From 7ca91bda99e7e67d62de381ad91e9f5a9b7da99d Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Tue, 21 Feb 2023 08:33:19 -0500 Subject: [PATCH 2/3] Updated integration tests --- .../src/components/demos/DataListDemo/DataListCompactDemo.tsx | 2 +- .../src/components/demos/DataListDemo/DataListDemo.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListCompactDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListCompactDemo.tsx index 77b1983b5e3..baf9442b25d 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListCompactDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListCompactDemo.tsx @@ -21,7 +21,7 @@ export class DataListCompactDemo extends React.Component { + onSelectDataListItem = (_event: React.MouseEvent | React.KeyboardEvent, id: string) => { this.setState({ selectedDataListItemId: id }); }; diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx index 8be4ef39d74..b8606f9c486 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx @@ -29,7 +29,7 @@ export class DataListDemo extends React.Component }; } - onSelectDataListItem = (id: string) => { + onSelectDataListItem = (_event: React.MouseEvent | React.KeyboardEvent, id: string) => { this.setState({ selectedDataListItemId: id }); }; @@ -38,7 +38,7 @@ export class DataListDemo extends React.Component }; onSelect = () => { - this.setState(prevState => ({ + this.setState((prevState) => ({ isOpen: !prevState.isOpen })); }; From 915db8a28d8631f9ac30b510a4fcea53fc121970 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Mon, 27 Feb 2023 11:22:45 -0500 Subject: [PATCH 3/3] Updated pf version in demo-app --- packages/react-integration/demo-app-ts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-integration/demo-app-ts/package.json b/packages/react-integration/demo-app-ts/package.json index 96f28d1ef8f..6bbff4c77e3 100644 --- a/packages/react-integration/demo-app-ts/package.json +++ b/packages/react-integration/demo-app-ts/package.json @@ -9,7 +9,7 @@ "serve:demo-app": "node scripts/serve" }, "dependencies": { - "@patternfly/react-core": "^5.0.0-alpha.13", + "@patternfly/react-core": "^5.0.0-alpha.14", "react": "^18", "react-dom": "^18", "react-router": "^5.3.3",