From 0e18c255cd257997e963f8bd3150ae60d260cc24 Mon Sep 17 00:00:00 2001
From: Harsha Vardhini <harvardhini@gmail.com>
Date: Fri, 1 May 2020 12:03:41 +0530
Subject: [PATCH] Updated code for React Document

---
 .../config/package-solution.json              |  2 +-
 .../config/write-manifests.json               |  2 +-
 .../documentsList/component/Documents.tsx     | 68 +++++++++++--------
 3 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/samples/react-documents-detailslist/config/package-solution.json b/samples/react-documents-detailslist/config/package-solution.json
index 6622e2915..de82ee117 100644
--- a/samples/react-documents-detailslist/config/package-solution.json
+++ b/samples/react-documents-detailslist/config/package-solution.json
@@ -8,6 +8,6 @@
     "version": "1.0.0.0"
   },
   "paths": {
-    "zippedPackage": "solution/react-documents.sppkg"
+    "zippedPackage": "solution/reactDocuments.sppkg"
   }
 }
diff --git a/samples/react-documents-detailslist/config/write-manifests.json b/samples/react-documents-detailslist/config/write-manifests.json
index d1fa8fb90..5bcc9c876 100644
--- a/samples/react-documents-detailslist/config/write-manifests.json
+++ b/samples/react-documents-detailslist/config/write-manifests.json
@@ -1,5 +1,5 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
   //NOTE: the cdnBasePath works with relative path; this is useful when you move the pakedge between different environments (dev, staging, prod)
-  "cdnBasePath": "/sites/dev03/Style Library/CDN"
+  "cdnBasePath": "<!-- PATH TO CDN -->"
 }
\ No newline at end of file
diff --git a/samples/react-documents-detailslist/src/components/documentsList/component/Documents.tsx b/samples/react-documents-detailslist/src/components/documentsList/component/Documents.tsx
index 6c22f2736..d41bb873c 100644
--- a/samples/react-documents-detailslist/src/components/documentsList/component/Documents.tsx
+++ b/samples/react-documents-detailslist/src/components/documentsList/component/Documents.tsx
@@ -6,7 +6,9 @@ import {
   Link, MarqueeSelection, DetailsList, Selection, Image, ImageFit,
   SelectionMode, Spinner, SpinnerSize, Fabric, ColumnActionsMode, IColumn, CheckboxVisibility,
   Callout, Panel, PanelType, IContextualMenuItem, autobind, ContextualMenu, IContextualMenuProps, DirectionalHint,
-  css
+  css,
+  MessageBarType,
+  MessageBar
 } from 'office-ui-fabric-react';
 
 import { IDocumentsProps } from './IDocumentsProps';
@@ -52,32 +54,32 @@ export default class LibraryDocuments extends React.Component<IDocumentsProps, I
 
     let { contextualMenuProps } = this.state;
 
-    if (!this._isConfigurationValid && this.props.webPartDisplayMode === DisplayMode.Edit) {
-      return (
-        <div className={styles.notification}>
-          <div className={styles.notificationIcon}>
-            <i className={css("ms-Icon ms-Icon--ErrorBadge", styles.notificationIcon)} aria-hidden="true"></i>
-            <span className={styles.notificationHeader}>
-              Edit Mode
-               </span>
-          </div>
-        </div>);
-    }
-    if (!this._isConfigurationValid && this.props.webPartDisplayMode === DisplayMode.Read) {
-      return (
-        <div>
-          <div className={styles.notification}>
-            <div className={styles.notificationIcon}>
-              <i className={css("ms-Icon ms-Icon--ErrorBadge", styles.notificationIcon)} aria-hidden="true"></i>
-              <span className={styles.notificationHeader}>
-                Preview Mode
-                  </span>
-            </div>
-          </div>
-        </div>);
-
-
-    }
+    /* if (!this._isConfigurationValid && this.props.webPartDisplayMode === DisplayMode.Edit) {
+       return (
+         <div className={styles.notification}>
+           <div className={styles.notificationIcon}>
+             <i className={css("ms-Icon ms-Icon--ErrorBadge", styles.notificationIcon)} aria-hidden="true"></i>
+             <span className={styles.notificationHeader}>
+               Edit Mode
+                </span>
+           </div>
+         </div>);
+     }
+     if (!this._isConfigurationValid && this.props.webPartDisplayMode === DisplayMode.Read) {
+       return (
+         <div>
+           <div className={styles.notification}>
+             <div className={styles.notificationIcon}>
+               <i className={css("ms-Icon ms-Icon--ErrorBadge", styles.notificationIcon)} aria-hidden="true"></i>
+               <span className={styles.notificationHeader}>
+                 Preview Mode
+                   </span>
+             </div>
+           </div>
+         </div>);
+ 
+ 
+     }*/
     if (this._isConfigurationValid) {
 
       if (this.state.isLoading) {
@@ -134,7 +136,7 @@ export default class LibraryDocuments extends React.Component<IDocumentsProps, I
                   onRenderItemColumn={this._renderItemColumn}
                   checkboxVisibility={CheckboxVisibility.hidden} />
                 {contextualMenuProps && (
-                  <ContextualMenu { ...contextualMenuProps } />
+                  <ContextualMenu {...contextualMenuProps} />
                 )}
               </MarqueeSelection>
             </div>
@@ -142,6 +144,14 @@ export default class LibraryDocuments extends React.Component<IDocumentsProps, I
         );
       }
     }
+    else {
+      return (<MessageBar
+        messageBarType={MessageBarType.warning}
+        isMultiline={false}
+        dismissButtonAriaLabel="Close">
+        Please enter the Library URL from the PropertyPane.
+          </MessageBar>);
+    }
   }
 
 
@@ -400,7 +410,7 @@ export default class LibraryDocuments extends React.Component<IDocumentsProps, I
 
         return document[column.fieldName];
       }],
-      [column.isSortedDescending ? "desc" : "asc"]) ;
+      [column.isSortedDescending ? "desc" : "asc"]);
 
     this.setState({
       displayedDocuments: modifiedDocs,