From ea266c8868541f83d3511d730a6d4e1a98cf95b7 Mon Sep 17 00:00:00 2001 From: "REDMOND\\bcoard" Date: Mon, 12 Oct 2020 13:08:54 -0700 Subject: [PATCH 01/10] Add custom KeyUp support for Group Header --- .../GroupedList/GroupHeader.base.tsx | 19 +++++++++++++------ .../GroupedList/GroupedList.types.ts | 3 +++ 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx index 4f2d8ed136d83..8ce973f00e6ee 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx @@ -185,13 +185,20 @@ export class GroupHeaderBase extends React.Component): void => { - const shouldOpen = this.state.isCollapsed && ev.which === getRTLSafeKeyCode(KeyCodes.right, this.props.theme); - const shouldClose = !this.state.isCollapsed && ev.which === getRTLSafeKeyCode(KeyCodes.left, this.props.theme); - if (shouldClose || shouldOpen) { - this._toggleCollapse(); - ev.stopPropagation(); - ev.preventDefault(); + const { group, onGroupHeaderKeyUp } = this.props; + + if (onGroupHeaderKeyUp) { + onGroupHeaderKeyUp(group!, ev); + } else { + const shouldOpen = this.state.isCollapsed && ev.which === getRTLSafeKeyCode(KeyCodes.right, this.props.theme); + const shouldClose = !this.state.isCollapsed && ev.which === getRTLSafeKeyCode(KeyCodes.left, this.props.theme); + if (shouldClose || shouldOpen) { + this._toggleCollapse(); + } } + + ev.stopPropagation(); + ev.preventDefault(); }; private _onToggleClick = (ev: React.MouseEvent): void => { diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.types.ts b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.types.ts index f0d27d67d2fee..6aee108fc3a8b 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.types.ts +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.types.ts @@ -314,6 +314,9 @@ export interface IGroupDividerProps { /** Callback for when the group header is clicked. */ onGroupHeaderClick?: (group: IGroup) => void; + /** Callback for when KeyUp on the group header is invoked. */ + onGroupHeaderKeyUp?: (group: IGroup, ev: React.KeyboardEvent) => void; + /** Callback for when the group is expanded or collapsed. */ onToggleCollapse?: (group: IGroup) => void; From 861894f6aa97907d277ca9cde9b42edf977a0787 Mon Sep 17 00:00:00 2001 From: "REDMOND\\bcoard" Date: Mon, 12 Oct 2020 13:11:10 -0700 Subject: [PATCH 02/10] Change files --- .../office-ui-fabric-react-2020-10-12-13-11-10-7.0.json | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 change/office-ui-fabric-react-2020-10-12-13-11-10-7.0.json diff --git a/change/office-ui-fabric-react-2020-10-12-13-11-10-7.0.json b/change/office-ui-fabric-react-2020-10-12-13-11-10-7.0.json new file mode 100644 index 0000000000000..20d44c8b98087 --- /dev/null +++ b/change/office-ui-fabric-react-2020-10-12-13-11-10-7.0.json @@ -0,0 +1,8 @@ +{ + "type": "minor", + "comment": "Add custom KeyUp support for Group Header", + "packageName": "office-ui-fabric-react", + "email": "bcoard@microsoft.com", + "dependentChangeType": "patch", + "date": "2020-10-12T20:11:10.321Z" +} From cc868716a4bf25ab35c9c722c3af7a65541e3249 Mon Sep 17 00:00:00 2001 From: "REDMOND\\bcoard" Date: Mon, 12 Oct 2020 13:36:23 -0700 Subject: [PATCH 03/10] Update api.md file --- .../office-ui-fabric-react/etc/office-ui-fabric-react.api.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md b/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md index 092902e69fde3..3458ca4e0a4cc 100644 --- a/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md +++ b/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md @@ -4968,6 +4968,7 @@ export interface IGroupDividerProps { isSelected?: boolean; loadingText?: string; onGroupHeaderClick?: (group: IGroup) => void; + onGroupHeaderKeyUp?: (group: IGroup, ev: React.KeyboardEvent) => void; onRenderTitle?: IRenderFunction; onToggleCollapse?: (group: IGroup) => void; onToggleSelectGroup?: (group: IGroup) => void; From 43d60a181e6c61b33182015f25b41d69ae3cc6c5 Mon Sep 17 00:00:00 2001 From: "REDMOND\\bcoard" Date: Thu, 15 Oct 2020 11:45:47 -0700 Subject: [PATCH 04/10] Address CR comments --- .../src/components/GroupedList/GroupHeader.base.tsx | 8 ++++---- .../src/components/GroupedList/GroupedList.types.ts | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx index 8ce973f00e6ee..2e37efec48291 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx @@ -188,17 +188,17 @@ export class GroupHeaderBase extends React.Component): void => { diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.types.ts b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.types.ts index 6aee108fc3a8b..707d641988ece 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.types.ts +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.types.ts @@ -315,7 +315,7 @@ export interface IGroupDividerProps { onGroupHeaderClick?: (group: IGroup) => void; /** Callback for when KeyUp on the group header is invoked. */ - onGroupHeaderKeyUp?: (group: IGroup, ev: React.KeyboardEvent) => void; + onGroupHeaderKeyUp?: (ev: React.KeyboardEvent, group: IGroup) => void; /** Callback for when the group is expanded or collapsed. */ onToggleCollapse?: (group: IGroup) => void; From bb2cefce98b3c63af0bc5683f780cde26d5a4189 Mon Sep 17 00:00:00 2001 From: "REDMOND\\bcoard" Date: Thu, 15 Oct 2020 11:50:14 -0700 Subject: [PATCH 05/10] Update api.md --- .../office-ui-fabric-react/etc/office-ui-fabric-react.api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md b/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md index 3458ca4e0a4cc..c76e322e03cf7 100644 --- a/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md +++ b/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md @@ -4968,7 +4968,7 @@ export interface IGroupDividerProps { isSelected?: boolean; loadingText?: string; onGroupHeaderClick?: (group: IGroup) => void; - onGroupHeaderKeyUp?: (group: IGroup, ev: React.KeyboardEvent) => void; + onGroupHeaderKeyUp?: (ev: React.KeyboardEvent, group: IGroup) => void; onRenderTitle?: IRenderFunction; onToggleCollapse?: (group: IGroup) => void; onToggleSelectGroup?: (group: IGroup) => void; From 6d7f6f4520171feed5f734dc737cf0e95853d54f Mon Sep 17 00:00:00 2001 From: "REDMOND\\bcoard" Date: Thu, 15 Oct 2020 11:53:03 -0700 Subject: [PATCH 06/10] Properly addres PR comment --- .../GroupedList/GroupHeader.base.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx index 2e37efec48291..3435ddb70f61f 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx @@ -189,16 +189,16 @@ export class GroupHeaderBase extends React.Component): void => { From ed10ee22f1ceba0d0e91596372510e452cc8e0a2 Mon Sep 17 00:00:00 2001 From: "REDMOND\\bcoard" Date: Thu, 15 Oct 2020 11:56:26 -0700 Subject: [PATCH 07/10] Fix stopPropagation placement --- .../src/components/GroupedList/GroupHeader.base.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx index 3435ddb70f61f..77bab72910ddc 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx @@ -195,10 +195,9 @@ export class GroupHeaderBase extends React.Component): void => { From f4523c4d049f73846574451396b7bbaefbf33b71 Mon Sep 17 00:00:00 2001 From: "REDMOND\\bcoard" Date: Thu, 15 Oct 2020 12:04:43 -0700 Subject: [PATCH 08/10] Add defaultPrevented check --- .../components/GroupedList/GroupHeader.base.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx index 77bab72910ddc..58e754f620ac8 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx @@ -191,12 +191,14 @@ export class GroupHeaderBase extends React.Component Date: Thu, 15 Oct 2020 12:45:54 -0700 Subject: [PATCH 09/10] Update packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.types.ts --- .../src/components/GroupedList/GroupedList.types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.types.ts b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.types.ts index 707d641988ece..1325b2548ee2b 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.types.ts +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.types.ts @@ -314,7 +314,7 @@ export interface IGroupDividerProps { /** Callback for when the group header is clicked. */ onGroupHeaderClick?: (group: IGroup) => void; - /** Callback for when KeyUp on the group header is invoked. */ + /** Callback for when the "keyup" event is fired on the group header . */ onGroupHeaderKeyUp?: (ev: React.KeyboardEvent, group: IGroup) => void; /** Callback for when the group is expanded or collapsed. */ From 4e369f092b65bdc61499b7ad3ff050fb55164468 Mon Sep 17 00:00:00 2001 From: "REDMOND\\bcoard" Date: Thu, 15 Oct 2020 12:46:44 -0700 Subject: [PATCH 10/10] Remove extra space --- .../src/components/GroupedList/GroupedList.types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.types.ts b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.types.ts index 707d641988ece..f9936b210a528 100644 --- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.types.ts +++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.types.ts @@ -314,7 +314,7 @@ export interface IGroupDividerProps { /** Callback for when the group header is clicked. */ onGroupHeaderClick?: (group: IGroup) => void; - /** Callback for when KeyUp on the group header is invoked. */ + /** Callback for when KeyUp on the group header is invoked. */ onGroupHeaderKeyUp?: (ev: React.KeyboardEvent, group: IGroup) => void; /** Callback for when the group is expanded or collapsed. */