How to use the @uifabric/experiments/lib/SelectedItemsList.TriggerOnContextMenu function in @uifabric/experiments

To help you get started, we’ve selected a few @uifabric/experiments examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github OfficeDev / office-ui-fabric-react / packages / experiments / src / components / SelectedItemsList / SelectedPeopleList / examples / SelectedPeopleList.WithEdit.Example.tsx View on Github external
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>
github OfficeDev / office-ui-fabric-react / packages / experiments / src / components / SelectedItemsList / SelectedPeopleList / examples / SelectedPeopleList.WithContextMenu.Example.tsx View on Github external
private SelectedItem = ItemWithContextMenu({
    menuItems: item =&gt; [
      {
        key: 'remove',
        text: 'Remove',
        onClick: () =&gt; {
          this._selectionList.removeItems([item]);
        }
      },
      {
        key: 'copy',
        text: 'Copy',
        onClick: () =&gt; 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>
github OfficeDev / office-ui-fabric-react / packages / experiments / src / components / SelectedItemsList / SelectedPeopleList / examples / SelectedPeopleList.WithEditInContextMenu.Example.tsx View on Github external
onClick: () =&gt; {
            this._selectionList.removeItems([item]);
          }
        },
        {
          key: 'copy',
          text: 'Copy',
          onClick: () =&gt; copyToClipboard(this._getCopyItemsText([item]))
        },
        {
          key: 'edit',
          text: 'Edit',
          onClick: () =&gt; onTrigger &amp;&amp; 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>