Initiated Peoplepicker control

Author: AsishP

src/PeoplePicker.ts

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

src/controls/peoplepicker/IPeoplePicker.ts

@@ -0,0 +1,76 @@
+import { IPersonaProps, DirectionalHint } from "office-ui-fabric-react";
+import { WebPartContext } from '@microsoft/sp-webpart-base';
+
+/**
+ * Used to display a placeholder in case of no or temporary content. Button is optional.
+ *
+ */
+export interface IPeoplePickerProps {
+  /**
+   * Context of the component
+   */
+  context: WebPartContext;
+  /**
+   * Name of SharePoint Group
+   */
+  groupName?: string;
+  /**
+   * image Initials
+   */
+  getAllUsers?: boolean;
+  /** 
+   * Text of the Control 
+  */
+  titleText: string;
+  /**
+   * Selection Limit of Control
+   */
+  personSelectionLimit?: number;
+  /**
+   * Show or Hide Tooltip
+   */
+  showtooltip? : boolean;
+  /**
+   * People Field is mandatory
+   */
+  isRequired? : boolean;
+  /**
+   * Mandatory field error message
+   */
+  errorMessage? : string;
+  /**
+   * Method to check value of People Picker text
+   */
+  selectedItems?: (items: any[]) => void; 
+  /**
+   * Tooltip Message
+   */
+  tooltipMessage? : string;
+  /**
+   * Directional Hint of tool tip
+   */
+  tooltipDirectional? : DirectionalHint;
+}
+
+export interface IPeoplePickerState {
+  selectedPersons?: IPersonaProps[];
+  mostRecentlyUsedPersons: IPersonaProps[];
+  currentSelectedPersons: IPersonaProps[];
+  allPersons: [{
+    id: string,
+    imageUrl: string,
+    imageInitials: string,
+    primaryText: string, //Name
+    secondaryText: string, //Role
+    tertiaryText: string, //status
+    optionalText: string //stgring
+  }];
+  delayResults?: boolean;
+  currentPicker?: number | string;
+  peoplePersonaMenu?: IPersonaProps[];
+  peoplePartTitle: string;
+  peoplePartTooltip : string;
+  isLoading : boolean;
+  peopleValidatorText? : string;
+  showmessageerror: boolean;
+}

src/controls/peoplepicker/PeoplePickerComponent.module.scss

@@ -0,0 +1,100 @@
+.placeholder {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+
+    .placeholderContainer {
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        -ms-grid-row-align: center;
+        align-items: center;
+        color: "[theme:neutralSecondary, default: #666666]";
+        background-color: "[theme:neutralLighter, default: #f4f4f4]";
+        width: 100%;
+        padding: 80px 0;
+
+        .placeholderHead {
+            color: "[theme:neutralPrimary, default: #333333]";
+
+            .placeholderHeadContainer {
+                height: 100%;
+                white-space: nowrap;
+                text-align: center;
+            }
+
+            .placeholderIcon {
+                display: inline-block;
+                vertical-align: middle;
+                white-space: normal;
+            }
+
+            .placeholderText {
+                display: inline-block;
+                vertical-align: middle;
+                white-space: normal
+            }
+        }
+
+        .placeholderDescription {
+            width: 65%;
+            vertical-align: middle;
+            margin: 0 auto;
+            text-align: center;
+
+            .placeholderDescriptionText {
+                color: "[theme:neutralSecondary, default: #666666]";
+                font-size: 17px;
+                display: inline-block;
+                margin: 24px 0;
+                font-weight: 100;
+            }
+
+            button {
+              font-size: 14px;
+              font-weight: 400;
+              box-sizing: border-box;
+              display: inline-block;
+              text-align: center;
+              cursor: pointer;
+              vertical-align: top;
+              min-width: 80px;
+              height: 32px;
+              background-color: "[theme:themePrimary, default: #0078d7]";
+              color: #fff;
+              user-select: none;
+              outline: transparent;
+              border-width: 1px;
+              border-style: solid;
+              border-color: transparent;
+              border-image: initial;
+              text-decoration: none;
+            }
+        }
+    }
+}
+
+[dir=ltr] .placeholder,
+[dir=rtl] .placeholder {
+
+    .placeholderContainer {
+
+        .placeholderHead {
+
+            .placeholderText {
+                padding-left: 20px;
+            }
+        }
+    }
+}
+
+.placeholderOverlay {
+    position: relative;
+    height: 100%;
+    z-index: 1;
+
+    .placeholderSpinnerContainer {
+        position: relative;
+        width: 100%;
+        margin: 164px 0
+    }
+}