Label for list item picker

petkir · web-flow · commit 88e2510c0715 · 2021-06-04T14:53:54.000+01:00
* Label for list item picker #885 * Docs and Label added to ListPicker
diff --git a/docs/documentation/docs/controls/ComboBoxListItemPicker.md b/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)
diff --git a/docs/documentation/docs/controls/ListItemPicker.md b/docs/documentation/docs/controls/ListItemPicker.md
@@ -64,5 +64,6 @@ The `ListItemPicker` control can be configured with the following properties:
 | orderBy | string | no | condition to order by list Item, same as $orderby 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)
diff --git a/src/controls/listItemPicker/ComboBoxListItemPicker.module.scss b/src/controls/listItemPicker/ComboBoxListItemPicker.module.scss
@@ -0,0 +1,8 @@
+.comboBoxListItemPickerWrapper{
+  position: relative;
+  .loading{
+    position: absolute;
+    right:8px;
+    bottom:9px;
+  }
+}
diff --git a/src/controls/listItemPicker/ComboBoxListItemPicker.tsx b/src/controls/listItemPicker/ComboBoxListItemPicker.tsx
@@ -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 && isInitialLoad !== false){
+    if (onInitialized && isInitialLoad !== false) {
       onInitialized();
     }
   }
@@ -97,33 +99,34 @@ 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}
-                  onChange={(e, value) => this.onChanged(value)}
-                  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}
+          onChange={(e, value) => this.onChanged(value)}
+          multiSelect={this.props.multiSelect}
+          defaultSelectedKey={this.selectedItems.map(item => item.key) || []}
+          className={className}
+          disabled={disabled} />
+        {!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,
@@ -133,7 +136,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
diff --git a/src/controls/listItemPicker/IComboBoxListItemPickerProps.ts b/src/controls/listItemPicker/IComboBoxListItemPickerProps.ts
@@ -27,6 +27,6 @@ export interface IComboBoxListItemPickerProps {
     suggestionsHeaderText?: string;
     noResultsFoundText?: string;
     onInitialized?: () => void;
-
     onSelectedItem: (item: any) => void;
+    label?: string;
 }
diff --git a/src/controls/listItemPicker/IListItemPickerProps.ts b/src/controls/listItemPicker/IListItemPickerProps.ts
@@ -1,6 +1,7 @@
 import { BaseComponentContext } from '@microsoft/sp-component-base';
 
 export interface IListItemPickerProps {
+
   columnInternalName: string;
   keyColumnInternalName?: string;
   context: BaseComponentContext;
@@ -21,4 +22,10 @@ export interface IListItemPickerProps {
   placeholder?: string;
 
   onSelectedItem: (item:any) => void;
+
+  /**
+   * The label for the control
+   */
+   label?: string;
+
 }
diff --git a/src/controls/listItemPicker/ListItemPicker.tsx b/src/controls/listItemPicker/ListItemPicker.tsx
@@ -3,13 +3,15 @@ import * as React from "react";
 import SPservice from "../../services/SPService";
 import { TagPicker } from "office-ui-fabric-react/lib/components/pickers/TagPicker/TagPicker";
 import { Label } from "office-ui-fabric-react/lib/Label";
+import { getId } from 'office-ui-fabric-react/lib/Utilities';
 import { IListItemPickerProps, IListItemPickerState } from ".";
 import * as telemetry from '../../common/telemetry';
 import isEqual from 'lodash/isEqual';
 
 
 export class ListItemPicker extends React.Component<IListItemPickerProps, IListItemPickerState> {
   private _spservice: SPservice;
+  private _tagPickerId = getId('tagPicker');
 
   constructor(props: IListItemPickerProps) {
     super(props);
@@ -49,8 +51,8 @@ export class ListItemPicker extends React.Component<IListItemPickerProps, IListI
     if (this.props.listId !== nextProps.listId
       || this.props.columnInternalName !== nextProps.columnInternalName
       || this.props.webUrl !== nextProps.webUrl) {
-        this.loadField(nextProps);
-      }
+      this.loadField(nextProps);
+    }
   }
 
   /**
@@ -67,22 +69,26 @@ 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: suggestionsHeaderText,
-            noResultsFoundText: noresultsFoundText
-          }}
-          selectedItems={selectedItems}
-          onChange={this.onItemChanged}
-          className={className}
-          itemLimit={itemLimit}
-          disabled={disabled}
-          inputProps={{
-            placeholder: placeholder
-          }} />
-
+        {!!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: suggestionsHeaderText,
+              noResultsFoundText: noresultsFoundText
+            }}
+            selectedItems={selectedItems}
+            onChange={this.onItemChanged}
+            className={className}
+            itemLimit={itemLimit}
+            disabled={disabled}
+            inputProps={{
+              placeholder: placeholder
+            }} />
+        </div>
         {!!errorMessage &&
           (<Label style={{ color: '#FF0000' }}> {errorMessage} </Label>)}
       </div>

Original file line number	Diff line number	Diff line change
`@@ -27,6 +27,6 @@ export interface IComboBoxListItemPickerProps {`
`27`	`27`	`suggestionsHeaderText?: string;`
`28`	`28`	`noResultsFoundText?: string;`
`29`	`29`	`onInitialized?: () => void;`
`30`		`-`
`31`	`30`	`onSelectedItem: (item: any) => void;`
	`31`	`+ label?: string;`
`32`	`32`	`}`