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 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</div>
private SelectedItem = ItemWithContextMenu({
menuItems: item => [
{
key: 'remove',
text: 'Remove',
onClick: () => {
this._selectionList.removeItems([item]);
}
},
{
key: 'copy',
text: 'Copy',
onClick: () => copyToClipboard(this._getCopyItemsText([item]))
}
],
itemComponent: TriggerOnContextMenu(SelectedPersona)
});
public render(): JSX.Element {
return (
<div>
Right click any persona to open the context menu
<br>
{this._renderExtendedPicker()}
</div>
);
}
private _renderExtendedPicker(): JSX.Element {
return (
<div>
</div>
onClick: () => {
this._selectionList.removeItems([item]);
}
},
{
key: 'copy',
text: 'Copy',
onClick: () => copyToClipboard(this._getCopyItemsText([item]))
},
{
key: 'edit',
text: 'Edit',
onClick: () => onTrigger && onTrigger()
}
],
itemComponent: TriggerOnContextMenu(SelectedPersona)
})
});
public render(): JSX.Element {
return (
<div>
Right click any persona to open the context menu
<br>
{this._renderExtendedPicker()}
</div>
);
}
private _renderExtendedPicker(): JSX.Element {
return (
<div></div>