From 5b3fcee62c584513b9bd327655b80aac84e7e286 Mon Sep 17 00:00:00 2001
From: Peter Paul Kirschner <peter@kirschner.zone>
Date: Tue, 16 Mar 2021 12:21:01 +0100
Subject: [PATCH] Settings and Loc

---
 .../ReactImageEditorWebPart.manifest.json     | 55 +++++++++--------
 .../ReactImageEditorWebPart.ts                | 14 +++--
 .../components/ReactImageEditor.tsx           | 60 +++++++++++++------
 .../webparts/reactImageEditor/loc/en-us.js    | 14 ++---
 .../reactImageEditor/loc/mystrings.d.ts       | 20 +++----
 5 files changed, 99 insertions(+), 64 deletions(-)

diff --git a/samples/react-image-editor/src/webparts/reactImageEditor/ReactImageEditorWebPart.manifest.json b/samples/react-image-editor/src/webparts/reactImageEditor/ReactImageEditorWebPart.manifest.json
index fc2c43ecf..4d4a254ef 100644
--- a/samples/react-image-editor/src/webparts/reactImageEditor/ReactImageEditorWebPart.manifest.json
+++ b/samples/react-image-editor/src/webparts/reactImageEditor/ReactImageEditorWebPart.manifest.json
@@ -1,26 +1,29 @@
-{
-  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
-  "id": "51c2d476-67e1-453f-888c-ae193bad7bc6",
-  "alias": "ReactImageEditorWebPart",
-  "componentType": "WebPart",
-
-  // The "*" signifies that the version should be taken from the package.json
-  "version": "*",
-  "manifestVersion": 2,
-
-  // If true, the component can only be installed on sites where Custom Script is allowed.
-  // Components that allow authors to embed arbitrary script code should set this to true.
-  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
-  "requiresCustomScript": false,
-
-  "preconfiguredEntries": [{
-    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
-    "group": { "default": "Other" },
-    "title": { "default": "react-image-editor" },
-    "description": { "default": "react-image-editor description" },
-    "officeFabricIconFontName": "Page",
-    "properties": {
-      "description": "react-image-editor"
-    }
-  }]
-}
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+  "id": "51c2d476-67e1-453f-888c-ae193bad7bc6",
+  "alias": "ReactImageEditorWebPart",
+  "componentType": "WebPart",
+
+  // The "*" signifies that the version should be taken from the package.json
+  "version": "*",
+  "manifestVersion": 2,
+
+  // If true, the component can only be installed on sites where Custom Script is allowed.
+  // Components that allow authors to embed arbitrary script code should set this to true.
+  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
+  "requiresCustomScript": false,
+
+  "preconfiguredEntries": [{
+    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
+    "group": { "default": "Other" },
+    "title": { "default": "react-image-editor" },
+    "description": { "default": "react-image-editor description" },
+    "officeFabricIconFontName": "Page",
+    "properties": {
+      "title": "react-image-editor Sample",
+      "showTitle":true,
+      "settings":[],
+      "url":""
+    }
+  }]
+}
diff --git a/samples/react-image-editor/src/webparts/reactImageEditor/ReactImageEditorWebPart.ts b/samples/react-image-editor/src/webparts/reactImageEditor/ReactImageEditorWebPart.ts
index 3d3b144f3..245394f48 100644
--- a/samples/react-image-editor/src/webparts/reactImageEditor/ReactImageEditorWebPart.ts
+++ b/samples/react-image-editor/src/webparts/reactImageEditor/ReactImageEditorWebPart.ts
@@ -4,7 +4,8 @@ import { Version } from '@microsoft/sp-core-library';
 import {
   BaseClientSideWebPart,
   IPropertyPaneConfiguration,
-  PropertyPaneTextField
+  PropertyPaneTextField,
+  PropertyPaneToggle
 } from '@microsoft/sp-webpart-base';
 
 import * as strings from 'ReactImageEditorWebPartStrings';
@@ -35,8 +36,12 @@ export default class ReactImageEditorWebPart extends BaseClientSideWebPart<IReac
         if(this.properties.url !== value)
           this.properties.url = value;
           this.properties.settings=[];
+          this.render();
         },
-        updateManipulationSettingsProperty: (value: IImageManipulationSettings[]) => {this.properties.settings = value;}
+        updateManipulationSettingsProperty: (value: IImageManipulationSettings[]) => {
+          this.properties.settings = value;
+          this.render();
+        }
 
       }
     );
@@ -64,9 +69,10 @@ export default class ReactImageEditorWebPart extends BaseClientSideWebPart<IReac
             {
               groupName: strings.BasicGroupName,
               groupFields: [
-                PropertyPaneTextField('description', {
-                  label: strings.DescriptionFieldLabel
+                PropertyPaneToggle('showTitle',{
+                  label: strings.ShowTitleFieldLabel
                 })
+
               ]
             }
           ]
diff --git a/samples/react-image-editor/src/webparts/reactImageEditor/components/ReactImageEditor.tsx b/samples/react-image-editor/src/webparts/reactImageEditor/components/ReactImageEditor.tsx
index 4558082cd..4a6183bc0 100644
--- a/samples/react-image-editor/src/webparts/reactImageEditor/components/ReactImageEditor.tsx
+++ b/samples/react-image-editor/src/webparts/reactImageEditor/components/ReactImageEditor.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from './ReactImageEditor.module.scss';
 
 import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
-import { DisplayMode } from '@microsoft/sp-core-library';
+import { DisplayMode, Environment, EnvironmentType } from '@microsoft/sp-core-library';
 import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
 import { WebPartContext } from '@microsoft/sp-webpart-base';
 import { FilePicker, IFilePickerResult } from '@pnp/spfx-controls-react/lib/FilePicker';
@@ -26,27 +26,50 @@ export interface IReactImageEditorBaseProps {
 
 }
 export interface IReactImageEditorState {
-  filepickerOpen: boolean
+  isFilePickerOpen: boolean,
+  statekey: string;
 }
 
 export default class ReactImageEditor extends React.Component<IReactImageEditorProps, IReactImageEditorState> {
   constructor(props: IReactImageEditorProps) {
     super(props);
     this.state = {
-      filepickerOpen: true
+      isFilePickerOpen: false,
+      statekey: 'init'
     }
+    this._onConfigure = this._onConfigure.bind(this);
+    this._onUrlChanged = this._onUrlChanged.bind(this);
+    this._onSettingsChanged = this._onSettingsChanged.bind(this);
   }
   public render(): React.ReactElement<IReactImageEditorProps> {
     const { url, settings } = this.props;
-    const isConfigured = url && url.length > 0;
-    const isFilePickerOpen = this.state.filepickerOpen
+    const { isFilePickerOpen } = this.state;
+    const isConfigured = !!url && url.length > 0;
     return (
 
       <div className={styles.reactImageEditor}>
         <WebPartTitle displayMode={this.props.displayMode}
           title={this.props.title}
           updateProperty={this.props.updateTitleProperty} />
-        {isConfigured ? (<Placeholder iconName='Edit'
+        {(isFilePickerOpen || isConfigured) && Environment.type !== EnvironmentType.Local &&
+          <FilePicker
+            isPanelOpen={isFilePickerOpen}
+            accepts={[".gif", ".jpg", ".jpeg", ".png"]}
+            buttonIcon="FileImage"
+            onSave={(filePickerResult: IFilePickerResult) => {
+              this.setState({ isFilePickerOpen: false }, () => this._onUrlChanged(filePickerResult.fileAbsoluteUrl))
+            }}
+            onCancel={() => {
+              this.setState({ isFilePickerOpen: false }, () => this._onUrlChanged(''))
+            }}
+            onChanged={(filePickerResult: IFilePickerResult) => {
+              this.setState({ isFilePickerOpen: false }, () => this._onUrlChanged(filePickerResult.fileAbsoluteUrl))
+
+            }}
+            context={this.props.context}
+          />}
+
+        {!isConfigured ? (<Placeholder iconName='Edit'
           iconText='Configure your web part'
           description='Please configure the web part.'
           buttonLabel='Configure'
@@ -61,21 +84,24 @@ export default class ReactImageEditor extends React.Component<IReactImageEditorP
             settingschanged={this.props.updateManipulationSettingsProperty}
             src={url}
           />)}
-        {isFilePickerOpen}
-        <FilePicker
-          accepts={[".gif", ".jpg", ".jpeg", ".png"]}
-          buttonIcon="FileImage"
-          onSave={(filePickerResult: IFilePickerResult) => { this.props.updateUrlProperty(filePickerResult.fileAbsoluteUrl) }}
-          onCancel={() => { this.props.updateUrlProperty('') }}
-          onChanged={(filePickerResult: IFilePickerResult) => { this.props.updateUrlProperty(filePickerResult.fileAbsoluteUrl) }}
-          context={this.props.context}
-        />
+
       </div >
     );
   }
 
   private _onConfigure = () => {
-    // Context of the web part
-    this.props.context.propertyPane.open();
+    if (Environment.type === EnvironmentType.Local) {
+      this.setState({ isFilePickerOpen: false }, () => {
+        this._onUrlChanged('https://media.gettyimages.com/photos/whitewater-paddlers-descend-vertical-waterfall-in-kayak-picture-id1256321293?s=2048x2048');
+      });
+    } else {
+      this.setState({ isFilePickerOpen: true });
+    }
+  }
+  private _onUrlChanged = (url: string) => {
+    this.props.updateUrlProperty(url);
+  }
+  private _onSettingsChanged = (settings: IImageManipulationSettings[]) => {
+    this.props.updateManipulationSettingsProperty(settings);
   }
 }
diff --git a/samples/react-image-editor/src/webparts/reactImageEditor/loc/en-us.js b/samples/react-image-editor/src/webparts/reactImageEditor/loc/en-us.js
index e5f5a6025..147b8199b 100644
--- a/samples/react-image-editor/src/webparts/reactImageEditor/loc/en-us.js
+++ b/samples/react-image-editor/src/webparts/reactImageEditor/loc/en-us.js
@@ -1,7 +1,7 @@
-define([], function() {
-  return {
-    "PropertyPaneDescription": "Description",
-    "BasicGroupName": "Group Name",
-    "DescriptionFieldLabel": "Description Field"
-  }
-});
\ No newline at end of file
+define([], function() {
+  return {
+    "PropertyPaneDescription": "Description",
+    "BasicGroupName": "Group Name",
+    "ShowTitleFieldLabel": "Show webpart title"
+  }
+});
diff --git a/samples/react-image-editor/src/webparts/reactImageEditor/loc/mystrings.d.ts b/samples/react-image-editor/src/webparts/reactImageEditor/loc/mystrings.d.ts
index f18b418bf..41bd420b9 100644
--- a/samples/react-image-editor/src/webparts/reactImageEditor/loc/mystrings.d.ts
+++ b/samples/react-image-editor/src/webparts/reactImageEditor/loc/mystrings.d.ts
@@ -1,10 +1,10 @@
-declare interface IReactImageEditorWebPartStrings {
-  PropertyPaneDescription: string;
-  BasicGroupName: string;
-  DescriptionFieldLabel: string;
-}
-
-declare module 'ReactImageEditorWebPartStrings' {
-  const strings: IReactImageEditorWebPartStrings;
-  export = strings;
-}
+declare interface IReactImageEditorWebPartStrings {
+  PropertyPaneDescription: string;
+  BasicGroupName: string;
+  ShowTitleFieldLabel: string;
+}
+
+declare module 'ReactImageEditorWebPartStrings' {
+  const strings: IReactImageEditorWebPartStrings;
+  export = strings;
+}