Merge branch 'NishkalankBezawada-issue-1439-viewpicker' into dev

Author: joelfmrodrigues

docs/documentation/docs/assets/ViewPicker-multi.png

@@ -0,0 +1,74 @@
+# ViewPicker control
+
+This control allows you to select available views from lists/libraries of the current site.
+
+Here is an example of the control:
+
+![ViewPicker initial](../assets/ViewPicker1.PNG)
+
+`ViewPicker` single selection mode:
+
+![ViewPicker single selection](../assets/ViewPicker2.png)
+
+`ViewPicker` multi selection mode:
+
+![ViewPicker multi selection](../assets/ViewPicker-multi.png) 
+
+
+## How to use this control in your solutions
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency.
+- Import the control into your component:
+
+
+```TypeScript
+import { ViewPicker } from "@pnp/spfx-controls-react/lib/ViewPicker";
+```
+
+- Use the `ViewPicker` control in your code as follows:
+
+```TypeScript
+    <ViewPicker context={this.props.context}
+        listId={"9f3908cd-1e88-4ab3-ac42-08efbbd64ec9"}
+        placeholder={'Select list view(s)'}
+        orderBy={orderBy.Title}
+        multiSelect={true}
+        onSelectionChanged={this.onViewPickerChange} />
+```
+
+- The `onSelectionChanged` change event returns the selected view(s) and can be implemented as follows in your webpart:
+
+```TypeScript
+  private onViewPickerChange = (views: string | string[]) => {
+    console.log("Views:", views);
+  }
+```
+
+
+## Implementation
+
+The `ViewPicker` control can be configured with the following properties
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| context | BaseComponentContext | yes | The context object of the SPFx loaded webpart or customizer. |
+| className | string | no | If provided, additional class name to provide on the dropdown element. |
+| disabled | boolean | no | Whether or not the view picker control is disabled. |
+| filter | string | no | Filter views from Odata query. |
+| label | string | no | Label to use for the control. |
+| listId | string | no | The List Id of the list. |
+| placeholder | string | no | Placeholder label to show in the dropdown. |
+| orderBy | Enum | no | How to order the set of views (By ID or Title). |
+| selectedView | string OR string[] | no | Keys(View 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`. |
+| showBlankOption | boolean | no | Whether or not to show a blank option. Default to `false`. |
+| viewsToExclude | string[] | no | Defines view titles which should be excluded from the view picker control. |
+| webAbsoulteUrl | string | no | Absolute Web Url of target site (user requires permissions) |
+| onSelectionChanged | (newValue: string OR string[]): void | no | Callback function when the selected option changes. |
+
+Enum `orderBy`
+
+| Value |
+| ---- |
+| Id |
+| Title |

docs/documentation/docs/assets/ViewPicker1.PNG

@@ -0,0 +1 @@
+export * from './controls/viewPicker/index';

docs/documentation/docs/assets/ViewPicker2.png

@@ -206,3 +206,15 @@ export interface IUploadImageResult {
   ServerRelativeUrl: string;
   UniqueId: string;
 }
+
+export interface ISPView {
+    Id: string;
+    Title: string;
+}
+
+  /**
+ * Defines a collection of SharePoint list views
+ */
+export interface ISPViews {
+    value: ISPView[];
+}

docs/documentation/docs/controls/ViewPicker.md

@@ -0,0 +1,96 @@
+import { BaseComponentContext } from '@microsoft/sp-component-base';
+import { ISPView } from '../../../src/common/SPEntities';
+import { IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
+
+
+/**
+ * Enum for specifying how the views should be sorted
+ */
+export enum orderBy {
+    Id = 1,
+    Title
+}
+
+export interface IViewPickerProps {
+  /**
+   * Context of the current web part
+  */
+  context: BaseComponentContext;
+
+  /**
+   * If provided, additional class name to provide on the dropdown element.
+   */
+  className?: string;
+
+  /**
+   * Whether the view control is enabled or not.
+   */
+  disabled?: boolean;
+
+  /**
+   * Filter views from Odata query
+   */
+  filter?: string;
+
+  /**
+   * Specifies the text describing the ViewPicker
+   */
+  label?: string;
+
+  /**
+   * The List Id of the list
+   */
+  listId?: string;
+
+  /**
+   * Input placeholder text. Displayed until option is selected.
+   */
+  placeholder?: string;
+
+  /**
+   * How to order the set of views (By ID or Title).
+   */
+  orderBy?: orderBy;
+
+  /**
+   * Initial selected view(s) of the control
+   */
+  selectedView?: string | string[];
+
+  /**
+   * Indicates if multi-choice selections is allowed. Default to false.
+   */
+  multiSelect?: boolean;
+
+  /**
+   * Whether or not to show a blank option. Default false.
+   */
+  showBlankOption?: boolean;
+
+  /**
+   * Defines view titles which should be excluded from the view picker control
+   */
+  viewsToExclude?: string[];
+
+  /**
+   * Absolute Web Url of target site (user requires permissions)
+   */
+  webAbsoluteUrl?: string;
+
+
+  /**
+   * Callback issued when the selected option changes.
+   */
+  onSelectionChanged?: (newValue: string | string[]) => void;
+}
+
+export interface IViewPickerState {
+  /**
+  * The results fetched to the viewPicker
+  */
+  results: IDropdownOption[];
+  /**
+  * Keys of the currently selected item(s).
+  */
+  selectedView?: string | string[];
+}

src/ViewPicker.ts

@@ -0,0 +1,7 @@
+.viewPicker {
+    .spinner {
+        float: right;
+        margin-top: 10px;
+        margin-right: -20px;
+    }
+}