-
Notifications
You must be signed in to change notification settings - Fork 2.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
BaseExtendedPicker: Create contextmenu for renderedItem, fix auto foc…
…us (#3954) * add some fixes * create contextual menu item wrapper - convert results to promise in example * add editing item margin, and fix on suggestionSelected focus * add change file * fix tslint issues
- Loading branch information
Showing
10 changed files
with
148 additions
and
69 deletions.
There are no files selected for viewing
11 changes: 11 additions & 0 deletions
11
common/changes/@uifabric/experiments/amyngu-extendedPickerFixes_2018-02-12-22-44.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
{ | ||
"changes": [ | ||
{ | ||
"packageName": "@uifabric/experiments", | ||
"comment": "BaseExtendedPicker: Create component to wrap the rendered item, so users get contextual menu if certain props are present, get rid of loading state, fix autofocus on input after suggestion selection", | ||
"type": "minor" | ||
} | ||
], | ||
"packageName": "@uifabric/experiments", | ||
"email": "amyngu@microsoft.com" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
5 changes: 5 additions & 0 deletions
5
...es/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,13 @@ | ||
.editingInput { | ||
border: 0px; | ||
outline: none; | ||
width: 100%; | ||
|
||
&::-ms-clear { | ||
display: none; | ||
} | ||
} | ||
|
||
.editingContainer { | ||
margin: 4px; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
63 changes: 63 additions & 0 deletions
63
...src/components/SelectedItemsList/SelectedPeopleList/Items/SelectedItemWithContextMenu.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
/* tslint:disable */ | ||
import * as React from 'react'; | ||
/* tslint:enable */ | ||
import { BaseComponent, autobind } from '../../../../Utilities'; | ||
import { IExtendedPersonaProps } from '../SelectedPeopleList'; | ||
import { ContextualMenu, DirectionalHint } from 'office-ui-fabric-react/lib/ContextualMenu'; | ||
import { IContextualMenuItem } from 'office-ui-fabric-react/lib/ContextualMenu'; | ||
import { IBaseProps } from 'office-ui-fabric-react/lib/Utilities'; | ||
|
||
export interface IPeoplePickerItemState { | ||
contextualMenuVisible: boolean; | ||
} | ||
|
||
export interface ISelectedItemWithContextMenuProps extends IBaseProps { | ||
renderedItem: JSX.Element; | ||
beginEditing?: (item: IExtendedPersonaProps) => void; | ||
menuItems: IContextualMenuItem[]; | ||
item: IExtendedPersonaProps; | ||
} | ||
|
||
export class SelectedItemWithContextMenu extends BaseComponent<ISelectedItemWithContextMenuProps, IPeoplePickerItemState> { | ||
protected itemElement: HTMLElement; | ||
|
||
constructor(props: ISelectedItemWithContextMenuProps) { | ||
super(props); | ||
this.state = { contextualMenuVisible: false }; | ||
} | ||
|
||
public render(): JSX.Element { | ||
return ( | ||
<div | ||
ref={ this._resolveRef('itemElement') } | ||
onContextMenu={ this._onClick } | ||
> | ||
{ this.props.renderedItem } | ||
{ this.state.contextualMenuVisible ? ( | ||
<ContextualMenu | ||
items={ this.props.menuItems } | ||
shouldFocusOnMount={ true } | ||
target={ this.itemElement } | ||
onDismiss={ this._onCloseContextualMenu } | ||
directionalHint={ DirectionalHint.bottomLeftEdge } | ||
/>) | ||
: null | ||
} | ||
</div >); | ||
} | ||
|
||
@autobind | ||
private _onClick(ev: React.MouseEvent<HTMLElement>): void { | ||
ev.preventDefault(); | ||
if (this.props.beginEditing && !this.props.item.isValid) { | ||
this.props.beginEditing(this.props.item); | ||
} else { | ||
this.setState({ contextualMenuVisible: true }); | ||
} | ||
} | ||
|
||
@autobind | ||
private _onCloseContextualMenu(ev: Event): void { | ||
this.setState({ contextualMenuVisible: false }); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters