honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
samples/react-image-editor/src/webparts/reactImageEditor/ReactImageEditorWebPart.manifest.json
View File

@ -20,7 +20,10 @@
"description": { "default": "react-image-editor description" },
"officeFabricIconFontName": "Page",
"properties": {
"description": "react-image-editor"
"title": "react-image-editor Sample",
"showTitle":true,
"settings":[],
"url":""
}
}]
}

14
samples/react-image-editor/src/webparts/reactImageEditor/ReactImageEditorWebPart.ts
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
})
]
}
]

60
samples/react-image-editor/src/webparts/reactImageEditor/components/ReactImageEditor.tsx
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);
}
}

2
samples/react-image-editor/src/webparts/reactImageEditor/loc/en-us.js vendored
View File

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

2
samples/react-image-editor/src/webparts/reactImageEditor/loc/mystrings.d.ts vendored
View File

@ -1,7 +1,7 @@
declare interface IReactImageEditorWebPartStrings {
PropertyPaneDescription: string;
BasicGroupName: string;
DescriptionFieldLabel: string;
ShowTitleFieldLabel: string;
}
declare module 'ReactImageEditorWebPartStrings' {