Merge pull request #2587 from PathToSharePoint/main

Bug fix for Cherry-Picked Content Web Part to v0.4.1

samples/react-cherry-picked-content/README.md

@@ -43,6 +43,8 @@ React-Cherry-Picked-Content | [Christophe Humbert](https://github.com/PathToShar
 
 Version|Date|Comments
 -------|----|--------
+0.4.1|April 9, 2022|Bug fix in getLibraryItemsList method.
+0.4.0|March 18, 2022|Update to library REST query
 0.3.0|March 9, 2022|4 samples added
 0.2.0|March 6, 2022|Refactoring
 0.1.0|February 21, 2022|Initial draft

samples/react-cherry-picked-content/assets/sample.json

@@ -10,7 +10,7 @@
             "The Cherry-Picked Content Web Part is a modern replacement for the classic Content Editor Web Part, with a twist: code snippets can only be picked from approved document libraries."
         ],
         "creationDateTime": "2022-02-21",
-        "updateDateTime": "2022-03-09",
+        "updateDateTime": "2022-04-09",
         "products": [
             "SharePoint"
         ],

samples/react-cherry-picked-content/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cherry-picked-content",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

samples/react-cherry-picked-content/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cherry-picked-content",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "private": true,
   "main": "lib/index.js",
   "scripts": {

samples/react-cherry-picked-content/src/webparts/cherryPickedContent/CherryPickedContentWebPart.ts

@@ -103,7 +103,7 @@ export default class CherryPickedContentWebPart extends BaseClientSideWebPart<IC
   private getLibraryItemsList = (library) => {
     // Validate approved location
     const filesLocation = this.approvedLibraries.filter(loc => loc.key == library)[0];
-    const filesQuery = window.location.origin + filesLocation.siteRelativeURL + "/_api/web/lists/getbytitle('" + filesLocation.library + "')/files?$select=Name";
+    const filesQuery = window.location.origin + filesLocation.siteRelativeURL + "/_api/web/lists/getbytitle('" + filesLocation.library + "')/Items?$select=FileLeafRef";
 
     return this.context.spHttpClient.get(filesQuery, SPHttpClient.configurations.v1)
       .then((response: SPHttpClientResponse) => response.json())
@@ -119,7 +119,10 @@ export default class CherryPickedContentWebPart extends BaseClientSideWebPart<IC
       this.getLibraryItemsList(this.properties.libraryPicker)
         .then((files): void => {
           // store items
-          this.libraryItemsList = files.map(file => file.Name).sort().map(name => { return { key: name, text: name }; });
+          this.libraryItemsList = files.map(file => file.FileLeafRef)
+            .filter(rf => rf.match(/\.(htm?l|txt)$/i))
+            .sort()
+            .map(name => ({ key: name, text: name }));
           this.itemsDropdownDisabled = false;
         })
         .then(() => this.context.propertyPane.refresh());
@@ -144,7 +147,10 @@ export default class CherryPickedContentWebPart extends BaseClientSideWebPart<IC
         .then((files): void => {
           if (files.length) {
             // store items
-            this.libraryItemsList = files.map(file => { return { key: file.Name, text: file.Name }; });
+            this.libraryItemsList = files.map(file => file.FileLeafRef)
+              .filter(rf => rf.match(/\.(htm?l|txt)$/i))
+              .sort()
+              .map(name => ({ key: name, text: name }));
             // enable item selector
             this.itemsDropdownDisabled = false;
             // refresh the item selector control by repainting the property pane

samples/react-cherry-picked-content/src/webparts/cherryPickedContent/components/CherryPickedContent.tsx

@@ -5,12 +5,7 @@ import { escape } from '@microsoft/sp-lodash-subset';
 
 import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
 import PortalIframe from './PortalIframe';
-
-const CherryPickedDiv = ({ htmlFragment }) =>
-  <div ref={ref => { if (ref) { ref.innerHTML = ""; ref.appendChild(document.createRange().createContextualFragment(htmlFragment)); } }}>
-  </div>;
-
-const MemoDiv = React.memo(CherryPickedDiv);
+import CherryPickedMemo from './CherryPickedMemo';
 
 const CherryPickedContent: React.FunctionComponent<ICherryPickedContentProps> = (props) => {
 
@@ -70,13 +65,13 @@ const CherryPickedContent: React.FunctionComponent<ICherryPickedContentProps> =
   else if (props.isolated) {
     return (
       <PortalIframe {...props}>
-        <MemoDiv htmlFragment={htmlFragment} />
+        <CherryPickedMemo htmlFragment={htmlFragment} />
       </PortalIframe>
     );
   }
   else {
     return (
-      <MemoDiv htmlFragment={htmlFragment} />
+      <CherryPickedMemo htmlFragment={htmlFragment} />
     );
   }
 };

samples/react-cherry-picked-content/src/webparts/cherryPickedContent/components/CherryPickedMemo.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+const CherryPickedDiv = ({ htmlFragment }) =>
+  <div ref={ref => { if (ref) { ref.innerHTML = ""; ref.appendChild(document.createRange().createContextualFragment(htmlFragment)); } }}>
+  </div>;
+
+const CherryPickedMemo = React.memo(CherryPickedDiv);
+
+export default CherryPickedMemo;