Fixes and cleanup following merge from 'dev'

Author: Tom German

src/controls/dynamicForm/DynamicForm.tsx

@@ -511,8 +511,8 @@ export class DynamicForm extends React.Component<
         // We are adding a new list item
         try {
           const contentTypeIdField = "ContentTypeId";
-          //check if item contenttype is passed, then update the object with content type id, else, pass the object 
-          contentTypeId !== undefined && contentTypeId.startsWith("0x01") ? objects[contentTypeIdField] = contentTypeId : objects;
+          // check if item contenttype is passed, then update the object with content type id, else, pass the object 
+          if (contentTypeId !== undefined && contentTypeId.startsWith("0x01")) objects[contentTypeIdField] = contentTypeId;
           const iar = await sp.web.lists.getById(listId).items.add(objects);
           if (onSubmitted) {
             onSubmitted(

src/controls/dynamicForm/dynamicField/DynamicField.tsx

@@ -22,8 +22,6 @@ import { IPickerTerms, TaxonomyPicker } from '../../taxonomyPicker';
 import styles from '../DynamicForm.module.scss';
 import { IDynamicFieldProps } from './IDynamicFieldProps';
 import { IDynamicFieldState } from './IDynamicFieldState';
-import { isArray } from 'lodash';
-
 
 export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFieldState> {
 

src/controls/fieldCollectionData/collectionDataItem/CollectionDataItem.tsx

@@ -57,7 +57,7 @@ export class CollectionDataItem extends React.Component<ICollectionDataItemProps
    * Update the item value on the field change
    */
   private onValueChanged = (fieldId: string, value: any): void => { // eslint-disable-line @typescript-eslint/no-explicit-any
-    
+
     this.setState((prevState: ICollectionDataItemState): ICollectionDataItemState => {
       const { crntItem } = prevState;
       // Update the changed field
@@ -78,7 +78,7 @@ export class CollectionDataItem extends React.Component<ICollectionDataItemProps
       _selectedOption = {
         key: value,
         text: value
-      };      
+      };
     } else {
       _selectedOption = option;
     }
@@ -92,8 +92,8 @@ export class CollectionDataItem extends React.Component<ICollectionDataItemProps
       this.doAllFieldChecks();
 
       // Store this in the current state
-      
-      return {crntItem};
+
+      return { crntItem };
     });
 
   }
@@ -123,7 +123,7 @@ export class CollectionDataItem extends React.Component<ICollectionDataItemProps
         };
       }
 
-      if (_selected === null ) {
+      if (_selected === null) {
         _selected = [];
       }
 
@@ -144,7 +144,7 @@ export class CollectionDataItem extends React.Component<ICollectionDataItemProps
 
       this.doAllFieldChecks();
 
-      return { crntItem};
+      return { crntItem };
     });
   }
 
@@ -351,7 +351,7 @@ export class CollectionDataItem extends React.Component<ICollectionDataItemProps
       validation = await field.onGetErrorMessage(value, this.props.index, item);
       isValid = validation === "";
     } else if (typeof field.minimumUsers === "number" && value.length < field.minimumUsers) {
-        validation = typeof field.minimumUsersMessage === "string" ? field.minimumUsersMessage : strings.CollectionDataMinimumUsersDefaultMessage.replace("{0}", field.minimumUsers.toString());
+      validation = typeof field.minimumUsersMessage === "string" ? field.minimumUsersMessage : strings.CollectionDataMinimumUsersDefaultMessage.replace("{0}", field.minimumUsers.toString());
     }
 
     // Store the field validation
@@ -361,14 +361,14 @@ export class CollectionDataItem extends React.Component<ICollectionDataItemProps
     this.doAllFieldChecks();
     // Return empty the error message if needed
 
-    return ""; 
+    return "";
   }
 
   private comboboxValidation = (field: ICustomCollectionField, selected: string[] | string): void => {
     let isValid = true;
-    let validation = "";
+    const validation = "";
 
-    if (field.required && (selected === null || selected.length === 0) ) {
+    if (field.required && (selected === null || selected.length === 0)) {
       isValid = false;
     }
 
@@ -520,7 +520,7 @@ export class CollectionDataItem extends React.Component<ICollectionDataItemProps
           value={item[field.id] ? new Date(item[field.id]) : undefined}
           onSelectDate={(date) => { this.onValueChanged(field.id, date) }}
           formatDate={(date) => { return date ? date?.toLocaleDateString() : ""; }}
-          />;
+        />;
       case CustomCollectionFieldType.custom:
         if (field.onCustomRender) {
           return field.onCustomRender(field, item[field.id], this.onValueChanged, item, item.uniqueId, this.onCustomFieldValidation);
@@ -535,9 +535,9 @@ export class CollectionDataItem extends React.Component<ICollectionDataItemProps
           if (item[field.id] !== null) {
             for (let i: number = 0; i < item[field.id].length; i++) {
               _selectedComboBoxKeys.push(item[field.id][i].key);
-              
+
               // if selected option is not in list (anymore), add it to choices
-              if (typeof _comboBoxOptions.find(value => value.key === item[field.id][i].key) === "undefined" ) {
+              if (typeof _comboBoxOptions.find(value => value.key === item[field.id][i].key) === "undefined") {
                 _comboBoxOptions.push(item[field.id][i]);
               }
             }
@@ -548,44 +548,48 @@ export class CollectionDataItem extends React.Component<ICollectionDataItemProps
           if (item[field.id] !== null) {
             _selectedComboBoxKey = item[field.id].key;
 
-            if (typeof _comboBoxOptions.find(value => value.key === item[field.id].key) === "undefined" ) {
+            if (typeof _comboBoxOptions.find(value => value.key === item[field.id].key) === "undefined") {
               _comboBoxOptions.push(item[field.id]);
             }
 
           }
-          
+
         }
 
-        return <ComboBox 
+        return <ComboBox
           onFocus={() => this.comboboxValidation(field, field.multiSelect ? _selectedComboBoxKeys : _selectedComboBoxKey)}
           onBlur={() => this.comboboxValidation(field, field.multiSelect ? _selectedComboBoxKeys : _selectedComboBoxKey)}
           multiSelect={field.multiSelect}
-          allowFreeform={field.allowFreeform} 
+          allowFreeform={field.allowFreeform}
           placeholder={field.placeholder}
           options={_comboBoxOptions}
-          selectedKey= { field.multiSelect ? _selectedComboBoxKeys : _selectedComboBoxKey}
+          selectedKey={field.multiSelect ? _selectedComboBoxKeys : _selectedComboBoxKey}
           required={field.required}
           disabled={disableFieldOnEdit}
-          onChange={async (event, option, index, value) =>{ 
-            field.multiSelect ? this.onValueChangedComboBoxMulti(field.id, option, value) : this.onValueChangedComboBoxSingle(field.id, option, value)
-          } }
-          
+          onChange={async (event, option, index, value) => {
+            if (field.multiSelect) {
+              this.onValueChangedComboBoxMulti(field.id, option, value)
+            } else {
+              this.onValueChangedComboBoxSingle(field.id, option, value)
+            }
+          }}
         />;
-      case CustomCollectionFieldType.peoplepicker: 
-      _selectedUsers = item[field.id] !== null ? item[field.id]: [] ;
+        
+      case CustomCollectionFieldType.peoplepicker:
+        _selectedUsers = item[field.id] !== null ? item[field.id] : [];
 
-        return <PeoplePicker 
-          peoplePickerCntrlclassName = {styles.peoplePicker}
-          context = {this.props.context}
+        return <PeoplePicker
+          peoplePickerCntrlclassName={styles.peoplePicker}
+          context={this.props.context}
           personSelectionLimit={typeof field.maximumUsers === "number" ? field.maximumUsers : typeof field.multiSelect === "boolean" && field.multiSelect === false ? 1 : 99}
           principalTypes={[PrincipalType.User]}
           ensureUser={true}
           placeholder={field.placeholder || field.title}
           required={field.required}
           onChange={(items: IPersonaProps[]) => {
-              const _selected: string[] = items.length === 0 ? null : items.map(({secondaryText}) => secondaryText); 
-              this.onValueChanged(field.id, _selected)
-            } 
+            const _selected: string[] = items.length === 0 ? null : items.map(({ secondaryText }) => secondaryText);
+            this.onValueChanged(field.id, _selected)
+          }
           }
           onGetErrorMessage={async (items: IPersonaProps[]) => await this.peoplepickerValidation(field, items, item)}
 
@@ -600,7 +604,7 @@ export class CollectionDataItem extends React.Component<ICollectionDataItemProps
           disabled={disableFieldOnEdit}
           onChange={(e, value) => this.onValueChanged(field.id, value)}
           deferredValidationTime={field.deferredValidationTime || field.deferredValidationTime >= 0 ? field.deferredValidationTime : 200}
-          onGetErrorMessage={async (value: string) =>  await this.fieldValidation(field, value) }
+          onGetErrorMessage={async (value: string) => await this.fieldValidation(field, value)}
           inputClassName="PropertyFieldCollectionData__panel__string-field" />;
     }
   }
@@ -712,10 +716,10 @@ export class CollectionDataItem extends React.Component<ICollectionDataItemProps
                 <Icon iconName="Clear" />
               </Link>
             ) : (
-                <Link title={strings.CollectionAddRowButtonLabel} className={`${this.disableAdd(crntItem) ? "" : styles.addBtn}`} disabled={this.disableAdd(crntItem)} onClick={this.addRow}>
-                  <Icon iconName="Add" />
-                </Link>
-              )
+              <Link title={strings.CollectionAddRowButtonLabel} className={`${this.disableAdd(crntItem) ? "" : styles.addBtn}`} disabled={this.disableAdd(crntItem)} onClick={this.addRow}>
+                <Icon iconName="Add" />
+              </Link>
+            )
           }
         </span>
       </div>

src/webparts/controlsTest/ControlsTestWebPart.manifest.json

@@ -53,6 +53,8 @@
           "IconPicker": false,
           "IFrameDialog": false,
           "IFramePanel": false,
+          "ListItemComments": false,
+          "ListItemPicker": false,
           "ListPicker": false,
           "ListView": false,
           "LocationPicker": false,
@@ -75,6 +77,7 @@
           "TreeView": false,
           "UploadFiles": false,
           "VariantThemeProvider": false,
+          "ViewPicker": false,
           "WebPartTitle": false
         }
       }

src/webparts/controlsTest/IControlsTestWebPartProps.ts

@@ -6,7 +6,8 @@ export type ValidControls = "all" |
   "FieldCollectionData" | "FieldPicker" | "FilePicker" | 
   "FileTypeIcon" | "FolderExplorer" | "FolderPicker" |
   "GridLayout" | "IconPicker" | "IFrameDialog" |
-  "IFramePanel" | "ListPicker" | "ListView" |
+  "IFramePanel" | "ListPicker" | "ListItemPicker" |
+  "ListItemComments" | "ViewPicker" | "ListView" |
   "LocationPicker" | "Map" | "ModernAudio" |
   "ModernTaxonomyPicker" | "Pagination" | "PeoplePicker" |
   "Placeholder" | "Progress" | "RichText" |

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -146,7 +146,7 @@ import {
 import {
   PeoplePicker,
   PrincipalType
-} from "../../../PeoplePicker";
+} from "../../../controls/peoplepicker";
 import { Placeholder } from "../../../Placeholder";
 import {
   IProgressAction,
@@ -1544,6 +1544,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
               // filter="Title eq 'Test List'"
               onSelectionChanged={this.onListPickerChange} />
           </div>
+        </div>
+        <div id="ListItemPickerDiv" className={styles.container} hidden={!controlVisibility.ListItemPicker}>
           <div className="ms-font-m">List Item picker list data tester:
 
             <ListItemPicker listId={'b1416fca-dc77-4198-a082-62a7657dcfa9'}
@@ -1559,7 +1561,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
           </div>
         </div>
 
-        <div id="ListItemCommentsDiv" className={styles.container} hidden={!isListItemCommentsDivVisible}>
+        <div id="ListItemCommentsDiv" className={styles.container} hidden={!controlVisibility.ListItemComments}>
           <div className="ms-font-m">List Item Comments Tester
             <ListItemComments webUrl='https://contoso.sharepoint.com/sites/ThePerspective'
               listId='6f151a33-a7af-4fae-b8c4-f2f04cbc690f'
@@ -1571,7 +1573,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
           </div>
         </div>
 
-        <div id="ViewPickerDiv" className={styles.container} hidden={!isViewPickerDivVisible}>
+        <div id="ViewPickerDiv" className={styles.container} hidden={!controlVisibility.ViewPicker}>
           <div className="ms-font-m">View picker tester:
                 <ViewPicker context={this.props.context}
                   label="Select view(s)"

src/webparts/controlsTest/propertyPane/controls/ControlToggles.tsx

@@ -56,7 +56,8 @@ export class ControlToggles extends React.Component<IControlTogglesProps, IContr
             "FieldCollectionData", "FieldPicker", "FilePicker", 
             "FileTypeIcon", "FolderExplorer", "FolderPicker",
             "GridLayout", "IconPicker", "IFrameDialog",
-            "IFramePanel", "ListPicker", "ListView",
+            "IFramePanel", "ListPicker", "ListItemPicker",
+            "ListItemComments", "ViewPicker", "ListView",
             "LocationPicker", "Map", "ModernAudio",
             "ModernTaxonomyPicker", "Pagination", "PeoplePicker",
             "Placeholder", "Progress", "RichText",