Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
controlledComponent: boolean;
}
export class SelectedPeopleListWithEditInContextMenuExample extends React.Component<{}, IPeopleSelectedItemsListExampleState> {
private _selectionList: ISelectedPeopleList;
private selection: Selection = new Selection({ onSelectionChanged: () => this._onSelectionChange() });
// Used to resolve suggestions on the editableItem
private model = new ExampleSuggestionsModel(people);
private suggestionsStore = new SuggestionsStore();
/**
* Build a custom selected item capable of being edited with a dropdown and capable of editing
*/
private EditableItemWithContextMenu = EditableItem({
editingItemComponent: DefaultEditingItem({
getEditingItemText: (persona: IPersonaProps) => persona.text || '',
onRenderFloatingPicker: (props: EditingItemInnerFloatingPickerProps) => (
)
}),
itemComponent: ItemWithContextMenu({
menuItems: (item, onTrigger) => [
{
key: 'remove',
text: 'Remove',
onClick: () => {
this._selectionList.removeItems([item]);
}
export class SelectedPeopleListWithEditExample extends React.Component<{}, IPeopleSelectedItemsListExampleState> {
private _selectionList: ISelectedPeopleList;
private selection: Selection = new Selection({ onSelectionChanged: () => this._onSelectionChange() });
// Used to resolve suggestions on the editableItem
private model = new ExampleSuggestionsModel(people);
private suggestionsStore = new SuggestionsStore();
/**
* Build a custom selected item capable of being edited when the item is right clicked
*/
private SelectedItem = EditableItem({
itemComponent: TriggerOnContextMenu(SelectedPersona),
editingItemComponent: DefaultEditingItem({
getEditingItemText: persona => persona.text || '',
onRenderFloatingPicker: (props: EditingItemInnerFloatingPickerProps) => (
)
})
});
public render(): JSX.Element {
return (
<div>
Right click any persona to edit it
<br></div>