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

Changed web part name, added alt text to image in properties, added properties to show\hide edit icon, made the title off and icon off by default, made aspect lock on by default

This commit is contained in:
Ishai Sagi 2024-10-03 13:02:34 +10:00
parent 7f60839f42
commit b4b24ca625
5 changed files with 37 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
samples/react-image-editor/src/components/ImageManipulation/ImageManipulation.tsx
View File

@ -59,12 +59,14 @@ export interface IImageManipulationProps {
editMode?: (mode: boolean) => void;
configSettings: IImageManipulationConfig;
displayMode: DisplayMode;
altText:string;
altText: string;
}
export interface IImageManipulationState {
settingPanel: SettingPanelType;
redosettings: IImageManipulationSettings[];
lockAspectCrop: boolean;
lockAspectResize: boolean;
}
export class ImageManipulation extends React.Component<IImageManipulationProps, IImageManipulationState> {
@ -82,7 +84,9 @@ export class ImageManipulation extends React.Component<IImageManipulationProps,
this.state = {
settingPanel: SettingPanelType.Closed,
redosettings: []
redosettings: [],
lockAspectCrop: true,
lockAspectResize: true
};
this.openPanel = this.openPanel.bind(this);
this.setRotate = this.setRotate.bind(this);
@ -110,7 +114,7 @@ export class ImageManipulation extends React.Component<IImageManipulationProps,
this.img = new Image();
this.img.src = url;
this.img.crossOrigin = 'Anonymous';
this.img.alt=this.props.altText?this.props.altText:'Untitled image';
this.img.alt = this.props.altText ? this.props.altText : 'Untitled image';
this.img.onload = () => {
this.applySettings();
@ -602,17 +606,20 @@ export class ImageManipulation extends React.Component<IImageManipulationProps,
return (<div>
<Checkbox
label={strings.LockAspect}
checked={!isNaN(crop.aspect)}
onChange={() => {
if (isNaN(crop.aspect)) {
this.setCrop(undefined, undefined, undefined, undefined, this.getAspect());
} else {
this.setCrop(undefined, undefined, undefined, undefined, undefined);
}
checked={this.state.lockAspectCrop}
onChange={(e, checked) => {
// Toggle the lockAspect state when checkbox is checked/unchecked
this.setState({ lockAspectCrop: checked }, () => {
// Call the setCrop function with appropriate arguments based on the new state
if (this.state.lockAspectCrop) {
this.setCrop(undefined, undefined, undefined, undefined, this.getAspect());
} else {
this.setCrop(undefined, undefined, undefined, undefined, undefined);
}
});
}}
/>
<TextField
label={strings.SourceX}
value={'' + crop.sx}
@ -642,13 +649,16 @@ export class ImageManipulation extends React.Component<IImageManipulationProps,
<Checkbox
label={strings.LockAspect}
checked={!isNaN(resize.aspect)}
checked={this.state.lockAspectResize}
onChange={() => {
if (isNaN(resize.aspect)) {
this.setResize(undefined, undefined, this.getAspect());
} else {
this.setResize(undefined, undefined, undefined);
}
this.setState({ lockAspectResize: !this.state.lockAspectResize }, () => {
if (isNaN(resize.aspect)) {
this.setResize(undefined, undefined, this.getAspect());
} else {
this.setResize(undefined, undefined, undefined);
}
})
}}

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

@ -12,12 +12,13 @@
"preconfiguredEntries": [{
"groupId": "5c03119e-3074-46fd-976b-c60198311f70",
"group": { "default": "Other" },
"title": { "default": "react-image-editor" },
"description": { "default": "react-image-editor description" },
"title": { "default": "Advanced Image Editor" },
"description": { "default": "Add an image to the page, resize and edit the image." },
"officeFabricIconFontName": "Page",
"properties": {
"title": "react-image-editor Sample",
"showTitle":true,
"title": "Advanced Image Editor",
"showTitle":false,
"showEditIcon":false,
"settings":[],
"url":""
}

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

@ -79,7 +79,7 @@ export default class ReactImageEditorWebPart extends BaseClientSideWebPart<IReac
})
,
PropertyPaneToggle('showEditIcon', {
label: strings.ShowTitleFieldLabel
label: strings.ShowEditIconFieldLabel
}),
PropertyPaneLabel('urlInfo',{text:`The selected image is at ${this.properties.url?this.properties.url:'Not yet selected'} `})

4
samples/react-image-editor/src/webparts/reactImageEditor/components/ReactImageEditor.tsx
View File

@ -54,11 +54,11 @@ export default class ReactImageEditor extends React.Component<IReactImageEditorP
title={this.props.title}
updateProperty={this.props.updateTitleProperty} />
}
{(isFilePickerOpen || isConfigured) && Environment.type !== EnvironmentType.Local && this.props.showEditIcon &&
{(isFilePickerOpen || (isConfigured && this.props.displayMode === DisplayMode.Edit)) && Environment.type !== EnvironmentType.Local &&
<FilePicker
isPanelOpen={isFilePickerOpen}
accepts={['.gif', '.jpg', '.jpeg', '.png']}
buttonIcon='FileImage'
buttonIcon={'FileImage'}
onSave={(filePickerResult: IFilePickerResult) => {
this.setState({ isFilePickerOpen: false }, () => this._onUrlChanged(filePickerResult.fileAbsoluteUrl));
}}

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

@ -3,7 +3,7 @@ define([], function() {
"PropertyPaneDescription": "",
"BasicGroupName": "Web part configuration",
"ShowTitleFieldLabel": "Show webpart title",
"showEditIcon": "Show edit icon",
"ShowEditIconFieldLabel": "Show edit icon",
"AltTextFieldLabel":"Alt Text"
}