Settings and Loc

This commit is contained in:
Peter Paul Kirschner 2021-03-16 12:21:01 +01:00
parent 96e0772c7e
commit 5b3fcee62c
5 changed files with 99 additions and 64 deletions

View File

@ -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":""
}
}]
}

View File

@ -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
})
]
}
]

View File

@ -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);
}
}

View File

@ -1,7 +1,7 @@
define([], function() {
return {
"PropertyPaneDescription": "Description",
"BasicGroupName": "Group Name",
"DescriptionFieldLabel": "Description Field"
}
});
define([], function() {
return {
"PropertyPaneDescription": "Description",
"BasicGroupName": "Group Name",
"ShowTitleFieldLabel": "Show webpart title"
}
});

View File

@ -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;
}