Merge branch 'main' into react-graph-app-secret-expiration-upgrade-to…

…-1.20

.metadata/extension-samples.json

@@ -6916,7 +6916,7 @@
       "This sample shows site mega menu. Application customizer is used along with SharePoint List to store the menu items."
     ],
     "creationDateTime": "2018-12-10",
-    "updateDateTime": "2018-12-10",
+    "updateDateTime": "2024-10-31",
     "products": [
       "SharePoint"
     ],
@@ -6927,7 +6927,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.7.0"
+        "value": "1.20.0"
       }
     ],
     "tags": [],

.metadata/samples.json

@@ -6916,7 +6916,7 @@
       "This sample shows site mega menu. Application customizer is used along with SharePoint List to store the menu items."
     ],
     "creationDateTime": "2018-12-10",
-    "updateDateTime": "2018-12-10",
+    "updateDateTime": "2024-10-31",
     "products": [
       "SharePoint"
     ],
@@ -6927,7 +6927,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.7.0"
+        "value": "1.20.0"
       }
     ],
     "tags": [],
@@ -27685,6 +27685,83 @@
       }
     ]
   },
+  {
+    "name": "pnp-sp-dev-spfx-web-parts-react-svg-to-json-converter",
+    "source": "pnp",
+    "title": "SVG to JSON Converter",
+    "shortDescription": "Allows users to read SVGs from a SharePoint library, select one of them and have the code converted into a JSON format that is ready to be used in a SharePoint List in advanced formatting.",
+    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-svg-to-json-converter",
+    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-svg-to-json-converter",
+    "longDescription": [
+      "This web part allows users to read SVGs from a SharePoint library, select one of them and have the code converted into a JSON format that is ready to be used in a SharePoint List in advanced formatting. Users can both copy the JSON format to their clipboard (for further manipulation) or select a site, a list, and a column and then directly apply the format to this column."
+    ],
+    "creationDateTime": "2024-11-01",
+    "updateDateTime": "2024-11-01",
+    "products": [
+      "SharePoint"
+    ],
+    "metadata": [
+      {
+        "key": "CLIENT-SIDE-DEV",
+        "value": "React"
+      },
+      {
+        "key": "SPFX-VERSION",
+        "value": "1.20.0"
+      }
+    ],
+    "thumbnails": [
+      {
+        "name": "webpart-german.png",
+        "type": "image",
+        "order": 100,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-svg-to-json-converter/assets/webpart-german.png",
+        "alt": "Web Part Preview"
+      },
+      {
+        "name": "webpart-sp.png",
+        "type": "image",
+        "order": 101,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-svg-to-json-converter/assets/webpart-sp.png",
+        "alt": "Web Part Preview"
+      },
+      {
+        "name": "webpart-with-reset.png",
+        "type": "image",
+        "order": 102,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-svg-to-json-converter/assets/webpart-with-reset.png",
+        "alt": "Web Part Preview"
+      },
+      {
+        "name": "webpart-with-site-selector.png",
+        "type": "image",
+        "order": 103,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-svg-to-json-converter/assets/webpart-with-site-selector.png",
+        "alt": "Web Part Preview"
+      },
+      {
+        "name": "webpart.png",
+        "type": "image",
+        "order": 104,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-svg-to-json-converter/assets/webpart.png",
+        "alt": "Web Part Preview"
+      }
+    ],
+    "authors": [
+      {
+        "gitHubAccount": "LuiseFreese",
+        "pictureUrl": "https://github.com/LuiseFreese.png",
+        "name": "Luise Freese"
+      }
+    ],
+    "references": [
+      {
+        "name": "Build your first SharePoint client-side web part",
+        "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+      }
+    ]
+  },
   {
     "name": "pnp-sp-dev-spfx-web-parts-react-tabacordion",
     "source": "pnp",

samples/react-image-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-image-editor",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "main": "lib/index.js",
   "engines": {
@@ -9,7 +9,8 @@
   "scripts": {
     "build": "gulp bundle",
     "clean": "gulp clean",
-    "test": "gulp test"
+    "test": "gulp test",
+    "ship": "gulp clean && gulp build && gulp bundle --ship && gulp package-solution --ship"
   },
   "dependencies": {
     "@microsoft/sp-core-library": "~1.4.0",

samples/react-image-editor/src/components/ImageManipulation/ImageManipulation.tsx

@@ -321,38 +321,71 @@ export class ImageManipulation extends React.Component<IImageManipulationProps,
   }
   private getCropGrid(): JSX.Element {
     const lastset: ICropSettings = this.getLastManipulation() as ICropSettings;
-    let lastdata: ICrop = { sx: 0, sy: 0, width: 0, height: 0 };
+    let lastdata: ICrop;
 
+    // Initialize crop data based on the current settings or default to aspect ratio
     if (lastset && lastset.type === ManipulationType.Crop) {
       lastdata = lastset;
+    } else {
+      const aspect = this.state.lockAspectCrop ? this.getAspect() : undefined;
+      lastdata = {
+        sx: 0,
+        sy: 0,
+        width: this.canvasRef ? this.canvasRef.width : 0,
+        height: this.state.lockAspectCrop && this.canvasRef && this.canvasRef.width && aspect
+          ? this.canvasRef.width / aspect
+          : this.canvasRef ? this.canvasRef.height : 0,
+      };
+      lastdata.aspect = aspect; // Set the aspect if the lock is enabled
     }
-    return (<ImageCrop
-      crop={lastdata}
-      showRuler
-      sourceHeight={this.img.height}
-      sourceWidth={this.img.width}
-      onChange={(crop) => {
-        this.setCrop(crop.sx, crop.sy, crop.width, crop.height, crop.aspect);
-      }
-      }
-    />);
+
+    console.log('Crop data passed to ImageCrop:', lastdata);
+
+    return (
+      <ImageCrop
+        crop={lastdata}
+        showRuler
+        sourceHeight={this.img.height}
+        sourceWidth={this.img.width}
+        onChange={(crop) => {
+          this.setCrop(crop.sx, crop.sy, crop.width, crop.height, crop.aspect);
+        }}
+      />
+    );
   }
 
   private getResizeGrid(): JSX.Element {
     const lastset: IResizeSettings = this.getLastManipulation() as IResizeSettings;
+    let lastdata: IResizeSettings;
+
+    // Initialize resize data based on the current settings or default to aspect ratio
     if (lastset && lastset.type === ManipulationType.Resize) {
-      return (<ImageGrid
-        width={lastset.width} height={lastset.height}
-        aspect={lastset.aspect}
-        onChange={(size) => this.setResize(size.width, size.height, lastset.aspect)}
-      />);
+      lastdata = lastset;
+    } else {
+      const aspect = this.state.lockAspectResize ? this.getAspect() : undefined;
+      lastdata = {
+        type: ManipulationType.Resize,
+        width: this.canvasRef ? this.canvasRef.width : 0,
+        height: this.state.lockAspectResize && this.canvasRef && this.canvasRef.width && aspect
+          ? this.canvasRef.width / aspect
+          : this.canvasRef ? this.canvasRef.height : 0,
+        aspect: aspect,
+      };
     }
-    return (<ImageGrid
-      onChange={(size) => this.setResize(size.width, size.height, undefined)}
-      // aspect={this.getAspect()}
-      width={this.canvasRef.width} height={this.canvasRef.height} />);
+
+    console.log('Resize data passed to ImageGrid:', lastdata);
+
+    return (
+      <ImageGrid
+        width={lastdata.width}
+        height={lastdata.height}
+        aspect={lastdata.aspect}
+        onChange={(size) => this.setResize(size.width, size.height, lastdata.aspect)}
+      />
+    );
   }
 
+
   private getMaxWidth(): string {
     const { settingPanel } = this.state;
     if (settingPanel === SettingPanelType.Crop || settingPanel === SettingPanelType.Resize) {

samples/react-image-editor/src/webparts/reactImageEditor/ReactImageEditorWebPart.ts

@@ -30,16 +30,24 @@ export default class ReactImageEditorWebPart extends BaseClientSideWebPart<IReac
         title: this.properties.title,
         url: this.properties.url,
         settings: this.properties.settings,
-        showEditIcon:this.properties.showEditIcon,
-        altText:this.properties.altText,
-
-
+        showEditIcon: this.properties.showEditIcon,
+        altText: this.properties.altText,
+        hideRecentTab: this.properties.hideRecentTab,
+        hideWebSearchTab: this.properties.hideWebSearchTab,
+        hideStockImages: this.properties.hideStockImages,
+        hideOrganisationalAssetTab: this.properties.hideOrganisationalAssetTab,
+        hideOneDriveTab: this.properties.hideOneDriveTab,
+        hideSiteFilesTab: this.properties.hideSiteFilesTab,
+        hideLocalUploadTab: this.properties.hideLocalUploadTab,        
+        hideLinkUploadTab: this.properties.hideLinkUploadTab,
+
+
 
         updateTitleProperty: (value: string) => { this.properties.title = value; },
         updateUrlProperty: (value: string) => {
-        // tslint:disable-next-line: curly
-        if (this.properties.url !== value)
-          this.properties.url = value;
+          // tslint:disable-next-line: curly
+          if (this.properties.url !== value)
+            this.properties.url = value;
           this.properties.settings = [];
           this.render();
         },
@@ -73,16 +81,56 @@ export default class ReactImageEditorWebPart extends BaseClientSideWebPart<IReac
             {
               groupName: strings.BasicGroupName,
               groupFields: [
-                PropertyPaneTextField('altText',{label:strings.AltTextFieldLabel}),
+                PropertyPaneTextField('altText', { label: strings.AltTextFieldLabel }),
                 PropertyPaneToggle('showTitle', {
                   label: strings.ShowTitleFieldLabel
                 })
                 ,
                 PropertyPaneToggle('showEditIcon', {
                   label: strings.ShowEditIconFieldLabel
                 }),
-                PropertyPaneLabel('urlInfo',{text:`The selected image is at ${this.properties.url?this.properties.url:'Not yet selected'} `})
-
+                PropertyPaneLabel('urlInfo', { text: `The selected image is at ${this.properties.url ? this.properties.url : 'Not yet selected'} ` }),
+                PropertyPaneToggle('hideRecentTab', {
+                  label: 'Hide Recent Tab',
+                  onText: 'Yes',
+                  offText: 'No'
+                }),
+                PropertyPaneToggle('hideWebSearchTab', {
+                  label: 'Hide Web Search Tab',
+                  onText: 'Yes',
+                  offText: 'No'
+                }),
+                PropertyPaneToggle('hideStockImages', {
+                  label: 'Hide Stock Images Tab',
+                  onText: 'Yes',
+                  offText: 'No'
+                }),
+                PropertyPaneToggle('hideOrganisationalAssetTab', {
+                  label: 'Hide Organisational Asset Tab',
+                  onText: 'Yes',
+                  offText: 'No'
+                }),
+                PropertyPaneToggle('hideOneDriveTab', {
+                  label: 'Hide OneDrive Tab',
+                  onText: 'Yes',
+                  offText: 'No'
+                }),
+                PropertyPaneToggle('hideSiteFilesTab', {
+                  label: 'Hide Site Files Tab',
+                  onText: 'Yes',
+                  offText: 'No'
+                }),
+                PropertyPaneToggle('hideLocalUploadTab', {
+                  label: 'Hide Local Upload Tab',
+                  onText: 'Yes',
+                  offText: 'No'
+                }),               
+                PropertyPaneToggle('hideLinkUploadTab', {
+                  label: 'Hide Link Upload Tab',
+                  onText: 'Yes',
+                  offText: 'No'
+                }),
+
               ]
             }
           ]