Skip to content

Commit 087097c

Browse files
committed
Add version 2.3.0
1 parent c458b09 commit 087097c

File tree

5 files changed

+138
-17
lines changed

5 files changed

+138
-17
lines changed

CHANGELOG.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
## [2.3.0]
2+
3+
### Added
4+
5+
* Added `PhotoEditorModal` component that can be used instead of the `PESDK.openEditor` function to modally present a photo editor.
6+
17
## [2.2.2]
28

39
### Fixed

README.md

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@
77
<a href="https://npmjs.org/package/react-native-photoeditorsdk">
88
<img src="https://img.shields.io/npm/v/react-native-photoeditorsdk.svg" alt="NPM version">
99
</a>
10+
<a href="https://npmjs.org/package/react-native-photoeditorsdk">
11+
<img src="https://img.shields.io/badge/platforms-android%20|%20ios-lightgrey.svg" alt="Platform support">
12+
</a>
1013
<a href="http://twitter.com/PhotoEditorSDK">
1114
<img src="https://img.shields.io/badge/twitter-@PhotoEditorSDK-blue.svg?style=flat" alt="Twitter">
1215
</a>
@@ -118,7 +121,7 @@ yarn react-native link
118121
Import the module in your `App.js`:
119122

120123
```js
121-
import {PESDK, Configuration} from 'react-native-photoeditorsdk';
124+
import {PESDK, PhotoEditorModal, Configuration} from 'react-native-photoeditorsdk';
122125
```
123126

124127
Unlock PhotoEditor SDK with a license file:
@@ -133,6 +136,12 @@ Open the editor with an image:
133136
PESDK.openEditor(require('./image.jpg'));
134137
```
135138

139+
Or use the component to open the editor:
140+
141+
```jsx
142+
<PhotoEditorModal visible={true} image={require('./image.jpg')}/>
143+
```
144+
136145
Please see the [code documentation](./index.d.ts) for more details and additional [customization and configuration options](./configuration.ts).
137146

138147
For configuring and customizing PhotoEditor SDK beyond these options exposed to JavaScript the iOS bridge provides an [interface for native customization](./ios/RNPhotoEditorSDK.h). Please refer to [our documentation](https://docs.photoeditorsdk.com/?utm_campaign=Projects&utm_source=Github&utm_medium=PESDK&utm_content=React-Native) for more details on native customization.

index.d.ts

Lines changed: 78 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
import {Configuration} from './configuration';
1+
import { Component } from 'react';
2+
import { Configuration } from './configuration';
23

34
declare class PESDK {
45
/**
56
* Modally present a photo editor.
67
* @note EXIF meta data is only preserved in the edited image if and only if the source
78
* image is loaded from a local `file://` resource.
89
*
9-
* @param {string | {uri: string} | number} imageSource The source of the image to be edited.
10+
* @param {string | {uri: string} | number} image The source of the image to be edited.
1011
* Can be either an URI (local, remote, data resource, or any other registered scheme for the
1112
* React Native image loader), an object with a member `uri`, or an asset reference which can
12-
* be optained by, e.g., `require('./image.png')` as `number`.
13+
* be optained by, e.g., `require('./image.png')` as `number`. If this parameter is `null`,
14+
* the `serialization` parameter must not be `null` and it must contain an embedded source image.
1315
* @param {Configuration} configuration The configuration used to initialize the editor.
1416
* @param {object} serialization The serialization used to initialize the editor. This
1517
* restores a previous state of the editor by re-applying all modifications to the loaded
@@ -22,7 +24,7 @@ declare class PESDK {
2224
* `null` is returned instead.
2325
*/
2426
static openEditor(
25-
imageSource: string | {uri: string} | number,
27+
image: string | {uri: string} | number,
2628
configuration: Configuration,
2729
serialization: object
2830
): Promise<{image: string, hasChanges: boolean, serialization: object}>
@@ -49,5 +51,76 @@ declare class PESDK {
4951
): Configuration
5052
}
5153

52-
export {PESDK};
54+
/**
55+
* Props for the `PhotoEditorModal` component.
56+
*/
57+
interface PhotoEditorModalProps {
58+
/**
59+
* This prop determines whether your modal is visible.
60+
*/
61+
visible: boolean;
62+
63+
/**
64+
* This prop determines the source of the image to be edited.
65+
* Can be either an URI (local, remote, data resource, or any other registered scheme for the
66+
* React Native image loader), an object with a member `uri`, or an asset reference which can
67+
* be optained by, e.g., `require('./image.png')` as `number`.
68+
*
69+
* If this prop is `null`, the `serialization` prop must not be `null` and it must contain an
70+
* embedded source image.
71+
*
72+
* @note EXIF meta data is only preserved in the edited image if and only if the source
73+
* image is loaded from a local `file://` resource.
74+
*/
75+
image?: string | {uri: string} | number;
76+
77+
/**
78+
* This prop determines the configuration used to initialize the editor.
79+
*/
80+
configuration?: Configuration;
81+
82+
/**
83+
* This prop determines the serialization used to initialize the editor. This
84+
* restores a previous state of the editor by re-applying all modifications to the loaded
85+
* image.
86+
*/
87+
serialization?: object;
88+
89+
/**
90+
* This prop determines the callback function that will be called when the user exported an image.
91+
*
92+
* The object passed to this callback includes the edited `image`, an indicator (`hasChanges`) whether
93+
* the input image was modified at all, and all modifications (`serialization`) applied to the input image
94+
* if `export.serialization.enabled` of the `configuration` prop was set.
95+
*/
96+
onExport: ({image: string, hasChanges: boolean, serialization: object}) => void;
97+
98+
/**
99+
* This prop determines the callback function that will be called when the user dissmisses the editor without
100+
* exporting an image.
101+
*/
102+
onCancel?: () => void;
103+
104+
/**
105+
* This prop determines the callback function that will be called when an error occurs.
106+
*/
107+
onError?: (error: Error) => void;
108+
}
109+
110+
/**
111+
* State for the `PhotoEditorModal` component.
112+
*/
113+
interface PhotoEditorModalState {
114+
/**
115+
* This state determines whether the modal is visible.
116+
*/
117+
visible: boolean;
118+
}
119+
120+
/**
121+
* A component that wraps the `PESDK.openEditor` function to modally present a photo editor.
122+
*/
123+
declare class PhotoEditorModal extends Component<PhotoEditorModalProps, PhotoEditorModalState> {}
124+
125+
export { PESDK, PhotoEditorModal };
53126
export * from './configuration';

index.js

Lines changed: 43 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import {NativeModules, Image, Platform} from 'react-native';
2-
import {createDefaultConfiguration, Configuration} from './configuration';
1+
import { Component } from 'react';
2+
import { NativeModules, Image, Platform } from 'react-native';
3+
import { Configuration, createDefaultConfiguration } from './configuration';
34

4-
const {RNPhotoEditorSDK} = NativeModules;
5+
const { RNPhotoEditorSDK } = NativeModules;
56

67
function resolveStaticAsset(assetSource, extractURI = true) {
78
const resolvedSource = Image.resolveAssetSource(assetSource);
@@ -92,10 +93,11 @@ class PESDK {
9293
* @note EXIF meta data is only preserved in the edited image if and only if the source
9394
* image is loaded from a local `file://` resource.
9495
*
95-
* @param {string | {uri: string} | number} imageSource The source of the image to be edited.
96+
* @param {string | {uri: string} | number} image The source of the image to be edited.
9697
* Can be either an URI (local, remote, data resource, or any other registered scheme for the
9798
* React Native image loader), an object with a member `uri`, or an asset reference which can
98-
* be optained by, e.g., `require('./image.png')` as `number`.
99+
* be optained by, e.g., `require('./image.png')` as `number`. If this parameter is `null`,
100+
* the `serialization` parameter must not be `null` and it must contain an embedded source image.
99101
* @param {Configuration} configuration The configuration used to initialize the editor.
100102
* @param {object} serialization The serialization used to initialize the editor. This
101103
* restores a previous state of the editor by re-applying all modifications to the loaded
@@ -107,13 +109,13 @@ class PESDK {
107109
* of the `configuration` was set. If the editor is dismissed without exporting the edited image
108110
* `null` is returned instead.
109111
*/
110-
static openEditor(imageSource, configuration = null, serialization = null) {
112+
static openEditor(image = null, configuration = null, serialization = null) {
111113
resolveStaticAssets(configuration)
112-
const image = resolveStaticAsset(imageSource, Platform.OS == 'android');
114+
const source = resolveStaticAsset(image, Platform.OS == 'android');
113115
if (Platform.OS == 'android') {
114-
return RNPhotoEditorSDK.present(image, configuration, serialization != null ? JSON.stringify(serialization) : null);
116+
return RNPhotoEditorSDK.present(source, configuration, serialization != null ? JSON.stringify(serialization) : null);
115117
} else {
116-
return RNPhotoEditorSDK.present(image, configuration, serialization);
118+
return RNPhotoEditorSDK.present(source, configuration, serialization);
117119
}
118120
}
119121

@@ -144,5 +146,36 @@ class PESDK {
144146
}
145147
}
146148

147-
export {PESDK};
149+
class PhotoEditorModal extends Component {
150+
state = {
151+
visible: false
152+
}
153+
154+
static getDerivedStateFromProps = (props, state) => {
155+
const { image, configuration, serialization, onExport, onCancel, onError } = props;
156+
if (props.visible && !state.visible) {
157+
PESDK.openEditor(image, configuration, serialization).then(result => {
158+
if (result !== null) {
159+
onExport(result);
160+
} else {
161+
if (onCancel) {
162+
onCancel();
163+
}
164+
}
165+
}).catch((error) => {
166+
if (onError) {
167+
onError(error);
168+
}
169+
});
170+
}
171+
172+
return ({ visible: props.visible })
173+
}
174+
175+
render() {
176+
return null;
177+
}
178+
}
179+
180+
export { PESDK, PhotoEditorModal };
148181
export * from './configuration';

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "react-native-photoeditorsdk",
33
"title": "React Native module for PhotoEditor SDK",
4-
"version": "2.2.2",
4+
"version": "2.3.0",
55
"description": "A React Native module for PhotoEditor SDK. Integrate the photo editor into your own HTML5, iOS or Android app - in minutes!",
66
"main": "index.js",
77
"typings": "index.d.ts",

0 commit comments

Comments
 (0)