Merge branch 'russgove-dev' into dev

Author: AJIXuMuK

docs/documentation/docs/controls/ListPicker.md

@@ -30,6 +30,7 @@ import { ListPicker } from "@pnp/spfx-controls-react/lib/ListPicker";
             label="Select your list(s)"
             placeHolder="Select your list(s)"
             baseTemplate={100}
+            contentTypeId="0x0101"
             includeHidden={false}
             multiSelect={false}
             onSelectionChanged={this.onListPickerChange} />
@@ -56,13 +57,15 @@ The `ListPicker` control can be configured with the following properties:
 | filter | string | no | Filter list from OData query (takes precendents over Hidden and BaseTemplate Filters). |
 | includeHidden | boolean | no | Whether or not to include hidden lists. Default is `true`. |
 | orderBy | LibsOrderBy | no | How to order the lists retrieved from SharePoint. |
-| selectedList | string OR string[] | no | Keys of the selected item(s). If you provide this, you must maintain selection state by observing onSelectionChanged events and passing a new value in when changed. |
+| selectedList | string OR string[] | no | Keys(list Ids) of the selected item(s). If you provide this, you must maintain selection state by observing onSelectionChanged events and passing a new value in when changed. |
 | multiSelect | boolean | no | Optional mode indicates if multi-choice selections is allowed. Default to `false`. |
 | label | string | no | Label to use for the control. |
 | placeHolder | string | no | Placeholder label to show in the dropdown. **Deprecated. Use `placeholder` instead.** |
 | placeholder | string | no | Placeholder label to show in the dropdown. |
 | onSelectionChanged | (newValue: string OR string[]): void | no | Callback function when the selected option changes. |
 | webAbsoulteUrl | string | no | Absolute Web Url of target site (user requires permissions) |
+| contentTypeId | string | no | The Id if a content type which must be present in a list in order for the list to appear in the picker.|
+| refreshToggle | boolean | no | If present can be used to force the control to refresh the list of lists by toggling its value|
 
 Enum `LibsOrderBy`
 

package-lock.json

@@ -1,10 +1,26 @@
+
+
+
+/**
+ * Represents SP  ContentType Id
+ */
+ export interface ISPContentTypeId {
+    StringValue: string;
+}
+/**
+ * Represents SP List ContentType
+ */
+export interface ISPListContentType {
+    Id: ISPContentTypeId;
+}
 /**
  * Represents SP List
  */
 export interface ISPList {
     Id: string;
     Title: string;
     BaseTemplate: string;
+    ContentTypes? :ISPListContentType[];
 }
 
 /**
@@ -95,7 +111,7 @@ export interface ICultureCalendar {
 }
 
 /**
- * Replica of Microsoft's DateTimeFormat difinition for CultureInfo object
+ * Replica of Microsoft's DateTimeFormat definition for CultureInfo object
  */
 export interface ICultureDateTimeFormat {
     AMDesignator: string;
@@ -128,7 +144,7 @@ export interface ICultureDateTimeFormat {
 }
 
 /**
- * Replica of Microsoft's NumberFormat difinition for CultureInfo object
+ * Replica of Microsoft's NumberFormat definition for CultureInfo object
  */
 export interface ICultureNumberFormat {
     CurrencyDecimalDigits: number;

src/common/SPEntities.ts

@@ -1,6 +1,6 @@
-import { IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
-import { BaseComponentContext } from '@microsoft/sp-component-base';
 import { LibsOrderBy } from "../../services/ISPService";
+import { BaseComponentContext } from '@microsoft/sp-component-base';
+import { IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
 
 export interface IListPickerProps {
   /**
@@ -51,7 +51,7 @@ export interface IListPickerProps {
   /**
   * Input placeholder text. Displayed until option is selected.
   */
- placeholder?: string;
+  placeholder?: string;
   /**
   * Callback issued when the selected option changes
   */
@@ -60,6 +60,14 @@ export interface IListPickerProps {
    * Absolute Web Url of target site (user requires permissions)
    */
   webAbsoluteUrl?: string;
+  /**
+  * Content type id which, if present, must be on the list
+  */
+  contentTypeId?: string;
+    /**
+  * if present can be used to force the control to refresh the list of lists by toggling its value
+  */
+     refreshToggle?: boolean;
 }
 
 export interface IListPickerState {

src/controls/listPicker/IListPicker.ts

@@ -1,13 +1,13 @@
-import * as React from 'react';
-import { IDropdownOption, IDropdownProps, Dropdown } from 'office-ui-fabric-react/lib/components/Dropdown';
+import { cloneDeep } from '@microsoft/sp-lodash-subset';
+import { Dropdown, IDropdownOption, IDropdownProps } from 'office-ui-fabric-react/lib/components/Dropdown';
 import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/components/Spinner';
-import { IListPickerProps, IListPickerState } from './IListPicker';
+import * as React from 'react';
+
+import * as telemetry from '../../common/telemetry';
 import { ISPService } from '../../services/ISPService';
 import { SPServiceFactory } from '../../services/SPServiceFactory';
-import * as telemetry from '../../common/telemetry';
-
+import { IListPickerProps, IListPickerState } from './IListPicker';
 import styles from './ListPicker.module.scss';
-import { cloneDeep } from '@microsoft/sp-lodash-subset';
 
 /**
 * Empty list value, to be checked for single list selection
@@ -51,7 +51,8 @@ export class ListPicker extends React.Component<IListPickerProps, IListPickerSta
       prevProps.baseTemplate !== this.props.baseTemplate ||
       prevProps.includeHidden !== this.props.includeHidden ||
       prevProps.orderBy !== this.props.orderBy ||
-      prevProps.webAbsoluteUrl !== this.props.webAbsoluteUrl
+      prevProps.webAbsoluteUrl !== this.props.webAbsoluteUrl||
+      prevProps.refreshToggle !== this.props.refreshToggle
     ) {
       this.loadLists();
     }
@@ -65,7 +66,8 @@ export class ListPicker extends React.Component<IListPickerProps, IListPickerSta
   * Loads the list from SharePoint current web site
   */
   private loadLists() {
-    const { context, baseTemplate, includeHidden, orderBy, multiSelect, filter, webAbsoluteUrl } = this.props;
+    debugger;
+    const { context, baseTemplate, includeHidden, orderBy, multiSelect, filter, webAbsoluteUrl, contentTypeId } = this.props;
 
     // Show the loading indicator and disable the dropdown
     this.setState({ loading: true });
@@ -75,7 +77,8 @@ export class ListPicker extends React.Component<IListPickerProps, IListPickerSta
       baseTemplate: baseTemplate,
       includeHidden: includeHidden,
       orderBy: orderBy,
-      filter: filter
+      filter: filter,
+      contentTypeId: contentTypeId
     }).then((results) => {
       let options: IDropdownOption[] = [];
 
@@ -150,7 +153,7 @@ export class ListPicker extends React.Component<IListPickerProps, IListPickerSta
     const dropdownOptions: IDropdownProps = {
       className: className,
       options: options,
-      disabled: ( loading || disabled ),
+      disabled: (loading || disabled),
       label: label,
       placeHolder: placeholder || placeHolder,
       onChanged: this.onChanged
@@ -164,8 +167,8 @@ export class ListPicker extends React.Component<IListPickerProps, IListPickerSta
     }
 
     return (
-      <div className={ styles.listPicker }>
-        { loading && <Spinner className={ styles.spinner } size={SpinnerSize.xSmall} /> }
+      <div className={styles.listPicker}>
+        { loading && <Spinner className={styles.spinner} size={SpinnerSize.xSmall} />}
         <Dropdown {...dropdownOptions} />
       </div>
     );

src/controls/listPicker/ListPicker.tsx

@@ -42,6 +42,10 @@ export interface ISitePickerProps {
    * Intial data to load in the 'Selected sites' area (optional)
    */
   initialSites?: ISite[];
+   /**
+   * used to update the sites currently Selected in the contol
+   */
+    selectedSites?: ISite[];
   /**
    * Define if you want to allow multi site selection. True by default.
    */

src/controls/sitePicker/ISitePicker.ts

@@ -1,16 +1,17 @@
-import * as React from 'react';
-import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
-import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
-import { ISite, ISitePickerProps } from './ISitePicker';
-import { getAllSites, getHubSites } from '../../services/SPSitesService';
-import { IDropdownOption, Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
-import { ISelectableOption, SelectableOptionMenuItemType } from 'office-ui-fabric-react/lib/utilities/selectableOption/SelectableOption.types';
-import orderBy from 'lodash/orderBy';
+import { Async } from '@uifabric/utilities/lib/Async';
 import findIndex from 'lodash/findIndex';
+import orderBy from 'lodash/orderBy';
+import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
 import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
-import { toRelativeUrl } from '../../common/utilities/GeneralHelper';
-import { Async } from '@uifabric/utilities/lib/Async';
+import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
+import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
+import { ISelectableOption, SelectableOptionMenuItemType } from 'office-ui-fabric-react/lib/utilities/selectableOption/SelectableOption.types';
+import * as React from 'react';
+
 import * as telemetry from '../../common/telemetry';
+import { toRelativeUrl } from '../../common/utilities/GeneralHelper';
+import { getAllSites, getHubSites } from '../../services/SPSitesService';
+import { ISite, ISitePickerProps } from './ISitePicker';
 
 const styles = mergeStyleSets({
   loadingSpinnerContainer: {
@@ -69,11 +70,12 @@ export const SitePicker: React.FunctionComponent<ISitePickerProps> = (props: Rea
     placeholder,
     searchPlaceholder,
     deferredSearchTime,
-    className
+    className,
+    selectedSites
   } = props;
 
   const [isLoading, setIsLoading] = React.useState<boolean>();
-  const [selectedSites, setSelectedSites] = React.useState<ISite[]>();
+  const [sites, setSites] = React.useState<ISite[]>();
   const [allSites, setAllSites] = React.useState<ISite[]>();
   const [filteredSites, setFilteredSites] = React.useState<ISite[]>();
   const [searchQuery, setSearchQuery] = React.useState<string>();
@@ -92,9 +94,9 @@ export const SitePicker: React.FunctionComponent<ISitePickerProps> = (props: Rea
 
   const onSelectionChange = React.useCallback((e, item: IDropdownOption, index: number) => {
     let newSelectedSites: ISite[] = [];
-
+    //debugger;
     if (multiSelect !== false) {
-      newSelectedSites = selectedSites ? [...selectedSites] : [];
+      newSelectedSites = sites ? [...sites] : [];
       const existingIndex = findIndex(newSelectedSites, s => s.url === item.key);
 
       if (existingIndex >= 0) {
@@ -116,9 +118,9 @@ export const SitePicker: React.FunctionComponent<ISitePickerProps> = (props: Rea
       onChange(newSelectedSites);
     }
 
-    setSelectedSites(newSelectedSites);
-
-  }, [selectedSites, multiSelect, onChange]);
+    setSites(newSelectedSites);
+    //console.log(`onselction change set sites to ${newSelectedSites[0].title}`);
+  }, [sites, multiSelect, onChange]);
 
   const getOptions = React.useCallback((): IDropdownOption[] => {
 
@@ -140,7 +142,7 @@ export const SitePicker: React.FunctionComponent<ISitePickerProps> = (props: Rea
       });
     }
 
-    const selectedSitesIds: string[] = selectedSites ? selectedSites.map(s => s.url!) : [];
+    const selectedSitesIds: string[] = sites ? sites.map(s => s.url!) : [];
 
     if (filteredSites) {
       filteredSites.forEach(s => {
@@ -154,7 +156,7 @@ export const SitePicker: React.FunctionComponent<ISitePickerProps> = (props: Rea
     }
 
     return result;
-  }, [allowSearch, selectedSites, filteredSites, allSites]);
+  }, [allowSearch, sites, filteredSites, allSites]);
 
   const onRenderOption = (option?: ISelectableOption, defaultRender?: (props?: ISelectableOption) => JSX.Element | null): JSX.Element | null => {
     if (!props) {
@@ -194,17 +196,26 @@ export const SitePicker: React.FunctionComponent<ISitePickerProps> = (props: Rea
     telemetry.track('ReactSitePicker');
   }, []);
 
+  React.useEffect(() => {
+    //debugger;
+    setSites(selectedSites);
+   // console.log(`firt useeffect set sites to ${selectedSites[0].title}`);
+    if (!allSites) {
+      setIsLoading(true);
+    }
+  }, [selectedSites]);
 
   React.useEffect(() => {
     if (!initialSites) {
       return;
     }
 
-    setSelectedSites(sites => {
-      if (!sites) { // we want to set the state one time only
+    setSites(osites => {
+      if (!osites) { // we want to set the state one time only
+      //  console.log(`second  useeffect part a  set sites to ${initialSites[0].title}`);
         return initialSites;
       }
-
+    //  console.log(`second  useeffect part b  set sites to ${sites[0].title}`);
       return sites;
     });
 
@@ -229,21 +240,21 @@ export const SitePicker: React.FunctionComponent<ISitePickerProps> = (props: Rea
       promise = getAllSites(context, mode !== 'site', limitToCurrentSiteCollection);
     }
 
-    promise.then(sites => {
-      const copy = orderBy(sites, [propOrderBy || 'title'], [isDesc ? 'desc' : 'asc']);
+    promise.then(newSites => {
+      const copy = orderBy(newSites, [propOrderBy || 'title'], [isDesc ? 'desc' : 'asc']);
       setAllSites(copy);
       setIsLoading(false);
     });
 
   }, [context, isLoading, mode, limitToCurrentSiteCollection]);
 
   React.useEffect(() => {
-    setAllSites(sites => {
-      if (!sites) {
-        return sites;
+    setAllSites(s => {
+      if (!s) {
+        return s;
       }
 
-      const copy = orderBy(sites, [propOrderBy || 'title'], [isDesc ? 'desc' : 'asc']);
+      const copy = orderBy(s, [propOrderBy || 'title'], [isDesc ? 'desc' : 'asc']);
       return copy;
     });
   }, [propOrderBy, isDesc]);
@@ -261,8 +272,8 @@ export const SitePicker: React.FunctionComponent<ISitePickerProps> = (props: Rea
         label={label}
         placeholder={placeholder}
         options={getOptions()}
-        selectedKey={multiSelect === false && !!selectedSites && !!selectedSites[0] ? selectedSites[0].url : undefined}
-        selectedKeys={multiSelect !== false && !!selectedSites ? selectedSites.map(s => s.url) : undefined}
+        selectedKey={multiSelect === false && !!sites && !!sites[0] ? sites[0].url : undefined}
+        selectedKeys={multiSelect !== false && !!sites ? sites.map(s => s.url) : undefined}
         disabled={disabled}
         multiSelect={multiSelect !== false}
         onRenderOption={onRenderOption}

src/controls/sitePicker/SitePicker.tsx

@@ -13,14 +13,16 @@ export interface ILibsOptions {
     baseTemplate?: number;
     includeHidden?: boolean;
     filter?: string;
+    contentTypeId?: string;
 }
 
 export interface ISPService {
+    
     /**
      * Get the lists from SharePoint
      * @param options Options used to order and filter during the API query
      */
     getLibs(options?: ILibsOptions): Promise<ISPLists>;
-    getListItems?(filterText: string, listId: string, internalColumnName: string, field: ISPField, keyInternalColumnName?: string, webUrl?: string) : Promise<any[]>;
+    getListItems?(filterText: string, listId: string, internalColumnName: string, field: ISPField, keyInternalColumnName?: string, webUrl?: string): Promise<any[]>;
     getField: (listId: string, internalColumnName: string, webUrl?: string) => Promise<ISPField | undefined>;
 }