Skip to content
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

Jump to bottom

Add custom KeyUp support to Group Header #15478

Merged
merged 11 commits into from
Oct 15, 2020
Merged

Add custom KeyUp support to Group Header #15478

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
ea266c8
Add custom KeyUp support for Group Header
Oct 12, 2020
861894f
Change files
Oct 12, 2020
cc86871
Update api.md file
Oct 12, 2020
43d60a1
Address CR comments
Oct 15, 2020
bb2cefc
Update api.md
Oct 15, 2020
6d7f6f4
Properly addres PR comment
Oct 15, 2020
ed10ee2
Fix stopPropagation placement
Oct 15, 2020
f4523c4
Add defaultPrevented check
Oct 15, 2020
8208ed8
Update packages/office-ui-fabric-react/src/components/GroupedList/Gro…
dzearing Oct 15, 2020
4e369f0
Remove extra space
Oct 15, 2020
33a6732
Merge branch '7.0' of https://github.com/bcoard/fluentui into 7.0
Oct 15, 2020
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
8 changes: 8 additions & 0 deletions change/office-ui-fabric-react-2020-10-12-13-11-10-7.0.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
1 change: 1 addition & 0 deletions packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4968,6 +4968,7 @@ export interface IGroupDividerProps {
isSelected?: boolean;
loadingText?: string;
onGroupHeaderClick?: (group: IGroup) => void;
onGroupHeaderKeyUp?: (group: IGroup, ev: React.KeyboardEvent<HTMLElement>) => void;
bcoard marked this conversation as resolved.
Show resolved Hide resolved
onRenderTitle?: IRenderFunction<IGroupHeaderProps>;
onToggleCollapse?: (group: IGroup) => void;
onToggleSelectGroup?: (group: IGroup) => void;
Expand Down
19 changes: 13 additions & 6 deletions packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,13 +185,20 @@ export class GroupHeaderBase extends React.Component<IGroupHeaderProps, IGroupHe
};

private _onKeyUp = (ev: React.KeyboardEvent<HTMLElement>): 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();
}
}
bcoard marked this conversation as resolved.
Show resolved Hide resolved

ev.stopPropagation();
ev.preventDefault();
};

private _onToggleClick = (ev: React.MouseEvent<HTMLElement>): void => {
Expand Down
3 changes: 3 additions & 0 deletions packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. */
dzearing marked this conversation as resolved.
Show resolved Hide resolved
onGroupHeaderKeyUp?: (group: IGroup, ev: React.KeyboardEvent<HTMLElement>) => void;

/** Callback for when the group is expanded or collapsed. */
onToggleCollapse?: (group: IGroup) => void;

Expand Down