Add label to list item picker

* Combobox Label and Spinner

* ListItemPickerLabel

* Added Prop to Docs

Author: petkir

docs/documentation/docs/controls/ComboBoxListItemPicker.md

@@ -122,5 +122,6 @@ The `ComboBoxListItemPicker` control can be configured with the following proper
 | multiSelect | boolean | no | Allows multiple selection|
 | onInitialized | () => void | no | Calls when component is ready|
 | itemLimit | number | no | Maximum number of items to be displayed in the combobox. Default: 100 |
+| label | string | no | Specifies the text describing the combobox ListItemPicker. |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ComboBoxListItemPicker)

docs/documentation/docs/controls/ListItemPicker.md

@@ -62,5 +62,6 @@ The `ListItemPicker` control can be configured with the following properties:
 | filter | string | no | condition to filter list Item, same as $filter ODATA parameter|
 | placeholder | string | no | Short text hint to display in empty picker |
 | substringSearch | boolean | no | Specifies if substring search should be used |
+| label | string | no | Specifies the text describing the ListItemPicker. |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ListItemPicker)

package-lock.json

@@ -0,0 +1,8 @@
+.comboBoxListItemPickerWrapper{
+  position: relative;
+  .loading{
+    position: absolute;
+    right:8px;
+    bottom:9px;
+  }
+}

src/controls/listItemPicker/ComboBoxListItemPicker.module.scss

@@ -5,6 +5,8 @@ import { IComboBoxListItemPickerProps, IComboBoxListItemPickerState } from ".";
 import * as telemetry from '../../common/telemetry';
 import { ComboBox, IComboBoxOption } from "office-ui-fabric-react/lib/ComboBox";
 import { ListItemRepository } from '../../common/dal/ListItemRepository';
+import styles from './ComboBoxListItemPicker.module.scss';
+import { Spinner, SpinnerSize } from 'office-ui-fabric-react';
 
 
 export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPickerProps, IComboBoxListItemPickerState> {
@@ -73,7 +75,7 @@ export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPic
     this.setState({
       availableOptions: options
     });
-    if(onInitialized){
+    if (onInitialized) {
       onInitialized();
     }
   }
@@ -90,33 +92,35 @@ export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPic
   public render(): React.ReactElement<IComboBoxListItemPickerProps> {
     const { className, disabled } = this.props;
 
-    return (this.state.availableOptions ? (
-      <div>
-        <ComboBox options={this.state.availableOptions}
-                  autoComplete={this.props.autoComplete}
-                  comboBoxOptionStyles={this.props.comboBoxOptionStyles}
-                  allowFreeform={this.props.allowFreeform}
-                  keytipProps={this.props.keytipProps}
-                  onMenuDismissed={this.props.onMenuDismiss}
-                  onMenuOpen={this.props.onMenuOpen}
-                  text={this.props.text}
-                  onChanged={this.onChanged}
-                  multiSelect={this.props.multiSelect}
-                  defaultSelectedKey={this.selectedItems.map(item=>item.key) || []}
-                  className={className}
-                  disabled={disabled} />
-
+    return (
+      <div className={styles.comboBoxListItemPickerWrapper}>
+        <ComboBox
+          label={this.props.label}
+          options={this.state.availableOptions}
+          autoComplete={this.props.autoComplete}
+          comboBoxOptionStyles={this.props.comboBoxOptionStyles}
+          allowFreeform={this.props.allowFreeform}
+          keytipProps={this.props.keytipProps}
+          onMenuDismissed={this.props.onMenuDismiss}
+          onMenuOpen={this.props.onMenuOpen}
+          text={this.props.text}
+          onChanged={this.onChanged}
+          multiSelect={this.props.multiSelect}
+          defaultSelectedKey={this.selectedItems.map(item => item.key) || []}
+          className={className}
+          disabled={disabled || !this.state.availableOptions} />
+        {!this.state.errorMessage && !this.state.availableOptions && (<Spinner className={styles.loading} size={SpinnerSize.small} />)}
         {!!this.state.errorMessage &&
           (<Label style={{ color: '#FF0000' }}> {this.state.errorMessage} </Label>)}
-      </div>) : <span>Loading...</span>
+      </div>
     );
   }
 
   /**
    * On Selected Item
    */
   private onChanged = (option?: IComboBoxOption, index?: number, value?: string, submitPendingValueEvent?: any): void => {
-    if(this.props.multiSelect){
+    if (this.props.multiSelect) {
       if (option && option.selected) {
         this.selectedItems.push({
           [this.props.keyColumnInternalName || "Id"]: option.key,
@@ -126,7 +130,7 @@ export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPic
       } else {
         this.selectedItems = this.selectedItems.filter(o => o[this.props.keyColumnInternalName || "Id"] !== option.key);
       }
-    }else{
+    } else {
       this.selectedItems.push({
         [this.props.keyColumnInternalName || "Id"]: option.key,
         [this.props.columnInternalName]: option.text

src/controls/listItemPicker/ComboBoxListItemPicker.tsx

@@ -29,4 +29,5 @@ export interface IComboBoxListItemPickerProps {
     onInitialized?: () => void;
 
     onSelectedItem: (item: any) => void;
+    label?:string;
 }

src/controls/listItemPicker/IComboBoxListItemPickerProps.ts

@@ -4,21 +4,23 @@ import { ExtensionContext } from "@microsoft/sp-extension-base";
 export interface IListItemPickerProps {
   columnInternalName: string;
   keyColumnInternalName?: string;
-  context: WebPartContext |  ExtensionContext;
+  context: WebPartContext | ExtensionContext;
   listId: string;
   itemLimit: number;
   filter?: string;
   className?: string;
   webUrl?: string;
   defaultSelectedItems?: any[];
   disabled?: boolean;
-  suggestionsHeaderText?:string;
-  noResultsFoundText?:string;
+  suggestionsHeaderText?: string;
+  noResultsFoundText?: string;
   substringSearch?: boolean; // JJ - 20200613 - find by substring as an option
   /**
    * Placeholder to be displayed in an empty term picker
    */
   placeholder?: string;
 
-  onSelectedItem: (item:any) => void;
+  onSelectedItem: (item: any) => void;
+
+  label?: string;
 }

src/controls/listItemPicker/IListItemPickerProps.ts

@@ -5,11 +5,13 @@ import { TagPicker } from "office-ui-fabric-react/lib/components/pickers/TagPick
 import { Label } from "office-ui-fabric-react/lib/Label";
 import { IListItemPickerProps, IListItemPickerState } from ".";
 import * as telemetry from '../../common/telemetry';
+import { getId } from 'office-ui-fabric-react/lib/Utilities';
 
 
 export class ListItemPicker extends React.Component<IListItemPickerProps, IListItemPickerState> {
   private _spservice: SPservice;
   private selectedItems: any[];
+  private _tagPickerId = getId('tagPicker');
 
   constructor(props: IListItemPickerProps) {
     super(props);
@@ -44,24 +46,29 @@ export class ListItemPicker extends React.Component<IListItemPickerProps, IListI
 
     return (
       <div>
-        <TagPicker onResolveSuggestions={this.onFilterChanged}
-                   //   getTextFromItem={(item: any) => { return item.name; }}
-                   getTextFromItem={this.getTextFromItem}
-                   pickerSuggestionsProps={{
-                     suggestionsHeaderText: this.state.suggestionsHeaderText,
-                     noResultsFoundText: this.state.noresultsFoundText
-                   }}
-                   defaultSelectedItems={this.props.defaultSelectedItems || []}
-                   onChange={this.onItemChanged}
-                   className={className}
-                   itemLimit={itemLimit}
-                   disabled={disabled}
-                   inputProps={{
-                    placeholder: placeholder
-                  }} />
-
-        {!!this.state.errorMessage &&
-          (<Label style={{color:'#FF0000'}}> {this.state.errorMessage} </Label>)}
+        {!!this.props.label &&
+          <Label htmlFor={this._tagPickerId} >{this.props.label}</Label>
+        }
+        <div id={this._tagPickerId}>
+          <TagPicker onResolveSuggestions={this.onFilterChanged}
+            //   getTextFromItem={(item: any) => { return item.name; }}
+            getTextFromItem={this.getTextFromItem}
+            pickerSuggestionsProps={{
+              suggestionsHeaderText: this.state.suggestionsHeaderText,
+              noResultsFoundText: this.state.noresultsFoundText
+            }}
+            defaultSelectedItems={this.props.defaultSelectedItems || []}
+            onChange={this.onItemChanged}
+            className={className}
+            itemLimit={itemLimit}
+            disabled={disabled}
+            inputProps={{
+              placeholder: placeholder
+            }} />
+
+          {!!this.state.errorMessage &&
+            (<Label style={{ color: '#FF0000' }}> {this.state.errorMessage} </Label>)}
+        </div>
       </div>
     );
   }