add example

packages/react-examples/src/experiments/UnifiedPeoplePicker/DoubleUnifiedPeoplePicker.Example.tsx

@@ -58,6 +58,8 @@ const UnifiedPeoplePickerExample = (): JSX.Element => {
     ..._suggestions,
   ]);
 
+  const ref = React.useRef<any>();
+
   const [peopleSelectedItems, setPeopleSelectedItems] = React.useState<IPersonaProps[]>([]);
 
   const _onSuggestionSelected = (
@@ -102,26 +104,6 @@ const UnifiedPeoplePickerExample = (): JSX.Element => {
     return copyText;
   };
 
-  const _onPaste = (pastedValue: string, selectedItemsList: IPersonaProps[]): void => {
-    // Find the suggestion corresponding to the specific text name
-    // and update the selectedItemsList to re-render everything.
-    const newList: IPersonaProps[] = [];
-    if (pastedValue !== null) {
-      pastedValue.split(',').forEach(textValue => {
-        if (textValue) {
-          people.forEach(suggestionItem => {
-            if (suggestionItem.text === textValue) {
-              selectedItemsList.push(suggestionItem);
-              newList.push(suggestionItem);
-            }
-          });
-        }
-      });
-    }
-
-    setPeopleSelectedItems(prevPeopleSelectedItems => [...prevPeopleSelectedItems, ...newList]);
-  };
-
   const _serializeItemsForDrag = (items: IPersonaProps[]): string => {
     return _getItemsCopyText(items);
   };
@@ -179,14 +161,54 @@ const UnifiedPeoplePickerExample = (): JSX.Element => {
     setPeopleSelectedItems(updatedItems);
   };
 
-  const _onInputChange = (filterText: string): void => {
+  const SEPARATOR_REGEX = new RegExp(';|,|\\n|\u000A', 'g');
+  const splitPasteInputIntoRecipientStrings = (inputText: string) =>
+    inputText
+      .split(SEPARATOR_REGEX)
+      .map((token: string) => token.trim())
+      .filter((token: string) => !!token);
+
+  const _onInputChange = (filterText: string, composing?: boolean, resultItemsList?: IPersonaProps[]): void => {
     const allPeople = people;
+
+    const lastCharIndex = filterText.length - 1;
+    const lastChar = filterText[lastCharIndex];
     const suggestions = allPeople.filter((item: IPersonaProps) => _startsWith(item.text || '', filterText));
     const suggestionList = suggestions.map(item => {
       return { item: item, isSelected: false, key: item.key } as IFloatingSuggestionItem<IPersonaProps>;
     });
-    // We want to show top 5 results
-    setPeopleSuggestions(suggestionList.splice(0, 5));
+
+    const updatedItems: IPersonaProps[] = [];
+    const currentItems: IPersonaProps[] = [...peopleSelectedItems];
+
+    for (let i = 0; i < currentItems.length; i++) {
+      const item = currentItems[i];
+      updatedItems.push(item);
+    }
+
+    if (lastChar == ';' || lastChar == ',') {
+      const pastedText = splitPasteInputIntoRecipientStrings(filterText);
+      pastedText.forEach(function(itemText) {
+        let result;
+        const extractedText = itemText.substring(0, lastCharIndex);
+        // We need to do an exact match
+
+        allPeople.forEach((item: IPersonaProps) => {
+          if (item.text.toLowerCase() == extractedText.toLowerCase()) {
+            result = item;
+          }
+        });
+
+        if (result && resultItemsList) {
+          resultItemsList.push(result);
+          updatedItems.push(result);
+        }
+        setPeopleSelectedItems(updatedItems);
+      });
+    } else {
+      // We want to show top 5 results
+      setPeopleSuggestions(suggestionList.splice(0, 5));
+    }
   };
 
   function _startsWith(text: string, filterText: string): boolean {
@@ -222,13 +244,12 @@ const UnifiedPeoplePickerExample = (): JSX.Element => {
   return (
     <>
       <UnifiedPeoplePicker
+        componentRef={ref}
         selectedItemsListProps={selectedPeopleListProps}
         floatingSuggestionProps={floatingPeoplePickerProps}
         inputProps={inputProps}
         // eslint-disable-next-line react/jsx-no-bind
         onInputChange={_onInputChange}
-        // eslint-disable-next-line react/jsx-no-bind
-        onPaste={_onPaste}
         customClipboardType="recipients"
       />
     </>