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

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

@ -1,26 +1,29 @@
{ {
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json", "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
"id": "51c2d476-67e1-453f-888c-ae193bad7bc6", "id": "51c2d476-67e1-453f-888c-ae193bad7bc6",
"alias": "ReactImageEditorWebPart", "alias": "ReactImageEditorWebPart",
"componentType": "WebPart", "componentType": "WebPart",
// The "*" signifies that the version should be taken from the package.json // The "*" signifies that the version should be taken from the package.json
"version": "*", "version": "*",
"manifestVersion": 2, "manifestVersion": 2,
// If true, the component can only be installed on sites where Custom Script is allowed. // 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. // 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 // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
"requiresCustomScript": false, "requiresCustomScript": false,
"preconfiguredEntries": [{ "preconfiguredEntries": [{
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
"group": { "default": "Other" }, "group": { "default": "Other" },
"title": { "default": "react-image-editor" }, "title": { "default": "react-image-editor" },
"description": { "default": "react-image-editor description" }, "description": { "default": "react-image-editor description" },
"officeFabricIconFontName": "Page", "officeFabricIconFontName": "Page",
"properties": { "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 { import {
BaseClientSideWebPart, BaseClientSideWebPart,
IPropertyPaneConfiguration, IPropertyPaneConfiguration,
PropertyPaneTextField PropertyPaneTextField,
PropertyPaneToggle
} from '@microsoft/sp-webpart-base'; } from '@microsoft/sp-webpart-base';
import * as strings from 'ReactImageEditorWebPartStrings'; import * as strings from 'ReactImageEditorWebPartStrings';
@ -35,8 +36,12 @@ export default class ReactImageEditorWebPart extends BaseClientSideWebPart<IReac
if(this.properties.url !== value) if(this.properties.url !== value)
this.properties.url = value; this.properties.url = value;
this.properties.settings=[]; 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, groupName: strings.BasicGroupName,
groupFields: [ groupFields: [
PropertyPaneTextField('description', { PropertyPaneToggle('showTitle',{
label: strings.DescriptionFieldLabel 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 styles from './ReactImageEditor.module.scss';
import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle"; 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 { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
import { WebPartContext } from '@microsoft/sp-webpart-base'; import { WebPartContext } from '@microsoft/sp-webpart-base';
import { FilePicker, IFilePickerResult } from '@pnp/spfx-controls-react/lib/FilePicker'; import { FilePicker, IFilePickerResult } from '@pnp/spfx-controls-react/lib/FilePicker';
@ -26,27 +26,50 @@ export interface IReactImageEditorBaseProps {
} }
export interface IReactImageEditorState { export interface IReactImageEditorState {
filepickerOpen: boolean isFilePickerOpen: boolean,
statekey: string;
} }
export default class ReactImageEditor extends React.Component<IReactImageEditorProps, IReactImageEditorState> { export default class ReactImageEditor extends React.Component<IReactImageEditorProps, IReactImageEditorState> {
constructor(props: IReactImageEditorProps) { constructor(props: IReactImageEditorProps) {
super(props); super(props);
this.state = { 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> { public render(): React.ReactElement<IReactImageEditorProps> {
const { url, settings } = this.props; const { url, settings } = this.props;
const isConfigured = url && url.length > 0; const { isFilePickerOpen } = this.state;
const isFilePickerOpen = this.state.filepickerOpen const isConfigured = !!url && url.length > 0;
return ( return (
<div className={styles.reactImageEditor}> <div className={styles.reactImageEditor}>
<WebPartTitle displayMode={this.props.displayMode} <WebPartTitle displayMode={this.props.displayMode}
title={this.props.title} title={this.props.title}
updateProperty={this.props.updateTitleProperty} /> 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' iconText='Configure your web part'
description='Please configure the web part.' description='Please configure the web part.'
buttonLabel='Configure' buttonLabel='Configure'
@ -61,21 +84,24 @@ export default class ReactImageEditor extends React.Component<IReactImageEditorP
settingschanged={this.props.updateManipulationSettingsProperty} settingschanged={this.props.updateManipulationSettingsProperty}
src={url} 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 > </div >
); );
} }
private _onConfigure = () => { private _onConfigure = () => {
// Context of the web part if (Environment.type === EnvironmentType.Local) {
this.props.context.propertyPane.open(); 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);
} }
} }

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

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

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

@ -1,10 +1,10 @@
declare interface IReactImageEditorWebPartStrings { declare interface IReactImageEditorWebPartStrings {
PropertyPaneDescription: string; PropertyPaneDescription: string;
BasicGroupName: string; BasicGroupName: string;
DescriptionFieldLabel: string; ShowTitleFieldLabel: string;
} }
declare module 'ReactImageEditorWebPartStrings' { declare module 'ReactImageEditorWebPartStrings' {
const strings: IReactImageEditorWebPartStrings; const strings: IReactImageEditorWebPartStrings;
export = strings; export = strings;
} }